/*** CSS Styles  ***/

/* General  */
body {
	background-color: #f6f5f0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
h1 {
	font-family: "Jost", sans-serif;
	font-weight: 300;
	padding:0px 0;
	margin:0;
}
h2 {
	font-family: "Jost", sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 0.4em;
	color: #8a2be2;
	padding: 5px 0;
	margin:0;
}
p {
	color: #000;
}

/* Introduction */
#introduction {
	position: absolute;
	left: 20px;
	top: 20px;
}

/* Gabarit */
.gabarit {
height: 100vh;
width: 100vw;
}

.scene-intro {
	background-image: url(../images/intro.jpg);
	height: 100%;
	width: 100%;
}

#commencer {
	position: absolute;
	left: 100px;
	bottom: 30px;
	cursor: pointer;
}

#commencer:hover {
transform: scale(1.05);
transition:0.3s;
}
	
/* Musique */
#tambour {
	transition:0.3s;
    cursor: pointer;
	position: absolute;
	top: 30px;
	left: 30px;
}

 
#tambour:hover {

    transform: scale(1.1);
    transition:0.3s;

}

/* Lieu1 */

.lieu1{
	background-image: url(../images/Lieu1.jpg);
	height: 100%;
    width: 100%;
	display: none;
}

#pirate{
	position: absolute;
	left: 600px;
	bottom: 70px;
	transition:0.3s;
    cursor: pointer;                                                                                                             
}
#pirate:hover {
	transform: scale(1.05);
	transition:0.3s;
	}
.bulle {
	background-image: url(../images/bulle.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
    height: 340px;
    width: 601px;
	position: absolute;
	left: 800px;
	bottom: 400px;
	transition:0.3s;
    cursor: pointer;   
	display:none;                                                                                                          
}
.texte p {
    font-size: 20px;
	left: 230px;
	top: 50px;
	text-align: left;
	font-family: 'Pirate Jack', sans-serif;
	position: absolute; 
	color: white;                                                                                  
}
.btn-texte {
	background-size: contain;
	position: absolute;
	font-family: 'Pirate Jack', sans-serif;
	color: white;   
	left: 500px;
	top: 300px;                                                                                                           
}

.coffre{
	position: absolute;
	right: 240px;
	bottom: 30px;
}

.pieces{
	position: absolute;
	right: 150px;
	bottom: 20px;
	cursor: pointer;
}
.pieces:hover {
	transform: scale(1.05);
	transition:0.3s;
	}

.rhum{
	position: absolute;
	left: 120px;
	bottom: 20px;
	cursor: pointer;
}
.rhum:hover {
	transform: scale(1.05);
	transition:0.3s;
	}

.crabe{
	position: absolute;
	left: 250px;
	bottom: 10px;
	cursor: pointer;
}

.crabe:hover {
	transform: scale(1.05);
	transition:0.3s;
	}

#bouteilledroite{
	display: none;
	position: absolute;
	right: 50px;
	top: 50%;
	cursor: pointer; 
	
}
#bouteilledroite:hover {
	transform: scale(1.05);
	transition:0.3s;
	}

#bouteillegauche{
	display: none;
	position: absolute;
	left: 50px;
	top: 50%;
	
}
#bouteillegauche:hover {
	transform: scale(1.05);
	transition:0.3s;
	}

	/* Lieu2 */

.lieu2{
	background-image: url(../images/Lieu2.jpg);
	height: 100%;
    width: 100%;
	display: none;
}
.squelette{
	position: absolute;
	left: 300px;
	bottom: 200px;
	cursor: pointer;
}

.squelette:hover {
	transform: scale(1.05);
	transition:0.3s;
	}
.chauve-souris{
	position: absolute;
	right: 80px;
	top: 50px;
	cursor: pointer;
	}
	
.chauve-souris:hover {
	transform: scale(1.05);
	transition:0.3s;
		}

.drapeau{
	position: absolute;
	right: 300px;
	bottom: 130px;
	cursor: pointer;
		}
		
.drapeau:hover {
	transform: scale(1.05);
	transition:0.3s;
			}
.biere{
	position: absolute;
	left: 250px;
	bottom: 200px;
	cursor: pointer;
			}
			
.biere:hover {
	transform: scale(1.05);
	transition:0.3s;
				}

#bouteilledroite2{
	display: none;
	position: absolute;
	right: 50px;
	top: 50%;
	cursor: pointer;
}
#bouteilledroite2:hover {
	transform: scale(1.05);
	transition:0.3s;
	}
#bouteillegauche2{
		display: none;
		position: absolute;
		left: 50px;
		top: 50%;
		cursor: pointer;
	}
#bouteillegauche2:hover {
	transform: scale(1.05);
	transition:0.3s;
}


/* Lieu3 */

.lieu3{
	background-image: url(../images/Lieu3.jpg);
	height: 100%;
	width: 100%;
	display: none;
}

.carte{
	position: absolute;
	right: 150px;
	bottom: 30px;
	cursor: pointer;
}

.carte:hover {
	transform: scale(1.05);
	transition:0.3s;
	}

.serpent{
		position: absolute;
		left: 150px;
		bottom: 40px;
		cursor: pointer;
	}
	
.serpent:hover {
		transform: scale(1.05);
		transition:0.3s;
		}

.pipe{
			position: absolute;
			right: 700px;
			top: 300px;
			cursor: pointer;
		}
		
.pipe:hover {
			transform: scale(1.05);
			transition:0.3s;
			}

.cle{
			position: absolute;
			left: 80px;
			bottom: 30px;
			cursor: pointer;
			}
			
.cle:hover {
			transform: scale(1.05);
			transition:0.3s;
				}

#bouteillegauche3{
	display: none;
	position: absolute;
	left: 50px;
	top: 50%;
	cursor: pointer;
}
#bouteillegauche3:hover {
transform: scale(1.05);
transition:0.3s;
}

/* echec */

.echec{
	background-image: url(../images/fin2.jpg);
	height: 100%;
	width: 100%;
	display: none;
}

.recommencer, .recommencer2 {
	position: absolute;
	display: block;
	right: 100px;
	bottom: 50px;
	cursor: pointer;
}

.recommencer:hover, .recommencer2:hover {
	transform: scale(1.05);
	transition:0.3s;
		}
/* reussite */

.reussite{
	background-image: url(../images/fin1.jpg);
	height: 100%;
	width: 100%;
	display: none;
	z-index: 2;
}

/* Temps */
.ligneTemps {
	background-image: url(../images/temps.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 1050px;
	top: 5%;
	width: 514px;
	height: 60px;
	display: none;
	
}

.temps {
	position: absolute;
	display: block;
	background-color: black;
	height: 40px;
	top: 10px;
	left: 25px;
	width: 100%;
	animation-duration: 70s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

@keyframes temps {
	0%   {width: 80%;}
	100% {width: 0px;}
  }

/* Inventaire */

#valise{
	position: absolute;
	height: 100px;
	width: 150px;
    top: 3%;
	left: 700px;
	display: none; 

}

#inventaire{
	position: absolute;
	height: 743px;
	width: 1005px;
    top: 18%;
	left: 200px;
    display: none; 
	z-index: 2;
}
.elementInventaire {
	display: none;
}

#croix{
	position: absolute;
    top: 25%;
	right: 800px;
	display: none; 
	z-index: 2;
}


.rhum2{
	position: absolute;
    top: 30%;
	left: 700px;
	z-index: 3;
	display: none; 

}
.pieces2{
	position: absolute;
    top: 30%;
	left: 900px;
	z-index: 3;
	display: none; 

}
.drapeau2{
	position: absolute;
    top: 30%;
	left: 400px;
	z-index: 3;
	display: none; 

}
.biere2{
	position: absolute;
    top: 70%;
	left: 1000px;
	z-index: 3;
	display: none; 

}
.pipe2{
	position: absolute;
    top: 40%;
	left: 1000px;
	z-index: 3;
	display: none; 

}
.carte2{
	position: absolute;
    top: 60%;
	left: 500px;
	z-index: 3;
	display: none; 

}

.cle2{
	position: absolute;
    top: 60%;
	left: 700px;
	z-index: 3;
	display: none; 

}