#pasdephoto
	{
	padding-top : 30px;
	}

#enveloppephoto
	{
	position : relative;
	text-align : center;
	min-height : 50vh;
	max-height : 600px;
	}
	
#vignettes
	{
	width : 90%;
	height : 160px;
	left : 5%;
	position : absolute;
	bottom : -10px;
	overflow : hidden;
	}
#vignettes img
	{
	margin : 1px;
	vertical-align : middle;
	border : 5px solid transparent;
	max-width : 80px;
	max-height : 80px;
	opacity : 0.5;
	transition : max-height 0.5s, max-width 0.5s;
	-moz-transition : max-height 0.5s, max-width 0.5s;
	-webkit-transition : max-height 0.5s, max-width 0.5s;
	}
#vignettes img:hover
	{
	opacity : 1;
	cursor : pointer;
	max-width : 140px;
	max-height : 140px;
	}
#vignettes img.affichee
	{
	opacity : 1;
	max-width : 120px;
	max-height : 120px;
	border : 2px solid white;
	}
#bandeau
	{
	white-space:nowrap;
	text-align : center;
	height : 160px;
	line-height : 160px;
	vertical-align : middle;
	}

#photo
	{
	width : 100%;
	height : calc(100% - 80px);
	vertical-align : top;
	display : inline-block;
	position : relative;
	}

#photo h2
	{
	display : block;
	font-size : 1.25em;
	}
	
#photo .description
	{
	background : rgba(255, 255, 255, 0.85);	
	position : absolute;
	top : 20px;
	left : -30%;
	vertical-align : top;
	display : inline-block;
	font-family: 'Dancing Script', cursive;
	width : 35%;
	text-align : right;	
	-moz-border-radius: 25px 25px 25px 25px; 
	  -webkit-border-radius: 25px 25px 25px 25px;
	  -0-border-radius: 25px 25px 25px 25px; 
	  border-radius: 25px 25px 25px 25px;	padding : 10px;
	}
#photo img
	{
	position : relative;
	vertical-align : top;
	max-width : 100%;
	height : auto;
	width : auto;
	max-height : 600px;
	}
	
#flecheg, #fleched
	{
	position : absolute;
	top : 50%;
	color : black;
	background : rgba(128, 128, 128, 0.5);
	height : 30px;
	line-height : 30px;
	width : 30px;
	display : inline-block;
	text-align : center;
	vertical-align : middle;
	-moz-border-radius: 15px 15px 15px 15px; 
	  -webkit-border-radius: 15px 15px 15px 15px;
	  -0-border-radius: 15px 15px 15px 15px; 
	  border-radius: 15px 15px 15px 15px;	font-size : 2em;
	
	cursor : pointer;
	}
#flecheg:hover, #fleched:hover
	{
	background : rgba(255, 255, 255, 0.85);
	}
#flecheg img, #fleched img
	{
width : 30px;
	}
#flecheg
	{
	left : 5px;
	}
#fleched
	{
	right : 5px;
	}
	
	

@media screen and (max-width: 1200px)
	{
	#photo .description 	{ 	left : 1%;	width : auto;}
	}