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

body{
	margin:0px;
	padding-bottom:5px;
}

a{text-decoration:none;}

#video_background {
position:fixed;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -10000;
overflow: hidden;
}


@font-face{
	font-family:neutratitling;
	src:url(typo/Neutraface2Display-Titling.otf);
}

	@font-face{
	font-family:neutralight;
	src:url(typo/Neutraface2Display-Light.otf);
	}
	
	@font-face{
	font-family:neutrabold;
	src:url(typo/Neutraface2Display-Bold.otf);
	}
	
	@font-face{
	font-family:neutrainline;
	src:url(typo/Neutraface2Display-Inline.otf);
	}
	
	@font-face{
	font-family:neutrabook;
	src:url(typo/Neutraface2Text-Book.otf);
}

#blocacceuil{
	width:700px;
	height:400px;
	z-index:-100;
	margin-left:auto;
	margin-right:auto;
	/*background-color:#000000;*/
	margin-top:10%;
	}

#spideka{
	font-family: neutratitling;
	font-size:60px;
	color:#FFFFFF;
	padding-left:25%;
	padding-top:5%;
	text-shadow:3px 3px 0px #000000;
}

#compagnie{
	font-family: neutralight;
	font-size:40px;
	color:#FFFFFF;
	padding-left:9%;
	padding-top:3%;
	}

#puce{
	height:10px;
	width:10px;
    border: 2px solid #FFF;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
    margin-left:-10%;
    margin-top:-7%;
}


#puce2{
	height:10px;
	width:10px;
    border: 2px solid #FFF;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
    margin-left:61%;
    margin-top:-3%;
}

#ligne{
	width:400px;
	border:1px solid #FFF;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	margin-top:10%;
	margin-left:-15%;
	text-align:center;
}

#intro{
	font-family: neutrabook;
	font-size:14px;
	color:#FFFFFF;
	padding-top:10%;
	margin-left:-33%;
	margin-right:10%;
	text-shadow:1px 1px 0px #000000;
	}

#enterbloc{
	width:70px;
	height:23px;
	background-color:#FFFFFF;
	margin-top:5%;
	margin-left:15%;
	font-family:neutralight;
	font-size:20px;
	color:#000000;
	text-shadow:0px 0px 0px #000000;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:15px;
	padding-right:15px;
	cursor:pointer;
	transition:All 0.6s ease;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
	-moz-box-shadow: 1px 1px 1px #000000;
	-webkit-box-shadow: 1px 1px 1px #000000;
	box-shadow: 1px 1px 1px #000000;
	text-align:center;
}


#enterbloc:hover{
	background-color:#000;
	color:#FFFFFF;
	transition:All 0.6s ease;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
}


#anglais{
	width:auto;
	height:auto;
	font-family:neutralight;
	font-size:16px;
	color:rgb(255,255,255);
	margin-left:20px;
	margin-top:20px;
		transition:All 0.6s ease;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
cursor:pointer;
}



#copyright{
	width:320px;
	height:20px;
	font-family:neutralight;
	font-size:12px;
	color:rgb(255,255,255);
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	
	
}
	


/*________________<acceuil>________________________*/


#menu{
	height:40px;
	min-width:100%;
	float:right;
	margin-top:0px;
	border-bottom:1px solid #FFF;
	z-index:-10;
}

#titlemenu,#logo,#clem{
	height:23px;
	width:auto;
	font-family:neutratitling;
	font-size:16px;
	letter-spacing:1px;
	color:#FFFFFF;
	float:right;
	text-shadow:1px 1px 0px #000000;
	opacity:1;
	padding-top:13px;
	margin-right:20px;
	cursor:pointer;
}

#logo{
	font-size:22px;
	float:left;
	margin-left:20px;
	padding-top:8px;
	margin-right:5px;
}

#clem{
	font-family:neutralight;
	font-size:20px;
	float:left;
	margin-top:-4px;
}

#titlemenufix{
	height:23px;
	width:auto;
	font-family:neutratitling;
	letter-spacing:1px;
	font-size:16px;
	color:#FFFFFF;
	float:right;
	text-shadow:1px 1px 0px #000000;
	opacity:1;
	padding-top:13px;
	margin-right:20px;
	cursor:pointer;
	border-bottom:4px solid #FFF;
}

#titlemenu:hover{
	border-bottom:4px solid #FFF;
}

a{
	text-decoration:none;
}

/*
_______________spectacle___________________*/


#bloc1,#bloc2,#bloc3,#bloc4,#bloc5,#bloc6,#bloc7,#bloc8,#bloc9,#bloc10,#bloc11,#bloc12{
	background-color:#FFFFFF;
	width:220px;
	height:250px;
	z-index:10000;
	-moz-box-shadow: 1px 1px 1px #000000;
	-webkit-box-shadow: 1px 1px 1px #000000;
	box-shadow: 1px 1px 1px #000000;
}

#bloc1{
	margin-left:10%;
	position:absolute;
	top:35%;
}

#bloc2{
	float:left;
	margin-left:40%;
	position:absolute;
	top:10%;
}

#bloc3{
	margin-left:70%;
	position:absolute;
	top:25%;
}

#bloc4{
	margin-left:10%;
	position:absolute;
	top:80%;
}

#bloc5{
	margin-left:40%;
	position:absolute;
	top:55%;
}

#bloc6{
	margin-left:70%;
	position:absolute;
	top:70%;
}

#bloc7{
	margin-left:10%;
	position:absolute;
	top:125%;
	
}

#bloc8{
	margin-left:40%;
	position:absolute;
	top:100%;
}

#bloc9{
	margin-left:70%;
	position:absolute;
	top:115%;
}

#bloc10{
	margin-left:10%;
	position:absolute;
	top:170%;
}

#bloc11{
	float:left;
	margin-left:40%;
	position:absolute;
	top:145%;
}

#bloc12{
	margin-left:70%;
	position:absolute;
	top:160%;
}


#trou{
	width:20px;
	height:20px;
	margin-left:10%;
	position:absolute;
	top:230%;
}
	

#image{
	width:220px;
	height:120px;
	position:relative;
	top:5px;
	background-color:#000000;
	z-index:10000;
}

#titlebloc{
	font-family:neutratitling;
	font-size:16px;
	color:#000000;
	width:150px;
	height:auto;
	padding-left:5px;
	position:absolute;
	top:130px;
	padding-bottom:2px;
	border-bottom: 4px solid #000;
	cursor:pointer;
	text-overflow:    ellipsis;
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
}

#titlebloc:hover{
	width:190px;
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
}

#date,#notespec,#realisateur{
	font-family:neutralight;
	font-size:14px;
	color:#000000;
	width:auto;
	height:auto;
	padding-left:5px;
	position:absolute;
	top:170px;
}

#notespec{
	top:190px;
}

#realisateur{
	top:210px;
	font-family:neutrabold;
}


/*
_______________cybernies___________________*/


#blocdiagonal,#blocdiagonalchambre{
	width:500px;
	height:auto;
	background-color:#FFF;
	position:absolute;
	top:53px;
	margin-left:12%;
	transform:skew(-10deg);
	-webkit-transform:skew(-10deg);
	-moz-transform:skew(-10deg);
	-o-transform:skew(-10deg);
	-ms-transform:skew(-10deg);
	z-index:50;
	-moz-box-shadow:inset -1px 0px 9px #000000;
	-webkit-box-shadow:inset -1px 0px 9px #000000;
	box-shadow:inset -1px 0px 9px #000000;
	overflow:hidden;
	opacity:1;
	left: -7px;
}

#blocdiagonalchambre{
	margin-left:45%;
}

#full-screen-background-image {
	z-index: -999;
	min-height: 100%;
	min-width: 1024px;
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	color: #000;
}

#infospec,#titrespec{
	font-family:neutrabook;
	font-size:14px;
	margin-top:25px;;
	color:#000000;
	text-shadow:0px 0px 0px #000000;
	transform:skew(0deg);
	-webkit-transform:skew(0deg); 
	-moz-transform:skew(0deg); 
	-o-transform:skew(0deg); 
	-ms-transform:skew(0deg);
	margin-left:35px;
	margin-right:35px;
}

#titrespec{
	font-family:neutratitling;
	font-size:22px;
	margin-top:25%;
	margin-left:35px;
	border-bottom:1px solid #000000;
	
}

.slach{
	font-family:neutralight;
	color:#000;
	font-size:22px;
	margin-left:3px;
}

.iconphoto,.iconvideo,.iconretour{
	width:auto;
	height:auto;
	transform:skew(10deg);
	-webkit-transform:skew(10deg); 
	-moz-transform:skew(10deg); 
	-o-transform:skew(10deg); 
	-ms-transform:skew(10deg);
	opacity:0.2;
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	font-family:neutralight;
	font-size:12px;
	color:#FFF;
	float:left;
	padding-left:10px;
}

.iconphoto:hover{
	opacity:1;
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	font-family:neutralight;
	font-size:12px;
	color:#000;
	text-justify:auto;
	cursor:pointer;
	}

	.iconvideo:hover{
		transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	font-family:neutralight;
	font-size:12px;
	color:#000;
	opacity:1;
	text-justify:auto;
	}
	
.iconretour{
		text-align:center;
	}

.iconretour:hover{
	opacity:1;
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	font-family:neutralight;
	font-size:12px;
	color:#000;
	text-align:center;
	}

#blocicon{
	margin-left:45px;
	width:auto;
	height:auto;
	margin-top:20px;
}

#fadimg,#fadvideo{
	width:700px;
	height:500px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top:120px;
	background-color:#000;
	-moz-box-shadow: 0px 0px 7px #999;
	-webkit-box-shadow: 0px 0px 7px #999;
	box-shadow: 0px 0px 7px #999;
	z-index:55;
	border:solid 2px #FFFFFF;
	display:none;
	opacity:1;
}

#close,#close1{
	height:20px;
	width:20px;
	position:absolute;
	top:-10px;
	right:-10px;
    border: 2px solid #FFF;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	background-color:#FFFFFF;

text-shadow: 0px 1px 1px #CCC;
font-family:neutralight;
font-size:15px;
color:#333333;
text-align:center;
z-index:10000;
-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	cursor:pointer;
}

#close:hover,#close1:hover{
	background-color:#000000;
	color:#FFFFFF;
	text-shadow: 0px 0px 0px #CCC;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
}
	
	
/*<____________________la compagnie_____________________>*/

#menuvertical,#menuvertical1{
	height:auto;
	width:185px;
	position:fixed;
	margin-top:20%;
	margin-left:80%;
	z-index:100000;
	border-left:5px solid #FFF;
	padding-left:3px;
	text-align:left;
}

#menuvertical1{
	width:20px;
	margin-right:100px;
}


#titlevertical1,#titlevertical2,#titlevertical3,#titlevertical4,#titlevertical5,#titlevertical6,#titlevertical7{
	height:auto;
	width:auto;
	font-family:neutralight;
	font-size:18px;
	letter-spacing:1px;
	color:#FFFFFF;
	float:left;
	text-shadow:1px 1px 0px #000000;
	opacity:1;
	cursor:pointer;
	-webkit-transition:All 0.2s ease;
	-moz-transition:All 0.2s ease;
	-o-transition:All 0.2s ease;
	border-bottom:2px solid #FFF;
	text-shadow: 1px 1px 0px #000;
}

	
#titlevertical1:hover,#titlevertical2:hover,#titlevertical3:hover,#titlevertical4:hover,#titlevertical5:hover,#titlevertical6:hover,#titlevertical7:hover{
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	border-bottom:10px solid #FFF;
	font-family:neutrabold;
}


#historique{
	width:auto;
	height:115%;
	position:absolute;
	left:40%;
	top:20%;
	display:block;
}


#blochistoire,#blocprincipe{
	background-color: #FFFFFF;
	width: 450px;
	height: auto;
	position: absolute;
	top: 40px;
	float: left;
	-moz-box-shadow: 1px 1px 0px #000;
	-webkit-box-shadow: 1px 1px 0px #000;
	box-shadow: 1px 1px 0px #000;
	padding-bottom: 10px;
}



#titre{
	font-family:neutratitling;
	font-size:36px;
	color:#FFF;
	position:relative;
	top:3px;
	text-shadow: 1px 1px 0px #000;
	width:445px;
	height:42px;
}


#principe,#principe1,#principe2,#principe3,#principe4,#principe5,#faits,#liens{
	width:auto;
	height:150%;
	position:absolute;
	left:40%;
	top:15%;
	display:none;
}

#principe1{
	top:10%;}
	
#principe2{
	top:17%;}
	
#principe3{
	top:13%;}
	
#principe4,,#principe5{
	top:22%;}

#faits{
	top:25%;
}

#liens{
	top:12%;
}


#citation,#citation1{
	font-family:neutratitling;
	font-size:16px;
	width:302px;
	height:157px;
	position:absolute;
	top:75px;
	left:-212px;
	color:#FFFFFF;
	letter-spacing:1px;
	z-index:1000000;
}


#citation1{
	position:absolute;
	top:280px; 
	left:-295px;
}


#infoblocompagnie{
	font-family:neutrabook;
	font-size:14px;
	margin-top:20px;
	color:#000000;
	text-shadow:0px 0px 0px #000000;
	transform:skew(0deg);
	-webkit-transform:skew(0deg); 
	-moz-transform:skew(0deg); 
	-o-transform:skew(0deg); 
	-ms-transform:skew(0deg);
	margin-left:35px;
	margin-right:35px;
}



/*<____________agenda_________________________>*/


/*<_____________pedagogie___________________>*/

#bigcontent{
	width:900px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}


#blocpedagogie1{
	background-color:#FFF;
	width:450px;
	height:auto;
	position:absolute;
	top:41px;
	-moz-box-shadow: 1px 1px 0px #000;
	-webkit-box-shadow: 1px 1px 0px #000;
	box-shadow: 1px 1px 0px #000;
	padding-bottom:10px;
}


#infoblocpedagogie{
	font-family:neutrabook;
	font-size:14px;
	margin-top:20px;
	color:#000000;
	text-shadow:0px 0px 0px #000000;
	transform:skew(0deg);
	-webkit-transform:skew(0deg); 
	-moz-transform:skew(0deg); 
	-o-transform:skew(0deg); 
	-ms-transform:skew(0deg);
	margin-left:35px;
	margin-right:35px;
	background-color:#FFF;
	
}


#pedagogie,#pedagogie2,#pedagogie3,#pedagogie4{
	width:auto;
	height:115%;
	display:block;
	position:absolute;
	top:100px;
	left:70px;
}


#pedagogie2{
	top:500px;
	left:370px;
}

#pedagogie3{
	top:720px;
	left:320px;
}

#pedagogie4{
	top:800px;
	left:0px;
}

#imgpresse,#imgpresse2,#imgpresse3,#imgpresse4,#imgpresse5,#imgpresse6,#imgpresse7{
	font-family:neutrabook;
	font-size:14px;
	position:absolute;
	top:100px;
	width:600px;
	height:auto;
	border:1px #000 solid;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	background-color:#000;
}


#imgpresse:hover,#imgpresse2:hover,#imgpresse3:hover,#imgpresse4:hover,#imgpresse5:hover,#imgpresse6:hover,#imgpresse7:hover{
	background-color:#FFF;
	position:absolute;
	top:100px;
	width:600px;
	height:auto;
	border:1px #FFF solid;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
#full-screen-background-image {
	background-color: #000;
}