@font-face {
	font-family: "LL Gravur Cond Regular Web";
	src: url("../fonts/GravurLLWeb-CondRegular.eot");
	src: url("../fonts/GravurLLWeb-CondRegular.woff2") format("woff2"), url("../fonts/GravurLLWeb-CondRegular.woff") format("woff");
}

html,
body {
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: none;
	color: #fff;
}

html,
body,
.container {
	margin: 0;
	padding: 0;
	position: absolute;
}

body {
	background: #000;
	overflow: hidden;
	position: fixed;
	font-family: 'LL Gravur Cond Regular Web', sans-serif;
	font-weight: normal;
}

p {
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 1em 0 0;
}

.container {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow: hidden;
}

#container {
	font-size:1vh;
}

#wrapper_html {
	pointer-events: none;
	user-select: none;
}

	#wrapper_html .btn_text,
	#wrapper_html .btn_icon,
	#wrapper_html a,
	#switch {
		pointer-events: all;
	}

	#wrapper_html:-webkit-full-screen {
		width: 100%;
		height: 100%;
	}

	#text_globeLegend {
		background: rgba(0,86,89,0.5);
		position: absolute;
		left: 2em;
		top: 14em;
		width: 25em;
		padding: 1.5em 1.5em 1em;
		box-sizing: border-box;
	}

		#text_globeLegend p {
			margin: 0em 0em 0.5em;
		}

	.btn_icon {
		width:3em;
		position: absolute;
		opacity: 0.5;
		transition: opacity 0.2s;
		cursor: pointer;
	}

		.nohover .btn_icon,
		.btn_icon:hover {
			opacity: 1.0;
		}

	#globe_overlay,
	#airport_overlay,
	#intro_overlay,
	#credit_overlay {
		display: none;
	}


#switch,
#switch * {
	position:absolute;
}
	#switch #switch_button {
		left: 0em;
		transition: left 0.2s;
	}
		#switch.right #switch_button {
			left: 2em;
		}

	#switch .text_left {
		opacity: 1.0;
		transition: opacity 0.2s;
	}
	#switch .text_right {
		opacity: 0.5;
		transition: opacity 0.2s;
	}
	#switch.right .text_left {
		opacity: 0.5;
	}
	#switch.right .text_right {
		opacity: 1.0;
	}









.btn_text {
	background: rgba(255,255,255,0);
	border-radius: 10em;
	border: 0.06em solid #fff;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	padding: 0.45em 1em 0.3em;
	pointer-events: all;
	position: absolute;
	text-transform: uppercase;
	opacity: 0.5;
	transition: opacity 0.2s;
}

	.nohover .btn_text, .btn_text:hover {
		opacity: 1.0;
	}


#btn_play {
	opacity: 1.0;
	border-width: 0.03em;
	font-size: 2em;
	transition: color 0.2s, background 0.2s;
}
	#btn_play:hover {
		background: rgba(255,255,255,255);
		color: #000;
	}

#btn_credits {
	border-color: #c1b9ae;
	bottom: 1em;
	color: #c1b9ae;
	right: 1em;
}

#btn_close_credits {
	border-color: #c1b9ae;
	bottom: 5em;
	color: #c1b9ae;
	left: 48em;
}

	#credits_overlay h2 {
		font-size: 2em;
		text-align: center;
		margin: 1.5em 0em 0.2em;
	}

	#credits_overlay p {
		font-size: 1.5em;
		margin: 0em 0em 0.2em;
	}

	#credits_overlay span {
		display: inline-block;
		text-align: right;
		width: 49%;
		margin-right: 2%;
		font-weight: bold;
	}

	#credits_overlay a {
		color: #fff;
		pointer-events: all;
	}

#turn_message {
	display: none;
}

	#turn_message .container {
		font-size:4vw;
		line-height: 1.2em;
		color:#888 !important;
		background:#000;
	}

@media (max-aspect-ratio:4/5) {
	#turn_message {
		display: block;
	}
}