@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');
*{
	padding:0px;
	border:0px;
	margin:0px;
}

html{
width:100%;
}

body{
font-family: 'Work Sans', sans-serif;
font-weight:400;
width:100%;
}


/* *********************** COMMON *********************** */

p{
color:#150c13;
line-height:29px;
font-size:16px;
margin-bottom:15px;
}

h1{
color:#150c13;
text-transform: uppercase;
font-size: 33px;
font-weight: 400;
line-height: 40px;
margin-bottom:32px;
padding-bottom:11px;
background-image:url('images/bg_h1.png');
background-repeat:no-repeat;
background-position:bottom left;
}

h1 span{
display:block;
font-weight:700;	
}


h2{
color:#150c13;
text-transform: uppercase;
font-size:28px;
line-height:37px;
font-weight: 400;
margin-bottom:32px;
padding-bottom:11px;
background-image:url('images/bg_h1.png');
background-repeat:no-repeat;
background-position:bottom left;
}

h2 span{
display:block;
font-weight:700;	
}


a.button{
display: inline-block;
border-radius: 3px;
background-color: #811447;
text-transform: uppercase;
color: white!important;
padding: 10px 32px 10px 17px;
font-weight: 700;
transition: all 0.5s ease-in-out;
font-size: 15px;
background-image:url(images/bg_button_arrow-right.png);
background-repeat:no-repeat;
background-position:right 15px;
transition:all 0.3s;
}

a.button:hover{
text-decoration:none!important;
opacity:0.82;
}

.main_width{
width:90%;
margin:auto;
}


#wrapper a{
color:inherit;
text-decoration:none;
font-weight:700;
transition: all 0.3s ease-in-out;

}

#wrapper a:hover{
text-decoration:underline;
}


#wrapper li{
list-style-type: none;
padding-left: 44px;
background-image: url('images/puce_li.png');
background-repeat: no-repeat;
background-position: 14px 8px;
font-size: 18px;
color: #6a6768;
line-height: 27px;
margin-bottom: 35px;
font-style: italic;
}

.clear{
width:100%;
clear:both;
}


.is-animated {
  animation: .9s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  } 
  100% {
    transform: none;
  }
}


/* *********************** HEADING MSG*********************** */
#heading{
width:100%;
min-height:33px;
text-align:center;
background-color:#3c3639;
display:none;
}

#heading p{
color:white;
line-height:33px;
font-size:12px;
margin-bottom:0px;
text-transform:uppercase;
text-align:center;
}


/* *********************** MENU LARGE*********************** */
#menu{
width:100%;
background-color:white;
background-image:url('images/bg_menu.png');
background-repeat:repeat-x;
background-position:bottom;
display:inline-block;
vertical-align:top;
font-size:0px;
text-align:center;
padding-bottom:50px;
}

#menu .logo{
width:151px;
display:block;
margin:auto;
}

#menu .links{
display:block;
width:100%;

}

#menu .links li{
list-style-type:none;
display:inline-block;
vertical-align:middle;
}

#menu .links li a{
display:block;
margin:auto;
text-transform:uppercase;
color:#545757;
padding:10px 16px;
font-size:15px;
border-bottom:4px solid white;
transition:all 0.5s;
line-height:30px;
text-decoration:none;
}

#menu .links li a.selected{
color:#811447;
border-bottom:4px solid #811447;
}

#menu .links li a:hover{
border-bottom:4px solid #811447;
text-decoration:none;
}

#menu .cta{
display:block;
margin:auto;
vertical-align:top;	
padding:0px 22px;
margin-top:35px;
text-align:center;
clear:both;
display:none;
}

#menu .cta a{
display:block;
transition:all 0.3s;
padding:3px;
}

#menu .cta a:hover{
opacity:0.75;
}

#menu .cta a img{
width:185px;	
}


/* *********************** WRAPPER *********************** */
#wrapper{
padding-top:50px;
}

/* *********************** PAGES *********************** */


/* ***** HOME ***** */
#home{
text-align:center;
}

#home h1,#home h2{
background-position:bottom center;
}

#home .c1{
width: 80%;
display: block;
margin:auto;
padding: 5%;
}

#home .c2{
width: 80%;
display:block;
margin:auto;
padding: 5%;
text-align:center;
}

#home .c2 .image{
width:100%;
font-size:0px;
margin-top:20px;
margin-bottom:50px;
background-color:white;
box-shadow: 10px 10px 47px -13px rgba(94,94,94,1);
}

#home .c2 .image img{
max-width:100%;	
}

#home .c3{
background-color:#811447;
margin-top:35px;
padding:30px 0px;
}

#home .c3 .c3a{
width: 80%;
display: block;
margin:auto;
padding: 5%;
}

#home .c3 .c3a img{
max-width:80%;	
}

#home .c3 .c3b{
width: 80%;
display: block;
margin:auto;
padding: 5%;
}

#home .c3 .c3b h2{
margin-bottom:54px;
color:white;
background-image:url('images/bg_h1_white.png');
}

#home .c3 .c3b p{
color:white;	
}

#home .shadow{
width:100%;
height:100px;
background-image:url('images/bg_menu.png');
background-repeat:repeat-x;

}

#home .c4{
width: 80%;
display: block;
margin:auto;
vertical-align: top;
padding: 5%;
}

#home .c5{
width: 80%;
display: block;
margin:auto;
padding: 5%;
text-align:center;
}

#home .c5 .image{
width:100%;
font-size:0px;
margin-top:20px;
margin-bottom:50px;
background-color:white;
box-shadow: 10px 10px 47px -13px rgba(94,94,94,1);
}

#home .c5 .image img{
max-width:100%;	
}


/* ***** PHOTOS REALISATIONS ***** */
#works{
text-align:center;
}

#works .c1{
text-align:center;
}

#works .c1 h1{
background-position:bottom center;	
}



#works .filter{
width:100%;
}

#works .filter{
	margin-top:45px;
}

#works .filter a{
display: inline-block;
vertical-align: top;
font-size: 13px;
font-weight: 400;
margin: 10px 15px;
border: 1px solid #150c13;
border-radius: 40px;
padding: 8px 12px 8px 23px;
background-image: url('images/arrow_right.png');
background-repeat: no-repeat;
background-position: 11px 11px;
transition:all 0.3s;
}

#works .filter a:hover{
background-color:#eae7e7;
}

#works .filter a.active{
text-decoration:underline;
}
	

#works .c2{
margin-top:35px;	
}

#works .c2 .item{
display:inline-block;
vertical-align:top;
width:185px;
margin:16px 13px;
border-radius:5px;
background-color:white;
box-shadow: 10px 10px 47px -13px rgba(94,94,94,0.31);
padding-bottom:17px;
}


#works .c2 .item .img{
position:relative;
width:185px;
height:185px;
background-color:#f9f9f9;
overflow:hidden;
position:relative;
display:inline-block;
border-top-left-radius:3px;
border-top-right-radius:3px;
}

#works .c2 .item .img img{
position:absolute;
z-index:100;
transition:all 0.3s;
border-radius:3px;
width:110%;
height:110%;
top:-5%;
left:-5%;
object-fit:cover;
}

#works .c2 .item:hover .img img{
transition:all 0.3s;
width:100%;
height:100%;
top:0%;
left:0%;
}


#works .c2 .item .img .arrow{
position:absolute;
z-index:120;
width:185px;
height:185px;
background-image:url('images/arrow-right.png');
background-repeat:no-repeat;
background-position:center;
transition:all 0.3s;
transform: scale(0);
}

#works .c2 .item:hover .img .arrow{
transform: scale(1);
}

#works .c2 .item p.filtre{
font-size: 12px;
opacity: 0.35;
font-weight: 400;
margin-bottom: 1px;
}

#works .c2 .item p.description{
font-size: 13px;
line-height: 19px;
font-weight: 400;
text-decoration: none;
padding: 0px 10px;
margin-bottom: 0px;
color: #535050;
transition: all 0.3s;
}

#works .c2 .item:hover p{
color:inherit;	
}

#works .c2 .item:hover a{
text-decoration:none;
}


/* ***** Demande de devis ***** */

#devis .c1{
margin-top:50px;
margin-bottom:65px;
text-align:center;
}

#devis .c1 h1{
text-align:center;
background-position:bottom center;	
}

#devis .c2{
width: 80%;
display: block;
padding: 5%;
text-align:left;
margin:auto;
}

#devis .c3{
width: 80%;
display: block;
padding:5% 0%;
text-align:left;
text-align:center;
margin:auto;
}

#devis .c3a{
background-color:#811447;
padding:32px;
}

#devis .c3a p{
color:white;	
}

#devis .c3b{
text-align:center;
margin:50px 0px;
}

#devis .c3c{
text-align:center;
padding:0px 32px;
}



/* ***** CONTACT ***** */
#contact{
text-align:center;
}

#contact .c1{
display:inline-block;
vertical-align:top;
background-color: white;
min-height:408px;
}

#contact h1{
margin-bottom:50px;
background-position:bottom center;
}

#contact h2{
font-size:22px;
background-image:none;
margin-bottom:0px;
}


#contact .c1 .adresse{
font-size: 20px;
line-height: 25px;
margin-top:18px;
margin-bottom: 24px;
}

#contact .c1 .tel{
margin-top:18px;
font-size: 21px;
line-height: 28px;
margin-bottom: 24px;
color:#62a262;
}

#contact .cta{
margin:35px;
}

#contact .cta a{
display:block;
}


#contact .c1 .tva{
font-size:13px;
text-transform:uppercase;
margin-bottom:0px;
}


#contact iframe{
width:100%;
height:450px;
border:0px;
margin-top:35px;

}



/* Mentions légales */

#legal{
	text-align:center;
	
}

#legal h1{
display:block;
background-position:bottom center;
margin:40px 0px 70px 0px;
}

#legal {
text-align:center;
}

#legal h2{
position: relative;
bottom: 0px;
margin-top: 14px;
margin-bottom: 50px;
font-size:28px;
line-height:30px;
}

#legal p{
margin-bottom:5px;
}

#legal p span{
display:block;
vertical-align:top;
width:200px;
text-decoration:underline;
}

#legal .c0{
width:600px;
text-align:left;
display:inline-block;
vertical-align:top;
text-align:left;
padding:3%;
margin-bottom:30px;
background-color:white;
border-radius:13px;
}

#legal .c1{
display:inline-block;
vertical-align:top;
width:80%;
padding:5%;
box-shadow: 10px 10px 47px -13px rgba(94,94,94,0.51);
text-align:left;
margin-bottom:30px;
min-height:262px;
background-color:white;
border-radius:4px;
}

#legal .c1.last{
margin-right:0px;
}



#legal .c2{
width:80%;
padding:5%;
text-align:left;
display:inline-block;
vertical-align:top;
margin-bottom:30px;
padding-bottom:30px;
background-color:white;
border-radius:4px;
box-shadow: 10px 10px 47px -13px rgba(94,94,94,0.51);
}

#legal .c2 h3{

}

#legal .c2 h4{

}

#legal .c2 p{
margin-bottom:8px;
font-size:13px;
line-height:22px;
}

#legal .c2 ul li{
margin-bottom:5px;
font-size:13px;
line-height:22px;
padding-left:15px;
list-style-type:none;
}

#legal .c2 ul ul li{
padding-left:30px;
}

#legal .c2.last{
margin-right:0px;
}


/* ***** 404 ***** */
#e404{
text-align:center;
}

#e404 h1{
background-position:bottom center;	
}


/* *********************** FOOTER *********************** */

#footer{
background-color:#3c3639;
text-align:center;
padding-bottom:27px;
}

#footer .menu{
display:inline-block;
vertical-align:top;
border-top:1px solid #534d50;
border-bottom:1px solid #534d50;
margin-top:35px;
}

#footer .menu li{
list-style-type:none;
display:inline-block;
vertical-align:middle;
}

#footer .menu li a{
text-transform:uppercase;
color:white;
padding:10px 16px;
font-size:15px;
transition:all 0.5s;
line-height:42px;
text-decoration:none;
}

#footer .menu li a:hover{
color:#ccc696;
}


#footer img.logo{
	display:block;
	margin:100px auto;

}

#footer p.copyright{
color:white;
text-align:center;
width:100%;
font-size:13px;
line-height:21px;
margin-bottom:80px;
}

#footer p.copyright a{
color:white;
text-decoration:underline;
}





/* *********************** FORM JQUERY *********************** */
#fadeandscale{
background-color:white;
padding:20px 50px;
text-align:center;
max-width:800px;
background-image:url('images/logo-kmmotos-small.png');
background-repeat:no-repeat;
background-position:51px 17px;
border-radius: 13px;
}

#fadeandscale h1{
font-size: 40px;
font-weight: 300;
margin:14px 0px 40px 180px;
color: #a5a5a5;
}

#fadeandscale p{
font-size: 16px;
color: #2c3e50;
margin: 17px 0px 14px 10px;
}

#fadeandscale input[type="text"]{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 513px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale input[type="text"]:hover{
box-shadow:         1px 1px 10px 0px rgba(50, 50, 50, 0.20);
}

#fadeandscale select{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 556px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale .boutons{
}

#fadeandscale .boutons .button{
font-size:14px;
text-align:center;
border:1px solid red;
margin: 27px 10px;
display: inline-block;
padding:9px 15px;
transition:all 0.3s;
text-decoration:none;
font-weight:700;
color:red;
background-color:white;
transition: all 0.3s ease-in-out;
border-radius:22px;
}

#fadeandscale .boutons .button:hover{
opacity:0.5;
}

#fadeandscale input[type="submit"]{
background-color:red!important;
color:white!important;	
border-radius:22px;
}