*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body
{
	font-family: 'Inter', sans-serif;
	font-size: 4vw;
	font-weight: 300;
	height: 100vh;
	width: 100vw;
	position: relative;
	background: white;
	color: black;
	overflow-y: auto;
	overflow-x: hidden;
}

#video-background
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	object-fit: contain;
	background: linear-gradient(to bottom, #dcdcdc 0%,#fff 100%)
}

.page
{
	display: none;
	opacity: 0.001;
	width: 100%;
	position: relative;
}

.page.active
{
	display: block;
}
.page.visible
{
	opacity: 0.999;
	transition: opacity .4s linear;
}

h1
{
	border-bottom: 2px solid black;
	text-align: center;
}
h1 div
{
	font-size: 10vh;
	padding: 3vh 5vw 5vh;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
	font-weight: 100;
	display: inline-block;
}
h2
{
	padding: .5em 5vw 0;
	display: inline-block;
	border: 1px solid black;
	border-top: none;
	border-left: none;
	font-size: 175%;
	font-weight: 100;
	line-height: 1.1em;
	max-width: 75%;
}
h2 div
{
	padding: .45em 0;
}
h2 div:first-child
{
	text-transform: uppercase;
	font-size: 25%;
	font-family: "Space Mono";
	line-height: 1em;
	letter-spacing: .2ex;
	padding:0;
}
h2 div:first-child::before
{
	content: "■";
	font-size: 150%;
	padding-right: .5ex;
	vertical-align: top;
}

hr
{
	border: none;
	border-top: 1px solid black;
}
input, .bigbutton
{
	border: 1px solid black;
	background-color: white;
	color: black;
	padding: .75em 2ex;
	font-size: 100%;
	margin: .5em 0;
	border-radius: 0;
	text-decoration: none;
	display: block;
}
.bigbutton
{
	text-align: center;
	background-repeat: no-repeat;
	background-size: 1.3em;
	background-position: 1.5ex center ;
}
.bigbutton.black
{
	background-color: black;
	color: white;
}
.bigbutton.disabled
{
	opacity: 0.1;
	cursor: default;
}
input[type=email]
{
	display: block;
	width: 100%;
	border: 1px solid black;
	background-color: white;
}
input[type=checkbox], input[type=radio]
{
	width: 1.5em;
	height: 1.5em;
	margin-right: 1ex;
	vertical-align: middle;
	display: inline-block;
	border-radius: 0;
}
.consent label
{
	display: inline-block;
	width: 45%;
}
.content
{
	margin: 1em 5vw;
	max-width: 100%;
	box-sizing: border-box;
	overflow: auto;
}

p
{
	margin: 1em 0;
}

.nav-buttons
{
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 5vw;
}

button
{
	border: none;
	width: 40vw;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 2.5em;
	font-size: 1rem;
	cursor: pointer;
	text-transform: uppercase;
	font-family: "Space Mono";
	letter-spacing: .2em;
	line-height: 5em;;
}

button:disabled
{
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
#nextBtn
{
	background-position: right;
	background-image: url(icons/SVG/On-Boarding_Continue.svg);
	text-align: right;
	padding-right: 3.5em;
}
#prevBtn
{
	background-position: left;
	background-image: url(icons/SVG/On-Boarding_Previous.svg);
	text-align: left;
	padding-left: 3.5em;
}
.bigbutton.download
{
	background-image: url(icons/SVG/Off-Boarding_Download.svg);
}

#humans
{
	line-height: 0;
}
#humans .human
{
	display: inline-block;
	padding:4vw 0 0 5vw;
	line-height: 100%;
	overflow:hidden;
}
#humans .human:nth-child(odd)
{
	border-right: 1px solid black;
	width: 50vw;
}
#humans .human:nth-child(even)
{
	width: 45vw;
}
#humans .human .card
{
	width: 40vw;
	border: 1px solid black;
	padding:2vw;
}
.human.selected .card
{
	background-color: black;
	color: white;
}
.card .status::before
{
	content: "■";
	font-size: 150%;
	padding-right: .5ex;
	vertical-align: top;
}
.card .status
{
	text-transform: uppercase;
	font-size: 45%;
	font-family: "Space Mono";
	line-height: 1em;
	letter-spacing: .2ex;
}
.card .title
{
	line-height: 2.5em;
}
.card .headshot, #page2headshot
{
	border: 1px solid black;
	background-color: #DDD;
	height: 35vw;
	background-size: cover;
	background-position: center;
}
#page2headshot
{
	width:40vw;
	height: 50vw;
	margin:1em 5vw 1em 0;
	float: left;
}

#sessionVideoContainer
{
	margin: 1em 5vw;
	text-align: center;
}
@media only screen and (max-width: 768px) {
	#sessionVideoContainer {
		margin-left: 0;
		margin-right: 0;
	}
}
#sessionVideo
{
	position: relative;
	max-width:100%;
	max-height: 90vh;
}
.question .h3, .range-labels span
{
	font-size: 70%;
	font-weight: normal;
	text-transform: uppercase;
	font-family: "Space Mono";
	line-height: 1em;
	letter-spacing: .2ex;
}
.question .h3
{
	font-size: 45%;
	border-top: 1px solid black;
	padding: 6em 5vw 0;
}
.question .h3::before, .range-labels span:first-child::before,  .range-labels span:last-child::after
{
	content: "■";
	font-size: 150%;
	vertical-align: text-top;
}
.question .h3::before, .range-labels span:first-child::before
{
	padding-right: 1ex;
}
.range-labels span:last-child::after
{
	padding-left: 1ex;
}

.question p { margin: 0.5em 5vw; }
.question .answers { margin: 0 5vw 2.5em 5vw; }
.range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	margin-top: 0.25rem;
 }
 input[type=range]
 {
	width:100%;
	height:5em;
 }
 select
 {
	font-size: 1em;
	padding: .8em 3ex;
	width:100%;
 }
 .answers input[type="radio"]
 {
	position: absolute;     /* haalt 'm uit de layout */
	opacity: 0;             /* onzichtbaar */
	pointer-events: none;   /* niet klikbaar */
}

.answers label {
	background-color: white;
	border: 1px solid black;
	padding: .8em 1.5ex;
	width: 100%;
	display: block;
	display: inline-block;
	cursor: pointer;
	margin: .5em 0;
}

.answers input[type="radio"]:checked + label
{
	background: #000;
	color: #fff;
}