/**----RESET---- **/
html, body{height: 100%;}

body{font-family:'Lato', sans-serif; color: #000; overflow-x: hidden;}

h1, h2, h3{font-family: 'Playball', cursive; cursor: default; color: #e3720c;}

h1{font-size: 64px; font-family: 'Playball', cursive; letter-spacing: 5px; text-align: center; margin: 0; padding: 0 0 50px 0; color: #e3720c;}

h1 span{display: block; margin-top: 15px; font-size: 36px; color: #5a272e;
  font-style: italic; font-family: 'Lato', sans-serif; text-transform: none;
  font-weight: bold; letter-spacing: 0;}

.logo a {text-decoration: none; color: #fff;}  

h2{display: block; font-size: 40px; font-weight: bold; color: #e3720c; width: 100%;
  text-align: center; margin: 0; padding: 0; letter-spacing: 3px;}

a{color: #341f3c; transition: 0.3s;}

p{line-height: 1.6;}

.btn{ background:transparent; border: 2px solid #e3720c; color: #e3720c; border-radius: 50px; padding: 8px 30px; font-family: 'Montserrat', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: bold;}
.btn:hover{background: #e3720c; color: #fff;}
.mTop50{margin-top: 50px;}


/**----MENU MOBILE---- **/


.burger-menu i{display: none;}
.burger-menu, .close-menu{display: inline-block; position: fixed; z-index: 100; top: 20px; right: 20px; font-size: 30px;}
.menu-mobile{display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; 
  background: #e3720c; background: linear-gradient(60deg, rgba(213,130,54,0.9) 0%, #e3720c 100%);}
.menu-mobile ul{margin: 100px 0 0 0; padding: 0; list-style-type: none; font-family: 'Playball', cursive; font-size: 36px; text-transform: uppercase; text-shadow: 0 10px 10px rgba(0,0,0,0.15); text-align: center;}
.mobile-menu li{transform: rotate(-7deg) skew(-10deg); margin-bottom: 10px;}
.menu-mobile a {color: #fff;}
.menu-mobile a:hover{color:rgba(255,255,255,0.5)}
.close-menu {color: #fff;}
.close-menu:hover{color:rgba(255,255,255,0.5);}

/**----HEADER---- **/

header{position: fixed; width: 100%; top: 0; left:0; z-index:10; padding: 20px 50px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; color: #fff; 
  text-align: right; transition:0.5s; box-shadow: 0 5px 10px rgba(30,34,38,0.3); border-bottom: 1px solid rgba(255,255,255,0.3);}

header.fix-white{border: none; background: #fff; padding: 15px 50px; text-align: center; border-bottom: 1px solid #e3720c;}

header ul{ list-style-type: none; margin: 0; padding: 0;}

header li{ display: inline-block; padding: 0 10px; letter-spacing: 2px;}

header a{color: #fff; font-weight: 500; font-size: 14px;}

header a:hover{ color: #edac6e;} 

header.fix-white a{color: #000;}

header.fix-white a:hover{ color:#b2b2b2;}

.current a{  font-weight: 600; color:#3c3c3c!important;}

/**----HOME---- **/
#home{ width: 100vw; height: 100vh; display: flex; align-items: center;
  justify-content: center; position: relative;}

#home .overlay{background: rgba(227,114,12,0.3); height: 100vh; width: 100vw; position: absolute;}

#home h1{ margin:0; padding: 0; text-transform: none;}

h1.logo{ font-family: 'Playball', cursive; color: #fff;
  font-size: 160px; letter-spacing: 5px; text-shadow: 0 15px 15px rgba(0, 0, 0, 0.20);
  transform: rotate(-7deg) skew(-10deg);}

.go{ display: block; position: absolute; left:calc(50% - 25px);
  bottom: 50px; width: 50px; height: 50px; border: 2px solid #fff;
  text-align: center; color: #fff; border-radius: 50px;
  font-size: 20px; padding-top: 8px;}

.go:hover{ background: #fff; border: 2px solid #fff;}

.go i{ color: #fff;}

.go:hover i{ color: #e3720c;}

/**----SKILLS---- **/
#skills{ padding: 100px 0;}

#skills p{ text-align: justify;}
#skills span{font-weight: bold;}

.icon{ text-align: center;}
.icon i{ color: #e3720c; font-size: 72px; padding-bottom: 30px;}
h3.serv {font-size: 20px; text-transform: uppercase; text-align: center; color: #000; font-family: 'Lato', sans-serif; font-weight: bold;}


/**---TEAM---- **/

#team{ background: #e3720c; padding: 100px 0;}

#team h1{color: #fff;}

.card{height: 300px; margin-bottom: 20px; border-radius: 5px; overflow: hidden; opacity: 0.5;
position: relative;}

.card:hover{ opacity: 1;}

.card-01,.card-02,.card-03,.card-04{background: #fff center center no-repeat;
  background-size: cover;}

 .card h2{ position: absolute; color: #fff; left:0; bottom: 0; opacity: 0;
  text-shadow: 0 3px 20px rgba(0,0,0,0.8); transition: 0.5s; transform: rotate(-5deg) skew(-10deg);
 } 

 .card:hover h2{ bottom: 30px; opacity: 1; }

/**---DEVISE---- **/

#devise{ height: 500px; text-align: center; display: flex; align-items: center; position: relative;
}

#devise .overlay{background: rgba(227,114,12,0.4); height: 500px; width: 100vw; position: absolute;}

#devise p{margin:0; padding:0; color:#fff; font-size: 60px; text-shadow:0 0 20px rgba(0,0,0,0.9); font-style:italic; font-weight: 600; letter-spacing: -2px; cursor:default; z-index: 1; margin: 0 auto;  font-family: 'Playball', cursive; letter-spacing: 7px;}

/**---FOLIO---- **/

#folio{ width: 100%; height: 100%; background: #3c3c3c; display: flex;
  align-items: center; justify-content: center;}

#folio h1{ color: #fff;  font-family: 'Playball', cursive; font-size: 60px; 
  margin-bottom: 60px; transform: rotate(-5deg) skew(-10deg);
  text-transform: none;}

#folio h1 b{ color: #e3720c;}

.slider a {display:block; overflow: hidden;}

.slider img{filter:grayscale(100%); transition: 3s;}
.slider a:hover img{filter: grayscale(0%); transform: scale(1.2);}
/*.slick-arrow{display: none!important;}*/

/**---CONTACT---- **/

#contact{width: 100vw; font-size: 11px; color: #fff; padding-top: 100px; animation-name: left; 
  background: #e3720c linear-gradient(to right, #e3720c 0%,#d47e30 82%,#e3720c 100%);}


.contact-email a {font-family: 'Montserrat', sans-serif; font-size: 16px; color: #fff; padding-left: 7px;}

.contact-email:hover{color: rgba(255,255,255,0.7);}
.contact-email i {color: #e29b5a; font-size: 21px;}
.tel i {color: #e29b5a; font-size: 21px;}
.tel {margin: 10px 0;}
.tel a{font-size: 16px; color: #fff; padding-left: 7px;}
.adresse i{color: #e29b5a; font-size: 21px;}
.adresse a{font-family: 'Montserrat', sans-serif; font-size: 16px; color: #fff; padding-left: 7px;}
.contact-icons a{color: #e29b5a; font-size: 30px; margin: 16px 0 0 10px; transition: 0.5s;}
.contact-icons a i{background: #e29b5a; color: #e3720c; width: 50px; height: 50px; text-align: center; border-radius: 50%; line-height: 50px; transition: 0.5s;}
.contact-icons a i:hover{background: #3c3c3c; color: #e3720c; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; transition: 0.5s; transform: translateY(-10px);}
.contact-icons a:hover{color: #fff;}
.contact-infos {padding-top: 20px; text-align: center; cursor: default;}
.contact-infos a{color:#fff; text-decoration: none;}
.contact-infos a:hover{color: #3c3c3c;}
.contact-infos a#copyright{font-weight: 600; color: #fff; margin-left: 2px;}
.contact-infos a#copyright:hover{font-weight: 600; color: #3c3c3c;}
#contact h2{color: #fff;}
#contact h3{padding-bottom: 20px; font-family: 'Playball', cursive; font-size: 35px; color: #fff; text-transform: capitalize; letter-spacing: 2px;}
#bas-contact{background: #cc6910; height: 60px; margin-top: 100px;}
.horaires{font-size: 20px; font-family: 'Playball', cursive;}
.Hor-jours ul{padding: 0; width: 230px;}
.Hor-jours ul li{list-style-type: none; font-size: 16px; color: #fff;}
.Hor-jours span.hrs{float: right;}
.part h3{margin-left: 20px;}
.part p{font-size: 16px;}


/**---RESPONSIVE---- **/

@media (min-width: 768px) and (max-width: 1024px){
section#folio{height: 50%;}
 #contact .left{margin-left: -10px; margin-right: -10px; padding-left: 0px; padding-right: 0px;} 
 #contact .left h3{font-size: 24px;}
 #contact .center h3{font-size: 24px;}
 #contact .right h3{font-size: 24px;}
 .center h3{padding-bottom: 40px;}
.part h3{padding-top: 0px;}
.contact-icons a{font-size: 18px;margin: 16px 0 0 3px}
.contact-icons a i{width: 30px; height: 30px;}
.contact-icons a i:hover{width: 30px; height: 30px;}
}

@media (max-width: 768px){
header{display: none;}
#home{ width: 100vw; height: 65vh; display: flex; align-items: center; justify-content: center; position: relative;}
#home .overlay{background: rgba(227,114,12,0.3); height: 65vh; width: 100vw; position: absolute;}
.burger-menu i{color: #fff; display: block; padding-right: 10px;}
.menu-mobile li{font-size: 23px; margin-bottom: 10px;}
.menu-mobile li a{text-decoration: none;}
h1{font-size: 35px; letter-spacing: 2px;}
.btn{padding: 4px 20px;}
h1.logo{font-size: 44px; font-weight: bold;}
.go{width: 35px; height: 35px; font-size: 15px; text-align: center; padding-top: 4px;}
#team h1{font-size: 44px;}
#devise p{font-size: 40px;}
#skills, #team{padding: 40px 0; overflow-x: hidden;}
#skills h1{font-size: 44px;}
#skills p{margin-bottom: 25px;}
.icon i{font-size: 40px; padding-bottom: 20px;}
.last-skills p{margin-bottom: 0;}
#folio h1{font-size: 44px; margin: 5px 0;}
.slick-dots li button:before{width: 12px; height: 12px; font-size: 6px; line-height: 10px;}
.slick-dots li {margin: 0 2px;}
.slider{margin: 0 0 30px 0;}
.card{height: 260px;}
.card h2{font-size: 18px;}
#contact{padding-top: 70px;}
#contact h3{font-size: 28px; margin-left: 30px;}
.contact-email, .tel, .adresse{margin-left: 30px;}
.left h3{padding-top: 20px;}
.center h3{padding-top: 20px;}
.part h3{padding-top: 20px;}
.part p{margin: 0 5px 0 30px;}
.part{margin-bottom: -30px;}
.Hor-jours li{margin-left: 30px;}
.contact-icons{margin: 20px 0 0 30px;}
.contact-icons a{font-size: 20px;}
.contact-icons a i{width: 40px; height: 40px; text-align: center;line-height: 40px;}
.adresse{margin-bottom: 20px;}
}