:root {
	--donkerrood: #B70E0C;
	--rood: #E06055;
	--lichtrood: #EA5160;
	--zwart: #000000;
	--offblack: #333333;
	--grijs: #77838F;
	--lichtgrijs: #EEF1F3;
	--wit: #FFFFFF;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

.wrapper{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-width: 320px;
	min-height: calc(var(--vh, 1vh) * 100);
}


/* ------------------------------ TYPOGRAFIE ----------------------------------- */

html {
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	width: 100%;
	height: 100%;
}

body{
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.7em;
	color: var(--zwart);
	width: 100%;
	height: 100%;
}

h1, h2, .h1, .h2{
	font-weight: 800;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	font-size: 4.0rem;
	line-height: 1.25em;
	color: var(--zwart);
	margin: 0 0 0.8em 0;
}
h2, .h2{ font-size: 3.2rem; margin-bottom: 1.2em; }

h3{
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.35em;
	color: var(--grijs);
	margin: 0 0 0.8em 0;
}

.grijs{ color: var(--grijs); }
p:not(:last-child){ margin-bottom: 1.5em; }

.link_rood{
	color: var(--donkerrood);
	text-decoration: underline;
	font-weight: bold;
}
.link_rood:hover, .link_rood:active{ color: var(--rood); }

.referentie{
	font-size: 1rem;
	line-height: 1.4em;
	color: var(--grijs);
	margin-top: 5em;
}
.referentie ul{ padding-left: 1em; }
.referentie li::marker{ content: "• "; width: 1em; display: inline-block; }

.loading:before{
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: block;
	background: url(../images/loader.gif) no-repeat center center #fff;
	background-size: 150px 150px;
	z-index: 1000;
}

/* ------------------------------ FORMULIER ----------------------------------- */


.screen .button{
	position: relative;
	line-height: 46px;
	height: 48px;
	padding: 0 25px;
	box-sizing: border-box;
	border-radius: 100px;
	
	border: 1.5px solid var(--rood);
	background: var(--rood);
	color: var(--wit);
	filter: brightness(100%);
	
	font-weight: 600;
	font-size: 1em;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	transform: 300ms ease-in all;
	cursor: pointer;
}
.screen .button:hover, .screen .button:active{ filter: brightness(110%); }
.screen .button.disabled{ opacity: 0.4; filter: brightness(100%) !important; cursor: not-allowed; }

.screen .button.icon{
	width: 40px;
	height: 40px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 48px 48px;
	background-position: center center;
	padding: 0;
	border: 1.5px solid var(--zwart);
}
.button.icon.vorige{ background-image: url(../images/pijl-links.svg); }
.button.icon.volgende{ background-image: url(../images/pijl-rechts.svg); }
.button.icon.reset{ background-image: url(../images/reset.svg); }
.button.icon:hover{ filter: brightness(100%); opacity: 0.75; }

.screen .button.grijs{ border-color: var(--grijs); background: var(--grijs); color: var(--offblack); }
.screen .button.grijs:hover, .screen .button.grijs:active{ background: #ddd !important; }

.screen .button.zwart{ border-color: var(--offblack); background: var(--offblack); color: var(--offblack); }
.screen .button.zwart:hover, .screen .button.zwart:active{ background: #ddd !important; }

.screen .button.positie-rechts{ margin-left: auto; }
.screen .button.extra-padding{ padding: 0 45px; }
.screen .button.border{ background: none; }
.screen .button span i{ font-style: normal; }
.screen .button img + span{ margin-left: 20px; }

.button_groep{ display: flex; flex-wrap: wrap; margin-bottom: 1.6em; }
.button_groep .button{ margin: 0 18px 18px 0;}

label{
	display: block;
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1.5em;
	margin-bottom: 5px;
}

input[type="text"], .textarea {
	background: #fff;
	padding: 8px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 3px;
	color: var(--offblack);
	display: block;
	font-family: inherit;
	font-size: 1.4rem;
	line-height: 1.25em;
	border: 1px solid var(--grijs);
	margin: 0 0 30px 0;
}
.textarea{ resize: none; }

input[type=radio]{
	position: absolute;
	visibility: hidden;
}

input[type=radio] + label{
	display: block;
	box-sizing: border-box;
	position: relative;
	margin: 0 0 2px 0;
	padding-left: 34px;
	line-height: 24px;
	cursor: pointer;
	color: var(--zwart);
	font-weight: 600;
	font-size: 1.4rem;
	transition: all 0.25s linear;
}

input[type=radio] + label:before{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 24px;
	height: 24px;
	background: transparent;
	box-sizing: border-box;
	border: 2px solid var(--offblack);
	background: #fff;
	border-radius: 100%;
}
input[type=radio]:checked + label:before{ background: var(--rood); border-color: var(--rood); }


input[type=checkbox]{
	position: absolute;
	visibility: hidden;
}

input[type=checkbox] + label{
	display: block;
	box-sizing: border-box;
	position: relative;
	margin: 0 0 2px 0;
	padding-left: 34px;
	line-height: 22px;
	cursor: pointer;
	color: var(--zwart);
	font-weight: normal;
	font-size: 1.4rem;
}

input[type=checkbox] + label:before{
	content: "";
	position: absolute;
	left: 0px;
	top: 2px;
	width: 18px;
	height: 18px;
	background: transparent;
	box-sizing: border-box;
	border: 1.5px solid var(--offblack);
	background: #fff;
	border-radius: 2px;
}
input[type=checkbox] ~ img.vinkje{
	display: none;
	position: absolute;
	left: 10px;
	top: 12px;
	width: 18px;
	height: 18px;
}

input[type=checkbox]:checked + label{ color: var(--wit); }
input[type=checkbox]:checked + label:before{ background: var(--donkerrood); border-color: var(--donkerrood); }
input[type=checkbox]:checked ~ img.vinkje{ display: block; }

.keuze.checkbox{
	position: relative;
	margin: 0 0 18px 0;
	border-radius: 4px;
	padding: 10px;
	background: var(--lichtgrijs);
	cursor: pointer;
}
.keuze.checkbox:hover{ background: var(--rood); }
.keuze.checkbox:hover input[type=checkbox] + label{ color: var(--wit); }
.keuze.checkbox.aangevinkt{ background: var(--donkerrood); }
.keuze.checkbox .textarea{ margin: 4px 10px 10px 34px; width: calc(100% - 44px); border-color: var(--wit); }


/* ------------------------------- HEADER ----------------------------------- */

header{
	position: relative;
	padding: 35px 20px;
	width: 100%;
	max-width: 1920px;
	box-sizing: border-box;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .logo{ width: 513px; }
header .logo img{ display: block; width: 100%; height: auto; }



/* ------------------------------- SECTIE ----------------------------------- */

.content{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 75px 16px;
	max-width: 888px;
	flex-grow: 1;
}

section{
	position: relative;
	display: none;
}
section.actief{ display: block; }


.voortgang{
	align-items: center;
	margin: 0 0 40px 0;
}
.voortgang.actief{ display: flex; }
.voortgang .t{
	margin: 0 35px;
	text-transform: uppercase;
	font-weight: 500;
	text-transform: uppercase;
}

.start{ text-align: center; }
.start img.logo-payoff{ display: block; margin: 0 auto 75px auto; width: 62%; max-width: 468px; }
.start .button{ margin: 2em auto 0 auto; }


/* ------------------------------- CHECKLIST ----------------------------------- */

.keuzelijst h3{
	padding: 5px 10px;
	line-height: 1em;
	background: #E6E6E8;
	display: table;
	color: var(--grijs);
	margin: 0 0 1em 0;
}

.keuzelijst .keuze{
	position: relative;
	margin-bottom: 35px;
}

.keuzelijst .keuze h4{
	font-size: 2.4rem;
	line-height: 1.33em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
}

.keuzelijst .keuze .input{ display: flex; }
.keuzelijst .keuze .input label{ text-transform: uppercase; width: 114px; margin-right: 30px; }
.screen .keuzelijst .keuze input[type=radio] + label:before{ display: none; }
.keuzelijst .keuze .input input[type=radio]:checked + label{ background: var(--grijs) !important; color: #fff; border-color: var(--grijs); }


/* ---------------------------- GESPREKSHULP --------------------------------- */

.persoon_kolommen_wrapper{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding-left: 3.5%;
	margin-bottom: 45px;
}

.persoon_kolommen_wrapper .persoon{
	position: relative;
	width: 33.33%;
	max-width: 172px;
	aspect-ratio: 172 / 488;
	flex-shrink: 0;
}

.persoon_kolommen_wrapper .persoon img{ 
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left top;
}

.persoon_kolommen_wrapper .persoon button{
	width: 36px;
	height: 36px;
	position: absolute;
	display: block;
	border: none;
	background: none;
	text-indent: -3000em;
	margin: -18px 0 0 -18px;
	transition: ease-in all 300ms;
	cursor: pointer;
}
.persoon_kolommen_wrapper .persoon button:before, .persoon_kolommen_wrapper .persoon button:after{
	content: "";
	width: 18px;
	height: 18px;
	display: block;
	position: absolute;
	box-sizing: border-box;
	left: 50%;
	top: 50%;
	margin: -9px 0 0 -9px;
	transform-origin: center center;
	background: var(--wit);
	border: 1.5px solid var(--offblack);
	border-radius: 100px;
	opacity: 1;
	transition: ease-in all 300ms;
}
.persoon_kolommen_wrapper .persoon button:after{
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	opacity: 0;
}
.persoon_kolommen_wrapper .persoon button:hover:before{ border-color: var(--rood); transform: scale(1.2); }
.persoon_kolommen_wrapper .persoon button:hover:after{ border-color: var(--rood); background: var(--rood); opacity: 1; transform: scale(1.2); }
.persoon_kolommen_wrapper .persoon button.actief:before{ border-color: var(--donkerrood); }
.persoon_kolommen_wrapper .persoon button.actief:after{ border-color: var(--donkerrood); background: var(--donkerrood); opacity: 1; }

.persoon_kolommen_wrapper .persoon button[data-keuze="haaruitval"]{ left: 39%; top: 3%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="last_van_moeheid"]{ left: 51%; top: 9%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="last_van_somberheid"]{ left: 56%; top: 4%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="pijn_in_je_mond"]{ left: 67%; top: 11%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="ontstekingen"]{ left: 29%; top: 22%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="last_van_je_hart"]{ left: 50%; top: 26%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="misselijkheid"]{ left: 50%; top: 32%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="een_ander_gevoel_in_je_armen"]{ left: 90%; top: 37%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="bloedproblemen"]{ left: 50%; top: 39%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="last_van_diarree"]{ left: 50%; top: 46%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="last_van_je_handen"]{ left: 2%; top: 55%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="een_ander_gevoel_in_je_benen"]{ left: 76%; top: 74%; }
.persoon_kolommen_wrapper .persoon button[data-keuze="last_van_je_voeten"]{ left: 24%; top: 96%; }

.persoon_kolommen_wrapper .kolom_leeg{
	width: 4%;
}

.persoon_kolommen_wrapper .keuzes_bij_persoon_kolom{
	max-width: 356px;
	width: 33.33%;
	margin-left: 5%;
}
.persoon_kolommen_wrapper .keuzes_bij_persoon_kolom .keuze.checkbox{ margin-bottom: 10px; }

.persoon_kolommen_wrapper .disclaimer{
	position: absolute;
	bottom: 0;
	line-height: 1.3em;
	left: 33.33%;
}


.waarschuwing{
	border: 5px solid var(--donkerrood);
	padding: 27px 30px;
	position: relative;
	margin: 60px 0 0 0;
}

.waarschuwing h4{
	font-weight: 700;
	font-size: 2.0rem;
	line-height: 1.4em;
	color: var(--donkerrood);
	margin: 0 0 1em 0;
}

.waarschuwing ul{
	font-weight: 600;
	color: var(--donkerrood);
	line-height: 1.4em;
	padding-left: 1.2em;
}


/* ------------------------------- FOOTER ----------------------------------- */

footer{
	color: var(--offblack);
	font-size: 1.0rem;
	line-height: 1.4em;
	font-weight: 500;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

footer .logo-footer{
	display: block;
	width: 300px;
	height: auto;
	margin: 0 auto 25px auto;
}

/* ------------------------------- PRINT ----------------------------------- */


.screen .print-only{ display: none; }
.print .screen-only, .button:not(label){ display: none; }

.print{ min-width: 960px; line-height: 1.4em; }
.print .wrapper{ max-width: 960px; }
.print .content{ max-width: 960px; padding: 0 0 60px 0; }
.print[data-type="gesprekshulp"] .content{ padding-bottom: 30px;  }
.print section:not(.screen-only){ display: block; }

.print h1, .print .h1{ font-size: 2.4rem; font-family: "Poppins", sans-serif; font-weight: 700; margin-bottom: 1.2em; }
.print h2.rood{ color: var(--donkerrood); font-size: 3.2rem; margin-bottom: 0.5em; font-family: "Manrope", sans-serif; font-weight: 800; }
.print h2, .print .h2, .print h3{ font-size: 2.0rem; font-family: "Poppins", sans-serif; font-weight: 700; margin-bottom: 0.7em; }

.print-start .invulvelden_papier{ 
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}

.print-start .invulvelden_papier .veld{
	border-bottom: 1px solid var(--zwart);
	margin-bottom: 35px;
}
.print-start .veld:last-child{ margin-bottom: 0; }
.print-start .veld.w33 { width: calc(33.33% - 20px); }
.print-start .veld.w66 { width: calc(66.66% - 20px); }
.print-start .veld.w100{ width: 100%; }

.print-start .invulvelden_papier .veld b{
	font-size: 1.2rem;
	font-weight: 500;
	display: block;
	line-height: 1.33em;
}

.print-start .invulvelden_papier .veld span{
	font-size: 1.6rem;
	line-height: 34px;
	font-weight: 600;
	padding-left: 8px;
	display: block;
}

.print .keuzelijst{ margin-top: 30px; }

.print .keuzelijst h3{
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5em;
	background: none;
	padding: 0;
	margin: 0 0 -0.2em 0;
}

.print .keuzelijst .keuze.radio-als-button{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 0;
	margin: 0;
	border-bottom: 1px solid var(--grijs);
}

.print .keuzelijst .keuze.radio-als-button h4{
	font-size: 1.4rem;
	line-height: 1em;
	font-weight: 600;
	margin: 0;
}

.print .keuzelijst .keuze.radio-als-button .input{ width: 160px; }
.print .keuzelijst .keuze.radio-als-button .input label{ width: 80px; }
.print .keuzelijst .keuze .input input[type=radio]:checked + label{ background: none !important; color: var(--offblack); border-color: transparent; }

.print .bijwerkingen_keuzes_persoon{ margin-top: 26px; max-width: 820px; }
.print .persoon_kolommen_wrapper{ padding-left: 0; }
.print .persoon_kolommen_wrapper .persoon{ max-width: 160px; }
.print .persoon_kolommen_wrapper .persoon img{ width: 160px; height: 454px; }
.print .persoon_kolommen_wrapper .kolom_leeg{ display: none; }
.print .persoon_kolommen_wrapper .keuzes_1{ order: -100; }
.print .persoon_kolommen_wrapper .keuzes_bij_persoon_kolom{ margin-left: 0; width: auto; display: flex; flex-direction: column; align-items: flex-start; }
.print .persoon_kolommen_wrapper .keuzes_2{ width: 320px; }
.print .persoon_kolommen_wrapper .keuzes_bij_persoon_kolom .keuze.checkbox.aangevinkt{ background: var(--lichtgrijs); }
.print .persoon_kolommen_wrapper .disclaimer{ left: calc(100% - 320px); color: var(--grijs); font-size: 1.2rem; line-height: 1.6em; font-weight: 500; }

.print input[type=checkbox] + label{ padding-left: 28px; }
.print input[type=checkbox]:checked + label{ color: var(--zwart); }
.print .keuze.checkbox.print-geen-achtergrond{ background: none !important; padding: 0; }
.print .keuze.checkbox.print-geen-achtergrond input[type=checkbox] ~ img.vinkje{ left: 0px; top: 2px; }
.print .keuze.checkbox.print-verberg-indien-niet-aangevinkt:not(.aangevinkt){ display: none; }
.print .keuze.checkbox .textarea{ margin-left: 30px; padding: 0; color: var(--zwart); }
.print .textarea{ margin-bottom: 16px; white-space: pre-wrap; }
.print textarea[rows="3"] + .textarea{ min-height: 71px; }
.print textarea[rows="5"] + .textarea{ min-height: 106px; }

.print section.checkbox_lijst{ margin-bottom: 25px; }
.print .waarschuwing{ margin-top: 20px; padding: 22px 24px; }
.print .referentie{ margin-top: 10px; }

.print[data-type="gesprekshulp"] footer .logo-footer{ display: none; }
.print footer{ padding: 0; }
.print footer p{ max-width: none; margin: 0 auto; text-align: center; }

/* ------------------------------- RESPONSIVE ----------------------------------- */

@media all and (max-width: 888px){
	
	.screen .persoon_kolommen_wrapper{ padding-left: 0; }
	.screen .persoon_kolommen_wrapper .kolom_leeg{ display: none; }
}

@media all and (max-width: 780px){
	
	header .logo{ width: 218px; }
	header .button span i{ display: none; }
	
	.screen .button{ padding: 0 14px; }
	.screen .button img + span{ margin-left: 8px; }
	.screen .button_groep{ margin-bottom: 3em; }
	
	.screen h1, .screen .h1{ font-size: 3.2rem; }
	.screen h2, .screen .h2{ font-size: 2.4rem; }
	
	.screen .keuzelijst h3{ font-size: 1em; font-weight: 500; background: none; padding: 0; color: var(--grijs); margin-bottom: 2em; }
	.screen .keuzelijst .keuze h4{ font-size: 2.0rem; }
	
	.screen .persoon_kolommen_wrapper{ flex-direction: column; justify-content: flex-end; }
	.screen .persoon_kolommen_wrapper .persoon{ width: 172px; position: absolute; left: 0; top: 0; }
	.screen .persoon_kolommen_wrapper .persoon button:before{ width: 14px; height: 14px; margin: -7px 0 0 -7px; }
	.screen .persoon_kolommen_wrapper .persoon button:after{ width: 8px; height: 8px; margin: -4px 0 0 -4px; }
	.screen .persoon_kolommen_wrapper .keuzes_bij_persoon_kolom{ max-width: none; width: calc(100% - 172px - 16px); margin-left: 188px; }
	.screen .persoon_kolommen_wrapper .disclaimer{ position: relative; width: 100%; bottom: auto; left: auto; margin-top: 24px;  }
	
	.screen footer{ text-align: left; }
	.screen footer p{ max-width: 230px; margin: 0; }
}

@media all and (max-width: 500px){
	
	.screen .persoon_kolommen_wrapper .persoon{ width: 35vw; }
	.screen .persoon_kolommen_wrapper .keuzes_bij_persoon_kolom{  width: calc(100vw - 35vw - (16px * 3)); margin-left: calc(35vw + 16px); }
}

@media all and (max-width: 360px){
	
	header .logo{ width: 180px; }
}