@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{
	/*background: #fff;*/s
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body{
	letter-spacing: 1.1px;
}

/***************************/
/*********MAP*ICON**********/
/***************************/

.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: 1px;
	color: #fff;
}
.element .label:hover{
	cursor: default;
}

.element .label span {
	background-color: #888;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px 5px;
	border-radius: 3px;
}
.label.coords {
	font-family: 'Bebas';
	margin-top:25%;
	}
.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;
}

.element .safe {
	position: absolute;
	top: -30px;
	right: -30px;
	width: 60px;
	height: 60px;
}
.safe.legend{
	position: absolute;
	top: 24px;
	left: -220px;
	width: 500px;
	font-size: 0.8em;
	text-align: center;
	font-family: 'CodeProDemoRegular';
	text-transform:uppercase;
	color: #fff;
}
.safe .legend:hover{
	cursor: default;
}

.safe.legend span{
	background-color: #888;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px 5px;
	border-radius: 3px;
}
#sodium {
	position: absolute;
	top: 26%;
	left: 74%;
	width: 60px;
	height: 60px;
	background-color: coral;
	border: 0px solid coral;
	border-radius:50%;
}
#technic{
	position: absolute;
	top: 17%;
	left: 49%;
	width: 60px;
	height: 60px;
	background-color: #e5ffb5;
	border: 0px solid #e5ffb5;
	border-radius:50%;
}
#light{
	position: absolute;
	top: 47%;
	left: 23%;
	width: 60px;
	height: 60px;
	background-color: #b2f7ff;
	border: 0px solid #b2f7ff;
	border-radius:5%;
}
#cale{
	position: absolute;
	top: 55%;
	left: 50%;
	width: 60px;
	height: 60px;
	background-color: #ffe493;
	border: 0px solid #ffe493;
	border-radius:5%;
}

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



.element .icon.circ{
	background-position: -40px 0px;
}
.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%;
}



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


/***************************/
/********AVENTURIERS********/
/***************************/

#melik {
	top: 42%;
	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: 52%;
}



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

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

}

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

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

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

#sarah {
	top: 51%;
	left: 44%;

}
.element .icon.nl {
	background-position: -320px 0px;
}

#nicolas {
	top: 35%;
	left: 48%;

}
.element .icon.gm {
	background-position: -360px 0px;
}

#garance {
	top: 35%;
	right: 45%;
	
}
/*********************************/
/**************HOVER**************/
/*********************************/
.back{
	position: absolute;
	pointer-events: none;
	opacity:0;
	background-size: cover;
	-webkit-transition: all 1s ease;
	-moz-transition: 	all 1s ease;
	-o-transition: 		all 1s ease;
	transition: 		all 1s ease;
}

#vaan{
	background-image: url("mapVS2.jpg");
	width: 25%;
	height: 50%;
	top: 0%;
	left: 0%;
}

#niooo{
	background-image: url("mapNL2.jpg");
	width: 25%;
	height: 50%;
	top: 0%;
	left: 25%;
}
#boutin{
	background-image: url("MB_MAP_02_1800X1345.jpg");
	width: 25%;
	height: 50%;
	top: 0%;
	left: 50%;
}
#dude{
	background-image: url("Glitch salles des machines.jpg");
	width: 25%;
	height: 50%;
	top: 0%;
	left: 75%;
}
#gagarance{
	background-image: url("garance.jpg");
	width: 25%;
	height: 50%;
	top: 50%;
	left: 0%;
}
#sasarah{
	background-image: url("sarah.jpg");
	width: 25%;
	height: 50%;
	top: 50%;
	left: 25%;
}
#ohanian{
	background-image: url("MAP-mo2b.jpg");
	width: 25%;
	height: 50%;
	top: 50%;
	left: 50%;
}
#gem{
	background-image: url("map_JB_02.jpg");
	width: 25%;
	height: 50%;
	top: 50%;
	left: 75%;
}

/*********************************/
/***********BACKGROUND************/
/*********************************/


.zone{
	position: absolute;
	width: 25%;
	height: 50%;
}
#one{
	top: 0%;
	left: 0%;
}
#two{
	top:0%;
	left:25%;
}
#three{
	top:0%;
	left:50%;
}
#four{
	top:0%;
	left:75%;
}
#five{
	top:50%;
	left:0%;
}
#six{
	top:50%;
	left:25%;
}
#seven{
	top:50%;
	left:50%;
}
#eight{
	top:50%;
	left:75%;
}

#one:hover + #vaan,
#two:hover + #niooo,
#three:hover+ #boutin,
#four:hover+ #dude,
#five:hover+ #gagarance,
#six:hover+ #sasarah,
#seven:hover+ #ohanian,
#eight:hover+ #gem
{
	opacity: 1;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;

}