body {
	background-image: url("VR_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#banner {
	width: 100%;
	height: 15%;
}
#banner > div {
	background-image: url("VR_title.png");
	padding: 0.5em 15%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-origin: content-box;
	box-sizing: border-box;
}

#button-back {
	float: left;
	width: 15%;
	height: 100%;
}

#container {
	height: 70%;
	position: relative;
}

#footer {
	width: 100%;
	height: 15%;
	overflow: hidden;
	text-align: center;
}
#footer > a {
	height: 100%;
	padding: 0.5em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-origin: content-box;
	box-sizing: border-box;
	display: block;
	float: left;
}

#buttons-column {
	position: absolute;
	overflow-y: auto;
	float: left;
	width: 25%;
	height: 100%;
}

#content-column {
	height: 100%;
	width: 75%;
	float: right;
}

#model-box {
	height: 100%;
	width: 70%;
	float: left;
}
#info-box {
	height: 100%;
	width: 30%;
	float: right;
}
	
#model-view, #video-view {
	height: 100%;
	width: 100%;
	display: none;
}

#model-about {
	color: #fff;
	margin: 1em 0.5em;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.vr-button {
	margin: auto;
	background-image: url("VR_chip_off.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-origin: content-box;
	box-sizing: border-box;
	color: #fff;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	height: 8em;
	width: 48%;
}
.vr-button:hover {
	background-image: url("VR_chip_on.png");
}
.vr-button p {
	max-width: 8em;
	font-size: 1.6vmin;
	padding: 0;
	margin: 0;
	white-space: normal;
}

#scroll-notice {
	position: absolute;
	bottom: 0;
	width: 100%;
	pointer-events: none;
	text-align: center;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
	display: none;
	font-size: 1vw;
	background: rgb(20,9,27);
	background: linear-gradient(0deg, rgba(20,9,27,1) 0%, rgba(20,9,27,0) 100%);
	margin: 0;
	height: 2em;
}

#info-topo-button, #info-model-button {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-origin: content-box;
	box-sizing: border-box;
	padding: 0.5em;
	display: none;
	width: 100%;
	height: 3.5em;
}
#info-model-button {
	background-image: url("MV_off.png");
}
#info-model-button:hover {
	background-image: url("MV_on.png");
}
#info-topo-button {
	background-image: url("TP_off.png");
}
#info-topo-button:hover {
	background-image: url("TP_on.png");
}

@media (max-aspect-ratio: 1/1) {
	#buttons-column {
		height: 9em;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		display: block;
		float: none;
		white-space: nowrap;
		position: relative;
	}
	#scroll-notice {
		display: none !important;
	}
	.vr-button {
		width: 8em;
	}
	.vr-button p {
		font-size: initial;
	}
	#content-column {
		width: 100%;
		height: calc(100% - 10em);
	}
}