body{
	margin: 0;
	padding: 0;
}

body.sextok-1a{
	cursor: pointer;
}

#app-container{
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
}

button#faux-button{
	display: inline-block;
	width: 100vw;
	height: 100vh;
	border: none !important;
	background: none !important;
	font-size: 1em;
}

div.container{
	width: 100%;
	max-width: 100%;
}

section.step div.container{ 
	max-width: 33vw;
}

header.header{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	padding: 1em;
	text-align: center;
	z-index: 100;
}

header.header .logo{
	margin: 0;
	display: inline-block;
}

.step video{
	display: block;
	margin: 0 auto;
	height: 50vh;
	max-width: 100%;
	max-width: 360px;
	border: 5px solid #111;
	margin-bottom: 3.5em;
	object-fit: cover;
	box-sizing: border-box;
}

.step h2.title{
	margin-top: 1em;
	font-size: 1.25em;
}

.btn{
	position: relative;
	display: inline-block;
	max-width: 180px;
	margin: 0 0.25em 0.25em 0.25em;
	padding: 0.5em 1em;
	font-size: 1.75em;
	font-weight: 600;
	background-color: #000;
	color: #fff;
	border: 2px solid #1f0d05;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 3px 4px #00e6eb, -3px -4px #ff005c;
	text-decoration: none;
	min-width: 130px;
	box-sizing: border-box;
	text-transform: uppercase;
}

.btn:first-child{
	margin-left: 0;
}

.buttons{
	padding: 0 1.5em;
}

.btn:hover{
	background: #f60550;
	box-shadow: 3px 4px #ff005c, -3px -4px #00e6eb
}

.btn.choice-no{
	color: #000;
	background-color: #fff;
}

@media screen and (max-height: 980px){
	header.header .logo img{
		max-height: 10vh;
	}

	.step video{
		max-height: 50vh;
		margin-bottom: 1em;
	}

	section.step div.container{ 
		max-width: 66vw;
	}
}

@media screen and (max-height: 640px){
	header.header{
		padding: 0.5em 0.25em;

	}

	header.header .logo img{
		max-height: 4vh;
	}

	h2.title{
		font-size: 1em;
		line-height: 1em;
	}
}


@media screen and (max-width: 767px){
	section.step div.container{ 
		max-width: 100vw;
	}

	section.step h2.title{
		font-size: 1em;
		line-height: 1em;
		padding: 0 1em;
		box-sizing: border-box;
	}
}

section.step{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	visibility: hidden;
	opacity: 0;
}

body.step-1 section.step-1,
body.step-2 section.step-2,
body.step-3 section.step-3,
body.step-4 section.step-4,
body.step-5 section.step-5,
body.step-6 section.step-6{
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
}

.step div.container{
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate( -50%, -40% );
	text-align: center;
}

@media screen and (max-height: 468px){
	header.header{
		display: none;
	}
}

@media screen and (max-width: 467px){
	header.header h1.logo img{
		max-height: 15vw;
	}
}

.btn.choice-start-playing{
	max-width: 300px;
}