html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

*,:after,:before {
	box-sizing: border-box
}

body {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-color: #dcdcdc;
}

h1,h2,h3,h4,h5,h6 {
	-webkit-margin-before: .5rem;
	margin-block-start:.5rem;-webkit-margin-after: 1rem;
	margin-block-end:1rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit
}
img {
	max-width:100%;
	height: auto;
}

h1 {
	font-size: 1.8rem;
	font-weight: 800;
	text-transform:uppercase;
}

h2 {
	font-size: 1.6rem;
	font-weight: 800;
	text-transform:uppercase;
	
}

h3 {
	font-size: 1.6rem;
	font-weight: 500;
	text-transform:uppercase;
}

h4 {
	font-size: 1.3rem;
	font-weight: 500;
	text-transform:uppercase;
}

h5 {
	font-size: 1.2rem;
	font-weight: 500;
	text-transform:uppercase;
}

h6 {
	font-size: 1rem;
}

p {
	-webkit-margin-before: 0;
	margin-block-start:0;-webkit-margin-after: .9rem;
	margin-block-end:1.9rem
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace,monospace;
	font-size: 1em;
	white-space: pre-wrap
}

a {
	background-color: transparent;
	text-decoration: none;
	color: #000000;
}

a:active,a:hover {
	color: #325166;
}

a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover {
	color: inherit;
	text-decoration: none
}

a:not([href]):not([tabindex]):focus {
	outline: 0
}

.red {
    color:#d0021b;
}
.green {
    color:#339900;
}

.bold {
    font-weight:700;
}

.radius20 {
	border-radius:20px;
}
.radiustop20 {
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}


.btn-primary {
	color: #fff;
	background:none;
	border-color: #ffffff;
	border-radius:10px;
	padding:5px 25px;
	text-transform:uppercase;
}
.btn-primary:hover {
	border-color: rgba(255, 255, 255, 0.7);
	background:none;
}

.btn-red {
	color: #d0021b;
	background:none;
	border-color: #d0021b;
	border-radius:10px;
	padding:5px 25px;
	text-transform:uppercase;
}
.btn-red:hover {
	background-color: #d0021b;
	color:#ffffff;
}

/* The Overlay (background) */
.overlay {
	/* Height & width depends on how you want to reveal the overlay (see JS below) */   
	height: 100%;
	width: 0;
	position: fixed; /* Stay in place */
	z-index: 1026; /* Sit on top */
	left: 0;
	top: 0;
	background-color: rgb(208, 2, 27); /* Black fallback color */
	background-color: rgb(208, 2, 27,0.9); /* Black w/opacity */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
	position: relative;
	top: 5%; /* 25% from the top */
	width: 100%; /* 100% width */
	text-align: center; /* Centered text/links */
	margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}



.overlay-search {
    position: relative;
    width: 70%;
    left:15%;
}

.overlay-search input {
    width: 100%;
    padding: 12px 45px 12px 15px; /* rechts ruimte voor het icoon */
    font-size: 18px;
    border-radius: 30px;
    border: none;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}

.overlay-search button {
    position: absolute;
    top: 50%;
    right: 15px; /* afstand van de rechterkant */
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 0;
}

.overlay-search button:hover {
    color: #000;
}


/* Input styling */


/* The navigation links inside the overlay */
.overlay a {
	padding: 8px;
	text-decoration: none;
	font-size: 30px;
	color: #ffffff;
	display: block; /* Display block instead of inline */
	transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
	color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
	position: absolute;
	top: 20px;
	right: 45px;
	font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 750px) {
	.overlay a {font-size: 20px}
	.overlay .closebtn {
		font-size: 30px;
		top: 15px;
		right: 35px;
	}
}
@media screen and (max-height: 650px) {
	.overlay a {font-size: 15px}
	.overlay .closebtn {
		font-size: 30px;
		top: 15px;
		right: 35px;
	}
}

@media screen and (max-width: 650px) {
	.overlay a {font-size: 15px}
	.overlay .closebtn {
		font-size: 30px;
		top: 15px;
		right: 35px;
	}
}


header{
	position:relative;
	width:100%;
	padding-top:70px;
	
}
#topheader {
	position:fixed;
	top:0px;
	display: flex;
	width: inherit;
	background-color: #dcdcdc;
	background-color: rgba(220,220,220,0.9);
	z-index:5;
}
#topheader .rightwrap {
	position:relative;
	min-height:70px;
	background-color:#d0021b;
	width:25%;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding-left:1%;
	color:#ffffff;
}
#topheader .rightwrap:after {
	position: absolute;
	top: 0;
	right: -18px;
	content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="70" viewBox="0 0 18 70"><defs><clipPath id="clip-path"><rect id="Rectangle_1829" data-name="Rectangle 1829" width="18" height="70" transform="translate(1385 98)" fill="%23fff" opacity="0.571"/></clipPath><clipPath id="clip-path-2"><rect id="Rectangle_1828" data-name="Rectangle 1828" width="132" height="70" transform="translate(238)" fill="%23d0021b" stroke="%23707070" stroke-width="1"/></clipPath></defs><g id="Mask_Group_236" data-name="Mask Group 236" transform="translate(-1385 -98)" clip-path="url(%23clip-path)"><g id="Mask_Group_235" data-name="Mask Group 235" transform="translate(1033 98)" clip-path="url(%23clip-path-2)"><g id="Page-1-Copy" transform="translate(-71.95 -43.327)"><g id="homepage_laag_2"><g id="logo"><g id="bg" transform="translate(0 0)"><path id="red" d="M-142,0H298.758s0,36.876-28.943,65.273c-27.632,28.384-79.171,48.745-79.171,48.745H-142Z" transform="translate(142 31.648)" fill="%23d0021b" fill-rule="evenodd"/><path id="Fill-12" d="M173.648-11.667l3.862.561,3.772.656,3.766.656,3.772.841,3.67.841,3.677.937,3.581.937,3.575,1.121L206.719-4l3.39,1.217,3.3,1.217L216.7-.255l3.11,1.4,6.028,2.995,2.925,1.682-.191,6.085L228.3,17.8l-.567,5.894-.752,5.614-.848,5.614-1.134,5.327-1.223,5.333-1.415,5.053-1.6,5.053-1.695,4.862-1.791,4.677L215.29,69.82l-2.071,4.4-2.167,4.4L208.79,82.73l-2.358,4.116,19.881,22.64,3.3-5.244,3.11-5.423,3.11-5.614,2.823-5.8,2.734-5.99,2.638-6.175,2.358-6.359,2.167-6.551,1.975-6.831,1.791-6.92,1.51-7.207,1.319-7.385.943-7.576.752-7.863.472-8.042.185-8.144-4.518-3.18-4.8-3.084-5-2.81L238-9.328l-5.467-2.523L226.881-14.1l-5.748-2.147-6.028-1.969-6.124-1.771-6.219-1.593-6.41-1.5-6.5-1.306-6.6-1.128-6.691-.93-6.78-.752L163-27.757l.472.937.567,1.026.656,1.032.567,1.026,1.319,2.058.567,1.032.752,1.026,1.319,2.058.656.937,1.51,2.058.752.937.663.937.847,1.026" transform="translate(184.756 27.757)" fill="%23d0021b" fill-rule="evenodd"/></g></g></g></g></g></g></svg>');
	width: 18px;
	height: 70px;
}
#topheader .leftwrap {
	position:relative;
	min-height:70px;
	width:75%;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding-right:1%;
	color:#303956;
	font-size:0.8em;
	line-height:16px;
	
}
#topheader .leftwrap strong {
	text-transform:uppercase;
	font-weight:800;
	font-size:1.8em;
}

#secondheader2 {
	height:320px;
	overflow:hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-color: rgba(50,50,50,0.2);
}

#secondheader {
    width: 100%;
    aspect-ratio: 20 / 3;   /* kies verhouding die bij je foto past */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
	background-color: rgba(50,50,50,0.2);
}

body.cat90 #secondheader {
	height:170px;
}

main {
	position:relative;
	margin-top:-120px;
}

#maincontent a:not(.btn) {
	background-color: transparent;
	text-decoration: none;
	color: #000000;
	border-bottom:1px #D0021B dashed;
}

#maincontent a:active, #maincontent a:hover {
	color: #325166;
	border-bottom:1px #325166 solid;
}

#maincontent .contacticons a {
    border:none;
}

.circle {
    display:inline-block;
    width: 20px;
    height: 20px;
    background-color: white;
    color: #d0021b;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 20px; /* Center number vertically */
    border-radius: 50%;
    border: 1px solid #d0021b;
}

main .block-red, main .block-blue, main .block-grey, main .block-white {
    position:relative;
	border-radius:20px;
	background-color:#d0021b;
	color:#ffffff;
	padding:1em 2em;
}
main .block-grey {
	background-color:#707070;
}
main .block-blue {
	background-color:#122053;
}
main .block-white {
	background-color:#ffffff;
	color:#000000;
	padding:0;
}
main .block-white h4 {
	padding:30px 10px;
}

main .block-white:hover {
  box-shadow: 0 0 22px rgba(33,33,33,.4); 
}

main .block-red a, main .block-blue a, main .block-grey a {
	color:#ffffff; 
	text-transform:uppercase;
	font-size:0.9em;
}
main .block-red a:hover, main .block-blue a:hover, main .block-grey a:hover, main .block-white a:hover {
	color:rgba(255,255,255,0.7); 
}
main .block-white a:hover {
	color:rgba(0,0,0,0.7); 
}

main .block-white .absredarrow {
	position:absolute;
	right:15px;
	bottom:0;
	color:#d0021b;
}

main .fa-ul {
	margin-left: 1.5em;
}
main .fa-ul li {
	margin:0.8em 0;
}

main .filtercontainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
main .filtercontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}


main .block-red.cursusoverzicht div.inactive{
	color:#ffffff; 
	text-transform:uppercase;
	font-size:1em;
	display:block;
	opacity: 0.4;
}

main .block-red.cursusoverzicht a {
	color:#ffffff; 
	text-transform:uppercase;
	font-size:1em;
	display:block;
	opacity: 1;
}
main .block-red.cursusoverzicht a.ready {
	color:#66FF33; 
	text-transform:uppercase;
	font-size:1em;
	display:block;
	opacity: 1;
}
main .block-red.cursusoverzicht a.ready .circle {
    display:inline-block;
    width: 20px;
    height: 20px;
    background-color: #66FF33;
    color: #000000;
    border: 1px solid #66FF33;
}


main #maincontent {
	
	margin-top:150px;
}

main .block-info {
	position:relative;
}
main .block-info .video {
	background-size: cover;
	background-position: center center;
	color:#ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:2.5em;
	aspect-ratio: 1/0.75;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.25);
}
main .block-info img {
	aspect-ratio: 1/0.75;
}
main .block-contact img {
	aspect-ratio: 1/1;
}

main .block-info .soort {
	font-size:0.8em;
	color:#d0021b;
	text-transform:uppercase;
}

main .block-info .info {
	font-size:0.8em;
	line-height:1.1em;
}
#maincontent .info a {
	border-bottom:none;
}

main .block-info .titel {
	font-size: 0.9rem;
	line-height: 1.1;
	font-weight: 800;
	text-transform:uppercase;
}
main .block-info a:hover {
	color:rgba(0,0,0,0.7); 
}

main .block-info .absredarrow {
	position:absolute;
	right:15px;
	bottom:15px;
	color:#d0021b;
}

main .block-info .contacticons i {
	font-size:1.5em;
	margin-right:8px;
	color:rgba(0,0,0,0.6); 
}
main .block-info .contacticons a:hover i {
	color:rgba(0,0,0,0.9); 
}

main .sticky-top {
	top:90px;
}

#__ba_panel {
    position:absolute;
    top:-185px;
    right:15px;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background:none;
	border:2px #ffffff solid;
}



/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
main .filtercontainer input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
main .filtercontainer .checkmark:after {
  left: 6px;
  top: 0px;
  width: 5px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


footer {
	background-color:#2b2b2b;
	color:#ffffff;
	
}
footer .fa-ul {
	margin-left: 1.5em;
}
footer a {
	color:#ffffff;
}
footer a:hover {
	color:rgba(255,255,255,0.7); 
}
footer .fa-ul li {
	margin:0.5em 0;
}
footer .social {
	font-size:2.1em;
	margin-right:15px;
}
footer .social a {
	margin-right:10px;
}
footer .social a:hover {
	color:rgba(255,255,255,0.7); 
}

footer .copyright {
	border-top: 1px solid rgba(255, 255, 255, .24);
}


form {
    padding:0 25px;
}

form .form-control {
    background-color:#efefef;
    margin-bottom:10px;
}

@media (min-width: 992px) {
	
	#topheader .rightwrap {
		width:50%;
	}

	#topheader .leftwrap {
		width:50%;
	}
}


@media (min-width: 1200px) {
    #__ba_panel {
        position:absolute;
        top:130px;
        right:15px;
    }
    
    #home-agenda {
      height: 440px;           /* Zelfde hoogte als #home-actueel */
      overflow-y: auto;        /* Scrollen wanneer nodig */
      display: flex;
      flex-direction: column;
    }
    
}


@media (min-width: 1600px) {
    main .block-info .titel {
    	font-size: 1.1rem;
    }	
	
}