header {min-height: 4rem;}
.logo-fleva{height:10rem; top:4rem;}

.assessment .results.screen .resultrows,
.assessment .results.screen .introduction,
.assessment .results.screen .result-buttons,
.assessment .results.screen .resultform-in-end,
.assessment .feedback.screen,
.assessment ol.answers{max-width: 80%; margin: auto;}
.assessment .results.screen .assessment-form .introduction {max-width: 100%; margin-bottom: 1rem;}

.assessment h1.visible.title {padding-left: 10%;}
.assessment .start.screen h1.visible.title{font-family: "LemonmilkBold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}

.assessment .start.screen .content-container {background-color: #ffffff; max-width: 90%; margin: auto; padding-left: 5vw; padding-top: 2rem; padding-bottom: 2rem;}
.assessment .start.screen h2.visible.subtitle {font-size: 1.5rem; margin-bottom: 1rem;}

.assessment .start .text {width: 100%; margin-right:0px; margin-bottom:2rem;}
.assessment .question.screen h2, .question.screen .title, .feedback.screen .title {display:none;}
.assessment .question.screen .question.text	{color:#ffffff; background-color: var(--color-paars); padding: 1rem 10% 0.5rem 10%; font-weight: 600; font-size: 2rem; margin-bottom:4rem;}
.assessment .question-content {padding-bottom: 2rem;}

.assessment li.answer {display: inline-block; width: 40%; margin-left: 5%; margin-right: 5%; background: unset; background-color: var(--color-paars); padding:0px; -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem;}
.assessment .question.screen .image-container{aspect-ratio: 678 / 406; background: url("/assets/images/answer-img-back-purple.webp") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem; text-align: center; width: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.assessment .question img {width: 94%; margin-left: auto; margin-right: auto; animation: appearOpacity 1.5s 0.5s forwards;}
.assessment .progressbar{text-align:center;}
.assessment .progress{text-align:center; display:none;}
.assessment .progress-line{width:1rem !important; border-bottom: solid 0px #000000;}
.assessment .progress-item{background-color:#ffffff; border: solid 2px #000000; font-size:0.8rem;}
.assessment .progress-item-done{background-color: var(--color-roze);}
.assessment .progress-item-active{background-color: var(--color-roze);}

.assessment .results.screen .introduction .text {background-color: #ffffff; padding: 1rem;}

.assessment .results.screen .resultrows {margin-top: 1.5rem; margin-bottom: 1.5rem;}
.assessment .row {background-color: var(--color-roze); padding: 0.5rem 1rem; margin-bottom: 0.5rem; font-family: "LemonmilkBold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; position:relative;}

.assessment .row .topic, .assessment .row .percentage {display: inline-block;}
.assessment .row .topic{max-width: calc(100% - 5rem);}
.assessment .row .percentage{position:absolute; right:2rem;}
/* back1=geel, 2=roze, 3=paars*/

body.back01 .assessment .progress-item-done{background-color: var(--color-roze); color: #000000;}
body.back01 .assessment .progress-item-active{background-color: var(--color-roze); color: #000000;}

body.back02 .assessment .question.screen .image-container{background-image: url("/assets/images/answer-img-back-yellow.webp");}
body.back02 .assessment .question.screen .question.text{background-color: var(--color-groen); color: #000000;}
body.back02 .assessment li.answer{background-color: var(--color-groen); color: #000000;}
body.back02 .assessment .progress-item-done{background-color: var(--color-paars); color: #ffffff;}
body.back02 .assessment .progress-item-active{background-color: var(--color-paars); color: #ffffff;}

body.back03 .assessment .question.screen .image-container{background-image: url("/assets/images/answer-img-back-pink.webp");}
body.back03 .assessment .question.screen .question.text{background-color: var(--color-roze); color: #000000;}
body.back03 .assessment li.answer{background-color: var(--color-roze); color: #000000;}
body.back03 .assessment .progress-item-done{background-color: var(--color-groen); color: #000000;}
body.back03 .assessment .progress-item-active{background-color: var(--color-groen); color: #000000;}
.assessment .results.screen .result-buttons{display:none;}
.resultform-in-end {background-color:#ffffff; padding: 1rem;}
.textinput.field, .email.field {margin-top: 1.125rem; margin-bottom: 1rem;}
.assessment-form .checkbox input[type="checkbox"] {margin-right: 1rem;}
.assessment-form p.required-text, .assessment-form .end {font-size: 0.8rem;}
.assessment-form .button {margin-top: 2rem;}
.textinput.field label, .email.field label {margin-right: 1rem;}

.assessment .back-button {background-color: var(--color-grijs); display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem;  margin-left: 5%; -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5); cursor:pointer;}

.assessment .wrapper{max-width: 80%; margin: auto;}

@media screen and (max-width: 667px){
	.assessment .progressbar{width:90%;}
	.assessment .progress-item:first-of-type {margin-left: 1rem;}
	.assessment .progress-item{margin-bottom:0.5rem;}
	.assessment .start.screen h1.visible.title{font-size:1.5rem;}
	.assessment h1.visible.title {padding-left: 5%;}
	.assessment ol.answers{width:100%;}
	.assessment li.answer {display: block; width: 100%; margin-left: auto; margin-right: auto;     margin-bottom: 1rem;}
	.assessment img{width:100%; margin: 0px;}
	.assessment .start .text{width:100%; margin-right:0px;}
	.assessment .hasimage {width: 100%; margin-right: 0px;}
	.assessment .question img{width: 80%; opacity:0; animation: doorCloseLeft 1s  forwards;}
	.assessment .question.screen .question.text{font-size:1.5rem; margin-bottom:2rem;}
	.assessment .question.screen .image-container {aspect-ratio: 678 / 306;}
	.assessment .wrapper {max-width: 80%; margin: auto; text-align: center; margin-bottom: 2rem;}
	.assessment .back-button{margin-left: auto; margin-right: auto;}
	.logo-fleva {height: 4rem; top: 1rem;}
	.logo-mbo{left:5%;}
	.assessment .start.screen .content-container{padding-right:5vw;}
	.assessment .results.screen .resultrows,
	.assessment .results.screen .introduction,
	.assessment .results.screen .result-buttons,
	.assessment .results.screen .resultform-in-end{max-width:90%;}	
}