@charset "UTF-8";
/* CSS Document */
html { 
  margin-left:0;
  margin-right:0;
  padding:0;
}
body {
	padding:0;
	margin:0;
	width:100% auto;	
}
@font-face {
	src:url(../font/multicolore/Multicolore.otf);
	font-family: 'multicolore';
}
@font-face {
	src:url(../font/helveticaneue/helveticaneuelight.ttf);
	font-family: 'helveticaneuelight';
}
h1 {
	font-family:"helveticaneuelight", "sans serif";
	font-size:1vw;	
}
a:link 
{ 
text-decoration:none; 
} 
a:hover span{
	display:block;
	font-family:"multicolore", sans serif;
	font-weight:lighter;
	z-index:99;
	position:relative;
	font-size:1.7vw;
	color:#6D071A;
	}
span {
	display:none;
	text-decoration:none;	
}
.div1bis {
	position:absolute;
	width:20%;
	z-index:100;
	margin-top:10%;
	margin-left:19%;
	text-align:center;
}
.div1 {
	margin-top:5%;
	margin-left:4%;
	width:58%;
	z-index:-1;
	position:absolute;
}
.image1 {
	width:100%;
}
	.monelle:hover {
		opacity:0;
	}
	.monelle:hover ~ .div1bis {
		opacity:1;
	}
.div2 {
	margin-top:2%;
	margin-left:67%;
	width:26%;
	z-index:-1;
	position:absolute;
}
.image2 {
	width:100%;
}
.div3bis {
	position:absolute;
	width:5%;
	z-index:100;
	margin-top:40%;
	margin-left:20%;
	text-align:center;
}
.div3 {
	margin-top:0%;
	margin-left:0%;
	width:50%;
	z-index:-1;
	position:absolute;
}
.image3 {
	width:100%;
}
.div4 {
	margin-top:0%;
	margin-left:57%;
	width:50%;
	z-index:-1;
	position:absolute;
}
.image4 {
	width:100%;
}
.div5 {
	margin-top:41.5%;
	margin-left:57%;
	width:50%;
	z-index:-1;
	position:absolute;
}
.image5 {
	width:100%;
}
	.vingthuit:hover {
		opacity:0;
	}
	.vingthuit:hover ~ .div3bis {
		opacity:1;
	}
.div6bis {
	position:absolute;
	width:20%;
	z-index:100;
	margin-top:25%;
	margin-left:65%;
	text-align:center;
}
.div6 {
	margin-top:52%;
	margin-left:-80%;
	width:70%;
	z-index:1;
	position:absolute;
}
.image6 {
	width:100%;
}
.div7 {
	margin-top:-33%;
	margin-left:-10%;
	width:115%;
	z-index:-1;
	position:absolute;
}
.image7 {
	width:100%;
}
	.blackout:hover {
		opacity:0;
	}
	.blackout:hover ~ .div6bis {
		opacity:1;
	}
	
.div8bis {
	position:absolute;
	width:20%;
	z-index:100;
	margin-top:54%;
	margin-left:75%;
	text-align:center;
}
.div8 {
	margin-top:-44%;
	margin-left:-15%;
	width:122%;
	z-index:1;
	position:absolute;
}
.image8 {
	width:100%;
}
.div9 {
	margin-top:53%;
	margin-left:49%;
	width:60%;
	z-index:-1;
	position:absolute;
}
.image9 {
	width:100%;
}
	.poem:hover {
		opacity:0;
	}
	.poem:hover ~ .div6bis {
		opacity:1;
	}	
.div10bis {
	margin-top:65%;
	margin-left:25%;
	width:20%;
	z-index:1;
	position:absolute;
	text-align:center;
}	
.div10 {
	margin-top:60%;
	margin-left:5%;
	width:67%;
	z-index:-1;
	padding-bottom:5%;
	position:absolute;
}
.image10 {
	width:100%;
}
	.div10:hover {
		opacity:0;
	}
.monelle {
	width:50%;
	height:20%;
	margin-left:0%;
	padding:3%;
	display:block;
	position:absolute;
}
	.monelle:hover {
		opacity:0;
	}
.vingthuit {
	width:30%;
	height:30%;
	margin-top:30%;
	margin-left:5%;
	padding:0%;
	display:block;
	position:absolute;
}
	.vingthuit:hover {
		opacity:0;
	}
.blackout {
	width:30%;
	height:40%;
	margin-top:2%;
	margin-left:70%;
	padding:0%;
	display:block;
	position:absolute;
}
	.vingthuit:hover {
		opacity:0;
	}
.poem {
	width:20%;
	height:40%;
	margin-top:50%;
	margin-left:75%;
	padding:0%;
	display:block;
	position:absolute;
}
	.poem:hover {
		opacity:0;
	}
.div1bis:hover ~ .monelle {
	opacity:0;
}
.div3bis:hover ~ .vingthuit {
	opacity:0;
}
.div6bis:hover ~ .blackout {
	opacity:0;
}	
.div8bis:hover ~ .poem {
	opacity:0;
}
.div10bis:hover ~ .div10 {
	opacity:0;
}
.back {
	margin-top:2%;
	margin-left:2%;
	font-family:"helveticaneuelight", "sans serif";
	font-size:1.5vw;
}