@font-face {
    font-family: HelveticaNeue;
    src: url(../PopUpEffect/HelveticaNeueLight.ttf);
}

body {
  font-size: 18px;
/*  background: #111; */
  margin: 0;
}



img {
  display: block;
  width: 100%;
  
}


#container { 

 height: 662px;
 width: 100%;

}

li {
	width: 0px;
	
}


/* icones page accueil */


.logoOdysee{
	
    position: absolute;
    top: 10px;
	width: 100%;
    
}

.fondAnim{
	
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 0;
	animation-name: opacitymotif;
	animation-timing-function:ease-in; 
	animation-duration: 3s;
	animation-iteration-count:1;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-delay: 0;
	-webkit-animation-name: opacitymotif;
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count:1;
			
}

@keyframes opacitymotif {
  0%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@-webkit-keyframes opacitymotif {
  0%   { opacity: 0.1; }
  100% { opacity: 1; }
}

@keyframes opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.logoOdyssee1{
	cursor: pointer;
    display: block;
	margin: 0 auto;
    position: relative;
	width: 600px;
	animation-name: opacity;
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-timing-function:linear; 
	animation-duration: 1s;
	animation-iteration-count:1;
	-webkit-animation-name: opacity;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-timing-function:linear;; 
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay: 3s;
		
}

.bonusImage{
    display: block;
	margin: 0 auto;
    position: relative;
	animation-name: opacity;
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-timing-function:linear; 
	animation-duration: 1s;
	animation-iteration-count:1;
	-webkit-animation-name: opacity;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-timing-function:linear;; 
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay: 3s;
	 width: 700px;
}

.bonus{
	
    position: absolute;
    top: 680px;
	width: 100%;
    
}


.bande{
  cursor: pointer;
    display: inline;
    width: 90px;  
	left: 26%;
    position: absolute;
	animation-name: opacity;
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 0;
	animation-timing-function: linear; 
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-delay: 4s;
	-webkit-animation-name: opacity;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-delay: 4s;
	-webkit-animation-timing-function: linear; 
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:1;
}

.carte{
	cursor: pointer;
    display: inline;
    width: 90px;
	left: 46%;
    position: absolute;
	animation-name: opacity;
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 0;
	animation-timing-function:linear;; 
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-delay: 4s;
	-webkit-animation-name: opacity;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-delay: 4s;
	-webkit-animation-timing-function:linear;; 
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:1;
	
}

.sirenes{
    cursor: pointer;
	position: absolute;
    display: inline;
    width: 90px;
	left: 66%;
	animation-name: opacity;
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 0;
	animation-timing-function:linear; 
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-delay: 4s;
	-webkit-animation-name: opacity;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-delay: 4s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:1;
}

.bateauContenu{
	width: 100%;
	top: 366px;
	position: absolute;
	
	
	
	
}

.bateau{
	position: relative;
	display: inline-block;
    width: 229px;
	animation-name: bateauslide;
	animation-direction:normal;
	animation-fill-mode: both;
	animation-delay: 0;
	animation-timing-function:linear; 
	animation-duration: 10s;
	animation-iteration-count:1;
	-webkit-animation-name: bateauslide;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count:1;
}

@-webkit-keyframes bateauslide {
  0% {
    
    left: 0%;
     -webkit-visibility: visible;
  }

  90% {
  
       left: 75%;
	  -webkit-opacity: 1; 
  }
  
  100% {
  
    left: 75%;
	 -webkit-opacity: 0;
  }
}
@keyframes bateauslide {
   0% {
    
    left: 0%;
     -webkit-visibility: visible;
  }

  90% {
  
       left: 75%;
	  -webkit-opacity: 1; 
  }
  
  100% {
  
    left: 75%;
	 -webkit-opacity: 0;
  }
}

.icone{
    position: absolute;
	top: 253px;
	width: 100%;
}



/* PopUpEp1 */


.PopUpEp0{
    cursor: pointer;
    height: 50px;
    left: 14px;
    position: absolute;
    top: 348px;
    width: 50px;
}

.PopUpEp0-4{
    cursor: pointer;
    height: 50px;
    left: 216px;
    position: absolute;
    top: 66px;
    width: 50px;
}

.PopUpEp1{
	
	cursor: pointer;
    height: 50px;
    left: 198px;
    position: absolute;
    top: 10px;
    width: 50px;
	
}

.PopUpEp2{
	
	cursor: pointer;
    height: 50px;
    left: 198px;
    position: absolute;
    top: 10px;
    width: 50px;
	
}

.PopUpEp2-1{
	
	cursor: pointer;
    height: 50px;
    left: 12px;
    position: absolute;
    top: 5px;
    width: 50px;
	
}

.PopUpEp3{
	
	cursor: pointer;
    height: 50px;
    left: 76px;
    position: absolute;
    top: -3px;
    width: 50px;
	
}

.PopUpEp4{
	
	cursor: pointer;
    height: 50px;
    left: 357px;
    position: absolute;
    top: 46px;
    width: 50px;
}
.PopUpEp5{
	
    cursor: pointer;
    height: 50px;
    left: 206px;
    position: absolute;
    top: 274px;
    width: 50px;
}
.PopUpEp6{
    cursor: pointer;
    height: 50px;
    left: 326px;
    position: absolute;
    top: 260px;
    width: 50px;
}

.PopUpEp7{
 cursor: pointer;
    height: 50px;
    left: 560px;
    position: absolute;
    top: -24px;
    width: 50px;
}

.PopUpEp8{
    cursor: pointer;
    height: 50px;
    left: 212px;
    position: absolute;
    top: 6px;
    width: 50px;
}

.PopUpEp8-1{
    cursor: pointer;
    height: 50px;
    left: 296px;
    position: absolute;
    top: -15px;
    width: 50px;
}

.PopUpEp9{
    cursor: pointer;
    height: 50px;
    left: 147px;
    position: absolute;
    top: -52px;
    width: 50px;
}
.PopUpEp10{
    cursor: pointer;
    height: 50px;
    left: 592px;
    position: absolute;
    top: 176px;
    width: 50px;
}

.PopUpEp10-2{
    cursor: pointer;
    height: 50px;
    left: 215px;
    position: absolute;
    top: 74px;
    width: 50px;
}

.PopUpEp11-1{
    cursor: pointer;
    height: 50px;
    left: 437px;
    position: absolute;
    top: 566px;
    width: 50px;
}

.PopUpEp11{
 cursor: pointer;
    height: 50px;
    left: 537px;
    position: absolute;
    top: -8px;
    width: 50px;
}
.PopUpEp11-3{
    cursor: pointer;
    height: 50px;
    left: 58px;
    position: absolute;
    top: -3px;
    width: 50px;
}
.PopUpEp12{
    cursor: pointer;
    height: 50px;
    left: -14px;
    position: absolute;
    top: 10px;
    width: 50px;
}
.PopUpEp12-1{
    cursor: pointer;
    height: 50px;
    left: 224px;
    position: absolute;
    top: 31px;
    width: 50px;
}
.PopUpEp14{
    cursor: pointer;
    height: 50px;
    left: 476px;
    position: absolute;
    top: 32px;
    width: 50px;
}
.PopUpEp14-2{
    cursor: pointer;
    height: 50px;
    left: 110px;
    position: absolute;
    top: 68px;
    width: 50px;
}
.PopUpEp15{
    cursor: pointer;
    height: 50px;
    left: 79px;
    position: absolute;
    top: -10px;
    width: 50px;
}
.PopUpEp15-8{
    cursor: pointer;
    height: 50px;
    left: 293px;
    position: absolute;
    top: 121px;
    width: 50px;
}

/* Pop Up styles */

  #textEp0 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
   #textEp0-4 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
  #textEp1 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
   #textEp2 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
     #textEp2-1 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
	 #textEp3 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
 #textEp4 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
 #textEp5 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
#textEp6 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
  #textEp7 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
 #textEp8 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
#textEp8-1 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
#textEp9 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
   #textEp10 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
    #textEp10-2 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;}
	#textEp11-1 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;}
	#textEp11 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;}
	#textEp11-3 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;}
	 #textEp12 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
	 #textEp12-1 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
    #textEp14 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
	 #textEp14-2 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
	#textEp15 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
	#textEp15-8 { width: auto;  padding: 1em; letter-spacing: 0; font-size: 12px; margin: 0; display:none;font-family: HelveticaNeue;  color: white;} 
   #legende0{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
   #legende0-4{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  #legende1{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
    #legende2{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
   #legende2-1{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
    #legende3{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
    #legende4{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
   #legende5{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  #legende6{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  #legende7{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  #legende8{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
   #legende8-1{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
  #legende9{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
    #legende10{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
  #legende10-2{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
     #legende11-1{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
    #legende11{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
   #legende11-3{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
   #legende12{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  
  #legende12-1{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
     #legende14{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
   #legende14-2{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  #legende15{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }
  #legende15-8{  font-size: 1em;
    font-size: 1em;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 2.8em;
    top: -44px;
    width: 40px;
	cursor: pointer;
  }


/*---------------------------------------*/

.containerCarte{
    width: 1440px;	
}

.containerAccueil{
	width: 100%;  
	height: 100%;
	
}

/* Xml Circé */ 

.Xml-circe{
	
    cursor: pointer;
    height: 50px;
    left: 501px;
    position: absolute;
    top: 8px;
    width: 50px;
}

/* Intégrtion les pastilles sur la Carte map  */ 

.pastilles1{
    left: -42px;
    position: relative;
    top: -158px;
    width: 117px;
	display: none;
}

.pastilles13{
    left: -18px;
    position: relative;
    top: -167px;
    width: 117px;	
	display: none;
}

/* Intégrtion les episodes sur la Carte map  */ 


#carteEpisode1{
    cursor: pointer;
    height: 35px;
    left: 1350px;
    position: absolute;
    top: 297px;
    width: 35px;
}
#carteEpisode2{
    cursor: pointer;
    height: 35px;
    left: 1310px;
    position: absolute;
    top: 231px;
    width: 35px;
}

#carteEpisode3{
    cursor: pointer;
    height: 35px;
    left: 1208px;
    position: absolute;
    top: 517px;
    width: 35px;
}

#carteEpisode4{
    height: 35px;
    left: 672px;
    position: absolute;
    top: 597px;
    width: 35px;	
	cursor: pointer;
}

#carteEpisode5{
    cursor: pointer;
    height: 30px;
    left: 879px;
    position: absolute;
    top: 237px;
    width: 30px;
}

#carteEpisode6{
    cursor: pointer;
    height: 35px;
    left: 852px;
    position: absolute;
    top: 332px;
    width: 35px;
}

#carteEpisode7{
    cursor: pointer;
    height: 35px;
    left: 637px;
    position: absolute;
    top: 165px;
    width: 35px;
}
#carteEpisode8{
    cursor: pointer;
    height: 35px;
    left: 801px;
    position: absolute;
    top: 175px;
    width: 35px;
		
}

#carteEpisode9{
    cursor: pointer;
    height: 30px;
    left: 848px;
    position: absolute;
    top: 204px;
    width: 30px;
}


#carteEpisode10{
    cursor: pointer;
    height: 35px;
    left: 810px;
    position: absolute;
    top: 286px;
    width: 35px;
}

#carteEpisode11{
    cursor: pointer;
    height: 35px;
    left: 892px;
    position: absolute;
    top: 367px;
    width: 35px;
}
#carteEpisode12{
    cursor: pointer;
    height: 35px;
    left: 861px;
    position: absolute;
    top: 434px;
    width: 35px;
}
#carteEpisode13{
    cursor: pointer;
    height: 35px;
    left: 23px;
    position: absolute;
    top: 424px;
    width: 35px;
}

#carteEpisode14{
    cursor: pointer;
    height: 35px;
    left: 1075px;
    position: absolute;
    top: 303px;
    width: 35px;
}

#carteEpisode15{
    cursor: pointer;
    height: 35px;
    left: 1129px;
    position: absolute;
    top: 364px;
    width: 35px;
}


/* Carte map Episode 1 */ 

.CarteEpisode0{
	
    cursor: pointer;
    height: 50px;
    left: 230px;
    position: absolute;
    top: 8px;
    width: 50px;
}
.CarteEpisode1{
	
    cursor: pointer;
    height: 50px;
    left: 250px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode2{
	
    cursor: pointer;
    height: 50px;
    left: 356px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode3{
	
    cursor: pointer;
    height: 50px;
    left: 367px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode4{
	
    cursor: pointer;
    height: 50px;
    left: 456px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode5{
	
    cursor: pointer;
    height: 50px;
    left: 456px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode6{
	
    cursor: pointer;
    height: 50px;
    left: 318px;
    position: absolute;
    top: 8px;
    width: 50px;
}
.CarteEpisode7{
	
    cursor: pointer;
    height: 50px;
    left: 427px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode8{
	
    cursor: pointer;
    height: 50px;
    left: 277px;
    position: absolute;
    top: 8px;
    width: 50px;
}
.CarteEpisode9{
	
    cursor: pointer;
    height: 50px;
    left: 396px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode10{
	
    cursor: pointer;
    height: 50px;
    left: 441px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode11{
	
    cursor: pointer;
    height: 50px;
    left: 518px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode12{
	
    cursor: pointer;
    height: 50px;
    left: 433px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode13{
	
    cursor: pointer;
    height: 50px;
    left: 370px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode14{
	
    cursor: pointer;
    height: 50px;
    left: 494px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.CarteEpisode15{
	
    cursor: pointer;
    height: 50px;
    left: 609px;
    position: absolute;
    top: 8px;
    width: 50px;
}
/* Sound Episode 1 */ 

.PlaySoundEpisode1{
	
    cursor: pointer;
    height: 50px;
    left: 191px;
    position: absolute;
    top: 8px;
    width: 50px;
}


/* Sound Episode 5 */ 

.PlaySoundEpisode5{
	
    cursor: pointer;
    height: 50px;
    left: 397px;
    position: absolute;
    top: 8px;
    width: 50px;
}

/* Sound Episode 8 */ 

.PlaySoundEpisode8{
	
    cursor: pointer;
    height: 50px;
    left: 217px;
    position: absolute;
    top: 8px;
    width: 50px;
}
/* Sound Episode 9 */ 

.PlaySoundEpisode9{
	
    cursor: pointer;
    height: 50px;
    left: 337px;
    position: absolute;
    top: 8px;
    width: 50px;
}

/* Sound Episode 10 */

.PlaySoundEpisode10{
	
    cursor: pointer;
    height: 50px;
    left: 382px;
    position: absolute;
    top: 8px;
    width: 50px;
}


/* Sound Episode 13 */

.PlaySoundEpisode13{
	
    cursor: pointer;
    height: 50px;
    left: 310px;
    position: absolute;
    top: 8px;
    width: 50px;
}

.PlaySoundEpisode14{
	
    cursor: pointer;
    height: 50px;
    left: 434px;
    position: absolute;
    top: 8px;
    width: 50px;
}
.PlaySoundEpisode15{
	
  cursor: pointer;
    height: 50px;
    left: 550px;
    position: absolute;
    top: 8px;
    width: 50px;
	
}


/* Pop UP */ 

/*  -Pause Audio 1  */





#PauseAudio1{
    cursor: pointer;
    height: 50px;
    left: 191px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}

#PauseAudio5{
    cursor: pointer;
    height: 50px;
    left: 397px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}


#PauseAudio8{
    cursor: pointer;
    height: 50px;
    left: 217px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}


#PauseAudio9{
    cursor: pointer;
    height: 50px;
    left: 337px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}



#PauseAudio10{
    cursor: pointer;
    height: 50px;
    left: 382px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}

#PauseAudio13{
    cursor: pointer;
    height: 50px;
    left: 310px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}

#PauseAudio14{
    cursor: pointer;
    height: 50px;
    left: 434px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}

#PauseAudio15{
    cursor: pointer;
    height: 50px;
    left: 550px;
    position: absolute;
    top: 8px;
    width: 50px;
	display: none;

}
/* PopUP Effect  */



/*-------------------------------------*/





/*  -Menu  */


#PopUPMenu{
    cursor: pointer;
    height: 50px;
    left: 50%;
    position: fixed;
    top: 10px;
    width: 50px;
	

}

#PopUPMenu.anim{
display: block;
animation: echelle 0.2s 0s ease-out both;

}

@keyframes echelle {
0%{transform: scale(0);opacity:0;
   }
100% {transform: scale(1);opacity:1;}
}



#PopUPMenu{
	display: none;	
}




/*  -Episide 0 Homére  */

#FondEpisode0 {
    display: block;
    left: 330px;
    position: relative;
    top: -18px;
    width: 436px;
}

#Episode0Image1 {
    cursor: pointer;
    left: 0px;
    position: relative;
    width: 425px;
	display: block;
	top: -20px;
}

#Episode0Image2 {
   
	left: 670px;
    position: relative;
    top: -13px;
    width: 287px;
	display: block;
}
#Episode0Image3 {
    
	left: 595px;
    position: relative;
    top: 341px;
    width: 290px;
	display: block;
	
}
#Episode0Image4 {
	left: 167px;
    position: relative;
    top: 172px;
    width: 606px;
	display: block;
}

#Episode0Image5 {
    left: 280px;
    position: relative;
    top: 369px;
    width: 340px;
	display: block;
}

#Episode0Image6 {
   left: 120px;
    position: relative;
    top: 0;
    width: 650px;
	display: block;
}

/*  -Episide 1 Troie  */



#FondEpisode1 {
    left: 1998px;
    position: relative;
    top: 1px;
    width: 370px;
	display: block;
}

#Episode1Image1 {
    display: block;
    left: 940px;
    position: relative;
    width: 750px;
    top: 33px;
}

#Episode1Image2 {
   
	left: 2210px;
    position: relative;
    top: -3px;
    width: 423px;
	display: block;
}
#Episode1Image3 {
    
	left: 1791px;
    position: relative;
    top: 112px;
    width: 480px;
	display: block;
	
}
#Episode1Image4 {
	display: block;
    left: 940px;
    position: relative;
    top: 288px;
    width: 450px;
}

#Episode1Image5 {
    left: 1626px;
    position: relative;
    top: 0px;
    width: 550px;
	display: block;
}

#Episode1Image6 {
    left: 2316px;
    position: relative;
    top: 47px;
    width: 220px;
	display: block;
}
#Episode1Image7 {
    
	left: 1306px;
    position: relative;
    top: 455px;
    width: 1200px;
	display: block;
		  
}

/*  -Episide 2 LesCiciones  */


#FondEpisode2 {
    left: 2658px;
    position: relative;
    top: 325px;
    width: 350px;
}

#Episode2Image1 {
    left: 2693px;
    position: relative;
    top: -17px;
    width: 256px;
}

#Episode2Image2 {
	left: 2717px;
    position: relative;
    top: 260px;
    width: 177px;
}
#Episode2Image3 {
    
	left: 2955px;
    position: relative;
    top: -15px;
    width: 710px;
    cursor: pointer;
	
}
#Episode2Image4 {
	left: 2318px;
    position: relative;
    top: 294px;
    width: 550px;
}

#Episode2Image5 {
     left: 2978px;
    position: relative;
    top: 260px;
    width: 190px;
}

#Episode2Image6 {
    left: 2561px;
    position: relative;
    top: 480px;
    width: 500px;
}

/*  -Episide 3 Le cap Malée (Grèce)  */


#FondEpisode3 {
   left: 4789px;
    position: relative;
    top: 411px;
    width: 450px;
}

#Episode3Image1 {
     cursor: pointer;
    left: 3690px;
    position: relative;
    top: 60px;
    width: 391px;
}

#Episode3Image2 {
	left: 3599px;
    position: relative;
    top: 299px;
    width: 400px;
}
#Episode3Image3 {
    
	left: 4040px;
    position: relative;
    top: -12px;
    width: 550px;
	
}
#Episode3Image4 {
	cursor: pointer;
    left: 4530px;
    position: relative;
    top: -5px;
    width: 800px;}

#Episode3Image5 {
    left: 4992px;
    position: relative;
    top: 157px;
    width: 250px;
}

#Episode3Image6 {
    left: 4588px;
    position: relative;
    top: 244px;
    width: 394px;
}

#Episode3Image7 {
    left: 4035px;
    position: relative;
    top: 267px;
    width: 550px;
}

/*  Episide 4 Les Lotophages (Tunisie, Djerba, le Cap Bon)   */


#FondEpisode4 {
    left: 6654px;
    position: relative;
    top: 87px;
    width: 370px;
}

#Episode4Image1 {
    left: 5350px;
    position: relative;
    top: 25px;
    width: 240px;
}

#Episode4Image2 {
	
	left: 5531px;
    position: relative;
    top: 71px;
    width: 380px;
	
	
}
#Episode4Image3 {
    
	left: 5266px;
    position: relative;
    top: 425px;
    width: 300px;
	
}
#Episode4Image4 {
	left: 5462px;
    position: relative;
    top: 252px;
    width: 270px;
}

#Episode4Image5 {
    left: 5557px;
    position: relative;
    top: 392px;
    width: 250px;
}

#Episode4Image6 {
    left: 6171px;
    position: relative;
    top: 26px;
    width: 1050px;
	cursor: pointer;
}

#Episode4Image7 {
	left: 5883px;
    position: relative;
    top: 98px;
    width: 430px;
}
#Episode4Image8{
    left: 6290px;
    position: relative;
    top: 175px;
    width: 430px;
	cursor: pointer;
}

#Episode4Image9{
    left: 6952px;
    position: relative;
    top: 386px;
    width: 330px;
	cursor: pointer;
}

#Episode4Image10{
    left: 7140px;
    position: relative;
    top: 38px;
    width: 200px;
}
#Episode4Image11{
   left: 6138px;
    position: relative;
    top: -0px;
    width: 550px;
}

/*  Episide 5 Cyclopes   */


#FondEpisode5 {
    left: 8768px;
    position: relative;
    top: -18px;
    width: 520px;
}

#Episode5Image1 {
    left: 7571px;
    position: relative;
    top: 197px;
    width: 270px;
}

#Episode5Image2 {
	
    left: 7257px;
    position: relative;
    top: 169px;
    width: 580px;
	
}
#Episode5Image3 {
    
	left: 7652px;
    position: relative;
    top: 45px;
    width: 530px;
	
}
#Episode5Image4 {
	left: 7779px;
    position: relative;
    top: -26px;
    width: 700px;
}

#Episode5Image5 {
    left: 7530px;
    position: relative;
    top: 483px;
    width: 310px;
	cursor: pointer;
}

#Episode5Image6 {
    left: 7828px;
    position: relative;
    top: 498px;
    width: 550px;
}

#Episode5Image7 {
	left: 8186px;
    position: relative;
    top: -10px;
    width: 385px;
}
#Episode5Image8{
    left: 8526px;
    position: relative;
    top: 185px;
    width: 630px;
	cursor: pointer;
}

#Episode5Image9{
    left: 7382px;
    position: relative;
    top: 0px;
    width: 550px;
}

/* 6_L’île Eole D'îles Eoliennes Stromboli Lipari   */


#FondEpisode6 {
	
    left: 11468px;
    position: relative;
    top: 188px;
    width: 600px;
}

#Episode6Image1 {
    left: 9738px;
    position: relative;
    top: 209px;
    width: 550px;
	
}

#Episode6Image2 {
    left: 9518px;
    position: relative;
    top: 58px;
    width: 770px;
	
}
#Episode6Image3 {
    left: 8817px;
    position: relative;
    top: -19px;
    width: 705px;
	
}
#Episode6Image4 {
	left: 9419px;
    position: relative;
    top: -18px;
    width: 190px;
}

#Episode6Image5 {
    left: 11393px;
    position: relative;
    top: -18px;
    width: 230px;
}

#Episode6Image6 {
    cursor: pointer;
    left: 10373px;
    position: relative;
    top: 0;
    width: 1100px;
}

#Episode6Image7 {
	left: 10171px;
    position: relative;
    top: -10px;
    width: 270px;
}
#Episode6Image8{
    left: 10320px;
    position: relative;
    top: 344px;
    width: 220px;
}

#Episode6Image9{
    left: 11007px;
    position: relative;
    top: 403px;
    width: 550px;
}

/*
/* 7_Les Les trygons Sardaigne   */


#FondEpisode7 {
	
     left: 11910px;
    position: relative;
    top: 4px;
    width: 230px;
}

#Episode7Image1 {
    left: 12417px;
    position: relative;
    top: 94px;
    width: 230px;
}

#Episode7Image2 {
   left: 12640px;
    position: relative;
    top: -20px;
    width: 470px;
	
}
#Episode7Image3 {
   left: 12632px;
    position: relative;
    top: -30px;
    width: 820px;
	cursor: pointer;
	
}
#Episode7Image4 {
	left: 12020px;
    position: relative;
    top: -18px;
    width: 828px;
}

#Episode7Image5 {
    left: 12540px;
    position: relative;
    top: 230px;
    width: 400px;
}

#Episode7Image6 {
    left: 13485px;
    position: relative;
    top: 35px;
    width: 170px;
}

#Episode7Image7 {
	left: 13240px;
    position: relative;
    top: 80px;
    width: 770px;
}
#Episode7Image8{
    left: 12149px;
    position: relative;
    top: 0px;
    width: 550px;
}

/* 8_ Circé (Italie, Mont Circé)   */


#FondEpisode8 {
	
    left: 15333px;
    position: relative;
    top: 18px;
    width: 780px;
}

#Episode8Image1 {
    left: 14302px;
    position: relative;
    top: 62px;
    width: 650px;
	cursor: pointer;
}

#Episode8Image2 {
    left: 14008px;
    position: relative;
    top: -25px;
    width: 470px;
	
}
#Episode8Image3 {
    left: 15362px;
    position: relative;
    top: 20px;
    width: 620px;
	cursor: pointer;
	
}
#Episode8Image4 {
    left: 15263px;
    position: relative;
    top: 304px;
    width: 253px;
}

#Episode8Image5 {
   left: 14963px;
    position: relative;
    top: -9px;
    width: 440px;
}

#Episode8Image6 {
  cursor: pointer;
    left: 14758px;
    position: relative;
    top: 151px;
    width: 500px;
}

#Episode8Image7 {
	left: 14094px;
    position: relative;
    top: 179px;
    width: 320px;
}
#Episode8Image8{
   left: 15935px;
    position: relative;
    top: -17px;
    width: 130px;
}

#Episode8Image9{
    left: 16039px;
    position: relative;
    top: -10px;
    width: 420px;
}

#Episode8Image10{
    left: 16070px;
    position: relative;
    top: 340px;
    width: 270px;
}

#Episode8Image11{
    left: 15525px;
    position: relative;
    top: 378px;
    width: 550px;
}


/* 9_LesEnfers   */


#FondEpisode9 {
	
    left: 18168px;
    position: relative;
    top: -18px;
    width: 500px;
}

#Episode9Image0{
    left: 17268px;
    position: relative;
    top: -17px;
    width: 484px;
}


#Episode9Image1 {
   left: 16646px;
    position: relative;
    top: -23px;
    width: 848px;
}

#Episode9Image2 {
    left: 16336px;
    position: relative;
    top: 133px;
    width: 480px;
	
}
#Episode9Image3 {
    left: 16560px;
    position: relative;
    top: 33px;
    width: 450px;
	
}
#Episode9Image4 {
	left: 16940px;
    position: relative;
    top: 302px;
    width: 340px;
}

#Episode9Image5 {
    left: 17941px;
    position: relative;
    top: 88px;
    width: 500px;
}

#Episode9Image6 {
    left: 17775px;
    position: relative;
    top: -23px;
    width: 845px;
}

#Episode9Image7 {
    left: 17512px;
    position: relative;
    top: 75px;
    width: 540px;
}
#Episode9Image8{
    left: 17110px;
    position: relative;
    top: 205px;
    width: 650px;
}

#Episode9Image9{
    left: 17036px;
    position: relative;
    top: 0px;
    width: 500px;
}

#Episode9Image10{
    left: 17994px;
    position: relative;
    top: 278px;
    width: 320px;
}


/* 10_LesSirenes   */


#FondEpisode10 {
	
    left: 18701px;
    position: relative;
    top: -15px;
    width: 710px;
}

#Episode10Image0{
    left: 19162px;
    position: relative;
    top: -20px;
    width: 708px;
}


#Episode10Image1 {
   left: 18745px;
    position: relative;
    top: 501px;
    width: 544px;
}

#Episode10Image2 {
    left: 18526px;
    position: relative;
    top: 350px;
    width: 320px;
	
}
#Episode10Image3 {
    left: 18659px;
    position: relative;
    top: 64px;
    width: 200px;
	
}
#Episode10Image4 {
	left: 18876px;
    position: relative;
    top: 150px;
    width: 170px;
}

#Episode10Image5 {
    left: 19310px;
    position: relative;
    top: 69px;
    width: 130px;
}

#Episode10Image6 {
    left: 19627px;
    position: relative;
    top: 375px;
    width: 320px;
}

#Episode10Image7 {
    left: 19760px;
    position: relative;
    top: 20px;
    width: 400px;
}
#Episode10Image8{
    left: 19950px;
    position: relative;
    top: 295px;
    width: 712px;
}

#Episode10Image9{
    left: 18814px;
    position: relative;
    top: 0px;
    width: 500px;
}

#Episode10Image10{
    left: 20494px;
    position: relative;
    top: 278px;
    width: 320px;
}


/* 11_Scylla   */


#FondEpisode11 {
	
    left: 20818px;
    position: relative;
    top: -15px;
    width: 350px;
}

#Episode11Image0{
   left: 19936px;
    position: relative;
    top: 217px;
    width: 300px;
}


#Episode11Image1 {
    left: 20592px;
    position: relative;
    top: 126px;
    width: 1000px;
}

#Episode11Image2 {
    left: 20621px;
    position: relative;
    top: 23px;
    width: 580px;
	
}
#Episode11Image3 {
    left: 20302px;
    position: relative;
    top: -10px;
    width: 548px;
	
}
#Episode11Image4 {
	left: 21170px;
    position: relative;
    top: 0;
    width: 913px;
}

#Episode11Image5 {
    left: 20808px;
    position: relative;
    top: 0px;
    width: 550px;
}



/* 12_LîleDuSoleilSicileMessine   */


#FondEpisode12 {
	
    left: 22992px;
    position: relative;
    top: -16px;
    width: 250px;
}

#Episode12Image0{
    left: 22546px;
    position: relative;
    top: 0px;
    width: 260px;
}


#Episode12Image1 {
    left: 22048px;
    position: relative;
    top: -17px;
    width: 517px;
}

#Episode12Image2 {
    left: 21942px;
    position: relative;
    top: -15px;
    width: 173px;
	
}
#Episode12Image3 {
    left: 23780px;
    position: relative;
    top: 235px;
    width: 400px;
	
}
#Episode12Image4 {
	left: 22931px;
    position: relative;
    top: 124px;
    width: 170px;
}

#Episode12Image5 {
    left: 22799px;
    position: relative;
    top: -19px;
    width: 310px;
}

#Episode12Image6 {
    left: 23075px;
    position: relative;
    top: 37px;
    width: 1055px;
}

#Episode12Image7 {
    left: 22784px;
    position: relative;
    top: 278px;
    width: 460px;
}

#Episode12Image8 {
    left: 23837px;
    position: relative;
    top: 23px;
    width: 110px;
}

#Episode12Image9 {
    left: 23336px;
    position: relative;
    top: 0px;
    width: 480px;
}


/* 13_calypso   */


#FondEpisode13 {
    left: 25240px;
    position: relative;
    top: 350px;
    width: 250px;
}

#Episode13Image1{
    left: 24350px;
    position: relative;
    top: -59px;
    width: 634px;
}


#Episode13Image2 {
    left: 25188px;
    position: relative;
    top: -36px;
    width: 557px;
}

#Episode13Image3 {
    left: 25843px;
    position: relative;
    top: -15px;
    width: 379px;
}
#Episode13Image4 {
    left: 25390px;
    position: relative;
    top: 283px;
    width: 200px;
	
}
#Episode13Image5 {
    left: 24188px;
    position: relative;
    top: -18px;
    width: 245px;
}

#Episode13Image6 {
    left: 24901px;
    position: relative;
    top: -18px;
    width: 438px;
}


#Episode13Image7 {
   left: 25610px;
    position: relative;
    top: 127px;
    width: 350px;
}

#Episode13Image8 {
     left: 24207px;
    position: relative;
    top: 435px;
    width: 650px;
}

/* 14_LesPheaciens   */


#FondEpisode14 {
    left: 27343px;
    position: relative;
    top: 20px;
    width: 400px;
}

#Episode14Image1{
    left: 26221px;
    position: relative;
    top: -59px;
    width: 353px;
}


#Episode14Image2 {
    left: 26902px;
    position: relative;
    top: -2px;
    width: 278px;
}

#Episode14Image3 {
    left: 26824px;
    position: relative;
    top: 164px;
    width: 490px;
	}
#Episode14Image4 {
    left: 27806px;
    position: relative;
    top: -17px;
    width: 500px;
	
}
#Episode14Image5 {
    left: 26196px;
    position: relative;
    top: 165px;
    width: 800px;
}

#Episode14Image6 {
    left: 26240px;
    position: relative;
    top: 0px;
    width: 650px;
}

/* 15_RetourAIthaque   */


#FondEpisode15 {
    left: 28745px;
    position: relative;
    top: 2px;
    width: 900px;
}

#Episode15Image1{
   left: 27214px;
    position: relative;
    top: 211px;
    width: 1000px;
}


#Episode15Image2 {
    left: 29254px;
    position: relative;
    top: -12px;
    width: 434px;
}

#Episode15Image3 {
    left: 28400px;
    position: relative;
    top: 12px;
    width: 647px;
	}
#Episode15Image4 {
    left: 28729px;
    position: relative;
    top: -7px;
    width: 670px;
	
}
#Episode15Image5 {
    left: 29694px;
    position: relative;
    top: -11px;
    width: 375px;
}

#Episode15Image6 {
    left: 29530px;
    position: relative;
    top: 73px;
    width: 280px;
}

#Episode15Image7 {
    left: 27945px;
    position: relative;
    top: 365px;
    width: 650px;
}

#Episode15Image8 {
    left: 29712px;
    position: relative;
    top: -27px;
    width: 350px;
}