html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

body{
     font-family: 'Chakra Petch', sans-serif;
     color:#333;
     background-color: #fff;
}
header{
     background-image: url(../img/header-2.jpg);
     background-position: top left;
     background-size: 100%;
     /* height:100vh;  */
     background-repeat: no-repeat;
     background-color: #fffcf7;
}
/* .head{
     display: flex;
     justify-content: space-between;
     align-items:center; 
}*/
.menuNav{
     /* background-color: #f1f1f1; */
     position:fixed;
     top:0;
     width:100%;
     z-index: 1;
}

#navbarNav{
     justify-content: flex-end;
}
@media (max-width: 992px) {
     .navbar-nav{
          background-color: #f8f5f0;
          padding-left: 26px;
     }
}


h1, h2, h3, h4{
     font-weight: 700;
     font-family: 'Chakra Petch', sans-serif;
     color:#1e3032;
}
nav li{
     margin-right:30px;
}
nav li:last-child{
     margin-right: 0;
} 
.navbar-light .navbar-nav .nav-link{
     color:#333;
     transition-duration: 0.3s;
     font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:hover{
     color:#f9b155;
}
.title2{
     font-family: 'Baskervville', serif;
     font-style: italic;
}
.title h2{
     font-size:2rem;
}
.parent{
     /* display: flex;
     justify-content: center;
     align-items: flex-end;
     height:730px;
     padding-bottom: 10%; */

     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     /* padding-top: 5%;
     padding-right: 4.5%; */
}
@media (max-width: 786px) {
     .parent {
          padding-bottom:1%;
          height:300px;
     }

}
/* FIN HEADER */


.about{
     margin-top:20px;
     margin-bottom: 20px;
}
.aboutMe h2{
     text-align: center;
     margin-bottom:10px;
}
.aboutMe{
     margin-bottom:20px;
}
.interets{
     text-align:center;
}
.fa-gamepad, .fa-guitar, .fa-music, .fa-film{
     background-color: #567f84;
     color:#fff;
     padding:10px;
     transition-duration: 0.1s;
     font-size:2.5em;
     border:1px solid #567f84;
     margin-right:15px;
     margin-top:20px;
}
.fa-gamepad:hover, .fa-guitar:hover, .fa-music:hover, .fa-film:hover{
     background-color: #fff;
     color:#567f84;
     border:1px solid #567f84;
}
.parcours{
     background-color: #f8f5f0;
     padding-top:20px;
     padding-bottom: 20px;
}
.parcours h2{
     text-align: center;
}
.timelineInfos2{
     text-align: center;
     border-radius: 8px 0 0 8px;
     color: #1e3032;
}
.timelineContent2{
     background-color: #fff;
     padding:20px;
}
.timelineTitle2{
     font-size: 1.2rem;
     text-transform: uppercase;
     font-weight: 600;
     color: #f9a280;
     letter-spacing: 1.5px;
}
.timelineDescription2{
     text-align: justify;
}
.timelineInfos2 img{
     width:100px;
}
.timelineInfos2 img:first-child{
     width:50px;
}
.parcoursTimeline2{
     background-color: #f9ebe2;
}
.exp{
     letter-spacing: 2px;
     color:#1e3032;
     margin:20px 0;
}
@media (max-width: 786px) {
     .timelineInfos2 {
          padding:17px 0;
     }

}


.formationInfos{
     text-align: center;
     color: #fff;
}
.formationContent{
     background-color: #fff;
     padding:10px 10px 10px 20px;
}
.formationTitle{
     font-size: 1.2rem;
     text-transform: uppercase;
     font-weight: 600;
     color: #567f84;
     letter-spacing: 1.5px;
}

.formationTimeline{
     background-color: #1e3032;
}
.formation{
     letter-spacing: 2px;
     padding-top:40px;
}
.formationContainer{
     background-color: #a2bdbc;
     padding-bottom: 50px;
}
@media (max-width: 786px) {
     .formationInfos {
          padding:17px 0;
     }

}
.skills{
     background-color: #567f84;
     padding:30px 0;
     color:#fff;
}
.skills h2{
     text-align: center;
     color:#fff;
}
.skills h3{
     color:#fff;
}
.skillsContainer{
     display: flex;
     text-align: center;
     margin-top: 50px;
     flex-wrap: wrap;
}
.skillsContent{
     margin-bottom: 30px;
}
/* PAGE LOGIN */
.loginHeader{
     background-image: url(../img/fond_header_blank.jpg);
     background-position: center center;
     background-size: 100%;
     /* height:100vh;  */
     background-repeat: no-repeat;
     background-color: #f1f1f1;
}
.login{
     display: flex;
     justify-content: center;
     align-items: center;
     height:720px;
}

/* FIN PAGE LOGIN */


.test{
     background-color: black;
}

.hideme{
    opacity:0;
}

#str{
     font-family: 'Source Code Pro', monospace;
     font-size: 25px;
     color: #333;
     text-align: center;

     position: absolute;
     top: 205px;
     left: 200px;

}
 
 .str2{
     width: 567px;
     height:509px;
     background-image: url(../img/ordiDecor.png);
     text-align: center;
     position: relative;
 }



 /**/
 #backTop {
     display: inline-block;
     background-color: #f9b155;
     width: 40px;
     height: 40px;
     text-align: center;
     border-radius: 4px;
     position: fixed;
     bottom: 30px;
     right: 30px;
     transition: background-color .3s, 
       opacity .5s, visibility .5s;
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
   }
   #backTop::after {
     content: "\f077";
     font-family: FontAwesome;
     font-weight: normal;
     font-style: normal;
     font-size: 1.3em;
     line-height: 37px;
     color: #fff;
   }
   #backTop:hover {
     cursor: pointer;
     background-color: #1e3032;
   }
   #backTop:active {
     background-color: #555;
   }
   #backTop.show {
     opacity: 1;
     visibility: visible;
   }

.realisation{
     background-color: #fae5cb;
     padding:30px 0;
}
.realisation h2{
     text-align: center;
}

.gallery {
     display: flex;
     padding: 2px;
     transition: 0.3s;
     flex-wrap: wrap;
   }
   .gallery:hover .gallery__image {
     filter: grayscale(1);
   }
   .gallery__column {
     display: flex;
     width: 32%;
     margin-right: 9px;
     margin-bottom:9px;

   }
   .gallery__link {
     margin: 2px;
     overflow: hidden;
   }
   .gallery__link:hover .gallery__image {
     filter: grayscale(0);
   }
   .gallery__link:hover .gallery__caption {
     opacity: 1;
   }
   .gallery__thumb {
     position: relative;
     overflow: hidden;
     height:276px;
   }
   .gallery__image {
     display: block;
     width: 100%;
     transition: 0.3s;
   }
   .gallery__image:hover {
     transform: scale(1.1);
   }
   .gallery__caption {
     position: absolute;
     bottom: 0;
     left: 0;
     padding: 25px 15px 15px;
     width: 100%;
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     color: white;
     opacity: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
     transition: 0.3s;
   }

.btnContact{
     background-color: #567f84;
     color:#fff;
}
.btnContact:hover{
     background-color: #a2bdbc;
     color:#fff;
}
.contact{
     background-color: #f8f5f0;
     padding-top:30px;
     padding-bottom:30px;
}
.contact h2{
     text-align: center;
}
footer{
     background-color: #1e3032;
     color:#fff;
     padding-top:60px;
     padding-bottom: 30px;
}
footer h3{
     color:#fff;
}
.footerDroite img{
     width:30px;
}
.footerDroite img:first-child{
     margin-right:10px;
}

@media (min-width:480px) and (max-width: 786px) {
     .parent{
          flex-wrap: wrap;
          height:78vh;
     }
     #str{
          display: none;
     }
     .str2{
          display: none;
     }
     header{
          background-position: bottom left;
          background-size: initial;
     }
     .gallery__column{
          width:100%;
     }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      #str{
          display: none;
     }
     .str2{
          display: none;
     }
     .parent{
          height:46vh;
     }
     header{
          background-position: center center;
          background-size: initial;
     }
}