@charset 'utf-8';
/******************** Entête UTF-8 ******************\
*
*	fichier			: public/projet/custom/css/main.css
*	projet			: @PROJET@
*	version			: 1.0.4 2016-03-11 15:59 LL
*
\****************************************************/

img{
	max-width: 100%;
}

a:link,
a:active,
a:visited{
	color:#000;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
	color:#000;
}

.margin-15-0{
	margin-top:15px;
	margin-bottom:15px;
}

.margin-30-0{
	margin-top:30px;
	margin-bottom:30px;
}

.margin-45-0{
	margin-top:45px;
	margin-bottom:45px;
}

.margin-60-0{
	margin-top:60px;
	margin-bottom:60px;
}

.blue,
a.blue{
	color:#6cb7c0;
}

.gray,
a.gray{
	color:#818285;
}

.orange,
a.orange{
	color:#f7941e;
}

.green,
a.green{
	/*color:#bdd73c;*/
	color:#9fbc26;
}

.bg-white{
	background:#fff;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size:15px;
	font-weight: 400;
	color:#000;
	
}

.container{
	position: relative;
}

/*Top Bar*/
#top-bar{
	
	background: url(../img/top-bar-bg.png) right center repeat-y #fff;
}

#top-bar ul{
	margin-bottom: 0px;
	margin-left: 0;
}

#top-bar li{
	display: inline-block;
}

#top-bar li a{
	display: block;
	padding:0px 10px;
	margin:3px 0;
	font-size: 1em;
	border-right:1px solid #000;
	text-transform:uppercase;
}

#top-bar li:last-child a{
	border-right:0px solid #000;
	padding-right:0;
}

/* HEADER */
#logo{
	display: inline-block;
	margin: 0 0 10px 0;
}

#logo a{
	display: block;
}

header{
	position: relative;
}

header nav{
	display: inline-block;
    position: absolute;
    bottom: 0;
    right: 15px;
}

header nav > ul{
	width:100%;
	text-align: center;
	margin-bottom: 0px;
	margin-left: 0;
	padding:0;
}

header nav ul li{
	display: inline-block;
	padding:5px 0px;
	position: relative;
	float: left;
	
}

header nav ul li:last-child{
	padding-right:0;
	
}

header nav ul li{
	border-top: solid 2px #fff;
}

header nav ul li.current{
	border-top: solid 2px #000;
}

header nav ul li a{
	display: block;
	font-size: 0.9em;
	text-decoration: none;
}

header nav ul li a:hover{
	text-decoration: none;
}

header nav ul li.blue{
	background: #e7f5f7;
	padding:5px 5px;
	font-weight: 700;
}

header nav ul li.blue:hover,
header nav ul li.blue.current{
	background: #6cb7c0;
	
}

header nav ul li.gray{
	background: #d9d9da;
	padding:5px 5px;
	font-weight: 700;
}

header nav ul li.gray:hover,
header nav ul li.gray.current{
	background: #818285;
	
}

header nav ul li.orange{
	background: #f9ab4f;
	padding:5px 5px;
	font-weight: 700;
}

header nav ul li.orange:hover,
header nav ul li.orange.current{
	background: #f7941e;
	
}

header nav ul li.green{
	background: #ebf3c4;
	padding:5px 5px;
	font-weight: 700;
}

header nav ul li.green:hover,
header nav ul li.green.current{
	/*background: #bdd73c;*/
	background: #9fbc26 ;
	
}

header nav ul li.blue:hover a,
header nav ul li.gray:hover a,
header nav ul li.orange:hover a,
header nav ul li.green:hover a,
header nav ul li.blue.current a,
header nav ul li.gray.current a,
header nav ul li.orange.current a,
header nav ul li.green.current a{
	color:#fff;
}

header nav ul li ul{
	display: none;
	position: absolute;
	top:15px;
	left:0;
	width: 100%;
}

header nav ul li:hover ul{
	display: block;
}

header nav ul li span{
	border-right:solid 1px #ccc;
	display: inline-block;
	padding: 0 5px;
}

header nav ul li.no-border span{
	border:none;
}

header a[href^="tel:"]{
	text-decoration: none;
	cursor: default;
} 

#mobile-menu-icon{		
	width: 40px;
	display: none;		
	cursor: pointer;
	position: absolute;
	right:16px;
	bottom:10px;
}

#mobile-menu-icon span {
	display: block;
	border-bottom: 5px solid #000;
	margin-bottom: 5px;
}

#header-slogan{
	display: inline-block;
    float: right;
	font-size: 2.5em;
	line-height: 0.8em;
}

#header-slogan div{
	display: inline-block;
	padding:0 40px;
	margin-top:20px;
}

#header-slogan div:last-child{
	float:right;
	margin-top:20px;
	padding-right:0;
}

#header-slogan div span{
	display: block;
	text-transform:uppercase;
	font-size: 0.4em;
    text-align: center;
}


/* Contenu*/
.right.carousel-control, .left.carousel-control {
    display: none;
}

.carousel-indicators {
    bottom: 170px;
	left: 20%;
}

.carousel-caption{
	top:0;
	left:19%;
	text-align: left;
	text-shadow: none;
	color:#fff;
}

body.home .carousel-caption{
	color:#000;
}

.carousel-caption h3{
	font-size: 2em;
}

.carousel-indicators li{
	width:12px;
	height:12px;
	background: #ccc;
	display: inline-block;
	border:none;
	border-radius: 0;
	margin:0;
}

.carousel-indicators li.active{
	width:12px;
	height:12px;
	background: #000;
	display: inline-block;
	border:none;
	border-radius: 0;
	margin:0;
}

.page-bloc{
	padding-top:30px;
	padding-bottom:30px;
	max-width: 1920px;
    margin: 0 auto;
}

.page-bloc.service-bloc{
	background: #414042;
	color:#fff;
}

#slider-overlay-bottom{
	display: none;
	
}

body.home #slider-overlay-bottom{
	display: block;
}

body.home #inner-page-bottom{
	display:none;
}

#google-map{
	height:300px;
	margin-top:45px;
}

#google-map iframe{
	width:100%;
	height:300px;
}

body.a-propos .wrap,
body.commercial .wrap,
body.nos-marques .wrap{
	width:50%;
	margin:0 auto;
}

/* FOOTER */
footer{
	padding:30px 0;
	background: #414042;
	color:#fff;
	max-width:1920px;
	margin:0 auto;
}

footer a:link,
footer a:active,
footer a:visited{
	color:#fff;
}

footer ul{
	padding:0;
	list-style: none;
}

footer li{
	text-align: left;
}

footer li a:link,
footer li a:active,
footer li a:visited{
	text-transform: uppercase;
	font-size: 0.7em
}

#footer-logos{
	margin-bottom:15px;
}

#footer-logos div{
	width:19%;
	display: inline-block;
	text-align: center;
	margin-bottom: 5px;
}

#inner-page-bottom{
	
}

.page-banner,.img-overlay-bottom{
	max-width:1920px;
	margin:0 auto;
}

@media screen and (max-width: 1199px) {
	
	#header-slogan div{
		padding: 0 10px;
	}
	
	#logo {
		margin: 10px 0 30px 0;
	}
	
	.services-accueil-widget .items > span{
		display: block;
		margin-bottom: 5px;
	}
	
	.services-accueil-widget {
		min-height: 560px;
	}
	
	.services-accueil-widget .items{
		top: -115px;
	}
	
}

@media screen and (max-width: 992px) {
	
	/*mobile menu*/
	#mobile-menu-icon{
		display: block;
	}
	
	header nav {
		position: absolute;
		left: 0;
		top: 148px;
		width: 100%;
		z-index: 99;
		display: none;
		bottom:auto;
	}
	
	header nav > ul{
		padding:0;
		background: #000;
	}
	
	header nav ul li {
		display: block;
		margin: 0;
		position: relative;
		float:none;
		
		padding:0;
		
	}
	
	header nav ul li:first-child{
		padding-top:0;
	}
	
	header nav ul li a:link,
	header nav ul li a:active,
	header nav ul li a:visited{
		display: block;
		padding: 10px 0;
		color: #ccc;
		font-size: 1.4em;
		text-align: left;
		padding-left:30px;
	}
	
	header nav ul li a:hover{
		text-decoration: none;
		color:#fff;
		
	}
	
	#header-slogan div:first-child{
		display: none;
	}
	
	header nav ul li span{
		border:none;
	}
	
	header nav ul li.blue,
	header nav ul li.gray,
	header nav ul li.orange,
	header nav ul li.green{
		background: #ccc;
		margin:2px 0;
	}
	
	header nav ul li.blue a,
	header nav ul li.gray a,
	header nav ul li.orange a,
	header nav ul li.green a{
		color:#000;
	}
	
	header nav ul li.blue:hover,
	header nav ul li.blue.current,
	header nav ul li.gray:hover,
	header nav ul li.gray.current,
	header nav ul li.orange:hover,
	header nav ul li.orange.current,
	header nav ul li.green:hover,
	header nav ul li.green.current{
		background: #f7941e;
		
	}
	
	.services-accueil-widget {
		min-height: 660px;
	}
	
	.services-accueil-widget .items{
		top:-45px;		
	}
	
	.services-accueil-widget{
		padding:15px 0;
	}
	
	.services-accueil-widget .text{
		
	}
	
	.carousel-caption{
		bottom:25%;
	}
	
	.carousel-indicators{
		bottom:27%;
	}
	
	.bloc-2-cols-widget.special .title,
	.page-bloc.special h1{
		position: relative;
		top:0;
		margin-bottom: 15px;
	}
	
}

@media screen and (max-width: 768px) {
	
	.services-accueil-widget .item{
		margin:4px auto;
		
	}
	
	.services-accueil-widget {
		
	}
	
	.services-accueil-widget .text span{
		width:100%;
	}
	
	.service-entete-widget .info{
		width:95%;
	}
	
	.service-entete-widget .wrap{
		top: -50px;
	}
	
	/*galerie*/
	.galerie-full{
		display: none;
	}
	
	.galerie-item{
		background: none !important;
		display: block;
		width: 100%;
		height:auto;
		margin-bottom:30px;
		opacity: 1;
		border:none;
		cursor: auto;
	}
	
	.galerie-item.active{
		border:none;
	}
	
	.galerie-item img,
	.galerie-item .galerie-text{
		display: block !important;
	}
	
	.galerie-item img{
		margin:0 auto;
	}
	
	.galerie-item.over{
		display: block;
	}
	
	/*diaporama*/
	#extra-html .realisations span{
		left:10px;
		top:10px;
		text-align: left;
	}
	
	body.a-propos .wrap,
	body.commercial .wrap,
	body.nos-marques .wrap{
		width:100%;
		margin:0 auto;
	}
	
	
}

@media screen and (max-width: 609px) {
	.services-accueil-widget {
		min-height: 1240px;
	}
}

@media screen and (max-width: 499px) {
	
	#header-slogan div:last-child{
		display: none;
	}
	
	#logo {
		margin: 10px 0 10px 0;
	}
	
	header nav{
		top:128px;
	}
	
	#top-bar li a{
		border-right:none;
	}
	
	.services-accueil-widget .text span{
		width:100%;
	}
	
	.carousel-caption,
	.carousel-indicators{
		display: none;
	}
	
	.service-entete-widget .info.blue,
	.service-entete-widget .info.gray,
	.service-entete-widget .info.orange,
	.service-entete-widget .info.green{
		background: rgba(255,255,255,1);
	}
	
	/*diaporama*/
	body.realisations .diaporamas-widget #extra-html span{
		font-size:1em;
	}
	
	/*nos manufacturiers*/
	.manufacturiers-logo-widget .item {
		display: block;
		margin: 15px auto;
	}
	
	#footer-logos div{
		width:32%;
	}
	
	.service-entete-widget .wrap{
		position: relative;
		top:auto;
		
	}
	
}

@media screen and (max-width: 399px) {
	
	.services-accueil-widget .item{
		width:96%;
	}
	
	.services-accueil-widget .items {
		top: -35px;
	}
	
	.services-accueil-widget {
		min-height: 1270px;
	}
	
	#footer-logos div{
		width:49%;
	}

}
