body { 
	height:10000px; 
	background-color:#fff;
}
#instructions {
	position: fixed;
	z-index: 100000;
	cursor: pointer;

	top: 0;left: 0;width: 100vw;height: 100vh;
	display: flex;justify-content: center;align-items: center;flex-direction: column;
}
.instructions-entete {
	position: relative;margin-bottom: 15px;
	font-family: 'BBBBaskervvol-Medium';
	font-size: 26px;
}
.instructions-lighter {
	position: relative;margin-bottom: 15px;
	font-family: 'BBBBaskervvol-Italic';
	font-size: 28px;
}
.instructions-demarrez {
	font-family: 'BBBBaskervvol-Regular';
	font-size: 40px;
	cursor: pointer;
}

#menu-hamburger {
  position:fixed;
  left:50%;bottom:0px;
  margin-left: -50px;
  width:100px;height:100px;
  z-index:100000;
  opacity: 0.5;
  transition:  opacity 0.2s ease-in;
}
#menu-hamburger:hover {
		opacity: 1;
}
#menu {
	position: fixed;
	top: 0;left: 0;width: 100vw;height: 100vh;
	background-color: #fff;
	z-index: 90000;
	display: none;
}
#menu-bande {
	position: absolute;top: 50%;width: 100%;height: 360px;
	margin-top: -200px;padding: 20px 0;
	border: solid 0px red;
	z-index: 50000;
	display: flex;flex-flow:  row nowrap;
	overflow: auto;
}
.menu-element {
	position: relative;
	border: solid 0px orange;
	height: 100%;
}
.menu-element img { height:100%;margin:0 10px; }

.ecran {
	position:fixed;
	left:2vw;
	top:2vh;
	width:96vw;
	height:96vh;
	z-index:1000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ecran img { max-height:100%;max-width:100%; }
#ecran1 div {
	position: absolute;
	font-size: 28px;font-family: sans-serif;
	
	text-align: center;
}

#ecran1 { opacity: 0; }

.overlay {
	top: 0;left: 0;width: 100vw;height: 100vh;
	overflow: hidden;
	background-position: 60% 45%;
	background-size: 110%;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	z-index: 10000;
	opacity: 0;

	animation-name: overlay2_anim;
		animation-duration: 10s;
		
		animation-iteration-count: infinite;

		transition:background-position 0.08s linear;
}
#overlay-1 { background-image: url(overlays/1527.jpg); }
#overlay-2 { background-image: url(overlays/1510.jpg); }
#overlay-3 { background-image: url(overlays/1528.jpg); }

@keyframes fond_anim {
  0% { 
	opacity: 0.5;
  }
  50% { 
	opacity: 0.7;
  }
  100% { 
	opacity: 0.5;
  }
}

@keyframes overlay2_anim {
  0% { 
	opacity: 0.6;
  }
  50% { 
	opacity: 0.3;
  }
  100% { 
	opacity: 0.6;
  }
}

/* HAUTEUR DU SCROLL DE L'UTILISATEUR */
#scrolledHeight {
	position: fixed;
	left: 30px;
	top: 30px;
	z-index: 3000;
	opacity: 0;
}



#clic {
	position: fixed;
	top: 0;left: 0;
	width: 100vw;height: 100vh;
	z-index: 10000;
	cursor: pointer;
}