/*** Site specifieke CSS ***/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,400&family=Roboto:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'Brockmann'; 
    src: url('/upload/files/2/Brockmann-medium-webfont.woff2') format('woff2'), url('/upload/files/2/brockmann-medium-webfont.woff') format('woff');
    font-weight: 500; 
    font-style: normal;
    font-display: swap;
}

:root{
    --font-primary: 'Inter', sans-serif;
	--font-secondary: 'Brockmann', sans-serif;
    --font-special: 'Poppins', sans-serif;

    --ts-25: 250ms;
    --ts-duration: 250ms;
    --ts-function: ease-in-out;
}





/*** ---------- DEFAULT CSS ---------- ***/
:root {
    --ts-duration: 150ms;
    --ts-function: ease-in-out;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; line-height: 1.5; font-weight: 400; font-family: var(--font-primary); color: var(--clr-text); }
body { font-size: 1.6rem; }
img { display: block; width: 100%; height: auto; }

/*** ---------- Containers ---------- ***/
.container { --mw: 100%; width: 100%; max-width: var(--mw); padding-left: 2rem; padding-right: 2rem; margin-left: auto; margin-right: auto; }

@media (min-width: 576px) {
    .container { --mw: 540px; }
}
@media (min-width: 768px) {
    .container { --mw: 720px; }
}
@media (min-width: 992px) {
    .container { --mw: 960px; }
}
@media (min-width: 1200px) {
    .container { --mw: 1140px; }
    .container--980 { --mw: 980px; }
}
@media (min-width: 1400px) {
    .container { --mw: 1240px; }
    .container--980 { --mw: 980px; }
}


/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 700; }
h1, .h1 { font-size: clamp(2.8rem, 5vw, 5.4rem); }
h2, .h2 { font-size: clamp(2.4rem, 4vw, 3.2rem); }
h3, .h3 { font-size: clamp(1.8rem, 3vw, 2rem); }
.text > * { --mt: 1em; }
.text > * + * { margin-top: var(--mt); } 
.text > * + .sub-title { --mt: 0; }
.text ul { padding-left: 2rem; }
.sub-title { color: var(--clr-primary); font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 400; }

/*** ---------- Aspect ratio ---------- ***/
.ratio { --aspect-ratio: 100%; position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--aspect-ratio); content: ""; }
.ratio--21x9 { --aspect-ratio: 42.8571428571%; }
.ratio--16x9 { --aspect-ratio: 56.25%; }
.ratio--1x1 { --aspect-ratio: 100%; }
.ratio--4x3 { --aspect-ratio: 75%; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio > img,
.ratio > video { object-fit: cover; } 

/*** ---------- Blaze slider ---------- ***/
.blaze-slider{--slides-to-show:1;--slide-gap:20px;direction:ltr}.blaze-container{position:relative}.blaze-track-container{overflow:hidden}.blaze-track{will-change:transform;touch-action:pan-y;display:flex;gap:var(--slide-gap);--slide-width:calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));box-sizing:border-box}.blaze-track>*{box-sizing:border-box;width:var(--slide-width);flex-shrink:0}

.blaze-slider .blaze-buttons { display: flex; align-items: center; column-gap: 10px; }
.blaze-slider .blaze-prev,
.blaze-slider .blaze-next { --clr: #fff; --bg-clr: var(--clr-primary); font-size: 1.4rem; border: none; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--bg-clr); color: var(--clr); }
.blaze-slider.static .blaze-buttons { display: none; }
.blaze-slider.start .blaze-prev, .blaze-slider.end .blaze-next { pointer-events: none; opacity: .75; }

/*** ---------- Buttons ---------- ***/
.btn-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.btn { 
    --fs: 1.6rem; 
    --lh: 1; 
    --p: 0 3.2rem; 
    --br: var(--btn-border-radius, 5rem); 
    --gap: 1rem;

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: #fff; --hover-bg-clr: var(--bg-clr); --hover-border: 1px solid #fff; --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: 0 0 0 .5rem var(--clr-primary-20); 
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    display: inline-flex; font-weight: 700; justify-content: center; align-items: center; font-family: var(--font-primary); min-height: 50px; gap: var(--gap); font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; 
    
    transition-duration: var(--ts-duration);
    transition-timing-function: var(--ts-function);

    transition-property: color, background-color, border-color, box-shadow, -webkit-box-shadow;
}
.btn span { font: inherit; color: inherit; }
.btn i { --clr: inherit; transition: color var(--ts-duration) var(--ts-function); }
.btn:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important; }
.btn:hover i { --clr: var(--hover-clr); }
.btn:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; }
.btn:focus i { --clr: var(--focus-clr); }
.btn:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; }
.btn:active i { --clr: var(--active-clr); }

.btn.btn--primary { 
    --clr: var(--btn-primary-clr, #fff);
    --bg-clr: var(--btn-primary-bg, var(--clr-primary));
    --border: 1px solid var(--btn-primary-border, var(--clr-primary));
    --hover-clr: var(--btn-primary-hover-clr, #fff);
    --hover-bg-clr: var(--btn-primary-hover-bg, var(--clr-primary-110)); 
    --hover-border: 1px solid var(--btn-primary-hover-border, var(--clr-primary-110));
}

.btn.btn--white { 
    --bg-clr: #fff; 
    --clr: var(--clr-secondary);
    --border: 1px solid #fff; 
    --hover-clr: var(--clr-primary); 
}

.btn.btn--outline {
    --bg-clr: var(--btn-outline-bg, transparent); 
    --clr: var(--btn-outline-clr, var(--clr-text)); 
    --border: 1px solid var(--btn-outline-border, #DAE2E7); 
    --hover-bg-clr: var(--btn-outline-hover-bg, var(--clr-secondary)); 
    --hover-clr: var(--btn-hover-clr, var(--clr-text-light));
    --hover-border: 1px solid var(--btn-outline-hover-border, var(--clr-secondary));  
}
.btn.btn--outline i { color: var(--clr-primary); }

.btn.btn--outline:hover i, 
.btn.btn--outline:focus i, 
.btn.btn--outline:active i { color: #fff; }

.btn.btn--outline-light { 
    --bg-clr: var(--btn-outline-light-bg, transparent); 
    --clr: var(--btn-outline-light-clr, #fff); 
    --border: 1px solid var(--btn-outline-light-border, rgba(255,255,255,.15)); 
    --hover-bg-clr: var(--btn-outline-light-hover-bg, #fff); 
    --hover-clr: var(--clr-text);
}

.btn.btn--small { --fs: 13px; --p: 0 12px; min-height: 2.8rem; }

/*** ---------- Badge ---------- ***/
.badge-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.badge { 
    --fs: 1.3rem; 
    --lh: 1; 
    --p: 0 1.2rem; 
    --clr: #fff; 
    --bg-clr: var(--clr-dark); 
    --br: var(--badge-border-radius, 2rem); 
    --border: none; 
    --box-shadow: none; 
    
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    
    display: inline-flex; align-items: center; min-height: 2.8rem; font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; user-select: none; 
    
    transition-duration: var(--ts-duration); 
    transition-timing-function: var(--ts-function); 
    transition-property: color, background-color, border-color, box-shadow; 
}
.badge:hover { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); box-shadow: var(--hover-box-shadow); }
.badge.badge--primary { --clr: #fff; --bg-clr: var(--clr-primary); }
.badge.badge--primary-light { --clr: var(--clr-primary); --bg-clr: var(--clr-primary-20); }
.badge.badge--small { --fs: 1.2rem; --p: 0 .8rem; min-height: 2rem; }

/*** ---------- Backdrop ---------- ***/
.backdrop { background-color: rgba(0, 0, 0, .2); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.backdrop.active { opacity: 1; pointer-events: all; }

/*** ---------- YouTube embed -------- ***/
.ratio .youtube-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease; }
.ratio .youtube-play img { object-fit: cover; width: 100%; height: 100%; }
.ratio .youtube-play .play-icon { position: absolute; top: calc(50% - 3.2rem); left: calc(50% - 3.2rem); display: grid; place-items: center; z-index: 2; background-color: var(--clr-primary); border-radius: 50%; width: 6.4rem; height: 6.4rem; transition: .25s ease; }
.ratio .youtube-play .play-icon i { color: rgb(255,255,255); }
.ratio:hover .youtube-play .play-icon { transform: scale(1.065); }