body {
	margin: 0;
	font-family: sans-serif;
}
div {
	box-sizing: border-box;
	border: solid 0px lightgrey;
}

* {
    -webkit-tap-highlight-color: transparent;
}


nav {
	position: fixed;
	bottom: 1.5rem;left: 1.5rem;
	background-color: #fff;
	border: solid 2px lightgrey;
	padding: 10px;
	border-radius:  7px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	z-index: 100000;
	opacity: 0;
}
.nav_smaller { font-size:11px;  }

.tres_grand { font-size:100px; }

#click, #noClick {
	position: fixed;
	width: 100vw;height: 100vh;
	top: 0;left: 0;
	border: solid 0px orange;
	cursor: pointer;
}
#click { z-index: 5000; }
#noClick { z-index:10000;display: none; }


#choix_fond {
	position: fixed;
	width: 100vw;height: 100vh;
	top: 0;left: 0;
	background-color: #fff;
	z-index: 20000;
	display: none;
}

.choix {
	position: fixed;
	width: 100vw;height: 70vh;
	top: 100vh;
	border: solid 0px orange;
	z-index: 30000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.choix_bouton {
	position: relative;
	width: 350px;height: 100px;
	border: solid 0px blue;
	cursor: pointer;
}
.choix_bouton img { width:100%; }


@keyframes anim_recommencer {
  0%   { opacity:1; }
  50%   { opacity:0; }
  100%  { opacity:1; }
}
#bouton_recommencer div { position:absolute; }
#bouton_recommencer div:nth-child(1) { z-index: 200; }
#bouton_recommencer div:nth-child(2) { z-index: 100; }
#bouton_recommencer div:first-child { 
	animation-name: anim_recommencer;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
}


.fond {
	position: fixed;
	width: 100vw;height: 100vh;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 100;
	display: none;
}
#fond1 {
	background-image:  url(imgs/1-maison.jpg);
}
#fond2 {
	background-image:  url(imgs/2-ville.jpg);
}
#fond3 {
	background-image:  url(imgs/2-ville.jpg);
}
#fond4 {
	background-image:  url(imgs/3-office.jpg);
}
#fond5 {
	background-image:  url(imgs/4-bureau.jpg);
}
#fond6 {
	background-image:  url(imgs/2-ville.jpg);
}
#fond7 {
	background-image:  url(imgs/3-office.jpg);
}
#fond8 {
	background-image:  url(imgs/4-bureau.jpg);
}
#fond9 {
	background-image:  url(imgs/4-bureau.jpg);
}
#fond10 {
	background-image:  url(imgs/4-bureau.jpg);
}
#fond12 {
	background-image:  url(imgs/4-bureau.jpg);
}

.scene { display:none; }


.ecran {
	position: fixed;
	width: 100vw;height: 100vh;
	top: 0;
	border: solid 0px orange;
	z-index: 500;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
}

.scene .ecran:first-child { border: solid 0px blue; }

.ecran img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: solid 0px tomato;
}
.ecran img.medium {
	position: absolute;
	width: 500px;
	height: 500px;
	
	object-fit: contain;
	border: solid 3px black;
	background-color: white;
}

.ecran#voiture {
	margin-top: 20%;
}

#images_animations { display:none; }

#animDring, #animCheval { display:none; }
#animCheval { 
	position:absolute; 
	width: 500px;height: 500px;
	border: solid 0px red;
	left: -550px;
	bottom: 0px;
	transition:  all 0s ease-in;
}
#animCheval img {
		
}
#animVoiture { 
	position:absolute; 
	width: 500px;height: 500px;
	border: solid 0px red;
	left: -550px;
	bottom: 0px;
	transition:  all 0s ease-in;
}

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

    #animCheval, #animVoiture {
        height: 40%;
    }
    #animCheval img, #animVoiture img { height:100%; }


}

@keyframes chevalier_anim {
  0%   { transform:rotate(0deg); }
  20%   { transform:rotate(-15deg); }
  40%  { transform:rotate(0deg); }
  60%  { transform:rotate(15deg); }
  80%  { transform:rotate(0deg); }
  100% { transform:rotate(0deg); }
}
@keyframes chevalier_anim_retour {
  0%   { transform:rotate(0deg); }
  20%   { transform:rotate(-15deg); }
  40%  { transform:rotate(0deg); }
  60%  { transform:rotate(15deg); }
  80%  { transform:rotate(0deg); }
  100% { transform:rotate(0deg); }
}

#chevalier {
	position: fixed;
	top: 100%;right: 150%;
	height: 30%;width: 150px;
	background-image: url(imgs/chevalier.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 400;
	animation-name: chevalier_anim;
  	animation-duration: 2s;
  	animation-iteration-count: infinite;
}
#dragondin {
	position: fixed;
	top:  100%;right: 150%;
	margin-right: 100px;
	height: 30%;width: 120px;
	background-image: url(imgs/dragon.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 500;
	animation-name: chevalier_anim;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
}

#chevalier_retour {
	position: fixed;
	top: 40%;right: 1%;
	height: 30%;width: 150px;
	background-image: url(imgs/chevalier.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 400;
	animation-name: chevalier_anim_retour;
  	animation-duration: 2s;
  	animation-iteration-count: infinite;
}
#dragondin_retour {
	position: fixed;
	top:  40%;right: 1%;
	margin-right: 100px;
	height: 30%;width: 120px;
	background-image: url(imgs/dragon.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 500;
	animation-name: chevalier_anim_retour;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
}