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

}

 body{ 
    padding:0;
	margin:0;
	width:100%;
	height:100%;
    font-family: 'aller_lightregular',"Myriad Pro",Arial,sans-serif ;
    background-color: black;
	color:white;
  }
  ul, li, h3, h2, h1, p{
    padding:0;
    margin:0;
    list-style:none;
  }
  #navigation, #content,.section{
  padding:0;
  margin:0;
  list-style:none;
}
  #content{
    overflow:hidden;
    width:100%;
	height:100%;
    background-color:white;
    position:relative;
    float:left;
  }
  
/*VIDEO*/

video{
	opacity:0;
	-webkit-transition:opacity 5s;
	display:block;
	margin:0 auto;
	width:100%;
	}
	video.play{
	opacity:1;
	}
	
	#progressBar{
	width:80%;
	height:8px;
	border-radius:4px;
	border:1px solid #fff;
	position:absolute;
	bottom:20px;
	left:10%;
	opacity:.6;
	z-index:6;
	}
	#progressBar span{
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;
	height:6px;
	background-color:#fff;
	display:inline-block;
	position:absolute;
	top:1px;
	}
	
	#progressBar .progress{
	z-index:7;
	}
	#progressBar .buffer{
	opacity:.5;
	}
	
	#button{
	position:absolute;
	top:41%;left:44%;
	z-index:2;
	height:200px;
	width:200px;
	border:10px solid #fff;
	border-radius:200px;
	opacity:.5;
	text-align:center;
	background:transparent;
	transition:opacity .2s ease, -webkit-transform .2s ease;
	}
	#button.off{
	-webkit-transform:scale(4);
	opacity:0;
	}
	#button.loading{
	-webkit-animation: loading 1s infinite linear;
	}
	#button span{
	display:inline-block;
	height:120px;
	width:30px;
	background:#fff;
	margin:2.5em .12em 0 0;
	}
	
	#random{
	position:absolute;
	z-index:30;
	display:inline-block;
	height:30px;
	width:30px;
	border-radius:15px;
	background-color:rgba(255,255,255,.5);
	text-align:center;
	padding:5px 0 0 0;
	box-sizing:border-box;
	bottom:10px;
	left:5%;
	}
	#button_skip{
	position:absolute;
	z-index:98;
	right:20px;
	top:10px;
	color:white;
}
@-webkit-keyframes loading {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
#pagevideo{overflow:hidden;}
/*MENU*/ 

	#navigation
	{
	position:absolute;
	list-style: none;
	width:100%;
	top:20px;
	background-color: rgba(0,0,0,0.5);
	z-index:50;
	}
	
	#navigation ul
	{
	display:block;
	position:relative;
	width:960px;
	margin:auto;
	padding:0;
	}
	
	#navigation li 
	{
	float: left ;
	display:block;
	}

	#navigation li a.link {
	  height: 50px;
	  display: block;
	  color: #ffffff ;
	  font: 1.5em "Myriad Pro",Arial,sans-serif ;
	  line-height:50px;
	  text-align: center ;
	  padding:0px 35px;
	  text-decoration: none ;
	}
	#navigation li a.link:hover 
	{
		background-color:rgba(15,161,39,0.5);
		/*background-color: #59bf0d;*/
	}
	#navigation li a.logo , #navigation li.logo{
		height:50px;
		overflow: visible;
	}
	#navigation li a.logo
	{
		position:relative;
		top:-14px;
		left:-10px;
	}
	
	#mute
	{
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	top:0px;
	right:50px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position:50% 50%;
	}
	
	.mute
	{
	background-image:url('../images/nav/mute.png');
	}
	
	.sound
	{
	background-image:url('../images/nav/sound.png');
	}
	
/*STRUCTURE*/
	
  .section{
    width:300%;
    position:relative;
  }

    .section .sub{
      position:relative;
      float:left;
      width:33.33%;
      height:100%;
	  background-repeat: no-repeat;
	  background-color: black;
	  background-size: 100% auto;
	  background-position:50% 00%;
    }
	
      .section .next, .section .prev{
		display:block;
	    height:94px;
		width:41px;
        position:absolute;
        bottom:40%;
        color:white
      }
	  

	  
/*NAVIGATION*/

      .section .next{
        right:30px;
		background-image:url('../images/nav/next.png');
		background-repeat:no-repeat;
      }
      .section .prev{
        left:30px;
		background-image:url('../images/nav/prev.png');
		background-repeat:no-repeat;
      }
	  
	  .section .fleche_home{
	  	display:block;
	    height:136px;
		width:96px;
        position:absolute;
        bottom:30%;
        color:white;
		right:30px;
		background-image:url('../images/nav/fleche_home.png');
		background-repeat:no-repeat;
	  }
	  
/*PAGES*/

.content
{
position:relative;
display:block;
width:960px;
margin:100px auto 0 auto;
color:white;
}

.scroll, .scroll_photo
{
width:100%;
height:100%;
overflow:auto;
}


/*HOME PAGE*/

	.accueil
	{
	background-image:url('../images/fond/home.png');
	}
	
	#presentation, #credit
	{
	font-size:2em;
	margin-top:260px;
	}
	#presentation h2{
	margin-bottom:30px;
	}
	#t1{display:block;}
	#t2{display:none;}
	#t3{display:none;}
	#t4{display:none;}

/*GALERIE PHOTO*/
	
.photo
{
	background-image:url('../images/fond/credits.png');
}

.photo h2
{
	margin:130px 0px 20px 0px;
}
	
#instafeed a {
  padding:5px 5px 1px 5px;
  margin:10px;
  border:1px solid #e1e1e1;
  display:inline-block;
  border-radius: 4px;
  position:relative;
  text-decoration:none;
}

#instafeed .likes {
  background:rgba(15,161,39,0.8);
  font-family:sans-serif;
  font-size:1em;
  position:absolute;
  color:#ffffff;
  right:5px;
  top:5px;
  left:5px;
  opacity:0;
  text-align:center;
  line-height:150px;
  text-shadow:0 1px rgba(0,0,0,0.5);
  -webkit-font-smoothing:antialiased;
  -webkit-transition: opacity 100ms ease;
	-moz-transition: opacity 100ms ease;
	-o-transition: opacity 100ms ease;
	-ms-transition: opacity 100ms ease;
	transition: opacity 100ms ease;
}

#instafeed a:hover .likes {
  opacity:1;
}
	


/*SONDAGE*/

	.sondage
	{
	background-image:url('../images/fond/sondage.png');
	}
	
	.valider
	{
	background:transparent;
	border:none;
	height:30px;
	width:164px;
	color:transparent;
	background-image:url('../images/nav/valider.png');
	}
	
	.valider:hover
	{
	background:transparent;
	border:none;
	height:30px;
	width:164px;
	color:transparent;
	background-image:url('../images/nav/valider_hover.png');
	}

	#etapes, #reseaux
	{
	display:block;
	height:500px;
	clear:left;
	}
	
	#reseaux
	{
	background-color:black;
	width:100%;
	}
	
	.formulaire
	{
	padding-top:20px;
	}
	
	.formulaire input
	{
	margin:10px 0px;
	}
	
	.formulaire img
	{
	margin-bottom:10px;
	}

	.fleft
	{
		float:left;
	}
	.fright
	{
		float:right;
	}
	
	.texteSondage 
	{
	    width: 454px;
		text-align:justify;
		padding-top:50px;
	}
	
	.texteSondage img
	{
	    width: 454px;
		padding-top:50px;
	}

	
	.nodisplay
       {
	 display: none;
    } 

	#etape1, #etape2
	{
	margin-top:150px;
	text-align:center
	}
	
	 .reponses
	 {
	 display:block;
	 position:relative;
	 float:left;
	 height:200px;
	 width:250px;
	 margin-right:105px;
	 margin-top:50px;
	 }
	 
	 .reponses a
	 {
	 display:block;
	 position:relative;
	 height:167px;
	 width:250px;
	 box-shadow:10px 10px 20px #000;
	 margin-top:30px;
	 }
	 
	 .reponses:last-child
	 {
	 margin-right:0px;
	 }
	 
	.reponse1 a
	 {
	background-image:url('../images/sondage/amenagement_NB.png');
	 }
	 
	 .reponse1 a:hover, .reponse1 a:focus, .reponse1 a:active
	 {
	background-image:url('../images/sondage/amenagement_couleur.png');
	 }
	 
	.reponse2 a
	 {
	background-image:url('../images/sondage/reouverture_NB.png');
	 }
	 
	 .reponse2 a:hover, .reponse2 a:focus, .reponse2 a:active
	 {
	background-image:url('../images/sondage/reouverture_couleur.png');
	 }
	 
	.reponse3 a
	 {
	background-image:url('../images/sondage/sauvage_NB.png');
	 }
	 
	 .reponse3 a:hover, .reponse3 a:focus, .reponse3 a:active
	 {
	background-image:url('../images/sondage/sauvage_couleur.png');
	 }
	 
     
      @-webkit-keyframes rtl
      {
      from {-webkit-transform: translate(0,0);}
      to {-webkit-transform: translate(0%,-600px);}
      }
      @-webkit-keyframes rtlReturn
      {
      from {-webkit-transform: translate(0%,600px);}
      to {-webkit-transform: translate(0%,0%);}
      }

      @-moz-keyframes rtl
      {
      from {-moz-transform: translate(0,0);}
      to {-moz-transform: translate(0%,-600px);}
      }
      @-moz-keyframes rtlReturn
      {
      from {-moz-transform: translate(0%,600px);}
      to {-moz-transform: translate(0%,0%);}
      }
	
/*HISTORIQUE*/

	.historique
	{
	background-image:url('../images/fond/historique.png');
	}

     .item
	{
     	width:960px;
		text-align:justify;
		float:left;
		position:relative;

	}
	
    .histo
	{
     	width:960px;
     	overflow: hidden;
	}


     .conteneur-text
	{
     	float:left;
     	width:400px;
	}
	
	    .conteneur-text h2
	{
		margin-top:30px;
     	margin-bottom:30px;
	}
	
	   .conteneur-text p
	{
     margin-bottom:30px;
	}

     .gallery img
	 {
     	max-width: 500px;
     	max-height:700px;
	}
	
    .gallery {
	overflow:hidden;
	float:right;
	}
	
	.thumbs {
	display: none;
	}
	
	.feature {
	width: 510px;
	}
	
	.feature img, .thumb
	{
	margin-top:29px;
	border: 4px solid #ccc;
	}
	
    .friseAll
	{
	width:960px;
	height:100px;
	}
	
    .frise{
	height: 12px;
	width:100%;
	opacity: 0.7;
	background-color:#9a9a9a;
	margin-top: 150px;
	border-radius:6px;
	}
	
    .dateJump{
        display:block;
        background:url('../images/nav/pointGris.png') no-repeat;
        width:29px;
        height:29px;
        float:left;
        position:relative;
        top:-18px;
        margin-right:93px;
        margin-left:93px;
        color:#fff;
        font-weight:bold;
        font-family: Arial;
        padding-top:45px;
        text-decoration: none;
    }
	
    .dateJump:hover, .focus{
        background:url('../images/nav/focus.png') no-repeat;
		
        width:63px;
        height:30px;
        top:-75px;
        margin-right: 61px;
        margin-left: 16px;
        padding:130px 0px 0px 75px;

    }
    .first{
	margin-left:0px;
	}
	
    .first:hover, .first.focus
	{
	margin-left:-77px;
	}
	
    .last
	{
	margin-right:0px;
	}
	
    .last:hover, .last.focus
	{
	margin-right:0px;
	}
	
	
	
/*GOOGLE MAP*/


#map_canvas
{
margin:0;
padding: 0;
width:100%;
height:100%;
position:relative; 
}

#fade { 
background:#000; 
position:fixed; 
width:100%; 
height:100%; 
filter:alpha(opacity = 80); 
opacity:.80; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--Transparence sous IE 8--*/
left:0; 
top:0; 
z-index:10;
}

#hideshow { 
position:absolute; 
width:100%;
height:100%;
top:0; 
left:0; 
} 

#nom_arret {

height:550;width:960px;background:no-repeat;background-size:100%;
}

#arret_content {
	border-top:2px solid white;
	width:940px;
	height:200px;
	background-color:black;
	filter:alpha(opacity = 80); 
	opacity:.80; 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--Transparence sous IE 8--*/
	position:absolute;
	bottom:0px;	
	overflow:auto;
	padding-right:20px;
	padding-top:20px;
}

#prevstation{
	position:absolute;
	top:200px;
}
#nextstation{
	position:absolute;
	top:200px;
	right:0px;
}


.popup_block { 
background:#ddd; 

top:15%;
width:960px; 
position:relative; 

margin:0 auto;
z-index:100; 
} 
.popup_block .popup { 

width:100%; 
background:#fff; 
 


}
				
.popup h3 { 

margin-left:20px;
font-size:1.5em;
font-family:"Helvetica"; 

} 
.popup p { 
 
margin-left:20px;
font-family:"Helvetica";

} 
.popup img.cntrl { 
position:absolute; 
right:0px; 
top:0px; 
}

/*CREDIT*/

#credit h2
{
text-align:center;
margin-bottom:30px;
}

#credit p
{
font-size:0.7em;
text-align:center;
}

#credit a
{
color:white;
text-decoration:none;
}

#credit a:hover
{
text-decoration:underline;
}

.credit
{
background-image:url('../images/fond/credits.png');
}