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

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

}

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

}


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

}




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

}


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

}




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

}


#splashscreen {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #2C1100;
    transition: 1s 0.4s;

}

    #splashscreen #progress {
        height: 1px;
        background: #fff;
        position: absolute;
        width: 0;
        top: 50%;
        transition: 1s;
    }

    #splashscreen #status {
        font-size: 0.7em;
        letter-spacing: 3px;
        position: absolute;
        top: 50%;
        margin-top: -40px;
        width: 100%;
        text-align: center;
        color: #fff;
    }

.forceload{
    position: fixed;
    bottom: 15%;
    left: 42%;
    background-color: transparent;
    padding: 5px;
    color: #fff;
    font-size: 0.9em;
    font-family: geosanslightregular, Geo Sans Light;
    border-radius: 1%;
    border: 0px;
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
    text-align: center;
}

.forceload:hover{
    background-color: #fff;
    color:#000;
}
	
	

	
	/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 3em;
		font-family: cocogooseregular, cocogoose;
		
		line-height: 1.1em;
	}
	
	h1t{
		font-size: 11em;
		font-family: birds_of_paradiseregular, Birds of Paradise;
		font-size-adjust: none;
		color: #fff;
		
	}
	
	h1a{
		
		font-family: birds_of_paradiseregular, Birds of Paradise;
		font-size-adjust: none;
		color: #fff;
	}
	
	h1b{
		
		font-family: birds_of_paradiseregular, Birds of Paradise;
		font-size-adjust: none;
		color: #fff;
	}
	
	h11{
		font-size: 5em;
		
		color: #fff;
		margin:0;
		line-height: 12px;
		
	}
	
	h2{
		font-size: 2.5em;
		font-family: cocogooseregular, cocogoose;
		color: #fff;
		margin:0;
		line-height: 1.8em;
	}
	
	h3{
		font-size: 1.5em;
		font-family: cocogooseregular, cocogoose;
		color: #fff;
		margin:0;
		line-height: 1.2em;
	}
	
	
	.intro p{
		color: #fff;
		padding:40px 0 0 0;
	}
	.wrap{
		margin-left: auto;
		margin-right: auto;
		width: 980px;
		position: relative;
		padding: 20px 0 20px 0;
	}
	.wrap h1{
		font-size: 2.3em;
		color: #333;
		padding: 30px 0 10px  0;
	}
	.wrap p{
		font-size: 16px;
		padding:  0 0 10px 0;
	}
	.box{
		display: block;
		background: #f2f2f2;
		border:1px solid #ccc;
		padding: 20px;
		margin:20px 0;
	}
	
	


	/* Centered texts in each section
	* --------------------------------------- */
	
	.fokusmodal {font-family: geosanslightregular, Geo Sans Light;
	font-size: 14px;line-height: 1.42857143;color: #333;
	    padding-left: 30px;
    padding-right: 30px;
    text-align: justify;}
	
	.modal-body li{font-family: geosanslightregular, Geo Sans Light;
	font-size: 14px;line-height: 1.42857143;color: #333;
	        margin-left: 50px;
    padding-right: 30px;
    text-align: justify;}
	
	.modal-body a{font-family: geosanslightregular, Geo Sans Light;
	font-size: 14px;line-height: 1.42857143;color: #333;}
	
	.modal-body {
    position: relative;
    padding: 30px;}
    
    .modal-title{
	font-family: sanidanaregular, Sanidana;
	font-size: 40px;
	color:#000;
	    text-align: center;
    }
    
    .sstitremodal {
	font-family: 'angies_new_houseregular', angies_new_house;
      font-size: 30px;
    line-height: 25px;
    text-align:center;
    }
	



#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: #313131;
    background-image: url(images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
}
	
	
	.section{
		text-align:center;
	}
	
	.slide{
		text-align:center;
	}
	
	#Video{
		position: relative;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		
	}
	

#start {
right: 54px;
margin-top: -30px;
color: #313131;
font-family: geosanslightregular,Geo Sans Light;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.6);
padding: 12px 10px 18px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
z-index: 99;
position: absolute;
top: 50%;
opacity:0;
text-align: center;
}

#start:hover{
    cursor:pointer;
    background-color: #9f4b4b;
    color:#fff;
}

#partenaires{
    bottom: -100px;
z-index: 999;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
padding: 6px 1% 6px 65px;
width: 100%;
opacity:0;
}

#partenaires li{
    padding-right: 70px;
    text-decoration: none;
    	    display: inline;

}



#sound {
    
    position: fixed;
width: 100px;
top: 7px;
opacity:1;
    z-index: 999;
    right:10px;
    }

.boutonson {
width: 30%;
cursor: pointer;
margin-right: 30px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
padding: 6px;
float: right;
z-index: 99;
position: relative;

}

.boutonson:active {
    background-color: rgba(0, 0, 0, 0.7);
  
}


	/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#page0 .layer{
		position: relative;
		z-index: 4;
		margin-right:auto;
		text-align:center;
		margin-left: auto;
		bottom: 80%;
		 
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#page0{
		overflow: hidden;
	}

	#section0{
		background-image: url(images/couverture23h57.jpg);
		background-size: cover;
		vertical-align: baseline !important;
}



	#header {
		width: 100%;
		background-color: #313131;
		opacity:0.8;
		position:fixed;
		z-index: 10;
		height:45px;
		margin-top:-40px;
		text-align:center;
	-webkit-box-shadow: 0 2px 50px 0 #000;
box-shadow: 0 2px 50px 0 #000;
top:0px;

/* transition pour les deux ˇvˇnements */
animation: close ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: close ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: close ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: close ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: close ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes close{
  0% {
    transform:  translate(0px,40px)  ;
  }
  50% {
    transform:  translate(0px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes close{
  0% {
    -moz-transform:  translate(0px,40px)  ;
  }
  50% {
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes close {
  0% {
    -webkit-transform:  translate(0px,40px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes close {
  0% {
    -o-transform:  translate(0px,40px)  ;
  }
  50% {
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes close {
  0% {
    -ms-transform:  translate(0px,40px)  ;
  }
  50% {
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
	
	.navgauche {
	    padding-top:11px;
	      padding-left:5%;
	      width:30%;
	        font-size: 1.1em !important;
	   }
	
	
	#header li {
	    color:#fff;
	    text-decoration:none;
	    display: inline;
	 
	    font-family:  geosanslightregular, Geo Sans Light;
	   
	}
	
	#header li a {
	    color:#fff;
	    padding-right:25px;
	    cursor: pointer;
	    
	}
	
	#header li a:hover {
	 color: rgba(0,0,0,1);
	 background-color: rgba(255,255,255,1);
	 border-radius: 5px;
	 padding: 5px;
	 padding-bottom: 7px;
	text-decoration:none;
	margin-right:15px;
	
	}
	
	#header .navgauche li {
	   
	   
	   text-align:center;
	   float:left;
	      
	}
	
	#header .navcentre {
	    position: relative;
    margin-left: auto;
    width: 60%;
    margin-right: auto;
      font-size: 1.1em;
	}
	
	#header .navdroite {
	    position: relative;
    
    margin-top: -20px;
    width: 30%;
    margin-right: 1%;
      font-size: 1.1em;
      float:right;
	}
	
	#header .navcentre li {
	
	 
	 
	}
	
	#header:hover {background-color: #9f4b4b;
	
	animation: open ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: open ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: open ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: open ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: open ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes open{
  0% {
    transform:  translate(0px,0px)  ;
  }
  50% {
    transform:  translate(0px,40px)  ;
  }
  100% {
    transform:  translate(0px,40px)  ;
  }
}

@-moz-keyframes open{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  50% {
    -moz-transform:  translate(0px,40px)  ;
  }
  100% {
    -moz-transform:  translate(0px,40px)  ;
  }
}

@-webkit-keyframes open {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,40px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,40px)  ;
  }
}

@-o-keyframes open {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  50% {
    -o-transform:  translate(0px,40px)  ;
  }
  100% {
    -o-transform:  translate(0px,40px)  ;
  }
}

@-ms-keyframes open {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  50% {
    -ms-transform:  translate(0px,40px)  ;
  }
  100% {
    -ms-transform:  translate(0px,40px)  ;
  }
}

	

	
	#header .soleil {
		background-image: url(images/soleil1.png);
		width:263px;
		height:105px;
		text-align: center;
		margin-right:auto;
		margin-left:auto;
		background-repeat: no-repeat;
		
		text-align:center;
		    margin-top: 11px;
		
	}

	#header:hover .soleil {
		background-image: url(images/soleil2.png);
		background-repeat: no-repeat;
		
	}
	
	#cadreepisode1 {
	        width: 20%;
	    margin-top: -5%;
	    float: left;
    margin-left: 3%;
    position: relative;
     transform: rotate(-10deg);
     z-index:18;
position: relative;
	}
	
	#episode1 {
	  
    
    width:120px;
    height:120px;
    border-radius:100px;
    opacity: 0.6;
    background-color:#313131;
    
    border: 3px solid #fff;
         margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.7);
box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.7);
display: block;
cursor: pointer;
	}
	
	#episode1:hover {
	  
	  background-color:#9f4b4b;
	 
	}
	
	.categorie {
	    color: #fff;
    font-family: geosanslightregular, Geo Sans Light;
    font-size: 1.1em;
     line-height: 0.6em;
  margin-bottom: 0px;
margin-top: 14px;
	}
	
	.categorie1 {
	    color: #fff;
    font-family: cocogooseregular, cocogoose;
    font-size: 2em;
    margin-bottom: -2px;
	}
	
	.catepisode {
	     color: #fff;
    font-family: cocogooseregular, cocogoose;
    font-size: 0.9em;
     line-height: 1.2em;
	}
	
	.heure {
	font-family: sanidanaregular, Sanidana;
	margin-top: 3px;
	font-size: 24px;
	color:#fff;
	
	}
	
	#episode1a {
	    color: #000;
    background-color: #fff;
    border-radius: 0px;
    padding: 10px;
    margin-top: 3%;
    opacity: 0.7;
    width: 70%;
    line-height: 1.2em;
   font-family: geosanslightregular, Geo Sans Light;
    font-size: 1.2em;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.7);
box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.7);

	}
	
	#episode1a a{
	    color: #000 ;
	    font-size: 0.9em !important;
	    font-family: cocogooseregular, cocogoose;
	  cursor:pointer;
	}
	
	#episode1a a:hover{
	   text-decoration:none;
	   color:#9f4b4b;
	}
	
	#cadretitrevelo{
	    position: relative;
		margin-top: 1%;
		width:100%;
		
		float:left;
	}
	
	#pierre {
		    margin-top: -12%;
		left:-13%;
		opacity:0;
		z-index: 9;
		    position: relative;
		
	}
	
	#pierrevelo {
		font-family: bent_wireregular, BENT WIRE;
		font-size: 8em;
		color:#fff;
		margin-top:-5%;
		line-height: 0.6em;
		text-shadow: 2px 2px 10px #000000;
	}
	
	#pedalo {
		font-family: bent_wireregular, BENT WIRE;
		font-size: 5em;
		color:#fff;
		opacity:0.5;
		line-height:1em;
		margin-right: -20%;
		padding-top: 3px;
		text-shadow: 2px 2px 10px #000000;
	}

  
	
	.titre1 {float: left;
color: #000;
margin-top: -25px;
margin-left: -2%;}
		
	.media1 {
	    width: 40%;
text-align: center;
z-index: 99;
margin-top: 0px;
float: left;
margin-left: 5%;
}

	
	
	.audio{float: left;
padding-top: 5px;
width: 8%;
padding-left: 5%;
padding-right: 3%;}
	
	
	
	#logo {position: fixed;
	top:130%;
	width: 100%;
	height: 180px;
	padding:20px;
	opacity:1;
	background-color:#F5F5F5 !important;
	padding-left:10%;
	z-index:9;
	animation: ouvrir2 ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: ouvrir2 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: ouvrir2 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: ouvrir2 ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: ouvrir2 ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes ouvrir2{
  0% {
    transform:  translate(0px,-40px)  ;
  }
  50% {
    transform:  translate(0px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes ouvrir2{
  0% {
    -moz-transform:  translate(0px,-40px)  ;
  }
  50% {
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes ouvrir2 {
  0% {
    -webkit-transform:  translate(0px,-40px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes ouvrir2 {
  0% {
    -o-transform:  translate(0px,-40px)  ;
  }
  50% {
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes ouvrir2 {
  0% {
    -ms-transform:  translate(0px,-40px)  ;
  }
  50% {
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

	
	
	#logo:hover{
		
  animation: ouvrir ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: ouvrir ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: ouvrir ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: ouvrir ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: ouvrir ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes ouvrir{
  0% {
    transform:  translate(0px,0px)  ;
  }
  50% {
    transform:  translate(0px,-50px)  ;
  }
  100% {
    transform:  translate(0px,-50px)  ;
  }
}

@-moz-keyframes ouvrir{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  50% {
    -moz-transform:  translate(0px,-50px)  ;
  }
  100% {
    -moz-transform:  translate(0px,-50px)  ;
  }
}

@-webkit-keyframes ouvrir {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-50px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,-50px)  ;
  }
}

@-o-keyframes ouvrir {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  50% {
    -o-transform:  translate(0px,-50px)  ;
  }
  100% {
    -o-transform:  translate(0px,-50px)  ;
  }
}

@-ms-keyframes ouvrir {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  50% {
    -ms-transform:  translate(0px,-50px)  ;
  }
  100% {
    -ms-transform:  translate(0px,-50px)  ;
  }
}


.pada {padding-top: 0px;
    font-size: 2.5em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    margin: 0;
    line-height: 1.8em;}


	#marseille {opacity:1;
	}
	
	
	
	
	#bar{
    background-color:#fff;
    position:relative; 
    width:0px; 
    height:10px; 
    margin-left: auto;
    margin-right: auto;
     bottom: 25px;
    }
    
    	#barre{
    background-color:#fff;
    position:relative; 
    width:0px; 
    height:10px; 
    margin-left: auto;
    margin-right: auto;
     bottom: 0px;
    }
    

    
	#titre3 {
		 position: relative;
	    font-family : cocogooseregular, cocogoose;
	    font-size:7em;
	    width:60px;
	    bottom:0px;
	    opacity: 0;
	    line-height: 0.65em;
	    color:#E57800;
	    text-align: center;
	    text-shadow: 3px 3px 5px #FFFFFF;
	    
	}
	
	#titre4 {
		position:relative;
	    font-family : cocogooseregular, cocogoose;
	   font-size: 2.8em;
line-height: 1.8em;
	    opacity:1;
	    width: 100px;
	    left:-100%;
 }
 
	#cup {
		margin-bottom: 26px;
		    display: inline-block;
	}
	
	#cup a{
     color:#ccc;
                    
}


	#cup a:hover,a:focus{
  
    
}

	#cup a span{
     position:absolute;
         margin-top: 80px;
    margin-left: -200px;
    color: #E57800;
     background:rgba(255,255,255,.9);
     padding:15px;
     border-radius:3px;
     box-shadow:0 0 2px rgba(255,255,255,.7);
     transform:scale(0) rotate(-12deg);
      transition:all .25s;
      opacity:0;
      z-index:12;
}


	#cup a:hover span, a:focus span{
     transform:scale(1) rotate(0);
      opacity:1;
}

	#cupone {        width: 80px;
    height: 92px;
    background-size: 100%;
    left: 0px;
    background-image: url(images/trophy1.png);
    margin-left: auto;
    margin-right: auto;
     background-repeat: no-repeat;
     float:left;
		}
	
	#cupone:hover {
background-image: url(images/trophy.png);
    background-size: 100%;
   
    }
    
    
    #cuptwo {
	width: 99px;
    height: 111px;
    margin-top: -20px;
    left: 0px;
    background-image: url(images/trophy1.png);
     background-size: 100%;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
     float:left;
		}
	
	#cuptwo:hover {
background-image: url(images/trophy.png);
    background-size: 100%;
   
    }
    
    	#cupthree {
	    width: 80px;
    height: 92px;
    background-size: 100%;
    left: 0px;
    background-image: url(images/trophy1.png);
    margin-left: auto;
    margin-right: auto;
     background-repeat: no-repeat;
     float:left;
		}
	
	#cupthree:hover {
background-image: url(images/trophy.png);
    background-size: 100%;
   
    }
    
    
    
	
	#crown {
		margin-top:1%;
		opacity:0;
	}
	
	#velo {position:relative;
	margin-top: 0px;
	  opacity:0;
	height:0px;
	}
	



#page1{
		background-image: url(images/013.jpg);
		background-size: cover;
	}
	
	#cadre1 {
	    padding-top: 10%;
	}
	
	#titreslideun {
		    
		color: #e57800;
		font-size: 2.5em;
		font-family: cocogooseregular, cocogoose;
		line-height:1.1em;
		opacity:0;
		position:relative;
		right:-200px;
		
		 
	}
	
	#soustitreslideun {
		opacity:0;
		font-size: 1.4em;
		font-family: cocogooseregular, cocogoose;
		color:#fff;
	}
	
	
	
	    #barorange {
    background-color:#E57800;
     margin-top: 30px;
    padding-right:30px; 
    height:10px;
    width:10px;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: -20px;
     opacity:1;
    }
	
	#cadreun {
		opacity:0;
		position:relative;
		
	}
	
	
.cadre_1pg1 {
	
	float:left;
	margin-right:auto;
	color:#fff;
	background-color: rgba(0,0,0,0.6);
	margin-top:10px;
	padding:15px;
	width: 600px;
	height: auto;
	text-align: justify;
	font-family:  geosanslightregular, Geo Sans Light;
font-weight: 300;
font-size: 1.1em;
}

#cadre2 {
    padding-top: 10%;
     margin-left: auto;
    margin-right: auto;
}
	
	#titreslidedeux {
		
		color: #e57800;
		font-size: 2.5em;
		font-family: cocogooseregular,cocogoose;
		line-height:1.1em;
		opacity:0;
		position:relative;
		right:-200px;
		
	}
	
	#soustitreslidedeux {
		opacity:0;
		color:#fff;
		font-size: 1.4em;
		font-family: cocogooseregular, cocogoose;
	}
	
		    #barorangedeux {
    background-color:#E57800;
     margin-top: 2%;
    padding-right:30px; 
    height:10px;
    width:0px;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: -20px;
    }
	
	#cadredeux {
		opacity:0;
		position:relative;
		
	}

.cadre_2pg2 {
	float:left;
	margin-right:auto;
	color:#fff;
	background-color: rgba(0,0,0,0.6);
	margin-top:10px;
	padding:15px;
	width: 500px;
	height: auto;
	text-align: justify;
	font-family: geosanslightregular, Geo Sans Light;

font-weight: 300;
font-size: 1.1em;
}




#page2{
		background-image: url(images/015.jpg);
		background-size: cover;
		
}

#my-container {
       background-image: url(images/grille.png);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
}

#page3{
		background-image: url(images/003.jpg);
		    background-position: 0px -120px, center;
		background-size: cover;
	}
	
	#titreslidetrois {
		margin-top: 35%;
	
	color: #E57800;
	font-size: 2.5em;
	font-family: cocogooseregular, cocogoose;

	opacity: 1;
	position: relative;
	margin-right: auto;
	margin-left: auto;

	}
	
	#soustitreslidetrois {
		opacity:1;
		font-size: 1.4em;
		font-family: cocogooseregular, cocogoose;
		color:#fff;
	margin-right: auto;
	margin-left: auto;
	margin-top: 2%;
	}
	
		    #barorangetrois {
    background-color:#E57800;
     margin-top: 6%;
    padding-right:30px; 
    height:10px;
    width:0px;
   
		
     margin-bottom: -20px;
   
    margin-right: auto !important;
margin-left: auto;
}
	
	#cadretrois {
		opacity:0;
		position:relative;
		
		margin-right: auto;
margin-left: auto;;
		
	}
	
	
	#fondnoir {
		width: 48%;
		right:-45%;
float: right;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: relative;
		opacity:0;
	}

.cadre_1pg3 {
	float:left;
	margin-right:auto;
	background-color: rgba(255,255,255,0);
	color:#fff;
	margin-top:10px;
	padding:15px;
	width: 400px;
	height: auto;
	text-align: justify;
	font-family: geosanslightregular, Geo Sans Light;
font-weight: 300;
font-size: 1.1em;
}

#page4{
		background-color: rgba(49, 49, 49, 0.5);
	    		
		background-size: cover;
	}
	
	#layer1 {
		left:-20%;
		opacity:0;
		position:relative;
	}
	
	#contenu {
	   width: 46%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 400px;
}
	
	#titreslidequatre {
		
color: rgba(255, 255, 255, 0.9);
    font-size: 15em;
    line-height: 1.1em;
    font-family: cocogooseregular, cocogoose;
    opacity: 1;
		    margin-right: -6%;
	}
	
	#titreslidequatrea {
    color: rgba(255, 255, 255, 1);
    font-size: 1.2em;
    font-family: geosanslightregular, Geo Sans Light;
    opacity: 1;
    border-top: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
    text-align: justify;
    float: right;
    width: 60%;
    padding: 20px;
    margin-right: 10%;
    margin-top: 2%;
    
	}
	
	#titreslidequatreb {
		color: rgba(255,255,255,0.9);
		
		font-family: cocogooseregular, cocogoose;
		padding-left: 0%;
font-size: 3em;
margin-bottom: 30px;
margin-top:7%;
	}
	

    
	
	
#page5{
	background-color: rgba(49, 49, 49, 0.5);
		opacity: 1;
		
		background-size: cover;
	}

#page6{
		background-color: rgba(49, 49, 49, 0.5);
		opacity: 1;
		
		background-size: cover;
	}	
	
#page7{
		background-color: rgba(49, 49, 49, 0.5);
		
		background-size: cover;
	}

#page8 {
		background-color: rgba(49, 49, 49, 0.5);
	
		background-size: cover;	
	}
	
	
	    #titreslide5{
	color: rgba(255,255,255,0.9);
		font-size: 1.3em !important;
		font-family: geosanslightregular,Geo Sans Light;
		width:42%;
		margin-right:auto;
		left:-10%;
		text-align:justify;
		opacity:0.4;
		position: relative;
    }
    
    .quote {
float: left;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 10px;

opacity: 0.9;
}
  
 #titreslide6 {
	color: rgba(255,255,255,0.9);
		    font-size: 1.3em !important;
		font-family: geosanslightregular,Geo Sans Light;
		width:60%;
		margin-right:auto;
		margin-left:auto;
		text-align:justify;
		position:relative;
		opacity:0.4;
		left: -35%;
		    padding-left: 8%;
    }

 #titreslide7 {
	color: rgba(255,255,255,0.9);
	    font-size: 1.3em !important;
		font-family: geosanslightregular,Geo Sans Light;
		width:60%;
		margin-right:auto;
		margin-left:auto;
		text-align: justify;
		left: -27%;
		position: relative;
		opacity:0.4;
    }
    
    #titreslide9 {
	color: #E57800;
		font-size: 1.8em;
		background-color: rgba(255, 255, 255, 0);
		padding: 20px 20px 20px 30px;
		font-family: cocogooseregular, cocogoose;
		width:34%;
		margin-left:3%;
		float:left;
		text-align:left;
		position:relative;
		margin-top: -18%;
		left:-20%;
		
		opacity:0;
	
    }

    #titreslide9a {
	    background-color: rgba(0,0,0,0.3);
    padding: 20px 20px 20px 20px;
    width: 30%;
    float: right;
    margin-right: 7%;
    margin-top: -9%;
    opacity: 0;
    color: rgba(255,255,255,1);
    font-size: 1.3em;
    font-family: geosanslightregular,Geo Sans Light;
    text-align: justify;
    position: relative;
    right:-20%;
    
    }
	
	
	#imagefond {
	    top: 0%;
    position: fixed;
    opacity: 0;
    text-align: center;
    width: 100%;
   
    }
    
    #panneau {
	position:relative;
	 opacity: 0;
    text-align: center;
    width: 100%;
    height:100%;
    top: 0%;
    }
	
#page9{
		background-image: url(images/005.jpg);
		opacity:0;
		background-size: cover;
		
	}	

#page10{
		background-color: #E5E5E5;
		 background-image: url(images/fondinfo.png);
		background-size: cover;	
	}
	
	.fond {
	    background-image: url(images/fondinfo.png);
	    background-size: cover;
	}
	
	.point {
		background-repeat: repeat-x;
		width: 80%;
		height: 8px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 0%;
		background-image: url("images/point.png");
	}
	
	.info {
		float: left;
		margin-top: 5%;
		opacity:0;
		width: 33%;
		height: auto;
		margin-left: 6%;
	}
	
	.info1 {
		
		font-family: geosanslightregular, Geo Sans Light;
		
		font-size: 1.1em;

		opacity: 0;
		position: relative;		
		text-align: justify;
		float: left;
		width: 32%;
		
		margin-left: 2%;
		margin-top: 9%;
		color:#313131;
	}

	.info2 {
		
		position: relative;		
		text-align: justify;
		float: left;
		width: 190px;
		height: 269px;
		margin-left: 3%;
		margin-top: 7.5%;
		opacity:0;
		
	}
	
	.source {
		float: left;
font-size: 0.6em;
margin-left: 2%;
width: 100%;
margin-right: 0%;
color: #4e8d4b;
margin-top: 2%;
	}
	
	
#page11{
		background-image: url(images/018.jpg);
		background-size: cover  ;	
	}
	
	#cvv {opacity:0;
	background-image: url(images/masque018.png);
	background-size: cover !important;
	    height: 100%;

	}
	
	#grandtitre11{
	    color: #FFF;
font-size: 13em;
font-family: cocogooseregular,cocogoose;
line-height: 0.83em;
opacity: 0;
float: left;
margin-left: 8%;
padding-top: 20%;
left:-20%;
position:relative;
	}
	
	#titre11 {
	    color: #fff;
	    font-size: 4em;
	    font-family: cocogooseregular, cocogoose;
	    opacity: 0;
	    padding-top:38%;
	    position: relative;
	    left: -80%;
	}
	
	#cadreinfocvv1{
	    float: right;
margin-right: 3%;
margin-top: 5%;
position: relative;
width: 32%;
opacity:0;
right:-20%;
	}
	
	#soustitre11 {color: #fff;
	    font-size: 2em;
	    line-height:0em;
	    font-family: cocogooseregular, cocogoose;
	    opacity: 0;
	    position:relative;
	    top:20px}
	    
	    #infocvv1 {
		color: #FFF;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.1em;
text-align: justify;
opacity: 1;

    border-left: 3px solid rgb(255, 255, 255);
    float: left;
    padding-left: 10px;
    width: 70%;

	    }
	    
	 .media2 {
		width: 100%;
    height: 1800px;
		text-align:center;
		    position: fixed;
    margin-top: 100px;
	    }
	    
	    #pierre3 {
		float:right;
		width:560px;
		top:0%;
		opacity:1;
		z-index: 13;
		    margin-top: -200px;
    margin-left: 47%;
    position: fixed;
	}
	
	#titrevideo{
	    margin-left: 10%;
	}
	
	#iconecamera{
	       background-color: #E57800;
    text-align: center;
    padding: 12px;
        padding-bottom: 6%;
    margin-top: -29px;
    width: 60px;
    float: left;
    margin-right: 20px;
        border-top-left-radius: 15px;
	}
	
	
	
	.titrevideo {
	    font-size: 2.5em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    margin: 7px;
    line-height: 1.8em;
    border-right: 10px solid #E57800;
    float:left;
    padding-right:20px;
	}
	
	.sstitrevideo{    font-size: 2em;
       margin-left: 1%;
       float:left;
    padding-top: 19px;
    color: #000;
    font-family: geosanslightregular,Geo Sans Light;
	}
	
	#closed {
    width: 40px;
    height:38px
    font-size: 1.2em;
    background-color: rgba(0,0,0,0.5);
    border-radius: 25px;
    color: #fff;
    margin-top: 6%;
    left: -42%;
    padding: 5px;
    text-align: center;
    float: left;
    position: relative;
    z-index: 9;
    opacity: 1;
	}
	
	 #closed:hover  {
	    background-color: rgba(0,0,0,0.9);
	     border-radius: 20px;
	    
}

button:focus {
    outline: -webkit-focus-ring-color auto 5px;
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 0px;
}

	 #fondblanc:hover #closed:active:target #fondblanc{
	    background-color: rgba(0,0,0,0.9);
	     border-radius: 10px;
	   
	    
}

 .fondblanccadre {
   
 }

	    
	    #fondblanc{
		background-color: #fff;
		width:100%;
		height:100%;
		    top: 120%;
    position: fixed;
    z-index: 3;
    opacity:0;
 
  animation: fondblancretour ease 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
				 
  -webkit-animation: fondblancretour ease 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: fondblancretour ease 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fondblancretour ease 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fondblancretour ease 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fondblancretour{
  0% {
    transform:  translate(0px,-90%)  ;
  }
  50% {
    transform:  translate(0px,0%)  ;
  }
  100% {
    transform:  translate(0px,0%)  ;
  }
}

@-moz-keyframes fondblancretour{
  0% {
    -moz-transform:  translate(0px,-90%)  ;
  }
  50% {
    -moz-transform:  translate(0px,0%)  ;
  }
  100% {
    -moz-transform:  translate(0px,0%)  ;
  }
}

@-webkit-keyframes fondblancretour {
  0% {
    -webkit-transform:  translate(0px,-90%)  ;
  }
  50% {
    -webkit-transform:  translate(0px,0%)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0%)  ;
  }
}

@-o-keyframes fondblancretour {
  0% {
    -o-transform:  translate(0px,-90%)  ;
  }
  50% {
    -o-transform:  translate(0px,0%)  ;
  }
  100% {
    -o-transform:  translate(0px,0%)  ;
  }
}

@-ms-keyframes fondblancretour {
  0% {
    -ms-transform:  translate(0px,-90%)  ;
  }
  50% {
    -ms-transform:  translate(0px,0%)  ;
  }
  100% {
    -ms-transform:  translate(0px,0%)  ;
  }
 
}
 


	


	    
	  #fondblanc:hover{
    animation: fondblanc ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
				 
  -webkit-animation: fondblanc ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: fondblanc ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fondblanc ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fondblanc ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fondblanc{
  0% {
    transform:  translate(0px,0px)  ;
  }
  50% {
    transform:  translate(0px,-90%)  ;
  }
  100% {
    transform:  translate(0px,-90%)  ;
  }
}

@-moz-keyframes fondblanc{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  50% {
    -moz-transform:  translate(0px,-90%)  ;
  }
  100% {
    -moz-transform:  translate(0px,-90%)  ;
  }
}

@-webkit-keyframes fondblanc {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-90%)  ;
  }
  100% {
    -webkit-transform:  translate(0px,-90%)  ;
  }
}

@-o-keyframes fondblanc {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  50% {
    -o-transform:  translate(0px,-90%)  ;
  }
  100% {
    -o-transform:  translate(0px,-90%)  ;
  }
}

@-ms-keyframes fondblanc {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  50% {
    -ms-transform:  translate(0px,-90%)  ;
  }
  100% {
    -ms-transform:  translate(0px,-90%)  ;
  }
 
}

	
#page12{
		background-image: url(images/031.jpg);
		opacity:1;
		background-size: cover;
		    background-position: 0px -100px, center;
	}
	
	#cadrecvv2 {
   float: right;
    width: 28%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.4);
    color: #000;
    margin-right: 9%;
    border-right: 2px solid rgb(229, 120, 0);
    border-bottom-right-radius: 10px;
   border-top: 0px solid rgb(229, 120, 0);
    border-top-left-radius: 10px;
    right:-20%;
    opacity:0;
    position:relative;
    
	}
	
	#cadrecvv2a {
   float: right;
    width: 30%;
    height: auto;
    opacity:0;
    color: #000;
    margin-right: 30%;
    margin-top: -8%;
    right: -22%;
    position: relative;
    text-align: justify;
    position:relative;
	}
	
	.quotecvv2 {
	    
     float: right;
    width: 60px;
    height: auto;
    background-color: rgb(229, 120, 0);
    padding: 10px;
    margin-right: -3%;
    margin-top: 0%;
    margin-left: 13px;
    border-top-right-radius: 10px;

	}
	
	.infocvv2 {
	     color: #fff;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
    text-align: justify;
        padding-top: 15px;
    padding-right: 20px;
    padding-left: 15px;
    padding-bottom: 15px;
	}
	
	.infocvv2sur {
color: #fff;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.2em;
    text-align: justify;

  
	}
	
	#pierre2 {
		position: relative;
		width:560px;
		left:-50%;
		opacity:1;
		z-index: 13;
		margin-top: -11%;
	}
	
	
	#page13{
		background-image: url(images/010.jpg);
		background-size: cover;
	}
	
	#quotecvv3{
	    
    width: 60px;
    height: auto;
    background-color: rgb(229, 120, 0);
    padding: 10px;
      float: left;
    margin-top: 0%;
    border-top-left-radius: 10px;
        margin-right: 15px;
	margin-left: -4%;
	position:relative;
	}
	
	#cadrecvv3 {
	   width: 34%;
margin-left: 8%;
margin-top: 3%;
border-top: 0px solid rgb(229, 120, 0);
border-left: 2px solid rgb(229, 120, 0);
background-color: rgba(0, 0, 0, 0.4);
 position:relative;
	    opacity:0;
	    right:-40%;
	    border-top-right-radius: 10px;
	     border-bottom-left-radius: 10px;
	}
	
	#cadrecvv3a {
	      width: 38%;
    margin-left: -35%;
    margin-top: -3%;
    position: relative;
    opacity: 1;
    right: -40%;
	  opacity:0;
	}
	
	.infocvv3 {
	    color: #fff;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.1em;
text-align: justify;
padding: 15px;
padding-left:20px;
    padding-top: 15px;
	}
	
		.infocvv3sur {
color: #fff;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.2em;
    text-align: justify;

  
	}
	
	#page14{
		background-color: #fff;
		
		background-size: cover;
	}
	
	#panoramique {
	    width:200%;
	    height:auto;
	}
	
	#cadre14{
	    width:42%;
	    margin-left:7%;
	    margin-top: -67%;
	    float: left;
	     position: relative;
	     opacity:0;
	     
	}
	
	.titre14 {
	    font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    
    border-left: 10px solid #E57800;
    
    padding-left: 15px;
   
    
    text-align: left;
  
	    
	}
	
	.sstitre14 {
	     color: #000;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.2em;
text-align: justify;


	}
	
		.sstitre14a {
	     color: #000;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.1em;
text-align: justify;
Width:98%;
margin-left:2%;

border-left: 2px solid rgb(229, 120, 0);
padding-left: 10px;

	}
	
		
	
	#page15{
		background-image: url();
		
		background-size: cover;
	}
	
	#panoramique2 {
	    width:250%;
	    height:auto;
	    margin-top:	-25%;
	}
	
	
		#page16{
		background-color: #fff;
		    
		
		background-size: cover;
	}
	
	#panoramique3 {
	    width:200%;
	  
	}
	
	#cadre16 {
	    margin-top: -50%;
	    width: 38%;
	    margin-left: 5%;
	    position: relative;
	     float: left;
	     opacity:0;
	    
	}
	
	.titre16 {
	    font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    border-left: 10px solid #E57800;
    padding-left: 15px;
    text-align: left;
	    
	}
	
	.sstitre16 {
	     color: #000;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.2em;
text-align: justify;
margin-top:20px;
	}
	
		.sstitre16a {
	     color: #000;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.1em;
text-align: justify;
Width:98%;
margin-left:2%;
margin-top:20px;
border-left: 2px solid rgb(229, 120, 0);
padding-left: 10px;

	}
	
	#page17{
		
	}
	
	#cadre17 {
	     margin-top: 9%;
    margin-right: -42%;
    width: 39%;
    position: relative;
    float: right;
	    opacity:0;
	     
	}
	
	.sstitre17 {
	 color: #000;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
    text-align: justify;
   
	}
	
	.sstitre17a {
	     color: #000;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.1em;
text-align: justify;
Width:98%;
margin-left:2%;
margin-top:20px;
border-left: 2px solid rgb(229, 120, 0);
padding-left: 10px;

	}
	
	.sstitre17b {
	     color: #000;
font-family: geosanslightregular,Geo Sans Light;
font-size: 1.2em;
text-align: justify;
margin-top:30px;
	}
	
	
	.titre17 {
font-size: 1.2em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    margin-top: 40px;
  
    border-left: 10px solid #E57800;

    padding-left: 20px;
   
    text-align: justify;
	    
	}
	
	#page18{
		background-color: rgba(255,255,255,1);
		background-size: cover;
	}
	
	
	
		.titre18 {
    font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    margin-top: 2%;
    border-left: 10px solid #E57800;
    padding-left: 20px;
    position: relative;
    width: 43%;
    text-align: justify;
    margin-left: 7%;
    margin-bottom: 20px;
	    
	}
	
	.col18d {
	    width:38%;
	    float:left;
	    margin-left: 5%;
	    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
	}
	
	.col18d p {
	    color: #000;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
    text-align: justify;
	}
	
	.col18d li {
	   text-decoration:none;
    text-align: left;
	}
	
	.col18g {
	    width:45%;
	    float:right;
	}
	
		#page19{
		
		    
		background-image: url(images/016c.jpg);
		background-size: cover;
	}
	
	#page20{
		
		    
		background-image: url(images/056.jpg);
		background-size: cover;
		 background-position: 0px -150px, center;
	}
	
	#cadre20 {
	    position: relative;
    width: 28%;
	     float:right;
	      margin-right: 5%;
	       margin-top: 0%;
	       opacity:0;
	}
	
	
	.titre20 {
	    font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
   
    border-left: 10px solid #E57800;
    padding-left: 20px;
    text-align: justify;
    margin-bottom: 20px;
	}
	
	.sstitre20 {
       color: #000;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
    text-align: justify;
    margin-top: 20px;
	}
	
	.sstitre20 a {
	   color: #E57800; 
	}
	
	.sstitre20 a:hover {
	   font-weight:900; 
	}
	
	#page21{
		background-image: url(images/052.jpg);
		background-size: cover;
		text-align:center;
		background-position: 0px -100px, center;
	}
	
	
	#cadre21 {
	    width: 90%;
    position: relative;
    float: left;
     margin-top: 18%;
    margin-left: 5%;
	}
	

	
		
	#cadre21a {
	   width: 50%;
    position: relative;
    float: left;
    margin-top: -8%;
    margin-left: 3%;
    opacity:0;
	}
	
	.titre21a {
	font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    padding-bottom: 2%;
     padding-left:20px;
    border-left: 10px solid #E57800;
    text-align:justify;
   
	}
	
	.sstitre21a {
       color: #000;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
    text-align: justify;
    
	}
	
	
    #cadre21b {
	   width: 40%;
    position: relative;
    float: right;
    margin-top: 0%;
    margin-right: 3%;
    opacity:0;
	}
	
	.titre21b {
	font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    padding-bottom: 2%;
     padding-left:20px;
    border-left: 10px solid #E57800;
    position: relative;
    text-align:justify;
   
	}
	
	.sstitre21b {
       color: #000;
    font-family: geosanslightregular,Geo Sans Light;
    font-size: 1.1em;
    text-align: justify;
    
	}
	
	.don {
margin-left: 50%;
background-color: #DB0202;
padding: 10px 15px 10px 15px;
color: #FFF;
cursor:pointer;
}

.don:hover {
    background-color: darkred;
}
	
	#page22{
		background-color: #fff;
		background-size: cover;
		text-align:center;
		
	}
	
	.titre22 {
	font-size: 1.4em;
    font-family: cocogooseregular, cocogoose;
    color: #000;
    text-align:center;
   
	}
	
	#timelinelite{
    position:absolute;
    background: url(images/trophy.png) no-repeat  ;
    left:50px;
    top:16px;
    width: 180px;
    height: 33px;
    overflow:hidden;
}    
#tagline{
    position:absolute;    
    left:236px;
    top:24px;
    width:306px;
    height:26px;
}        
#tagline span{
    position:relative;
    display:inline-block;
}
	
	
	#titre2{
	 
	font-family : cocogooseregular, cocogoose;
  animation: animationFramestitre1 ease-out 5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFramestitre1 ease-out 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFramestitre1 ease-out 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFramestitre1 ease-out 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFramestitre1 ease-out 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFramestitre1{
  0% {
    opacity:0;
  }
  40% {
    opacity:0;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes animationFramestitre1{
  0% {
    opacity:0;
  }
  40% {
    opacity:0;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

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

@-o-keyframes animationFramestitre1 {
  0% {
    opacity:0;
  }
  40% {
    opacity:0;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes animationFramestitre1 {
  0% {
    opacity:0;
  }
  40% {
    opacity:0;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
	
	.persopg1 {float: left;
margin-left: 0px;
width: 20%;
padding-right: 2%;
margin-top: -14%;}
    
    .citationmedia1{
	font-family: Blood Shade;
font-size: 1.9em;
text-align: right;
margin-left: auto;
padding-right: 10px;
border-right: 5px solid #E57800;
width: auto;
margin-right: 12%;
    }
    


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

.cssload-container {
	position: absolute;
	width: 117px;
	height: 49px;
	margin-top: -45px;
margin-left: 87px;
	
}

.cssload-container > div {
	position: absolute;
	transform-origin: center;
		-o-transform-origin: center;
		-ms-transform-origin: center;
		-webkit-transform-origin: center;
		-moz-transform-origin: center;
}

.cssload-square,
.cssload-circle,
.cssload-triangle {
	left: 29px;
}
.cssload-circle {
	color: #FFFFFF;
	width: 27px;
	height: 23px;
	left: 31px;
	top: 15px;
	transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
	animation: cssload-shrinkgrow 2s  infinite;
		-o-animation: cssload-shrinkgrow 2s  infinite;
		-ms-animation: cssload-shrinkgrow 2s  infinite;
		-webkit-animation: cssload-shrinkgrow 2s  infinite;
		-moz-animation: cssload-shrinkgrow 2s  infinite;
	animation-delay: 1s;
		-o-animation-delay: 1s;
		-ms-animation-delay: 1s;
		-webkit-animation-delay: 1s;
		-moz-animation-delay: 1s;
}




@keyframes cssload-shrinkgrow {
	0% {
		transform: scale(0);
	}
	12.5% {
		transform: scale(0.5);
	}
	25% {
		transform: scale(0.5);
	}
	33% {
		transform: scale(0);
	}
	100% {
		transform: scale(0);
	}
}

@-o-keyframes cssload-shrinkgrow {
	0% {
		-o-transform: scale(0);
	}
	12.5% {
		-o-transform: scale(0.5);
	}
	25% {
		-o-transform: scale(0.5);
	}
	33% {
		-o-transform: scale(0);
	}
	100% {
		-o-transform: scale(0);
	}
}

@-ms-keyframes cssload-shrinkgrow {
	0% {
		-ms-transform: scale(0);
	}
	12.5% {
		-ms-transform: scale(0.5);
	}
	25% {
		-ms-transform: scale(0.5);
	}
	33% {
		-ms-transform: scale(0);
	}
	100% {
		-ms-transform: scale(0);
	}
}

@-webkit-keyframes cssload-shrinkgrow {
	0% {
		-webkit-transform: scale(0);
	}
	12.5% {
		-webkit-transform: scale(0.5);
	}
	25% {
		-webkit-transform: scale(0.5);
	}
	33% {
		-webkit-transform: scale(0);
	}
	100% {
		-webkit-transform: scale(0);
	}
}

@-moz-keyframes cssload-shrinkgrow {
	0% {
		-moz-transform: scale(0);
	}
	12.5% {
		-moz-transform: scale(0.5);
	}
	25% {
		-moz-transform: scale(0.5);
	}
	33% {
		-moz-transform: scale(0);
	}
	100% {
		-moz-transform: scale(0);
	}
}