@font-face {
	font-family: 'Kelson Sans';
	src: url('../fonts/KelsonSans-Light.eot');
	src: url('../fonts/KelsonSans-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KelsonSans-Light.woff2') format('woff2'),
		url('../fonts/KelsonSans-Light.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Kelson Sans';
	src: url('../fonts/KelsonSans-Normal.eot');
	src: url('../fonts/KelsonSans-Normal.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KelsonSans-Normal.woff2') format('woff2'),
		url('../fonts/KelsonSans-Normal.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Kelson Sans';
	src: url('../fonts/KelsonSans-Light.eot');
	src: url('../fonts/KelsonSans-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KelsonSans-Light.woff2') format('woff2'),
		url('../fonts/KelsonSans-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Kelson Sans';
	src: url('../fonts/KelsonSans-Bold.eot');
	src: url('../fonts/KelsonSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KelsonSans-Bold.woff2') format('woff2'),
		url('../fonts/KelsonSans-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

* {
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
	outline: none;
}
a { text-decoration: none; }

html, body {
	background-color: #323232;
	margin: 0; padding: 0;
	overflow: hidden;
	height: 100%;
}
#close {
	position: absolute;
	right: 7vh; top: 7vh;
	height: 5vh; width: 5vh;
	color: #ffffff;
	display: block;
	font-size: 150px;
	text-align: center;
	line-height: 5vh;
	text-decoration: none;
	font-family: 'Kelson Sans', sans-serif;
	transform: rotateZ(45deg) scale(0);
	font-weight: 300;
	opacity: 0;
	z-index: 2;
}
#content {
	position: absolute;
	bottom: 10vh;
	left: 10vh;
	top: 10vh;
	right: 10vh;
	display: none;
	font-family: 'Kelson Sans', sans-serif;
	font-size: 30px;
	color: #ffffff;
	text-align: center;
	line-height: 80vh;
	z-index: 1;
}
#cover {
	width: 100%; height: 100%;
	background: #AC1133;
	position: absolute;
	left: 0; top: 0;
	z-index: 1001;
	display: none;
	font-size: 0;
	opacity: 0;

	font-family: 'Kelson Sans', sans-serif;
	font-weight: 400;
	font-size: 1vw;
	color: #ffffff;
}
#infoboxes {
	width: 100%; height: 100%;
	position: absolute;
	left: 0; top: 0;
	z-index: 999;
}
#touchcanvas {
	width: 100%; height: 100%;
	position: absolute;
	left: 0; top: 0;
	z-index: 1000;
}
.canvases {
	transform: translate(-35%, -45%);
	left: 50%; top: 50%;
	position: absolute;
	z-index: 1;
}
#tunnel {
	width: 100%; height: 100%;
	position: aboslute;
	left: 0; top: 0;
	border: none;
}
#middle { z-index: 2; }
#foreground { z-index: 3; }
#arrows {
	z-index: 1;
	left: 0; top: 0;
	position: absolute;
	width: 100%; height: 100%;
	display: none;
}

#preload1 { font-family: 'Kelson Sans', sans-serif; font-weight: 300; position: absolute; top: 0; right: 0; font-size: 1px; color: #323232; }
#preload2 { font-family: 'Kelson Sans', sans-serif; font-weight: 600; position: absolute; top: 0; right: 0; font-size: 1px; color: #323232; }

.title {
	font-family: 'Kelson Sans', sans-serif;
    background: rgba( 172, 17, 51, 1 );
    position: absolute;
    border-radius: 10px;
    font-size: 0;
    color: #ffffff;
	display: none;
    z-index: 11;
}
.title video {
	object-fit: fill;
	font-size: 0;
}
.title .num {
	position: absolute;
    left: 25px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    vertical-align: middle;
    font-weight: 600;
    font-size: 100px;
    z-index: 2;
    bottom: 30px;
}
.title .text {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    font-weight: 300;
    font-size: 30px;
    position: absolute;
    z-index: 3;
    left: 30px;
    bottom: 10px;
    width: 300px;
}

#column {
	background: #AC1133;
	width: 25%; height: 100%;
	position: absolute;
	color: #ffffff;
	z-index: 20;

	font-family: 'Kelson Sans', sans-serif;
	font-size: 19px;
	font-weight: 400;
}
#logo {
	display: block;
	padding: 20px 0 0px 0;
	margin: 0 auto;
	width: 80%;
}

#column p {
	padding: 0 8% 0 8%;
}

#title1 {
	left: 25%; top: 25%;
}
#title2 {
	bottom: 25%; right: 25%;
}


/* SLIDES */


h2 {
	margin: 0; padding: 0;
	font-weight: 300;
	font-size: 1.7vw;
}
.neuron-container {
	width: 450px; height: 196px;
	position: absolute;
	font-size: 0;
}
.neuron-curved {
	width: 437px; height: 297px;
}
.neuron {
	width: 100%; height: 100%;
	z-index: 1;
}
.filling-container {
	height: 100%; width: 100%;
	position: absolute;
	bottom: 0; left: 0;
	overflow: hidden;
	z-index: 2;
}
.filling-container img {
	height: 100%; width: auto;
	position: absolute;
	bottom: 0; left: 0;
	opacity: 0;
}
#n-filling {
	opacity: 0.5;
}
#filling-container {
	width: 0;
}

.cell-body {
	width: 34.88%; height: 100%;
	position: absolute;
	top: 0; left: 0;
	cursor: pointer;
	z-index: 4;
}
.neuron-curved .cell-body { height: 65.31% }
#neuron-1t .cell-body { top: 0; }
#neuron-1b .cell-body { bottom: 0; top: auto; }

#neuron-1m {
	top: 50%; left: 0%;
	transform: translate(0,-50%);
	z-index: 3;
}
#neuron-1t {
	transform: translate(9.83%,-105%);
	top: 50%; left: 0%;
	z-index: 1;
}
#neuron-1b {
	transform: translate(9.83%,5%);
	top: 50%; left: 0%;
	z-index: 1;
}
#neuron-2 {
	top: 50%; left: 0%;
	transform: translate(85%,-50%);
	z-index: 1;
}
#neuron-3t {
	top: 50%; left: 0%;
	transform: translate(170%,-110%) rotateZ(-30deg);
}
#neuron-3b {
	top: 50%; left: 0%;
	transform: translate(170%,20%) rotateZ(30deg);
}
#neuron-4t {
	top: 50%; left: 0%;
	transform: translate(245%,-140%) rotateZ(15deg);
}
#neuron-4b {
	top: 50%; left: 0%;
	transform: translate(255%,40%) rotateZ(15deg);
}

#neurons-parent {
	transform: translateX( -50% );
	height: 100%; width: 50%;
	position: absolute;
	overflow: hidden;
	left: 50%; top: 0;
}
#tap-help {
	background: url('../images/tap.png') no-repeat 0 0;
	transform: translate( -100%, 0% );
	width: 73px; height: 115px;
	position: absolute;
	top: 30%; left: 27%;
	z-index: 10;
	opacity: 0;
}

#gradient {
	background: url('../images/gradient.png') repeat-y top right;
	width: 200px; height: 100%;
	position: absolute;
	top: 0; right: 0;
}
#threshold-closeup {
	transform: translateX(-30%);
	font-family: 'Kelson Sans';
	position: absolute;
	font-weight: 400;
	font-size: 23px;
	color: #ffffff;
	width: 44.44%;
	bottom: 90%;
	left: 50%;
}
#threshold {
	width: 100%; height: 7px;
	border: 1px solid #ffffff;
	background: #780c24;
	position: relative;
	margin: 20px 0 0 0;
	font-size: 0;
}
#calcium {
	height: 100%; width: 0%;
	background: #ffffff;
	font-size: 0;
}
.n-impulse {
	width: 54px; height: 54px;
	position: absolute;
	left: 0; top: 0;
	z-index: 10;
}
.neuron-container .n-impulse {
	transform: translate(-50%, -50%);
	top: 50%;
}
#threshold-marker {
	width: 2px; height: 100%;
	left: 75%; bottom: 0;
	background: #aaaaaa;
	position: absolute;
	margin-left: -3px;
	opacity: 1;
}
#theta {
	background: url('../images/marker4.png') no-repeat 0 0;
	transform: translateX(-50%);
	width: 39px; height: 62px;
	left: 75%; bottom: 3px;
	position: absolute;
	opacity: 0.9;
}

#title {
	text-shadow: 1px 1px 3px #000000;
	background: rgba( 0,0,0,0.1 );
	font-family: 'Kelson Sans';
	position: absolute;
	font-weight: 300;
	left: 0; top: 0;
	font-size: 2vw;
	color: #ffffff;
	z-index: 11;
	right: 0;
	margin: 0;
	height: 4.5vw;
	vertical-align: middle;
	line-height: 4.5vw;
	text-indent: 2vw;
}

.arrow-next-prev {
	width: 6%; height: 80%;
	position: absolute;
	cursor: pointer;
	display: block;
	opacity: 0.9;
	top: 20%;
}
#arrow-previous { left: 0; display: none; }
#arrow-next { right: 0; display: none; }

.arrow-next-prev img {
	transform: translate(-50%,-100%);
	position: absolute;
	left: 50%; top: 50%;
	width: 40%;
}
.text-hidden { visibility: visible; opacity: 0; }
.text-visible { visibility: visible; }
.text-box {
	background: rgba(0,0,0,0.3);
	padding: 1.5vw 1.5vw;
	position: absolute;
	border-radius: 1vw;
	line-height: 140%;
	opacity: 0;
}
.text-box-no-title {
	background: rgba(0,0,0,0.2);
	padding: 1.5vw 1.5vw;
	position: absolute;
	border-radius: 1vw;
	line-height: 140%;
	opacity: 0;
}
#tb1 {
	left: 3vw; top: 7.3vw;
	width: 60%;
}
#tb2 {
	right: 3vw; bottom: 3vw;
	width: 40%;
}
.text-box h2 {
	margin-bottom: 1vw;
	font-weight: 600;
}
#progress-indicator {
	position: absolute;
	right: 2vw; top: 0;
	height: 4.5vw;
	line-height: 4.5vw;
}
#progress-indicator span {
	width: 0.7vw; height: 0.7vw;
	vertical-align: middle;
	display: inline-block;
	background: #ffffff;
	border-radius: 50%;
	margin-left: 0.5vw;
	opacity: 0.2;
	background: #111;
}
#progress-indicator .bullet-active { opacity: 0.7; background: #fff; }

#return {
	text-decoration: none;
	background: rgba(0,0,0,0.1);
	position: absolute;
	left: 0; bottom: 0;
	padding: 0.5vw 2.5vw 0 2.5vw;
	color: #ffffff;
	font-size: 35px;
	font-family: 'Kelson Sans';
	font-weight: 300;
	border-top-right-radius: 1vw;
	vertical-align: middle;
	line-height: 5vw;
	cursor: pointer;
}
#return img {
	width: 1.8vw;
	margin-right: 0.5vw;
	vertical-align: baseline;
}

.info-button {
	transform: translate( -50%, -50% );
	padding: 0.7vw 0.8vw 0.6vw 0.8vw;
	background: rgba(0,0,0,.6);
	border: 2px solid #ffffff;
	border-radius: 0.7vw;
	position: absolute;
	cursor: pointer;
	color: #ffffff;
	font-size: 1.3vw;
	display: none;
	opacity: 0;
}

.button-active {
	border-width: 3px;
	font-size: 1.1vw;
	opacity: 1;
}

.close-infobox {
	transform: rotateZ(45deg);
	font-size: 5.5vw;
	font-weight: 200;
	cursor: pointer;
	float: right;
}

#neuron-container {
	transform: translate( -70%, -50% );
	left: 50%; top: 50%;
	position: absolute;
	font-size: 0;
	width: 50%;
}
#neuron-image {
	width: 100%; height: 100%;
	opacity: 0.4;
}
#neuron-image-svg {
	width: 100%; height: 100%;
	position: absolute;
	left: 0; top: 0;
	opacity: 1;
}
#neuron-descriptions {
	left: 64.5%; top: 17%;
	width: 25%;
}
#neuron-intro {
	bottom: 3vw; right: 3vw;
	width: 35%;
}
#dendrites-button { left: 0%; top: 14%; }
#axon-button { left: 59%; top: 22%; }
#nucleus-button { left: 26%; top: 37%; }
#terminals-button { right: 25%; top: 80%; transform: translate( 50%, -50% ); }

#our-team {
	transform: translate(-50%,-50%);
	position: absolute;
	top: 50%; left: 50%;
	width: 50vw;
}

#brain-parent,
#neuron-parent,
#neurons-true-parent,
#artificial-neuron-parent,
#ann-parent,
#knn-end-parent,
#future-end-parent,
#westdrive-end-parent,
#deep-learning-parent,
#dl-end-parent,
#expai-end-parent,
#explainable-ai-parent,
#projects-parent,
#projects-parent2,
#projects-parent3,
#projects-parent4,
#projects-end-parent,
#team-parent {
	display: none;
}
#future-end-parent, #westdrive-end-parent {
	width: 100%; height: 100%;
	background: #AC1133;
	position: absolute;
	left: 0; top: 0;
}
#dl-video, #expai-video {
	width: 100%; height: 100%;
	position: absolute;
	object-fit: fill;
	top: 0; left: 0;
}

#brain-container {
	transform: translate( -70%, -50% );
	left: 50%; top: 50%;
	position: absolute;
	font-size: 0;
	width: 60%;
}
#brain-image {
	width: 100%; height: 100%;
	opacity: 0.1;
}
#brain-image-svg {
	width: 100%; height: 100%;
	position: absolute;
	left: 0; top: 0;
	opacity: 0.8;
}
#cerebellum-button { left: 70%; top: 80%; }
#visual-button { left: 79%; top: 50%; }
#prefrontal-button { left: 15%; top: 26%; }
#hippocampus-button { left: 55%; top: 57%; }
#brain-descriptions {
	left: 64.5%; top: 17%;
	width: 25%;
}
#brain-intro {
	bottom: 3vw; right: 3vw;
	width: 25%;
}


#artificial-neuron-intro {
	bottom: 3vw; right: 3vw;
	width: 35%;
}
#artificial-neuron-container {
	transform: translate( -50%, -50% );
	left: 50%; top: 50%;
	position: absolute;
	font-size: 0;
	width: 50%; height: 50%;
}
#artificial-neuron-image-svg {
	width: 100%; height: 100%;
	position: absolute;
	left: 0; top: 0;
}
#artificial-neuron-image-svg circle {
	stroke: #ffffff;
	stroke-width: 1;
	fill: #AC1133;
}
#artificial-neuron-image-svg line {
	stroke-linecap: round;
	stroke-width: 0.5;
	stroke: #ffffff;
}
#artificial-neuron-image-svg #neuron-sigma {
	stroke: #ffffff;
	stroke-width: 2;
	fill: none;
	opacity: 0;
}
#artificial-neuron-image-svg #neuron-sigma-black {
	stroke: #AC1133;
	stroke-width: 2;
	fill: none;
}
#artificial-neuron-image-svg #fill-neuron {
	fill: #ffffff;
}
#artificial-neuron-image-svg #an-output-arrow {
	stroke-width: 1.3;
	opacity: 0;
}
#input-arrows { opacity: 0; }

#artificial-neuron-explanation {
	left: 3vw;
	top: 7.3vw;
	width: 40%;
}


#ann-intro {
	bottom: 3vw; right: 3vw;
	width: 35%;
}
#ann-container {
	transform: translate( -50%, -42% );
	left: 50%; top: 50%;
	position: absolute;
	font-size: 0;
	width: 80%; height: 80%;
}
#ann-image-svg {
	width: 100%; height: 100%;
	position: absolute;
	left: 0; top: 0;
}
#ann-image-svg circle {
	stroke: #ffffff;
	stroke-width: 0.4;
	fill: #AC1133;
}
#ann-image-svg line {
	stroke-linecap: round;
	stroke-width: 0.5;
	stroke: #ffffff;
}
#ann-image-svg text {
	font-family: 'Kelson Sans', sans-serif;
	dominant-baseline: central;
	alignment-baseline: central;
	text-anchor: middle;
	font-weight: 600;
	font-size: 5px;
	fill: #ffffff;
}

#ann-explanation {
	left: 3vw;
	top: 7.3vw;
	width: 50%;
}

/* FUTURE STORY */

#future-parent {
	width: 100%; height: 100%;
	left: 0%; top: 0%;
	position: absolute;
	display: none;
}
#future-container {
	background: url('../images/future.png') no-repeat center center;
	width: 100%; height: 100%;
	background-size: 100% 100%;
}


#westdrive-parent {
	width: 100%; height: 100%;
	left: 0%; top: 0%;
	position: absolute;
	display: none;
}
#westdrive-container {
	background: url('../images/westdrive-background.png') no-repeat center center;
	width: 100%; height: 100%;
	background-size: 100% 100%;
}

.future-slide #return, .future-slide #title {
	background: rgba(0,0,0,0.2);
}
.future-slide #progress-indicator span { background: #fff; }
.highlighted-area {
	fill: rgba( 255,255,255,0.3 );
	stroke-width: 0.15;
	stroke: rgba( 255,255,255,0.3 );
	stroke-linejoin: round;
	cursor: pointer;
}
#high-parking-lot {
	animation: car-dash 7s linear infinite, blinky 1.2s ease-out infinite;
	stroke-width: 3;
}
#high-car {
	animation: car-dash 5s linear infinite, blinky 1.2s ease-out infinite;
	stroke-width: 2;
}
#high-truck {
	stroke-width: 1.5;
	animation: car-dash 5s linear infinite, blinky 1.2s ease-out infinite;
}
@keyframes car-dash {
	to {
		stroke-dashoffset: -20;
	}
}
@keyframes blinky {
	0% { fill: rgba( 255,255,255,0.55 ); }
	85% { fill: rgba( 255,255,255,0 ); }
	100% { fill: rgba( 255,255,255,0.55 ); }
}
#experiment-img,
#traum-img,
#lou-img {
	position: absolute;
	top: 0; bottom: 0;
	height: 100vh;
	right: 0;
}
#projects-box1 {
	left: 2vw; top: 7vw;
	width: 39vw;
}
#projects-box2 {
	left: 7vw; top: 11vw;
	width: 20vw;
	z-index: 1;
}
#projects-box3 {
	left: 13vw; top: 12vw;
	width: 40vw;
	z-index: 1;
}
#projects-box4 {
	top: 10vw;
	width: 21vw;
	left: 14vw;
}
#training-option1 { margin-left: 0.5vw; }

.active-option {
	background: #ffffff !important;
	color: #ac1133 !important;
}

#projects-box5 {
	position: absolute;
	top: 10vw;
	right: 14vw;
	width: 42vw;
}
#projects-box5 video { width: 100%; }

#rl-video1, #rl-video2, #rl-video3 { display: none; }

#projects-text1 {
	margin-bottom: 1vw;
	display: block;
}
#lou-team-img {
	display: block;
	margin: 0 auto;
	width: 39vw;
}
#wd-box1 {
	left: 7vw; top: 16vw;
	width: 34vw;
}
#wd-box2 {
	left: 0; top: 120%;
	width: 34vw;
}
#wd-box3 {
	transform: translate(-50%,-50%);
	left: 50%; top: 50%;
}
#wd-text3 { display: block; text-align: center; }
#wd-title3 { text-align: center; }
#wd-qr {
	margin: 1vw auto 0.5vw auto;
	width: 50%;
	display: block;
}
#wd-box-video1 {
	top: 16vw; right: 7vw;
	padding: 0 !important;
	position: absolute;
	width: 46vw;
	opacity: 1;
}
#wd-video {
	transform: translate(-50%,-50%);
	width: 90%; height: 90%;
	top: 50%; left: 50%;
	position: absolute;
	object-fit: fill;
}
#hm-box1 {
	left: 2vw; top: 7vw;
	position: absolute;
	width: 50vw;
}
div.heute, div.morgen {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	padding-top: 1.5vw;
	position: static;
	opacity: 1;
}
div.hm-tabs {
	font-size: 0;
	width: 100%;
}
div.hm-tabs span.tab {
	background: rgba(172, 17, 51, 0.5);
	display: inline-block;
	height: 3vw;
	width: 35%;
}
div.hm-tabs span.tab span {
	font-weight: 800;
	height: 100%;
	line-height: 3.5vw;
	font-size: 1vw;
	text-align: center;
	cursor: pointer;
	display: block;
	text-transform: uppercase;
}

div.heute-tab-open div.hm-tabs span.heute-tab {
	background: rgba(172, 17, 51,0.8);
}
div.hm-tabs span.heute-tab {
	border-top-left-radius: 1vw;
}

div.morgen-tab-open div.hm-tabs span.morgen-tab {
	background: rgba(172, 17, 51,0.8);
}
div.heute-tab-open div.hm-tabs span.morgen-tab {
	background: rgba(172, 17, 51,0.5);
	color: rgba(255, 255, 255, 0.7);
}
div.heute-tab-open div.hm-tabs span.morgen-tab span {
	color: rgba(255,255,255,0.5);
	font-weight: 400;
}
div.morgen-tab-open div.hm-tabs span.heute-tab {
	background: rgba(172, 17, 51,0.5);
	color: rgba(255, 255, 255, 0.7);
}
div.morgen-tab-open div.hm-tabs span.heute-tab span {
	color: rgba(255,255,255,0.5);
	border-top-left-radius: 1vw;
	font-weight: 400;
}

div.morgen-blink div.hm-tabs span.morgen-tab span {
	animation: tab-blink 1.5s infinite;
}

@keyframes tab-blink {
	0% { background: rgba(255,255,255,0); color: rgba(255,255,255,0.5); }
	20% { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); }
	100% { background: rgba(255,255,255,0); color: rgba(255,255,255,0.5); }
}
div.hm-tabs span.close-tab {
	background: rgba(172, 17, 51,0.5);
	border-top-right-radius: 1vw;
	cursor: default;
	width: 30%;
}
div.hm-tabs span.close-tab span { cursor: default; }
div.hm-tabs span.close-tab span.close-infobox {
	transform: rotateZ(45deg);
	margin: 0; padding: 0;
	position: absolute;
	right: 1vw; top: 0;
	font-weight: 200;
	font-size: 5.5vw;
	cursor: pointer;
	display: inline;
	height: auto;
}
.hour-range {
	margin: 0.5vw 0 0vw 0;
	text-align: center;
	overflow: hidden;
}
.hour-range span {
	border: 0.1vw solid rgba(255,255,255,0.5);
	text-align: center;
	display: inline-block;
	height: 2.5vw;
	font-size: 0.75vw;
	font-weight: bold;
	margin-top: 10px;
	margin-right: 0.4vw;
	border-radius: 5vw;
	width: 2.5vw;
	line-height: 2.5vw;
	cursor: pointer;
}
.hour-range span.long {
	width: 85%; height: 2.5vw;
	line-height: 2.5vw;
	font-size: 0.75vw;
}
#hm-box2 {
	position: absolute;
	opacity: 1;
	bottom: 4vw; right: 4vw;
	width: 40vw;
}
.future-slide .text-box-no-title, .future-slide .text-box {
	background: rgba(172, 17, 51,0.8);
}

.range-parent {
	background: rgba(255,255,255,0.1);
	display: block;
	border-radius: 1vw;
	height: 0.5vw;
	width: 100%;
	vertical-align: middle;
	margin-bottom: 1vw;
}
.range-value {
	background: rgba(255,255,255,0.8);
	border-radius: 1vw;
	height: 100%;
}
.range-value-box {
	margin-bottom: 0.3vw;
	line-height: 120%;
	font-size: 0.9vw;
	text-align: left;
	margin-left: 0.5%;
}
.range-container {
	vertical-align: middle;
	padding-top: 0.5vw;
	line-height: 3vw;
}
.question {
	text-align: center;
	display: block;
}
#hm-box3, #hm-box5, #hm-box6 {
	transform: translateX(-50%);
	position: absolute;
	opacity: 1;
	left: 50%; top: 25%;
	width: 45vw;
}

#hm-box4 {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 1;
}

#screenshot-areas, #hm-box1, #hm-box2, #hm-box3, #hm-box4, #hm-box5, #hm-box6 {
	display: none;
}

.end-container {
	transform: translate( -50%, -50% );
	left: 50%; top: 50%;
	position: absolute;
	text-align: center;
	font-size: 0;
	width: 90%;
}
.end-container .end-button {
	border: 0.2vw solid rgba(255,255,255,0.8);
	width: 10vw; height: 10vw;
	display: inline-block;
	border-radius: 1.5vw;
	position: relative;
	margin-right: 2.5vw;
	margin-left: 2.5vw;
	cursor: pointer;
}
.end-button img {
	transform: translate(-50%,-50%);
	top: 50%; left: 50%;
	position: absolute;
	width: 70%;
}
.end-container .end-button span {
	text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	transform: translate(-50%,50%);
	position: absolute;
	font-size: 1.2vw;
	left: 50%;
	bottom: -1.5vw;
}