/**********************************
 ************* RESET **************
 **********************************/
	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,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
	input, textarea{border:0;outline:0;padding:0; margin:0;}

 /**********************************
 ************* GÉNÉRAL *************
 ***********************************/
	body { background: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 18px; color: #000; }
	.wrapper { width: 100%; margin: 0 auto; max-width: 1400px; box-sizing: border-box; }
	.clear { display: block; width: 100%; clear: both; }
	a { text-decoration: none; color: inherit; }
	img { max-width: 100%; }
	p, li { line-height: 22px; font-size: 16px; }
	
	ul li, ol li { list-style-position: inside; }
	ul, ol { padding: 0 0 15px 0; }
	ul:last-child, ol:last-child { padding: 0; }
	
	.text p { padding: 0 0 15px 0; }
	.text p:last-child { padding: 0; }
	
	.title { text-align: left; font-weight: bold; display: block; padding: 0 10px; border-bottom: 3px solid #1919e0; font-size: 22px; line-height: 1.4; margin: 15px 0 10px 0; }


 /*********************************
 ************* HEADER *************
 **********************************/
	#header { border-bottom: 1px solid #0f0fa8; background: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 2; }

	#btnNav{ display: none; position:fixed; right:30px; top:30px; width:30px; height:30px; z-index:999; cursor: pointer; }
	#btnMenu{display:block; position:relative; height:30px; }
	#btnMenu::before, #btnMenu::after, #btnMenu span{transition:all 300ms ease; display:block; height:3px; width:100%; background:#0f0fa8; position:absolute; top:50%; content:'';}
	#btnMenu::before{margin-top:-9px;}
	#btnMenu::after{margin-top:7px;}
	#btnMenu span{margin-top:-1px;}
	#btnMenu.active::before, #btnMenu.active::after{ width:100%; margin-top:-1px !important; background: #f40b0b; }
	#btnMenu.active::before{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
	#btnMenu.active::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);}
	#btnMenu.active span{opacity:0 !important; width:0 !important; left:50% !important;}

	#nav { height: 100%; display: table; padding: 0 25px; }
	#logo { display: table-cell; vertical-align: middle; }
	#logo a { display: inline-block; }
	#logo a img { padding: 10px 0; }
	#logo .rbq { display: block; text-align: center; font-size: 14px; padding: 0 0 10px 0; }
	#logo .rbq strong { font-weight: bold; }
	#menu-desktop { display: table-cell; vertical-align: middle; text-align: right; }
	#menu-desktop ul  { display: inline-block; }
	#menu-desktop ul li { display: inline-block; }
	#menu-desktop ul li a { padding: 10px 30px; background: url('../images/hover.png') center no-repeat; background-size: contain; background-position: -160px center; transition: all .5s ease; }
	#menu-desktop ul li:hover a,
	#menu-desktop ul li.active a  { color: #fff; background-position: 0 center; }

	#tel { display: table-cell; vertical-align: middle; text-align: center; }
	#tel p { margin: 0; font-weight: 700; }
	#tel p span { display: block; font-weight: 400; }


	#menu-mobile { display: none; height: 100vh; position: fixed; right: -300px; z-index: 9; width: 300px; background: #FFF; box-sizing: border-box; padding: 100px 30px 50px; transition: right .3s ease; }
	#menu-mobile ul { margin: 0 0 50px 0; }
	#menu-mobile li { list-style: none; margin: 0 0 20px 0; }
	#menu-mobile li a { text-transform: uppercase; font-weight: 700; transition: color .3s ease; }
	#menu-mobile p { font-weight: 700; margin: 0 0 10px; }
	#menu-mobile p span { font-weight: 400; display: block;  }
	#menu-mobile li a:hover,
	#menu-mobile li.active a { color: #1919e0; }
	#menu-mobile.active { right: 0; }

	#carousel{ width: 100%; margin-top: 130px; }
	#carousel .carousel-item { height: 600px; }

	#content { background: url('../images/background.png') top center no-repeat; }
	#content .wrapper { background: #fff; position:relative; padding: 40px 75px;  background: url('../images/bgContent.png') top center no-repeat; background-size: 100% 100%; }
	#content h1 { font-weight: 700; font-size: 32px; margin-bottom: 25px; border-bottom: 2px solid #0f0fa8; line-height: 1; }

	#services { display: table; border-collapse: collapse; width: 100%; margin-top: 30px; }
	#services .service { display: table-cell; width: 33%; }
	#services .service .icone { display: block; padding: 0; margin: 0 auto; width: 160px; height: 160px; border: 5px solid #e2e2e2; border-radius: 100px; background: red; }
	#services .service .icone .hover { display: block; opacity: 0; transition: opacity .5s ease; width: 100%; height: 100%; padding: 0; margin: 0 auto; width: 100%; height: 100%; border-radius: 100px;  }
	#services .service .icone:hover .hover { opacity: 1; }
	#services .service div { text-align: center; padding: 0 30px; }
	#services .service h2 { text-align: center; transition: color .5s ease; font-weight: bold; display: inline-block; padding: 0 10px; border-bottom: 3px solid #1919e0; font-size: 22px; line-height: 32px; margin: 15px 0 10px 0; }
	#services .service h2:hover{ color: #1919e0; }
	#services .service p { text-align: justify; }
	#services .service a.voir_projet { display: block; transition: color .5s ease; margin: 25px auto 0; font-size: 18px; }
	#services .service a.voir_projet:hover { color: #1919e0; }

	#services #residentiel.service .icone 	 	{ background: url('../images/residentiel/IMG_0494.JPG') center no-repeat; background-size: cover; }
	#services #residentiel.service .icone .hover 	{ background: url('../images/residentiel_hover.png') center no-repeat; background-size: cover; }
	#services #commercial.service .icone 		 	{ background: url('../images/commercial/IMG_0553.JPG') center no-repeat; background-size: cover; }
	#services #commercial.service .icone .hover 	{ background: url('../images/commercial_hover.png') center no-repeat; background-size: cover; }
	#services #industriel.service .icone 		 	{ background: url('../images/industriel/trou_vallee/IMG_0202.jpg') center no-repeat; background-size: cover; }
	#services #industriel.service .icone .hover 	{ background: url('../images/industriel_hover.png') center no-repeat; background-size: cover; }

	#realisations  { width: 100%; margin: 40px 0 0 0; }
	#realisations .realisation { cursor: pointer; display: inline-block; width: 32%; margin: 0 0 1.5% 0; height: 200px; opacity: 1; transition: opacity .3s ease; }
	#realisations .realisation:hover { opacity: 0.85; }
	#realisations .realisation.margin { margin: 0 1.5% 1.5%; }

	.erreur { display: block; width: 100%; margin: 15px 0; color : #F40B0B; }
	.confirm { display: block; width: 100%; margin: 15px 0; color: #00A42C; }
	form { margin: 20px 0 0 0; font-size: 0; }
    form .row { display: block; width: 100%; margin: 10px 0; }
	form div.half { width: 49%; display: inline-block; }
	form div.half:first-child { margin-right: 1%; }
	form div.half:last-child { margin-left: 1%; }
	form div.third { width: 32.3%; display: inline-block; }
	form div.third:nth-child(2) { margin: 0 1%; }
	form .label { display: block; width: 100%; font-weight: 700; font-size: 16px; }
	form input[type="text"], form input[type="email"] { font-size: 16px; line-height: 18px; width: 100%; margin: 5px 0 10px 0; border: 1px solid #d8d8d8; padding: 5px 10px; box-sizing: border-box; }
	form textarea { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 18px; resize: none; margin: 5px 0 10px 0; width: 100%; height: 175px; border: 1px solid #d8d8d8; padding: 5px 10px; box-sizing: border-box; }
	form input[type="submit"] { padding: 10px 25px; border: none; cursor: pointer; background: #1919e0; color: #fff; font-weight: 700; transition: all .3s ease; }
	form input[type="submit"]:hover { background: #fff; color: #1919e0; }
	form .checkbox_group label { display: block; padding: 5px 5px 5px 0; font-size: 14px; }


	#footer { text-align: center; }
	#content #footer .wrapper { padding: 30px 75px 10px; }

	@media screen and (max-width: 1024px){
		#menu-mobile { display: block; }
		#menu-mobile.active { display: block; }
		#btnNav { display: block; }
		#menu-desktop { display: none; }
		#tel { width: 45%; }

		#carousel .carousel-item { height: 300px; }

		#content .wrapper { padding: 40px 5%; }
		#services .service div { padding: 0 5%; }

		#realisations .realisation { width: 48%; }
		#realisations .realisation:nth-child(odd) { margin: 0 1% 2% 0; }
		#realisations .realisation:nth-child(even) { margin: 0 0 2% 1%; }

		form div { width: 100%; }
		form div:nth-child(2) { margin: 0; }
	}

	@media screen and (max-width: 820px){
		#carousel .carousel-item { height: 250px; }

		#services .service { display: block; width: 100%; margin: 0 0 30px 0; }
	}

	@media screen and (max-width: 620px){
		#nav { padding: 0 2%; }
		#tel { display: none; }
		#logo { width: 100%; }

		#carousel .carousel-item { height: 200px; }

		#content .wrapper { padding: 40px 2%; background: #fff; }

		#realisations .realisation { width: 100%; }
		#realisations .realisation:nth-child(odd) { margin: 0 0 1% 0; }
		#realisations .realisation:nth-child(even) { margin: 0 0 1% 0; }
	}

	@media screen and (max-width: 420px){
		#logo img { width: 70%; }
	}