body 
{
	background-color: black;
}
/*Entête*/
#tete
{
	color:white;
	border: 1px solid black;
	margin-left: 10%;
	width: 80%;
}
#tete p
{
	text-align: center;
	font-size: 42px;

}
/*Bloc contenant*/
#content
{
	background-color: white;
	border: 1px solid black;
	margin-left: 10%;

	width: 80%;
}
#pres
{
	margin-left: 1%;
}
#presente h1
{
	text-align: center;
}
/*LA Galerie index*/
#galerie{margin-left: 8%;}
#galerie ul li {  display: inline-block; }
#galerie li {  margin:20px; }
#galerie img {  width: 250px; height: 250px;}
#galerie a {  text-decoration: none; position: relative; top: 0; left: 0; display: block; overflow: hidden; }
#galerie p.legende {  background-color: #000047;  color: #52B6FA; padding: 6px; position: absolute; bottom: 0px; left: 0; margin: 0; width: 250px;
text-align: center; font-size: 20px;}
/*Navigateur*/
#nav
{
	background-color: grey;
	margin-left: 10%;
	width: 80%;
	font-size: 24px;
	border: 1px solid black;
}


#nav ul, #sous_menu{
padding:0;
margin:0;
list-style:none;
text-align:center;
}

#nav ul li{
display:inline-block;
position:relative;
}

#sous_menu li{
display:inherit;
border-radius:0;
}

#sous_menu li:hover{
border-radius:0;
}

#sous_menu li:last-child{
border-radius:0 0 8px 8px;
}

#sous_menu{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}

#nav ul li:hover ul{
max-height:30em;
}

 /*background des liens menus */
#nav ul li:first-child{
background-color: grey;

}
#nav ul li:nth-child(2){
background-color: grey;

}
#nav ul li:nth-child(3){
background-color: grey;

}

#nav ul li:nth-child(4){
background-color: grey;

}

#nav ul li:nth-child(5){
background-color: grey;

}
#nav ul li:nth-child(6){
background-color: grey;

}

#nav ul li:last-child{
background-color: grey;

}

/* background des liens sous menus */
#nav li:first-child li{
background-color: grey;
}
#nav ul li:nth-child(2) li{
background-color: grey;
}
#nav ul li:nth-child(3) li{
background-color: grey;
}
#nav ul li:nth-child(4) li{
background-color: grey;
}
#nav ul li:nth-child(5) li{
background-color: grey;
}
#nav ul li:nth-child(6) li{
background-color: grey;
}
#nav ul li:nth-child(7) li{
background-color: grey;
}
#menu-demo2 li:last-child li{
background-color: grey;
}

 /*background des liens menus et sous menus au survol*/ 
 #nav ul li:first-child:hover, #nav ul li:first-child li:hover{
background:#888888;
}
#nav ul li:nth-child(2):hover, #nav ul li:nth-child(2) li:hover{
background:#888888;
}
#nav ul li:nth-child(3):hover, #nav ul li:nth-child(3) li:hover{
background:#888888;
}
#nav ul li:nth-child(4):hover, #nav ul li:nth-child(4) li:hover{
background:#888888;
}
#nav ul li:nth-child(5):hover, #nav ul li:nth-child(5) li:hover{
background:#888888;
}
#nav ul li:nth-child(6):hover, #nav ul li:nth-child(6) li:hover{
background:#888888;
}
#nav ul li:last-child:hover, #nav ul li:last-child li:hover{
background:#888888;
}

/* les a href */
#nav a{
text-decoration:none;
display:block;
padding:10px 10px;
color:#fff;
font-family:arial;
width: 160px;
height: 6%;
}

#nav  li:hover li a{
color:#fff;
text-transform:inherit;
}
#nav li:hover a, #nav ul li li:hover a{
color:#000;
}
/*image catégorie*/
#cat
{
	margin-left: 20%;
}
#cat img
{
	width: 250px;
	padding: 1%;

}
#cat table
{
	margin-top: 1%;
	margin-bottom: 1%;
}
/*Administration*/
#administration
{
	text-align: center;
}
#administration p
{
	font-size: 42px;
}
#administration a
{
	-webkit-border-radius: 28;
  	-moz-border-radius: 28;
  	border-radius: 28px;
  	text-shadow: 0px 1px 0px #666666;
  	font-family: Arial;
  	color: #ffffff;
  	font-size: 30px;
  	background: #878787;
  	text-align: center;
  	padding: 12px 40px 10px 40px;
  	text-decoration: none;
  	display: block;
  	width: 25%;
  	margin-left: 35%;
  	margin-top: 1%;
  	margin-bottom: 1%;
}
#administration a:hover
{
	background: #242424;
	text-decoration: none;
}
#profil
{
	margin-left: 45%;
	font-size: 20px;
}
#modpass
{
	margin-left: 35%;
	font-size: 20px;
}
#suppho
{
	margin-left: 20%;
	margin-right: 20%;
}
#cat a
{
	text-decoration: none;
	color: black;
}
#cat a:hover
{
	
	color: blue;
}
#gal {display: inline-block;}
.galimg
{
	display: inline-block;
	text-align: center;
	margin-left: 6%;
	width: 25%;
	
	margin-top: 1%;
	

}
.galimg img
{
	
	width: 75%;
	text-align: center;
}
#nomgal
{
	text-align: center;
	font-size: 30px;
}
/*contact*/
#cont
{
	margin-top: 1%;
	margin-left: 25%;
	margin-right: 25%;
	margin-bottom: 1%;
}

.erreur
{
	background-color: #FCA0A0;
	border: 2px solid #C10000;
	border-radius: 10px;
	text-align: center;
	color: #C10000;
	width: 60%;
}
#formcontact input
{
	background-color: #F1F1F1;
}
#formcontact textarea
{
	background-color: #F1F1F1;

}
.success
{
	background-color: #A0FCA7;
	border: 2px solid #1C9B25;
	border-radius: 10px;
	text-align: center;
	color: #006507;
}
#envcont
{
	margin-left: 45%;
}
/*mentions-legales*/
.texteml
{
	margin-left: 10%;
	margin-bottom: 1%;
}

.texteml h2
{
	margin-left: 5%;
}
.textemla
{
	margin-left: 8%;
}
.textemlb
{
	margin-left: 12%;
}
.textemlc
{
	margin-left: 1%;
}

/*footer*/
.footer
{
	display: inline-flex;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-left: 10%;
	width: 80%;
	background-color: grey;
	
}
#logo
{
	display: inline-block;	
	margin-left: 17%;
}
#logo img
{
	height: 120px;
}
#textef1
{	
	color: white;
	width: 20%;
	display: inline-block;
	margin-left: 15%;
	padding-top: 1%;
}
#texte1
{
	text-align: center;
}
#textef1 B
{
	color: black;
}
#texte2
{
	margin-left: 15%;
}
#texte3
{
	/*margin-left: 22%;*/
	text-align: center;
}
#textef2
{
	color: white;
	display: inline-block;
	width: 20%;
	margin-left: 7%;
	padding-top: 1%;
}
#textef2 B
{
	color: black;
}
 /*petit écran*/
@media (min-width: 576px)
{
	#content
	{
		margin-left: 0%;
		width: 100%;
	}
	#nav
	{
		margin-left: 0%;
		width: 100%;
	}
	#nav a
	{
		font-size: 150%;
		width: 250px;
	}
	#galerie p.legende 
	{ 
		font-size: 50px;
	}
	#cont
	{
		margin-left: 0%;
		width: 100%;
	}

	/*Formulaire de contact*/

	#formcontact
	{
		margin-left: 35%;
	}
	#formcontact input
	{
	
	}
	#formcontact label
	{
	 font-size: 140%;
	}
	#contint
	{
			
	}
	#cat
	{
		margin-left: 0%;
		
	}
	.footer
	{
		margin-left: 0%;
		width: 100%;
	}
	#textef1
	{	
		margin-left: 10%;
	}
	#texte1
	{	
		text-align: center;
		font-size: 20px;
	}
	#textef2
	{
		width: 50%;
	}
	#texte2
	{
		font-size: 20px;
		margin-left: 5%;
	}
	#texte3
	{
		/*margin-left: 22%;*/
		font-size: 20px;
	}
	#logo
	{	
	margin-left: 20%;
	}
	
	
}
@media (min-width: 768px)
{
	#content
	{
		margin-left: 0%;
		width: 100%;
	}
	.footer
	{
		margin-left: 0%;
		width: 100%;
	}
	#nav
	{
		margin-left: 0%;
		width: 100%;
	}
	#nav a
	{
		font-size: 150%;
		width: 250px;
	}
	#galerie p.legende 
	{ 
		font-size: 40px;
	}
	#cont
	{
		margin-left: 0%;
		width: 100%;
	}
	#formcontact
	{
		



	}
	#formcontact input
	{
	}
	#formcontact label
	{

	}
	#contint
	{
		/*margin-left: 15%;*/
	}
	#cat
	{
		margin-left: 3%;
		font-size: 20px;
	}
	#galerie
	{
		margin-left: 15%;
	}
	#textef1
	{	
		margin-left: 10%;
	}
	#texte1
	{	
		text-align: center;
		font-size: 20px;
	}
	#textef2
	{
		width: 50%;
	}
	#texte2
	{
		font-size: 20px;
		margin-left: 5%;
	}
	#texte3
	{
		/*margin-left: 22%;*/
		font-size: 20px;
	}
	#logo
	{	
	margin-left: 20%;
	}
	
}
@media (min-width: 992px)
{
	#content
	{
	margin-left: 10%;
	width: 80%;
	}

	#nav
	{
		margin-left: 10%;
	width: 80%;
	}
	#nav a
	{
		font-size: 100%;
		width: 160px;
	}
	#galerie p.legende 
	{ 
		font-size: 30px;
	}
	#cont
	{
		margin-left: 15%;
		width: 80%;
	}
	#formcontact
	{

	}
	#formcontact input
	{

	}
	#formcontact label
	{
		font-size: 100%;
	}
	#contint
	{
		
	}
	#cat
	{
		margin-left: 20%;
	}
	#galerie
	{
		margin-left: 10%;
	}
	.footer
	{
		margin-left: 10%;
		width: 80%;
	}
	#texte1
	{	
		text-align: center;
		font-size: 15px;
	}
	#textef2
	{
		width: 30%;
	}
	#texte2
	{
		font-size: 15px;
		margin-left: 5%;
	}
	#texte3
	{
		/*margin-left: 22%;*/
		font-size: 15px;
	}
	#logo
	{	
	margin-left: 15%;
	}
	

}
@media (min-width: 1200px)
{
	#content
	{
	margin-left: 10%;
	width: 80%;
	}
	.footer
	{
		margin-left: 10%;
		width: 80%;
	}
	#nav
	{
		margin-left: 10%;
		width: 80%;
	}
	#nav a
	{
		font-size: 100%;
		width: 180px;
	}
	#galerie p.legende 
	{ 
		font-size: 20px;
	}
	#cont
	{
		
	}
	#formcontact
	{
	margin-left: 40%;
	}
	#formcontact input
	{

	}
	#formcontact label
	{
	
	}
	#contint
	{

	}
	#cat
	{
		margin-left: 20%;
	}
	#textef1
	{	
		margin-left: 15%;
	}
	#galerie
	{
		margin-left: 9%;
	}
	#texte1
	{	
		text-align: center;
		font-size: 18px;
	}
	#textef2
	{
		width: 20%;
		margin-left: 11%;
	}
	#texte2
	{
		font-size: 18px;
		margin-left: 5%;
	}
	#texte3
	{
		/*margin-left: 22%;*/
		font-size: 18px;
	}
	#logo
	{	
		margin-left: 18%;
	}
}