:root {

	--v_ratio: calc( 1vw / 1vh );
	--v_landscape: calc( min( 1.0, max( 0.0 , ( var( --v_ratio ) - 0.5 )/( 1.5 ))));
	--v_portrait: calc( 1.0 - var( --v_landscape ));
	--unit: 3vmin; /*text size*/
	
	--f_height: calc( 2 * var( --unit ));
	--f_width: calc( 2 * var( --unit ));
	--f_radius: calc( min( var( --f_width ), var( --f_height )));
	--f_fullwidth: calc( var( --f_width ) + var( --f_radius ));
	--f_fullheight: calc( var( --f_height ) + var( --f_radius ));
	--f_button_width: calc( 7 * var( --unit ));
	
	--content_width: calc( 100vw - 2 * var( --f_fullwidth ));
	--box_gap: calc( 2 * var( --unit ));
	--box_header_height: calc( 1.5 * var( --unit ));
	--box_radius: calc( 0.25 * var( --f_radius ));

	--grey: rgb( 75, 75, 75 );
	--grey_a: rgba( 75, 75, 75, 0.5 );
	--green_air: rgb( 214, 236, 226 );
	--green_air_a: rgba( 214, 236, 226, 0.5 );
	--green_light: rgb( 140, 195, 175 );
	--green_light_a: rgba( 140, 195, 175, 0.5 );
	--green_normal: rgb( 61, 134, 108 );
	--green_normal_a: rgba( 61, 134, 108, 0.5 );
	--green_dark: rgb( 23, 60, 29 );
	--green_dark_a: rgb( 23, 60, 29, 0.5 );

	--f_color: var( --grey );
	--f_color_a: var( --grey_a );


}

@keyframes slide {

	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% } 
}

body {

	margin: 0;
	background-color: var( --f_color );
	background-image: url( "desktop_v02b_bg01_pur-01.svg" );
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	/*animation-duration: 200s;
	background-size: 200% 200%;
	animation-name: slide;
	animation-timing-function: linear;
	animation-iteration-count: infinite;*/
}

/*portrait*/
@media( max-aspect-ratio: 2/3 ) {

	:root {

		--unit: 4vmin;
		--f_height: calc( 4 * var( --unit ));
		--f_width: calc( 1 * var( --unit ));
	}
}

/*ultra-landscape*/
@media( min-aspect-ratio: 2/1 ) {

	:root {

		--unit: 5vmin;
		--f_button_width: calc( 12 * var( --unit ));
		--f_height: calc( 1.2 * var( --unit ));
		--f_width: calc( 1.2 * var( --unit ));
	}
}

.header {

	width: 100vw;
	height: var( --f_fullheight );
	position: relative;
}

.midsection {

	min-height: calc( 100vh - 2 * var( --f_fullheight ));
	width: 100vw;
	position: relative;
}

.content {

	width: var( --content_width );
	min-height: calc( 100vh - 2 * var( --f_fullheight ));
	margin-left: var( --f_fullwidth );
	position: relative;
}

.f_base {

	background-color: var( --f_color_a );
	color: white;
}

.f_corner {

	position: absolute;
	width: var( --f_fullwidth );
	height: var( --f_fullheight );
	z-index: -1;
}

.cutout {

	position: absolute;
	top: calc( -1 * var( --f_radius ));
	left: var( --f_width );
	width: calc( 100% - 2 * var( --f_width ));
	height: calc( 100% + 2 * var( --f_radius ));

	background-color: white;
	border-style: solid;
	border-width: 0px;
	border-color: white;
	border-radius: var( --f_radius );
}

.f_bar {

	position: absolute;
	border-width: 1px;
	border-color: white;
}

.f_horizontal {

	height: var( --f_height );
	border-left-style: solid;
	border-right-style: solid;
	font-size: calc( 0.6 * var( --unit ));
}

.f_left {

	left: var( --f_fullwidth );
	width: var( --f_button_width );
}

.f_left_small_1 {

	left: var( --f_fullwidth );
	width: calc( 0.5 * var( --f_button_width ));
	font-size: calc( 0.45 * var( --unit ));
}

.f_left_small_2 {

	left: calc( var( --f_fullwidth ) + 0.5 * var( --f_button_width ));
	width: calc( 0.5 * var( --f_button_width ));
	font-size: calc( 0.35 * var( --unit ));
}

.f_mid {

	left: calc( var( --f_fullwidth ) + var( --f_button_width ));
	width: calc( 100vw - 2 * var( --f_fullwidth ) - 2 * var( --f_button_width ));
}

.f_right {

	right: var( --f_fullwidth );
	width: var( --f_button_width );
}

.f_vertical {

	width: var( --f_width );
	height: 100%;
	border-top-style: solid;
	border-bottom-style: solid;
	z-index: 100;
}

.top { top: 0; }
.left { left: 0; }
.bottom { bottom: 0; }
.right { right: 0; }

.green_air {

	background-color: var( --green_air );
	color: var( --green_normal );
}

.green_light {

	background-color: var( --green_light );
	color: white;
}

.green_normal {

	background-color: var( --green_normal );
	color: white;
}

.green_dark {

	background-color: var( --green_dark );	
	color: white;
}

.grey {

	background-color: var( --grey );
}

.t_center {

	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate( -50%, -50% );
}

.t_montserrat {

	font-family: 'Montserrat', sans-serif;
}

.t_audiowide {

	font-family: 'Audiowide', sans-serif;	
	font-weight: 400;
}

.t_w0 { font-weight: 400; }
.t_w1 { font-weight: 500; }
.t_w2 { font-weight: 700; }

.t_size_fit_5p {

	font-size: calc( min( var( --unit ), ( 100vw - 2 * var( --f_fullwidth ) - 2 * var( --f_button_width ))/11 ));
}

.t_nowrap { white-space: nowrap; }

.t_white { color: white; }

.infobox {

	position: absolute;
	width: var( --f_button_width );
	height: calc(( 100vh - 2 * var( --f_fullheight ) - var( --box_gap )) / 2 );
	margin-bottom: calc( var( --box_gap ) / 2 );
	border-radius: var( --box_radius );
	background-size: cover;
}

.infobox.main_only {

	cursor: pointer;
	transition: transform 0.5s;
	z-index: 1000;
}

.infobox.active {

	transform: scale( 1.05 );
}

.box_0.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --green_air ); }
.box_1.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --green_light ); }
.box_2.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --green_dark ); }
.box_3.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --green_normal ); }

.box_background {

	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	border-radius: inherit;
}

.box_0 {

	left: 0;
	top: 0;
	background-image: url( "desktop_v02b_bg03_pur-01.svg" );
}

.box_0 .box_background {

	background: linear-gradient( 180deg, rgba(187,211,198,0.8) 0%, rgba(120,150,129,0.8) 100% );
}

.hand {

	position: absolute;
	top: calc( .25 * var( --unit ));
	right: calc( .25 * var( --unit ));
	width: calc( 1 * var( --unit ));
	height: calc( 1 * var( --unit ));
	z-index: 1000;
	filter: invert( 1 );
	opacity: 1;
}

.box_1 {

	right: 0;
	top: 0;
	background-image: url( "desktop_v02b_bg02_pur-01.svg" );
}

.box_1 .box_background {

	background: linear-gradient( 180deg, rgba(129,186,166,0.8) 0%, rgba(101,164,142,0.8) 100% );
}

.box_2 {

	left: 0;
	bottom: 0;
	background-image: url( "desktop_v02b_bg05_pur-01.svg" );
}

.box_2 .box_background {
	
	background: linear-gradient( 180deg, rgba(120,150,129,0.8) 0%, rgba(44,79,51,0.8) 100% );
}

.box_3 {

	right: 0;
	bottom: 0;
	background-image: url( "desktop_v02b_bg04_pur-01.svg" );
}

.box_3 .box_background {

	background: linear-gradient( 180deg, rgba(101,164,142,0.8) 0%, rgba(72,142,118,0.8) 100% );
}

.box_header {

	position: absolute;
	width: 100%;
	height: var( --box_header_height );
	text-align: center;
	font-size: calc( 0.6 * var( --unit ));
}

.top .box_header {

	top: 0;
	border-bottom: 1px solid white;
}

.bottom .box_header {

	bottom: 0;
	border-top: 1px solid white;	
}

.box_content {

	position: absolute;
	width: 100%;
	color: white;
}

.top .box_content {

	top: var( --box_header_height );
}

.bottom .box_content {

	bottom: var( --box_header_height );
}

.infobox.bottom {

	margin-bottom: 0;
}

.box_content_text {

	padding: calc( 0.5 * var( --unit ));
	font-size: calc( 0.5 * var( --unit ));
}

.unity_canvas {

	position: absolute;
	top: 0;
	left: calc( var( --f_button_width ));
	width: calc( 100% - 2 * var( --f_button_width ));
	height: calc( 100vh - 2 * var( --f_fullheight ));
	background: white;
	z-index: 100;
}

#flag {

	left: 50%;
	transform: translateX(-50%);
}

.clickable {

	cursor: pointer;
}

@keyframes spin {

	0% {transform: translate( -50%, -50% ) rotate( 0deg )}
	50% {transform: translate( -50%, -50% ) rotate( 180deg )}
	100% {transform: translate( -50%, -50% ) rotate( 360deg )}
}

.loading {

	position: absolute;
	top: 50%;
	left: 50%;
	width: calc( 2 * var( --unit ));
	height: calc( 2 * var( --unit ));
	transform: translate( -50%, -50% );
	z-index: 1000;
	animation: spin;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	transition: transform 1s ease-out, opacity 1s ease-out; 
}

.loading.inactive {

	opacity: 0;
	transform: translate( -50%, -50% ) scale( 2 );
}

.knobs_wrapper {

	position: relative;
	left: 50%;
	transform: translateX(-50%);
	height: calc( 1 * var( --unit ));
	display: inline-block;
}

.knob {

	display: inline-block;
	height: calc( 1 * var( --unit ));
	width: calc( 1 * var( --unit ));
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;
	background-image: url( 'knob.png' );
}

.knob.active {

	background-image: url( 'knob_filled.png' );
}

.youtube {

	position: absolute;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	width: calc( 100% - 2 * var( --unit ));
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

.youtube iframe, .youtube video {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

#unity-canvas, .fallback_video {

	width: 100%;
	height: 100%;
}

/*portrait*/
@media( max-aspect-ratio: 2/3 ) {

	.unity_canvas {

		position: relative;
		left: 0;
		width: 100%;
		height: calc( 12 * var( --unit ));
		margin-bottom: calc( var( --box_gap ) / 2 );
	}

	#flag {

		left: 50%;
		transform: translateX(-50%) scale( 0.8 );
	}

	.infobox {

		position: relative;
		width: calc( 100vw - 2 * var( --f_fullwidth ));
		height: initial;
		min-height: calc( 2 * var( --box_header_height ));
		border-color: var( --grey );
		border-width: 1px;
		border-style: solid;
		background: initial !important;
	}

	.box_background {

		background: initial !important;
	}

	.knob {

		filter: invert( 100% );
	}

	.box_header {

		position: relative;
		background-color: var( --grey );
		border-top-left-radius: var( --box_radius );
		border-top-right-radius: var( --box_radius );
	}

	.bottom .box_header {

		bottom: initial;
		border-top: initial;
		top: 0;
		border-bottom: 1px solid white;
	}

	.box_content {

		position: relative;
		bottom: initial;
		top: initial;
		color: var( --grey );
	}

	.top .box_content {

		top: initial;
	}

	.bottom .box_content {

		bottom: initial;
	}

	.box_2.bottom {

		margin-bottom: calc( var( --box_gap ) / 2 );
	}

	.box_0 { background-color: white; }
	.box_1 { background-color: white; }
	.box_2 { background-color: white; }
	.box_3 { background-color: white; }

	.box_0.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --grey ); }
	.box_1.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --grey ); }
	.box_2.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --grey ); }
	.box_3.active { box-shadow: 0 0 0 0.2em white, 0 0 .2em .4em var( --grey ); }
}