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/fondHeader3.jpg);
     background-position: top left;
     background-size: 100%;
     /* height:100vh;  */
     background-repeat: no-repeat;
     background-color: #f8f9f3;
}
/* .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: #f8f9f3;
          padding-left: 26px;
     }
}


h1, h2, h3, h4{
     font-weight: 700;
     font-family: 'Chakra Petch', sans-serif;
     color:#333333;
}
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:#c7967c;
}
/* .title{
     position:relative;
     left:150px;
     top:150px;
} */
.title2{
     font-family: 'Baskervville', serif;
     font-style: italic;
}
.title h2{
     font-size:2rem;
}
.parent{
     display: flex;
     justify-content: center;
     align-items: flex-end;
     height: 100vh;
     padding-bottom: 100px;
     margin-left: 150px;
}

.parentMonaOrdi{
     position:absolute;
     top:310px;
}
.monaOrdi {
     width: 400px;
     position: relative;
}

.btnDevis .btn-outline-primary{
     color: #959981;
     border-color: #959981;
}
.btnDevis .btn-outline-primary:hover {
     color: #fff;
     background-color: #959981;
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle{
     background-color: #6b705c ;
     border-color: #6b705c;
}



/* FIN HEADER */


.about{
     padding:90px 0;
}
.aboutMe h2{
     text-align: center;
     margin-bottom:30px;
}
.aboutMe{
     margin-bottom:20px;
     text-align: center;
     padding:30px;
}
.aboutMe .btn-primary{
     background-color: #f0f1e5;
     border-color: #f0f1e5;
     color:#7b7f6a;
}
.aboutMe .btn-primary:hover{
     background-color: #cfcfbb;
     border-color: #cfcfbb;
     color:#fff;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
     background-color: #cfcfbb;
     border-color: #cfcfbb;
}
.interets{
     text-align:center;
}
.fa-gamepad, .fa-guitar, .fa-music, .fa-mug-hot{
     background-color: #c7967c;
     color:#fff;
     padding:15px;
     transition-duration: 0.1s;
     font-size:2.5em;
     border:1px solid #c7967c;
     border-radius: 50%;
     margin-right:15px;
     margin-top:20px;
}
.fa-gamepad:hover, .fa-guitar:hover, .fa-music:hover, .fa-mug-hot:hover{
     background-color: #fff;
     color:#c7967c;
     border:1px solid #c7967c;
}

.interets p{
 
     font-size:0.8em;
    
}

.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: #f0f1e5;
     padding:90px 0;
     color:#333;

}
.skills h2{
     text-align: center;
     color:#333;
}
.skills h4{
     color:#333;
}
.skillsContainer{
     display: flex;
     text-align: center;
     margin-top: 50px;
}
.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;
}






 /**/
 #backTop {
     display: inline-block;
     background-color: #c7967c;
     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: 1;
   }
   #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: #ddbea9;
   }
   #backTop:active {
     background-color: #555;
   }
   #backTop.show {
     opacity: 1;
     visibility: visible;
   }

.realisation{
     background-color: #f8f9f3;
     padding:90px 0;
}
.realisation h2, .realisation h3{
     text-align: center;
}

.realisation h3{
     margin-top: 50px;
     margin-bottom: 40px;
}

.gallery {
     display: flex;
     padding: 2px;
     transition: 0.3s;
     flex-wrap: wrap;
     margin-top: 40px;
   }
   .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;
     
   }
   .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: "Montserrat", sans-serif;
     font-size: 16px;
     color: white;
     opacity: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
     transition: 0.3s;
   }

.gallery p{
     display: none;
}

.btnContact{
     background-color: #c7967c;
     color:#fff;
}
.btnContact:hover{
     background-color: #ddbea9;
     color:#333;
}
.contact{
     background-color: #ececdd;
     padding-top:90px;
     padding-bottom:90px;
}
.contact h2{
     text-align: center;
}
.contact p{
     text-align: center;
     margin-bottom: 30px;
}
footer{
     background-color: #2b2b2b;
     color:#fff;
     padding-top:60px;
     padding-bottom: 30px;
}
footer h3{
     color:#fff;
}
/* .footerDroite img{
     width:30px;
}
.footerDroite img:first-child{
     margin-right:10px;
} */
footer i{
     font-size: 1.2em;
     color:#d7d7b8;
     margin-left:10px;
     transition: color .15s ease-in-out;
}
footer i:hover{
     color:#fff;
     transition: color .15s ease-in-out;
}

@media (min-width:480px) and (max-width: 812px) {
     header{
          background-position: bottom left;
          /* background-size: initial;
          background-image: url(../img/fondHeader.jpg); */
          background-size: 100%;
     }
     
     .gallery__column{
          width:100%;
     }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .parent{
          display:flex;
          height:44vh;
          margin:0;
          align-items: flex-start;
          padding-top: 190px;
     }
     .btnDevis{
          display:none;
     }

     .title h1{
          font-size:4em;
     }
     header{
          background-position: bottom left;
          /* background-size: initial;
          background-image: url(../img/fondHeader.jpg); */
          background-size: 200%;
     }
     
     .interets{
          margin-bottom:20px;
          text-align: center;
          padding:30px;
     }

     .gallery__column{
          width:100%;
     }

     p{
          font-size:2em;
     }

     .skillsContent{
          margin-bottom:60px;
          padding:30px;
     }
     h4, h3{
          font-size:2.4em;
     }
     .skillsContainer{
          flex-wrap: wrap;
          justify-content: center;
     }

     h2{
          font-size:3em;
     }

     .interets p{
          font-size:2em;
     }

     .fa-gamepad,
     .fa-guitar,
     .fa-music,
     .fa-mug-hot{
          font-size:4.5em;
          border:14px solid #c7967c;
     }

     .form-group>label{
          font-size:2em;
     }
     .btnContact{
          font-size:2.5em;
     }
     .custom-file-input,
     .custom-file-label,
     .custom-select,
     .form-control{
          height:80px;
     }
     .form-control{
          font-size:2em;
     }
     .navbar-light .navbar-nav .nav-link{
          font-size:2em;
     }
     .about, .skillsContainer, .gallery, .contact form, .contact p{
          padding-left: 55px;
          padding-right: 55px;
     }
     .footerGauche{
          padding-left: 55px;
     }
     .footerDroite{
          padding-right: 55px;
          font-size:2.8em;
     }
     .footerGauche img{
          width:100%;
     }
     #backTop.show{
          visibility: hidden;
     }
     .navbar{
          padding: 1.5rem 4rem;
     }
     .navbar-brand img{
          width: 300px;
     }
     .gallery__column{
          margin-bottom: 100px;
          text-align: center;
     }
     .gallery p{
          margin-bottom: 20px;
          text-align: center;
          display: inline-block;
     }
     .aboutMe .btn-primary {
          font-size: 2.3em;
          padding-left: 30px;
          padding-right: 30px;
          margin-top: 50px !important;
     }


}
/* @media (max-width: 786px) {
     .parent {
          padding-bottom: 1%;
          height: 300px;
     }

} */

/** DEBUT CLIENTS ***/

.slidecontainer {
     /*max-width: 660px;
     margin: 0 auto;*/
     width: 100%;
     position: relative;
}

.icons {
     width: 100%;
}

.slick-slide {
     margin: 0 20px;
     text-align: center;
}

.slick-slide img {
     /*margin: 0 auto;*/
     max-width: 100%;
}

.slick-slider {
     position: relative;
     display: block;
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
     -khtml-user-select: none;
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
}

.slick-slider .slick-list,
.slick-slider .slick-track {
     transform: translate3d(0, 0, 0);
}

.slick-slider .slick-track {
     position: relative;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}

.slick-slider .slick-track:before {
     display: table;
     content: "";
}

.slick-slider .slick-track:after {
     display: table;
     content: "";
     clear: both;
}

.slick-slider .slick-list {
     position: relative;
     display: block;
     overflow: hidden;
     margin: 0;
     padding: 0;
}

.slick-slider .slick-list:focus {
     outline: none;
}

.slick-slider .slick-list.dragging {
     cursor: pointer;
}

.slick-loading .slick-track {
     visibility: hidden;
}

.slick-loading .slick-slide {
     visibility: hidden;
}

.slick-slide {
     display: none;
     /*float: left;*/
     height: 100%;
     min-height: 1px;
}

/* .slick-slide img {
     display: block;
} */

.slick-slide .slick-loading img {
     display: none;
}

.slick-slide.dragging img {
     pointer-events: none;
}

[dir=rtl] .slick-slide {
     float: right;
}

.slick-initialized .slick-slide {
     display: block;
}

.slick-vertical .slick-slide {
     display: block;
     height: auto;
     border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
     display: none;
}

/** FIN CLIENTS ***/