@charset "UTF-8";


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

}

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


html{
	margin: 0;.
	padding: 0;
	background: #fff;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body{
	min-height: 100%;
	min-width: 100%;
	margin: 0;

}

.element {
	position: absolute;
	width: 0px;
	height: 0px;

}
.element .label {
	position: absolute;
	top: 20px;
	right: -250px;
	width: 500px;
	font-family: 'CodeProDemoRegular';
	font-size: 0.8em;
	text-align: center;
	text-transform:uppercase;
	letter-spacing: 1 px;
	color: #fff;

}
.element .label:hover{
	cursor: default;
}
.label.coords{
	font-family: 'Bebas';
	margin-top:25%;
}

.element .label span {
	background-color: #888;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px 5px;
	border-radius: 3px;
}
.element .icon {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	background:url("sprite4map3.png") 0 0 no-repeat;
	
}
.element .icon:hover {
	box-shadow: 0 0 7px #888888;
}


/***********MAP*ICON********/
/***************************/
.element .icon.intrude{
	background-position: 0px 0px;
	
}
.element .icon.intrude:hover{
	background-position: 0px -40px;
	box-shadow: none;
}
#intrus1{
	top: 40%;
	left: 20%;
}
#intrus2{
	top: 80%;
	right: 20%;
}



.element .icon.circ{
	background-position: -40px 0px;
	box-shadow: none;
}
.element .icon.circ:hover{
	background-position: -40px -40px;
	box-shadow: none;

}
#onze {
	top: 40%;
	left: 40%;

}
#douze {
	top: 40%;
	right:40%;
}
#machine{
	top: 40%;
	left: 50%;
}
#sodium {
	position: absolute;
	top: 26%;
	left: 74%;
	width: 0px;
	height: 0px;

}
#charge{
	position: absolute;
	top: 62%;
	left: 75%;
	width: 0px;
	height: 0px
}
#vivre{
	position: absolute;
	top: 26%;
	left: 30%;
	width: 0px;
	height: 0px;

}
/********AVENtURIERS********/
/***************************/


.element .icon.mo {
	background-position: -80px 0px;
}


#melik {
	top: 40%;
	left: 43%;

}

.element .icon.jb {
	background-position: -120px 0px;
}


#julien {
	top: 35%;
	left: 44%;

}
.element .icon.ele {
	background-position: -160px 0px;
}

#edouard {
	top: 35%;
	left: 49%;
}



.element .icon.mb {
	background-position: -200px 0px;
}

#maxime {
	top: 51%;
	left: 46%;

}

.element .icon.vs {
	background-position: -240px 0px;
}


#vahan {
	top: 51%;
	right: 49%;

}
.element .icon.sv {
	background-position: -280px 0px;
}


#sarah {
	top: 57%;
	right: 47%;
}
.element .icon.nl {
	background-position: -320px 0px;
}


#nicolas {
	top: 51%;
	right: 45%;
}

/********BACKGROUND*******/
/***************************/
.zone + .back{
display:block;
}
.back{
	position: absolute;
	pointer-events: none;
	opacity:0;
	background-size: cover;
	overflow-y: hidden;
	background-repeat: no-repeat no-repeat;
	

	-webkit-transition: all 1s ease;
	-moz-transition: 	all 1s ease;
	-o-transition: 		all 1s ease;
	transition: 		all 1s ease;
}
#vaan{
	background-image:url("map(VSdimension1800).jpg");
	width: 33.3%;
	height: 40%;
	top: 60%;
	right: 0%;
}

#niooo{
	background-image:url("mapNL.jpg");
	width: 33.3%;
	height: 40%;
	top: 0%;
	left: 66.6%;

}
#boutin{
	background-image:url("MB_MAP_No-icons-01.jpg");
	width:100%;
	height:20%;
	top:40%;
	left: 0%;
}

#dude{
	background-image:url("Deck.jpg");
	width: 33.3%;
	height: 40%;
	bottom: 0%;
	right: 33.3%;

}
#sarahh{
	background-image:url("map sarah.jpg");
	width: 33.3%;
	height: 40%;
	top: 0%;
	left: 0%;	
}
#ohanian{
	background-image:url("MAP-mo2.jpg");
	width: 33.3%;
	height: 40%;
	top: 0%;
	left: 33.3%;
}
#gem{
	background-image:url("map_JB_01.jpg");
	width: 33.3%;
	height: 40%;
	top: 60%;
	left: 0%;
}
.zone{
	position: absolute;
	width: 33.3%;
	height: 40%;

}

#jaune{
	top: 0%;
	left: 0%;	
}

#rouge{
	top: 0%;
	left: 33.3%;
}


#vert{
	top: 0%;
	left: 66.6%;
}


#bleu{
	top: 60%;
	right: 0%;
}

#brun{
	top: 60%;
	right: 33.3%;
}

#gris{
	top: 60%;
	left: 0%;
}
#mauve{
	position: absolute;
	width: 100%;
	height: 20%;

	top:40%;
	left: 0%;
}

#vert:hover + #niooo,
#mauve:hover + #boutin,
#brun:hover + #dude,
#jaune:hover + #sarahh,
#rouge:hover + #ohanian,
#gris:hover + #gem
{
	opacity:1;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;

}
#brun:hover + #dude{
	top: auto;
	left: auto;
	right: 0%;
}
#bleu:hover + #vaan{
	opacity:1;
	width: 100%;
	height: 100%;
	top: 0%;
	right: 0%;
}