@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;
}
#observ {
	position: absolute;
	top: 36%;
	left: 74%;
	width: 60px;
	height: 60px;
	background-color: #99ff6d;
	border: 0px solid #99ff6d;
	border-radius:50%;
}
#external{
	position: absolute;
	top: 30%;
	left: 38%;
	width: 60px;
	height: 60px;
	background-color: #e5ffb5;
	border: 0px solid #e5ffb5;
	border-radius:50%;
}
#gps{
	position: absolute;
	top: 15%;
	left: 55%;
	width: 60px;
	height: 60px;
	background-color: #fdffaa;
	border: 0px solid #fdffaa;
	border-radius:5%;
}


.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%;
}
#batiment{
	top: 40%;
	left: 50%;
}


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

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



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

}

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


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

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

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



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

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

}

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

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

}

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

#nicolas {
	top: 45%;
	left: 65%;

}

/*********************************/
/**************HOVER**************/
/*********************************/
.back{
	position: absolute;
	pointer-events: none;
	width: 33.3%;
	height: 50%;
	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("constellation.jpg");
	top: 0%;
	left: 0%;
}

#niooo{
	background-image: url("mapNL4.jpg");
	top: 0;
	left: 33.3%;
	
}
#boutin{
	background-image: url("MB_MAP_03.jpg");
	top: 0;
	left: 66.6%;
}
#dude{
	background-image: url("constellation.jpg");
	top:50%;
	left: 0%;
}

#ohanian{
	background-image: url("MAP-mo4.jpg");
	top: 50%;
	left: 33.3%;
}
#gem{
	background-image: url("constellation.jpg");
	top: 50%;
	left: 66.6%;
}

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


.zone{
	position: absolute;
	width: 33.3%;
	height: 50%;
}
#one{
	top: 0%;
	left: 0%;
}
#two{
	top: 0%;
	left: 33.3%;
}
#three{
	top: 0%;
	left: 66.6%;
}
#four{
	top: 50%;
	left: 0%;
}
#five{
	top: 50%;
	left: 33.3%;
}
#six{
	top: 50%;
	left: 66.6%;
}


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

}