/* Scss Document */

@import 'config';
@import 'mixin';


@font-face {
  font-family: 'Lato-Light';
  src: url('Lato-Light.eot?#iefix') format('embedded-opentype'),  url('Lato-Light.woff') format('woff'), url('Lato-Light.ttf')  format('truetype'), url('Lato-Light.svg#Lato-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato-Bold'; 
  src: url('Lato-Bold.eot?#iefix') format('embedded-opentype'),  url('Lato-Bold.woff') format('woff'), url('Lato-Bold.ttf')  format('truetype'), url('Lato-Bold.svg#Lato-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}


/* ----------------------------------
/* ------------ ENTETE ----------
------------------------------------- */

*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{background:$bg-body;@include no-marge;@include full-size;}
div,td{@include general-font($primary-color,$primary-size,$primary-lineheight,$primary-font); @include animation;}
a{text-decoration:none;color:$link-color;@include animation;}
img{border:none; display:block; max-width:100%; height:auto;margin: 0 auto;}
p{padding:10px 0;margin:0;}
h1,h2,h3,h4{font-weight:normal;@include no-marge;}

h1{color:$titre1;font-size:30px;font-weight: 700;text-transform: uppercase;text-align: center;padding: 40px 0; line-height: 30px;}
h2{color:$titre2;font-size:24px;font-weight: 600;text-transform: uppercase;padding: 10px 0; @include font-face(Lato-Bold)}
ul h3{display:inline;}
address,menu{@include no-marge;font-style:normal;}
input[type="text"],input[type="email"],input[type="tel"],input[type="mobile"],input[type="fax"],input[type="password"],textarea,select{font-family: Trebuchet MS,Tahoma,sans-serif,Verdana;font-size: 13px;color:#3C3F3B;max-width: 100%;width: 100%;border:1px solid #2F2F2F;display: inline-block;background: $white;}
@include menu-nav;
@include photos;

.none{ display:none;}
.center,#center{text-align: center;}
.url{ display:inline-block;}
.num{ font-size:16px; font-weight:500; display:inline-block;}
.clearfix:after{ content:""; display:table; clear:both;}
.container{@include container($container-size,$container-marge);}
.row{margin-left: -15px; margin-right: -15px;}
.wrp{ max-width: 1550px; width: 100%; margin: 0 auto; padding: 0 30px;}
.clear{ clear:both;}
.center{ text-align:center;}
.wrap{ width:100%; margin:0 auto; max-width:1920px;}
#smartnav{ display:none;}
.sitemap ul li{ list-style: square;
	a{text-transform: capitalize; line-height: 30px; 
	&:hover{padding-left: 20px;}
} 
}
.center.redims{
    max-width: 400px;
	display: block;
	margin: 0 auto;
}
/* ----------------------------------
/* ------------ HEADER ----------
------------------------------------- */
#site{margin: 0 auto; max-width: 1920px; overflow: hidden; width: 100%;}

header{
	
}
.header{
	.menu{ background: $blue; min-height: 100px; display: flex; align-items: center;
		ul{	@include no-marge; display: flex ; justify-content: center; margin: 0 auto;
			li{ list-style: none; border-left: solid 1px $black;
					&:first-child{border-left: none;}
				a{ color:$white;padding: 5px 20px;text-transform: capitalize; 
					@include resp(1280){padding: 5px 10px;}
					&:hover{background:$orange;}
				}
				
			}
		}
	}
	#flash{ position: relative; min-height: 600px; 
		.cont-infocli{ background: $black-t; z-index: 250; position:  absolute ; top: 0; left: 0 ; right: 0;
			.infocli{ max-width: 1550px; width: 100%; padding: 0 30px; margin: 0 auto; display: flex; justify-content: space-between;min-height: 75px; align-items: center;
				.adr{ color: $white; @include bg($assets_path,'picadr.png','left','center','no-repeat'); padding: 10px 0 10px 50px;

				}
				.tel{
					a{color: $white; font-size: 30px; line-height: 30px;@include bg($assets_path,'pictel.png','left','center','no-repeat'); padding: 0 0 0 50px;}

				}
			}
		}
		#logo{ position: absolute; top: 0 ; bottom: 0 ; right: 0 ; left: 0; display: flex; align-items: center; z-index: 150; 
			a{margin: 0 auto;}
		}
		#content-flash{ width: 100%; overflow: hidden;
			#box1{ width: 1920px; left: 50%; line-height: 0; margin-left: -960px; position: relative;}
		}
	}
	
}

/* ----------------------------------
/* ------------ CORPS ----------
------------------------------------- */
#corps{min-height: 400px;}

.bloc-list{@include colon(5,0,10);}
.teste{margin: 0;@include border(all,2px,$black,solid);@include bg-image($assets_path,'serp.jpg');}

#central{ background: $white;
	.ttl{ min-height: 210px;@include bg($assets_path,'bg-full.png','top','center','no-repeat'); display: flex; align-items: flex-end; justify-content: center;
		h1{ padding: 0 10px 40px 10px;@include bg($assets_path,'tir.png','bottom','center','no-repeat') }
	}
	.bloc1{ display: flex; justify-content: space-between; align-items: center;
		.tof{ width: 49%;
			
		}
		.tx{ width: 49%;
			
		}
	}
	.bloc2{max-width: 1824px; width: 100%; margin: 0 auto;
		ul{padding: 50px 0; display: flex; justify-content: space-between;
			li{  list-style: none; width: 32%;
				a{position:  relative; display: block;
				.deco{ position: absolute; top: 0 ; bottom: 0 ; left: 0;  width: 275px; display: flex; align-items:  center;
					@include resp(1280){ width: 220px;}
					span{color: $white; font-weight: bold;font-size: 36px; padding-top: 145px; text-transform: uppercase; margin-left: 15px;
						@include resp(1280){font-size: 28px; padding-top: 110px;}
					}
				}
				.s1{ background: $blue-t;
					span{@include bg($assets_path,'pic-plomb.png','top','left','no-repeat')
						
					}
				}
				.s2{ background: $red-t;
					span{
						@include bg($assets_path,'pic-chauf.png','top','left','no-repeat')
					}
				}
				.s3{ background: $yelow-t;
					span{
						@include bg($assets_path,'pic-elec.png','top','left','no-repeat')
					}
				}
				}
			}
		}
	}
	.bloc3{@include bg($assets_path,'bg-contact.jpg','top','left','no-repeat'); min-height: 300px; display: flex; align-items: center; justify-content: center;
		.tx{ color: $white;font-size: 24px; text-transform: uppercase; text-align: center; width: 90%;
			a{ font-size: 60px; font-weight: bold; color: $white; text-transform: uppercase; line-height: 60px; position: relative; display: block;
			&:before{content: url(../images/tir2.jpg); top:-75px; position: absolute; z-index: 200; left: 0%; right: 0%;}
			}
		}
	}
	.bloc4{max-width: 1824px; width: 100%; margin: 0 auto;
		ul{padding: 50px 0; display: flex; justify-content: space-between; flex-wrap: wrap;
			li{  list-style: none; width: 32%;
				h2{ padding-left: 20px;}
				ul{ display: inherit; padding:10px 0 10px 50px !important;list-style:  none; 
					li{ list-style: square; width: 100%;}
				}
				a{ position:  relative; display: block;
					.deco2{ position: absolute; top: 0 ; bottom: 0 ; right: 0;  width: 275px; display: flex; align-items:  center; background: $black-t2;
						@include resp(1280){ width: 220px;}
						span{color: $white; font-weight: bold;font-size: 36px; padding-top: 115px; text-transform: uppercase; margin-right: 15px; line-height: 36px; text-align: right;
							@include resp(1280){font-size: 28px; padding-top: 110px;}
						}
					}
					.s21{ 
						span{@include bg($assets_path,'carr.png','top','right','no-repeat')

						}
					}
					.s22{
						span{
							@include bg($assets_path,'renov.png','top','right','no-repeat')
						}
					}
					.s23{
						span{
							@include bg($assets_path,'phot.png','top','right','no-repeat')
						}
					}
				}
			}
		}
	}
}



/* ----------------------------------
/* ------------ FOOTER ----------
------------------------------------- */

#footer{ background: $black;
	footer{
		.link{ max-width: 1550px; width: 100%; margin: 0 auto;
			ul{ padding: 40px 0 ;display: flex; justify-content: center; @include bg($assets_path,'tir2.jpg','bottom','center','no-repeat'); flex-wrap: wrap;
				li{ list-style:  none;  border-left: solid 1px $white; margin-bottom: 10px;
					&:first-child{border-left: none;}
					a{ color: $white; padding: 10px;text-transform: capitalize; 
						&:hover{ background: $orange; }
					}
				}
			}
		}
		.com{ padding: 40px 0;
			
		}
	}
} 



/*CONTACT*/
.form-group{ margin:0 0 10px 0;}
.form-group label, .form-group input.form-input, textarea.form-textarea{ width:99%; display:block; margin:0 auto;}
input[type="text"],textarea,select{ padding:8px 5px; margin:8px 0; display:inline-block; border:1px solid #ccc; border-radius:4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.btn-form{ margin:10px 0 0 0;}
.btn-submit-1, .btn-submit-2{  background: #00a0d2; border-color: #0073aa; -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15); box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15); color: #fff; text-decoration: none; width:200px; padding: 10px 16px; font-size: 15px; border:1px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; margin:10px 0 0 0; cursor:pointer; text-transform:capitalize;}
/*PLAN D'ACCES*/
.map-google{ width:98%; margin:0 auto;}
.map-google iframe{ margin:0; padding:0; border:none; width:100%; height:400px;}
/*REALISATIONS*/
#diapo-container{}
p.titre-diapo{ text-transform:uppercase; font-weight:bold;}
#diapo-container ul, #diapo-container ul li{ margin:0; padding:0; list-style:none;}
#diapo-container .nav-diapo ul li { border-bottom:1px solid #eee;}
#diapo-container .nav-diapo ul li:first-child{ border-top:1px solid #eee;}
#diapo-container .nav-diapo ul li a{ display:block; padding:10px 0 10px 5px; text-transform:uppercase;}
#diapo-container .nav-diapo ul li.link-play a, #diapo-container .nav-diapo ul li a:hover{ background:#1b9bff; color:#fff;}
#diapo-container .nav-diapo ul li a:hover{ opacity:0.8;}
#diapo-container .nav-diapo ul{ padding-left:5px;}
.nav-diapo{ width:28%; float:left;}
#diapo-inner{ width:70%; float:right;}
.nav-diapo .link-disable{ cursor:not-allowed; opacity:0.4;}
@media screen and (max-width: 767px){
	#smartnav{ display:block;}
	#nav{ display:none;}
	}