@font-face {
  font-family: "frydaynightlight";
  src: url(fonts/FNL_DEMO-KCFonts.ttf) format("truetype");
  font-family: "dock51";
  src: url(fonts/dock_51.ttf) format("truetype");
  font-family: "bellakhopeless";
  src: url(fonts/bellakhopeless.ttf) format("truetype");
}

@font-face {
  font-family: "dock51";
  src: url(fonts/dock_51.ttf) format("truetype");
}

@font-face {
  font-family: "bellakhopeless";
  src: url(fonts/bellakhopeless.ttf) format("truetype");
}

body{
	background-color:#000;
	font-family:"bellakhopeless","Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	margin:0 auto;
	width: auto;
	max-width: 1902px;
	padding: 0;
}

p, ul{
	font-family:"bellakhopeless","Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.6;
	font-weight:200;
	font-style:normal;
}

img{
	border:none;
}

#intro img{
	margin-top:2%;
}

#nav{
	width:50px;
	list-style: none;
	position: fixed;
	right: 20px;
	z-index:1000;
}

#loader{
	position:fixed;
	text-align:center;
	width:100%;
	height:100%;
	z-index:20000;
	background-color:#000;
}

#big{
	position:relative;
	text-align:center;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
	margin-left:auto;
	margin-right:auto;
	z-index:30000;
}

#big2{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big3{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big4{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big5{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big6{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
    background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big7{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big8{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#big9{
	position:relative;
	margin-top:auto;
	margin-left:auto;
	text-align:center;
	z-index:30000;
	width:100%;
	height:100%;
	background: url(images/bg-motif.png) 0 0 repeat fixed;
}

#min{
	height: 356px;
	width: 300px;
	position:absolute;
	top:0px;
	left:0px;
}

.sonic {
}

canvas {
	display: block;
	}
	
div.l{
	background: none repeat scroll 0 0 #000000;
    height: 150px;
    margin: 10% auto;
    position: relative;
    width: 150px;
}

.story{
    margin: 0 auto;
    min-width: 980px;
    width: 980px;
}

.float-left{
	float: left;	
	margin: 0 0 0 20px;
}

.map{
	width:575px;
}

#intro {
    background: url(images/dune.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1000px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

#brazil_txt{
	font-family: "bellakhopeless", sans-serif;
	font-size:80px;
	color:#FF0;
	text-align:center;
	margin-top:700px;
}

#poster1{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster2{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster3{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster4{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster5{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster6{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster7{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster8{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}
	
#poster9{
	height: 356px;
	width: 300px;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	top:0px;
	left:0px;
	}

.dragme{
	position:relative;
	}
	
.dragme:hover{
	position:relative;
	z-index:1000;
	}
	
.indic{
	height: 356px;
	width: 300px;
	position:absolute;
	top:0px;
	left:0px;
	transition-property:opacity delay;
	opacity: 0;
	transition-delay: 0.5s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition: 1s;	
}

.indic:hover{
	opacity:0.8;
}

.drag{
	position:absolute;
	height: 356px;
	width: 300px;
	}


#madiv{
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#FF0;
	margin-right:50px;
	width:250px;
	list-style: none;
	position: fixed;
	right: 20px;
	z-index:1000;
	display:none;
}

#coordonnees{
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#FF0;
	margin-right:50px;
	width:250px;
	list-style: none;
	position: fixed;
	right: 20px;
	z-index:1000;
}

#verif{
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#FF0;
	margin-right:50px;
	width:250px;
	list-style: none;
	position: fixed;
	right: 20px;
	z-index:1000;
}

#second{
	background: url(images/tricks_vide.jpg) 0 0 no-repeat fixed;
	color: white;
	height: 1000px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

#second .bg{
	font-family: "dock51", sans-serif;
	margin-top:200px;
    margin-left:0px;
    position: absolute;
    width:auto;
	font-size:18px;
    z-index: 200;
}

#second .jump{
	background: url(images/jump.png) 0 0 no-repeat fixed;
	color: white;
	height: 1400px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	opacity:1;
	z-index:201;
}

#third{
	background: url(images/SPblanc.png) 50% 0 repeat fixed;
	color: white;
	height: 1000px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

#third .bg{
	background: url(images/SPnoir.png) 50% 0 repeat fixed;
	height: 1000px;
	margin: 0 auto;
	padding: 0;
	z-index: 200;
	opacity:1;
}

#third .story{
	z-index:2300;
	position:center;
	text-align:center;
	position:relative;
	}
	
#volet_clos{
	position:fixed;
	left:0px;
	top:55px;	
}
	
#volet{
    width: 595px;
	height: 400px;
    padding: 10px;
    background:url(images/center_bg2.gif) repeat-y;
	color: #fff;	
    position: absolute;
    left: -595px;
	top: 55px;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
     -o-transition:all .5s ease-in;
    transition: all .5s ease-in;
}

#volet:target {
    left: 0;
}

#volet a.ouvrir,
#volet a.fermer {
    position: absolute;
    right: -43px;
    top: 150px;

    /* quelques styles CSS3 */
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);

    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    padding: 10px 25px;
    background: #555;
    color: #fff;
    text-decoration: none;
}

#volet a.fermer {
    display: none;
}

#volet_clos:target #volet {
    left: -595px;
}

#volet:target a.ouvrir {
    display: none;
}
#volet:target a.fermer {
    display: block;
}

#fourth{
	height: 1350px;
	margin: 0 auto;
	padding: 0;
	z-index:200;
	overflow:hidden;
}

#fourth .bg{
	background: url(images/I.png) 0 0 repeat fixed;
	height: 1350px;
	margin: 0 auto;
	padding: 0;
	opacity:1;
	z-index:202;
}

#fourth .bg2{
	background: url(images/I_2.png) 0 0 repeat fixed;
	background-color:transparent;
	height: 1350px;
	margin: 0 auto;
	padding: 0;
	opacity:1;
	z-index:201;
}

#over-vid{
	width:1900px;
	height:1200px;
}

.animated{
	display:none;
}

#fifth{
	height: 1790px;
	margin: 0 auto;
	padding: 0;
	z-index:210;
	overflow:hidden;
	background-color:#CCC;
	background:url(images/grunge-brick-wall-background.jpg) 0 0 repeat fixed;
}

#fifth .brosse{
	background:url(images/brosse.png) 0 0 repeat-x fixed;
	height: auto;
	margin: 0 auto;
	padding: 0;
	z-index:210;
	overflow:hidden;
	z-index:215;
}

#fifth .bg{
	background: url(images/tShirt_bordeau.png) 0 0 no-repeat fixed;
	height: 1790px;
	margin: 0 auto;
	padding: 0;
	opacity:1;
	z-index:214;
}

#fifth .bg2{
	background: url(images/tShirt_gris.png) 0 0 no-repeat fixed;
	background-color:transparent;
	height: 1790px;
	margin: 0 auto;
	padding: 0;
	opacity:1;
	z-index:212;
}

#fifth .bg3{
	background: url(images/tShirt_jaune.png) 0 0 no-repeat fixed;
	background-color:transparent;
	height: 1790px;
	margin: 0 auto;
	padding: 0;
	opacity:1;
	z-index:213;
}

#fifth .story{
	z-index:2000;
	color:#FFF;
	font-size:48px;
}