@font-face {
	font-family: Main;
	src: url(../fonts/ProximaNova-Black.woff2) format("woff2"), url(../fonts/ProximaNova-Black.woff) format("woff");
	font-weight: 400;
	font-style: normal
}
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0
}
body, html {
	width: 100%
}
.app {
	width: 100%;
	height: 100vh;
	font-family: Main;
	overflow: hidden;
	position: relative
}
.screens {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat
}
.screen3 {
	background-image: url(../images/bg3.jpg);
	opacity: 0
}
.screen2 {
	z-index: 2;
	background-image: url(../images/bg2.jpg);
	opacity: 0
}
.screen1 {
	z-index: 3;
	background-image: url(../images/bg1.jpg)
}
.screen-out {
	-webkit-animation: screen-out .5s ease;
	animation: screen-out .5s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.scr-wrap {
	width: 100%;
	height: 100%;
	position: relative
}
.s3-quest {
	position: absolute;
	width: 30%;
	left: 35%;
	top: 4%
}
.s3-quest img {
	width: 100%
}
.s2-quest {
	opacity: 0;
	position: absolute;
	width: 34%;
	left: 33%;
	top: 4%
}
.s2-quest img {
	width: 100%
}
.s1-quest {
	opacity: 0;
	position: absolute;
	width: 30%;
	left: 35%;
	top: 4%;
	-webkit-transition: all ease 1s;
	transition: all ease 1s;
	z-index: 2
}
.s1-quest img {
	width: 100%
}
.s1-quest-de {
	width: 20%;
	left: 40%
}
.s2-quest-ru {
	width: 44%;
	left: 28%
}
.s2-quest-ja {
	width: 46%;
	left: 27%
}
.s3-girl {
	position: absolute;
	width: 38%;
	left: 23%;
	top: 28%
}
.s3-girl img {
	width: 100%
}
.s2-girl1 {
	opacity: 0;
	position: absolute;
	width: 50%;
	left: 0;
	top: 15%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: -webkit-filter ease .5s;
	transition: -webkit-filter ease .5s;
	transition: filter ease .5s;
	transition: filter ease .5s, -webkit-filter ease .5s
}
.s2-girl1 img {
	width: 100%
}
.s2-girl2 {
	opacity: 0;
	position: absolute;
	width: 50%;
	left: 50%;
	top: 15%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: -webkit-filter ease .5s;
	transition: -webkit-filter ease .5s;
	transition: filter ease .5s;
	transition: filter ease .5s, -webkit-filter ease .5s
}
.s2-girl2 img {
	width: 100%
}
.s1-dude {
	opacity: 0;
	width: 30%;
	position: absolute;
	left: 5%;
	bottom: -1%;
	-webkit-transition: all ease 1s;
	transition: all ease 1s;
	-webkit-transition: -webkit-filter ease .5s;
	transition: -webkit-filter ease .5s;
	transition: filter ease .5s;
	transition: filter ease .5s, -webkit-filter ease .5s;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%)
}
.s1-dude img {
	width: 100%
}
.s1-girl {
	opacity: 0;
	-webkit-transition: all ease 1s;
	transition: all ease 1s;
	position: absolute;
	bottom: -2%;
	left: 60%;
	width: 30%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: -webkit-filter ease .5s;
	transition: -webkit-filter ease .5s;
	transition: filter ease .5s;
	transition: filter ease .5s, -webkit-filter ease .5s
}
.s1-girl img {
	width: 100%
}
.remove-g {
	-webkit-filter: grayscale(0);
	filter: grayscale(0)
}
.answer {
	display: block;
	padding: 20px 20px;
	color: #000;
	text-decoration: none;
	background: #fff;
	width: 20%;
	text-align: center;
	position: absolute;
	text-transform: uppercase;
	border: 2px solid #fff;
	-webkit-transition: border ease .5s;
	transition: border ease .5s;
	-webkit-transform: skew(-20deg);
	transform: skew(-20deg);
	font-size: 2vw
}
.answer-hover {
	border: 2px solid #ff1515
}
.ans1 {
	top: 80%;
	left: 28%
}
.ans2 {
	top: 80%;
	left: 53%
}
.ans3 {
	width: 30%;
	top: 80%;
	left: 35%;
	-webkit-transform: none;
	transform: none;
	z-index: 2
}
.ans3:hover {
	border: 2px solid #ff1515
}
.screen1-active .s1-quest {
	-webkit-animation: quest 1s ease;
	animation: quest 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.screen1-active .s1-dude {
	-webkit-animation: show-left 1s ease;
	animation: show-left 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.screen1-active .s1-girl {
	-webkit-animation: show-right 1s ease;
	animation: show-right 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.screen2-active .s2-quest {
	-webkit-animation: quest 1s ease;
	animation: quest 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.screen2-active .s2-girl1 {
	-webkit-animation: show-left 1s ease;
	animation: show-left 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.screen2-active .s2-girl2 {
	-webkit-animation: show-right 1s ease;
	animation: show-right 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.nav1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: 5
}
.nav2 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	z-index: 5
}
@-webkit-keyframes quest {
	from {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
@keyframes quest {
	from {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
@-webkit-keyframes show-left {
	from {
		opacity: 0;
		-webkit-transform: translateX(-20%);
		transform: translateX(-20%)
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}
@keyframes show-left {
	from {
		opacity: 0;
		-webkit-transform: translateX(-20%);
		transform: translateX(-20%)
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}
@-webkit-keyframes show-right {
	from {
		opacity: 0;
		-webkit-transform: translateX(20%);
		transform: translateX(20%)
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}
@keyframes show-right {
	from {
		opacity: 0;
		-webkit-transform: translateX(20%);
		transform: translateX(20%)
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}
@-webkit-keyframes screen-out {
	from {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
@keyframes screen-out {
	from {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
@media (orientation:portrait) and (max-width:1100px) {
	.s3-quest {
		width: 90%;
		left: 5%;
		top: 8%
	}
	.s3-girl {
		width: 90%;
		left: 0;
		top: 30%
	}
	.s2-quest {
		width: 60%;
		left: 20%;
		top: 10%
	}
	.s2-quest-ja {
		width: 90%;
		left: 5%
	}
	.s2-quest-ru {
		width: 90%;
		left: 5%
	}
	.s2-girl1 {
		top: 28%;
		width: 90%;
		left: -15%;
		z-index: 1
	}
	.s2-girl2 {
		width: 90%;
		left: 40%;
		top: 32%
	}
	.s1-quest {
		width: 54%;
		left: 25%
	}
	.s1-dude {
		width: 60%;
		left: -10%
	}
	.s1-girl {
		width: 60%;
		left: 45%;
		bottom: -1%
	}
	.answer {
		width: 40%;
		font-size: 1.3em;
		font-weight: bolder;
		padding: 10px 10px;
		z-index: 2
	}
	.ans1 {
		left: 5%;
		top: 76%
	}
	.ans2 {
		top: 76%
	}
	.ans3 {
		width: 80%;
		left: 10%;
		top: 70%
	}
}
@media (orientation:portrait) and (max-width:415px) {
	.s3-quest {
		width: 90%;
		left: 5%;
		top: 8%
	}
	.s3-girl {
		width: 100%;
		left: -5%;
		top: 38%
	}
	.s2-quest {
		width: 60%;
		left: 20%
	}
	.s2-quest-ja {
		width: 90%;
		left: 5%
	}
	.s2-quest-ru {
		width: 90%;
		left: 5%
	}
	.s2-girl1 {
		top: 10%;
		width: 180%;
		left: -65%;
		z-index: 1
	}
	.s2-girl2 {
		width: 180%;
		left: 30%;
		top: 6%
	}
	.s1-quest {
		width: 54%;
		left: 23%
	}
	.s1-dude {
		width: 100%;
		left: -50%
	}
	.s1-girl {
		width: 105%;
		left: 40%;
		bottom: -1%
	}
	.answer {
		width: 40%;
		font-size: 1.3em;
		font-weight: bolder;
		padding: 10px 10px;
		z-index: 2
	}
	.ans1 {
		left: 5%;
		top: 76%
	}
	.ans2 {
		top: 76%
	}
	.ans3 {
		width: 80%;
		left: 10%;
		top: 70%
	}
}