*{margin:0;padding:0;}
@font-face {
    src:url("https://fonts.googleapis.com/css?family=Lato:300,400,100")
}
@font-face {
    src:url("https://fonts.googleapis.com/css?family=Lobster+Two")
}
@font-face {
    src:url("https://fonts.googleapis.com/css?family=Righteous")
}
html,body{height:100vh;max-width:100vw;overflow: none;}
body{background-color:#0b0b0b;color:wheat;margin:0 auto;padding:0;z-index:0;max-width:100vw;}
#content{max-width: 100vw; overflow: hidden;}
::-webkit-scrollbar{width:1px;height:1px;background:none;}
.fleche{position:fixed;top:50%;font-size:3em;line-height:1em;color:#DDD;cursor:pointer;z-index:1000;opacity:0.3;}
.fleche:hover{color:#BCD;}
.droite{right:0;}
.gauche{left:0;}
.left, .right{padding:5px 5px; margin-bottom:120px;}
.left{float:left;}
.right{float:right; margin-bottom:120px;}
.col50{display:inline-block;width:48%;}
.col30{width:30.3%;}
#content{margin:auto;width:100%;height:99.9vh;padding-top:1em;padding-left:1em;}
.article1{height:100vh;width:90%;text-align:center;}
.article{margin-left:30px;margin-right:5px;}
.logo{width:75vw;height:75vh;animation:bounceIn 2s both 1s;}
.fond {z-index:100;padding:0 2% 15% 2%;width:100vw;}
.fond1{z-index:200;padding:1% 0 0 0;width:95vw;}
.fond2{z-index:300;padding:2% 25% 8% 10%;width:95vw;}
.fond3{z-index:500;padding:2% 5% 2% 5%;width:95vw;}
.fond6{z-index:300;padding:1% 2% 2% 12%;width:55vw;}
.fond7{z-index:300;padding:0 2% 2% 1%;width:95vw;}
.fond8{z-index:200;padding:1% 1% 2% 5%;width:95vw;}
.fond4{z-index:400;padding:2% 10% 2% 10%;width:100vw;}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{position: absolute; font-weight: bold; font-size: 2em; top:64px; color:white; background: red; border-radius: 50%; height: 30px; width: 30px; line-height: 30px;}

header{background:#028090;background-image:linear-gradient(-45deg, #028090 15%, #1a1a1a 100%);border-bottom:1px solid white;box-shadow:#1a1a1a 0 10px 12px;z-index:99999;}
@keyframes bounceIn{0%{transform:scale(0.1);opacity:0;}
    60%{transform:scale(1.2);opacity:1;}
    100%{transform:scale(1);}
}
::selection,::-webkit-selection{background-color:#05668D;}
@keyframes fade-in-left{0%{transform:translateX(-500px);opacity:0;}
    100%{transform:translateX(0);opacity:1;}
}
.fade-in-left{animation-name:fade-in-left;}
@keyframes fade-out-left{0%{transform:translateX(0);opacity:1;}
    100%{transform:translateX(-500px);opacity:0;}
}
.fade-out-left{animation-name:fade-out-left;}
.sidebar,
.sidebar-wave{position:absolute;left:0;top:0;bottom:0;z-index:100;background:rgba(15,15,53,0.6);}
nav.menus{position:absolute;}
.sidebar{left:-200px;height:100%;width:200px;transform:translateX(0);transition:transform 0.4s;}
.sidebar a{text-align:center;display:block;height:66px;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid #2b333c;line-height:66px;color:rgba(255,255,255,.4);transform:translateX(-200px);transition:color 0.4s;font-size:1.3em;}
.sidebar a:focus,
.sidebar a:hover{text-decoration:none;background-color:rgba(255,255,255,.05);color:#FFF;}
.sidebar-wave{left:0;right:0;width:100%;height:100%;fill:#02303e;z-index:-1;transform:scaleX(-1);filter:FlipH;-ms-filter:'FlipH';}
.has-sidebar .sidebar{transform:translatex(200px);}
.bouton{color:#FFF;font-size:2em;padding:2px;margin:30px 0 0 30px;width:20px;height:20px;line-height:20px;border:none;background:none;}
.menus{max-height:100px;z-index:1;}
#portrait li{background:#b2b2b2;margin:20px 20px 20px 0;padding:0;display:inline-block;width:220px;height:230px;text-align:center;border-top-right-radius:12px;border-top-left-radius:12px;z-index:888888;}
#portrait li figcaption.member{background:none;}

#portrait li p.reseau{display:list-item; list-style:none;width:0;height:180px;transition: .3s;}
#portrait li p.reseau span{display:list-item; list-style:none;width:0;height:90px;;transition:all 0.3s ease-in-out;}
#portrait li p.reseau span:hover,
#portrait li:hover p.reseau span:hover,
#portrait li:focus p.reseau span:focus{background-color:darkgreen;box-shadow:inset 0 3px 12px black;}
#portrait li p.reseau span.facebook{background:url('../img/facebook.png') center center no-repeat;background-color:#3b5998;}
#portrait li p.reseau span.twitter{background:transparent url('../img/twitter.png') center center no-repeat;background-color:#33ccff;border-top-left-radius:12px;}
#portrait li:hover p.reseau, #portrait li:hover p.reseau span{display:block;width:40px;}

a.link{text-align:center;color:white;font-size:1.3em;}

.borderLeft{border-left:2px solid #f5deb35a;}
.imgEntr{min-width: 100px; width: 100px; height: 100px; max-height: 100px; border-radius: 50%;margin:0 auto;}
.flexPres{display: flex; align-content: space-between; padding-top: 15px;}
.flexEntr{display: flex; text-align: left; flex-direction: row;}
.ulEntr{list-style: none; margin-left: 15px;}
.logoReseaux{width:80%;}
.textCenter{text-align: center;}
.space{height: 20px; width: 100%;}
div.divCenterPres{text-align: center; margin: 0; float: none;}
hr.hrPresentation{border-top: 1px dashed;border-bottom: 0;width: 60%;}
#portrait{float:left; margin: -13px 0 11px 22px; padding: 1px;}
div.presentation{font-family:'Lobster', cursive;font-size:1em;font-weight:200; text-align: justify; margin: 0 20px;}
div .right .presentation{margin-top:-25px}
#portrait li figure{margin:0;padding:0;}
#portrait li figcaption{margin:0;padding:0;transition:all 0.3s ease-in-out;}
#portrait li figcaption span{margin:0;padding:0;}
#portrait li figcaption.image{display:inline-block;width:220px;height:180px;text-align:center;float:right;}
#portrait li figcaption.image img{margin:0;padding:0;height:180px;}
#portrait li:hover figcaption.image{width:180px;}

#portrait li p.identity{background-color:#232323;border-top:2px solid wheat;border-bottom:1px solid;border-left:1px solid;border-right:1px solid;text-align:center;display:block;width:100%;height:75px;top:0;float:right;}
#portrait li p.identity span{display:block;width:100%;}
#portrait li p.identity span.name{font-family:'Lobster', cursive;font-size:1.3em;line-height:30px;color:wheat;}
#portrait li p.identity span.role{font-family:'Righteous', cursive;font-size:0.8em;line-height:20px;color:wheat;}
.experiences, .portfolio, .contact, .competences{padding:0 2% 3% 2%;}
.quote{transform:scaleX(-1);filter:FlipH;-ms-filter:"FlipH";background:transparent;height:15px;width:15px;}
.author{float:left;clear:both;}
blockquote{position:relative;font-family:"Segoe Print", "Times New Roman", Verdana;padding:8px;margin:8px 8px 8px 160px;color:black;border-radius:10px;background:white;border:2px solid black;min-height:64px;}
blockquote:after{content:"";position:absolute;left:-48px;display:block;top:64px;background:url('../img/pointe.png') no-repeat;width:48px;height:20px;padding:0;}
.grille figcaption{background-color:#1a1a1a;border-radius:12px;color:#F0F0F0;border: 1px solid gray;}
.grille figcaption a{background-color:#1e6abc;color:wheat;border-radius:12px;font-size:1.2em;}
.grille figcaption a:hover{background-color:#2384bc;}
.grille figcaption h3{color:wheat;}
.folio{border-radius:12px;box-shadow:0 5px 12px black;}
.progressbar{position:relative;background-color:black;width:100%;max-width:585px;height:36px;margin:45px auto;border-bottom:1px solid rgba(255,255,255,0.25);}
.progressbar-title{font-family:'Righteous', cursive;color:wheat;position:absolute;top:0;left:0;width:140px;font-weight:bold;font-size:1.3em;text-align:center;text-shadow:-1px 0 1px black;}
.progressbar-title span{display:block;background:rgba(0, 0, 0, 0.9);z-index:9;border-right:1px solid #1a1a1a;padding:0 20px;height:36px;line-height:37px;background:none;}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea{background:rgba(255,255,255,0.7);font-size:1.4em;border-bottom:rgba(0, 255, 255, 0.3) 1px solid;}
#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form input[type="tel"]:focus,
#contact-form input[type="url"]:focus,
#contact-form textarea:focus{background:rgba(255,255,255,0.9);}
#contact-form button[type="submit"]{background-color:#05668D;color:wheat;box-shadow:0 10px 8px black;border-top:1px white solid;}
#contact-form button[type="submit"]:hover{background-color:#028090;}
#contact-form button[type="submit"]:focus{background-color:#028090;box-shadow:inset 0 10px 8px black;border-bottom:1px white solid;}
#contact-form span{text-align:right;}
.row{display:flex;align-content: flex-end;width: 100%;}
.g-recaptcha{margin-left:20px; max-height: 60px;}
footer{background:#0d0d0d;text-align:center;height:50px;width:100vw;line-height:50px;left:0;bottom:0;border-top:1px rgba(0, 122, 255, 0.2) dashed;position:fixed;z-index:1000000;}
footer p{color:wheat;}
@media screen and (max-width:1020px){header.headerResponsive button{background:transparent url('../img/nav-icon.png') center center no-repeat;position:fixed;}
    .fond,
    .fond1,
    .fond2,
    .fond3,
    .fond6,
    .fond7,
    .fond8{display:none;}
    #slide{display:flex;flex-direction:column;overflow: hidden;}
    .article{margin:2px;}
    div.fleche, .gauche, .droite{display:none;width:0;}
    #content{overflow:auto;}
    #portrait{float:none;text-align:center;}
    .col50{display:inline-block;width:100%;margin-top:1%;margin-bottom:1%;}
    .left{float:none;}
    .right{float:none;margin-bottom:120px;}
    .col30{width:100%;}
    .progress .bar{text-transform:none;font-size:1.1em;}
    .hide{display:none;}
    section{padding:130px 20px 20px 20px;}
    section:first-child{padding:200px 20px 20px 20px;}
    h1{font-size:4em;padding-top:0;margin-top:0;}
    h2.titre_h2{font-size:2.6em;padding-top:0;margin-top:0;}
    h2{font-size:1.4em;}
    hr{margin-top:10px;margin-bottom:10px;}
    div.sidebar, nav.menus{display:none;}
    .titre{background:transparent url('../img/icone.png') center right no-repeat;margin-right:10%;height:40px;text-indent:40px;}
    .row{ flex-direction:column;}
    .g-recaptcha{margin-top:20px;margin-left:0;margin-right:0;}
    .flexEntr {display: flex;flex-direction: column;text-align: left;}
    .borderLeft{border-left:none;}
}
@media screen and (max-width:600px){header.headermobile{display:block;}
    .borderLeft{border-left:none;}
    .flexEntr {display: flex;flex-direction: column;text-align: left;}
    .menumobile{display:block;width:100%;}
    .fond,
    .fond1,
    .fond2,
    .fond3,
    .fond6,
    .fond7,
    .fond8{display:none;}
    #slide{display:flex;flex-direction:column;overflow: hidden;}
    div.fleche, .gauche, .droite{display:none;width:0;}
    #content{overflow:auto;}
    #filter{text-align:center;}
    #filter a{font-size:1em;}
    .progressbarr{position:relative;background-color:black;width:100%;max-width:285px;height:26px;margin:25px auto;border-bottom:1px solid rgba(255,255,255,0.25);}
    .progressbar-title{position:absolute;top:0;left:0;width:90px;font-weight:bold;font-size:0.8em;text-align:center;text-shadow:-1px 0 1px black;}
    .progressbar-title span{display:block;background:rgba(0, 0, 0, 0.9);z-index:9992;border-right:1px solid #1a1a1a;padding:0 20px;height:26px;line-height:27px;background:none;}
    .hide{display:none;}
    ::-webkit-input-placeholder{color:#888;font-size:0.5em;}
    :-moz-placeholder{color:#888;font-size:0.5em;}
    ::-moz-placeholder{color:#888;font-size:0.5em;}
    :-ms-input-placeholder{color:#888;font-size:0.5em;}
    #retour{bottom:30px;right:30px;font-size:0.8em;width:80px;height:30px;}
    section, section:first-child{padding:80px 20px 20px 20px;}
    section{margin:150px 0;display:block;}
    section:first-child{margin-top:0;padding:50px 20px 20px 20px;}
    section:last-child{margin-bottom:100%;}
    h1{font-size:2.5em;padding-top:0;margin-top:0;}
    h2{font-size:1.1em;}
    #slide{display:none;overflow: hidden;}
    div.sidebar, nav.menus{display:none;}
    #rc-imageselect,.g-recaptcha {transform:scale(0.85);transform-origin:0;transform:scale(0.85);transform-origin:0 0;-webkit-transform:scale(0.85);transform:scale(0.85);-webkit-transform-origin:0 0;transform-origin:0 0;}
    }