@charset "UTF-8";
/* CSS Document */

*{	margin:0px;
	padding:0px;
	}
	
body{
	font-family: 'Open Sans';
	background-color:#56565a;
	color:#56565a;
	}

h1{	font-size:18px;
	text-transform:uppercase;
	font-weight:400;
	color:#eedc00;
	}
	
h2{	font-size:15px;
	font-weight:200;
	}
	
h3{	font-size:12px;
	font-weight:200;
	}

h4{	font-size:17px;
	font-weight:600;
	letter-spacing:0.02em; 
	}
	
p{	font-size:14px;
	text-align:justify;
	}
	
h6{
	font-family: 'Open Sans';
	font-size:16px;
	font-style:italic;
	text-transform:uppercase;
	}
	
a{
	text-decoration:none;
	color:#56565a;
	text-transform:lowercase;
	}
	
a:hover{
	text-decoration:none;
	color:#eedc00;
	}
	
main{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:auto;
	background-color:white;
	}
	
#content{
	width:100%px;
	height:auto;
	}
	
header{
	width:100%;
	height:200px;
	background-color:white;
	}
	
#logo{
	width:380px;
	height:120px;
	margin-left:70px;
	margin-top:60px;
	}
	
#navprov{
	width:310px;
	height:20px;
	margin-top:-20px;
	margin-left:600px;
	float:left;
	}
	
nav{
	width:450px;
	height:20px;
	margin-top:-20px;
	margin-left:550px;
	float:left;
	color:#56565a;
	text-transform:uppercase;
	font-size:16px;
	z-index:900;
	position:relative;
	}
	
#nav-responsive{
	display:none;
	}

menu{	
	width:450px;
	height:20px;
	}
	
.bande-jaune{
	width:21px;
	height:15px;
	float:left;
	padding-right:19px;
	padding-top:1px;
	}

menu ul{	
	list-style-type:none;
	text-align:left;
	display:inline-block;
	}
	
menu li{	
	list-style-type:none;
	text-align:left;
	display:inline-block;
	width:120px;
	height:20px;
	float:left;
	background-color:white;
	}

#prestations a:hover{
	color:#56565a;
}

#prestations ul li a:hover{
	color:#eedc00;
}
	
menu a{
	text-transform:uppercase;
	font-size:16px;}
		
menu ul li ul{ /*sous-menus fermé*/
	display:none;
	}
	
menu ul li:hover ul{ /*menus survolés sous-menus déroulés*/
	display:block;
	height:100px;
	width:290px;
	}

menu ul li ul li{ /*sous-menus ouverts*/
	width:290px;
	margin-left:-10px;
	padding-left:10px;
	padding-bottom:5px;
	}
	
menu ul li ul li a{
	font-size:13px;
	}
	
section{
	width:100%;
	height:auto;
	padding-top:50px;
	}

#homepage{
	display:block;
	}
	
#homepage-responsive{
	display:none;
	}
	
article{
	width:322px;
	height:auto;
	margin-left:70px;
	padding-bottom:40px;
	float:left;
	}

#projet{
	width:644px;
	height:auto;
	margin-left:70px;
	padding-bottom:40px;
	float:left;
	}

#chantiers{
	width:100%;
	height:auto;
	margin-left:70px;
	padding-bottom:40px;
	float:left;
	}

article.description{
	width:490px;
	height:auto;
	margin-left:380px;
    margin-top: -120px;
	padding-bottom:40px;
	float:left;
	}


#photo-container{
	width:320px;
	height:auto;
	float:left;
	margin-left:160px;
	margin-top:50px;
	display:block;
	padding-bottom:30px; 
	}

#photo-container3{
	width:490px;
	height:auto;
	float:left;
	margin-left:80px;
	margin-top:50px;
	display:block;
	padding-bottom:30px; 
	}
	
.photo-left{
	width:150px;
	height:100px;
	float:left;
	padding-right:10px;
	padding-bottom:10px;
	}
	
.photo-right{
	width:150px;
	height:100px;
	float:left;
	padding-right:10px;
	padding-bottom:10px;
	}
	
#page-up{
	display:none;
	}
	
#bandeau{
	display:block;
	width:100%;
	height:140px;
	clear:both;
	padding-bottom:10px;
	background-color:white;
	}
	
#bandeau-responsive{
	display:none;
	}
	
footer{
	width:100%;
	height:150px;
	background-color:white;
	clear:both;
	}
	
#contact{
	margin-left:70px;
	font-size:14px;
	}
	
#contact ul{
	list-style-type:none;
	}

.contact ul{
	list-style-type:none;
	}
	
#contact li{
	height:20px;
	color:#56565a;
	}
	
#copyright{
	width:100%;
	height:20px;
	text-align:center;
	text-transform:uppercase;
	padding-top:30px; 
	font-size:10px;
	}

	
/*Responsive design*/
@media screen and (max-width: 420px) {
	
body {
	overflow-x: hidden;
	overflow-y: scroll;
	}
	
main{
	position:absolute;
	width:100%;
	height:auto;
	}
	
header{
	height:150px;
	}

h6{	font-size:14px;}
	
#logo{
	margin-left:25px;
	margin-top:0px;
    width:90%;
	height:auto;
	float:none;
	}
	
#navprov{
	margin-top:30px;
	margin-left:25px;
	float:none;
	}
	
#homepage{
	display:none;
	}
	
#homepage-responsive{
	display:block;
	width:100%;
	height:100%;
	}
	
#contact{
	margin-left:25px;
	}
	
#copyright{
	text-align:left;
	margin-left:25px;
	padding-top:30px;
	width:80%;
	}

nav{
	display:none;
	}

/* css menu */
#nav-responsive{
	display:block;
	position:relative;
	width:28px;
	height:20px;
	margin-top:24px;
	margin-left:24px;
	text-transform:uppercase;
	}
	
#nav-responsive ul{
	list-style-type:none;
	}
	
#menu-responsive ul li{	/*menus fermés*/
	display:none;
	}
	
#nav-responsive ul li:hover ul li{	/*menus survolés déroulés*/
	display:block;
	height:auto;
	background-color:white;
	width:100%;
	padding-top:9px;
	font-size:18px;
	padding-left:24px;
	opacity:0.92;
	}
	
#menu-responsive ul{	/*menus ouverts*/
	display:block;
	width:360px;
	margin-top:10px;
	margin-left:-24px;
	}
	
section{
	padding-top:0px;
	width:auto;
	}

article{
	width:87%;
	height:auto;
	margin-left:24px;
	padding-bottom:30px;
	float:left;
	}
	
#projet{
	width:87%;
	height:auto;
	margin-left:24px;
	padding-bottom:30px;
	float:left;
	}
	
#photo-container{
	width:320px;
	height:auto;
	float:left;
	margin-left:24px;
	margin-top:0px;
	display:block;
	padding-bottom:30px;
	}
	
#photo-container3{
	width:320px;
	height:auto;
	float:left;
	margin-left:24px;
	margin-top:50px;
	display:block;
	padding-bottom:30px; 
	}
	
#page-up{
	display:block;
	float:left;
	width:320px;
	margin-left:24px;
	padding-bottom:30px;
	}
	
#bandeau{
	display:none;
	}
	
#bandeau-responsive{
	display:block;
	clear:both;
	padding-bottom:10px;
	background-color:white;
	}

}
@media screen and (max-width: 350px){
	
	#photo-container{
	margin-left:5px;
	}
}