@charset "UTF-8";
/* CSS Document */

 @font-face {
    font-family: 'logisosomedium';
    src: url('font/logisoso-webfont.eot');
    src: url('font/logisoso-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/logisoso-webfont.woff2') format('woff2'),
         url('font/logisoso-webfont.woff') format('woff'),
         url('font/logisoso-webfont.ttf') format('truetype'),
         url('font/logisoso-webfont.svg#logisosomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'logisoso-modifmedium';
    src: url('font/logisoso-modif-medium-webfont.woff2') format('woff2'),
         url('font/logisoso-modif-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;


}
@font-face {
    font-family: 'web_symbolsregular';
    src: url('font/websymbols-regular-webfont.eot');
    src: url('font/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/websymbols-regular-webfont.woff2') format('woff2'),
         url('font/websymbols-regular-webfont.woff') format('woff'),
         url('font/websymbols-regular-webfont.ttf') format('truetype'),
         url('font/websymbols-regular-webfont.svg#web_symbolsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




html { 
  margin:0;
  padding:0;

}
body {
    font: 18px/1.5 'logisoso-modifmedium';
    
    color: #626668;
	 background: url(images/bg5.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  min-width:100%;
  margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-weight:200;
z-index: 2001;
}
body.demodes {
    
	 background: url(images/bg5.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  
}
body.lacie {
    
	 background: url(images/bg7.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  
}
body.contact {
    
	 background:#000 no-repeat top left fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  
}
body.liens {
    
	 background: url(images/bg4.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  
}
a{
	color:#fff;
	text-decoration:none;
}
a:hover{
	color:red;
	
}
.fb{font-family: 'web_symbolsregular'!important;
text-transform:none!important;
font-size: 1em!important;}

li #uk{
background-color: transparent!important;
}
#uk{
background: url('images/uk.svg') no-repeat; 
width: 100%;
  height: 20%;

background-size: 10%;
  margin-top: 5px;
}

#uk:hover{
background: url('images/uk2.svg') no-repeat;
  width: 100%;
   height: 20%;
background-size: 10%;
  margin-top: 5px;
}
#fr{
background: url('images/fr.svg') no-repeat; 
width: 100%;
   height: 20%;
background-color: transparent;
background-size: 10%;
  margin-top: 5px;
}
#fr:hover{
background: url('images/fr2.svg') no-repeat;
  width: 100%;
 height: 20%;
background-size: 10%;
  margin-top: 5px;
}
@media screen and (max-width: 640px) {


  #uk{
  background: url('images/uk3.svg') no-repeat; 
width: 30%;
margin-bottom: 40px;
background-size: 10%;
margin-top: 15px;
margin-left: 50px;
/* margin-bottom: 20px; */
/* border-bottom: 1px solid #eaeaea; */
  }
  #uk:hover{
  background: url('images/uk2.svg') no-repeat; 
width: 30%;
margin-bottom: 40px;
background-size: 10%;
margin-top: 15px;
margin-left: 50px;
/* margin-bottom: 20px; */
/* border-bottom: 1px solid #eaeaea; */
  }
  #fr{
  background: url('images/fr3.svg') no-repeat; 
width: 30%;
margin-bottom: 40px;
background-size: 10%;
margin-top: 15px;
margin-left: 50px;
/* margin-bottom: 20px; */
/* border-bottom: 1px solid #eaeaea; */
  }
  #fr:hover{
  background: url('images/fr2.svg') no-repeat;
width: 30%;
margin-bottom: 40px;
background-size: 10%;
margin-top: 15px;
margin-left: 50px;
/* margin-bottom: 20px; */
/* border-bottom: 1px solid #eaeaea; */
  }
	
}
.fondcarte{
width: 100%;
height: 30%;
position: absolute;
bottom: 0px;
min-width: 100%;
z-index: 1000;	
}
#fondcarte{
width: 100%;
height: 100%;
}
.abandon{
	position: absolute;
width: 5%;
bottom: 34%;
right: 30px;
z-index: 1001;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
-webkit-animation-name: abandon;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-direction: alternate;
-moz-animation-name:abandon;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
}
#abandon{
	width: 100%;
position: absolute
}
div.wrap {
    width: 100%;
margin: 0 auto;
padding: 0px 0;
height:auto;
}
.colonnes {
    display: table;
width:100%;
    border-collapse: separate;
    border-spacing: 3%; 
}

.colonne {
    display: table-cell;
	width:50%;
border-collapse: separate;
    text-align: left;
	font-size:14px;
  
}
.colonnescie {
    display: inline-block;
width:98%;

    
}

.colonnecie {
    display: inline-block;
width: 45.5%;
vertical-align: top;
margin-right: 3%;
min-width:320px
  
}
#agnesphoto{
	
	float:left;
	width: 40%;
	margin-right: 2%;
	
	}
	#agnesphoto:hover
{

padding: 3px;
position: absolute; 
top: 2%x;
left:2%;
width: 100%;
}

section .cie {
    display: inline-block;
    position: relative;
}

section {
    display: block;
    position: relative;
}
header {
    text-align: center;
}
header h1 {
    font-size: 126px;
    line-height: 1;
    color: #eee5a2;
    text-transform: uppercase;
    text-shadow: 5px 5px #32312b;
}
header p {
    font-size: 24px;
    color: #6a695f;
    margin: 0 0 10px;
}
header p.disclaimer {
    font-size: 13px;
    color: #33373d;
}
#agnesfauteuil{
width: 60%;	
}
.agnesfauteuil{
width: 20%;
position: absolute;
bottom: 0px;
z-index: 3000000;
left: 43%;	
}
#demodes{
	font-size:24px;
	color: #fff;
	position:relative;
	width:50%;
	}
#lacie{
	font-size: 24px;
	text-align: left;

	}
	.lacie2{
		margin-left: 30%;
text-align: center;
width: 65%;
min-width: 65%;
color: #fff;
position: absolute;
top: 0%;
		}
		#cie{
			font-size:80%;
			text-align:justify;
			}
			#titrecie{
			font-size:150%;
			text-align:center;
			font-weight:600;
			}
			#soustitrecie{
			
			font-weight:600;
			}
.lustre{
	
	position: absolute;
width: 15%;
top: 0%;
left: 41%;
z-index: 99;
}
#lustre{
	
	position:absolute;
	width:100%;
	z-index:99;
}

.logo{
	position: absolute;
width: 200px;
top: 15px;
left: 30px;
z-index: 2000000001;;
}
#logo{
	width: 100%;
position: absolute
}
#jonction{
	display: inline-block;
text-align: center;
width: 100%;
height: auto;
min-width: 100%;
	}
/* horloge */
	#c3{
		width: 2.3% !important;
width: 2.8% !important;
height: auto !important;
position: fixed;
left: 49.1%;
margin-top: 2%;
/* padding-bottom: 15%; */
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
z-index: 2000000;
}	
#c2{
	width: 65px !important;
height: auto !important;

left: 338px;
padding-top: 5.5px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;

}

		#c1{
			width: 3.15%;
height: auto!important;
position: fixed;
margin:10px;
/*background-color:#999;*/

-webkit-border-radius: 250px;
    -moz-border-radius:250px;
    border-radius: 250px;
			}
			#c11{
			width: 3.15%;
height: auto!important;
position: fixed;
margin:10px;}
/* spectacles qui tournent */

.colspec{
	margin-left: 15%;
padding-right: 50px;
width: 90%;
position: absolute;
top:5%;
	
}
.spectacles{
	
	
}
.spectacles p{
	color:#fff;
	font-size:24px;
	}
.spectacles li{
	
	display:inline-block;
	
	
}
.spectaclesdemodes{
	
	
}
.spectaclesdemodes li{
	
	display:inline-block;
	width:20%;
	height:auto;
	
}
.spectaclesdemodes li img{
	
	width:100%;
	height:auto;
	
}

.boutonton{
width: 20%;
  margin-left: 40%;
  margin-right: 40%;
}
.bouton1{
	color: #fff;
background-color: #066;
width: 140px;
height: 40px;
border-radius: 5px;
font-size: 0.9em;
text-transform: uppercase;
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
  
}
.bouton1:hover{
	color: #066;
	background-color: #fff;
	width: 140px;
	height: 40px;
	border-radius: 5px;
	font-size: 0.7em;
	text-transform: uppercase;
	margin-top: 5%;
	margin-bottom: 5%;
}
.bouton2{
	color: #fff;
background-color: #900;
width: 160px;
height: 40px;
border-radius: 5px;
font-size: 0.7em;
text-transform: uppercase;
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
  
}
.bouton2:hover{
	color: #900;
	background-color: #fff;
	width: 160px;
	height: 40px;
	border-radius: 5px;
	font-size: 0.7em;
	text-transform: uppercase;
	margin-top: 5%;
	margin-bottom: 5%;
}
#adieu{margin-top:30px;}

  

#tarifs:hover   {
background: url('images/tarifsamitie.jpg') center no-repeat;
height: 110%;
width: 100%;
left: 0%;
z-index:100;
position: absolute;
}
#tarifsEN:hover   {
background: url('images/tarifsamitieEN.jpg') center no-repeat;
height: 110%;
width: 100%;
left: 0%;
z-index:100;
position: absolute;
}


/*menu accordeon*/		
#menu-accordeon {
  padding:0;
  
  list-style:none;
  
  width: 220px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
 /* text-align: center;*/
}
#menu-accordeon li {
  
   margin-bottom:2px;
   
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
transition: all .8s;
/* border-radius: 0; */
/* background: #444; */
/* box-shadow: none; */
/* border: none; */
/* margin: 0; */
margin-left: 10px;
font-size:16px;
}

#menu-accordeon a {
  display: block;
text-decoration: none;
/* color: #fff; */
/* padding: 8px 0; */
/* font-family: verdana; */
/* font-size: 1.2em */
}


#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover li canvas {
  position:absolute;
}
#menu-accordeon li:hover {
   
}
#menu-accordeon li li:hover {
  
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 335em;
}	


/*menu*/
 #dl-menu {
	 display:none;
	}
 @media screen and (max-width: 667px) {

	#dl-menu {
		display:block;
	}
	.menu2{display:none;
		}
		.logo{
			width: 38%;
 top: 4%;
left: 35%;
z-index: 2000000001;;
			}
			.colonnes {
    display: block;

}

.colonne {
    float:left;
	width:100%;
}
.lacie2{top: 10%;
margin-left: 5%;
width: 95%;
min-width: 95%;}
.oreille{width: 80%;

left: 10%;
bottom: 10%;}
.colspec{ top: 10%;
}
}
@media screen and (max-width: 1024px) and (min-width: 668px){
#dl-menu {
		display:block;
	}
	.menu2{display:none;
		}

		.logo{
			width: 25%;
    top: 4%;
    left: 40%;
	z-index: 2000000001;;
			}
			.colonnes {
    display: block;

}

.colonne {
    float:left;
	width:100%;

  
}
.lacie2{top: 10%;
margin-left: 5%;
width: 95%;
min-width: 95%;}
.oreille{width: 80%;

left: 10%;
bottom: 19%;}
.colspec{ top: 10%;
}
.contact2{
    bottom: 0px;
    position: absolute;
    width: 100%;
    /* left: 0%; */
    padding: 0px;
    text-align: center;}
}
@media screen and (min-height: 1023px) {
.abandon{
bottom: 32%;
width: 10%;
}




}
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1){


.agnesfauteuil {
  width: 40%;
}

.gare {
 
width: 80%!important;

left: 10%!important;

}

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.agnesfauteuil {
  width: 30%;
}

.gare {
 
width: 80%!important;

left: 10%!important;

}

}

@media (max-device-width: 768px) and (orientation: portrait) {
.agnesfauteuil {
  width: 40%;
}

.gare {
 
width: 80%!important;

left: 10%!important;

}
.abandon {
    bottom: 35%!important;
  
}
	.lustre {
    width: 25%!important;
    left: 40%!important;
}
	.elan {
    width: 150%!important;
    margin-left: -25%!important;
}
	
.cabane {
    width: 120%!important;
    margin-left: -10%!important;
    
}
.fusil {
    width: 100%!important;
    margin-left:0%!important;
}

.petitpois {
    width: 180%!important;
    margin-left:-40%!important;
}


.bateau { 
    width: 110%!important;
    margin-left: -5%!important;
  
}
.crane { 
    width: 90%!important;
    margin-left: 5%!important;
  
}
.maries { 
    width: 170%!important;
    margin-left: -35%!important;
  
}
#maries { 
    width: 5%!important;  
}
.taxi { 
    width: 150%!important;
    margin-left: -25%!important;
  
}
.nains { 
    width: 130%!important;
    margin-left: -15%!important;
  
}
.meteorite { 
    width: 120%!important;
    margin-left: -10%!important;
  
}
#meteorite {
    width: 10%!important;
}

.petrouchka { 
    width: 120%!important;
    margin-left: -10%!important;
  
}

}
@media (max-device-width: 375px) and (orientation: portrait) {
.agnesfauteuil {
  width: 60%;
      left: 30%;
}

.gare {
 
width: 110%!important;

left: -10%!important;

}
.bouton{
	width:10%!important;
	bottom:30px!important;
	z-index:10001!important;

}
.logo{
	width: 35%!important;
    left: 35%!important;
	}
	.lustre {
    width: 35%!important;
    left: 35%!important;
	}
	.elan {
    width: 150%!important;
    margin-left: -25%!important;
}
	
.cabane {
    width: 120%!important;
    margin-left: -10%!important;
    
}
.fusil {
    width: 100%!important;
    margin-left:0%!important;
}

.petitpois {
    width: 180%!important;
    margin-left:-40%!important;
}


.bateau { 
    width: 110%!important;
    margin-left: -5%!important;
  
}
.crane { 
    width: 90%!important;
    margin-left: 5%!important;
  
}
.maries { 
    width: 170%!important;
    margin-left: -35%!important;
  
}
#maries { 
    width: 5%!important;  
}
.taxi { 
    width: 200%!important;
    margin-left: -50%!important;
  
}
.nains { 
    width: 130%!important;
    margin-left: -15%!important;
  
}
.meteorite { 
    width: 120%!important;
    margin-left: -10%!important;
  
}
#meteorite {
    width: 10%!important;
}

.petrouchka { 
    width: 220%!important;
    margin-left: -55%!important;
  
}

}
.panneau1 {
   /* position: relative;*/
    top:0px;
    left: 180px;
  width: 700px;
    -webkit-transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
    transition: all 2s ease-in;
    
    
}
.panneau2 {
    background:rgba(204, 153, 102, 0.8)!important;
    padding: 30px;
    color: #fff;
    line-height: 1.7;
    z-index: 102;
	width: 600px;
    
    
    font-size: 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
}
  
  

	
	.agenda1:hover .panneau1{
		-webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
		
		}
	

/* CSS3 Animations */

.bouton{
    
width: 5%;
bottom: 5px;
margin-left: 5px;
border-radius: 3px;
color:#fff;
background-color:rgba(250,250,250,0);
text-align: center;
position: fixed;
z-index:10000;}
#stop, #start{
	width:100%;
	}
button{
align-items: flex-start;
text-align: center;
cursor: default;
color: #fff;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: buttonface;
border-right-color: buttonface;
border-bottom-color: buttonface;
border-left-color: buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #9CC;
box-sizing: border-box;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
font-style: normal;
font-weight: 300;
font-size: 1em;
font-family: 'logisoso-modifmedium';
font-variant-caps: normal;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
.horloge {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:horloge;
    
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:horloge;
	-webkit-animation-duration: 24s;
-moz-animation-duration: 24s;
}
.train {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:train;
    
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:train;
	-webkit-animation-duration: 24s;
-moz-animation-duration: 24s;
width: 30%;
margin-top: 0%;
margin-left: 35%;
right: 35%;
z-index: 90;
position: fixed;
}
#train{
width:25%;

}
.elan {
 -webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: elan;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: elan;
-webkit-animation-duration: 50s;
-moz-animation-duration: 50s;
width: 80%;
margin-top: 0%;
margin-left: 10%;
position: fixed;
z-index: 90;
}
#elan{
width:6%;
 

}
.cabane {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: cabane;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: cabane;
-webkit-animation-duration: 50s;
-moz-animation-duration: 55s;
width: 60%;
margin-top: 0%;
margin-left: 20%;
position: fixed;
z-index: 90;
}
#cabane{
width:6%;

}
.fusil {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: fusil;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: fusil;
-webkit-animation-duration: 40s;
-moz-animation-duration: 40s;
width: 60%;
margin-top: 0%;
margin-left: 20%;
position: fixed;
z-index: 90;
}
#fusil{
width:12%;

}
.petitpois {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: petitpois;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: petitpois;
-webkit-animation-duration: 85s;
-moz-animation-duration: 85s;
width: 90%;
margin-top: 0%;
margin-left: 5%;
position: fixed;
z-index: 90;
}
#petitpois{
width:4%;

}
.bateau {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: bateau;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: bateau;
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
width: 50%;
margin-top: 0%;
margin-left: 25%;
position: fixed;
z-index: 90;
}
#bateau{
width:10%;

}
.crane {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: crane;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: crane;
-webkit-animation-duration: 70s;
-moz-animation-duration: 70s;
width: 50%;
margin-top: 0%;
margin-left: 25%;
position: fixed;
z-index: 90;
}
#crane{
width:8%;

}

.maries {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: maries;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: maries;
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
width: 60%;
margin-top: 0%;
margin-left: 20%;
position: fixed;
z-index: 90;
}
#maries{
width:8%;

}
.taxi {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: taxi;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: taxi;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
width: 90%;
margin-top: 0%;
margin-left: 5%;
position: fixed;
z-index: 90;
}
#taxi{
width:3%;

}
.telephone {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: telephone;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: telephone;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
width: 20%;
margin-top: 0%;
margin-left: 35%;
position: fixed;
z-index: 90;
}
#telephone{

}
.meteorite {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: meteorite;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: meteorite;
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
width: 40%;
margin-top: 0%;

margin-left: 30%;
position: fixed;
z-index: 90;
}
#meteorite{
width:15%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: rocher2;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: rocher2;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;

}
.mouchoir {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: mouchoir;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: mouchoir;
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
width: 70%;
margin-top: 0%;
opacity: 0.8;
margin-left: 15%;
position: fixed;
z-index: 90;
}
#mouchoir{
width:7%;

}
.nains {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: nains;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: nains;
-webkit-animation-duration: 80s;
-moz-animation-duration: 80s;
width: 80%;
margin-top: 0%;

margin-left: 10%;
position: fixed;
z-index: 90;
}
#nains{
width:7%;

}
.petrouchka {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: petrouchka;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: petrouchka;
-webkit-animation-duration: 80s;
-moz-animation-duration: 80s;
width: 90%;
margin-top: 0%;
margin-left: 5%;
position: fixed;

z-index: 90;
}
#petrouchka{
width:6%;

}
.lustre {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
-webkit-animation-name: lustre;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-direction: alternate;
-moz-animation-name:lustre;
-webkit-animation-duration: 30s;
-moz-animation-duration: 30s;


}


@-webkit-keyframes horloge { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes train { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes cabane { from { -webkit-transform:rotate(220deg) } to { -webkit-transform:rotate(580deg) } }
@-webkit-keyframes elan { from { -webkit-transform:rotate(70deg) } to { -webkit-transform:rotate(430deg) } }
@-webkit-keyframes taxi { from { -webkit-transform:rotate(400deg) } to { -webkit-transform:rotate(760deg) } }
@-webkit-keyframes rocher2 { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes fusil { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes petitpois { from { -webkit-transform:rotate(190deg) } to { -webkit-transform:rotate(550deg) } }
@-webkit-keyframes bateau { from { -webkit-transform:rotate(250deg) } to { -webkit-transform:rotate(610deg) } }
@-webkit-keyframes crane { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes maries { from { -webkit-transform:rotate(300deg) } to { -webkit-transform:rotate(660deg) } }
@-webkit-keyframes telephone { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes meteorite { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes mouchoir { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes nains { from { -webkit-transform:rotate(50deg) } to { -webkit-transform:rotate(410deg) } }
@-webkit-keyframes petrouchka { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes lustre { from { -webkit-transform:rotate(-4deg) } to { -webkit-transform:rotate(4deg) } }


@-moz-keyframes horloge { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes train { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes cabane { from { -moz-transform:rotate(220deg) } to { -moz-transform:rotate(580deg) } }
@-moz-keyframes elan { from { -moz-transform:rotate(70deg) } to { -moz-transform:rotate(430deg) } }
@-moz-keyframes taxi { from { -moz-transform:rotate(400deg) } to { -moz-transform:rotate(760deg) } }
@-moz-keyframes rocher2 { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes fusil { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes petitpois { from { -moz-transform:rotate(190deg) } to { -moz-transform:rotate(550deg) } }
@-moz-keyframes bateau { from { -moz-transform:rotate(250deg) } to { -moz-transform:rotate(610deg) } }
@-moz-keyframes crane { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes maries { from { -moz-transform:rotate(300deg) } to { -moz-transform:rotate(660deg) } }
@-moz-keyframes telephone { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes meteorite { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes mouchoir { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes nains { from { -moz-transform:rotate(50deg) } to { -moz-transform:rotate(410deg) } }
@-moz-keyframes petrouchka { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@-moz-keyframes lustre { from { -moz-transform:rotate(-4deg) } to { -moz-transform:rotate(4deg) } }

@-ms-keyframes horloge { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes train { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes cabane { from { -ms-transform:rotate(220deg) } to { -ms-transform:rotate(580deg) } }
@-ms-keyframes elan { from { -ms-transform:rotate(70deg) } to { -ms-transform:rotate(430deg) } }
@-ms-keyframes taxi { from { -ms-transform:rotate(400deg) } to { -ms-transform:rotate(760deg) } }
@-ms-keyframes rocher2 { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes fusil { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes petitpois { from { -ms-transform:rotate(190deg) } to { -ms-transform:rotate(550deg) } }
@-ms-keyframes bateau { from { -ms-transform:rotate(250deg) } to { -ms-transform:rotate(610deg) } }
@-ms-keyframes crane { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes maries { from { -ms-transform:rotate(300deg) } to { -ms-transform:rotate(660deg) } }
@-ms-keyframes telephone { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes meteorite { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes mouchoir { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes nains { from { -ms-transform:rotate(50deg) } to { -ms-transform:rotate(410deg) } }
@-ms-keyframes petrouchka { from { -ms-transform:rotate(0deg) } to { -ms-transform:rotate(360deg) } }
@-ms-keyframes lustre { from { -ms-transform:rotate(-4deg) } to { -ms-transform:rotate(4deg) } }

@-o-keyframes horloge { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes train { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes cabane { from { -o-transform:rotate(220deg) } to { -oz-transform:rotate(580deg) } }
@-o-keyframes elan { from { -o-transform:rotate(70deg) } to { -o-transform:rotate(430deg) } }
@-o-keyframes taxi { from { -o-transform:rotate(400deg) } to { -o-transform:rotate(760deg) } }
@-o-keyframes rocher2 { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes fusil { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes petitpois { from { -o-transform:rotate(190deg) } to { -o-transform:rotate(550deg) } }
@-o-keyframes bateau { from { -o-transform:rotate(250deg) } to { -o-transform:rotate(610deg) } }
@-o-keyframes crane { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes maries { from { -o-transform:rotate(300deg) } to { -o-transform:rotate(660deg) } }
@-o-keyframes telephone { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes meteorite { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes mouchoir { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes nains { from { -o-transform:rotate(50deg) } to { -o-transform:rotate(410deg) } }
@-o-keyframes petrouchka { from { -o-transform:rotate(0deg) } to { -o-transform:rotate(360deg) } }
@-o-keyframes lustre { from { -o-transform:rotate(-4deg) } to { -o-transform:rotate(4deg) } }

@keyframes horloge { from {transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes train { from {transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes cabane { from { transform:rotate(220deg) } to { transform:rotate(580deg) } }
@keyframes elan { from { transform:rotate(70deg) } to { transform:rotate(430deg) } }
@keyframes taxi { from { transform:rotate(400deg) } to { transform:rotate(760deg) } }
@keyframes rocher2 { from {transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes fusil { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes petitpois { from { transform:rotate(190deg) } to { transform:rotate(550deg) } }
/*@keyframes bateau { from { transform:rotate(250deg) } to { ransform:rotate(610deg) } }*/
@keyframes crane { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes maries { from {transform:rotate(300deg) } to { transform:rotate(660deg) } }
@keyframes telephone { from {transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes meteorite { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes mouchoir { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes nains { from { transform:rotate(50deg) } to { transform:rotate(410deg) } }
@keyframes petrouchka { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes lustre { from {transform:rotate(-4deg) } to { transform:rotate(4deg) } }


@-webkit-keyframes abandon {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}
@-moz-keyframes abandon {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}
@-o-keyframes abandon {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}
@keyframes abandon {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}
/* iPad Specific */
@media only screen and (max-device-width:1024px) {
    
}
.test{
	z-index:100000000;
	/*position: absolute;*/
	}
.on-hover {
  margin: 0px!important;
/* height: 30px; */

z-index: 100000000;
padding:0px!important;
}
.to-open {
  display: none;
position: absolute;
background: url(images/antoineblanquart.png) no-repeat;
background-position: 100%;
z-index: 1;
left: 150px;
width: 300px;
height: 234px;
color: #000!important;
margin-top: -110px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
/* background: rgba(137, 172, 165, 0.8); */
padding: 10px;
line-height: 1.2;
z-index: 100000000001;
}
.AB{
	margin: 20px;
padding-left: 20px;
right: 120px;
top: 10px;
position: absolute;
	color: #000;
	}
	.AB:hover{
	
color: red;
	}
/*.to-open2 {
 display: none;
position: absolute;

z-index: 1;
left: 150px;
width: 300px;
height: 234px;
color: #000!important;
margin-top: -110px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;

padding: 10px;
line-height: 1.2;
z-index: 100000000001;
}*/
.AB1{
	margin: 20px;
padding-left: 20px;
right: 125px;
position: absolute;
top: 100px;
color: #000;
	}
	.AB1:hover{
	
color: red;
	}
.overlay {
  position: fixed; z-index: 10000000;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: transparent;
}
	.elan.off, .train.off, .horloge.off, .cabane.off, .fusil.off, .petitpois.off, .bateau.off, .crane.off, .maries.off, .taxi.off,  .meteorite.off,.mouchoir.off,.nains.off,.petrouchka.off, #meteorite.off, .circuit.off, .lustre.off{
		-moz-animation-play-state: paused; 
	-webkit-animation-play-state: paused;
	-ms-animation-play-state: paused;
		animation-play-state: paused;
	}
	
	img#stop.off {display: none;}
	img#start {display: none;}
	img#start.off {display: block;}
	img#stop {display: block;}
	
		 
	
	img#stop.off {display: none;}
	img#start {display: none;}
	img#start.off {display: block;}
	img#stop {display: block;}

/*animation gare et train homepage */	
	
.gare {
  position: absolute;
width: 50%;
margin: 55.8% auto 0% auto;
bottom: 0px;
left: 25%;
z-index: 10000;
}

.gare:before {
  content: "";
display: block;
padding-top: 25.29%;
}



.circuit {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  background:  url('images/circuit4.png') no-repeat 0 0%;
  background-size: 100%;
  animation: sprite 7s steps(41) infinite;
   -webkit-animation: sprite 7s steps(41) infinite;
       -moz-animation: sprite 7s steps(41) infinite;
        -ms-animation: sprite 7s steps(41) infinite;
         -o-animation: sprite 7s steps(41) infinite;
          
}

@-webkit-keyframes sprite {
   from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}
 
@-moz-keyframes sprite {
   from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}
 
@-ms-keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}
 
@-o-keyframes sprite {
   from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}
 
@keyframes sprite {
   from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}

/*menu2*/
.menu2{
	
margin: 5px 0 0 0;
position: relative;
z-index: 2000000000;
width: 10%;
font-size: 18px;
font-style: normal;
font-weight: 100;
text-transform: none;
padding: 45px 30px;

	}
#menu-vertical, #menu-vertical ul {
  padding:0;
  margin:0;
  list-style:none;
  width: 180px;
}
#menu-vertical li {
  position: relative;
  margin-top:3%;
}
#menu-vertical a {
  display:block;
  text-decoration: none;
  color: #fff;
}
#menu-vertical a:hover {
  
  color: red;
}
#menu-vertical ul {
  position: absolute;
  left:-999em;
}
#menu-vertical li:hover ul {
  top: 0;
  left: 180px;
}