/*+++++++++++++++++++ RESPONSIVE DESIGN ++++++++++++++++++ */

 
body
{
	background-color: #34281C;
	font-family: "Trebuchet MS", Arial, sans-serif;
}

#bloc_page
{
	background-color: #BEAE94;
	width: 900px;
	margin:auto;
}

header
{	
	background-color: white;
}

header h1
{	
	width: 400px;
	font-size: 3.3em;
	color:#34281C;
	display: inline-block;
	margin-top:110px;
	position: relative;
	vertical-align: top;
	text-shadow: 0px 6px 6px #826446;
}

#titre
{
	display:inline-block;
	
}

.logo 
{	
	display:inline-block;
	
}

nav	
{
			width: auto;
			text-align: right;
		
			
}

nav ul
{
	
	position: relative;
	list-style-type: none;


	
}


nav  li{
	display: inline-block;
	margin:5px;
	padding-right: 20px;
	position: relative;
	
	
	
}

nav a 
{
	color: #34281C;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0px 4px 4px #826446;
}

nav a:hover
{
	color: #BEAE94;
	background-color: #34281C;
	text-shadow: none;
}

nav a :visited
{
	color: #34281C;
	text-shadow: none;
}

section
{
	
}

article 
{
	display: inline-block;
	width: 580px;
	vertical-align: top;
	
}

article video
{
	margin-left: 145px;
	box-shadow: 0px 4px 4px #826446;
	height:250px;
	width: 350px;
}

article h2
{
	padding: 20px;
	color: white;
	text-shadow: 0px 4px 4px #34281C;
	font-Size: 1.7em;
}

article h3
{
	padding: 20px;
	color: white;
	text-shadow: 0px 4px 4px #34281C;
	font-Size: 1.2em;
}
article p
{
	text-align: justify;
	Margin: 10px;
	
}
article h5
{
	color: red;
	font-size: 2.5em;
	margin: 20px;
}

article ul
{
	background-color: white;
	width: auto;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	box-shadow: 0px 4px 4px #826446;
	list-style-type: none;
}

article ul strong
{
	font-weight: bold;
	
}
 .fotoprof 
{	float: left;
	height:120px;
	width:120px;
	margin-left: 30px;
	margin-right:25px;
}

#galerie
{
	/*width:333px;*/
	position: relative;
	margin: 20px;
	padding: 5 px;
}

#galerie .vignette img
{
	padding: 0px;
	margin: 5px;
	border: 2px solid #34281C;
}

#galerie .vignette span
{
	padding: 5px;
	position: absolute;
	visibility: hidden;
	text-align: center;

}

#galerie .vignette:hover span
{
	visibility: visible;
	top: 10px;
	left: 100px;
	z-index: 2;
	
}

#galerie .vignette span p
{
	background-color:white;
	color: #34281C;
	font-weight: bold;
	font-size: 1.6em;
	margin: 0px;
	padding: 4px;
	border: 2px solid #34281C;
	
	
	
}
aside
{
	display: inline-block;
	background-color:#34281C;
	width: 280px;
	margin-bottom: 20px;
	box-shadow: 0px 4px 4px #826446;
}

aside img
{
	
	height:210px;
	width:150px;
	float: right;
	padding: 10px;
	margin-right: 55px; 
}


aside h3
{
	font-size:1.6em;
	color: white;
	margin: 15px;
}

aside h4
{
	color: white;
	font-size:1.1em;
	margin: 15px;
}

aside p
{
color: white;
font-size: 0.8em;
margin: 15px;	
}

aside ul
{
	text-align: justify;
	padding: 10px;
	color: white;
	list-style-type: none;
}

footer
{
	height:90px;
	font-size: 0.7em;
	background-color: white;
	border-top: 5px solid #34281C;
	
}

#part1, #part2, #part3
{
	display: inline-block;
	color: #34281C;
	padding:5px;
	vertical-align: top;
	font-weight: bold;
	width:250px;

	
}
#part4
{
	display: inline-block;
	color: #34281C;
	margin-left:25px;
	vertical-align: top;

	
}

#part2 img
{
	height: 30px;
	width:110px;
	border: 1px solid #34281C;
	box-shadow: 0px 4px 4px #826446;
	margin: 2px;
}

#part4 img
{
	height: 40px;
	width:40px;
	
} 

#part4 p
{
	
	font-weight: bold;
	font-size: 1.3em;
}

#map_canvas 
{ 
	margin: 20px;
	width: 500PX; 
	height: 300PX;
	border: 10px solid #34281C;
}



@keyframes FondChgt
{
	
	
	
	0% {
		background: #34271F;
	}
	
	50%{
		background:#BEAE94;
	}
	
	100% {
		background: #34271F;
	}
	

}


body
{
	animation-name: FondChgt;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	
}





@media screen and (max-width: 1024px)
{
	
	
	#bloc_page
	{
		width: auto;
		
	}
	
	header h1
	{
		font-size: 2.8em;
	}
	
	.logo1
	{
		width:200px;
		height: 200px;
		margin: 10px;
		margin-bottom:0;
	}
	
	 nav
	{
		width: auto;
		text-align: left;
		background-color: #34281C;
		box-shadow: 0px 0px 0px;
		
		
	
	}
	
	 nav li 
	{
		display: block;
		padding: 20px;	
		
		
	}
	
	nav a
	{
		font-size: 4em;
		color:white;
		

	}
	
	nav a:hover
	{
		border-bottom: 10px;		
	}
	
	article aside
	{
		width: auto;
		display: block;
		margin-bottom: 15px;
		
	}
	
	#photo_aside img
	{
		width: 110px;
		float: right;
		margin-left: 15px;
	}
	
	article
	{
		width: auto;
		
	}
	article video
{
	margin-left: 15px;
	box-shadow: 0px 4px 4px #826446;
	height:250px;
	width: 350px;
}

#map_canvas 
{ 
	margin: 10px;
	width: 300PX; 
	height: 300PX;
	border: 3px solid #34281C;
}

}