@import url('https://fonts.googleapis.com/css?family=Unica+One');

Access-Control-Allow-Origin: http://eoplug.com/site17/

@font-face {
 font-family: 'UnicaOneRegular';
  src: url(www/eostation.xyz/playground/asset/UnicaOne-Regular.ttf);
}

@import url('https://fonts.cdnfonts.com/css/comfortaa');
   




/************************ FONTS**************** ********/
/************************LAYOUT************************/


/************************ FONTS**************** ********/
/*h1*/
h1{
	position:absolute;
	font-size:100px;
	font-family:'Unica One', cursive;
	color:rgb(87, 66, 66);
	margin:auto;padding-top:20px;
	text-align:center;
	line-height:98%;
	font-weight:lighter;
	letter-spacing:-3px;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
h2{
	position:absolute;
	font-size:40px;
	font-family:'Unica One', cursive;
	color:rgb(53, 42, 42);
	padding:5px;
	text-align:center;
	line-height:98%;
	font-weight:lighter;
	letter-spacing:-3px;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	z-index:70;
}
/*h3 menu*/
h3{
	position:relative;
	font-size:30px;
	font-family:'Unica One', cursive;
	color:rgb(40, 40, 40);
	margin:auto;padding:5px 10px;
	text-align:center;
	line-height:98%;
	font-weight:lighter;
	letter-spacing:-1px;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
	z-index:70;
	}
/*h4 submenu*/
h4{
	position:relative;
	font-size:30px;
	font-family:'Unica One', cursive;
	color:rgb(40, 40, 40);
	margin:auto;padding:5px 10px;
	text-align:center;
	line-height:98%;
	font-weight:lighter;
	letter-spacing:-1px;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;

	}

h5{	
	position:relative;
	font-size:20px;
	font-family:'Unica One', cursive;
	color:rgb(88, 86, 86);
	margin:auto;padding:5px;
	text-align:center;
	line-height:150%;
	font-weight:lighter;
	letter-spacing:-1px;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	}
h6{	
		position:relative;
		font-size:20px;
		font-family:'Unica One', cursive;
		color:rgb(255, 255, 255);
		margin:auto;padding:5px;
		text-align:center;
		line-height:150%;
		font-weight:lighter;
		letter-spacing:-1px;
		-webkit-transition:all .3s ease-in-out;
		transition:all .3s ease-in-out;
		}

p{
		position:relative;
		font-size:16px;
		font-family: 'Comfortaa', sans-serif;
		color:rgb(32, 32, 32);
		margin:auto;padding:5px;
		text-align:left;
		line-height:140%;
		font-weight:lighter;
		letter-spacing:0px;
		-webkit-transition:all .3s ease-in-out;
		transition:all .3s ease-in-out;
	}
p2{
		position:relative;
		font-size:16px;
		font-family: 'Comfortaa', sans-serif;
		color:rgb(255, 255, 255);
		margin:auto;padding:5px;
		text-align:left;
		line-height:98%;
		font-weight:lighter;
		letter-spacing:0px;
		-webkit-transition:all .3s ease-in-out;
		transition:all .3s ease-in-out;
	}	

/************************LAYOUT************************/
/*html { overflow: hidden; } body { overflow: hidden; }*/

#pages{}

.page{
	width: 100vw;
	flex-wrap: wrap;
}
div {
    display: inherit;
}
* {
	margin: 0;
	padding: 0;
	max-width: inherit;
}

.mainpanel{
	display: block;
	position: relative;
    float: left;
    width: 90%;
    height: auto;
  }

  
  .imgbox {
	display: flex; 
    position: absolute;
	max-width:100%;
	z-index: 10;
  }

 
  .cloudA {
	display: flex; 
    position: absolute;
	width:60vw;
	top:50vh;
	left:-20vw;
	z-index: 11;
  }
  .cloudB {
	display: flex; 
    position: absolute;
	top:50vh;
	left:50vw;
	width:60vw;
	z-index: 11;
  }
  .trailer{
    position: relative;
    right:0;
    top: 20vh;
    width: 100%;
    height: auto;
    z-index: 14;
  }
  .txt{
	position: relative;
    float: right;
   top: -20vh;
   height: 340px;
    z-index: 14;
	padding: 30px;
  }
  .loading{
    position: relative;
     top: 20vh; 
    height: 340px;
    z-index: 14;
    padding: 30px;
    margin: auto;
    display: flex
;
  }

  /************************ LOGO ************************/
.navwrapper{
	padding:10px;
}





.logo{
}

#logoA{	width:50px;
	height:auto;

}
#logoB{	width:50px;
	height:auto;
	position:relative;
	left: -50px;
	 opacity: 0;

	}
#logoA:hover #logoB {
	-webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
	opacity:0;
	display:flex;
	position:absolute;
}	

#logoB:hover 	{ opacity:1;	}

#logoA #logoB {
	-webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
	transform: scale(1);
	opacity:0;
  }


.picto{
padding:10px;
}h

.btn{
	position:absolute;
	bottom: 10%;
	}

    /************************ UI ************************/
	.uiFrame{
		width: 15%;
		height:auto;
		position: absolute;
		top:-50px;
		left:100px;
		pointer-events: none;
		}
	.uiFrame2{
		height: auto;
		position: absolute;
		pointer-events: none;
		width: 30%;
		right: 40%;
		top: 115%;
			}
	.uiFrame3{
			position: relative;
			pointer-events: none;
			height:1000px;
				}	
	.uiFrame4{
		position: absolute;
		pointer-events: none;
		height: 40%;
		top: 260px;
		left: 16%;
				}						
	.uiFrame5{
margin:50px;
			}	
			
	.uiSelec{
		flex: 2 1 auto;
		height: 55%;
		object-fit: fill;
			position: absolute;
			opacity:0;
			top: -20px;

			}
	.uiSelec1{	 left: -43px;}
	.uiSelec2{	left: 246px; }
	.uiSelec3{	 left: 524px;}
	.uiSelec4{	left: 802px; }
	.uiSelec5{	left: 1078px; }
	.uiSelec6{	 left: -43px;}
	.uiSelec7{	left: 246px; }
	.uiSelec8{	 left: 524px;}
	.uiSelec9{	left: 802px; }
	.uiSelec10{	left: 1078px; }

	.grid {
			display:flex;
			width: 55%;
			height:720px;
			gap: 2px;
			margin: 0 14%;
			position:absolute;
		}
	.grid2{
			display:flex;
			width: 55%;
			height:720px;
			gap: 2px;
			margin: 0 20%;
			position: relative;
			top: 400px;
		}				

	.portraits{
				flex: 2 1 auto;
				height: 50%;
				object-fit: fill;
					}

	
	.hoverpic:hover{
		-webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
		transform: scale(1.1);
		opacity:1;
	}




.chara_obol{
	height: 50%;
    right: 8px;
    top: 150px;
    position: absolute;
}
.bulle{
	height: 100px;
    right: 400px;
	top: 100px;
    position: absolute;
}
.gauge{
	height: 200px;
    right: 700px;
    bottom: 650px;
    position: absolute;
}
 /************************ menu labels ************************/	
.box{
	margin: -8px 50px;
    padding: 0px;
    position: relative;
    width: 60%;
    max-width:120px;
    min-height: 35px;
	border-radius: 4px 20px 20px 4px;
    max-width: 120px;
    min-height: 35px;
    background-color: rgb(180, 180, 180);
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
    z-index: 15;}
.box:before{
	content:"";position:absolute;
	top:0px;left:-19px;
	width:0;height:0;
	border-bottom:20px solid transparent;
	border-top:20px solid transparent;
	border-right:20px solid  rgb(180, 180, 180);
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
    z-index: 15;}

.hover:hover .box{background-color:rgb(146, 137, 137);transform:translateX(-20px);}
.hover:hover .box:before{border-right:20px solid rgb(146, 137, 137);}

  /************************ LANDMARK************************/
  .landmark {
	display: flex; 
    position: relative;
	padding:2%;
	top: 14vh;
	max-width:24px;
	height: auto;
	z-index: 12;
  }
 	.landmarkA {left: 44vw;}
	.landmarkB {left: 42vw;}
	.landmarkC {left: 38vw;}	  
	.landmarkD {left: 36vw;}	  
	.landmarkE {left: 34vw;}	

.landmark:hover .hoverLM {
	-webkit-transition:all .5s ease-in-out; transition:all .2s ease-in-out;
	opacity:1;
	display:block;
	position:absolute;
}
  
  .landmark .hoverLM {
	-webkit-transition:all .5s ease-in-out; transition:all .2s ease-in-out;
	opacity:0;
	display:none;
  }
  


	  @media screen and (min-width: 400px) and (max-width: 800px) {
		.mainpanel{width: 120%; }
		.landmark {max-width:16px; top:1vh; }
		.landmarkA {left: 54vw;}
		.landmarkB {left: 52vw;}
		.landmarkC {left: 48vw;}	  
		.landmarkD {left: 46vw;}	  
		.landmarkE {left: 44vw;}
		}
		@media screen and (min-width: 800px) and (max-width: 1200px) {
			.mainpanel{width: 110%; }
			.landmark {max-width:18px; top:5vh; }
			.landmarkA {left: 50vw;}
			.landmarkB {left: 48vw;}
			.landmarkC {left: 46vw;}	  
			.landmarkD {left: 44vw;}	  
			.landmarkE {left: 42vw;}
			}

		@media screen and (min-width: 1200px) and (max-width: 1800px) {
			.mainpanel{width: 100%; }
			.landmark {max-width:20px; top:10vh; }
			.landmarkA {left: 48vw;}
			.landmarkB {left: 46vw;}
			.landmarkC {left: 44vw;}	  
			.landmarkD {left: 42vw;}	  
			.landmarkE {left: 40vw;}
			}			

/************************ CAPTION************************/
.labels {
	position:absolute;
	height: auto;
	z-index: 13;
	top:0;	
}
.label {
	display:block;
	height: auto;
	position: absolute;
	z-index: 14;

}

.label2 {
}

.hoverC2 {
	position:absolute;
} 
.label2 .hoverC2 {
	display:none;
}

.label:hover .hoverC {
	-webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
	transform: scale(1);
	opacity:1;
	display:flex;
	position:absolute;
}
  
  .label .hoverC {
	-webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
	transform: scale(1);
	opacity:0;

  }

  
  .invisible{opacity:0;}
.hover:hover .invisible{opacity:1;}

.label_Melusine {left: 48vw;	top: 66vh;}
.label_Lobby {left: 20vw;	top: 56vh;}
.label_Lounge {left: 48vw;	top: 58vh;}
.label_Manager {left: 20vw;	top: 46vh;}
.label_Skipper{left: 40vw;	top: 48vh;}
.label_Cafeteria {left: 48vw;	top: 42vh;}
.label_Kitchen {left: 40vw;	top: 38vh;}
.label_Guestoom1 {left: 10vw;	top: 44vh;}
.label_Guestoom2 {left: 10vw;	top: 38vh;}
.label_Guestoom3 {left: 48vw;	top: 34vh;}
.label_Guestoom4 {left: 20vw;	top:25vh;}
.label_Outhouse {left: 25vw;	top: 14vh;}
.label_Generator {left: 70vw;	top: 12vh;}


@media screen and (min-width: 400px) and (max-width: 1800px) {
	.label {
		display:none;
	
	}
}


  body {background-color: #0f1422;}
/************************ HEADER************************/
.header {
	max-width: 100%;
	max-height: 100vh;
	margin: auto;
	position:fixed;
}
.titleclass{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	position:relative;
	width:80%;height:90%;
	margin:auto;padding:0px;
	}

.mainIcons{
	display:-webkit-flex;
	display:flex;
	position:relative;	
	bottom:50px;
	margin: 70px auto 0;
	width:240px;
	padding:0px;
	z-index:70;
	cursor:default;
	flex-wrap:wrap;
	}	


ul {
	list-style-type: none;
	}
.mainMenu{
	display:-webkit-flex;
	display:flex;
	justify-content: space-around;
	position:relative; 
	width: 100%;
	height: 50px;
	margin:auto;
	padding:20px;
	z-index:13;area
	cursor:default;
	}



/************************ KEYFRAME ************************/
/*fade*/
.fadeIn{animation:fadeIn 4s ease-in-out forwards;}
@keyframes fadeIn{
	0%{visibility:hidden;opacity:0;}
	1%{visibility:visible;opacity:0;}
	100%{opacity:1;}
}
@-webkit-keyframes fadeIn{
	0%{visibility:hidden;opacity:0;}
	1%{visibility:visible;opacity:0;}
	100%{opacity:1;}
}
.fadeOut{animation:fadeOut 4s ease-in-out forwards;}
@keyframes fadeOut{
	0%{opacity:1;}
	99%{visibility:visible;opacity:0;}
	100%{visibility:hidden;opacity:0;}
}
@-webkit-keyframes fadeOut{
	0%{opacity:1;}
	99%{visibility:visible;opacity:0;}
	100%{visibility:hidden;opacity:0;}
}

/* slide*/ 
.slideIn{animation:slideIn .5s ease-out forwards;}
@keyframes slideIn{
		0%{transform:translate(0%,+4000px);}
		100%{transform:translate(0px,0px);}
}
@-webkit-keyframes slideIn{
		0%{transform:translate(0%,+4000px);}
		100%{transform:translate(0px,0px);}
}
.slideOut{animation:slideOut .5s ease-out forwards;}
@keyframes slideOut{
		0%{transform:translate(0%,0%);}
		100%{transform:translate(0%,-2000px);}
}
@-webkit-keyframes slideOut{
		0%{transform:translate(0%,0%);}
		100%{transform:translate(0%,-2000px);}

}