/* =====[ RESET ]======================================================================== */

body,h1,h2,h3,h4,h5,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}


h1, h2, h3, h4, h5, .style1{ font-weight:700; line-height:1.2}


/* =====[ GENERAL ]======================================================================== */
body {
	font-family: 'Muli', sans-serif;
	font-size:16px;
	color:#111111;
	position: relative;
	margin:0;
	padding:0;
	z-index:0;
	font-weight:400;
	background:url(../images/bg-icone.png) no-repeat -600px -10px #ffffff;

}


strong{	font-weight:700;}

a{color:#454545; text-decoration:none;}
a:hover{color:#000000; text-decoration:none;}

h1{	font-size:33px; color:#000000; text-align:center; font-weight:900; text-transform:uppercase; padding-top:25px}
h2{	font-size:30px; color:#1f1f1f; text-align:center}
h3{	font-size:35px; color:#015696}
h4{	font-size:22px; color:#000000}
h5{	font-size:20px; color:#a4a5a6; line-height:1; }
h1 span{	font-weight:400; font-size:20px; color:#1e1e1e; display:block; text-transform:none; padding-bottom:5px;}

.style01{	font-size:40px;	color:#1e1e1e;	display:block; }
.style02{	font-size:20px;	text-align:center;	display:block;font-weight:700; color:#101010}
.style03{	color:#4fa6d4;}

/* bouton to top */
#toTop {
	font-size:40px;
	position:fixed;
	bottom:5%;
	right:5%;
	cursor:pointer;
	display:none;
	opacity:0.2;
	z-index:20;
	color:#b52929
}
#toTop:hover{color:#b52929; opacity:1}

.contenu{	width:80%; margin:0 auto; z-index:1; position:relative; }
.contenu-petit{	width:60%; margin:5% auto; z-index:1; position:relative; }



p{	padding:10px 0}

a.btn, input[type=Submit]{  transition:0.5s; opacity: 0.8; background:url(../images/btn.png) center center no-repeat; width:260px; box-sizing:border-box; display:inline-block; padding:20px 40px; font-size:18px; text-align:center; margin:5px 0; border:none; color:#ffffff; cursor: pointer; font-weight:700}
a:hover.btn, input[type=Submit]:hover{ opacity:1; color:#ffffff}

.font18{	font-size:18px;}

/*video 100%*/
.resp-container {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}
.resp-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


ul.list{margin:25px 0;}
ul.list li{list-style:none; padding-bottom:5px}
ul.list li:before{content: "➝ ";}

ul.list2{display:flex; flex-wrap: wrap; list-style:none; text-align:center; justify-content:center; margin:25px 0;}
ul.list2 li{width:20%; padding:20px; box-sizing:border-box;}
ul.list2 li span{display:block; color:#737373;}

ul.list0 li{	list-style:none; padding:10px 0}

ol{	margin:20px 0 20px 20px}
ol li{	padding-bottom:15px}

/*.bg-head{position:relative; background:url(../images/peinture.png) no-repeat top right, url(../images/bg-icone-blanc.png) no-repeat -600px -10px  #0f0f0f; height:860px; z-index:1}*/
.bg-head{position:relative; background:url(../images/fond-noir.png) -40px top no-repeat, url(../images/peinture.png) no-repeat top right; background-size:auto 860px, auto 860px; height:860px; z-index:1}

/* =====[ HEADER ]======================================================================== */

.menumobile{display:none; }
.menumobile span{	font-size:40px; cursor:pointer; color:#b52929; background:#010101; padding:3px 13px;}
.menupc{ display:flex; align-items:center; flex-wrap: wrap; justify-content:flex-start; position:relative; list-style:none; font-size:18px; font-weight:900}

header{	 z-index:1 ; position:relative; padding:20px 0; }
header.bg-page{	 background:#010101}
header a{	 color:#a50c0c;}
header a:hover{	 color:#de3030;}

header .head {	display:flex; justify-content:flex-start; align-items:center}

ul.menupc li{ margin: 0 10px ; }

ul.menupc li:last-child{ margin-right:0; }
header img{	max-width:325px; width:100%; height:auto;}

header .style02{color:#ffffff;}

/* =====[ INDEX ]======================================================================== */

.intro{	width:40%; color:#de3030; font-size:50px; text-align:center; font-weight:300; margin:7% 0 0 10%}
.intro h1{color:#e8e7e7}
.intro h1 span{color:#767676}

.intro2{ color:#454545; font-size:20px; text-align:center;}
.intro img{ max-width:350px; width:100%; height:auto;}

.service {  background: url(../images/triangle-rouge3.png) no-repeat bottom right, url(../images/stucco-texture.png) no-repeat bottom left fixed; padding:6% 0;}
.service .contenu{ width:50%; text-align:center ; color:#454545}
.service ul{ margin:5% auto; list-style:none; }
.service ul li { display:flex; padding-bottom:15px}
.service ul li > div{ min-width:384px; width:50%; position:relative; z-index:0; text-align:center; margin-right:25px;  }
.service ul li > div img{ position:absolute; top:0; left:0; z-index:-2; max-width:384px; width:100%; height:auto; }
.service ul li > div .style02{ padding-top:25px; color:#ffffff}
.service ul li p{ text-align:left;}

.realisation{	text-align:center; background:url(../images/triangle-rouge2.png) no-repeat top right, url(../images/triangle-rouge4.png) no-repeat bottom left; padding:6% 0;  }
.realisation-pc img{ max-width:1146px; width:100%; height:auto;}
.realisation-mobile { display:none;}
.realisation-mobile img { max-width:800; width:100%; height:auto}
/* =====[ Formulaire ]======================================================================== */
hr {background:#adadad; border:none; height:1px; margin: 15px 0 25px 0}
.bloc{	display:flex; flex-wrap: wrap; justify-content:space-between}
.soumission{text-align:center; padding:6% 0;}

::-webkit-input-placeholder { /* WebKit browsers */	color:#818181; opacity: 1 !important;}
:-moz-placeholder { /* Firefox 18- */color: #818181;opacity: 1 !important;}
::-moz-placeholder {  /* Firefox 19+ */	color: #818181;	opacity: 1 !important;}
:-ms-input-placeholder {  	color: #818181;}

form{	margin:20px 0; }
form ul{ display:flex; align-items:center; flex-wrap: wrap}
form ul li{	list-style:none; width:33%; box-sizing:border-box; text-align:left;display:flex; align-items:center; padding:0 15px;}
form ul li label{padding:0 0 12px 10px; margin:0 }


.formulaire p em{	font-size:13px; }
form p{padding:10px 0 25px 0; text-align:center}
label{	margin:0; display:block; text-align:left;}


select{	-webkit-appearance: none;}
input[type=checkbox]{	-webkit-appearance: none;}
input[type=checkbox]:checked {
	background-color: #00713e;
	/* or whatever styles you want depending on your design */
	/* be as obvious as possible that it's a checkbox and that it's checked! */
}

input[type=submit] {-webkit-appearance: none}

input:focus, textarea:focus, select:focus{outline:none;}
input, textarea, select {
	background:#ffffff;
	padding:10px;
	border:1px solid #adadad;
	font-family: 'Quicksand', Verdana, Arial, sans-serif;
	font-size:15px;
	color:#000000;
	border-radius: 0px;
	margin-bottom:10px
}


input[type=text], input[type=email], input[type=file], textarea, input[type=date]{width:100%; box-sizing:border-box;}
.bloc input[type=text], .bloc input[type=email]{width:49%; }

select{	width:100%; box-sizing:border-box;}

.error {box-shadow: 0 0 3px #ff0000 ;}
.error2 {color:#ff0000 ;}
.succes { text-align:center; margin-top:10%; font-size:18px}
.succes span{ display:block; font-size:25px; padding:0 0 15px 0; color:#78ac02}


/* =====[ FOOTER ]======================================================================== */


footer{	background:url(../images/bg-footer.jpg) no-repeat top center; padding:5% 0 0 0; }
footer .contenu{display:flex; align-items:center; flex-wrap: wrap; justify-content:space-between; color:#ffffff}
footer .contenu > div{width:25%; text-align:center; padding:0 25px; box-sizing:border-box;}
footer .contenu div.contact{width:50%; display:flex; align-items:flex-start; text-align:left; padding:0 50px 0 0; }
footer span{font-size:25px; display:block;}
footer span > strong{font-weight:900; display:inline}
footer img{ padding-right:25px; width:100px; height:auto;}
footer span.icon-facebook3{display:inline-block; padding-left:10px}
footer a{color:#b52929}
footer a:hover{	 color:#de3030;}

footer p{color:#585858;	text-align:center; padding:50px 0 25px 0; font-size:13px; }
footer p a, footer p a:hover{color:#585858; }


/* :::::[ Tablette horizontale ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 1700px) {
.bg-head{ background-size:auto 750px, auto 750px; height:750px;}
}

@media only screen and (max-width: 1500px) {

.intro{	width:50%; margin:5% 0 0 5%}

.bg-head{ background-size:auto 650px, auto 650px; height:650px;}
.service .contenu{ width:60%; }
}

@media only screen and (max-width: 1405px) {
.menumobile{	display:block;}
.menupc{	display:none;}
header .head { justify-content:space-between; }
}


@media only screen and (max-width: 1350px) {

footer img{ padding:15px 0;}
footer .contenu > div{width:30%;padding:0;}
footer .contenu div.contact{ flex-direction: column; width:30%; display:flex; padding:0; }
.intro{ margin:5% 0 0 0}
.bg-head{ background:url(../images/fond-noir.png) -150px top no-repeat, url(../images/peinture.png) no-repeat top right; background-size:auto 650px, auto 650px; height:650px;}
/*.bg-head{position:relative; background:url(../images/fond-noir.png) top left no-repeat, url(../images/peinture.png) no-repeat top right; background-size:auto 860px, auto 860px; height:860px; z-index:1}*/
.service ul li { flex-direction: column;}
.service ul li > div{ margin:10px auto 25px auto;}
.service ul li p{ text-align:center;}

}

@media only screen and (max-width: 1150px) {
.bg-head{ background:url(../images/fond-noir.png) -250px top no-repeat, url(../images/peinture.png) no-repeat top right; background-size:auto 650px, auto 650px; height:650px;}

}


/* :::::[ tablette verticale ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 1008px) {

h1{	font-size:28px; }
.intro{	padding:0 0 5% 0; width:100%; font-size:40px;}

/*.bg-head{ background:url(../images/fond-noir.png)-400px top no-repeat,url(../images/peinture.png) no-repeat bottom right; background-size:cover, cover; height:auto;}*/
.bg-head{	background:url(../images/fond-noir.png) no-repeat top left; height:auto}
.service .contenu{ width:80%;}


footer .contenu div.contact{width:100%; align-items:center; order:2; text-align:center; margin:0 auto}
footer .contenu div.contact img{margin:0 auto; }

footer .contenu > div{width:50%; padding:0 25px; order:1;}
.realisation-pc{ display:none}
.realisation-mobile { display:block;}

}

/* :::::[ 480 PIXELS LAYOUT (IPHONE HORIZONTALE et VERTICALE)]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 752px) {
h1{	font-size:25px; }
h2{	font-size:22px}
.intro{font-size:30px;}
footer .contenu > div{width:100%; padding:0 0 25px 0 }
form ul{ flex-direction: column;}
form ul li{	width:100%;}
.bloc input[type=text], .bloc input[type=email]{width:100%; }

.contenu-petit{	width:80%;}
.realisation{ background-size:50% auto, 50% auto; padding:40px 0 }
.service {  background-size:50% auto, cover; padding:40px 0 }


 }

/*:::::[ 320 PIXELS LAYOUT (iphone vertical) ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 464px) {

.container, .service .contenu{	width:90%;}
.service ul li > div{ min-width:auto; width:100%;}
.service ul li > div .style02{ padding-top:15px; }

 }