.jeSuisPasLa {
    display: none;
}

.cercle {
    height: 100px;
    width: 100px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    border: 5px solid rgba(0, 0, 0, 1);
    border-radius: 50%;
}

#buttonCV {
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

#buttonCV:hover {
    animation: animate 8s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

#buttonCV:before {
    /* https://www.youtube.com/watch?v=pdH5X2mXzPk */
    content: '';
    /*  position: absolute;  */
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    filter: blur(20px);
}

#buttonCV:hover:before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

.hidden {
    display: none;
}

#menuPortable {
    display: none;
}

#contenu1 {
    z-index: 1;
    position: relative;
    white-space: nowrap;
    display: inline;
    padding: 5px
}

#defil1 {
    z-index: 1;
    position: relative;
    width: 100%;
    border: 1px solid #C0C0C0;
    overflow: hidden;
    background-color: lightgreen;
}

#presentationRootMe {
    margin-top: 4%;
}

.textCenter {
    text-align: center;
}

.correctionProbHautNiveau6 {
    margin-top: 6%;
}

.centerImg {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.centerDefil {
    display: block;
    align-self: center;
}

.none {
    display: none;
}

#imageColle3 {
    display: flex;
    flex-direction: column;
}

.specialColle3 {
    width: auto;
    height: 100%;
}

#modalDebutantPorfolio {
    width: 100%;
}

.caseTiers {
    width: 30%;
}

.caseMoitie {
    width: 50%;
}

.hauteurMoitie {
    height: 50%;
    align-self: center;
}

.modal-header {
    margin-top: 4%;
}

#lienExpertModal {
    margin-right: 30%;
}

#lienAvanceModal {
    margin-right: 30%;
}

#lienDebutantModal {
    margin-right: 30%;
}

.colonne {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.colonne>img {
    width: 100%;
    height: auto;
    margin-bottom: 5%;
}

.modal {
    color: black;
}

.modal-title {
    margin-left: 40%;
    font-size: 24px;
}

.modal-body {
    display: flex;
}

.modal-body>article {
    max-width: 20%;
}

.modal-dialog {
    max-width: 60%;
}

.paquetDe4 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 5%;
    width: 90%;
    height: auto;
}

.row {
    display: flex;
    flex-direction: row;
}

.espace100 {
    width: 100%;
    justify-content: space-around;
}

.bleuFluo:hover {
    background: #00bcff;
}

#wireshark {
    width: 20%;
    height: auto;
}

#fleche1 {
    float: right;
}

#fleche2 {
    float: right;
}

.closable {
    margin: 0 0 19px 0;
    border-bottom: 1px solid #d2d2d2;
    cursor: pointer;
    position: relative;
}

.foldableIcon {
    position: absolute;
    top: 25%;
    right: 5%;
    display: inline-block;
    transform: rotate(90deg);
}

.betterToRead {
    margin-left: 120px;
    margin-right: 120px;
}

.imgRight {
    float: right;
}

#closable1 {
    border-bottom: 1px solid #d2d2d2;
}

.closable__button {
    position: relative;
    cursor: pointer;
    padding-right: 25px;
}

.main-navigation ul li {
    display: inline-block;
    font-size: 13px;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

html {
    scroll-behavior: smooth;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

main {
    background-color: #fcfcfc;
    font-family: Calibri, sans-serif;
    font-size: 11pt;
    padding-right: 0px;
    padding-left: 0px;
}

.main-navigation {
    margin: 0 -35px;
    background: #343538;
    font-size: 0;
    z-index: 1499;
}

.full-container {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.main-navigation ul {
    text-align: center;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.pMoreEasyToRead {
    margin-left: 60px;
}

.main-navigation ul li a {
    transition: all 0.4s ease;
    padding: 20px 35px;
    line-height: 1em;
    box-sizing: border-box;
}

.main-navigation ul li:hover>a,
.main-navigation ul li.focus>a {
    background: #00bcff;
    color: #ffffff;
}

.full-container {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.main-navigation a {
    display: block;
    text-decoration: none;
    color: #e2e2e2;
    font-weight: bold;
}

#titre {
    color: wheat;
    font-size: 3rem;
    font-weight: 600;
    hyphens: manual;
    text-align: center;
    word-wrap: break-word;
    line-height: 1.6em;
    margin-top: 0.8em;
}

#presentation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: 6em;
    font-size: 1.2rem;
}

#presentationGauche {
    width: 46.66%;
}

.image {
    width: 50%;
}

.image img {
    /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
    -webkit-transition: all 1s ease;
    /* Safari et Chrome */
    -moz-transition: all 1s ease;
    /* Firefox */
    -ms-transition: all 1s ease;
    /* Internet Explorer 9 */
    -o-transition: all 1s ease;
    /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    /* L'image est grossie de 25% */
    -webkit-transform: scale(1.25);
    /* Safari et Chrome */
    -moz-transform: scale(1.25);
    /* Firefox */
    -ms-transform: scale(1.25);
    /* Internet Explorer 9 */
    -o-transform: scale(1.25);
    /* Opera */
    transform: scale(1.25);
}

#presentation #presentationGauche img {
    width: 100%;
    border-radius: 69px 69px 69px 69px;
    vertical-align: middle;
    height: auto;
    transition-duration: .3s;
    transition-property: transform;
    margin: 4px 4px 4px 4px;
    animation-name: zoomIn;
    animation-duration: 1.25s;
}

#presentation #presentationDroite {
    width: 42.732%;
    font-size: 22px;
    font-weight: normal;
    font-style: oblique;
    text-decoration: none;
    line-height: 1em;
    animation-duration: 1.25s;
    animation-name: fadeInRight;
    text-align: left;
    columns: 1;
    column-gap: 0px;
    -webkit-transition: background .3s, border .3s, -webkit-border-radius .3s, -webkit-box-shadow .3s;
    transition: background .3s, border .3s, -webkit-border-radius .3s, -webkit-box-shadow .3s;
    -o-transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, -webkit-border-radius .3s, -webkit-box-shadow .3s;
}

#presentationDroite p {
    color: white;
}

b,
strong {
    font-weight: 700;
    font-weight: bold;
}

p {
    margin: 1em 0;
    color: #707070;
}

#CV {
    min-height: 1px;
    width: 100%;
    text-align: center;
    margin-top: 2%;
    padding-bottom: 4%;
}

#MesCompetences {
    width: 100%;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 0px 0px 100px 0px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    hyphens: manual;
    word-wrap: break-word;
    color: white;
}

#Competence {
    max-width: 1140px;
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    box-sizing: border-box;
}

.separator {
    height: 132px;
}

#div2Circles {
    display: flex;
    justify-content: space-around;
}

.technologies {
    margin: 60px 0 0;
}

.technologies h3 {
    min-height: unset;
    margin: 20px auto;
    color: black;
}

.w-100 {
    width: 100% !important;
}

.container {
    max-width: 1170px;
}

.row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

#titreCompetence {
    color: black;
    font-size: 65px;
    font-weight: 600;
    font-family: "Roboto", Sans-serif;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 1.25s;
    margin-bottom: 20px;
}

.center {
    text-align: center;
    width: 100%;
}

body.sticky-menu .site-navigation.sticky {
    position: fixed;
    top: 0;
}

body.sticky-menu.layout-full .site-navigation {
    right: 0;
    left: 0;
    margin-right: 0;
    margin-left: 0;
    z-index: 1499;
}

nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin-right: 0;
    margin-left: 0;
    z-index: 1499;
}

#blocExpert {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #686868;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 5px 5px 5px 5px;
    padding: 55px 55px 55px 55px;
    width: 33.33%;
    height: 300px;
    cursor: pointer;
}

#blocExpert:hover {
    background: orange;
    transition: ease;
    transition-duration: 2s;
}

#blocIntermediaire {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #686868;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 5px 5px 5px 5px;
    padding: 55px 55px 55px 55px;
    width: 33.33%;
    height: 300px;
    cursor: pointer;
}

#blocIntermediaire:hover {
    background: orange;
    transition: ease;
    transition-duration: 2s;
}

#blocDebutant {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #686868;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 5px 5px 5px 5px;
    padding: 55px 55px 55px 55px;
    width: 33.33%;
    height: 300px;
    cursor: pointer;
}

#blocDebutant:hover {
    background: orange;
    transition: ease;
    transition-duration: 2s;
}

#troisCases {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: auto;
}

.titreCase {
    font-size: 69px;
    font-weight: 500;
}

.paragrapheCase {
    color: white;
    font-weight: bold;
    text-align: center;
}

#MesExperiencesProfessionnel {
    background-color: #4054B2;
    width: 100%;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 100px 0px 100px 0px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    hyphens: manual;
    word-wrap: break-word;
    color: white;
    flex-direction: column;
}

#MesFormations {
    background-color: #304866;
    width: 100%;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 100px 0px 100px 0px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    hyphens: manual;
    word-wrap: break-word;
    color: white;
}

#MonPortfolio {
    background-color: #303D66;
    min-height: calc(100vh - 50px);
    position: relative;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 70px 0;
}

#titreProfessionnel {
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 600;
    font-family: "Roboto", Sans-serif;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 1.25s;
    margin-bottom: 20px;
}

#titreFormation {
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 600;
    font-family: "Roboto", Sans-serif;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 1.25s;
    margin-bottom: 20px;
}

#MonPortfolio h2 {
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 600;
    font-family: "Roboto", Sans-serif;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 1.25s;
    margin-bottom: 20px;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 1.25s;
}

#professionnel {
    max-width: 1140px;
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    color: white;
}

#formations {
    max-width: 1140px;
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    box-sizing: border-box;
}

.sectionTitre {
    width: 1841px;
    left: -380.5px;
}

#sectionTitreProfessionnel {
    width: 100%;
    background-color: #4054B2;
}

#TexteMesExperiencesProfessionnel {
    padding: 0% 0% 0% 20%;
    width: 100%;
}

.white {
    color: white;
    font-weight: bold;
    font-size: 1.6em;
}

#separatorBetweenExpProAndForm {
    background-color: #4054B2;
}

#separatorBetweenSkillAndExpPro {
    background-color: black;
}

#separatorBetweenFormAndPortfolio {
    background-color: #304866;
}

footer {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 30px;
    padding-bottom: 30px;
    background: #2f3033;
}

footer div {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

.whiteNoBold {
    color: white;
}

.titreDiv {
    color: white;
    font-size: 20px;
}

.divPortfolio {
    width: 25%;
}

.row {
    display: flex;
    flex-direction: row;
}

h1,
h2,
h3,
h4 {
    text-align: center;
}

#portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 3;
}

#portfolio article {
    cursor: pointer;
    height: 400px;
    width: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    text-align: justify;
    margin: 20px;
    z-index: 3;
    transition: box-shadow .4s;
    background-color: #fff;
}

#portfolio article a {
    text-decoration: none;
    color: #000;
}

#portfolio article:hover {
    box-shadow: 10px 10px 10px 10px #ccc;
}

#portfolio article img {
    display: block;
    width: 100%;
    height: 40%;
    position: relative;
    left: 0;
    transition: width .4s, left .4s;
}

#portfolio article:hover img {
    width: 120%;
    left: -10%;
}

#portfolio article div {
    padding: 10px 15px;
    position: relative;
    height: 230px;
    background-color: #fff;
    top: 0;
    transition: top .4s, height .4s;
    width: 100%;
}

#portfolio article:hover div {
    height: 287px;
    top: -90px;
}

#portfolio article div p:first-child {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 20px;
}

#portfolio article div p:nth-child(2) {
    height: 125px;
    overflow: hidden;
    transition: height .4s;
}

#portfolio article:hover div p:nth-child(2) {
    height: 180px;
}

#portfolio article div ul {
    position: absolute;
    display: flex;
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

#portfolio article div ul li {
    text-decoration: none;
    background-color: #2c3e50;
    transition: background-color .4s;
    color: #fff;
    padding: 3px 10px;
    margin: 0 10px 0 0;
    border-radius: 2em;
    margin-top: -40%;
}

#modalExpertPorfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 3;
    justify-content: space-around;
    flex-direction: row;
}

#modalExpertPorfolio article {
    cursor: pointer;
    height: 400px;
    width: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    text-align: justify;
    margin: 20px;
    z-index: 3;
    transition: box-shadow .4s;
    background-color: #fff;
}

#modalExpertPorfolio article a {
    text-decoration: none;
    color: #000;
}

#modalExpertPorfolio article:hover {
    box-shadow: 10px 10px 10px 10px #ccc;
}

#modalExpertPorfolio article img {
    display: block;
    width: 100%;
    height: 40%;
    position: relative;
    left: 0;
    transition: width .4s, left .4s;
}

#modalExpertPorfolio article:hover img {
    width: 120%;
    left: -10%;
}

#modalExpertPorfolio article div {
    padding: 10px 15px;
    position: relative;
    height: 230px;
    background-color: #fff;
    top: 0;
    transition: top .4s, height .4s;
    width: 100%;
}

#modalExpertPorfolio article:hover div {
    height: 287px;
    top: -90px;
}

#modalExpertPorfolio article div p:first-child {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 20px;
}

#modalExpertPorfolio article div p:nth-child(2) {
    height: 125px;
    overflow: hidden;
    transition: height .4s;
}

#modalExpertPorfolio article:hover div p:nth-child(2) {
    height: 180px;
}

#modalExpertPorfolio article div ul {
    position: absolute;
    display: flex;
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

#modalExpertPorfolio article div ul li {
    text-decoration: none;
    background-color: #2c3e50;
    transition: background-color .4s;
    color: #fff;
    padding: 3px 10px;
    margin: 0 10px 0 0;
    border-radius: 2em;
    margin-top: -40%;
}

#modalAvancePorfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 3;
    justify-content: space-around;
    flex-direction: row;
}

#modalAvancePorfolio article {
    cursor: pointer;
    height: 400px;
    width: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    text-align: justify;
    margin: 20px;
    z-index: 3;
    transition: box-shadow .4s;
    background-color: #fff;
}

#modalAvancePorfolio article a {
    text-decoration: none;
}

#modalAvancePorfolio article:hover {
    box-shadow: 10px 10px 10px 10px #ccc;
}

#modalAvancePorfolio article img {
    display: block;
    width: 100%;
    height: 40%;
    position: relative;
    left: 0;
    transition: width .4s, left .4s;
}

#modalAvancePorfolio article:hover img {
    width: 120%;
    left: -10%;
}

#modalAvancePorfolio article div {
    padding: 10px 15px;
    position: relative;
    height: 230px;
    background-color: #fff;
    top: 0;
    transition: top .4s, height .4s;
    width: 100%;
}

#modalAvancePorfolio article:hover div {
    height: 287px;
    top: -90px;
}

#modalAvancePorfolio article div p:first-child {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 20px;
}

#modalAvancePorfolio article div p:nth-child(2) {
    height: 125px;
    overflow: hidden;
    transition: height .4s;
}

#modalAvancePorfolio article:hover div p:nth-child(2) {
    height: 180px;
}

#modalAvancePorfolio article div ul {
    position: absolute;
    display: flex;
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

#modalAvancePorfolio article div ul li {
    text-decoration: none;
    background-color: #2c3e50;
    transition: background-color .4s;
    color: #fff;
    padding: 3px 10px;
    margin: 0 10px 0 0;
    border-radius: 2em;
    margin-top: -40%;
}

#modalDebutantPorfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 3;
    justify-content: space-around;
    flex-direction: row;
}

#modalDebutantPorfolio article {
    cursor: pointer;
    height: 400px;
    width: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    text-align: justify;
    margin: 20px;
    z-index: 3;
    transition: box-shadow .4s;
    background-color: #fff;
}

#modalDebutantPorfolio article a {
    text-decoration: none;
    color: #000;
}

#modalDebutantPorfolio article:hover {
    box-shadow: 10px 10px 10px 10px #ccc;
}

#modalDebutantPorfolio article img {
    display: block;
    width: 100%;
    height: 40%;
    position: relative;
    left: 0;
    transition: width .4s, left .4s;
}

#modalDebutantPorfolio article:hover img {
    width: 120%;
    left: -10%;
}

#modalDebutantPorfolio article div {
    padding: 10px 15px;
    position: relative;
    height: 230px;
    background-color: #fff;
    top: 0;
    transition: top .4s, height .4s;
    width: 100%;
}

#modalDebutantPorfolio article:hover div {
    height: 287px;
    top: -90px;
}

#modalDebutantPorfolio article div p:first-child {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 20px;
}

#modalDebutantPorfolio article div p:nth-child(2) {
    height: 125px;
    overflow: hidden;
    transition: height .4s;
}

#modalDebutantPorfolio article:hover div p:nth-child(2) {
    height: 180px;
}

#modalDebutantPorfolio article div ul {
    position: absolute;
    display: flex;
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

#modalDebutantPorfolio article div ul li {
    text-decoration: none;
    background-color: #2c3e50;
    transition: background-color .4s;
    color: #fff;
    padding: 3px 10px;
    margin: 0 10px 0 0;
    border-radius: 2em;
    margin-top: -40%;
}

.liMentalix {
    margin-top: -20% !important;
}

.texteTitreFormation {
    font-size: 1.4em;
    color: white;
    font-weight: bold;
    list-style-type: none;
}

.texteFormation {
    font-size: 1.1em;
    color: white;
    font-weight: bold;
    list-style-type: none;
}

#Contacts {
    background-color: orange;
    width: 100%;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 100px 0px 100px 0px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    font-family: inherit;
    font-size: 1.3em;
    font-style: inherit;
    font-weight: inherit;
    hyphens: manual;
    word-wrap: break-word;
    color: white;
    text-align: center;
    flex-direction: column;
}

#separatorBetweenPortfolioAndContacts {
    background-color: #303D66;
}

#imageProgres {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

#Contacts a {
    display: block;
    margin: 0 10px;
}

#Contacts img {
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px #ccc;
    transition: .4s box-shadow
}

#Contacts a:active img {
    box-shadow: none
}

hr {
    margin: 50px auto;
    width: 100px
}

#Contacts .form,
#Contacts .form form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 20px
}

#Contacts .form form {
    max-width: 700px
}

#Contacts .form h3 {
    margin-bottom: 20px
}

#Contacts .form input,
#Contacts .form textarea {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 5px;
    font-size: 1em
}

#Contacts .form textarea {
    resize: vertical;
    min-height: 200px;
    font-family: Arial, Helvetica, sans-serif
}

#Contacts .form input[type=submit] {
    border: none;
    font-size: .7em;
    max-width: 150px;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 2px 2px 10px #ccc;
    transition: .4s box-shadow
}

#Contacts .form input[type=submit]:active {
    box-shadow: none;
    margin-bottom: 50px
}

:valid {
    box-shadow: 0 0 2px 1px green;
}

:invalid {
    box-shadow: 0 0 2px 1px red;
}

.correctionProbHaut {
    margin-top: 2%;
}

.row-fluid {
    max-width: 1150px;
    margin: 0 auto;
    width: 100%;
    text-align: justify;
}

.dessusCarte {
    border-bottom: 1px dashed #86b827;
    text-align: center;
    padding: 4px;
    background-color: #eee;
}

.map {
    padding-top: 4px;
    text-align: center;
    width: 65.81196581196582%;
    display: block;
    float: left;
    box-sizing: border-box;
}

.map2 {
    position: relative;
    height: 300px;
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    background: #ddd;
    outline: 0;
    cursor: webkit grab;
    cursor: -moz-grab;
    cursor: grab;
    overflow: hidden;
    touch-action: none;
    text-align: center;
}

.salle {
    padding-top: 4px;
    width: 31.623931623931625%;
    display: block;
    float: left;
    margin-left: 2.564102564102564%;
    box-sizing: border-box;
}

.imgSalle {
    height: 295px;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    text-align: center;
}

#maCarte {
    height: 300px;
}

.row2 {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.h2SouligneEnVert {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    text-align: center;
    font-size: 1.6em;
    font-weight: 500;
    color: #000;
    border-bottom: 2px solid #86b827;
}

#lienCertificat {
    display: flex;
    margin-top: 5%;
}

.technologies_outer {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}

.label_box:hover {
    box-shadow: 0 4px 30px rgba(26, 16, 62, .3);
    background: #f5f5f5;
}

.label_box {
    background: #fff;
    box-shadow: 0 4px 30px rgba(26, 16, 62, .1);
    font-family: "Gilroy-Medium";
    font-size: 16px;
    height: 50px;
    border-radius: 25px;
    padding: 0 19px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    top: 4px;
    left: 24px;
    min-width: 111px;
    margin-bottom: 0;
    color: black;
}

.label_box.label_box_2 {
    top: 28%;
    left: -10%;
}

.label_box.label_box_3 {
    top: 56%;
    left: -9%;
}

.label_box.label_box_4 {
    top: 28%;
    left: unset;
    right: -5%;
}

.label_box.label_box_5 {
    top: 56%;
    left: unset;
    right: -9%;
}

.label_box.label_box_6 {
    top: unset;
    bottom: 0;
    left: unset;
    right: 12%;
}

.label_box.label_box_7 {
    left: unset;
    right: 15%;
}

.label_box img {
    margin-right: 10px;
}

.outer_circle {
    position: relative;
    width: 446px;
    height: 446px;
    border-radius: 100%;
    border: 1px solid rgba(38, 27, 76, .1);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    z-index: 0;
}


/*.outer_circle::after {
    width: 304px;
    height: 304px;
    background: linear-gradient(206.38deg, rgba(136, 37, 191, .5) 13.06%, rgba(253, 128, 14, .5) 99.38%);
}

.outer_circle::after,
.outer_circle::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    border-radius: 100%;
}*/

#java {
    width: 20%;
}

#php {
    width: 26%;
}

#html5 {
    width: 25%;
}

#flask {
    width: 24px;
}

svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.vague {
    display: inline-block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

#sectionPresentation {
    background: #140b34;
    padding-top: 1%;
}

.PasEncoreAppris {
    display: none;
}