@charset "UTF-8";



body {
	background-color: white;
	font-family: 'Roboto Condensed', sans-serif;
	margin:30px;
	
	}



	#burger{display : none;}
	.apropos{display : none;}

	
	
	.header {
    width: 24%;
    position: absolute;
    margin-right: 50px;
	}

	

	h1{
	font-size: 26px;
	line-height :24px;
	font-weight: 400;
	color : #87888a;
	margin-top: 10px;
	margin-right: 30px;
	}

	
	
	h2{
	font-size: 16px;
	line-height :18px;
	font-weight: 300;
	margin-top: -15px;
	color : #87888a;
	margin-right: 30px;
	}
	
	nav p{
		margin-left:40px;
		margin-bottom:0px;
		font-weight: bold;
		}
	
	nav{
	margin-left: -40px;
	line-height: 15px;
		}
	
	a{
	text-decoration: none; 
	color :black;
	}
	
	li{
	list-style-type: none;
	line-height: 17px;
		}

	.menu a,p{font-size :11px;}

	.menu a{line-height: 14px;font-weight: normal;}

	.menu p{font-size :12px;margin-bottom: 0px;font-weight: bold;}
	.header p{font-size :12px;margin-bottom: 0px;font-weight: bold;} 

	.menu ul {margin-top: 0px;}

	.menu a:hover{ font-size :11px;
	background-color: #f6c802;
		}



	.HeaderPhotos {
    width: 100%;
    position: relative;
	}

	.HeaderPhotos .photos div{margin-left: 30px;}

	div .photos {
		display: block;
    float: left;
    position: absolute;
    width: 75%;
    margin-left: 20%;
    margin-top: 5px;
	}
	
	img{width:100%;}

	#visuel1 {
    top: 0%;
    left: 0%;
    width: 61%;
	}
	
	#visuel2 {
    position: absolute;
    display: block;
    width: 30%;
    left: 62%;
    top: 0%;
	}

	#visuel3 {
    position: absolute;
    left: 62%;
    top: 51%;
    width: 30%;
	}

	#visuel4 {
    position: absolute;
    left: 0%;
    top: 100.5%;
    width: 30%;
	}
	
	#visuel5 {
    position: absolute;
    left: 31%;
    top: 100.5%;
    width: 30%;
	}

	#visuel6 {
    position: absolute;
    width: 61%;
    left: 31%;
    top: 151%;
	}

	#visuel7 {
    position: absolute;
    left: 0%;
    top: 200.5%;
    width: 30%;
	}

	#visuel8 {
    position: absolute;
    left: 0%;
    top: 251%;
    width: 30%;
	}

	#visuel9 {
    position: absolute;
    top: 251%;
    left: 62%;
    width: 30%;
	}

	#visuel10 {
    position: absolute;
    left: 0%;
    top: 301%;
    width: 61%;
	}

	#visuel11 {
    position: absolute;
    width: 30%;
    left: 31%;
    top: 251%;
	}

	#visuel12 {
    position: absolute;
    top: 351%;
    left: 62%;
    width: 30%;
	}

	.visuelshome {display:none;}


@media screen and (min-width: 1150px) {

.header {
    width: 240px;
    position: absolute;
    margin-right: 50px;
	}

	div .photos {
		display: block;
    float: left;
    position: absolute;
    width: 731px;
    margin-left: 250px;
    margin-top: 5px;
	}


	#visuel1 {
    top:0px;
    left:0px;
    width: 491px;
	}
	
	#visuel2 {
    position: absolute;
    display: block;
    width: 242px;
    left: 499px;
    top: 0px;
	}

	#visuel3 {
    position: absolute;
    left: 499px;
    top: 177px;
    width: 242px;
	}

	#visuel4 {
    position: absolute;
    left: 0px;
    top: 347px;
    width: 242px;
	}
	
	#visuel5 {
    position: absolute;
    left: 250px;
    top: 347px;
    width: 242px;
	}

	#visuel6 {
    position: absolute;
    width: 491px;
    left: 250px;
    top: 524px;
	}

	#visuel7 {
    position: absolute;
    left: 0px;
    top: 694px;
    width:242px;
	}

	#visuel8 {
    position: absolute;
    left: 0px;
    top: 871px;
    width: 242px;
	}

	#visuel9 {
    position: absolute;
    top: 873px;
    left: 499px;
    width: 242px;
	}

	#visuel10 {
    position: absolute;
    left: 0px;
    top: 1048px;
    width: 491px;
	}

	#visuel11 {
    position: absolute;
    width: 242px;
    left: 250px;
    top: 873px;
	}

	#visuel12 {
    position: absolute;
    top: 1222px;
    left: 499px;
    width: 242px;
	}

	.visuelshome {display:none;}
}

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

	body{
	margin-right :20px;
	margin-left :5px;
	margin-top :5px;
	}
		
		
	h1{
	display:none;
	}

	h2{
	display:none;
	}

	.header {
	display:none;
	}

	#burger{display : block;
	font-weight: 400;}

	#burger ul{margin-bottom: 0px;}

	a.contact{
	float : right; 
	color :#bcbec0 ;
	font-size: 25px;
	}


	.apropos{
	height :0px;
	-ms-transition: all  ease-out 1000ms;
	transition: all  ease-out 500ms;
	}

	.ouvert{
	height :350px;
	display: block;
		}

	a{
	font-family: 'Roboto Condensed', sans-serif;
	font-size :24px;
	color:#87888a;
	padding-left: 10px;}

	.apropos a{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight : 300;
	font-size :12px;
	color:black;
	text-align: left;
	line-height:16px;
	}

	.new {display: inline-block;margin-top: 0px;}
	.new a:hover{ font-size :12px;
	background-color: #f6c802;
		}

		a.moi{padding-left: 10px; }


	
/*	.filtres{display:none;}*/

	
	.new ul{
	margin-top: 0px;
	}
	.new p{margin-top: 15px;}

	nav p{
		margin-left:50px;
		margin-bottom: 5px;
		font-size: 15px;
		margin-top: 0px;
		}
	
	
	div.photos { display :none;
	
	}

	

/*
	.visuels {display: block;
	position: absolute;
    margin-right: 0px;
    margin-top:5px;
    left : 0%;
	z-index:80;
	width :120%; 	
    top: 120%;
	}*/

	.visuelshome {display: block;
	position: absolute;
    margin-right: 0px;
    margin-top:5px;
    left : 0%;
	z-index:80;
	width :120%; 	
    top: 120%;
	}
	

	#visuel13,#visuel130,#visuel131,#visuel132,#visuel133,#visuel134,
	#visuel134,#visuel135,#visuel136,#visuel137,#visuel138,#visuel139,#visuel140,#visuel141,#visuel142,#visuel143,#visuel144 img{
	width:100%;
	margin-left: 0px;

	}

	

	div#visuel13,#visuel130,#visuel131,#visuel132,#visuel133,
	#visuel134,#visuel134,#visuel135,#visuel136,#visuel137,#visuel138,#visuel139,#visuel140,#visuel141,#visuel142,#visuel143,#visuel144 {
    top: 0%;
    left: 0%;
    right :0%;
    width: 80%;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 5px;


		}


		}