/* GENERAL */

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
  

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 20px; scroll-behavior: smooth;}
body {
    font-size: 1.1rem; 
    line-height: 1.57; 
    font-family: 'Lato', sans-serif;
    color: rgb(5, 46, 141);
}
.pageloader {
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    animation: fadeOut 0.6s forwards; 
    background: white;
    pointer-events: none;
}
.container {max-width: 80rem; width: 100%; margin-inline: auto; padding-inline: 2rem; position: relative;}
h1,h2,h3,h4{line-height: 1.3; font-weight: 600; margin-bottom: 0.4em; margin-top: 2em; color: rgb(2, 43, 138);}
h1 {font-size: 3rem; line-height: 1.15;}
h2 {font-size: 1.4rem; line-height: 1.25;}
h3 {font-size: 1.2rem; line-height: 1.35;}
h4 {font-size: 1.2rem; color: #00b1c9}
a {text-decoration: underline; cursor: pointer;}
h1:first-child, h2:first-child, h3:first-child {margin-top: 0;}
img {display: block; max-width: 100%;}
ul:not(:last-child), ol:not(:last-child), p:not(:last-child) {margin-bottom: 1.57em;}
.button {
    color: white!important;
    background: #00b1c9;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    border-radius: 0;
    padding: 0.65em 3.15em 0.65em 1.05em;
    position: relative;
    font-size: 1rem;
    transition: padding 0.3s ease-in-out;
    cursor: pointer;
}
.button:hover {padding-inline: 1.5rem 3.75em;}
.button::after {
    background: rgb(2, 43, 138) url(/img/arrow.svg) center center / 90% auto no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    height: 100%;
    aspect-ratio: 1;
    transform: scale(0.6);
}
.buttons {display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;}
.buttons .button {margin-right: 0.5rem; position: relative; top: 0.05rem;}

img[alt="Maaike Heijnis"] {max-width: 20rem; float: right; margin: 0 0 1rem 1rem;}
@media screen and (max-width: 550px) {
    img[alt="Maaike Heijnis"] {float: none; margin: 0;}
}

body.slug_algemene-voorwaarden main ol > li {list-style-type: lower-alpha!important;}
body.slug_algemene-voorwaarden main ol > li::marker {font-size: 1rem;}
.stars {background: url(/img/star.svg) left center / contain repeat-x; aspect-ratio: 5; height: 1.5rem; margin-bottom: 0.75rem;}
.waarom + ul > li, #waarom + ul > li {list-style-type: "✔"!important;}
.show3 > *:not(:nth-child(1),:nth-child(2),:nth-child(3)) {display: none!important;} 
.show6:not(.showall) > *:not(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)) {display: none!important;} 
.full {display: none;}
.card p.summary {margin-bottom: 0;}
.readmore {color: #00b1c9; cursor: pointer; white-space: nowrap;}
.contacticons {display: flex; gap: 0.75rem;}
.contacticons a:hover img {opacity: 0.65;}
.contacticons img {filter: invert(1); height: 2.5rem; width: auto; opacity: 0.5;}
strong {color: rgb(2, 43, 138);}
a:hover {color: rgb(2, 43, 138);}

header {position: sticky; top: 0; box-shadow: 0rem 0rem 0.5rem rgba(0,0,0,0.2); z-index: 2; background: white; height: 5rem;}
header .container {display: flex; align-items: center; justify-content: space-between; align-items: stretch; height: 100%;}
header .container > div {display: flex; align-items: stretch;}
header .logo {display: flex; flex-direction: column; justify-content: center;}
header .logo img {margin-bottom: 0.15rem; width: 6rem; height: auto;}
header .container ul {display: flex; height: 100%; font-size: 1.2rem;}
header .container ul li {list-style: none; height: 100%;;}
header .container ul li:last-child {display: none;}
header .container ul li a {text-decoration: none; color: rgb(2, 43, 138); display: flex; align-items: center; height: 100%; padding-inline: 1.25em; position: relative;}
header .container ul li a:hover {background: #e9f5f7;}
header .container ul li.active a {color: white; background: #00b1c9;}
header .togglemenu {
    display: none;
    cursor: pointer; 
    align-items: center; 
    font-weight: 500;
    font-size: 1.2rem; 
    color: rgb(2, 43, 138);
    padding: 0 2.75rem;
    width: 0;
    overflow: hidden;
    margin: 0 -2rem;
    color: transparent;
    user-select: none;
    background: url(/img/menu.svg) center center / auto 2rem no-repeat;
}


.titlebar, .titlebar .bg {
    height: 25rem;
}
.titlebar {
    position: relative; 
    color: white;
    display: flex; 
    justify-content: center; 
    align-items: stretch; 
    text-align: center; 
    font-size: 1.35rem; 
} 
.titlebar .container {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}
.titlebar h1 {margin-bottom: 0; width: 100%; margin-top: 0; color: white;}
.titlebar h1 span {font-size: 0.7em;}
.titlebar .bg {
    background: url(/img/header.jpg) center top / cover no-repeat; 
    width: 100%; 
    position: fixed; 
    z-index: -1;
    top: 5rem;
}
.titlebar .bg::before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.2);
    content: "";
}
.titlebar .date {color: white; margin-bottom: 0.15rem;}
.titlebar h1 + .date {margin-block: 0.15rem 0;}
body.largeheader .titlebar .container > * {max-width: 50rem;}
body.largeheader .titlebar .pretitle {text-shadow: 0rem 0rem 0.25rem rgba(0,0,0,0.8); margin-bottom: 0.5rem;} 
body.largeheader .titlebar h1 {text-shadow: 0rem 0rem 0.85rem rgba(0,0,0,0.8); font-size: 3.35rem; color: white; font-weight: 600;}
body:not(.largeheader) .titlebar {height: 10rem; font-size: 1rem; text-shadow: none;}
body:not(.largeheader) .titlebar .bg {height: 10rem;}
body.largeheader section:first-child {padding-block: 5rem 6.5rem;}

section {padding-block: 4rem 5.5rem; font-size: 1.25rem; background: white;}
section a {color: rgb(5, 46, 141);}
section:last-child {padding-bottom: 7rem!important;}
section .content {max-width: 46rem; margin: 0 auto;}
section.centered .container {display: flex; justify-content: center; text-align: center;}
section.centered .container h2:first-child {font-size: 1.85rem;}
section.sidebar .container {display: grid; grid-template-columns: 46rem auto; gap: 7rem;}
section:nth-child(even) {background: #e9f5f7;}

section .content ol {margin-left: 2rem;}
section .content ul, .card ul {margin-left: 1.1rem; list-style-type: disc;}
section .content li, .card li {padding-left: 0.35rem;}
section .content ul li::marker, .card li::marker {color: #00b1c9;}
section .content .avatar {
    width: 9rem;
    height: auto;
    border-radius: 100%; 
    margin-bottom: 1.5rem; 
    position: absolute; 
    border: 0.5rem solid white;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: -5.25rem;
}

section.list h2 {text-align: center; margin-bottom: 2.5rem; font-size: 1.85rem;}
section.list .container > ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); gap: 2rem;}
section.list.reviews .container > ul {grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.5rem;}
section.list.reviews .container > ul > li {font-size: 1.1rem; padding: 2rem; gap: 1.5rem;}
section.list.reviews .container > ul > li h3 {font-size: 1.2rem; margin: 0;}
section.list .container > ul > li {
    list-style: none; 
    background: white; 
    padding: 2.5rem; 
    font-size: 1.2rem; 
    display: flex; 
    flex-direction: column; 
    gap: 2rem; 
    justify-content: space-between;
}

section.list:nth-child(odd) .container > ul > li {background: #e9f5f7 url(/img/noise.png);}
section.list .container > ul > li h3 {font-size: 1.5rem; margin-top: 0;}
section.list .container > ul > li h3 a {color: rgb(2, 43, 138); text-decoration: none;}
section.list .container > ul > li h3 a span {font-size: 0.7em;}
section.list .container > ul > li .date {font-size: 1rem; margin-bottom: 0.05rem;}
section.list .container > ul > li .coursedate {
    font-weight: 600; 
    color: #00b1c9; 
    position: relative;
    bottom: 0.5rem; 
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
}
.card h4 {margin-top: 1rem;}
section.list .container > ul > li .author {font-style: italic; position: relative; margin-top: 0.25rem; top: 0.25rem; opacity: 0.65; line-height: 1.4; text-decoration: none;}
section.list .container > ul + p {text-align: center; margin-top: 2.5rem; font-size: 1.2rem;}

section.forms .container {max-width: 80rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; font-size: 1.2rem;  grid-auto-flow: dense;}
section.forms .container > div:nth-child(1) {grid-column-start: 2; grid-column-end: 4;} 
section.forms .container > div:nth-child(1) > * {max-width: 38rem;}
section.forms .container > div:nth-child(2) {padding: 6.5rem 2rem 0 0; grid-column-start: 1; grid-column-end: 2;}

.content h4, .content h3, .content h2,
.card h4, .card h3, .card h2 {font-weight: 600;}


body.slug_over-ons section.list:not(.reviews) .container > ul {grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem;}
body.slug_over-ons section.list:not(.reviews) .container > ul > li {padding: 2rem 1.75rem; text-align: center; font-size: 1.1rem;}
body.slug_over-ons section.list:not(.reviews) .container > ul > li .avatar {
    width: 8rem; 
    height: auto;
    aspect-ratio: 1; 
    object-fit: cover; 
    border-radius: 100%; 
    margin: 0.25rem 0 0.5rem;
    display: inline-block;
}
body.slug_over-ons section.list:not(.reviews) .container > ul > li h3 {font-size: 1.2rem; line-height: 1.25; margin-bottom: 0rem;}
body.slug_over-ons section.list:not(.reviews) .container > ul > li h3 span {display: block; font-size: 1.1em;}
body.slug_over-ons section.list:not(.reviews) .container > ul > li > p:last-child {text-align: center;}

section aside {font-size: 1.2rem;}
section aside h2 {font-size: 1.4rem;}
section aside .card {padding: 2rem; background: #e9f5f7 url(/img/noise.png); margin-bottom: 2rem;}

footer {color: white; font-size: 1.05rem;}
footer > div:nth-child(1) {background: #00b1c9; padding-block: 2rem; text-align: center; font-size: 1.35rem; line-height: 1.3;}

footer > div:nth-child(2) {background: #243d7c; padding-block: 4rem 4.5rem;}
footer > div:nth-child(2) * {color: rgba(255,255,255,0.85); text-decoration: none;}
footer > div:nth-child(2) a:hover > span {color: rgba(255,255,255,1);}
footer > div:nth-child(2) h3 {font-size: 1.35rem; color: rgba(255,255,255,0.95);}
footer > div:nth-child(2) ul li {list-style: none;}
footer > div:nth-child(2) ul li a {padding: 0.35rem 0; display: block;}
footer > div:nth-child(2) .container {display: flex; gap: 5rem; justify-content: space-between;}
footer > div:nth-child(2) .container > div:nth-child(1) {max-width: 24rem;}

footer > div:nth-child(3) {background: #192d5f; padding-block: 1rem; font-size: 1rem;}
footer > div:nth-child(3) * {color: rgba(255,255,255,0.7); text-decoration: none;}
footer > div:nth-child(3) .container {display: flex; justify-content: space-between;}

footer > div:nth-child(2) div:nth-child(4) img {width: 8rem; filter: invert(1); opacity: 0.4; height: auto;}
footer > div:nth-child(2) div:nth-child(4) a:hover img {opacity: 0.55;}

.anchor {position: relative; position: absolute; margin-top: -8.5rem; display: block;}

@media screen and (max-width: 2000px) {
    html {font-size: 1vw;}
}
@media screen and (min-width: 1600px) {
    html {font-size: 16px;}
}
@media screen and (max-width: 1400px) {
    html {font-size: 14px;}
}
@media screen and (max-width: 1200px) {
    section.sidebar .container {
        grid-template-columns: auto 23rem;
    }
}

@media screen and (max-width: 1000px) {
    header .container ul {
        display: none;
        background: white;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0;
    }
    header .container ul li {height: auto; font-size: 1.6rem;}
    header .container ul li a {font-weight: 400;}
    header .container ul li a:hover,
    header .container ul li.active a {background: none;}
    header .container ul li.active a {color: #00b1c9;}
    header .container ul li:last-child {
        position: fixed;
        right: 0;
        top: 0;
        cursor: pointer;
        font-size: 1.2rem;
    }
    header .container ul li:last-child a {
        padding: 2.5rem 2.75rem;
        display: block;
        color: transparent;
        user-select: none;
        width: 0;
        height: 0;
        overflow: hidden;
        background: url(/img/close.svg) center center / auto 2rem no-repeat;
        opacity: 0.9;
    }
    header .togglemenu {display: flex;}
    body.menuopen header .container ul {display: flex;}
    body.menuopen header .container ul li:last-child {display: block;}
    body.menuopen header .logo {position: fixed; top: 0.5rem; z-index: 60;}
    footer > div:nth-child(2) .container {
        flex-direction: column;
        gap: 3.5rem;
    }
}
@media screen and (max-width: 800px) {
    section.sidebar .container {grid-template-columns: 1fr!important; gap: 5em;}
    section .content {max-width: 100%;}
    section.forms .container {display: block;}
    section.forms .container > div:nth-child(2) {padding-top: 4rem;}
    body.slug_over-ons section.list:not(.reviews) .container > ul > li > p:last-child {text-align: center; padding: 0;}
    section.forms .container,
    section.list .container > ul > li,
    section.list .container > ul + p,
    section {font-size: 1.1rem;}
}
@media screen and (max-width: 550px) {
    section.list .container > ul {grid-template-columns: 1fr!important;}
    footer > div:nth-child(3) .container > span > span, footer > div:nth-child(3) .container > a {display: none;}
    .titlebar {font-size: calc(0.85rem + 1.5vw);}
    .titlebar h1 {font-size: calc(1.35rem + 3.5vw)!important;}
    .home .titlebar h1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    section.list .container > ul > li {padding-inline: 2rem;}
    section:not(.forms) .card, section.forms .container > div:nth-child(1) {margin-inline: -1rem;}
    footer > div:nth-child(3) .container > span:nth-child(2) {display: none;}

}
@media screen and (max-width: 470px) {
    .titlebar .bg {background: url(/img/header_small.jpg) center top / cover no-repeat;}
    body.home .titlebar .bg {background: url(/img/header2_small.jpg) center top / cover no-repeat;}
}