body{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

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

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

section.step{
	display: none;
}

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,
body.step-7 section.step-7,
body.step-8 section.step-8,
body.step-9 section.step-9,
body.step-10 section.step-10,
body.step-11 section.step-11,
body.step-12 section.step-12,
body.step-join section.step-join{
	display: block;
}

section.step{
	position: relative;
	z-index: 2;
}

section.step div.container,
div.container-bg{ 
	height: 100vh;
	position: absolute;
	top: 0;
	left: 50%;
	background-color: white;
	transform: translateX( -50% );
	z-index: 10;
}

div.container-bg{ 
	z-index: 1;
	background-color: #fff;
}

section.step div.container video{
	height: 100vh;
	width: auto;
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	z-index: 1;
}

section.step div.container > div.subcontainer{
	position: relative;
	z-index: 2;
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: 10%;
}

@media screen and (max-width: 767px){
	section.step div.container > div.subcontainer{
		bottom: 20%;
	}
}

section.step.step-join div.container > div.subcontainer{
	bottom: auto;
	top: 50%;
	transform: translateY( -50% );
}

section.step.step-join div.subcontainer{
	background-color: rgba( 0, 0, 0, 0.66 )
}

#header{
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 100;
	transform: translateX( -50% );
	background-color: rgba( 255, 0, 0, 0.5 );
}

#header .logo{
	margin: 0;
	width: 100%;
	max-width: 100%;

	z-index: 10;
}

#header .logo img{
	display: block;
	width: 66%;
	margin: 0 auto;
}

.tour-background{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-size: cover;
	background-repeat: repeat-y;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	height: 0;
}

.tour-background.bg-right{
	left: auto;
	right: 0;
}

.tour-background-mask{
	height: 100vh;
	width: 100vw;
	background-color: rgba( 255, 255, 255, 0.66 );
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

body.bg-left-1 .tour-background.bg-left-1,
body.bg-left-2 .tour-background.bg-left-2,
body.bg-left-3 .tour-background.bg-left-3,
body.bg-left-4 .tour-background.bg-left-4,
body.bg-left-5 .tour-background.bg-left-5,
body.bg-right-1 .tour-background.bg-right-1,
body.bg-right-2 .tour-background.bg-right-2,
body.bg-right-3 .tour-background.bg-right-3,
body.bg-right-4 .tour-background.bg-right-4,
body.bg-right-5 .tour-background.bg-right-5{
	height: 100vh;
	width: 50vw;
	opacity: 1;
	background-position: 100%;
}

.tour-background.flipX{
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.step .subcontainer{
	padding: 1em;
	box-sizing: border-box;
}

.step .subcontainer h2.title{
	font-size: 2em;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	margin-bottom: 0.5em;
	font-weight: 400;
}

@media screen and (max-width: 767px){
	.step .subcontainer h2.title{
		font-size: 1.5em;
		line-height: 1.25em;
		letter-spacing: -1px;
	}
}

.step .subcontainer h2.title em{
	display: block;
	font-style: normal;
}

.step .subcontainer h2.title strong{
	color: rgba( 255, 255, 0, 1 );
	text-transform: uppercase;
	letter-spacing: -1px;
	font-weight: 600;
	display: block;
}

.step.step-6 .subcontainer h2.title strong,
.step.step-7 .subcontainer h2.title strong,
.step.step-11 .subcontainer h2.title strong{
	display: inline;
}

.step.step-7 .subcontainer h2.title strong.count,
.step.step-7 .subcontainer h2.title strong.country{
	display: block;
}

.step .subcontainer .buttons .btn{
	font-size: 2em;
	text-decoration: none;
	text-transform: uppercase;
	padding: 1em;
	color: #fff;
	border-radius: 20%;
	text-shadow: 1px 1px 3px #000;
	box-shadow: 2px 3px 6px rgb(0 0 0 / 50%);
	font-weight: 600;
	display: inline-block;
	margin: 0 0.5em;
}

.btn.choice-yes,
.btn.choice-male,
.btn.continue-1,
.btn.continue-2,
.btn.continue-5{
	background-color: rgba( 255, 0, 0, 0.95 );
}

.btn.choice-no{
	background-color: grey;
}

.btn.choice-female{
	background-color: pink;
}

.step .subcontainer .buttons .btn.choice-male,
.step .subcontainer .buttons .btn.choice-female{
	margin: 0 0.25em;
	padding: 1em 0.66em;
}

@media screen and (max-width: 767px){
	.step .subcontainer .buttons .btn{
		font-size: 1.5em;
	}

	.step.step-3 .subcontainer .buttons .btn.choice-yes,
	.step .subcontainer .buttons .btn.continue-1,
	.step .subcontainer .buttons .btn.continue-2{
		display: block;
		border-radius: 10px;
		box-sizing: border-box;
		margin: 0;
	}
}

form.input{
	display: block;
	padding-bottom: 1em;
	box-sizing: border-box;
}

form.input .form-group input{
	font-size: 2em;
	line-height: 2em;
	border: 3px solid #000;
	width: 100%;
	padding-left: 1em;
	display: block;
	box-sizing: border-box;
	background-color: rgba( 255, 255, 255, 0.9 );
}

@media screen and (max-width: 767px){
	form.input .form-group input{
		font-size: 1.75em;
		line-height: 1.75em;
	}
}

form.input .form-group input:focus-visible{
	outline: none;
}

svg.loading{
	background: rgba( 255, 255, 255, 0.8 );
	border-radius: 25%;
}

section.step .progress-bar{
	display: block;
	width: 100%;
	height: 2em;
	box-sizing: border-box;
}

section.step .progress-bar .percentage{
	width: 0%;
	height: 4em;
	background-color: rgba( 255, 255, 0, 0.8 );
	box-sizing: border-box;
}

.buttons .btn.continue-2 > span nav{
    display: block;
    font-size: 0.4em;
    text-shadow: none;
    text-transform: none;
    color: rgba(255,255,0,0.75);
    position: absolute;
    /* bottom: 50%; */
    right: 1em;
    transform: translateX(-50%);
    left: 50%;
}

@media screen and (max-width: 767px){
	.tour-background{
		display: none !important;
	}

	header#header{
		width: 100vw !important;
	}

	header#header .logo img{
		width: auto;
		height: 9vh;
	}

	section.step > .container > .step-video{
		width: 100vw !important;
		height: auto !important;
		transform: translateX( -50% );
		left: 50% !important;
	}

	section.step > .container{
		width: 100vw !important;
	}

	::placeholder { 
		font-size: 0.85em;
		text-align: center;
	}

	:-ms-input-placeholder {
		font-size: 0.85em;
		text-align: center;
	}

	::-ms-input-placeholder {
		font-size: 0.85em;
		text-align: center;
	}

	form.input .form-group input{
		padding-left: 0.5em;
	}

	.buttons .btn.continue-2 > span nav{
		font-size: 0.5em;
	}
}

}