:root {
	/*Kleuren*/
	--primary: #0000ff;
	--primary-dark: #0000c4;
	--primary-very-light: rgb(199, 199, 255);
	--secondary: #ff8200;
	--tertiary: #d2beaf;
	--tertiary-light: #efe8e1;
	--tertiary-very-light: #F6F2EF;
	--white: #fff;
	--black: #000;
	/*Fonts*/
	--font1: "Urbanist", sans-serif;
	/*Fontsizes*/
	--fs-big: 5rem;
	--fs-1: var(--fs-big);
	--fs-2: 40px;
	--fs-3: 2.1875rem;
	--fs-4: clamp(1.25rem, 1.5vw, 1.5rem);
	--fs-5: 1.125rem;
	--fs-6: 1rem;
	--fs-main: var(--fs-5);
	--fs-case-tile: 2.5rem;
	/*Weights*/
	--fweight1: 400;    --fweight2: 500;
	--fweight3: 600;    --fweight4: 700;
	/*Lijnhoogtes*/
	--lh-1: 1;
	--lh-2: 1.5;
	--lh-3: 1.75;
	--lh-4: 1.75;
	/*Marges*/
	--spacing1: 1.25rem;
	--spacing2: calc(var(--spacing1) * 2);
	--spacing3: calc(var(--spacing1) * 3);
	--spacing4: calc(var(--spacing1) * 4);
	--spacing5: calc(var(--spacing1) * 5);
	--blok-spacing: 7.25rem;
	--col-width: calc(100%/12);
	/*Standaard configuratie*/
	--header-height: 100px;
	--main-transition: 0.4s ease;
	--main-spacing: 1.5rem;
	--offset-main: calc(var(--header-height) + 3.25rem);
	--showreel-height: 800px;
	--subhero-img-height: 600px;
	/*Borderradiuses*/
	--br-250: 250px;
	--br-300: 300px;
	/*Gradients*/
	--orb-pri-left:radial-gradient(circle at 10% 100%, rgba(240, 139, 50, 0.7) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%);
	--orb-pri-right:radial-gradient(circle at 90% 100%, rgba(240,140,50, 0.7) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%);
	--orbs-pri:var(--orb-pri-left),var(--orb-pri-right);
	/*Links*/
	--bs-link-color: var(--primary);
	--bs-link-hover-color: var(--secondary);

	--pre-footer-height: 370px;
	--pre-footer-offset: var(--pre-footer-height) / 1.5;
	--fs-small: 15px;
}

@media (max-width: 992px) {
	:root {
		--br-300: 100px;
	}
}

@media (max-width: 767px) {
	:root {
		--spacing1: .75rem;
		--blok-spacing: 4.75rem;
		--showreel-height: 500px;
		--offset-main: calc(var(--header-height) + 2rem);
	}
}


.
.fsize4      { font-size: var(--fs-4)!important; line-height: var(--lh-4)!important; font-weight:var(--fweight2); }

.fweight1    { font-weight: var(--fweight1)!important; }
.fweight2    { font-weight: var(--fweight2)!important; }
.fweight3    { font-weight: var(--fweight3)!important; }
.fweight4    { font-weight: var(--fweight4)!important; }

.mb1         { margin-bottom: var(--spacing1); }
.mb2         { margin-bottom: var(--spacing2); }
.mb3         { margin-bottom: var(--spacing3); }
.mb4         { margin-bottom: var(--spacing4); }
.mb5         { margin-bottom: var(--spacing5); }
.mb80		 { margin-bottom: 5rem; }
.mb200		 { margin-bottom: 12.5rem; }
.mt1         { margin-top: var(--spacing1); }
.mt2         { margin-top: var(--spacing2); }
.mt3         { margin-top: var(--spacing3); }
.mt4         { margin-top: var(--spacing4); }
.mt5         { margin-top: var(--spacing5); }

.lh-1 {line-height: var(--lh-1)!important;}
.lh-2 {line-height: var(--lh-2)!important;}
.lh-3 {line-height: var(--lh-3)!important;}

.cPrimary    { color: var(--primary); }
.cSecondary  { color: var(--secondary); }
.cTertiary   { color: var(--tertiary); }

font { font: inherit !important; color: inherit !important;} /* google-translate */

/*Unsets*/
.breadcrumb-container {display: none!important;}
:is(.btn, input, textarea){box-shadow:none!important;}
:is(header, footer, .service) ul {list-style:none;padding:0;margin: 0}

/* Buttons */
.btn {
	--bs-btn-padding-x: 2rem;               --bs-btn-padding-y: 0.875rem;
	--bs-btn-border-radius: 200px;          --bs-btn-font-size: var(--fs-5);
	--bs-btn-font-weight: var(--fweight3);  --bs-btn-focus-shadow-rgb: none;
	transition:var(--main-transition);
}

.btn-primary, .btn-sm-primary {
	--bs-btn-bg: var(--primary);                    --bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--primary);           --bs-btn-active-color: var(--primary);
	--bs-btn-hover-bg: var(--white);                --bs-btn-hover-border-color: var(--white);
}

.btn-primary:active, .btn-primary:focus {background: var(--primary)!important; border-color: var(--primary); color: var(--white);}
.btn-primary:not([class*="bg-"] .btn-primary:not(.bg-custom .btn-primary)):hover{filter:drop-shadow(2px 2px 5px rgba(0,0,0,.2));}
.btn-primary.hover-secondary {--bs-btn-hover-bg: var(--secondary); --bs-btn-hover-border-color: var(--secondary); --bs-btn-hover-color: var(--white)}

.btn-sm-primary { --bs-btn-color: var(--white); --bs-btn-padding-y: 0.625rem; --bs-btn-padding-x: 1.25rem; }

.btn-primary:active {--bs-btn-active-bg: var(--primary)!important}

.btn-secondary {
	--bs-btn-bg: var(--white);                     --bs-btn-border-color: var(--white);
	--bs-btn-color: var(--primary);                --bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);   --bs-btn-hover-color: var(--white);
}

.btn-secondary-alt {
	--bs-btn-bg: var(--white);                      --bs-btn-border-color: var(--white);
	--bs-btn-color: var(--black);                   --bs-btn-active-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary);              --bs-btn-active-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);    --bs-btn-hover-color: var(--white);
	--bs-btn-active-color: var(--white);
}

.btn-filter {
	background: var(--white);
	color: var(--black);
	border: 1px solid var(--white);
	&:is(:focus, :visited, :active) { background: var(--white); color: var(--black); border: 1px solid var(--white); }
	&:hover{ background: var(--primary); color: var(--white); border: 1px solid var(--primary); }
}
.btn.btn-filter.selected {
	background: var(--primary)!important;
	color: var(--white);
}

.btn-outline-white {
	--bs-btn-padding-x: 3rem;
	--bs-btn-font-size: 1rem;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--white);
	--bs-btn-color: var(--white);
	--bs-btn-hover-bg: var(--white);
	--bs-btn-hover-border-color: var(--white);
	--bs-btn-hover-color: #131A1D;
	--bs-btn-active-bg: var(--white);
	--bs-btn-active-border-color: var(--white);
	--bs-btn-active-color: #131A1D;

	&.play {
		display: inline-flex;
		align-items: center;
		gap: 1rem;

		&::before {
			content: "";
			display: inline-flex;
			width: .75rem;
			height: .75rem;
			background: url(../img/svg/play-button.svg) center/contain no-repeat;
		}
		&:is(:hover, :active, :focus)::before {
			filter: brightness(0) saturate(100%) invert(7%) sepia(3%) saturate(4918%) hue-rotate(174deg) brightness(108%) contrast(97%);
		}
	}
}

.btn-secondary.arrow-down{position:relative;padding-inline-end:4rem}
.btn-secondary.arrow-down::before, .btn-secondary.arrow-down::after{--spacing:4px;content:"";position:absolute;right:var(--spacing);top:var(--spacing);height:calc(100% - calc(2 * var(--spacing)));aspect-ratio:1;border-radius:50%}
.btn-secondary.arrow-down::before{background-color: var(--primary)}
.btn-secondary.arrow-down::after{background:center/50% no-repeat url(../img/svg/arrow-down-white.svg);transition:var(--main-transition)}
.btn-secondary.arrow-down:hover::before{background-color:var(--white)}
.btn-secondary.arrow-down:is(:hover,:active)::after{background:center/50% no-repeat url(../img/svg/arrow-down-blue.svg);animation: arrowDownAnimation 400ms linear forwards;}

.btn.arrow-left {--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;position:relative;padding-inline-start:50px;font-weight:var(--fweight4);color:var(--primary);}
.btn.arrow-left::before, .btn.arrow-left::after{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:40px;aspect-ratio:1;border-radius:50%}
.btn.arrow-left::before{background-color:var(--primary);transition:var(--main-transition)}
.btn.arrow-left::after{background:url(../img/svg/arrow-left-white.svg) center/50% no-repeat}
.btn.arrow-left:hover::after{animation:button-left-animation 500ms linear forwards}

/*Body*/
html,body{max-width:100%}
body{font-family:var(--font1);font-size:var(--fs-main);font-weight:var(--fweight3);line-height:var(--lh-3);--webkit-font-smoothing:antialiased;--moz-osx-font-smoothing:grayscale;}
.nextrevolution-link{ position: fixed; right: 0; bottom: 40px; width: 100px; z-index: 99999;filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.25));background: #ffd700;margin-right: -5px;transition: 150ms ease;&:hover {width: 110px; padding-right: 10px; }}

/*Main*/
main > div:last-child:not(:where([class^="case-"], .blok61, .blok63, .meet-the-team, .blogs, .case-overview, .error-page)) {padding-bottom: calc(var(--blok-spacing) + var(--pre-footer-offset))!important;}
.bg-dark p{font-weight: var(--fweight2)!important;}
.form-control {border: none; border-bottom: 1px solid var(--tertiary-light); border-radius: 0}

:where(p, a:not(.btn), li) {font-weight: var(--fweight2);}

/*Navlinks*/
.nav-link {--bs-nav-link-color:var(--black)}
.nav-link.active {--bs-nav-link-color:var(--secondary);--bs-navbar-color: var(--secondary); }

/*Containers*/
.container-fluid{max-width:2250px;padding-inline:calc(var(--bs-gutter-x) * 2);}
.container{max-width:1420px}

/*Scrollbar*/
::-webkit-scrollbar {width: 14px}
::-webkit-scrollbar-track{background: var(--tertiary-light)}
::-webkit-scrollbar-thumb{background: var(--secondary)}

/*Animaties*/
.fw-oh{max-width: 100vw;overflow:hidden;}

/* Terugkerende elementen */
.offset-header{--icon-size:3.125rem;display:block;position:relative;font-size:var(--fs-3);line-height:var(--lh-1);font-weight:var(--fweight1);padding-inline-start:calc(var(--icon-size) + 20px);margin-bottom:var(--spacing3) !important; }
.offset-header::before { content: ""; position: absolute; left: 0; top:7px; width: var(--icon-size); aspect-ratio: 1; background-image: url("data:image/svg+xml,%3Csvg width='53' height='58' viewBox='0 0 53 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0.435059C0 15.0752 11.19 26.9377 25 26.9377V0.435059H0Z' fill='%230000FF'/%3E%3Cpath d='M27.4346 31.4495C27.4346 46.0896 38.6245 57.9522 52.4346 57.9522V31.4495H27.4346Z' fill='%230000FF'/%3E%3Cpath d='M27.4346 0.435059C27.4346 15.0752 38.6245 26.9377 52.4346 26.9377V0.435059H27.4346Z' fill='%230000FF'/%3E%3Cpath d='M0 31.4495C0 46.0896 11.19 57.9522 25 57.9522V31.4495H0Z' fill='%230000FF'/%3E%3C/svg%3E%0A"); background-size: contain; background-position: center; background-repeat: no-repeat; }

.blok-contact::before{content:"";position:absolute;inset:10% 0 0 0;background:var(--tertiary)}

.case-grid-3 .case-tile {margin-bottom: var(--spacing1); transition: var(--main-transition)}
.case-grid-3 .case-tile .inner {padding: var(--spacing2); height: 650px}
.case-grid-3 .achievements { display: flex; align-items: center; justify-content: center; gap: var(--spacing1); padding-inline: var(--spacing2)}
.case-grid-3 .achievements strong {font-size: calc(2.5rem + 1vw); line-height: 1;}
.case-grid-3 .achievements p {font-size: 1rem; font-weight: 500;}
.case-grid-3 .achievements:has(strong:empty) p {text-align: center}

.case-tile {position: relative; z-index: 0; overflow: hidden; cursor: pointer}
.case-tile *:not(.btn) {color: var(--white)}
.case-tile::before, .case-tile::after {transition: var(--main-transition)}
.case-tile::before {content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--black), transparent 60%), var(--bg) center/cover no-repeat, linear-gradient(#000, transparent)}
.case-tile .inner {filter: drop-shadow(1px 1px 3px rgba(0,0,0,.6)); display: block; height: 100%; position: relative; z-index: 2; word-wrap: break-word}
.case-tile .client {display: block; margin-bottom: calc(var(--spacing1) / 2); font-size: 20px; font-weight: var(--fweight4)}
.case-tile .labels {position: absolute; z-index: 2; right: var(--spacing2); bottom: var(--spacing2); display: flex; gap: 10px; flex-wrap: wrap}
.case-tile .labels .btn {--bs-btn-padding-x: 22px; --bs-btn-padding-y: 8px; font-size: 1rem; font-weight: 500!important;opacity: .8; pointer-events: none;}
.case-tile:hover::before {transform: scale(1.025)}

.case-tile .slogan {position: relative; display: inline; font-size: var(--fs-case-tile); font-weight: var(--fweight4); line-height: 1; transition: filter var(--main-transition)}
.case-tile .nowrap-last svg {display: inline-block; transform: translate(5px, -5%); transition: var(--main-transition); * {transition: var(--main-transition);}}
.case-tile:hover .nowrap-last svg {transform: translate(10px, -5%); rect {fill: var(--primary)} path {stroke: var(--white)}}
.case-tile .nowrap-last {white-space: nowrap; display: inline-block;}

.medewerker {position: relative}
.medewerker .info {position: absolute; transition: var(--main-transition); inset: 0; background: rgba(0, 0, 255, .8); align-items:end; padding: var(--spacing2); opacity: 0;}
.medewerker .info * {color: var(--white); transition: var(--main-transition);}
.medewerker .info a {display: block; line-height: var(--lh-2);}
.medewerker .info a:hover {color: var(--secondary);}
.medewerker .info::after {content: ""; position: absolute; top: var(--spacing2); right: var(--spacing2); width: 50px; height: 50px; background:url(../img/svg/logo-icon-white.svg) 100% / contain no-repeat;}
.medewerker .info .inner {transform: translateY(30px); transition: var(--main-transition)}
.medewerker:hover .info {opacity: 1}
.medewerker:hover .inner {transform: translateY(0px);}

/*
MARK: Header / Footer
*/
header {transition: var(--main-transition); border-bottom: 1px solid transparent; position: fixed; z-index: 1000; width: 100%}
header.homepage a.nav-link.menu-l1 {color: var(--white);}
header:not(:where(.fixed, .homepage)) .navbar-tool-icon-box svg rect {fill: var(--black);}
header.fixed {--header-height: 70px; background: #131A1D;}
header .navbar-top {--bs-navbar-padding-y: 0; transition: var(--main-transition); border: 1px solid transparent }
header .navbar-top li:has(> a.menu-l1) { height: var(--header-height); display: grid; place-content: center; transition: height var(--main-transition);}
header :is(.logo-wrapper, .contact-wrapper) {position: relative; align-self: stretch; width: 150px}
header .contact-wrapper {align-items: center; justify-content: end}
header .logo {position: absolute; top: 50%; transform: translateY(-50%); transition: var(--main-transition)}
header .logo-white {opacity: 0}
header .logo img {max-width: 100%; transition: filter var(--main-transition);}
header .navbar {position: unset}
header .navbar-main {padding-block: 0}
header .navbar-main .hasMenu > ul {opacity: 0; position: absolute; left: 0!important; top:var(--header-height); width: 100%; pointer-events: none; transition: var(--main-transition); border-top: 1px solid var(--tertiary)}
header .navbar-main .nav-item:hover > ul {opacity: 1; pointer-events: all; background: var(--black)}
header .divider-heading { color: var(--secondary); padding-inline: var(--bs-nav-link-padding-x); margin-bottom: .5em; font-weight: 500; }
header .nav-item:has(+ .divider-heading) + .divider-heading { margin-top: 30px; }
header .menu-l2 { color: var(--white); font-size: var(--fs-4); font-weight: var(--fweight4); position: relative; padding-left: 50px; margin-bottom: 1.5em }
header .menu-l2::after {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding-left: 50px; background: url(../img/svg/apple-part.svg); background-size: 50%; background-position: center; background-repeat: no-repeat}
header .menu-l3 { color: var(--white); line-height: .67; font-size: var(--fs-5); font-weight: var(--fweight2) }
header .vacatures {position: relative}
header .vacatures > div {opacity: 0; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); width: 20px; height: 20px; background-color: var(--secondary); display: grid; place-content: center; color: var(--white); border-radius: 50%; font-size: 14px}
header .vacatures > div.visible {opacity: 1}
header:has(:is(.nav-item:hover .hover-menu, [class*="menu-l"]:focus-visible)) { background: var(--black); color: var(--white); }
header:not(.v2):has(:is(.nav-item:not(.hasMenu):hover .hover-menu, [class*="menu-l"]:focus-visible)) .logo { filter: invert(100%); }
header:has([class*="menu-l"]:focus-visible) .navbar-top a.nav-link { color: var(--white); }
header:has(.nav-item:hover .hover-menu) .nav-link.menu-l1 { --bs-nav-link-color: var(--white); }
header:has(.nav-item:hover .hover-menu) > ul:hover, header:has([class*="menu-l"]:focus-visible) .navbar-main .hasMenu > ul { background: #131A1D; opacity: 1; }
header:not(.fixed):not(.homepage):has(.nav-item.hasMenu:hover) .logo img {filter: invert(100%)}
header.fixed:not(.homepage) a.nav-link.menu-l1 {color: var(--white);}
header.fixed:not(.homepage) .logo img {filter: invert(100%);}
header:has(:is(.nav-item:hover .hover-menu, [class*="menu-l"]:focus-visible)) {background: #131A1D;}
header .navbar-main .hasMenu > ul {border-top: 1px solid var(--white);}
#mobileSideMenu .mm-navbars_top .mm-navbar{flex-direction:column;gap:15px;}
#mobileSideMenu .mm-navbars_top .mm-navbar .btn{--bs-btn-padding-y:8px;width:50%;}
#mobileSideMenu #mm-vacatures{--s:6px;position:relative;&::after{content:attr(data-count);position:absolute;top:50%;right:var(--s);height:calc(100% - calc(2*var(--s)));aspect-ratio:1;transform:translateY(-50%);background:var(--white);color:var(--primary);border-radius:50%;display:grid;place-content:center}}
#mobileSideMenu .mm-panels{position:relative;&::after{content:"";position:absolute;z-index:3;width:100vw;max-width:350px;aspect-ratio:1;right:-5%;bottom:0;background:url(../img/svg/logo-icon-white.svg) center / contain no-repeat;opacity:0.1;pointer-events:none;}}
#mobileSideMenu .mm-panels > .mm-panel *{font-weight:var(--fweight2);font-size: 1.5rem;}
#mobileSideMenu .mm-panels > .mm-panel:first-child *{font-size:2rem}
#mobileSideMenu .mm-panels > .mm-panel:first-child .nav-item{padding-block:10px}
.mm-navbar__title span{overflow: visible!important}

footer {background: var(--white); display: flex; flex-direction: column;}
footer::after {content: ""; display: inline-flex; width: 100%; height: 10px; background: var(--secondary);}
footer .pre-footer {box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; position: relative; z-index: 10; background: var(--white); border-radius: 20px; margin: 0 auto; overflow: hidden;}
footer .pre-footer:not(.has-form) {top: calc(var(--pre-footer-offset) * -1)}
footer .pre-footer .container {padding: 0;}
footer .pre-footer a:not(.btn) {color: inherit; transition: var(--main-transition);}
footer .pre-footer a:not(.btn):hover {color: var(--secondary);}
footer .pre-footer img {width: 100%; height: 100%; object-fit: cover;}
footer .pre-footer :where(.message, form) {padding-left: calc(var(--bs-gutter-x) * 2);}
footer .pre-footer .form {padding-block: 2rem;}
footer .pre-footer .form-intro {padding-inline: 2rem;}
footer .pre-footer .contact-details {display: flex; flex-direction: column; justify-content: center; padding-inline: 3rem; background: #D2BEAF;}
footer .pre-footer :where(.form-contact, form) {padding: 2rem;}
footer .pre-footer .form-contact {display: flex; flex-direction: column; justify-content: end; height: 100%;}
footer .pre-footer .form-contact small {display: block;}
footer .pre-footer:not(.has-form) {top: calc(var(--pre-footer-offset) * -1);}
footer .pre-footer.has-form {position: relative; top: calc(var(--blok-spacing) * -1); width: 100%;}
footer .pre-footer.has-form form {padding-inline: calc(var(--bs-gutter-x) * 2)}
footer :where(.message, .contact-details) {padding-block: 2rem;}
footer:not(:has(.has-form)) .main-footer {margin-top: calc(var(--pre-footer-offset) * -1); padding-block: calc(var(--pre-footer-offset) - var(--blok-spacing)) calc(var(--blok-spacing) / 2);}
footer .main-footer {padding-bottom: calc(var(--blok-spacing) / 2);}
footer .footer-col a {color: inherit; transition: color var(--main-transition);}
footer .footer-col a:hover {color: var(--secondary);}
footer .social-icons {display: flex; gap: 1rem; width: fit-content;}
footer .social-icons > a {--h: 2.25rem; display: block; width: var(--h); min-width: var(--h); height: var(--h); min-height: var(--h); transition: opacity var(--main-transition)}
footer .social-icons:hover a {opacity: .4}
footer .social-icons:hover a:hover {opacity: 1;}
footer #facebook {background: url(../img/svg/facebook-icon_v2.svg) center/contain no-repeat;}
footer #instagram {background: url(../img/svg/instagram-icon_v2.svg) center/contain no-repeat;}
footer #linkedin {background: url(../img/svg/linkedin-icon_v2.svg) center/contain no-repeat;}
footer #youtube {background: url(../img/svg/youtube-icon_v2.svg) center/contain no-repeat;}
footer .quality-labels {display: flex; gap: 1rem;}
footer .quality-labels .label {--w: 4rem; width: var(--w); height: var(--w); max-width: var(--w); max-height: var(--w);}

/*
MARK: Homepage
*/
.homepage-hero {--hero-height: 900px; position: relative; background: #131A1D; height: var(--hero-height); max-height: var(--hero-height); display: flex; align-items: end; padding-bottom: 10rem; overflow: hidden;}
.homepage-hero .inner {position: relative; z-index: 1;}
.homepage-hero h1 {margin-bottom: 2.25rem;}
.homepage-hero p {text-wrap: balance; margin-bottom: 2.875rem;}
.homepage-hero video {position: absolute; z-index: 0; top: 0; right: -7.5%; height: 100%; max-height: var(--hero-height); object-fit: cover; mix-blend-mode: lighten;}
.homepage-hero .content-wrapper .inner {transform: translateY(1rem); opacity: 0.005;}
.homepage-hero + .scroll {position: relative;}
.homepage-hero + .scroll::after, .homepage-hero + .scroll::before {--s: 70px; content: ""; position: absolute; z-index: 3; bottom: 0; left: 50%; transform: translate(-50%, calc(var(--s) / 2)); width: var(--s); height: var(--s); border-radius: 50%;}
.homepage-hero + .scroll::before {background: var(--white);}
.homepage-hero + .scroll::after {background: url(../img/svg/arrow-down-long-orange.svg) bottom/1rem no-repeat; animation: animate-scroll 3s ease-out infinite;}

.homepage-diensten {--spacing-l: 2.5rem; --spacing-m: 1.5rem; padding-block: var(--blok-spacing); overflow: hidden;}
.homepage-diensten a {color: var(--black);}
.homepage-diensten .links {display: flex; align-items: center; gap: 1rem;}
.homepage-diensten .main-link {position: relative; display: block; min-width: 30px; width: 30px; height: 30px; border-radius: 50%; background-color: var(--black);}
.homepage-diensten .main-link::after {content: ""; position: absolute; inset: 0;	background: url(../img/svg/arrow-left-white.svg) center/1rem no-repeat; transform: rotate(180deg);}
.homepage-diensten .main-link:hover::after {animation: animate-arrow-circle 300ms ease forwards;}
.homepage-diensten .link-list a {transition: var(--main-transition); position: relative; display: inline-block; text-wrap: nowrap;}
.homepage-diensten .link-list a:not(:last-child) {padding-right: 1rem;}
.homepage-diensten .link-list a:not(:last-child)::after {content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 1px; background: black;}
.homepage-diensten .link-list a:not(:first-child) {padding-left: 1rem;}
.homepage-diensten .link-list a:hover {color: var(--secondary);}
.homepage-diensten a:has(img) {display: block;}
.homepage-diensten img {width: 100%; aspect-ratio: 1.5; object-fit: cover;}
.homepage-diensten .dienst {margin-bottom: var(--spacing-l);}
.homepage-diensten .diensten-swiper-v2 {overflow: hidden;}
.homepage-diensten .diensten-swiper-v2 ul {margin: 0; padding: 0;}
.homepage-diensten .diensten-swiper-v2 li {max-width: fit-content;}

.homepage-diensten .image {position: relative; border-radius: 20px; overflow: hidden; margin-bottom: var(--spacing-m);}
.homepage-diensten .image::after {content: ""; position: absolute; inset: 0; background: url(../img/svg/logo-icon-white.svg) center/100px no-repeat; backdrop-filter: blur(40px); opacity: 0; transition: opacity .8s ease; pointer-events: none;}
.homepage-diensten .image:hover::after {opacity: 1;}

.homepage-team-swiper .medewerker {width: 100%; height: 100%;}
.homepage-team-swiper .medewerker img {width: 100%; height: 100%; object-fit: cover;}

.homepage-about .row:first-child {margin-bottom: calc(var(--blok-spacing) * 1.5);}
.homepage-about .swiper-slide {display: flex; align-items: center; justify-content: center}
.homepage-about .swiper-slide img {width: 100%; filter: grayscale(100%); transition: filter var(--main-transition);}
.homepage-about .swiper-slide:hover img {filter: grayscale(0);}

/* SubHero's */
.subHeroCases{position:relative;padding-top:var(--offset-main);}
.subHeroCases::after{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;height:65%;background-color:var(--tertiary-light)}
.subHeroCases div:has(.case-resultaten) *{font-size:var(--fs-main);font-weight:var(--fweight4)}
.subHeroCases h1{max-width: 30ch;span{font-size:inherit!important}}
.subHeroCases img{width:100%;object-fit:cover}
.subHeroCases .case-resultaten{display: flex;gap: var(--spacing2);}
.subHeroCases .case-resultaten p{position:relative; text-wrap: balance; max-width: 500px;}
.subHeroCases .case-resultaten p:not(:first-child)::before{content:"";position:absolute;left:-20px;top:0;bottom:0;width:1px;background-color:var(--tertiary);border-radius: 100px}
.subHeroCases .case-hero-subs{display:flex;gap:var(--spacing5)}
.subHeroCases .case-hero-subs > div {height: fit-content;}
.subHeroCases .case-hero-subs > div:where(:nth-child(1), :nth-child(2)) {flex: 0 0 20%;}
.subHeroCases .toggleDiensten {margin-left: 40%;}

/* Cases overzichts pagina */
.featured-cases{padding-top:calc(var(--blok-spacing)/2)!important}
.featured-cases .btn{--bs-btn-padding-y:10px}
.featured-cases .grid{display:grid;grid-template-columns:repeat(6,1fr) 80px repeat(6,1fr);grid-template-rows:auto 1fr auto}
.featured-cases .text-content{grid-area:1/1/2/7;padding-bottom:calc(var(--blok-spacing)/2);font-size:var(--fs-4);line-height:var(--lh-3);}
.featured-cases .case-left{grid-area:2/1/4/8}
.featured-cases .case-right{grid-area:1/7/3/14;transform:translateY(calc(var(--blok-spacing)*-1.5))}
.featured-cases [class^="case-"]{padding:var(--spacing2)}
.featured-cases .case-tile{width:100%;aspect-ratio:1/0.8}

.filters{display:flex;justify-content:center;gap:var(--spacing1);flex-wrap:wrap;margin-bottom:var(--spacing4)}
.terug-naar-filters {position:fixed;bottom:15px;left:50%;transform:translateX(-50%);z-index:4;width:fit-content;opacity:0;pointer-events:none;}
.terug-naar-filters.visible{opacity:1;pointer-events:unset;}

/* Case detailpagina */
.tags-wrapper { overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition: var(--main-transition);}
.tags-wrapper.open {-webkit-line-clamp: unset;max-height: 100em;}
#toggleDiensten { transition: var(--main-transition); background: transparent; border: none; padding-inline: 0; color: var(--secondary); }
#toggleDiensten svg.flip { transform: rotate(180deg); }
[class^="case-"] .blok76 {margin-top: 0!important;}

/* Cases - footer navigatie */
.cases-navigation span{display:block}
.cases-navigation :is(.prev, .next, .alle-cases) {display:flex;align-items:center; height: calc(100% - var(--spacing3))}
.cases-navigation .alle-cases{position:relative; margin-bottom:var(--spacing3);}
.cases-navigation .alle-cases::before,
.cases-navigation .alle-cases::after{content:"";position:absolute;top:10%;bottom:10%;width:1px;background-color:var(--tertiary)}
.cases-navigation .alle-cases::before{left:0}
.cases-navigation .alle-cases::after{right:0}

/* Blogs overzichts pagina */
.featured-blogs{padding-top:calc(var(--blok-spacing)/2)!important}
.featured-blogs .btn{--bs-btn-padding-y:10px}
.featured-blogs .grid{display:grid;grid-template-columns:repeat(6,1fr) 30px repeat(7,1fr);grid-template-rows:auto 1fr auto}
.featured-blogs .text-content{grid-area:1/1/2/7;padding-bottom:calc(var(--blok-spacing)/2);font-size:var(--fs-4);line-height:var(--lh-3);}
.featured-blogs .case-left{grid-area:2/2/4/7}
.featured-blogs .case-right{grid-area:1/8/3/13;transform:translateY(calc(var(--blok-spacing)*-.75))}
.featured-blogs [class^="case-"]{padding:var(--spacing2)}
.featured-blogs .case-tile{width:100%;aspect-ratio:1;padding:0}
.featured-blogs .case-tile .slogan,
.blog-overview .case-tile .slogan{font-size:calc(var(--fs-case-tile) * .75);line-height:1.15}

.blog-overview .case-tile{width:100%;aspect-ratio:1}

/* Werkwijze */
.werkwijze [class^="fsize"]{display: block;}
.werkwijze .stap{position:relative;background:var(--white);padding-inline:calc(100%/12 + var(--bs-gutter-x));min-height:540px;display:grid;place-content:center;}
.werkwijze .stap:nth-of-type(odd){border-bottom-left-radius:var(--br-300);&::before{right:-30%;top:-10%}&:last-child::before{height:70%;top:50%;transform:translateY(-50%)}}
.werkwijze .stap:nth-of-type(even){border-bottom-right-radius:var(--br-300);&::before{left:-45%}}
.werkwijze img{position:absolute;top:var(--spacing3);right:var(--spacing3);height:23.5%;max-width:100px}
.werkwijze-hero-parts{position:relative;z-index:2;display:flex;justify-content:center;padding-block:var(--spacing4);margin-top:calc(calc(180px + var(--spacing2)) * -1);margin-bottom:calc(calc(180px + var(--spacing2)) * -.5);}
.werkwijze-hero-parts svg{max-width:80%}
.werkwijze-hero-parts + .blok56 {width: 80%; margin-inline: auto;}
.werkwijze-hero-parts .shape { opacity: 0; transform-origin: center; animation: rollin 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.werkwijze-hero-parts .shape:nth-of-type(1) { animation-delay: 0.1s; }
.werkwijze-hero-parts .shape:nth-of-type(2) { animation-delay: 0.2s; }
.werkwijze-hero-parts .shape:nth-of-type(3) { animation-delay: 0.3s; }
.werkwijze-hero-parts .shape:nth-of-type(4) { animation-delay: 0.4s; }
.werkwijze-hero-parts .shape:nth-of-type(5) { animation-delay: 0.5s; }

/* Over ons */
.over-ons.teamswiper + .blok29 {padding-block: var(--blok-spacing)!important;}

/* Landingspagina websites/webshops */
.website-tech .swiper-slide { display: flex; align-items: center;}
.website-tech .swiper-slide img {max-height: 60px;}

/*Blokken spacings / Algemeen*/
/* [class^="blok"]{position:relative;}
[class^="blok"]:not(:first-child) {margin-top: var(--blok-spacing)}
[class^="blok"] [class^="col-"]{position:relative;z-index:2}
[class*="bg-"]:not(.footer-main) {padding-block: var(--blok-spacing);}
[class*="bg-"]:has(+ [class*="bg-"]) + [class*="bg-"] {margin-top: 0!important}
div :has([class*="teamSwiper"]) + [class*="bg-"] {margin-top: 0!important;} */

/*Blokken - achtergronden*/
[class*="bg-dark"]{background-color:var(--black)}
[class*="bg-dark"] :is(h1,h2,h3,h4,h5,h6,.fsize1,.fsize2,.fsize3){color:var(--white);}
[class*="bg-dark"] a:not(.btn):not(footer a){font-size:1.25rem;color:var(--white);transition:var(--main-transition);&:hover{color:var(--secondary)}}
[class*="bg-secondary"]{background-color:var(--tertiary-light)}
:is(.bg-dark-svg,.bg-secondary-svg)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;max-height:1000px;background:var(--orbs-pri);background-size: cover;}
.bg-transparant-svg{position:relative;&::after{content:"";position:absolute;z-index:-1;left:0;bottom:0;right:0;height:600%;background:var(--orbs-pri)}}

/* Blokken */
:is(.blok7, .blok10) .inner .row{align-items:stretch;min-height:100%;}
:is(.blok7, .blok10) img{width:100%;aspect-ratio:1;object-fit:cover; position:sticky;top: calc(var(--header-height) * 1.375);}

.blok29 span:has(.btn):not(:first-child) .btn {margin-left: 1rem!important}
.blok29 p {text-wrap: balance;}
.blok29:has(+ :is(.blok7, .blok10)) {padding-bottom: calc(var(--blok-spacing)/2)!important}
.blok29:not([class*='bg']):has(+ :is(.blok7, .blok10)) + :is(.blok7, .blok10) {padding-top: 0!important}
.blok29.bg-secondary:has(+ .blok96.bg-secondary) {padding-bottom: 0!important}
.blok29.bg-secondary:has(+ .blok96.bg-secondary) + .blok96 {padding-top: var(--spacing2)!important}
body.home .blok29 p.fsize4:has(.btn) { display: flex; gap: 1rem; flex-wrap: wrap; }

.blok30 img {max-height: 700px; object-fit: cover}

.blok32 h3.fsize3 {margin-bottom: 5px}

.blok44 img {height: 100%; width: 100%; object-fit: cover}
.blok44 [class="col-"]:first-child {overflow: hidden!important}
.blok44 .swiper-44 {overflow: hidden; position: relative}
.blok44 .swiper-button-next {top: calc(100% - 40px); right: 15px}
.blok44 .swiper-button-prev {top: calc(100% - 40px); left: calc(100% - 110px)}

.home .blok48 p {display: block; font-weight: var(--fweight3)}
.blok48 h3 {margin-bottom: var(--spacing3)}

.blok56 strong {font-size:35px; font-weight: 500; line-height: var(--lh-4)}

.blok57 img {max-height: 700px; width: 100%; object-fit: cover; filter: brightness(80%) contrast(90%) saturate(140%)}
.blok57 .text {pointer-events: none; font-size: var(--fs-4); color: var(--white); font-weight: var(--fweight4); position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4))}
.blok57 p {position: relative; padding-top: 30px}
.blok57 p::before, .blok57 p::after {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 35px; aspect-ratio: 1; transition: var(--main-transition)}
.blok57 p::before {background: url(../img/svg/play-app-style.svg) 100% / contain no-repeat}
.blok57 p::after {background: url(../img/svg/play-button.svg) 100% / contain no-repeat; transform: scale(.5) translateX(-75%)}
.blok57 .inner {position: relative;}
.blok57 .inner:hover p::before {transform: scale(.5)}
.blok57 .inner:hover p::after {transform: scale(1)}

.home .blok59 [class^="col"]:not(:first-child) .offset-header {display: none}
.blok59:not(.home .blok59) .offset-header {display: none}
.blok59 .offset-header {font-weight: 500; line-height: 1; margin-bottom: var(--spacing4)!important; font-size: 35px!important}
.blok59 .offset-header::before {top: 7px}
.blok59 .inner {position: relative; padding-block-start: 60%}
.blok59 img {border-bottom-left-radius: 600px; position: absolute; left: 0; width:90%; top: 0; z-index: 0}
.blok59 .text {position: relative; z-index: 1}
.blok59 p {color: var(--white); font-weight: var(--fweight2)}
.blok59 .btn {margin-top: var(--spacing2)}

/* .blok61 {padding-block: unset!important}
.blok61 .container-fluid {max-width: unset}
.blok61 img {max-height: 750px; width: 100%; object-fit: cover}
[class*="blok"]:last-child.blok61 {padding-block: 0!important}
[class*="blok"]:last-child.blok61::after {content: ""; position: absolute; inset: 0; background: var(--orbs-pri); z-index: 2}
[class*="blok"]:last-child:not(.blok61):not(.case-overview):not(.blog-overview):not(.blok63:not(:has(+ [class^="blok"]))):not(.gg-form) {padding-bottom: calc(var(--blok-spacing) * 3)!important} */

.blok63 {position: relative; padding-block: calc((var(--blok-spacing) + var(--header-height)) * .75) var(--blok-spacing)!important;}
.blok63 > div {position: relative; z-index: 1;}
.blok63::after {z-index: 0; pointer-events: none;}
main > div:last-child.blok63 {padding-bottom: calc(var(--blok-spacing) * 1.5)!important;}

.blok64:has(+.blok) {padding-bottom: 0!important}

.blok65 {padding-bottom: var(--blok-spacing)}
.blok65 .accordion-header {display: flex; justify-content: space-between}
.blok65 .accordion-header a {align-self: center}
.blok65 .accordion-header a > div {max-height: 57px; display: flex; justify-content: center; min-width: 175px}
.blok65 .accordion-header a > div:hover {color: var(--primary)}
.blok65 .accordion-item {background: transparent; border: none; border-bottom: 1px solid var(--tertiary-light)}
.blok65:not(.alternative) .accordion-item * {color: var(--white)}
.blok65 .accordion-item:last-of-type {border-bottom-right-radius: 0; border-bottom-left-radius: 0}
.blok65 .accordion-button {--bs-accordion-btn-icon: url(../img/svg/plus-icon.svg); --bs-accordion-btn-active-icon: url(../img/svg/min-icon.svg); --bs-accordion-btn-icon-width: 2.25rem; box-shadow: unset; padding-left: calc(var(--bs-gutter-x) * 2 + 50px); font-size: var(--fs-3); font-weight: var(--fweight2); background-color: transparent; transition: var(--main-transition)}
.blok65 .accordion-button::after {margin: unset; position: absolute; left: var(--bs-gutter-x)}
.blok65 .accordion-button[aria-expanded="true"] {font-weight: 900; color: var(--secondary)}
.blok65 .accordion-body {padding-bottom: var(--spacing4)}

/* Variant voor landingspagina */
.blok65.alternative .accordion-item {border-bottom: 1px solid var(--tertiary)}
.blok65.alternative :is(p, button) {color: var(--black);}
.blok65.alternative .btn {display: none;}
.blok65.alternative .accordion-button {--bs-accordion-btn-icon: url(../img/svg/plus-icon_blue.svg);}
.blok65.alternative .accordion-button[aria-expanded="false"] { --bs-accordion-btn-icon-width: 1.5rem;}
.blok65.alternative .accordion-button[aria-expanded="true"] { color: var(--secondary);}

.blok66 .inner > .row {flex-direction: row-reverse}
.blok66 h1 span {display: block}

.blok68 figure img {width: 100%; max-height: 650px; min-height: 650px; object-fit: cover}

.blok69 .offset-header {display: block; max-width: 40ch; word-wrap: break-word; word-break: break-word}

.blok70 .inner {padding: var(--spacing2)}
.blok70 .inner::after {content: ""; position: absolute;}
.blok70:not(.alternatief) .inner::after {top: 5px; right: 5px; width: 50px; aspect-ratio: 1; background: url(../img/svg/logo-icon-white.svg) 100%/contain no-repeat}
.blok70 .text p {font-size: var(--fsize4)}
.blok70:has(+ .cases-navigation) {padding-block-end: var(--spacing3)!important}
.blok70:not(.alternatief):not(:has(.fsize2)) .inner {display: flex; align-items: center; text-align: center; justify-content: center;}
.blok70:not(.alternatief):not(:has(.fsize2)) p {font-size: var(--fs-4); margin: 0; padding-block: 2.5rem;}

.blok70.alternatief {padding-top: 0!important; margin-top: 0!important;}
.blok70.alternatief .inner.bg-primary {background: var(--primary)  linear-gradient(12deg,rgba(0, 0, 255, 1) 25%, rgba(0, 0, 255, 1) 57%, rgba(255, 130, 0, 0.75) 100%)!important}
.blok70.alternatief .text {padding-top: var(--spacing2);}
.blok70.alternatief p:first-child {margin-bottom: var(--spacing1)}
.blok70.alternatief p:last-child {margin-bottom: 0;}
.blok70.alternatief .inner::after {right: var(--spacing1); top: var(--spacing1); max-width: 200px; width: 100%; aspect-ratio: 5.7/1; background: url(../img/svg/stars.svg) 100%/contain no-repeat;}

.blok73 .swiper-slide {display: inline-block; width: unset}
.blok73 figure img {height: 650px; object-fit: cover}

.blok74 h2 {padding-bottom: 1.5rem;}
.blok74 .stap {--s: 85px; height: 100%; background: white; border-bottom-left-radius: var(--br-300); padding-inline: var(--s); padding-top: var(--s); padding-bottom: calc(var(--s)*2)}
.blok74 figure {margin-bottom: var(--spacing1); height: 80px; aspect-ratio: 1; display: grid; place-content: center left}
.blok74 .stap-titel {font-size: var(--fs-3); font-weight: var(--fweight2); display: block}
.blok74 strong {font-size: 20px; line-height: var(--lh-2); font-weight: var(--fweight4)}

.blok75 h3 {margin-bottom: var(--spacing2)}
.blok75 p {font-size: var(--fs-4); font-weight: var(--fweight2); line-height: var(--lh-4); margin-bottom: var(--spacing2)}
.blok75:has(+ .blok76) {padding-bottom: 0}
.blok75 + .blok76 {padding-top: 0!important}

.blok76.bg-transparant-svg h3 {font-weight: var(--fweight2)!important; line-height: 1.25}
.blok76:has(+.blok70) {padding-bottom: var(--blok-spacing);}
.blok76:has(+.blok88) {padding-bottom: var(--blok-spacing);}

.blok78 .swiper {padding-block: var(--spacing2)}
.blok78 .swiper-slide {display: flex; justify-content: center}
.blok78 img {width: 100%; max-width: 175px; max-height: 75px; filter: grayscale(100); transition: filter var(--main-transition)}
.blok78 img:hover {filter: grayscale(0)}

.blok80 {padding-block: 0!important}
.blok80 .laptop {position: relative; margin-block: var(--spacing5)}
.blok80 .laptop > .img {max-height: 600px}
.blok80 .inner-page {position: absolute; top: 5%; bottom: 10%; left: 50%; transform: translateX(calc(-50% + 1px)); aspect-ratio: 1.6/1; overflow: hidden}
.blok80 .inner-page::-webkit-scrollbar {display: none}
.blok80 .inner-page img {width: 100%; position: absolute; left: 0; right: 0; top: 0; animation: scrollPage 15s 300ms infinite ease-in-out}

.blok81 .inner{display:flex;padding-block:var(--spacing4);padding-inline:var(--spacing2)}
.blok81 .inner>div:first-child{width: 40%;display:flex;align-items:center;}
.blok81 p{position:relative;font-size:var(--fs-3);max-width:12ch}
.blok81 p::after{content:"";position:absolute;height:100%;aspect-ratio:1;max-height:var(--icon-width);top:calc(var(--icon-width) * -1);left:50%;transform:translateX(-50%);background:var(--case-logo)}
.blok81 .inner>div:not(:first-child){flex-grow:1;max-width:250px;width:20%;}
.blok81 img{border-radius:25px;aspect-ratio: 1/1.77;max-height:440px;width: 100%;object-fit:cover;transition:1s ease-out;}

.blok82 .inner{padding-block: var(--spacing3);display:grid;grid-template-columns: repeat(20, 1fr);grid-template-rows: repeat(20, 1fr);}
.blok82 img{max-width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:25px;transition:1s ease;}
.blok82 .inner>div:first-child{grid-area: 1 / 1 / 21 / 9;display:flex;align-items:center;}
.blok82 .inner>div:first-child p{position:relative;font-size:var(--fs-3); &::after{content:"";position:absolute;height:100%;aspect-ratio:1;max-height:var(--icon-width);top:calc(var(--icon-width) * -1);left:0;background:var(--case-logo-sec)}}
.blok82 .inner>div:nth-child(2){ grid-area: 2 / 11 / 14 / 16; position:relative;z-index:1; }
.blok82 .inner>div:nth-child(3) { grid-area: 8 / 15 / 20 / 20; position:relative;z-index:2; }

.blok83 img {max-height: var(--subhero-img-height); max-height: 500px; width: 100%; object-fit: cover; object-position: center; border-bottom-left-radius: var(--br-300)}
.blok83::after {content: ""; position: absolute; top: 0; left: 0; right: 0; background: var(--orbs-pri) var(--tertiary-light); height: var(--after-height)}
.blok83 .inner {flex-direction: column}
.blok83 .inner [class^="col-"]:has(h1) {margin-bottom: 2rem}
.blok83 .title-wrapper.extended {padding-bottom: 1.5rem; margin-bottom: 3rem;}
.blok83 .buttons a.btn {max-width: fit-content;}
:is(.blok83, .gg-grid) ul {list-style: none; padding-left: 0; }
:is(.blok83, .gg-grid) ul li {background: url('../img/svg/arrow-right-blue.svg') no-repeat left center; background-size: 1em; padding-left: 1.5em;}
.blok83:has(+ .gg-grid) {padding-bottom: 0!important;}

.blok84 {padding-bottom: var(--blok-spacing)}
.blok84::after {content: ""; position: absolute; inset: 0; background: var(--orbs-pri) 100% / contain no-repeat}
.blok84 [class^="col-"]:not(:has(img)) {padding-inline: var(--col-width); display: flex; align-items: center; padding-top: var(--spacing5)}
.blok84 strong {font-size: var(--fs-3); font-weight: var(--fweight3)}
.blok84 img {height: 100%; width: 100%; object-fit: cover}

.blok88 img {min-height: 300px; object-fit: cover; width: 100%}

.blok89 .inner img {width: 100%; height: 100%; object-fit: contain}
.blok89 .inner {display: grid; grid-template-columns: var(--col-width) repeat(19, 1fr); grid-template-rows: repeat(20, 1fr); padding-inline: var(--spacing2)}
.blok89 .inner > div:has(img) {filter: drop-shadow(0px 14px 8px rgba(0,0,0,.25))}
.blok89 .inner > div:first-child {grid-area: 1 / 2 / 21 / 7; font-size: var(--fs-3)}
.blok89 .inner > div:nth-child(2) {grid-area: 3 / 8 / 15 / 12; position: relative; z-index: 2}
.blok89 .inner > div:last-child {grid-area: 4 / 10 / 20 / 20}

.blok93,.blok101 {--main-transition: 0.5s ease-out}
.blok93 [class^="col"]:not(.col-12),.blok101 [class^="col"]:not(.col-12) {margin-bottom: var(--bs-gutter-x)}
.blok93 figure,.blok101 figure {position: relative; height: 600px; margin-bottom: 0; overflow: hidden}
.blok93 figure::after,.blok101 figure::after {content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0,0,0,0.9), transparent 80%); transition: opacity var(--main-transition)}
.blok93 img,.blok101 img {height: 100%; width: 100%; object-fit: cover; transition: transform var(--main-transition)}
.blok93 .text {pointer-events: none; position: absolute; bottom: 0; left: var(--spacing2); right: var(--spacing2); color: var(--white); filter: drop-shadow(1px 1px 3px black); display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-block: var(--spacing2)}
.blok93 h2 {position: relative}
.blok93 h2::after,.blok101 .header::after {content: ""; display: inline-block; width: 40px; height: 40px; background: url(../img/svg/button-white_arrow-right.svg) center/contain no-repeat; margin-left: 0px; transition: var(--main-transition); opacity: 0}
.blok101 [class*="col-"]:not(.col-12)>*{display:flex;flex-direction:column;height:100%}
.blok101 .card-img-top{position:relative}
.blok101 .header {pointer-events: none; position: absolute; bottom: 0; left: calc(var(--spacing2) - 12px); right: calc(var(--spacing2) - 12px); color: var(--white); filter: drop-shadow(1px 1px 3px black); padding-block: var(--spacing2)}
.blok101 .body{flex:1;padding:var(--spacing2) calc(var(--spacing2) - 12px);background:var(--white)}
.blok101 .body *{color:var(--bs-body-color)}

.blok94 {position: relative;}
.blok94 ul span {font-size: 20px}
.blok94 h2 {filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.4))}
.blok94 [class^="col"] {position: relative; z-index: 1;}
.blok94 .service .col-md-10 {padding-block: var(--spacing3)}
.blok94 .service:not(:last-child) {margin-bottom: var(--spacing5)}
.blok94 img {position: absolute; z-index: 0; top: 50%; aspect-ratio: 1.2; transform: translateY(-50%); right: 0; max-width: 620px; max-height: 500px; object-fit: cover; object-position: top right; border-bottom-left-radius: 500px}
.blok94 .links p {margin: 0}
.blok94 .links ul:not(:last-child) {margin-bottom: var(--spacing1)}
.blok94 .links ul a {font-weight: var(--fweight2);}
.blok94 .links strong {color: var(--secondary); font-size: 1.25rem; font-weight: var(--fweight2)}
.blok94:not(:has(+.blok94)) [class^="col"] {overflow: hidden;}


.blok95{margin-top: 0!important;}
.blok95 [class^="col"]:first-child p:last-child {margin-bottom: 0;}
.blok95 ul {list-style: none; padding: 0; margin: 0;}
.blok95 li {background: var(--white); width: fit-content; max-height: 43px; padding: .35rem 2rem .35rem 1.25rem; border-radius: 200px; display: flex; align-items: center; font-size: 1rem; font-weight: var(--fweight4);}
.blok95 li::before {content: ""; margin-right: .5rem; display: inline-flex; width: 2rem; aspect-ratio: 1; background: url(../img/svg/arrow-right-blue.svg) center/60% no-repeat;}
.blok95 li:not(:last-child) { margin-bottom: .5rem}
.blok95 {padding-top: 0;}
.blok95 .orbs {position: absolute; inset: 0;}
.blok95 + .blok29 {margin-top: 0!important;}
.blok95:has(+ .blok29) {padding-bottom: var(--blok-spacing);}

.blok96 .inner {background: var(--white); height: 100%;padding: var(--spacing2); min-height: 190px;}
.blok96 .index {font-weight: 900; font-size: var(--fs-3); color: var(--tertiary); line-height: 1;}
.blok96 .content p {font-size: 1.875rem; font-weight: var(--fweight2); line-height: var(--lh-2);}

.blok97 {padding-bottom: var(--spacing2)!important;}
.blok97 p:not(:has(.offset-header)) {line-clamp: 2; -webkit-line-clamp: 2; text-wrap: balance; }

.blok106 :where(video, iframe) {width: 100%; aspect-ratio: 16/9;}

[class^="blok"]:last-child.blok41 {padding-bottom: calc(var(--blok-spacing) * 2)!important}

.error-page {max-height: 1200px; display: grid; place-content: center; padding-block: var(--header-height) calc(var(--blok-spacing) + var(--pre-footer-offset));}

/* Groeigesprek */
.gg-grid {overflow: visible; padding-bottom: calc(var(--blok-spacing) * 1.5);}
.gg-grid .card {height: 100%; border-radius: 30px; padding-inline: var(--spacing2); padding-block: var(--spacing3); border: none;}
.gg-grid .card li {font-weight: var(--fweight4);}
.gg-grid .card p {font-weight: var(--fweight2);}
.gg-grid .bg-orbs, .blok95 .bg-orbs {position: absolute; inset: 0; z-index: -1; overflow: visible;}
.gg-grid .bg-orbs img {position: absolute;}

.gg-form .header {margin-bottom: var(--spacing2);}
.gg-form .header p {line-height: var(--lh-1)!important;}
.gg-form picture {display: block; margin-inline: auto; border-radius: 50%; overflow: hidden; max-width: 230px;}
.gg-form label {margin-left: var(--spacing2);}
.gg-form input {border-radius: 200px; padding-inline: var(--spacing2)!important}

/* v-card */
.vcard .contact-option {display: flex; align-items: center; gap: var(--spacing1)}
.vcard .contact-option .icon {width: 32px; aspect-ratio: 1; background-color: var(--secondary); display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.vcard .contact-option svg {width: 60%;}

/* Progress bar */
/* optionele styling voor als je wilt dat de balk iets subtieler is op touch devices */
.reading-progress--nojs { /* niks nodig; alleen placeholder als je wilt targeten */ }

/* animatie: van scaleX(0) naar scaleX(1) naarmate de pagina gescrolled is */
@keyframes progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes gg_moveOrb1 {
	0% {bottom: -17%; left: -10%;}
	25% {bottom: 40%; left: 5%}
	50% {bottom: 35%; left: -10%}
	75% {bottom: 50%; left: 25%}
	100% {bottom: -17%; left: -10%;}
}
@keyframes gg_moveOrb2 {
	0% {bottom: -40%; left: -6%;}
	25% {bottom: -20%; left: -20%;}
	50% {bottom: -25%; left: 25%;}
	75% {bottom: -25%; left: 0%;}
	100% {bottom: -40%; left: -6%;}
}
@keyframes gg_moveOrb3 {
	0% {bottom: -35%; right: 15%;}
	50% {bottom: 10%; right: 30%;}
	100% {bottom: -35%; right: 15%;}
}
@keyframes gg_moveOrb4 {
	0% {top: -40%; right: -5%;}
	33% {top: 40%; right: -5%;}
	66% {top: 32%; right: 15%;}
	100% {top: -40%; right: -5%;}
}

/* Max queries */
@media (max-width: 1600px) {
	header .hover-menu { overflow: auto; max-height: 500px; }
}
@media (max-width: 1440px) {
	footer .pre-footer .container {max-width: calc(100vw - 2rem); margin: 0 auto}
}
@media (max-width: 1400px) {
	.blok83:has(+.blok95) {padding-bottom: 0!important}
}

@media (max-width: 992px) {
	:root {--pre-footer-offset: 200px;}
	header {padding-block: 1rem;}

	.homepage-hero {--hero-height: 700px; padding-block: var(--offset-main) calc(var(--offset-main) / 2); align-items: center;}
	.homepage-hero .inner {filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));}
	.homepage-hero video {width: 150%; height: 100%; right: -60%; filter: brightness(80%);}

	.pre-footer{background:var(--black);}
	.pre-footer .wrapper{position:relative;transform:translateY(-75px);left:0;width:100%}
	.footer-main{padding-top: 125px;margin-top:-125px}
	.offset-header{font-size:var(--fs-3)}
	.featured-cases .grid{grid-template-rows:auto auto;grid-template-columns:repeat(2,1fr);grid-gap:var(--bs-gutter-x);}
	.featured-cases .text-content{grid-area:1/1/2/3;padding:0}
	.featured-cases .case-left{grid-area:2/1/3/2;height:500px}
	.featured-cases .case-right{grid-area:2/2/3/3;height:500px; transform: unset;}
	.featured-cases .grid svg{transform:translate(15px, 0)}
	.featured-cases .grid:hover svg{transform:translate(20px, 0)}
	.featured-blogs .grid{grid-template-rows:auto auto;grid-template-columns:repeat(2,1fr);grid-gap:var(--bs-gutter-x);}
	.featured-blogs .text-content{grid-area:1/1/2/3;padding:0}
	.featured-blogs .case-left{grid-area:2/1/3/2;height:500px}
	.featured-blogs .case-right{grid-area:2/2/3/3;height:500px; transform: unset;}
	.featured-blogs .grid svg{transform:translate(15px, 0)}
	.featured-blogs .grid:hover svg{transform:translate(20px, 0)}
	.gg-grid {padding-top: var(--blok-spacing)}
	.gg-grid [id*="orb"] {display: none}
	.gg-grid .bg-orbs {background: url(../img/svg/single_orb.svg) center/300% no-repeat; background-attachment: fixed;}
	.gg-form {margin-top: 0!important;}

	/*Blokken*/
	.blok65 .accordion-button{--bs-accordion-btn-padding-x:0;padding-block:15px;font-size:var(--fs-4);padding-left:calc(var(--bs-gutter-x) * 2 + 15px)}
	.blok65 .accordion-button::after{--bs-accordion-btn-icon-width:1.5rem;}
	.blok65 .accordion-header a>.btn{--bs-btn-padding-x:1.25rem;--bs-btn-padding-y:8px;--bs-btn-font-size:.875rem;min-width:unset;text-wrap:nowrap;}
	.blok73 .swiper-slide img { max-height: 300px; }
	.blok74 .stap{--s:55px;padding-bottom: var(--s)}
	.blok81 .inner{flex-wrap:wrap;gap:var(--bs-gutter-x);justify-content: center;}
	.blok81 .inner>div:first-child{margin-top:var(--icon-width)}
	.blok81 .inner>div:first-child{flex-basis:100%;text-align:center;justify-content:center;margin-bottom:var(--spacing2);}
	.blok81 .inner>div:not(:first-child){display:flex;justify-content:center;}
	.blok82 .inner{grid-template-columns: var(--col-width) repeat(19, 1fr) var(--col-width);grid-template-rows: auto repeat(20, 1fr);padding-bottom:var(--spacing3)}
	.blok82 .inner>div:first-child{grid-area:  1 / 1 / 2 / 22; text-align:center;padding-top:calc(var(--icon-width) + var(--spacing3));padding-inline:var(--col-width);padding-bottom:var(--spacing3)}
	.blok82 .inner>div:nth-child(2){ grid-area: 2 / 2 / 19 / 13; }
	.blok82 .inner>div:nth-child(3) { grid-area: 5 / 11 / 22 / 21; }
	.blok82 .inner>div:first-child p::after{left:50%;transform:translateX(-50%)}
	.blok83 {--subhero-img-height: 400px;}
	.blok83:has(+ :is(.blok7, .blok10)) .image-wrapper {display: none;}
	.blok83.branches p {margin-bottom: 0!important;}
	.blok83:has(+ .blok95) img {display: none;}
	.blok93 h2.fsize2,.blok101 .header.fsize2 { font-size: var(--fs-big)!important; }
	.blok95 {overflow: visible;}
	.blok95 .bg-orbs {left: -35%; top: -25%;}
	.blok95 [id^="orb"]:not(#orb1) {display: none;}
	.blok95 #orb1 {width: 150%;position: sticky; top: -50%; left: 0;}
}

@media (max-width: 768px){
	.featured-cases .grid{display:flex;flex-direction:column;}
	.featured-blogs .grid{display:flex;flex-direction:column;}
	.werkwijze img{max-width:75px}
	.case-grid-3 .case-tile .inner {height: 400px}

	/*Blokken*/
	.blok59 .offset-header{font-size: var(--fs-2);}
	.blok61 img{width:100%;min-height: 400px;object-fit:cover;}
	.blok83 .title-wrapper.extended h1.fsize1 {max-width: unset; text-wrap: balance;}
	.blok85 .inner{display:flex;flex-direction:column;padding-inline:var(--col-width);padding-block:var(--spacing5);gap:var(--spacing2)}
	.blok85 img{width: 100%;}
	.blok89 .inner{display: grid;grid-template-columns: var(--col-width) repeat(20, 1fr) var(--col-width);grid-template-rows: auto repeat(15, 1fr) auto;padding-bottom:var(--spacing3)}
	.blok89 .inner>div:first-child{grid-area: 1 / 1 / 1 / 24;display:flex;justify-content:center;padding-block:var(--spacing3);}
	.blok89 .inner>div:nth-child(2){ grid-area: 2 / 2 / 13 / 9; }
	.blok89 .inner>div:last-child{ grid-area: 2 / 5 / 17 / 23; }
	.blok95 .lp-usp-swiper {margin-bottom: var(--spacing2)}
	.blok95 .orbs {inset: unset; left: -75%; width: 100%; top: -2rem; bottom: 50%;}
	.blok95 img:not([id^="orb"]) {max-width: 350px;}
	.blok97 br {display: none;}
	.blok101 figure {aspect-ratio:1;height:100%}
}

@media (max-width: 576px) {
	:root {
		--fs-big: clamp(2rem, 10.5vw, 4.0625rem);
		--fs-1: 2.25rem;
		--fs-3: clamp(1.625rem, 5vw, 2.1875rem);
	}

	/*Algemeen*/
	.g5{display:none}
	body{font-size-adjust: .48}
	.container-fluid{padding-inline:var(--spacing2)}
	.offset-header{--icon-size:35px;padding-inline-start:calc(var(--icon-size) + 25px);}
	.btn{--bs-btn-font-size:1.15rem}
	.case-overview .case-tile { height: 500px; }
	.case-tile .labels .btn {margin-bottom: 0!important;}
	.nextrevolution-link { animation: fadeLabel forwards; animation-timeline: scroll(root); animation-range: 0px calc(100vh - 600px) 100vh; }
	/* Header */
	#mobileSideMenu .mm-navbars_top .mm-navbar .btn[id*="vacatures"]{padding-inline:1rem 3rem}
	/*Footer*/
	.pre-footer .contact .title {font-size: var(--fs-3); font-weight: var(--fweight4);}
	.footer-main .social-media{grid-template-columns:repeat(4,45px);grid-template-rows:1fr}
	.footer-main .contact-buttons a{width:fit-content;min-width:230px}
	.footer-main .proof img {max-width: 65px;}
	/* Homepage */
	.usps .usp img{width: 50px;height:50px;}
	[class*="homepageTeamSwiper"] .swiper-slide > div { justify-content: end; align-items: center; text-align: center; padding: 10px 5px; }
	.homepage-hero + .blok56 strong {font-size: 1.75rem;}
	/* Diensten */
	.diensten-algemeen img { opacity: .65; aspect-ratio: .8/1; object-position: left; }
	/* Werkwijze*/
	.werkwijze img{max-width: 50px}
	.werkwijze-hero-parts + .blok56 strong { font-size: 28px }
	.werkwijze .stap {min-height: 0px!important; padding: 120px var(--spacing4) 100px;}
	.werkwijze .stap img {top: var(--spacing1);}
	/* Cases */
	.subHeroCases .case-hero-subs{flex-direction:column;gap:unset}
	.subHeroCases .case-hero-subs>div{display: flex}
	.subHeroCases .case-hero-subs>div>strong:first-child{min-width:100px}
	/* Blokken */
	[class^="blok"]:not(:has(.btn:nth-child(3))) .btn:not(:last-child){display:block;width:fit-content;margin-bottom:var(--spacing1)}
	.blok73 [class^="swiper-button"] { display: none; }
	.blok81 .inner{flex-direction: column;align-items: center;text-align:center;padding-block:var(--spacing5);}
	.blok81 .inner>div:not(:first-child){width: 100%;}
	.blok81 .inner>div:first-child{width:unset;margin-bottom:calc(var(--bs-gutter-x) * 2);display:flex;}
	.blok81 .inner>div:has(img):not(:last-child){margin:unset;margin-bottom:calc(var(--bs-gutter-x) * 2)}
	.blok93 h2.fsize2,.blok101 .header.fsize2 { font-size: 3rem!important; }
}

/* Min queries */
@media (min-width: 576px) {
	:root {
		--fs-1: clamp(3.25rem, 8.5vw, 3.75rem);
	}

	.homepage-hero+.blok56 .col-xxl-10{padding-inline:var(--spacing5)}
	body.home .blok29 p.fsize4:has(.btn) { display: flex; gap: 1rem; br { display: none; }}
	#mobileSideMenu.mm-menu_offcanvas{max-width:440px!important}

	.blok81 .inner>div:nth-child(3){transform:translateY(75px)}
	.blok81 .inner{padding-bottom: calc(var(--spacing5) + 75px);}
	:is(.blok81, .blok82) img:hover{transform:translateY(-15px)}

}
@media (min-width: 768px) {
	:root {
		--fs-1: clamp(2.1875rem, 4vw, 3.75rem);
	}
	.homepage-diensten [class^="col"]:is(:nth-child(1), :nth-child(2)) .dienst {margin-bottom: var(--spacing-l);}
	.homepage-diensten .flex-md-column .image {margin-bottom: unset;}
	.homepage-diensten .flex-md-column .text {margin-bottom: var(--spacing-m);}

	.case-grid-3 .case-tile:not(.case-overview .case-tile):not(.blog-overview .case-tile):hover{border-bottom-left-radius:var(--br-250)}
subHeroCases .case-hero-subs>div{min-width:170px;position:relative}
	.subHeroCases .case-hero-subs>div:not(:first-child)::before{content:"";position:absolute;top:0;bottom:0;left:-30px;width:1px;background-color:var(--tertiary);border-radius:200px;max-height: 55px;}
	.nextrevolution-link{ display: block;}

	.gg-blok .inner {padding-block: var(--spacing5); border-bottom-left-radius: var(--br-250);}

	.blok85 .inner{display: grid;grid-template-columns: var(--col-width) repeat(18, 1fr) var(--col-width);grid-template-rows: var(--spacing5) repeat(9, 1fr) var(--spacing5);}
	.blok85 picture:first-child { grid-area: 3 / 12 / 9 / 20; }
	.blok85 picture:nth-child(2) { grid-area: 2 / 2 / 8 / 10; }
	.blok85 picture:last-child { grid-area: 5 / 7 / 11 / 15; }
	.blok85 picture img{width:100%;height:100%;object-fit:contain}
	.blok89 .inner>div:first-child{display:flex;align-items:center}
}
@media (min-width: 992px) {
	/* header.dark-mode .nav-link.menu-l1{font-weight: var(--fweight2)!important} */
	header :is(.logo-wrapper, .contact-wrapper) { width: 125px; }
	header .navbar-main .nav-item:hover > ul {background: #131A1D;}
	header .inner {width: 100%; max-width: 1440px; display: flex; align-items: start; flex-wrap: wrap; margin: 0 auto; row-gap: 2.5rem;}
	header .inner > li.nav-item {flex: 0 0 50%!important;}
	header .nav-item.hasSubMenu {display: flex; flex-wrap: wrap;}
	header .nav-link.menu-l2 {flex: 0 0 100%; margin-bottom: 1rem; font-size: var(--fs-4);}
	header ul:has(> .divider-heading) {flex: 0 0 45%;}

	.homepage-hero.v2 {min-height: 900px; height: 90vh;}
	.homepage-hero.v2 video {max-width: 80%;}
	.homepage-diensten.v2 [class^="col"]:is(:nth-child(1), :nth-child(2)) .dienst {margin-bottom: var(--blok-spacing);}

	[class^="subHero"]{padding-block-start:calc(var(--header-height) + var(--spacing2))}
	.werkwijze .inner{max-width: 90%;}
	.case-overview { padding-bottom: 10rem !important; }
	.blog-overview { padding-bottom: 5rem !important; }
	.case-tile .inner {padding: var(--spacing2) var(--spacing4) var(--spacing2) var(--spacing2)}

	/* Blokken */
	.blok57 .text{font-size:var(--fs-3);}
	.blok59 [class^="col"]:is(:first-child, :nth-child(2)) {margin-bottom: var(--spacing3)}
	.blok68 .swiper-slide:first-child{width: 25%!important}
	.blok68 .swiper-slide:nth-child(2){width:calc(75% - var(--bs-gutter-x))!important}
	.blok81 .inner{padding-left:var(--col-width)}
	.blok81 .inner>div:has(img):not(:last-child){margin-right:var(--bs-gutter-x)}
	.blok81 .inner>div:first-child{transform:translateY(75px)}
	.blok82:not(:has(img)) .inner{min-height: 700px;}
	.blok82 .inner{padding-left:var(--col-width)}
	.blok84 [class^="col-"]:not(:has(img)){padding-bottom:var(--spacing5);}
	.blok86 .swiper-slide{transition:var(--main-transition);width:20%;cursor:pointer;}
	.blok86 .swiper-slide.active{width:60%;}
	.blok86 .swiper-slide img{width:100%;height:100%;height:600px;object-fit:cover;}
	.blok93 figure:hover::after,.blok101 a:has(figure):hover figure::after { opacity: 0; }
	.blok93 figure:hover img,.blok101 a:has(figure):hover figure img { transform: scale(1.02); }
	.blok93 [class^="col"]:hover > a .text h2::after,.blok101 [class^="col"]:hover > a .header::after { transform: translateX(calc(var(--bs-gutter-x) * .75)); opacity: 1; }
	.blok95 .bg-orbs img {position: absolute;}
	.blok95 #orb1 {animation: block_moveOrb1 8s infinite;}
	.blok95 #orb2 {animation: block_moveOrb2 11s infinite;}
	.blok95 #orb3 {animation: block_moveOrb3 15s infinite;}
	.blok95 #orb4 {animation: block_moveOrb4 16s infinite;}

	.gg-grid [class^="col"]:nth-child(2) .card {margin-top: var(--spacing5);}
	.gg-grid #orb1 {animation: gg_moveOrb1 20s infinite;}
	.gg-grid #orb2 {animation: gg_moveOrb2 22s infinite; width: 80%;}
	.gg-grid #orb3 {animation: gg_moveOrb3 18s infinite}
	.gg-grid #orb4 {animation: gg_moveOrb4 20s infinite}
}
@media (min-width: 1200px) {
	header .nav-link.menu-l1{font-size:calc(1rem + 0.5vw)}
	header :is(.logo-wrapper, .contact-wrapper) { width: 175px; }
	.homepage-diensten .swiper {overflow: hidden!important;}
	.homepage-diensten .swiper-slide {max-width: fit-content;}
	.featured-cases [class^="case-"]{padding-right: 5rem;}
	.featured-blogs [class^="case-"]{padding-right: 5rem;}
	.blok59 .offset-header{margin-left: calc(calc(15% + var(--bs-gutter-x)) * -1);}
	.blok73 [class^="swiper-button"] {--swiper-navigation-sides-offset: -3rem;}
	.blok83 br {display: none;}
	:is(.blok97 .offset-header, .offset-header.inline) {padding-inline-start: 0; margin-bottom: var(--spacing2)!important;}
	:is(.blok97 .offset-header, .offset-header.inline)::before {left: calc((var(--icon-size) + 15px) * -1)}
}
@media (min-width: 1400px) {
	.blok7 [class^="col-"]:last-child .text{margin-left: calc(100% / 24);}
	.blok10 .text{padding-right:calc(100%/24)}
}
@media (min-width: 1560px) {
	footer .pre-footer .container {margin-inline: 0; max-width: 100%;}
	footer .pre-footer {max-width: 1500px; margin: 0 auto;}
}
@media (min-width: 1713px) {
	.blok83:has(+.blok95) {padding-bottom: 0!important}
}
@media (min-width:992px) and (max-width:1400px){
	header .nav-link.menu-l2{margin-bottom:0.5rem;}
}
@media (min-width: 1400px) and (max-width: 1740px) {
	header .menu-l2 {font-size: var(--fs-5);}
}
@media(min-width:992px) and (max-width:1200px){
	.featured-cases [class^="case-"]{height: 600px;}
	.featured-blogs [class^="case-"]{height: 600px;}
}

@media(orientation:landscape) and (max-height:800px){
	.error-page{height:105vh!important}
}
@media(orientation:landscape) and (min-height:500px) and (max-height:700px){
	.error-page{height:150vh!important}
}

/* Animations */
@keyframes block_moveOrb1 { /* Start onder UL */
	0% {transform: translate(1300px, 140px);}
	50% {transform: translate(900px, 50px);}
	100% {transform: translate(1300px, 140px);}
}
@keyframes block_moveOrb2 { /* Start onder mobile preview */
	0% {transform: translate(500px, -40px);}
	25% {transform: translate(650px, -120px);}
	75% {transform: translate(400px, 240px);}
	100% {transform: translate(500px, -40px);}
}
@keyframes block_moveOrb3 { /* Start linkboven 'Klaar voor groei...' */
	0% {transform: translate(-200px, -120px);}
	25% {transform: translate(10px, -80px);}
	75% {transform: translate(80px, -120px)}
	100% {transform: translate(-200px, -120px);}
}
@keyframes block_moveOrb4 {
	0% {transform: translate(240px, 200px);}
	25% {transform: translate(500px, -120px)}
	75% {transform: translate(520px, 0px)}
	100% {transform: translate(240px, 200px);}
}

@keyframes moveInCircle {
	0%{transform:rotate(0deg)}
	50%{transform:rotate(180deg)}
	100%{transform:rotate(360deg)}
}
@keyframes moveVertical{
	0%{transform:translateY(-50%)}
	50%{transform:translateY(50%)}
	100%{transform:translateY(-50%)}
}
@keyframes moveHorizontal{
	0%{transform:translate(-50%, -10%)}
	50%{transform:translate(50%, 10%)}
	100%{transform:translate(-50%, -10%)}
}
@keyframes button-left-animation{
	0%{opacity:1;background-position-x:center}
	33%{opacity:0;background-position-x:-100%}
	66%{opacity:0;background-position-x:100%}
	100%{opacity:1;background-position:center}
}
@keyframes arrowDownAnimation{
	0%{opacity:1;background-position-y:center}
	33%{opacity:0;background-position-y:100%}
	66%{opacity:0;background-position-y:-100%}
	100%{opacity:1;background-position:center}
}
@keyframes scrollPage {
	10% { transform: translateY(0);}
	22.5% { transform: translateY(-25%);}
	35% { transform: translateY(-25%);}
	47.5% { transform: translateY(-50%);}
	60% { transform: translateY(-50%);}
	72.5% { transform: translateY(calc(-100% + var(--laptopblock-screenheight)));}
	90% { transform: translateY(calc(-100% + var(--laptopblock-screenheight)));}
}
@keyframes animateIndicator{
	50% { transform: rotate(-90deg) translateX(calc(33.33% + 15px)); }
	100% { transform: rotate(-90deg) translateX(33.33%); }
}
@keyframes fadeLabel {
	0% { opacity: 1; }
	20% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes rollin {
	to { opacity: 1; transform: translateX(0) rotate(0deg); }
}
@keyframes animate-scroll {
	0% {opacity: 1; transform: translate(-50%, calc(var(--s) / 2));}
	33% {opacity: 0; transform: translate(-50%, calc(var(--s) / 2 + .75rem))}
	66% {opacity: 0; transform: translate(-50%, calc(var(--s) / 2 - .75rem))}
	80% {opacity: 1; transform: translate(-50%, calc(var(--s) / 2));}
}
@keyframes animate-arrow-circle {
	0% {opacity: 1; transform: rotate(180deg) translateX(0px);}
	33% {opacity: 0; transform: rotate(180deg) translateX(calc((30px - 1rem) / 2 * -1));}
	66% {opacity: 0; transform: rotate(180deg) translateX(calc((30px - 1rem) / 2));}
	100% {opacity: 1; transform: rotate(180deg) translateX(0px);}
}


/* Firefox specifieke instellingen */
@supports(-moz-appearance:none){
	:is([class^="blok"][class*="svg"],.subHero)::after{opacity: 0.5}
}

/* Case specifieke kleuren */
[class*="bg-case-"] {--text-color: var(--white); color: var(--text-color)}
.case-16 {      /* Kliniek Veldhoven */
	--case-logo: 'img/cases/kliniek-veldhoven/logo.svg';
	--case-logo-sec: 'img/cases/kliniek-veldhoven/logo-secundair.svg';
	.bg-case-1{background:#1F2C30}
	.bg-case-2{background:#C77B86}
	.bg-case-3{background:#E8CBC4}
}
.case-18 {      /* Gemeente Maashorst */
	.bg-case-1{background:#8C1978}
	.bg-case-2{background:#D5AD00}
}
.case-20 {      /* Elbo Technology */
	.bg-case-1{background:#333946}
	.bg-case-2{background:#DA0043}
}
.case-21 {      /* Van Den Berk */
	.bg-case-1{background:#7B8949}
	.bg-case-2{background:#ECECE1}
}
.case-22 {      /* Uden Centrum */
	.bg-case-1{background:#e5002d}
}
.case-26 {      /* Topdeal Plaza */
	[class*="bg-case-"] {--text-color: #242b2d}
	.bg-case-1{background:#484848}
	.bg-case-2{background:#b4a898}
	.bg-case-3{background:#eae6df}
}
.case-27 {      /* Bij Robèrt */
	.bg-case-1{background:#a7becd}
	.bg-case-2{background:#c293ac}
	.bg-case-3{background:#e1e1c5}
}
.case-28 {      /* Bacu */
	[class*="bg-case-"] {--text-color: #2ba963}
	.bg-case-1{--text-color:#fff;background:linear-gradient(to top, rgba(0,0,0,.4), transparent 80%), #00a95d}
	.bg-case-2{background:#f5f2e6}
	.bg-case-3{background:#f3f2e5}
}
.case-29 {      /* Beddenreus */
	.bg-case-1{background:#174465}
	.bg-case-2{background:#c5eafc}
}
.case-30 {      /* Herbert Vissers College */
	.bg-case-1{background:#2a265a}
}
.case-31 {      /* M line */
	.bg-case-1{background:#002e48}
	.bg-case-2{background:#e95d0f}
	.bg-case-3{background:#dddddd}
}
.case-32 {      /* Bowerkt */
	.bg-case-1{background:#5e8c98}
}
.case-33 {      /* MARQ Safety */
	.bg-case-1{background:#6c6d6f}
}
.case-34 {      /* Mola */
	.bg-case-1{background:#c10a1d}
}
.case-35 {      /* ODNL */
	.bg-case-1{background:#b1006f}
	.bg-case-2{background:#78c7e7}
}
.case-37 {      /* Van der Horst */
	.bg-case-1{background:#f28b00}
	.bg-case-2{background:#494949}
}
.case-38 {      /* Verbruggen */
	.bg-case-1{background:#d7093a}
	.bg-case-2{position:relative;}
	.bg-case-2::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:70%;background-color:#d7093a;}
}
.case-39 {      /* Skillstown connect */
	.bg-case-1{background:#007ffb}
	.bg-case-2{background:#cedce8}
	.bg-case-3{background:#f2f7fa;}
}
.case-40 {      /* Sanden Sports */
	.bg-case-1{background:#ff8000}
	.bg-case-2{background:#576670}
}
.case-41 {      /* Fros */
	.bg-case-1{background:#a39d94}
	.bg-case-2{background:#bbaaa1}
	.bg-case-3{background:#e7dbca}
}
.case-42 {      /* Udenco */
	.bg-case-1{background:#93c01c}
	.bg-case-2{background:#343f4a}
}
.case-43 {      /* Van Happen Containers */
	.bg-case-1{background:#92a350}
}

/*
MARK: V2
*/
:root {
	--fs-big: 5rem;
	--fs-1: 3.5rem;
	--fs-2: 2.5rem;
	--fs-3: 2.25rem;
}

.fsize-big {font-size: var(--fs-big)!important; font-weight: var(--fweight1)!important; line-height: 1!important;}
h1,.fsize1 {font-size: var(--fs-1)!important; font-weight: var(--fweight2)!important;}
h2,.fsize2 {font-size: var(--fs-2)!important; font-weight: var(--fweight1)!important; line-height: 1.15!important;}
h3,.fsize3 {font-size: var(--fs-3)!important; font-weight: var(--fweight2)!important; line-height: 1!important;}

.fsize-small {font-size: var(--fs-small);}

.btn-white {
	--bs-btn-bg: var(--white);
	--bs-btn-border-color: var(--white);
	--bs-btn-color: var(--black);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-hover-color: var(--white);
	--bs-btn-active-bg: var(--primary);
	--bs-btn-active-border-color: var(--primary);
	--bs-btn-active-color: var(--white);
}
.btn-white.hover-secondary {
	--bs-btn-hover-bg: var(--secondary);
	--bs-btn-hover-border-color: var(--secondary);
	--bs-btn-active-bg: var(--secondary);
	--bs-btn-active-border-color: var(--secondary);
}

.btn-xs {
	--bs-btn-font-size: 1rem;
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-padding-y: .675rem;
}

.label-sm {display: grid; place-content: center; background: rgba(255,255,255,.8); border-radius: 200px; font-size: .95rem; padding: .25rem 1rem; min-width: 60px;}

.image-hover-animation {position: relative;}
.image-hover-animation::after {content: ""; position: absolute; inset: 0; background: url(../img/svg/logo-icon-white.svg) center/100px no-repeat; backdrop-filter: blur(40px); opacity: 0; transition: opacity .8s ease; pointer-events: none;}
.image-hover-animation:hover::after {opacity: 1;}

.padding-top {padding-top: var(--blok-spacing);}

/*
MARK: Case card
*/
.cases-slider {padding-bottom: calc(var(--blok-spacing) * 1.5);}
.cases-slider .navigation {--w: 36px; --g: 1rem; margin-top: 4rem; width: calc(var(--w) * 2 + var(--g)); display: flex; justify-content: space-between;}
.cases-slider [class^="swiper-button"] {position: static; width: var(--w); height: var(--w)}
.case-card {border-radius: 20px; overflow: hidden; height: 100%; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.case-card a {color: inherit; display: flex; flex-direction: column; height: 100%;}
.case-card-image {width: 100%; aspect-ratio: 1/1.1; position: relative; max-height: 60vh;}
.case-card-image img {width: 100%; height: 100%; object-fit: cover;}
.case-card-image .labels {position: absolute; bottom: 1rem; right: 2rem; pointer-events: none; display: flex; gap: .5rem; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.1));}
.case-card-body {background: var(--white); padding: 1rem 2rem; flex-grow: 1; display: flex; flex-direction: column; align-items: start;}
.case-card-body [class^="fsize"] {display: block; margin-bottom: 2rem;}
.case-card-body .btn {opacity: 0;}
.case-card-body .fsize-33 {font-size: 1.75rem; line-height: 1;}
.case-card-body .bold {font-weight: var(--fweight4)!important;}
.achievements {flex-grow: 1; display: flex; align-items: center;}
.achievements:has(strong:not(:empty)) {gap: 1rem;}
.achievements small {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.case-card:hover .btn {opacity: 1;}

body:has(.blok.case-overview) {background: var(--tertiary-light);}
.blok.case-overview {margin-top: calc(var(--header-height) + 2.5rem);}

.blok.groeigesprek {padding-block: calc(var(--blok-spacing) * 1.5) var(--blok-spacing);}
.blok.groeigesprek ul {padding: 0; margin: 0; list-style: none;}
.blok.groeigesprek li {display: flex; align-items: start; gap: .5rem;}
.blok.groeigesprek li:not(:last-child) {margin-bottom: 0.5rem;}
.blok.groeigesprek li::before {content: ""; display: inline-flex; min-width: 1.125rem; width: 1.125rem; height: 1.125rem; background: url(../img/svg/arrow-right-blue.svg) center/contain no-repeat; transform: translateY(5px);}
.blok.groeigesprek .hero :where(.text, ul) {margin-bottom: 1.25rem;}
.blok.groeigesprek .hero h1 {margin-bottom: 2.125rem; line-height: 1;}
.blok.groeigesprek .hero img {width: 100%; object-fit: cover; border-radius: 20px;}
.blok.groeigesprek .about .text.bg-secondary {padding: 2.5rem; border-radius: 20px; }
.blok.groeigesprek .about .text.bg-secondary .inner {max-width: 430px;}
.blok.groeigesprek .about .paragraph + .paragraph {margin-top: calc(var(--blok-spacing) / 2);}
.blok.groeigesprek :where(.hero, .about, .form) > .row {--bs-gutter-x: 7rem;}
.blok.groeigesprek .form-wrapper {border-radius: 20px; overflow: hidden;}
@media (max-width: 992px) {
	.blok.groeigesprek [class^="col-"]:has(img) {height: 100%;}
}

/*
MARK: Blokken
*/
[class*="blok"] {padding-block: 0; margin-block: 0} /* RESET */
[class*="blok"]:not(:first-child) {padding-top: var(--blok-spacing);} /* Ieder blok -- behalve eerste */
[class*="blok"]:not([class^="bg-"]):has(+ [class*="bg-"]) {padding-bottom: var(--blok-spacing);} /* Regelt extra padding als een blok zonder bg een opvolgend blok heeft met achtergrond */
[class*="blok"].bg-secondary:not(:has(+ .bg-secondary)) {padding-bottom: var(--blok-spacing);} /* Regelt extra padding als er geen opvolgend bg-secondary is */
[class*="blok"].no-padding-y {padding-block: 0!important;}
/* Harde resets */
:where(.blok82) + .blok76 {padding-block: 0 var(--blok-spacing)!important;}

.blok-contact::before {inset: 25% 0 0; opacity: 0.005; animation: fadein 300ms ease-out forwards; animation-delay: 300ms;}
.meet-the-team {margin-bottom: var(--blok-spacing);}

.blogs .case-tile .inner {padding: var(--spacing2) var(--spacing4) var(--spacing2) var(--spacing2);}
.blogs .featured-blogs .grid {
	grid-template-columns: 1fr 30px 1fr;
	grid-template-rows: 1fr;
	grid-gap: 0;
}
.blogs .featured-blogs .case-left {grid-area: 1 / 1 / 2 / 2;}
.blogs .featured-blogs .case-right {grid-area: 1 / 3 / 2 / 4;}

.blok30 img {width: 100%; aspect-ratio: 1.5; object-fit: cover;}

.blok61 {max-height: 750px; overflow: hidden;}
.blok61 img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.blok65 {padding-bottom: var(--blok-spacing);}

:root {--b83-title-height: calc(100px + 1.5rem); --b83-background: var(--orbs-pri) var(--tertiary-light);}
.blok83 {position: relative; padding-top: calc(var(--header-height) + var(--blok-spacing) / 2); overflow: hidden;}
.blok83::before {content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: calc(var(--header-height) + (var(--blok-spacing) / 2) + var(--b83-title-height)); background: var(--b83-background);}
.blok83 .title {padding-bottom: 1rem;}
.blok83 .text {padding-top: 1rem;}
.blok83 .image {display: none;}
@media (min-width: 1200px) {
	:root {--b83-title-height: calc(140px - 1.125em);}
	.blok83 .grid {display: grid; grid-template-rows: auto 1fr; grid-template-columns: repeat(2,1fr); grid-column-gap: 2rem;}
	.blok83 .title {grid-area: 1/1/2/2;}
	.blok83 .text {grid-area: 2/1/3/2;}
	.blok83 .image {grid-area: 1/2/3/3; display: block; opacity: 0.005; animation: animate83 800ms ease-out forwards; animation-delay: 300ms;}
	@keyframes animate83 {
		0% {opacity: 0.005; transform: translateX(2rem);}
		100% {opacity: 1; transform: unset;}
	}
}

@media (min-width: 1575px) {
	.shift-left {transform: translateX(calc(-50px - 1.5rem));}
}

@media (max-width: 576px) {
	:root {
		--fs-big: 3rem;
		--fs-1: 2.5rem;
		--fs-2: 1.75rem;
		--fs-3: 1.25rem;
		--fs-main: 1rem;
	}
}
@media (max-width: 768px) {
	:root {
		--fs-big: 4rem;
		--fs-1: 2.75rem;
		--fs-3: 1.5rem;
	}
	.btn {--bs-btn-font-size: var(--fs-main);}
}

@media (min-width: 992px) and (max-width: 1165px) {
	.nav-link.menu-l1 {font-size: 1rem!important;}
}
@media (min-width: 1165px) {
	.nav-link.menu-l1 {font-size: 20px!important;}
}

@keyframes fadein {
	from {opacity: 0.005;}
	to {opacity: 1;}
}