html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

@font-face {
    font-family: 'Captain Comic';
    src: url('CaptainComic-Bold.eot');
    src: local('Captain Comic Bold'), local('CaptainComic-Bold'), url('CaptainComic-Bold.eot?#iefix') format('embedded-opentype'), url('CaptainComic-Bold.woff2') format('woff2'), url('CaptainComic-Bold.woff') format('woff'), url('CaptainComic-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Captain Comic';
    src: url('CaptainComic-Italic.eot');
    src: local('Captain Comic Italic'), local('CaptainComic-Italic'), url('CaptainComic-Italic.eot?#iefix') format('embedded-opentype'), url('CaptainComic-Italic.woff2') format('woff2'), url('CaptainComic-Italic.woff') format('woff'), url('CaptainComic-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Captain Comic';
    src: url('CaptainComic-BoldItalic.eot');
    src: local('Captain Comic Bold Italic'), local('CaptainComic-BoldItalic'), url('CaptainComic-BoldItalic.eot?#iefix') format('embedded-opentype'), url('CaptainComic-BoldItalic.woff2') format('woff2'), url('CaptainComic-BoldItalic.woff') format('woff'), url('CaptainComic-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Captain Comic';
    src: url('CaptainComic.eot');
    src: local('Captain Comic'), local('CaptainComic'), url('CaptainComic.eot?#iefix') format('embedded-opentype'), url('CaptainComic.woff2') format('woff2'), url('CaptainComic.woff') format('woff'), url('CaptainComic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*@font-face {
    font-family: 'Manrope';
    src: url('Manrope-Bold.woff2') format('woff2'), url('Manrope-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('Manrope-Regular.woff2') format('woff2'), url('Manrope-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}*/


/* Sticky footer styles
-------------------------------------------------- */

html {
    font-family: 'Captain Comic';
    position: relative;
    min-height: 100%;
}

body {
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    margin-bottom: 100px;
    /* Margin bottom by footer height */
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    /* Set the fixed height of the footer here */
    line-height: 100px;
    /* Vertically center the text there */
    background-color: #FFF;
}

.extrafoot {
    height: 230px;
}

.extrafoot .col-6 {
    height: 230px;
}

p {
    font-family: 'Exo', sans-serif;
    /*font-family: 'Manrope';*/
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
}

ul {
    font-size: 14px;
    line-height: 26px;
}


/*li{
    margin-bottom: 12px;
}*/

b {
    font-weight: 700;
}

i {
    font-style: italic;
}

h1 {
    font-size: 86px;
}

.h1fonds {
    font-size: 60px;
    line-height: 80px;
}

h2 {
    text-transform: uppercase;
    font-size: 22px;
    line-height: 26px;
}

h3 {
    font-style: italic;
    text-transform: uppercase;
    font-size: 26px;
    line-height: 26px;
    margin-bottom: 14px;
}

h5 {
    color: #000;
    font-size: 20px;
    line-height: 22px;
    /*font-family: 'OldPress';*/
}

.no-padding {
    padding: 0;
    margin: 0;
}

.red {
    color: #eb5f5d;
}

.redbg {
    background-color: #e53146;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.brown {
    background-color: #a9522e;
}

.rozebg {
    background-color: #facfe2;
}

.bluebg {
    background-color: #007cbf;
}

.blackbg {
    background-color: #231f20;
}

.realblackbg {
    background-color: #000;
}

.purplebg {
    background-color: #322959;
}

.lightbluebg {
    background-color: #cee4f9;
}

.greybg {
    background-color: #f7f7f7;
}

.darkgreybg {
    background-color: #e6e6e6;
}

.mintblue {
    background-color: #31c0ce;
}

.yellowbg {
    background-color: #f9b200;
}

.pinkbg {
    background-color: #faccd5;
}

.orangebg {
    background-color: #ffbd0a;
}

.greenbg {
    background-color: #21b094!important;
}

.yellowtxt {
    color: #f8b014;
}

.pinktxt {
    color: #ed1b5a!important;
}

.redtxt {
    color: #ee2e2a!important;
}

.greentxt {
    color: #00ab7f!important;
}

.whitetxt {
    color: #FFF;
}

.browntxt {
    color: #a9522e!important;
}

.orangetxt {
    color: #ffbd0a!important;
}

.bluetxt {
    color: #007cbf!important;
}

.darkbluetxt {
    color: #34317e!important;
}

.whitebg60 {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 6px;
}

.whitebg {
    background-color: #FFF;
}

.hide {
    display: none;
}

.abshand {
    position: absolute;
    margin-left: 20px;
    margin-top: -20px;
    z-index: 99;
}

.abshand img {
    width: 150px;
}

.z-up {
    position: relative;
    z-index: 199;
}

.img-fluid {
    vertical-align: middle;
}

.pdf {
    position: absolute;
    right: 10px;
    top: 10px;
}

.pdf img {
    /*  margin-right:-20px;*/
    width: 150px;
}

.actionbut img {
    width: 140px;
}

.actionbut {
    position: absolute;
    bottom: 110px;
    right: 50%;
    transition: all .2s;
}

.actionbut:hover {
    transform: scale(1.04);
}

a:hover {
    text-decoration: none;
    color: inherit;
}

.check img {
    width: 38px;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.vid-overlay {
    position: absolute;
    top: 0px;
    height: calc(100%);
    width: 100%;
    background: rgb(53, 57, 73, 0.4);
    text-align: center;
}

.vid-overlay p {
    position: relative;
    color: #FFF;
    font-size: 22px;
    line-height: 24px;
    top: 40%;
    text-decoration: underline;
    line-height: 38px;
}

.underline {
    text-decoration: underline;
}

.overlay {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgb(53, 57, 73, 0.4);
    width: 100%;
    height: 100%;
    border-radius: 12px;
    z-index: 99;
}

.vidplaybut {
    position: relative;
    top: 38%;
}

.vidplaybut:hover {
    transform: scale(1.1);
}

.navbar-light .navbar-nav .nav-link {
    color: #333333;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 8px;
    margin-right: 8px;
    display: inline-block;
    background-repeat: no-repeat;
}

.navbar-light .navbar-nav .nav-link:hover {
    /*color: #fff;*/
    text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #fff;
    /*padding: 20px;
    padding-left: 32px;
    padding-right: 32px;*/
}

.navbar-light .navbar-nav .nav-link.short:hover {}

.navbar-light .navbar-nav .nav-link.short.active {}

a {
    color: inherit;
}

a.line {
    text-decoration: underline;
}

.nav-item.active .nav-link {
    color: #eb5f5d!important;
    text-decoration: underline;
}

.navbar-brand img {
    height: 40px;
}

.orderbutton {
    border-radius: 16px;
    color: #fff;
}

.orderbutton:hover {
    opacity: 0.9;
}

.navbar {
    /* align-items:flex-start;*/
    /* height:70px;*/
    padding-top: 6px;
    padding-bottom: 6px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top:30px;*/
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.noflow {
    overflow: hidden;
}

.img-fluid-top-header {
    max-width: 140%;
    height: auto;
}

.imgdivider {
    position: relative;
    max-height: 500px;
    overflow: hidden;
}

.divider {
    position: relative;
}

.divider img {
    position: absolute;
    left: -123px;
}

.imgdivider > div {
    max-height: 500px;
}

.valign {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.numbers {
    height: 240px;
}

.numbers h3 {
    font-size: 50px;
    line-height: 49px;
    margin-bottom: 20px;
}

.numbers > div {
    color: #fff;
    max-height: 300px;
}

footer p {
    font-size: 12px;
}

.btn {
    text-transform: uppercase;
}

.btn-outline {
    padding: 6px;
    padding-left: 70px;
    padding-right: 70px;
    border: 4px solid #231f20;
    border-radius: 12px;
    color: #231f20;
    font-weight: bold;
    font-size: 20px;
}

.btn-outline:hover {
    color: #fff;
}

.topimg {
    width: 100%;
    height: 300px;
    min-height: 200px;
    overflow: hidden;
}

.img-stretch {
    min-width: 100%;
}

.inverttitle {
    position: absolute;
    bottom: 100%;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 32px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #fff;
    min-width: 180px;
}

.inverttitle h3 {
    line-height: 32px;
}

.nieuwsfoto {
    height: 200px;
    background-color: #e6e6e6;
    overflow: hidden;
}

.nieuwsitem {
    border-radius: 12px;
    /* height:400px;*/
}

.nieuwstxt {
    text-align: center;
    background-color: #f7f7f7;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 200px;
    max-height: 500px;
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

.nieuwstxt h4 {
    font-size: 16px;
    margin-bottom: 0px;
    color: #000;
}

.nieuwstxt p {
    padding: 0px;
    margin-top: -20px;
}

.mouse {
    cursor: pointer;
}

.lesbutton {
    height: 380px;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}

.lesbutton p {
    padding: 6px;
    line-height: 22px;
}

.lesbutton h5 {
    line-height: 22px;
    margin-bottom: 12px;
}

.lesimg {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    height: 180px;
    background-color: #e6e6e6;
    overflow: hidden;
}

.lesimg .img-fluid {
    min-height: 100%;
}

.lestxt {
    height: 160px;
    color: #666666;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    color: inherit;
    padding: 12px;
    background-color: #f7f7f7;
}

a .lestxt {
    color: #666666;
}

a .lestxt.active {
    color: #fff;
}

.navbar {
    /*  padding:0!important;*/
    padding-left: 0!important;
    padding-right: 0!important;
    z-index: 999;
}

.navbar-collapse {
    margin-top: 10px;
    width: 100%;
    /* background-color: #fff;*/
}

.vidbutton {
    margin-top: 25px;
}

.vidbutton h2 {
    color: #e53348;
    font-size: 26px;
    margin-top: 12px;
    margin-bottom: 4px;
}

.challenge .vidbutton h2 {
    color: #4a934d;
}

.boulbg {
    background-image: url(../img/boulebg.png);
    background-repeat: repeat-x;
    background-color: #fbfbfb;
}

.vidlink {
    position: relative;
}

.vidlink:hover .playbutton {
    opacity: .7;
}

.playbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/play_btn.png);
    background-size: contain;
    width: 70px;
    height: 70px;
}

.imgwistjdat {
    position: absolute;
    right: 15px;
    ;
    bottom: -4px;
}

.imgwistjdat img {
    height: 180px;
}

.posrel {
    position: relative;
}

.abs {
    position: absolute;
    width: 100%;
    top: calc(58% + 20px);
}

.abs.videos {
    position: absolute;
    top: auto;
    width: 100%;
    bottom: 20px;
}

.sponsors img {
    width: 90px;
}

.grandlink {
    font-size: 36px;
}
.sponsorsfoot img{
    display: inline-block;
    max-height: 50px;
    margin:10px;
}

.vidcircle{
    position: absolute;
    width:190px;
    height: 190px;
    background: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    top:-160px; 
    right:30px;
}
.vidcircle:hover{
    transform: scale(1.06);
    transition: all .2s;
}
.vidcircle p{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 15px;
    font-size: 22px;
    color:#007cbf;
}

@media (max-width: 575.98px) {
    
    
    .vidcircle{
        
           width:100px;
    height: 100px;
        
         top:-110px; 
        right:10px;
    }
    
    .container-fluid{
  padding-left: 0rem;
  padding-right: 0rem;
  overflow: hidden;
}
   
    .vidcircle p{
        font-size: 14px;   
    }
    
.abs.videos {
    position: absolute;
    top: auto;
    width: 100%;
    bottom: 10px;
}
    .vidbutton {
    margin-top: 25px;
}

.vidbutton h2 {
    color: #e53348;
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 4px;
}
    
    .grandlink {
    font-size: 26px;
}
    
    
    .abs {
        position: absolute;
        width: 100%;
        top: calc(50% + 0px);
    }
    
    .rndopdr.lesm h2 {
        padding-top: 32px;
        font-size: 22px;
    }
    .navbar {
        top: 50px;
    }
    .navbar-toggler {
        position: absolute;
        right: -10px;
        top: -30px;
    }
    #film {
        padding-top: 60px;
    }
    .navbar-light .navbar-nav .nav-link {
        color: #333333;
        font-size: 22px;
        text-transform: uppercase;
        font-weight: bold;
        padding: 5px;
        padding-left: 16px;
        padding-right: 0px;
        margin-left: 8px;
        margin-right: 0px;
        display: inline-block;
        background-repeat: no-repeat;
    }
    p {
        font-size: 12px;
        line-height: 14px;
    }
    .hands {
        font-size: 16px;
        line-height: 20px;
    }
    .abshand {
        left: 120px;
    }
    .abshand img {
        width: 100px;
    }
    .navbar-brand img {
        height: 32px;
        /*max-width: 200px;*/
    }
    .stelling h4 {
        font-size: 20px;
        margin-bottom: 2px;
    }
    .stelling p {
        line-height: 18px;
        font-size: 14px;
    }
    .extrafoot {
        height: 300px;
    }
    .coverfooter img {
        height: 100px;
    }
    .foottxt {
        margin-top: 42px;
        font-size: 12px;
    }
    .foottxt h3 {
        font-size: 22px;
    }
    .foottxt p {
        line-height: 16px;
    }
    .imgdivider {
        position: relative;
        max-height: none;
        overflow: auto;
    }
    .valign {
        top: 0%;
        transform: translate(0, -0%);
    }
    .numbers {
        height: auto;
    }
    .infomap {
        height: 250px;
        position: relative;
        left: -320px;
        top: -100px;
        transform: scale(0.32);
    }
    .mindmap {
        width: 100%;
        height: 200px;
        ;
    }
    .mindmap div {
        width: 100%;
    }
    .mindmap img {
        width: 100%;
    }
    .rndstat,
    .rndopdr {
        padding: 0px;
        width: 90px;
        height: 90px;
    }
    .rndstat p {
        padding-top: 22px;
        font-size: 20px;
        line-height: 22px;
        color: #fff;
    }
    .rndopdr p {
        padding-top: 0px;
        color: #fff;
        font-size: 12px;
    }
    h1.leveltext {
        font-size: 90px;
    }
    h1.leveltext.smaller {
        font-size: 40px;
        line-height: 136px;
        padding-top: 20px;
    }
    h2.opdrachttext {
        font-size: 26px;
        line-height: 30px;
        margin-right: 12px;
    }
    .opdrachtimg {
        height: 120px;
    }
    h3 {
        font-size: 20px;
    }
    .quizvraag {
        font-size: 16px;
        line-height: 20px;
    }
    .answerquiz span {
        font-size: 14px;
    }
    .answerquiz span:nth-child(1) {
        width: 12%;
    }
    .answerquiz span:nth-child(2) {
        width: 80%;
        margin-top: -4px;
    }
    .answerquiz:hover {
        color: inherit;
    }
    .restit,
    .quiznum {
        font-size: 26px;
        line-height: 28px;
    }
    h3.opdrachtintro {
        font-size: 18px;
        line-height: 16px;
    }
    .arrowopdr2 {
        margin-top: -50px;
        width: 100px;
    }
    .stelans {
        margin: 12px;
        font-size: 22px;
    }
    .nextbut {
        font-size: 22px;
    }
    h2 {
        font-size: 12px;
        line-height: 16px;
    }
}

@media (min-width: 580px) and (max-width: 767.98px) {
    h2 {
        font-size: 36px;
    }
    .infomap {
        height: 350px;
        position: relative;
        left: -220px;
        top: -80px;
        transform: scale(0.42);
    }
    .mindmap {
        width: 100%;
        height: 300px;
        ;
    }
    .mindmap div {
        width: 100%;
    }
    .mindmap img {
        width: 100%;
    }
    .abshand img {
        display: none;
        width: 150px;
    }
    
      .vidcircle{
        
           width:120px;
    height: 120px;
    }
    
     .vidcircle p{
        font-size: 14px;   
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    h2 {
        font-size: 36px;
    }
    .mindmap {
        width: 100%;
        height: 500px;
        ;
    }
    .mindmap div {
        width: 100%;
    }
    .mindmap img {
        width: 100%;
    }
    .lesbutton {
        height: 340px;
    }
    .lesimg {
        height: 120px;
    }
    .infomap {
        position: relative;
        left: -120px;
        transform: scale(0.6);
    }
    .lestxt {
        height: 170px;
    }
    .lestxt h5 {
        margin-bottom: 2px;
    }
    .lestxt p {
        font-size: 12px;
        line-height: 16px;
    }
    .abshand img {
        width: 150px;
    }
    .h1fonds {
        font-size: 40px;
        line-height: 40px;
    }
    .navbar-light .navbar-nav .nav-link {
        font-size: 15px;
    }
}

@media (min-width: 991px) and (max-width: 1199.98px) {
    .abshand img {
        width: 180px;
    }
    .h1fonds {
        font-size: 50px;
        line-height: 50px;
    }
    .navbar-light .navbar-nav .nav-link {
        font-size: 18px;
    }
}

@media (min-width: 1200px) and (max-width: 1699.98px) {
    .abshand {
        /*left:100px;*/
    }
    .abshand img {
        width: 210px;
    }
}

@media (min-width: 1000px) and (max-width: 1200px) {}

@media (max-width: 1000px) {}