/*** Site specifieke CSS ***/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
    --font-primary: "Roboto", sans-serif;
    --hero-bg: var(--clr-light);
    --border-radius: 0px;
}










/*** ---------- 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; }
.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: 0%; 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: 0rem; 
    --gap: 1rem;

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --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 { --hover-bg-clr: 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: transparent; --clr: var(--clr-secondary); --border: 1px solid #DAE2E7; --hover-bg-clr: var(--clr-secondary); --hover-clr: #fff; }
.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: transparent; --clr: #fff; --border: 1px solid rgba(255,255,255,.15); --hover-bg-clr: #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: 0; 
    --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: 0%; 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); }

/*** ---------- Header ---------- ***/
.header { position: relative; z-index: 1040; }
.header .header__collapse nav { width: 100%; }
.header .header__collapse nav ul { list-style: none; }
.header .header__collapse nav .menu-item { position: relative; }
.header .header__collapse nav .menu-item .menu-link { position: relative; color: var(--clr-text); display: block; text-decoration: none; padding: 1rem 0; }
.header .header__collapse nav .menu-item.menu-item--children > .menu-link { padding-right: 3.2rem; }  
.header .header__collapse nav .menu-item.menu-item--children > .menu-link .sub-menu-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 4rem; display: grid; place-items: center; }

.header .nav-toggle { display: none; cursor: pointer; color: #fff; padding: 2rem; margin-left: auto; }

@media (max-width: 767.98px) {
	.header .nav-toggle { display: block; }
	.header .header__collapse { padding: 2rem; position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; transform: translateY(1rem); opacity: 0; pointer-events: none; z-index: -1; transition-duration: 250ms; transition-timing-function: ease-in-out; transition-property: transform, opacity; }
	.header .header__collapse.active { opacity: 1; pointer-events: all; transform: translateY(0); }
	
	.header .header__collapse .sub-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms ease; padding-left: 2rem; }
	.header .header__collapse .sub-menu ul { overflow: hidden; }
	.header .header__collapse .sub-menu.active { grid-template-rows: 1fr; }
}

@media (min-width: 768px) {
    .header .header__collapse { display: block!important; }
	.header .header__collapse nav ul { display: flex; }
	.header .header__collapse nav .menu-item .menu-link { color: #fff; padding: 2rem; }
	.header .header__collapse nav .menu-item.menu-item--children .menu-link .sub-menu-toggle { font-size: 1.4rem; pointer-events: none; }
	.header .header__collapse .sub-menu { min-width: 28rem; position: absolute; left: 0; top: calc(100% - 1px); opacity: 0; pointer-events: none; background-color: #fff; transition: opacity 150ms ease; }
	.header .header__collapse .sub-menu ul { display: flex; flex-direction: column; } 
	.header .header__collapse .sub-menu .menu-item .menu-link { color: var(--clr-secondary); padding: 1.25rem 2rem; }
	.header .header__collapse .sub-menu  .menu-item.menu-item--children .menu-link .sub-menu-toggle { transform: rotate(-90deg); }
	.header .header__collapse .sub-menu .sub-menu { left: calc(100% - 1px); top: 0; }
	.header .header__collapse nav .menu-item.menu-item--children:hover > .sub-menu { opacity: 1; pointer-events: all; }
	
}


/*** ---------- COMPONENTS OVERRIDE CSS ---------- ***/
.hero-vacature-detail .highlights .highlight .highlight__icon { background-color: #fff; color: var(--clr-primary); border-radius: 0; }
.hero-vacature-detail .ratio { margin: 0; }
.hero-vacature-detail .hero-vacature-detail__main .highlights, .hero-vacature-detail .carousel, .usps-carousel .highlights, .step-carousel .step, .accordion__item .accordion__toggle span, .vacature-alert .vacature-alert__text i { border-radius: 0; }
.hero-vacature-detail :is(h1, ul):not(.highlights *) { color: var(--clr-secondary); }
.hero-vacature-detail .btn.btn--outline-light { --bg-clr: ransparent;
    --clr: var(--clr-secondary); --border: 1px solid #DAE2E7; --hover-bg-clr: var(--clr-secondary); --hover-clr: #fff; }

.solliciteer-cta .solliciteer-cta__body { background-color: var(--clr-primary); }
.step-4-4 { background-color: #F9F9F9; }

@media (min-width: 1200px) {
    .hero-vacature-detail .hero-vacature-detail__main .container {
        gap: 0;
    }
}