*{
	box-sizing:border-box;
	}


	
nav {
	position:static;
	bottom:0;
	width:100%;
	padding:1.5em 0 0 0;
	text-align:right;
	font-size: 14px;
	text-transform :uppercase;
	}
	
nav a:hover {
color:#eeace7;
transition: all 10000ms linear; -webkit-transition: all 2000ms linear;
border-bottom:5px solid rgba(238,172,231,.8);
transition: all .2s ease;
text-decoration:blink;

}

#entete {
 margin: auto;
    max-width: 960px;
}

iframe {
    width: 100%;
}
	
#menuzombie li:last-child {
	margin-right:35px;
	}

#logo {
    margin: 0;
    padding: 0;
	}

.left {
	float:left;
	margin-right: 10px;
	border-radius:5px;
}

.right {
	float:right;
	margin-left: 10px;
	border-radius:5px;
}

.album {
text-align:center;
}

.album figcaption {
    margin: -50px;
	
}

.album figcaption:hover {
background-color:violet;
margin:-50px 0;
border-radius: 10px;
}

form {
text-align:center;
margin-top: 50px;
margin-bottom:50px;
}

img.zoomEffect {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.9;
}
img.zoomEffect:hover {
    -moz-transform: rotate(5deg) scale(1.10);
    -webkit-transform: rotate(5deg) scale(1.10);
    -o-transform: rotate(5deg) scale(1.10);
    -ms-transform: rotate(5deg) scale(1.10);
    transform: rotate(5deg) scale(1.10);
    opacity: 1;
}

h2 {
/*	text-align:center;
    color: #fdcaca;   */
	margin-top: 60px;
	font-size: 32px;
	text-shadow: -1px -1px #eeace7, 1px 1px #7d0505, -3px 0 4px #000;
	color: red;
	padding:16px;
	font-weight:lighter;
	text-align:center;
	display:block;
	margin:16px;
}


.selection {
	color:#eeace7;
	border-bottom:5px solid rgba(238,172,231,.8);
	}
	
body {
	margin:0;
	height:100%;
	color:#fff;
	background: url("../images/bcg.jpg") no-repeat center fixed;
	background-size: cover;
	font-family: arial, verdana, sans-serif;
	}
	
html {
	height:100%;
	}

.conteneur1 {
			margin:0 auto;
			width:960px;
			}

.conteneur2 {
			margin: -30px auto 0;
			width:960px;
			margin-bottom: -60px;
			background-color: rgba(255, 255, 255, 0.2);
			box-shadow: 3px 3px 20px #000;
			padding: 10px;
			overflow: hidden;
			}
			

	
ul {
	list-style:none;
	padding:0;
	}
	
li {
	display:inline;
	margin:15px 20px 10px;
	}
	
.texte {
	font-size:x-large;
	}
	
a {
	color:#fff;
	text-decoration:blink;
	}
	
a:hover {
		text-decoration:underline
		}

figure {
			margin:50px 0;
	}


		
#image2 {
		display:inline-block;
		margin-left:10px;
		}
		
#album1 {
		display:inline-block;
		margin-right:10px;
		}
		
#album2 {
		display:inline-block;
		margin-left:10px;
		}
		
.conteneur3 figure{
	margin:50px 0 0 0;
	}

.calendrier  {
    float: right;
    margin: -233px 0px 0px 0px;
}	

.calendrier table{
border:4px solid dark;
border-radius:5px;
}

.infocalendrier {
text-align: left;
}

.date {
color:#eeace7;
}
	
footer {
		text-align:center;
		padding:20px 0 10px 0;
		

}

footer figure {
		display:inline-block;
		    margin-bottom: 15px;
			
}

footer p {
		margin: 0;
		}
	
/* cartes */

.menu{
   list-style:none;    
   overflow:hidden;
   padding:5px 0;
   position:relative;
}

.menu2{
   list-style:none;    
   overflow:hidden;
   padding:5px 0;
   position:relative;
   color:#d5cfcf;
}

.typemenu{
   list-style:none;    
   overflow:hidden;
   padding:5px 0;
   position:relative;
}

.menu label:hover,.menu2 label:hover {
background:#eeace7;
border-radius:5px;
color:steelblue;
}

li label{
   float:left;

   padding-right:10px;
}
li span{
   float:right;
   padding-left:10px;
}
.dotted-bg{
   border-top:dotted 2px #ccc;
   position:absolute;   
   top:15px;
   left:0;
   width:100%;
   z-index:-1;
}

	

/* RESPONSIVE */

@media screen and (max-width: 980px) 
	{
	
	img {
		max-width:100%;
		}
	

	
	#album1 {
		position:static;
		display:block;
		margin-right:0px;
		}
		
	#album2 {
		position:static;
		display:block;
		margin-left:0px;
		}
	
	.conteneur2 {
			margin:0 auto;
			width:auto;
			text-align:center;
			}
	
	.conteneur1 {
			margin:0 auto;
			width:auto;
			}
			
	.conteneur3 {
			margin:0 auto;
			width:auto;
			text-align:center;
			}
			

	
	body {
	text-align:center;

	}

	}
	
@media screen and (max-width: 650px) 
	{
	
		#logo {
	display:none;
	}
		
		#menuzombie {
	text-align:center;	
	}
	
	}
	
/* RESPONSIVE pour petit écran*/
	
@media screen and (max-width: 500px) 
	{
	

	    .menu {
        width:100%;
        padding:13px 3px;
		}
	
			#menuzombie {
	text-align:center;	
	}
	
	}