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

	

	h1, .h1-like {letter-spacing: 0.4em;
		font-size: 2.7rem;
	}

	#navigation .pam .case {
		width: 6em;
	}

	#navigation {
		font-size: 1em;
	}

	h2, .h2-like {
		font-size: 2.6rem;letter-spacing:0.3em;}


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

	h1, .h1-like {
		font-size: 2.5rem;
		letter-spacing: 0.4em;
	}





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

	h1, .h1-like {
		font-size: 1.9rem;letter-spacing
	}

	h2, .h2-like {
		letter-spacing: 1em;
		font-size: 1.6rem;letter-spacing
	}
#navigation {
	font-size: 0.8em;
	text-align: center;
	margin: auto;
	width: 100%;
}
	#navigation .pam .case {
		width: 6em;
	}

	#galeriephotos li {
		width: 10em;
		height: 10em;
	}

	#galeriephotos li a {
		height: 10em;
		width: 10em;
	}
	
		#galeriephotos li a:hover{display:block;
	position:absolute;z-index: 1;

overflow:hidden;
  background-color:yellowgren;
	
	
transition:All 0.4s ease;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.4s ease;

transform:  scale(1.4);
-webkit-transform:scale(1.4);
-moz-transform:  scale(1.4);
-o-transform: scale(1.4);
		-ms-transform:  scale(1.4);}

	#galeriephotos {
		width: 95%;
		height: 100%;
	}


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

	#navigation .pam .case {
		width: 6em;
	}

	#navigation {
		font-size: 0.8em;
	}

	h1, .h1-like {
		font-size: 1.6rem;
	}

	h2, .h2-like {
		font-size: 1.4rem;
	}

		#galeriephotos {
	height: 2000px;
	width: 90%;
	font-size: 1.3em;
	text-align: center;
	margin: auto;
	position: relative;}
		
		
		#back a {display:block;
		background- color:brown;
			width:40px;height:auto;
			margin:0px;padding: 0px;
		}
		
			
			#next {	
		width:40px;padding: 0px; 
		background-color: aua;

}
			

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

	
	
	
	#galeriephotos {
	height: 7500px;
	width: 85%;
	font-size: 1.3em;
	text-align: center;
	margin: auto;
		position: relative;overflow: auto;}
	
	
	
	#galeriephotos li {
		height: 10em;
		width: 10em;
	}

	#galeriephotos li a {
		width: 10em;
		height: 10em;
		
		transition-property: none;
		transform: none;
		
	}

	
#presentation {display:block;width:100%; margin:auto;text-align: center;max-width: 800px;line-height: 15px;}

#presentation h1 {color: darkslateblue;width: 100%;text-transform: uppercase;}

#presentation p{display: block; text-align: justify;max-width: 800px;margin:auto;
line-height: 0,9em;padding-bottom: 20px; }


.decotextgauche {display: block;padding-right:0px;padding-top: 15px;width: 100% ;margin: auto;float: none;}

.decotextdroit {display: block;padding-left:0px;padding-top: 15px;width: 100% ;margin: auto;float: none;}
	
	
	
	
	
	
	@media only screen and (max-width:437px) {

	#navigation {
		font-size: 0.6em;
	}

	h2, .h2-like {
		font-size: 1.2rem;
	}

	h1, .h1-like {
		font-size: 1.4rem;
	}

	

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

	h1, .h1-like {
		font-size: 1.2em;
		letter-spacing: 1px;
	}

	h2, .h2-like {
		letter-spacing: 4px;
		font-size: 1.8rem;
	}

	#navigation {
		font-size: 1em;
		
		
	}
	
	#navigation .pam .case{display: block;line-height: 1.5em;width: 3em;margin:auto;}

	.fresquecentrale {
		width: 100%;
	}

	#galeriephotos {
		width: 85%;
		height: 100%;
		
	}

	#galeriephotos li {
		width: 15em;
		height: 15em;
		margin: 0;
		display: block;margin-top: 10px;
	}

	#galeriephotos li a {
		height: 15em;
		width: 15em;
		transition-property: none;
		transform: none;
	}
	
	#galeriephotos li a:hover{display:block;
		
		
	position:absolute;z-index: 1;
transition-property: none;
		transform: none;
overflow:auto;
  background-color:yellowgren;
	
	
}

	.pam {
		padding: 20px;
	}

	#galeriephotos a img.logo {
		width: 100%;
		height: 100%;
	}

	#navigation .pam .case {
		width: 6em;
	}

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

	h1, .h1-like {
		font-size: 1.2em;
	}

	#galeriephotos {
		height: 7000px;
		width: 85%;margin:auto;
	}

	#galeriephotos li {
		margin: auto;margin-bottom: 10px;
		height: 9em;
		width: 9em;
	}

	#galeriephotos li a {
		width: 9em;
		height: 9em;
	}