:root {
  --dblauw: #0D253C;
  --blauw: #3ABFF0;
  --semiblauw: #1E558AD9;
}

html, body {
	font-family: 'Baloo 2', cursive;
	overflow-x:hidden;
	position:relative;
	min-height:100vh;
	background-color:#000000;
}

#intro {
	margin-top:-150px;
	position:relative;
	z-index:10;
	padding:0;
	min-height:0;
	height:auto;
}

#intro .titel {
	position:absolute;
	top:200px;
	text-align:center;
	width:100%;

}



.helft-transport-en-logistiek {
	background-size:cover;
	background-position:center center;
	height:1060px;
}



.helft {
	text-align:center;
}

.helft .logos {
	background-color:#ffffff;
	margin:0 auto;
	margin-top:50px;
	width:40%;

}

.helft img {
	width:100px;
	height:auto;
	padding:5px;
	margin: 0 20px;
}

.helft .btn {
	width:200px;
	margin:10px 0px;
}

.overview.pakket, .lesson.pakket {
	background-size:cover;
	background-position:center center;
}

.overview.transport, .lesson.transport {
	background-size:cover;
	background-position:center center;
}

.overview.zeehavens, .lesson.zeehavens {
	background-size:cover;
	background-position:center center;
}

.profiel, .privacy {
	background-size:cover;
	background-position:center center;
}

nav {
	height:200px;
	position:relative;
	padding:0;
	z-index:999;
	width:100%;
	top:0;
}

nav .navbar-brand {
	display:inline;
}

nav .col-logo {
	height:200px;
	background-color:var(--blauw);
	padding:25px;
	text-align:center;
	object-fit: contain;
}

nav .col-logo img {
	max-width:calc(100% - 50px);
	max-height:calc(100% - 50px);
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}





nav .col-pvo {
	height:100px;
}


nav .col-pvo img {
	width:auto;
	max-height:100%;
	max-width:calc(100% - 25px);
}

nav img.flag {
	height:50px;
	width:50px;
}

nav .language-select {
	margin-top:25px;
}

nav .col-account {
	height:100px;
	text-align: center;
}

nav .col-account img {
	max-width:calc(100% - 50px);
	max-height:calc(100% - 50px);
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

nav .col-account a {
	line-height:100px;
	font-size:18px;
	color:var(--blauw);
	text-transform:uppercase;
	transition:0.3s;
}


nav .col-account a:hover {
	text-decoration:none;
	transition:0.3s;
}


@media (max-width: 1199.99px) {
	nav .col-account a {
		font-size:15px;
	}
}

@media (max-width: 991.99px) {

	nav .col-account {
		padding-top:12px;
	}
	nav .col-account a {
		line-height:25px;
	}

}

nav .hamburger {
	float:right;
	height:40px;
	width:40px;
	cursor:pointer;
	position:relative;
	display:block;
	overflow:hidden;
	transition:.3s;
	-webkit-transition:.3s;

	cursor:pointer;
}
nav .hamburger .line {
	width:40px;
	height:3px;
	position:absolute;
	background:#ffffff;
	transition:.3s;
	-webkit-transition:.3s;
}
nav .hamburger .line.l1 { top:9px; }
nav .hamburger .line.l2 { top:20px; }
nav .hamburger .line.l3 { top:31px; }

nav .hamburger:hover {
	cursor:pointer;
}
nav .hamburger.opened .line.l1 { transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); top:16px;  }
nav .hamburger.opened .line.l2 { transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); top:16px; }
nav .hamburger.opened .line.l3 { transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); top:16px;  }

.icon {
  position: absolute;
  top: 50%;
  left: 67%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition:0.3s;
}

nav .col-account a:hover .icon {
	left:69%;
}

nav .col-account a:hover .arrow::after, nav .col-account a:hover .arrow::before {
	right: -1px;
	transition:0.3s;
}

.arrow {
  position: absolute;
  top: 14px;
  width: 60%;
  height: 3px;
  background-color: var(--blauw);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  transition:0.3s;
}

.arrow::after, .arrow::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 3px;
  right: 0px;
  background-color: var(--blauw);
  transition:0.3s;
}

.arrow::after {
  top: -4px;
  transform: rotate(45deg);
}

.arrow::before {
  top: 4px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  transform: rotate(-45deg);
}

@media (min-width: 576px) and (max-width: 991px) {
	nav .col-logo img {
		height:auto;
		max-width:calc(100% - 50px);
		position: absolute;
		top: 50%;
	  	left: 50%;
	  	transform: translate(-50%, -50%);
	}

	nav .col-pvo img.logo {
		width:auto;
		height:50px;
		position: absolute;
		top: 0;
	}


	nav .language-select {
		float:none !important;
		position:absolute;
		top:30px;
		padding-left:10px;
	}

	nav img.flag {
		height:25px;
		width:25px;

	}

}

@media (max-width: 991.99px) {

	nav {
		height:100px;
	}

	nav .col-logo {
    	height: 100px;
   	}

   	nav .col-logo img {
    	max-width: calc(100% - 20px);
    	max-height: calc(100% - 30px);
   	}

   	nav .col-pvo img.logo  {
	    width: auto;
	   	height:auto;
	   	max-height:50px;
	   	max-width:70px;
	    position: absolute;
		top: 0;
	  	left: 50%;
	  	transform: translateX(-50%);
	}


	nav .language-select {
		float:none !important;
		position:absolute;
		top:30px;


	}

	nav img.flag {
		height:25px;
		width:25px;

	}




}


.bg-blue {
	background-color: var(--blauw);
}

.bg-dblue {
	background-color: #014c83;
}

.bg-black {
	background-color: #000000;
}

.bg-white {
	background-color: #ffffff;
}

.blauw {
	color:var(--blauw);
}

.wit {
	color:#ffffff;
}

.zwart {
	color:#000000;
}


.no-padding {
	padding-left:0;
	padding-right:0;
}

.fill-image {
	object-fit: cover;
	max-width:100%;
}

a {
	color: var(--blauw);
}

.btn {
	background-color:var(--dblauw);
	color:#ffffff;
	border:1px solid var(--blauw);
	padding:20px;
	text-transform:uppercase;
	border-radius:0;
	margin-right:30px;
	font-size:20px;
	font-weight:500;
	transition:0.3s;

}

.btn:hover, .btn.active {
	background-color:var(--blauw);
	color:#ffffff;
	border-color:#ffffff;
}

.helft .btn-inloggen, .helft .btn-registreren {
	margin:0 30px;
}

@media (max-width: 991.99px) {
	.btn {
		padding:15px;
		font-size:13px;
		margin-right:22px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.btn {
		padding:15px 35px;
		font-size:15px;
		margin-right:22px;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.btn {
		padding:10px 35px;
		font-size:18px;
		margin-right:22px;
	}
}

@media (max-width: 575px) {
	.btn {
		width:100%;
		margin-bottom:10px;
	}
}


h1 {
	color:var(--dblauw);
}


h1 .dot {
	width:20px;
	height:20px;
	border-radius:20px;
	display:inline-block;
	margin:0px 0px 0px -30px;
	background-color:var(--dblauw);
	position:relative;
	overflow:visible;
	animation:setLine 1s 1;
	-webkit-animation:setLine 1s 1;
}
h1 .dot.unset {
	animation:none;
	-webkit-animation:none;
}
h1 .dot .line {
	width:0px;
	transition:.7s;
	-webkit-transition:.7s;
	position:absolute;
	right:20px;
	height:2px;
	background-color:var(--dblauw);
	top:calc(50% - 1px);
}

h1.challenge {
	color:var(--dblauw);
}

h2 {
	color:var(--dblauw);
	margin-top:40px;
	font-size:24px;
}

h3 {
	color:#000000;
	text-align:center;
}

@keyframes setLine {
	0% { box-shadow:0px 0px 0px 0px rgba(0,140,203, 1); }
	100% { box-shadow:0px 0px 0px 30px rgba(0,140,203, 0); }
}
@-webkit-keyframes setLine {
	0% { box-shadow:0px 0px 0px 0px rgba(0,140,203, 1); }
	100% { box-shadow:0px 0px 0px 30px rgba(0,140,203, 0); }
}


section {
	padding:50px 0;
	min-height:calc(100vh - 150px);
}

.dashboard {
	text-align:center;
	background-size:cover;
	width:100%;
	aspect-ratio:3/1.3;
	min-height:unset;
	margin-top:-100px;
	padding:0;
}

.dashboard .push {
	padding-top:20px;
}

.dashboard .dropdowns {
	margin-top:15%;

}

.section, .overview, .lesson {
	background-size:cover;
	background-position:center;
	width:100%;
	min-height:calc(100vh - 200px);
	margin-top:-100px;
	padding:0;
}

.section .push {
	padding-top:20px;
}

.section .container-fluid > .row,
.overview .container-fluid > .row,
.lesson .container-fluid > .row {
	padding-left:60px;
}

.section .bg-white,
.overview .bg-white,
.lesson .bg-white {
	margin-top:50px;
}

.logos {
	background:white;
	padding:15px 0;
	text-align:center;
}

.logos img {
	height:50px;
	width:auto;
	margin:0 auto
}

.logo-container {
	margin:15px;
	padding:15px;
	background-color:#ffffff;
}


.inv {
	background-color: var(--blauw);
	color:#ffffff;
	display:inline-block;
}


.intro-phrase {
	font-weight:300;
	color:var(--blauw);
	font-size:30px;
	line-height:120%;
	text-transform: uppercase;
	text-align:center;
}

.intro-phrase-big {
	font-weight:700;
	color:#ffffff;
	line-height:100%;
	font-size:90px;
	margin-bottom:30px;
	text-transform: uppercase;
	margin-top:-10px;
}
.intro-welkom {
	color:#ffffff;
}


@media (min-width: 1200px) and (max-width: 1499.99px) {
	.intro-phrase-big {
		font-size: 70px;
	}
}

@media (max-width: 991.99px) {
	.dashboard {
		margin-top:0;
	}


	.intro-phrase-big {
		font-size: 30px;
	}
}

@media (max-width: 767.99px) {

	.logos {
		background-color:transparent;
	}

	.dashboard {
		aspect-ratio:1/1.2;
	}
}

@media (min-width: 768px) and (max-width: 1199.99px) {

	.intro-phrase {
		font-size:20px;
	}


	.logos img {
		height:40px;
		padding:5px 0 0 0;
	}

	.logos .col-12:first-of-type img {
		height:50px;
		padding:10px 0;
	}

	.section .row {
		padding-left:0px;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {

	#intro {
		margin-top:0px;
		height:calc(100vh - 100px);
	}

	#intro .titel {
		top:calc(50% - 15px);
	}

	.helft {
		height:calc((100vh - 100px) / 2);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.intro-phrase {
		margin-top:0;
		font-size:20px;
	}

	.intro-phrase-big {
		font-size:30px;
	}
}

@media (max-width: 575px) {

	#intro {
		margin-top:0px;
		height:calc(100vh - 100px);
	}

	#intro .titel {
		top:calc(50% - 15px);
	}

	.helft {
		height:calc((100vh - 100px) / 2);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.helft .btn {
		font-size:16px;
		padding:10px;

	}

	.helft .logos {
		width:100%;
		margin-top:10px;
	}

	.helft .logos img {
		width:100px;
		margin:10px;
	}

	.intro-phrase {
		margin-top:0;
		font-size:20px;

	}

	.intro-phrase-big {

		font-size:30px;
	}

	.dropdown-links {
		top:50px;
	}


}

#overview {
	margin-top: -100px;

}

#overview p, #overview h2, #overview a {
	margin-left:25px;
	color:#676767;
}

#overview .row .row {
	margin-left:10px;
	margin-right:10px;
	margin-bottom:25px;
}

#overview .lesson-info {
	background-color:#000000;
	text-align:center;
	margin-bottom:30px;
}

#overview .lesson-info a {
	color:#ffffff;
}

#overview .lesson-info h2 {
	color:#ffffff;
	font-weight:500;
	text-transform:uppercase;
	font-size:16px;
	margin-top:0px;
	margin-left:0px;
	padding-bottom:10px;
}

#overview .lesson-info h3 {
	color:var(--blauw);
	font-weight:500;
	text-transform:uppercase;
	font-size:13px;
	padding-top:10px;
	margin-bottom:0;
}

#overview .titelbalk {
	background-color:#000000;
	padding:5px 30px;
	color:#ffffff;
	font-size:30px;
	margin-top:25px;
	margin-left:25px;
	margin-bottom:20px;
	font-weight:bold;
	text-transform:uppercase;
	display:inline-block;
}

@media (max-width: 991px){
	#overview {
		margin-top:0px;
		margin-left:0;
	}
}

.playvlak {
	height:100%;
	padding:20px;
	padding-left:150px;
	background-image:url(../images/play.png);
	background-repeat:no-repeat;
	background-position:20px center;
	cursor:pointer;
}

.playvlak h3 {
	color:#ffffff;
	font-weight:bold;
	text-align:left;
	text-transform:uppercase;
	font-size:40px;
}

.playvlak p {
	color:#ffffff;
	text-transform:uppercase;
}

#lesson {
	margin-top:-100px;
}


#lesson p {
	margin-left:25px;
	color:#676767;
	line-height:150%;
}

#lesson .row .row {
	margin-left:10px;
	margin-right:10px;
	margin-bottom:25px;
}

#lesson .titelbalk {
	background-color:#000000;
	padding:5px 30px 5px 60px;
	color:#ffffff;
	font-size:20px;
	margin-top:45px;
	margin-left:45px;
	margin-bottom:20px;
	font-weight:bold;
	text-transform:uppercase;
	display:inline-block;
	position:relative;
}

#lesson .aanduiding {
	background-color:var(--blauw);
	color:#ffffff;
	font-weight:bold;
	display:inline-block;
	font-size:26px;
	font-weight:bold;
	padding:1px 10px 1px 10px;
	text-transform:uppercase;
	position:relative;
	margin-left:20px;
}

#lesson .aanduiding:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--blauw);
  position: absolute;
  top: 10px;
  left: -9px;
}

#lesson .titelbalk .hex {
	height:70px;
	width:70px;
  	background: var(--blauw);
  	-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  	clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  	display:inline-block;
  	position:absolute;
  	left:-23px;
  	top:-15px;
  	color:#ffffff;
  	font-size:50px;
  	text-align:center;
  	line-height:70px;
}

#lesson .progression {
	position:absolute;
	bottom:25px;
	left:40px;
	font-weight:600;
	background-image:url(../images/indicator.png);
	background-size:70px;
	background-repeat:no-repeat;
}

#lesson .progression .progress-number {
	height:70px;
	width:70px;
  	color:#ffffff;
  	font-size:40px;
  	text-align:center;
  	line-height:64px;
	z-index:7;
	position:relative;
	right:10px;
}

#lesson .progression .total-number {
	color:#ffffff;
	width:25px;
	height:25px;
	position:absolute;
	right:-3px;
	top:19px;
	z-index:8;
	text-align: center;
	line-height:25px;
	font-size:10px;
}

#lesson .btn {
	background-color:var(--blauw);
	color:var(--dblauw);
	font-weight:600;
	margin:25px 25px 50px 25px;
	left:50%;
}

#lesson .btn.answer {
	padding:10px 20px;
	position: absolute;
	bottom:30px;
	right:40px;
	margin-right:0;
	margin-bottom:0;
	left:auto;
}

@media (min-width: 1500px){
	.col-xxl-6 {
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	}
}

@media (min-width: 992px) and (max-width:1199px) {

	#lesson .titelbalk {
		font-size:20px;
		padding: 5px 30px 5px 40px;
	}

	#lesson .titelbalk .hex {
		height:50px;
		width:50px;
		top:-7px;
		font-size:30px;
		line-height:50px;
	}

	#lesson .aanduiding {
		font-size:20px;
	    padding: 2px 10px 2px 10px;
	}

	#lesson .aanduiding:after {
		top:7px;
	}

}

@media (min-width: 768px) and (max-width:991px) {

	#lesson {
		margin-top:0px;
		margin-left:0;
	}


	#lesson p {
    margin-left: 0;
   }

	#lesson .titelbalk {
	    padding: 5px 30px 5px 40px;
	    font-size:20px;
	    margin-left:15px;
   }

   #lesson .titelbalk .hex {
		height:50px;
		width:50px;
		top:-7px;
		font-size:30px;
		line-height:50px;
	}

	#lesson .aanduiding {
		font-size:20px;
	    padding: 2px 10px 2px 10px;
	    margin-left: 10px;
	}

	#lesson .aanduiding:after {
		top:7px;
	}

	#lesson .btn {
		font-size:18px;
	}

}

@media (min-width: 576px) and (max-width:767px) {
	#lesson {
		margin-top:0px;
		margin-left:0;
	}


	#lesson p {
    	margin-left: 0;
   	}

   	#lesson .titelbalk {
	    padding:5px 20px 5px 35px;
	    font-size:20px;
	    margin-left:15px;
   }

   #lesson .titelbalk .hex {
		height:50px;
		width:50px;
		top:-7px;
		font-size:30px;
		line-height:50px;
	}

	#lesson .progression {
		left:15px;
	}

	#lesson .aanduiding {
		font-size:20px;
	    padding: 2px 10px 2px 10px;
	    margin-left: 10px;
	}

	#lesson .aanduiding:after {
		top:7px;
	}

	#lesson .btn {
		font-size:18px;
	}

	#lesson .btn.answer {
		right:15px;
	}

}

@media (max-width:575px) {

	#lesson {
		margin-top:0px;
		margin-left:0;
	}


	#lesson p {
    	margin-left: 0;
   	}

   	#lesson .titelbalk {
	    padding:5px 20px 5px 35px;
	    font-size:20px;
	    margin-left:15px;
	    margin-bottom:50px;
	    display:block;
   }

   #lesson .titelbalk .hex {
		height:50px;
		width:50px;
		top:-7px;
		font-size:30px;
		line-height:50px;
	}

	#lesson .aanduiding {
		font-size:20px;
	    padding: 2px 10px 2px 10px;
	    margin-left: 10px;
	    position:absolute;
	    right:15px;
	    top:15px;
	}

	#lesson .aanduiding:after {
		display:none;
	}

	#lesson .btn {
		font-size:18px;
		width:100%;
		margin:0;
		margin-bottom:150px;
	}

	#lesson .btn.answer {
		width:auto;
		right:15px;
		margin-bottom:auto;
		bottom:40px;
	}
}


.form {
	margin-top:25px;
	padding:25px;
	background-color:#ffffff;
	color:#676767;
	width:490px;
	text-align:center;
}

.form p {
	text-align: left;
}

.form a {
	font-size:12px;
	color:var(--dblue);
	text-align: center;
	display:inline-block;
}

.form label a {
	font-size:16px;
}

.form .btn {
	background-color:var(--blauw);
	color:#000000;
	width:76%;
	font-weight:600;
	text-align:center;
	display:block;
	margin-left:12%;
	padding:20px 30px;
}

.form input, .form select {
	text-align:center;
	display:block;
	padding:10px;
	width:100%;
	margin-bottom:20px;
	background-color:#E1E4E7;
	border:0;
	border-radius:0;
	font-weight:500;
}

select:invalid {
  color: gray;
}

.form input:focus {
	border:0;
	outline:0;
}


@media (max-width: 575px) {
	.form {
		width:100%;
	}
}

.login-intro {
	margin-top:40px;
}

@media (max-width: 991.98px) {

	.login-intro {
		margin-top:20px;
	}
}

.redbar {
	background-color:var(--dblauw);
	height:0px;

}

.btn-lesson {
	text-align:center;
	color:#ffffff;
	text-transform: uppercase;
	font-weight:500;
	padding:8px 16px;
	display:inline-block;
	width:74%;
	margin-left:13%;
	margin-bottom:10px;
	font-size: 14px;
	border:0;
}

.btn-lesson:hover {
	color:#ffffff;
}

.btn-niveau {
	border-radius: 20px;
	text-align:center;
	color:#ffffff;
	text-transform: uppercase;
	font-weight:500;
	padding:8px 16px;
	display:inline-block;
	width:200px;
	background-color:var(--dblauw);
	margin:0 25px;
}

.btn-niveau:hover {
	color:#ffffff;
}

.btn-niveau.actief {
	background-color:var(--blauw);
}

.gevorderd-waarschuwing {
	display:none;
}

#gevorderd {
	display:none;
}

.poweredby img {
	margin-top:50px;
	max-width:100%;
}

.btn-start {
	background-color:var(--dblauw);
}

.btn-continue {
	background-color:#aeaeae;
	color:var(--dblauw);
}

.btn-continue:hover {
	color:var(--dblauw);
}

.btn-completed {
	background-color:#007500;
}

.btn-opnieuw {
	background-color:#007500;
}

.btn-dropdown-container {
	position: relative;
	width:100%;
	display:inline-block;
	vertical-align:top;
	margin-right:10px;
	margin-left:10px;
}

.btn-dropdown-container .btn {
	vertical-align:top;
	width:100%;
	margin-bottom:0px;

}

.btn-sub  {
	position:relative;
	z-index:100;
}

.btn-dropdown-container:nth-of-type(2) {
	width:320px;
}

.dropdown-links {
	display:none;
	position:absolute;
	left:0;
}

.dropdown-links.visible {
	display:inline-block;
	width:100%;
}

@media (max-width: 767.99px) {

	.btn-dropdown-container {
		margin:10px 0;
	}
}

#header-video {
	width:100%;
	height:550px;
	padding:0;
	position:relative;
}

#header-video .header-image {
	object-fit:cover;
	width:100%;
	height:550px;
	margin-top:0px;
}


#header-image {
	width:100%;
	height:400px;
	padding:0;
	position:relative;
}


#header-image .header-image {
	object-fit:cover;
	width:100%;
	height:400px;
	margin-top:0px;
}

.header-image {
	margin-top:58px;
}

.playmovie {
	background-image:url(../images/play.png);
	background-size:cover;
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin: auto;
	cursor:pointer;
	filter: drop-shadow(3px 3px 4px #000000);
}

.quiz-card {
	margin-bottom:120px;
	display:none;
	border:0;
}

.quiz-card:first-of-type {
	display:block;
}

.quiz-card .card-body {
	padding:0 15px;

}

.quiz-card .card-body h2 {
	padding-top:15px;
	margin-top:0;
	font-weight:600;
}


.quiz-card ul {
	list-style:none;
	padding-left:0;
	margin-left:-30px;
	margin-right:-15px;
	margin-bottom:0;
	font-weight:500;
}

.quiz-card ul li {
	padding:10px;
	background-color:var(--dblauw);
	border:1px solid var(--dblauw);
	color:#ffffff;
	font-size:18px;
	margin-bottom:10px;
	cursor:pointer;
	text-align:center;
}

.quiz-card span.letop {
	display:block;
	margin-left:25px;
	margin-bottom:25px;
	color:var(--blauw);
}

.quiz-card span.blauw {
	margin-left:0px;
}

.quiz-card ul li {
	transition:0.3s;
}


.quiz-card ul li span {
	font-size:80%;
	transition:0.3s;
}

.quiz-card ul li:last-of-type {
	margin-bottom:0;
}

.quiz-card ul li.selected {
	background-color:var(--blauw);
	border:1px solid var(--dblauw);
	transition:0.3s;
}


.quiz-card ul li.selected span {
	color:var(--dblauw);
}

.quiz-card ul li label {
	margin:0;
	pointer-events:none;
}
.quiz-card ul li input {
	visibility:hidden;
	height: 0;
	float:left;
}

.quiz-card .card-img {
	object-fit: cover;
    height: 100%;
    border-radius:0;
}

@media (min-width: 992px) and (max-width:1199px) {
	.quiz-card ul li {
		font-size:15px;
	}


}


@media (min-width: 768px) and (max-width:991px) {
	.card-img {
		margin-bottom:25px;
	}

	.card-body {
		margin-top:25px;
	}

	.quiz-card ul {
		margin-left:-15px;
	}
}

@media (max-width:767px) {
	.card-img {
		margin-bottom:25px;
	}

	.card-body {
		margin-top:25px;
	}

	.quiz-card ul {
		margin-left:-15px;
	}
}


#lesson .tryagain, #lesson .revideo, #lesson .card-body-correct-answer .nextquestion {
	margin:10px 0;
	cursor:pointer;
	padding:8px 0;
	width:100%;
	font-size:20px;
}

.btn-submit {
	margin-top:20px;
	background-color:#2CCDE6;
	color:#ffffff;
}

.score-card {
	border-radius:10px;
}

.score-card .card-header {
	background-color:var(--dblauw);
	color:#ffffff;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	font-size:18px;
	font-weight:500;
}

.score-card .card-body {
	border-radius:10px;
}

.card-body-correct-answer, .card-body-wrong-answer {
	display:none;
	height:334px;
	margin-left:-15px;
}

#lesson .card-body-correct-answer p, #lesson .card-body-wrong-answer p {
	margin-left:0;
}

@media (min-width: 992px) and (max-width:1199px) {


	.card-body-correct-answer, .card-body-wrong-answer {
		height:298px;
		margin-left:0;
	}
}

@media (max-width:991px) {
	#lesson .row .row {
		height: auto;
	}

	.card-body-correct-answer, .card-body-wrong-answer {
		height:auto;
		margin-left:0;
	}
}


@media (max-width:767px) {
	#lesson .row .row {
		margin-left:-15px;
		margin-right:-15px;
	}
}

#profiel {
	margin-top: -100px;
}


#profiel .titelbalk {
	background-color:#000000;
	padding:5px 30px;
	color:#ffffff;
	font-size:30px;
	margin-top:25px;
	margin-left:25px;
	margin-bottom:20px;
	font-weight:bold;
	text-transform:uppercase;
	display:inline-block;
}

#profiel p {
	margin-left:25px;
	margin-bottom:3px;
}

#profiel .btn {
	margin:25px 0 25px 25px;
	background-color: var(--blauw);
    color: var(--dblauw);
    font-weight: 600;
}

#profiel .btn:hover {
	border-color:var(--dblauw);
	background-color: var(--dblauw);
	color:#ffffff;
}

@media (max-width: 991px){

	#profiel {
		margin-top:0px;
		margin-left:0;
	}
}

@media (max-width: 991px){
	#profiel .btn {
    	margin: 25px 0 25px 0;
   }
}

.list-group p {
	margin:0;
}

.status {
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:5px;
	background-color:red;
}

.status.afgerond {
	background-color:green;
}

#privacy {
	margin-top: -100px;
}


#privacy .titelbalk {
	background-color:#000000;
	padding:5px 30px;
	color:#ffffff;
	font-size:30px;
	margin-top:25px;
	margin-left:25px;
	margin-bottom:20px;
	font-weight:bold;
	text-transform:uppercase;
	display:inline-block;
}

#privacy p {
	margin-left:25px;
	margin-bottom:3px;
}

@media (max-width: 991px){
	#privacy {
	    margin-top: 0px;
	    margin-left: 0;
	}
}


#videoModal {
	padding:30px;
}

#videoModal .modal-dialog {
	max-width:800px;
	width:auto;
	margin: 1.5rem auto;
}

#videoModal .modal-content {
	border:0;
}

#videoModal .btn-close {
	margin-top:20px;
	background-color:var(--dblauw);
	color:#ffffff;
	border-radius:20px;
	cursor:pointer;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	margin:25px;
}
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container #player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.footer {
	background-image:url(../images/Border_Bottom.png);
	background-size:111px auto;
	background-repeat: repeat-x;
	background-color:#000000;
	padding:35px 10px 10px 10px;
	text-align:center;
	width:100%;
}

.footer a {
	color:var(--blauw);

	font-size:20px;
}

.noconsent {
	display:block;
	text-align:center;
	margin-top:28%;
	color:#000000;
}

#cookieconsent {
	position: fixed;
	font-size:16px;
	line-height:26px;
	width:600px;
	height:350px;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	z-index:9999;
	border-top:1px solid #eee;
	background-color:#ffffff;
	padding:25px;
	max-width:100%;
}

#cookieconsent a {
	color:var(--blauw);
}

#cookieconsent button {
	background-color:var(--blauw);
	color:#000000;
	text-align:center;
	margin:0 auto;
	font-size:16px;
	padding:15px 30px;
	display:inline-block;
}

#cookieconsent .close {
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
}

#cookieconsent .close:after{
  display: inline-block;
  content: "\00d7";
}

@media (max-width: 575.98px) {
	#cookieconsent {
		height:60%;
	}
}

@media (max-width: 575.98px) {

	h1 {
		font-size:28px;
		margin-left:30px;
	}

	#header-video {
		height:250px;
	}

	#header-video .header-image {
		height:250px;
	}

	#header-image {
		height:150px;
	}

	#header-image .header-image {
	   height:150px;
  	}


	.card {
	    margin-top: 15px;
   	}


	section {
	    padding: 50px 0 20px 0;
	}

	.playvlak {
		background-size:100px;
		background-position: center 20px;
		padding-left:0;
		padding-top:140px;
	}

	.justify-content-center {
		display:block !important;
	}

	.justify-content-center .btn {
		width:calc(100% - 50px);
		margin-bottom:10px;
	}

	.section .row {
		padding-left:0px;
	}

}

@media (min-width: 576px) and (max-width: 767.98px) {

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

	p {
		font-size:13px;
	}

	.card {
	    margin-top: 30px;
   	}

	.card-text {
		min-height:200px;
	}



	#header-video {
		height:400px;
	}

	#header-video .header-image {
		height:400px;
	}

	#header-image {
		height:250px;
	}

	#header-image .header-image {
	   height:250px;
  	}


	.section .row {
		padding-left:0px;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {

	.card .card-text {
		min-height:120px;
	}

	.section .row {
		padding-left:0px;
	}



}


#preview {
	width:100%;
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .2);
}

#preview canvas {
	width:100%;
	height:100%;
}

#htmldata {
	position: relative;
	left:-99999px;
}

#htmldata p {
	margin-top:1em;
	margin-bottom:1em;
}

.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}


#htmldata .A4.landscape .sheet {

  width: 300mm;
  height: 210mm;
  position:absolute;
}

.certtitel {
	position:absolute;
	width:100%;
	top:-16mm;
	right:10mm;
	text-align:right;
	font-size:50px;
	font-weight:bold;
	z-index:10;
	color: var(--blauw);
}

.pvoregel1 {
	position:absolute;
	width:55%;
	top:50mm;
	text-align:center;
	font-size:30px;
	z-index:10;
}

.pvoregel2 {
	position:absolute;
	width:55%;
	top:70mm;
	text-align:center;
	font-size:50px;
	font-weight:bold;
	z-index:10;
}

.pvoregel3 {
	position:absolute;
	width:55%;
	top:110mm;
	text-align:center;
	font-size:30px;
	line-height:125%;
	z-index:10;
}

.regel1 {
	position:absolute;
	width:55%;
	top:46mm;
	text-align:center;
	font-size:20px;
	z-index:10;
}

.regel2 {
	position:absolute;
	width:55%;
	top:51mm;
	text-align:center;
	font-size:50px;
	font-weight:bold;
	z-index:10;
	color: var(--blauw);
}

.regel3 {
	position:absolute;
	width:55%;
	top:86mm;
	text-align:center;
	font-size:20px;
	line-height:125%;
	z-index:10;
}

.bullets {
	position:absolute;
	width:55%;
	top:106mm;
	left:12mm;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	line-height:150%;
	z-index:10;
	color:var(--blauw);
}

.regel4 {
	position:absolute;
	width:55%;
	top:106mm;
	left:16mm;
	text-align:left;
	font-size:18px;
	line-height:150%;
	z-index:10;
}

.regel5 {
	position:absolute;
	width:55%;
	top:140mm;
	text-align:center;
	font-size:20px;
	line-height:125%;
	z-index:10;
	color:var(--blauw);
}

.img-background {
	position:absolute;
	top:0;
	bottom:0mm;
	left:0mm;
	right:0;
	width:297mm;
	height:210mm;
}



#certificaat-share .container-fluid {
	background-color:#f7f7f7;
}

#certificaat-share img {
	width:100%;
}

#certificaat-download .container-fluid {
	background-color:#f7f7f7;
	padding:30px 0;
}

#certificaat-download img {
	width:172px;
	height:172px;
}

.plyr {
	--plyr-color-main:#3ABFF0;
	--plyr-font-family: "Baloo 2"
}

.plyr > button.plyr__control {
	border-radius:0 !important;
	  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	padding: 13px 10px !important;
}

.plyr {
	visibility:hidden;
}

.blauw {
	color:var(--blauw);
}