/* Okay frames */
@keyframes sliding {
0% { left: 0%; }
10% { left: 0%; }
20% { left: -100%; }
30% { left: -100%; }
40% { left: -200%; }
50% { left: -200%; }
60% { left: -300%; }
70% { left: -300%; }
80% { left: -400%; }
90% { left: -400%; }
100% { left: 0%; }
}

/* Definition main page */

body {
	color: #060606;
	background-image: url("../images/parallax4.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom;
	background-size: cover;
}

#galerie_page {
	background: #F8F9F9;
	width: 80%;
	margin: 10vh auto 0 auto;
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

#galerie_titre {
	text-align: center;
	font-size: 5vw;
	font-weight: 900;
	padding-top: 5vh;
	padding-bottom: 6vh;
}

/* Slideshow */

div#galerie_meta {
	width: 90%;
	height:auto;
	overflow: hidden;
	background: black;
	margin: auto;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

div.galerie_slider {
  position: relative;
	width: 500%;
  font-size: 0;
	animation: 20s sliding infinite;
}

div.galerie_slider * {
	margin:0;
}

div.galerie_slider figure {
  width: 20%;
	height: auto;
  display: inline-block;
	position: inherit;
}

div.galerie_slider img {
	 width: 100%;
	 height: auto;
	 vertical-align: middle;
}


div.galerie_slider figcaption {
  position: absolute;
	bottom: 5px;
	right:10px;
	width: 100%;
	color: white;
  font-size: 20px;
	text-align: right;
}

/* Partie thumbnail */

.galerie_thumb {
	width: 20vh;
	height: 15vh; /*Adaptation en 4:3*/
	border-radius: 2px;
	margin-bottom : 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s ease-out;
}

.galerie_thumb:target {
	height: auto;
	width: 60vw;
}

.galerie_thumb:target+.galerie_close {
	display: block;
}

.galerie_thumb:target+.galerie_close+.galerie_expand{
	display: none;
}

.galerie_close {
	filter:invert(100%); /* Eventuellement je changerais directement l'image en blanc*/
  background-image: url("https://bit.ly/29QeT21");
  background-repeat: no-repeat;
	display: none;
	position: absolute;
	width:10px;
	height:10px;
	right:1%;
	top:1%;
	padding: 15px 15px 15px 15px;
}

.galerie_expand{
	filter:invert(100%);
	position: absolute;
	right:10%;
	top:10px;
	pointer-events: none;
	width:10%;
	height:auto;
}

#galerie_mosaic {
	width:90%;
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	margin: auto;
	padding: 10px;
	text-align: center;
}

.galerie_thumb_wrapper {
	position: relative;
	flex: 0 0 15%;
	margin:auto;
}