body{
	background-color : #045FB4;
}
#conteneur1{
	position : absolute;
	left : 0px;
	top : 0px;
	display : flex;
	flex-direction : column;
}
#conteneur2{
	display : flex;
	flex-direction : column;
}

#navigation{
	list-style : none;
	margin : 0;
	padding : 0;
}
#navigation li{
	width : 298px;
	border : 1px outset;
	color : #2E2E2E;
	background : #2E2E2E;
	text-align : center;
	padding-top : 20px;
	padding-bottom : 20px;
}
#navigation li a{
	display : block;
	color : #FE642E;
	font-family: Verdana,, Arial, Impact, sans-serif; 
	font-size : 20px;
	text-decoration : none;
}
#navigation li:hover{
	*/color : #FFF;
	background-color : #848484;
}
#navigation li:hover a{
	color : #FFF;
}
#imagedefond img{
	position : absolute;
	left : 300px;
	top : 000px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
	height : 600px;
	width : 900px;
}
#entete1{
	height : 190px;
	width : 300px;
	color : #FFF;
	background : #585858;
	text-align : center;
	vertical-align : middle;
	font-family : "Comic sans MS", Arial, Impact, sans-serif; 
	font-size : 30px;
	font-style : italic;
	font-weight : bold;
}
#entete2{
	height : 1200px;
	width : 300px;
	color : #BDBDBD;
	background : #585858;
	text-align : left;
	vertical-align : bottom;
	font : Verdana ;
	font-size : 12px;
} 
#image1>img{
	position : absolute;
	left : 1200px;
	top : 30px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image2>img{
	position : absolute;
	left : 1100px;
	top : 300px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image3>img{
	position : absolute;
	left : 350px;
	top : 550px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image4>img{
	position : absolute;
	left : 700px;
	top : 500px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image5>img{
	position : absolute;
	left : 1200px;
	top : 580px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image6>img{
	position : absolute;
	left : 1100px;
	top : 970px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image7>img{
	position : absolute;
	left : 700px;
	top : 1100px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#image8>img{
	position : absolute;
	left : 1050px;
	top : 1300px;
	width : 400px;
	height : 300px;
	border-width : 5px;
	border-color : #FFF;
	border-style : solid;
}
#texte {
	position : absolute;
	left : 340px;
	top : 880px;
	height : 300px;
	width : 1500px;
	font-family : Verdana, Arial, Impact, sans-serif;
	font-size : 16px;
	color : #FFF;
}
h1 {
	position : absolute;
	left : 800px;
	top : 830px;
	height : 300px;
	width : 1500px;
	font-family : Verdana, Arial, Impact, sans-serif;
	font-size : 24px;
	color : #FFF;
}

@media all and (max-width: 1024px){
	#navigation li{
		width : 198px;
		border : 1px outset;
		color : #2E2E2E;
		background : #2E2E2E;
		text-align : center;
		padding-top : 15px;
		padding-bottom : 15px;
	}
	#navigation li a{
		display : block;
		color : #FE642E;
		font-family: Verdana,, Arial, Impact, sans-serif; 
		font-size : 15px;
		text-decoration : none;
	}
	#imagedefond img{
		position : absolute;
		left : 200px;
		top : 000px;
		height : 306px;
		width : 590px;
	}	
	#entete1{
		height : 150px;
		width : 200px;
		color : #FFF;
		background : #585858;
		text-align : center;
		vertical-align : middle;
		font-family : "Comic sans MS", Arial, Impact, sans-serif; 
		font-size : 20px;
		font-style : italic;
		font-weight : bold;
	}
	#entete2{
		height : 1100px;
		width : 200px;
		color : #BDBDBD;
		background : #585858;
		text-align : left;
		vertical-align : middle;
		font : Verdana ;
		font-size : 12px;
		font-style : italic;
		font-weight : bold;
	}
	#image1>img{
		position : absolute;
		left : 200px;
		top : 310px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image2>img{
		position : absolute;
		left : 390px;
		top : 310px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image3>img{
		position : absolute;
		left : 590px;
		top : 310px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#image4>img{
		position : absolute;
		left : 200px;
		top : 466px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image5>img{
		position : absolute;
		left : 390px;
		top : 466px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image6>img{
		position : absolute;
		left : 590px;
		top : 466px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#image7>img{
		position : absolute;
		left : 200px;
		top : 622px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#image8>img{
		position : absolute;
		left : 390px;
		top : 622px;
		width : 200px;
		height : 150px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#texte {
		position : absolute;
		left : 220px;
		top : 776px;
		height : 300px;
		width : 500px;
		font-family : Verdana, Arial, Impact, sans-serif;
		font-size : 12px;
		color : #FFF;
	}
	h1{
		position : absolute;
		left : 680px;
		top : 700px;
		height : 300px;
		width : 500px;
		font-family : Verdana, Arial, Impact, sans-serif;
		font-size : 16px;
		color : #FFF;
	}
}	
@media all and (max-device-width: 480px){
	#navigation li{
		width : 400px;
		border : 1px outset;
		color : #2E2E2E;
		background : #2E2E2E;
		text-align : center;
		padding-top : 40px;
		padding-bottom : 40px;
	}
	#navigation li a{
		display : block;
		color : #FE642E;
		font-family: Verdana,, Arial, Impact, sans-serif; 
		font-size : 28px;
		text-decoration : none;
	}
	#imagedefond img{
		position : absolute;
		left : 400px;
		top : 000px;
		height : 400px;
		width : 600px;
	}	
	#entete1{
		height : 200px;
		width : 400px;
		color : #FFF;
		background : #585858;
		text-align : center;
		vertical-align : middle;
		font-family : "Comic sans MS", Arial, Impact, sans-serif; 
		font-size : 36px;
		font-style : italic;
		font-weight : bold;
	}
	#entete2{
		height : 2780px;
		width : 400px;
		color : #BDBDBD;
		background : #585858;
		text-align : left;
		vertical-align : bottom;
		font : Verdana ;
		font-size : 20px;
	}
	#image1>img{
		position : absolute;
		left : 400px;
		top : 400px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image2>img{
		position : absolute;
		left : 400px;
		top : 800px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image3>img{
		position : absolute;
		left : 400px;
		top : 1200px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#image4>img{
		position : absolute;
		left : 400px;
		top : 1600px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image5>img{
		position : absolute;
		left : 400px;
		top : 2000px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}
	#image6>img{
		position : absolute;
		left : 400px;
		top : 2400px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#image7>img{
		position : absolute;
		left : 400px;
		top : 2800px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#image8>img{
		position : absolute;
		left : 400px;
		top : 3200px;
		width : 600px;
		height : 400px;
		border-width : 5px;
		border-color : #FFF;
		border-style : solid;
	}	
	#texte {
		position : absolute;
		left : 20px;
		top : 3650px;
		height : 300px;
		width : 950px;
		font-family : Verdana, Arial, Impact, sans-serif;
		font-size : 26px;
		color : #FFF;
	}
	h1{
		position : absolute;
		left : 20px;
		top : 3600px;
		height : 300px;
		width : 500px;
		font-family : Verdana, Arial, Impact, sans-serif;
		font-size : 30px;
		color : #FFF;
	}
	#legendePhoto {
		position : absolute;
		left : 450px;
		top : 50px;
		height : 50px;
		width : 800px;
		color : #0404B4; 
		font-family : "Comic sans MS", Arial, Impact, sans-serif; 
		font-style : italic;
		font-weight : bold;
		font-size : 26px;
	}
}