/*-------------------------*/
/* Style de Fenêtre Modale */
/*-------------------------*/

#overlaydefilementphotos{	
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
	background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
	align-items:center;	
}
#overlaydefilementphotos:target{
    display: block;
}








/* Numérotation et quantité de photos */
div#numphotosendefilement {
	position:absolute;
	top: 10px;	
	float: left;	
	left:15px;
	width: 47px;	
	height:47px;	
	text-align:left;
	vertical-align:top;
	font-family:arial;	
	font-size:1.35em;
	font-weight:bold;
	color:white;		
}









/* Croix de fermeture de la fenêtre modale */
div#croixfermeturedefilementphotos {
	position:absolute;	
	float: right;	
	right:5px;
	width: 47px;	
	height:47px;
	margin-top:7px;
	margin-right:5px;	
	text-align:right;
	vertical-align:down;
}








/* Photos en défilement manuel */
div#photosendefilement {
	position: absolute;	
	width: 340px;
	text-align: center;		
	border: 3px solid #3CC;
	padding: 2px;
	top: 153px; left: 50%; /* à 50%/50% du parent référent */
	transform: translate3d(-50%,-50%,0);
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.0s;
  animation-name: fade;
  animation-duration: 2.0s;
}

@-webkit-keyframes fade {
  from {opacity: .0}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .0}
  to {opacity: 1}
}








/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 130px;
  width: auto;
  padding: 8px;
  color: rgb(220,220,220);
  font-weight: bold;
  font-size: 16px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index:1;   
}

/* Position the "prev button" to the left */
.prev {
  left: 14px;
  border-radius: 2px 0 0 2px;
}

/* Position the "next button" to the right */
.next {
  right: 14px;
  border-radius: 2px 0 0 2px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}








/* Loupes en cas de zoom sur la photo */
div#loupeagauche {
	position: absolute;
	align-items: center;	
	left:14px;
	top: 178px;			
	width: 18px;	
	height: 18px;
	z-index: 3;	
	text-align:center;	
}
div#loupeadroite {
	position: absolute;
	align-items: center;	
	right:15px;
	top: 178px;			
	width: 18px;	
	height: 18px;
	z-index: 3;	
	text-align:center;	
}








div#titrephoto {
	position: absolute;
	top:273px;
	width: 100%;
	height: 40px;	
	padding:5px;
	z-index: 3;	
	font-size:1.05em;
	background-color:white;
	text-align:center;
}








/* Nom du site touristique */
div#titrenomdusite {
	position:absolute;	
	top:310px;		
	float: left;	
	left:5px;
	margin-top:4px;
	text-align:left;
	vertical-align:down;
	font-family:arial;	
	font-size:1.30em;
	font-weight:bold;
	color:white;
}