:root{
	/* KLEUREN */
	--text-color: #252525;
	--primary-color: #495B29;
	--secondary-color: #BC672E;
	--tertiary-color: #FFF4D8;
	--bg-color: #F4F2EE;
	--footer-color: #4a5c29;
	--white: #FFFFFF;
	--black: #000000;
	--grey: #AAAAAA;
	--light-grey: #EEEEEE;
	--warning: #d12929;
	--primary-dark: #252E15;
	--secondary-color-75: rgba(74, 92, 41, 0.75);


	/* FILTERS */
	--primary-filter: brightness(0) saturate(100%) invert(29%) sepia(63%) saturate(356%) hue-rotate(40deg) brightness(93%) contrast(90%);
	--secondary-filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(1%) hue-rotate(350deg) brightness(106%) contrast(82%);
	--tertiary-filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(399%) hue-rotate(150deg) brightness(87%) contrast(88%);
	--white-filter: brightness(0) saturate(100%) invert(95%) sepia(91%) saturate(38%) hue-rotate(277deg) brightness(111%) contrast(111%);

	/* FONTS */
	--primary-font: "Commissioner", sans-serif;
	--secondary-font: "Commissioner", sans-serif;

	--font-awesome: 'Font Awesome 7 Pro';
	--arrow-up: '\f062'; 
	--arrow-right: '\f061';
	--arrow-down: '\f063';
	--arrow-left: '\f060';

	--angler-down: '\f107';
	--angler-right: '\f105';

	/* DETAILS */
	--border-radius: none;
	--box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	--gradient: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.8) 100%);
	--gradient-banner: linear-gradient(180deg, rgba(188, 103, 46, 0.00) 52.77%, rgba(88, 46, 18, 0.53) 71.17%, rgba(86, 47, 21, 0.79) 89.64%);

	/* CONTAINER */
	--container-width: 1665px;
	--body-padding: 42px;
	--rest-space: calc(100vw - var(--container-width));
	--half-space: calc(var(--rest-space) / 2 - var(--body-padding));

}

*{ outline: 0 !important; }
body{ font-family: var(--secondary-font); font-size: clamp(1rem, 1.1vw, 1.1rem); font-weight: 300; font-style: normal; color: var(--text-color); line-height: 1.5; }
h1{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(3rem, 4.5vw, 6.25rem); line-height: 1.1; color: var(--primary-color); margin: 0 0 24px; }
h2{ font-family: var(--primary-font); font-weight: 500; font-size: clamp(1.4rem, 3.5vw, 3.125rem); line-height: 1.15; color: var(--text-color); margin: 0 0 20px; text-transform: uppercase; }
h3{ font-family: var(--primary-font); font-weight: 700; font-size: clamp(1.3rem, 2.3vw, 1.56rem); line-height: 1.2; color: var(--primary-color); margin: 0 0 20px; }
h4{ font-family: var(--primary-font); font-weight: 300; font-size: clamp(1.1rem, 2.2vw, 1.1rem); line-height: 1.5; color: var(--primary-color); margin: 0 0 16px; text-transform: uppercase; }
h5{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.3; color: var(--primary-color); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; }
h6{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(0.95rem, 1.4vw, 1rem); line-height: 1.3; color: var(--secondary-color); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .12em; }

span.h1 { font-family: var(--primary-font); font-weight: 600; font-size: clamp(3rem, 4.5vw, 6.25rem); line-height: 1.1; color: var(--primary-color); margin: 0 0 24px; }
span.h1 span { color: var(--primary-color); }
h2 span { color: var(--primary-color); font-weight: 700; }
h2::after { content: ''; background: url(/media/2026-08/Vector.svg) no-repeat; background-size: contain; width: 21px; height: 20px; display: inline-block; margin-left: 5px; filter: var(--primary-filter); }

/* FOOTER ALTIJD ONDERAAN DE PAGINA, OOK ALS DE PAGINA TE KORT IS */
body{ min-height: 100vh; display: flex; flex-direction: column; } 
main{ flex: 1; }

/* Buttons */
.btn { background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 16px; font-family: var(--primary-font); font-size: 1.1rem; font-weight: 500; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; cursor: pointer; transition: color 0.2s ease; }
.btn::before { content: var(--arrow-right); font-family: var(--font-awesome); font-weight: 400; display: flex; align-items: center; justify-content: center; width: 53px; height: 53px; border: 2px solid var(--primary-color); border-radius: 50%; color: var(--primary-color); font-size: 1.2rem; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; flex-shrink: 0; }
.btn::after { content: none; }

p:has(.btn + .btn) { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px 40px; }

.btn:is(.btn-primary, .btn-default) { color: var(--text-color); }
.btn.btn-secondary { color: var(--text-color); }
.btn.btn-secondary::before { border-color: var(--secondary-color); color: var(--secondary-color); }

.btn.btn-tertiary { color: var(--primary-color); }
.btn.btn-tertiary::before { border-color: var(--text-color); color: var(--text-color); }

.btn.btn-info { color: var(--primary-color); gap: 8px; }
.btn.btn-info::before { width: auto; height: auto; border: 0; border-radius: 0; color: var(--primary-color); font-size: 0.9em; }

.btn.back::before { content: var(--arrow-left); }

/* Hover */
.btn:is(:hover, :focus-visible, :active) { background: transparent !important; }
.btn:is(.btn-primary, .btn-default):is(:hover, :focus-visible, :active) { color: var(--primary-color); box-shadow: none; background: none; }
.btn:is(.btn-primary, .btn-default):is(:hover, :focus-visible, :active)::before { background: var(--primary-color); border-color: var(--primary-color); color: var(--white); transform: translateX(6px); }

.btn.btn-secondary:is(:hover, :focus-visible, :active) { color: var(--secondary-color); }
.btn.btn-secondary:is(:hover, :focus-visible, :active)::before { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--white); transform: translateX(6px); }

.btn.btn-tertiary:is(:hover, :focus-visible, :active) { color: var(--tertiary-color); }
.btn.btn-tertiary:is(:hover, :focus-visible, :active)::before { background: var(--tertiary-color); border-color: var(--tertiary-color); color: var(--white); transform: translateX(6px); }

.btn.btn-info:is(:hover, :focus-visible, :active) { color: var(--secondary-color); }
.btn.btn-info:is(:hover, :focus-visible, :active)::before { color: var(--secondary-color); transform: translateX(4px); }

.btn.back:is(:hover, :focus-visible, :active)::before { transform: translateX(-6px); }

figure{ margin-bottom: 0; }

/* STYLING LINKJES IN TEKST */
a:not(.btn):not(:has(img)):not( .item) { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:not(.btn):not(:has(img)):not( .item):is(:hover, :focus-visible) { color: var(--tertiary-color); text-decoration-color: var(--tertiary-color); }
a:not(.btn):not(:has(img)):not( .item):active { color: var(--secondary-color); }

.container-fluid.content ul { padding-left: 0; }
.container-fluid.content ul li { list-style: none; position: relative; padding-left: 24px; }
.container-fluid.content ul li::before { content: var(--angler-right); font-family: var(--font-awesome); font-weight: 400; font-style: normal; position: absolute; left: 0; top: 2px; }

.container-fluid.content .image:has(a) { overflow: hidden; border-radius: var(--border-radius); }
.container-fluid.content .image:has(a) img {  -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; }
.container-fluid.content .image:has(a):hover img{ -moz-transform: scale(1.08); -webkit-transform: scale(1.08); transform: scale(1.08); }

.row > .container { width: 100%; margin-right: auto; margin-left: auto; }

/* ============================================
		MELDING
=============================================*/
.container-fluid.notification{ background: var(--warning); font-size: 1rem; color: var(--white); text-align: center; text-transform: uppercase; }
.container-fluid.notification a{ color: var(--white) !important; text-decoration: none !important; }
.container-fluid.notification a:hover{ color: var(--white) !important; text-decoration: underline !important; }
.container-fluid.notification p{ margin: 5px 0; }

/* ============================================
		TOP
=============================================*/
.container-fluid.top{ }

/* ============================================
		NAVIGATIE
=============================================*/
.container-fluid.navigation { background-color: var(--white); padding: 12px calc(var(--bs-gutter-x) * .5); position: sticky; top: 0; z-index: 99; }
.container-fluid.navigation .collapse { justify-content: flex-end; }
.container-fluid.navigation .navbar-brand { max-width: 150px; width: 100%; flex-shrink: 0; display: flex; align-items: center; transition: max-width 0.3s ease-in-out; }
.container-fluid.navigation .navbar-brand img{ width: 100%; }
.container-fluid.navigation .navbar-nav { gap: 28px; }
.container-fluid.navigation .navbar-nav .nav-item { position: relative; }
.container-fluid.navigation .navbar-nav .nav-item .nav-link { font-family: var(--primary-font); font-weight: 600; font-size: 1rem; padding: 4px 0; color: var(--primary-color); position: relative; text-decoration: none; transition: color .2s ease; }
/* .container-fluid.navigation .navbar-nav .nav-item .nav-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0%; height: 2px; background-color: var(--tertiary-color); transition: width .25s ease; } */
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item.dropdown:is(:hover, :focus, :focus-visible, :target, :focus-within, :active) .dropdown-menu { display: flex; }

.navbar-toggler:focus{ box-shadow: none !important; }
.container-fluid.navigation .navbar-toggler{ border: 0; border-radius: 0; padding-right: 0; }

.container-fluid.navigation .navbar-nav .dropdown.nav-item:hover .dropdown-menu{ display: flex; flex-direction: column; gap: 6px; }
.container-fluid.navigation .navbar-nav .nav-item.dropdown > .nav-link span::after {content: var(--angler-down); font-family: var(--font-awesome); display: inline-block; transition: all 0.5s ease-in-out;}
.container-fluid.navigation .navbar-nav .nav-item.dropdown:is(:hover, :focus-visible) > .nav-link span::after {transform: rotate(180deg);}

/* ============================================
		SLIDER/BANNER
=============================================*/
.container-fluid.mainbanner .col-md-12{ padding: 0; }
.container-fluid.mainbanner img{ width: 100%; }

.container-fluid.banner{ padding: 0; position: relative; }
.container-fluid.banner img{ width: 100%; }
.container-fluid.banner .content{ position: absolute; bottom: 0px; left: 0; width: 100%; z-index: 4; }
.container-fluid.banner .content .text{ }
.container-fluid.banner .content .text h1{ color: var(--white); }

/* ============================================
		CONTENT
=============================================*/
.container-fluid.content{  }

/* ============================================
		MODULES
=============================================*/
.block:is(.product, .list, .calendar):has(.item){ row-gap: 24px}

/* BREADCRUMBS */
.container-fluid.breadcrumb{  }
.block.breadcrumb{ padding: 0; margin-bottom: 0; }
.block.breadcrumb ul{ padding-left: 0; margin-bottom: 0; }
.block.breadcrumb ul li{ list-style: none; display: inline; color: var(--grey); }
.block.breadcrumb ul li.breadcrumarrow:after{ content: "\f105"; font-family: var(--font-awesome); font-weight: 400; font-style: normal; margin: 0 10px; }
.block.breadcrumb ul li a{ font-weight: 300; color: var(--grey); }
.block.breadcrumb ul li:last-child a{ font-weight: 500; color: var(--grey); }

/* BESCHIKBAARHEID */
.block.availability{ position: relative; float: right; }
.block.availability .availa_column .available:before{ content: '\f111'; font-family: var(--font-awesome); font-size: 8px; font-weight: 900; color: #41ab34; display: block; position: absolute; left: 5px; top: 0; }
.block.availability .availa_column .not_available:before{ content: '\f111'; font-family: var(--font-awesome); font-size: 8px; font-weight: 900; color: var(--warning); display: inline-flex; margin-right: 10px; }
/* .block.availability .availa_column .available,
.block.availability .availa_column .not_available{ padding-left: 25px; } */

/* INPUT */
.block.list.input{}
.block.list.input .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.list.input a{ color: var(--text-color); }
.block.list.input a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.input .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.list.input .item .image{ position: relative; }
.block.list.input .item .image img{ }
.block.list.input .item .content{ padding: 20px 20px 70px 20px; }
.block.list.input .item .content h3{ margin-top: 0px; }
.block.list.input .item .content .text{ }
.block.list.input .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* NEWS */
.block.list.news{}
.block.list.news a{ color: var(--text-color); }
.block.list.news a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.news .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.list.news .item .image{ position: relative; }
.block.list.news .item .image img{ }
.block.list.news .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.news .item .image .overlay span{ background: var(--black); color: var(--white); padding: 5px; }
.block.list.news .item .content{ padding: 20px 20px 70px 20px; }
.block.list.news .item .content h3{ margin-top: 0px; }
.block.list.news .item .content .text{ }
.block.list.news .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* LOGO SLIDER */
.block.list.logoslider{}
.block.list.logoslider .item{ padding: 0; }

/* VACATURES */
.block.list.vacatures{}
.block.list.vacatures a{ color: var(--text-color); }
.block.list.vacatures a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.vacatures .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.list.vacatures .item .image{ position: relative; }
.block.list.vacatures .item .image img{}
.block.list.vacatures .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.vacatures .item .image .overlay span{ background: var(--black); color: var(--white); padding: 5px; }
.block.list.vacatures .item .content{ padding: 20px 20px 70px 20px; }
.block.list.vacatures .item .content h3{ margin-top: 0px; }
.block.list.vacatures .item .content .text{}
.block.list.vacatures .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* FAQ */
details{ overflow: hidden; padding: 10px 20px; background: var(--white); margin-bottom: 10px; }
details summary span{ margin-left: 5px; }
details .content{ overflow: hidden; height: 0; transition: height 0.5s ease; margin-top: 10px; }

/* TEAM */
.block.list.team{}
.block.list.team a{ color: var(--text-color); }
.block.list.team a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.team .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.list.team .item .image{ position: relative; }
.block.list.team .item .image img{}
.block.list.team .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.team .item .image .overlay span{ background: var(--black); color: var(--white); padding: 5px; }
.block.list.team .item .content{ padding: 20px; }
.block.list.team .item .content h3{ margin-top: 0px; }
.block.list.team .item .content h4{ margin-top: 0px; }
.block.list.team .item .content .functie{}

/* CONTACTPAGINA */
.row.maps .col-lg-12{ padding: 0; }
.row.maps .block.html.map{ margin-top: 25px; margin-bottom: -59px; }
.block.html.contact-details a { color: var(--text-color); text-decoration: none; }
.block.html.contact-details a:hover { color: var(--primary-color); text-decoration: underline; }
.block.html.contact-details table tbody { display: flex; flex-direction: row; flex-wrap: wrap; }
.block.html.contact-details table tbody tr { width: 50%; }
.block.html.contact-details table tbody tr td { padding: 10px 0; }
.block.html.contact-details table tbody tr i { font-size: 1.5rem; vertical-align: top; margin-right: 15px; color: var(--primary-color); }

/* FORMULIER */
.block.form .form-group { margin-bottom: 15px; }
.block.form .form-group:has(select){ position: relative; }
.block.form .form-group:has(select)::after{ content: '\f078'; font-family: var(--font-awesome); font-size: 1rem; position: absolute; top: calc(50% - 12px); right: 20px; pointer-events: none; }
.block.form .form-group textarea{ field-sizing: content; min-height: 100px; } 
.block.form .form-group :is(input:not(.btn), textarea) { width: 100%; padding: 10px; border: 1px solid var(--primary-color); border-radius: 5px; color: var(--primary-color); }
.block.form .form-group :is(input, textarea)::placeholder { color: var(--primary-color); }

/* GALLERIJ */
.block.gallery .item{ position: relative; margin-bottom: 30px; }
.block.gallery .item .text{ position: absolute; bottom: 0; left: 20px; width: 100%; }
.block.gallery .item .text .title{  }
.block.gallery .item .text .title h2{ font-size: 26px; font-weight: 500; color: var(--white); text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }
.block.gallery .item .overlay{ visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(66,66,66,0.5); transition: all 0.2s ease-in-out; }
.block.gallery .item .overlay span{ position: absolute; top: calc(50% - 15px); left: 0; width: 100%; text-align: center; font-size: 30px; color: var(--white); }
.block.gallery .item:hover .overlay{ visibility: visible; opacity: 1; }

.block.gallery .gallery_top{ margin-bottom: 20px; } 

/* KALENDER */
.block.calendar{}
.block.calendar a{ color: var(--text-color); }
.block.calendar a:hover{ color: var(--text-color); text-decoration: none; }
.block.calendar .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.calendar .item .image{ position: relative; }
.block.calendar .item .image img{}
.block.calendar .item .image .date{ position: absolute; bottom: 10px; right: 10px; }
.block.calendar .item .image .date span{ background: var(--black); color: var(--white); padding: 5px; }
.block.calendar .item .content{ padding: 20px 20px 70px 20px; }
.block.calendar .item .content h3{ margin-top: 0px; }
.block.calendar .item .content .text{}
.block.calendar .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* PRODUCTEN */
.block.product{}
.block.product a{ color: var(--text-color); }
.block.product a:hover{ color: var(--text-color); text-decoration: none; }
.block.product .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.product .item .image{ position: relative; }
.block.product .item .image img{}
.block.product .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.product .item .image .overlay span{ background: #000000; color: var(--white); padding: 5px; }
.block.product .item .content{ padding: 20px 20px 70px 20px; }
.block.product .item .content h3{ margin-top: 0px; } 
.block.product .item .content .text{}
.block.product .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* POP-UP */
.modal .modal-dialog{ max-width: 650px; }
.modal .modal-dialog .modal-content .modal-header{ padding: 1rem 1.5rem; }
.modal .modal-dialog .modal-content .modal-header h3{ margin-top: 0; }
.modal .modal-dialog .modal-content .modal-body{ padding: 1.5rem; }

/* SITEMAP */
.block.sitemap .sitemap_ul .sitemap_ul{ margin: 5px 0; }
.block.sitemap .sitemap_ul .sitemap_li:before{ font-size: 1rem; top: 1px; }
.block.sitemap a{ text-decoration: none; color: var(--text-color); }
.block.sitemap a:hover{ color: var(--primary-color); }

/* ============================================
		FOOTER
=============================================*/
.container-fluid.footer-endpage { background: #4A5C29; }
.container-fluid.footer-endpage .footer { color: var(--tertiary-color); }
.container-fluid.footer-endpage .footer h2 { font-size: 22px; color: var(--tertiary-color); line-height: 30px; margin-top: 0; margin-bottom: 15px; }
.container-fluid.footer-endpage .footer h2::after { content: none; }
.container-fluid.footer-endpage .footer a { color: var(--tertiary-color); text-decoration: none; }
.container-fluid.footer-endpage .footer i { color: var(--tertiary-color); font-size: 25px; }
.container-fluid.footer-endpage .footer ul li { list-style: none; position: relative; }
/* .container-fluid.footer-endpage .footer ul li:before { content: '\f105'; font-family: var(--font-awesome); position: absolute; left: -25px; } */
.container-fluid.footer-endpage .footer table tr:first-child { height: 75px; }
.container-fluid.footer-endpage .footer table tr { height: 50px; }
.container-fluid.footer-endpage .footer table tr td { vertical-align: top; }
.container-fluid.footer-endpage .footer table tr td:nth-child(1) { width: 30px !important; vertical-align: top; }
/* .container-fluid.footer-endpage .footer .logo img { filter: invert(1); } */
.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav { padding: 0; }
.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav .nav-item::before { display: none; }
.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav .nav-item .nav-link { padding: 0; }
/* .container-fluid.footer-endpage .footer .socials { display: flex; justify-content: end; } */

/* ============================================
		ENDPAGE
=============================================*/
.container-fluid.footer-endpage .endpage { color: var(--tertiary-color); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(1) {}
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(2) { text-align: center; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3) { text-align: right; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3) img { max-width: 30px; }
.container-fluid.footer-endpage .endpage ul { margin-bottom: 0; padding-left: 0; }
.container-fluid.footer-endpage .endpage ul li { list-style: none; display: inline; }
.container-fluid.footer-endpage .endpage ul li:after { content: "|"; margin: 0 5px; }
.container-fluid.footer-endpage .endpage ul li:last-child:after { content: ""; margin: 0; }
.container-fluid.footer-endpage .endpage a { text-decoration: none; color: var(--tertiary-color); }

/* Hover */
/* .container-fluid.footer-endpage .footer a:is(:hover, :focus-visible) { text-decoration: underline; color: var(--primary-color); }
.container-fluid.footer-endpage .footer .socials a:is(:hover, :focus-visible) i { color: var(--white); } */
.container-fluid.footer-endpage .endpage a:is(:hover, :focus-visible) { text-decoration: underline; color: var(--primary-color); }
.container-fluid.footer-endpage .endpage a:is(:hover, :focus-visible) img { filter: invert(54%) sepia(97%) saturate(3788%) hue-rotate(1deg) brightness(101%) contrast(106%); }

/* ============================================
		MOBIEL MENU
=============================================*/
.modal.fixed-left {  }
.modal.fixed-left .modal-dialog-vertical { height: 100%; width: 100vw; max-width: none; margin: 0; transition: transform 0.3s; transform: translateX(-100%); }
.modal.fixed-left.show .modal-dialog-vertical { transform: translateX(0); }
.modal.fixed-left .modal-content { border-radius: 0; border: none; min-height: 100%; justify-content: space-between; overflow: hidden; background: var(--primary-color); background: var(--secondary-color-75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Title bar */
.modal.fixed-left .title-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; }
.modal.fixed-left .title-bar .mobile-logo { margin: 0; }
.modal.fixed-left .title-bar .mobile-logo img { width: 100px; display: block; }
.modal.fixed-left .title-bar .close-btn-wrap { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--white); font-size: 0.9rem; cursor: pointer; padding: 6px 0; }
.modal.fixed-left .title-bar .close-btn-wrap .close-label { font-size: 0.875rem; font-weight: 500; }
.modal.fixed-left .title-bar .close-btn-wrap i { font-size: 1rem; }

/* Section title MENU */
.modal.fixed-left .menu-content .main-menu .section-title { padding: 20px 15px 6px; margin: 0; color: var(--white); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* Nav items */
.modal.fixed-left .menu-content .main-menu .navbar-nav { padding: 0; margin: 0; list-style: none; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li { position: relative; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: var(--white); font-size: 1rem; transition: transform 0.4s, opacity 0.4s; transform: translateX(-30px); opacity: 0; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li::before { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li { transform: none; opacity: 1; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(1) { transition-delay: 0.1s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(2) { transition-delay: 0.2s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(3) { transition-delay: 0.3s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(4) { transition-delay: 0.4s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(5) { transition-delay: 0.5s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(6) { transition-delay: 0.6s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(7) { transition-delay: 0.7s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(8) { transition-delay: 0.8s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(9) { transition-delay: 0.9s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(10) { transition-delay: 1s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li a { padding: 14px 15px; font-weight: 500; flex-grow: 1; text-decoration: none; color: var(--white); display: flex; align-items: center; font-size: 1rem; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li.active a { color: var(--secondary-color); }
.modal.fixed-left .menu-content .main-menu .navbar-nav li a i { margin-right: 10px; width: 20px; display: inline-flex; justify-content: flex-end; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li::after { font-family: var(--font-awesome); font-weight: 900; padding-right: 15px; color: var(--white); font-size: 0.85rem; flex-shrink: 0; }
/* .modal.fixed-left .menu-content .main-menu .navbar-nav li:not(.dropdown)::after { content: '\e09f'; } */
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown::after { content: '\f061'; transition: transform 0.3s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li:has(a[target="_blank"])::after { content: '\e09f'; transition: transform 0.3s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown .dropdown-menu.show { display: none; }

/* Submenu / first-sub */
.modal.fixed-left .menu-content { overflow: hidden; }
.modal.fixed-left .menu-content nav { width: 200%; display: flex; transition: transform 0.3s; }
.modal.fixed-left .menu-content nav > * { width: 50%; flex-shrink: 0; }
.modal.fixed-left .menu-content nav.open { transform: translateX(-50%); }
.modal.fixed-left .menu-content nav .sub-menu { display: none; }
.modal.fixed-left .menu-content .first-sub .sub-header { display: flex; align-items: center; cursor: pointer; padding: 12px 15px; gap: 8px; position: relative; }
.modal.fixed-left .menu-content .first-sub .sub-header::after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left .menu-content .first-sub .sub-header .back-btn { color: var(--white); display: flex; align-items: center; font-size: 0.9rem; }
.modal.fixed-left .menu-content .first-sub .sub-header .menu-name { margin-bottom: 0; line-height: 1; color: var(--white); font-family: var(--secondary-font); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; flex-grow: 1; }
.modal.fixed-left .menu-content .first-sub .sub-header .button-filler { width: 20px; flex-shrink: 0; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu { display: block; padding: 0; width: 100%; margin: 0; list-style: none; position: relative!important; transform: none!important; border: none; background: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li { position: relative; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li::before { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 14px 15px; color: var(--white); font-size: 1rem; font-weight: 500; text-decoration: none; }
/* .modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a::after { content: '\e09f'; font-family: var(--font-awesome); font-weight: 900; font-size: 0.85rem; flex-shrink: 0; } */
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a i { margin-right: 10px; font-size: 1rem; width: 20px; display: flex; align-items: center; }

/* Footer */
.modal.fixed-left .menu-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 0; padding: 15px; margin-top: auto; color: var(--white); transform: translateY(20px); opacity: 0; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.3s; }
.modal.fixed-left .menu-footer .footer-links { flex: 0 0 auto; }
.modal.fixed-left .menu-footer .footer-links ul {list-style: none; display: flex; gap: 15px; padding: 0; margin: 0;}
.modal.fixed-left .menu-footer .footer-links ul li { width: fit-content;}
.modal.fixed-left .menu-footer .footer-links ul li a { font-size: 1.125rem; color: var(--white); text-decoration: none; }
.modal.fixed-left .menu-footer .socials { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; }
.modal.fixed-left .menu-footer .socials a { text-decoration: none; }
.modal.fixed-left .menu-footer .socials a .item { }
.modal.fixed-left .menu-footer .socials a .item i { font-size: 1.5rem; color: var(--white); }
.modal.fixed-left .menu-footer .lr-logo {  flex: 0 0 100%; display: flex; justify-content: flex-end; margin-bottom: 10px; border-top: 1px solid rgb(from var(--white) r g b / 0.8); padding-top: 24px;}
.modal.fixed-left .menu-footer .lr-logo a { display: flex; }
.modal.fixed-left .menu-footer .lr-logo a img {opacity: 0.5;}
.modal.fixed-left.show .menu-footer { transform: translateY(0); opacity: 1; }

/* Hover */
.modal.fixed-left .title-bar .close-btn-wrap:is(:hover, :focus-visible) { opacity: 0.8; }
.modal.fixed-left .title-bar .close-btn-wrap:focus-visible { box-shadow: 0 0px 0px 2px rgb(255 255 255 / 25%); border: 2px solid rgb(255 255 255 / 50%); }
.modal.fixed-left .menu-content .main-menu .navbar-nav li:is(:hover, :focus-visible) a { opacity: 0.75; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown:is(:hover, :focus-visible)::after { transform: translateX(3px); }
.modal.fixed-left .menu-content .first-sub .sub-header:is(:hover, :focus-visible) { background: rgb(0 0 0 / 5%); }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a:is(:hover, :focus-visible) { opacity: 0.75; }

/* Mega-menu items binnen de mobiele modal */
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu { padding: 0; background: transparent; box-shadow: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu > .container { padding: 0; max-width: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__title { display: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__grid { display: block; padding: 0; margin: 0; list-style: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__item { position: relative; display: block; margin: 0; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__item::before { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__item a { display: flex; align-items: center; gap: 14px; padding: 12px 15px; text-decoration: none; color: var(--white); }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__image { width: 60px; height: 60px; margin: 0; overflow: hidden; border-radius: 4px; flex-shrink: 0; aspect-ratio: unset; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__label { flex: 1; display: flex; align-items: center; gap: 10px; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__label .name { order: 1; flex: 1; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__label .icon { order: 2; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__label .name { color: var(--white); font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--secondary-font); }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__label .icon { width: auto; height: auto; border: none; color: var(--white); font-size: 0.85rem; }
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__label .icon i { display: inline; }

/* Hover in modal submenu */
.modal.fixed-left .menu-content .first-sub .submenu-items .mega-menu__item a:is(:hover, :focus-visible) { opacity: 0.75; }
/* ============================================
        MARGIN
=============================================*/
.mt-6{ margin-top: 4rem !important; }
.mt-7{ margin-top: 5rem !important; }
.mt-8{ margin-top: 6rem !important; }
.mt-9{ margin-top: 7rem !important; }
.mt-10{ margin-top: 8rem !important; }
 
.me-6{ margin-right: 4rem !important; }
.me-7{ margin-right: 5rem !important; }
.me-8{ margin-right: 6rem !important; }
.me-9{ margin-right: 7rem !important; }
.me-10{ margin-right: 8rem !important; }
 
.mb-6{ margin-bottom: 4rem !important; }
.mb-7{ margin-bottom: 5rem !important; }
.mb-8{ margin-bottom: 6rem !important; }
.mb-9{ margin-bottom: 7rem !important; }
.mb-10{ margin-bottom: 8rem !important; }
 
.ms-6{ margin-left: 4rem !important; }
.ms-7{ margin-left: 5rem !important; }
.ms-8{ margin-left: 6rem !important; }
.ms-9{ margin-left: 7rem !important; }
.ms-10{ margin-left: 8rem !important; }
 
.my-6{ margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-7{ margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-8{ margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-9{ margin-top: 7rem !important; margin-bottom: 7rem !important; }
.my-10{ margin-top: 8rem !important; margin-bottom: 8rem !important; }
 
.mx-6{ margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-7{ margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-8{ margin-left: 6rem !important; margin-right: 6rem !important; }
.mx-9{ margin-left: 7rem !important; margin-right: 7rem !important; }
.mx-10{ margin-left: 8rem !important; margin-right: 8rem !important; }
 
/* ============================================
        PADDING
=============================================*/
.pt-6{ padding-top: 4rem !important; }
.pt-7{ padding-top: 5rem !important; }
.pt-8{ padding-top: 6rem !important; }
.pt-9{ padding-top: 7rem !important; }
.pt-10{ padding-top: 8rem !important; }
 
.pe-6{ padding-right: 4rem !important; }
.pe-7{ padding-right: 5rem !important; }
.pe-8{ padding-right: 6rem !important; }
.pe-9{ padding-right: 7rem !important; }
.pe-10{ padding-right: 8rem !important; }
 
.pb-6{ padding-bottom: 4rem !important; }
.pb-7{ padding-bottom: 5rem !important; }
.pb-8{ padding-bottom: 6rem !important; }
.pb-9{ padding-bottom: 7rem !important; }
.pb-10{ padding-bottom: 8rem !important; }
 
.ps-6{ padding-left: 4rem !important; }
.ps-7{ padding-left: 5rem !important; }
.ps-8{ padding-left: 6rem !important; }
.ps-9{ padding-left: 7rem !important; }
.ps-10{ padding-left: 8rem !important; }
 
.py-6{ padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8{ padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-9{ padding-top: 7rem !important; padding-bottom: 7rem !important; }
.py-10{ padding-top: 8rem !important; padding-bottom: 8rem !important; }
 
.px-6{ padding-left: 4rem !important; padding-right: 4rem !important; }
.px-7{ padding-left: 5rem !important; padding-right: 5rem !important; }
.px-8{ padding-left: 6rem !important; padding-right: 6rem !important; }
.px-9{ padding-left: 7rem !important; padding-right: 7rem !important; }
.px-10{ padding-left: 8rem !important; padding-right: 8rem !important; }

/* ============================================
		MOBIEL
=============================================*/
@media (min-width: 1700px){
	.row > .container{ max-width: var(--container-width); }
}

@media only screen and (max-width: 1699px) {
	:root{ --container-width: 1440px; }
	.row > .container { max-width: var(--container-width); }
}

@media only screen and (max-width: 1559px) {
	:root{ --container-width: 1320px; }
	.row > .container { max-width: var(--container-width); }
}

@media only screen and (max-width: 1399px) {
	:root{ --container-width: 1140px; }
}

/* ================================================== */
@media only screen and (max-width: 1199px) {
	:root{ --container-width: 960px; }
}
/* ================================================== */
@media only screen and (max-width: 991px) {
	:root{ --container-width: 720px; }
}
/* ================================================== */
@media only screen and (max-width: 767px) {
	:root{ --container-width: 540px; }
	
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(1){ text-align: center; }
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3){ text-align: center; }
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3) img{ max-width: 30px; }
}
/* ================================================== */
@media only screen and (max-width: 575px) {
	:root{ 
		--container-width: 100%;
		--body-padding: 25px;
		--half-space: 12px
	 }
	.container { max-width: none; }
	.btn{ font-size: 1rem; }

	.modal.fixed-left .menu-footer .footer-links ul li a {font-size: 1rem;}
}

/* ================================================== */
@media only screen and (max-width: 479px) {
	.btn{ width: 100%; font-size: 0.95rem; }

	.modal.fixed-left .menu-footer .footer-links ul li a {font-size: 0.875rem;}

	
}
/*============================================
		TOP
=============================================*/
.container-fluid.top { border-bottom: 1px solid var(--primary-color); padding: 13px calc(var(--body-padding) + (-.5 * var(--bs-gutter-x)) ); font-size: 0.875rem; font-weight: 300;}
.container-fluid.top .container .row { align-items: center;}
.container-fluid.top .topbar-left { display: flex; align-items: center; gap: 16px;}
.container-fluid.top .topbar-left .block.availability { }
.container-fluid.top .topbar-left .block.availability .availa_column > div { display: flex; align-items: center;}
.container-fluid.top .topbar-left .block.availability .availa_column .available { display: flex; align-items: center; gap: 8px; color: var(--text-color);}
.container-fluid.top .topbar-left .block.availability .availa_column .available::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-color); position: static;}
.container-fluid.top .topbar-left .block.availability .availa_column .not_available::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--secondary-color); position: static;}
.container-fluid.top .topbar-left .block.menuitem { }
.container-fluid.top .topbar-left .block.menuitem ul { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none;}
.container-fluid.top .topbar-left .block.menuitem ul li { position: relative; padding-left: 16px;}
.container-fluid.top .topbar-left .block.menuitem ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--text-color); opacity: 0.3;}
.container-fluid.top .topbar-left .block.menuitem ul li a { color: var(--text-color); text-decoration: none;}
.container-fluid.top .topbar-right { display: flex; justify-content: flex-end;}
.container-fluid.top .topbar-right .block.html { }
.container-fluid.top .topbar-right .block.html .links { margin: 0; font-style: normal;}
.container-fluid.top .topbar-right .block.html .links ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none;}
.container-fluid.top .topbar-right .block.html .links ul li { }
.container-fluid.top .topbar-right .block.html .links ul li a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none;}
.container-fluid.top .topbar-right .block.html .links ul li a i { color: var(--secondary-color); transition: transform 0.3s ease-in-out;}
.container-fluid.top .topbar-right .block.html .links ul li a[target="_blank"] i { color: var(--primary-color);}
 
/*Hover*/
.container-fluid.top .topbar-left .block.menuitem ul li a:is(:hover, :focus-visible) { color: var(--primary-color);}
.container-fluid.top .topbar-right .block.html .links ul li a:is(:hover, :focus-visible) { color: var(--primary-color);}
.container-fluid.top .topbar-right .block.html .links ul li a:is(:hover, :focus-visible) i { transform: translateY(-3px);}


/*============================================
        NAVIGATIE
=============================================*/

.container-fluid.navigation { padding: 1rem var(--body-padding);}

.container-fluid.navigation .navbar { padding: 0; align-items: stretch; flex-wrap: nowrap;}
.container-fluid.navigation .navbar .navbar-brand { display: flex; align-items: center; justify-content: flex-start; margin: 0; flex-basis: 440px; max-width: unset;}
.container-fluid.navigation .navbar-brand img { max-width: 150px;}
.container-fluid.navigation .navbar .navbar-toggler i { font-size: 24px; color: var(--primary-color);}
.container-fluid.navigation .navbar .navbar-collapse { flex: 1; justify-content: center;}

.container-fluid.navigation .navbar .navbar-collapse .navbar-nav { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none;}
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-color); font-size: 1.1rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: color 0.2s;}
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item.active .nav-link { color: var(--primary-color);}

/*Chevron achter dropdown-items*/
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item.dropdown .nav-link::after { content: var(--angler-down); font-family: var(--font-awesome); font-weight: 300; font-size: 0.85rem; display: inline-block; transition: transform 0.3s ease;}
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item.dropdown:is(:hover, :focus-within) .nav-link::after { transform: rotate(180deg);}

/*Active underline*/
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item.active .nav-link::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary-color);}
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { position: relative;}

.container-fluid.navigation .navbar .navbar-cta { display: flex; align-items: center; padding-left: 24px; flex-basis: 440px;}
.container-fluid.navigation .navbar .navbar-cta .row { margin: 0; width: 100%;}
.container-fluid.navigation .navbar .navbar-cta .column12 { padding: 0;}
.container-fluid.navigation .navbar .navbar-cta .btn-cta { display: inline-flex; align-items: center; gap: 12px; color: var(--text-color); font-family: var(--primary-font); font-size: 15px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: color 0.2s;}
.container-fluid.navigation .navbar .navbar-cta .btn-cta i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--primary-color); border-radius: 50%; color: var(--primary-color); font-size: 16px; transition: all 0.2s, color 0.2s; flex-shrink: 0;}

/*DROPDOWN*/
.container-fluid.navigation .navbar-nav .nav-item.dropdown:has(.mega-menu) { position: static;}
.container-fluid.navigation .navbar-nav .dropdown-menu.mega-menu { position: absolute; top: 100%; left: 0; right: 0; width: 100%; min-width: 100%; padding: 40px 0; margin: 0; background: var(--white); border: none; border-radius: 0;}
.container-fluid.navigation .navbar-nav .dropdown-menu.mega-menu .container { max-width: var(--container-width);}

.container-fluid.navigation .navbar-nav .dropdown-menu.mega-menu::before { content: ''; position: absolute; top: -40px; left: 0; right: 0; height: 40px; background: transparent;}

.container-fluid.navigation .navbar-nav .nav-item.dropdown:is(:hover, :focus, :focus-visible, :focus-within) .dropdown-menu.mega-menu { display: block; flex-direction: unset; gap: unset;}

.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__title { display: block; text-transform: uppercase; font-weight: 500; font-size: 1.1rem; color: var(--text-color); margin-bottom: 20px;}

.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0;}
.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__item a { display: block; text-decoration: none; color: inherit;}

.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__image { margin: 0 0 16px; overflow: hidden;}
.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}

.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__label { display: flex; align-items: center; gap: 14px;}
.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__label .icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--primary-color); border-radius: 50%; color: var(--primary-color); font-size: 12px; font-weight: 300; flex-shrink: 0; transition: background 0.3s, color 0.3s;}
.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__label .name { text-transform: uppercase; font-weight: 500; font-size: 1.1rem; color: var(--primary-color);}


/*RESPONSIVE*/
@media (max-width: 991px) {
  .container-fluid.navigation .navbar-nav .dropdown-menu.mega-menu { position: static; padding: 20px 0; box-shadow: none;}
  .container-fluid.navigation .navbar-nav .dropdown-menu.mega-menu::before { display: none;}
  .container-fluid.navigation .navbar-nav .mega-menu .mega-menu__grid { grid-template-columns: repeat(2, 1fr); gap: 16px;}
}

@media (max-width: 575px) {
  .container-fluid.navigation .navbar-nav .mega-menu .mega-menu__grid { grid-template-columns: 1fr;}
}

/*HOVER*/
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:is(:hover, :focus-visible) { color: var(--primary-color);}
.container-fluid.navigation .navbar .navbar-cta .btn-cta:is(:hover, :focus-visible) { color: var(--primary-color);}
.container-fluid.navigation .navbar .navbar-cta .btn-cta:is(:hover, :focus-visible) i { background-color: var(--primary-color); color: var(--bg-color); transform: translateY(-5px);}
.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__item a:is(:hover, :focus-visible) .mega-menu__image img { transform: scale(1.05);}
.container-fluid.navigation .navbar-nav .mega-menu .mega-menu__item a:is(:hover, :focus-visible) .mega-menu__label .icon { background: var(--primary-color); color: var(--white);}


/*============================================
		SLIDER/BANNER
=============================================*/
.container-fluid.mainbanner { --banner-height: calc(100vh - 180px); position: relative; margin-bottom: 0; width: 100%; height: fit-content; max-height: var(--banner-height); overflow: hidden; margin-bottom: 25px;}
.container-fluid.mainbanner .block.html.mainbanner { position: relative; height: inherit; max-height: var(--banner-height); display: flex; align-items: center;}
.container-fluid.mainbanner .block.html.mainbanner::before { content: ''; position: absolute; width: 100%; height: 100%; background: var(--gradient-banner); opacity: 0.5; z-index: 1;}
.container-fluid.mainbanner .block.html.mainbanner::after { content: ""; background: url(/media/2026-08/Vector-lined.svg) no-repeat bottom right; width: clamp(200px, 30vw, 600px); height: 550px; position: absolute; right: 0; bottom: 0; z-index: 3; opacity: 0.25; max-height: 90%; background-size: contain;}
.container-fluid.mainbanner .block.html.mainbanner .video-wrap { position: relative; width: 100vw; height: 100dvh; overflow: hidden;}
.container-fluid.mainbanner .block.html.mainbanner .container { max-width: var(--container-width); }

.container-fluid.mainbanner .block.html.mainbanner .video-wrap iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100dvh; min-width: 177.78dvh; min-height: 56.25vw; transform: translate(-50%, -50%); border: 0;}
.container-fluid.mainbanner .block.html.mainbanner .content { padding-top: 50px; padding-bottom: 100px; position: absolute; inset: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: end; z-index: 2;}
.container-fluid.mainbanner .block.html.mainbanner .content .title { text-align: start; text-wrap: balance;}
.container-fluid.mainbanner .block.html.mainbanner .content .title h1 { text-transform: none; font-weight: 300; margin: 0 0 36px; line-height: 1; color: var(--tertiary-color);}
.container-fluid.mainbanner .block.html.mainbanner .content .title h1 .pre { display: block; font-style: italic; font-weight: 500; font-size: clamp(3rem, 4.5vw, 6.25rem); color: var(--tertiary-color); margin-bottom: 8px;}
.container-fluid.mainbanner .block.html.mainbanner .content .title h1 .main { display: block; font-weight: 600; font-size: clamp(3rem, 7vw, 6.25rem); text-transform: uppercase; color: var(--tertiary-color); line-height: 1;}
.container-fluid.mainbanner .block.html.mainbanner .content .title h1 .main em { font-style: normal; color: var(--primary-color);}
.container-fluid.mainbanner .block.html.mainbanner .content .text { color: var(--tertiary-color);}
.container-fluid.mainbanner .block.html.mainbanner .content .text p { margin-bottom: 24px; max-width: 560px;}
.container-fluid.mainbanner .block.html.mainbanner .content .text p:has(.btn) { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 36px 0 0;}
.container-fluid.mainbanner .block.html.mainbanner .content .text .btn { color: var(--tertiary-color);}

/*En in de hover-sectie:*/
.container-fluid.mainbanner .block.html.mainbanner .content .text .btn:is(:hover, :focus-visible) { color: var(--tertiary-color); color: var(--primary-color);}


/*============================================
		CONTENT
=============================================*/
/*====== Algemeen ======*/
.ps-lg-7 { padding-left: 5rem;}
.pe-lg-7 { padding-right: 5rem;}

.ps-lg-9rem { padding-left: 9rem;}
.pe-lg-9rem { padding-right: 9rem;}

.container-fluid.content > .row { margin-bottom: 4rem;}
.row.bg-color { background-color: var(--bg-color); padding-top: 3.5rem; padding-bottom: 3.5rem;}

div[class*=col-].pad-left { padding-left: calc(var(--half-space) + 6px);}
div[class*=col-].pad-right { padding-right: calc(var(--half-space) + 6px);}
.block.pad-left { padding-left: var(--half-space);}
.block.pad-right { padding-right: var(--half-space);}

.row:has(.container .block.up) { margin-top: 8.5rem; padding-top: 0;}
.block.up { margin-top: -4.5rem;}
.block.down { margin-top: 4.5rem;}

.block.content p:has(.btn) { margin-top: 30px;}

.container-fluid.mainbanner,
.container-fluid.content,
.container-fluid.banner { padding: 0 var(--body-padding);}


/*====== Pagina's: Home / Over ons ======*/
.block.html.dubble-img { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start;}
.block.html.dubble-img .img-left { }
.block.html.dubble-img .img-right { margin-top: 100px;}
.block.html.dubble-img .image { margin: 0; position: relative; overflow: hidden;}
.block.html.dubble-img .image::after{ content: ""; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.block.html.dubble-img .image img { width: 100%; height: auto; display: block; object-fit: cover; position: relative; z-index: 1; aspect-ratio: 348 / 469;}

.block.html.dubble-img.vector .img-left .image::before { content: ""; background-image: url(/media/2026-08/Vector.svg); background-size: contain; background-repeat: no-repeat; background-position: bottom; width: 100%; height: 100%; min-height: 335px; position: absolute; bottom: 0; left: 0; z-index: 0; filter: var(--primary-filter);}
.block.html.dubble-img.vector .img-left .image::after { display: none; }

/*====== Pagina's: Home ======*/
.block.list.steps .items { list-style: none; counter-reset: step; padding: 0; margin: 0; background: var(--white); border-radius: var(--border-radius);}
.block.list.steps .item { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 30px; padding-top: 24px; counter-increment: step; border-bottom: 1px solid transparent;}
.block.list.steps .item::before { content: counter(step, decimal-leading-zero); font-family: var(--primary-font); font-weight: bold; font-size: 20px; color: var(--grey); align-self: start;}
.block.list.steps .item .content { }
.block.list.steps .item .content h3 { color: var(--grey);}
.block.list.steps .item .content p { color: var(--grey);}
.block.list.steps .item:is(:hover, .active) { border-bottom: 1px solid var(--primary-color);}
.block.list.steps .item:is(:hover, .active)::before { color: var(--primary-color);}
.block.list.steps .item:is(:hover, .active) .content h3 { color: var(--secondary-color);}
.block.list.steps .item:is(:hover, .active) .content p { color: var(--text-color);}

.block.list.steps.step-image { height: 100%; width: 100%; position: relative; margin: 0;}
.block.list.steps .tab-panel,
.block.list.steps .tab-panel .image-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.block.list.steps .tab-panel .image-card::after { content: ""; background: linear-gradient(0deg, rgba(48, 47, 17, 0.20) 0%, rgba(48, 47, 17, 0.20) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.block.list.steps .tab-panel img { width: 100%; height: 100%; max-height: 100%;}
.block.list.steps .tab-panel:not(.active) { display: none;}

/*====== Pagina's: Home ======*/
.block.content.inspiration-header header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px;}
.block.content.inspiration-header header .swiper-controlls { display: flex; gap: 8px;}
.block.content.inspiration-header header .swiper-controlls :is(.swiper-prev, .swiper-next) { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: var(--primary-color); color: var(--white); border: unset; cursor: pointer;}
.block.content.inspiration-header header .swiper-controlls :is(.swiper-prev, .swiper-next)::after { font-family: var(--font-awesome); font-weight: 300; font-size: 16px;}
.block.content.inspiration-header header .swiper-controlls .swiper-prev::after { content: var(--arrow-left);}
.block.content.inspiration-header header .swiper-controlls .swiper-next::after { content: var(--arrow-right);}
.block.content.inspiration-header header .swiper-controlls :is(.swiper-prev, .swiper-next).swiper-button-disabled { opacity: 0.4; pointer-events: none;}

.block.slides.inspiration-swiper { position: relative;}

.block.slides.inspiration-swiper .item { position: relative; height: 100%;}
.block.slides.inspiration-swiper .item .image { margin: 0; height: 100%; overflow: hidden;}
.block.slides.inspiration-swiper .item .image img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;}
.block.slides.inspiration-swiper .item .content { position: absolute; bottom: 0; right: 0; padding: 24px 40px 24px 24px; color: var(--tertiary-color); background: linear-gradient(180deg, rgba(188, 103, 46, 0.00) 48.38%, rgba(88, 46, 18, 0.34) 68.5%, rgba(86, 47, 21, 0.70) 88.68%), linear-gradient(0deg, rgba(40, 33, 25, 0.30) 0%, rgba(40, 33, 25, 0.30) 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; height: 100%; width: 100%; opacity: 0; z-index: 0; transition: all 0.3s ease-in-out; font-size: 1.1rem; font-weight: 20; }
.block.slides.inspiration-swiper .item .content .category { color: var(--tertiary-color); margin-bottom: 0;}

.block.slides.inspiration-swiper .swiper-progressbar { position: relative; height: 4px; background: #D4D3D0; margin-top: 24px; max-width: var(--container-width); overflow: hidden;}
.block.slides.inspiration-swiper .swiper-progressbar .swiper-scrollbar-drag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary-color); transform-origin: left top;}
.block.slides.inspiration-swiper .swiper-progressbar .swiper-scrollbar-drag:hover { cursor: grab;}
/*Hover*/
.block.content.inspiration-header header .swiper-controlls :is(.swiper-prev, .swiper-next):is(:hover, :focus-visible) { background: var(--secondary-color);}
.block.slides.inspiration-swiper .item:hover .content { opacity: 1; z-index: 1;}

/*====== Pagina's: Home ======*/
.card-wrapper { display: flex; flex-direction: column; justify-content: space-between; gap: 24px;}
.block.html.advies-card { position: relative;}
.block.html.advies-card .image { overflow: hidden;}
.block.html.advies-card .image img { transition: transform 0.3s ease-in-out; width: 100%; height: 100%;}
.block.html.advies-card .content h3 { text-transform: uppercase; color: var(--tertiary-color); font-weight: 400; font-size: clamp(1.3rem, 3vw, 2.19rem);}
.block.html.advies-card .content .labels { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; margin-right: 20px;}
.block.html.advies-card .content .labels .label { background: var(--tertiary-color); color: var(--text-color); padding: 11px 23px 12px 24px; font-weight: 400;}
.block.html.advies-card .content .btn.btn-primary { color: var(--bg-color);}

.block.html.advies-card.bg .content { position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; padding: 40px;}
.block.html.advies-card.bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(188, 103, 46, 0.00) 32.92%, rgba(88, 46, 18, 0.34) 59.06%, rgba(86, 47, 21, 0.70) 85.28%), linear-gradient(0deg, rgba(48, 47, 17, 0.25) 0%, rgba(48, 47, 17, 0.25) 100%);}

.block.html.advies-card:not(.bg) { position: relative;}
.block.html.advies-card:not(.bg) a { display: flex; gap: 24px; width: 100%; height: 100%; color: inherit; text-decoration: none;}
.block.html.advies-card:not(.bg) .content { background: var(--secondary-color); color: var(--tertiary-color); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; flex-basis: 50%;}
.block.html.advies-card:not(.bg) .content .btn.btn-primary::before { border-color: var(--tertiary-color); color: var(--tertiary-color); flex-basis: auto;}

/*Tweede kaart: afbeelding links, content rechts*/
.block.html.advies-card:not(.bg):nth-child(even) .content { order: 2;}
.block.html.advies-card:not(.bg):nth-child(even) .image { order: 1;}

/*Hover*/
.block.html.advies-card a:is(:hover, :focus-visible) .image img { transform: scale(1.08);}
.block.html.advies-card a:is(:hover, :focus-visible) .btn.btn-primary::before { background: var(--primary-color); color: var(--white); transform: translateX(4px);}

.block.html.advies-card:not(.bg) a:is(:hover, :focus-visible) .btn.btn-primary::before { background: var(--tertiary-color); color: var(--secondary-color);}

/*====== Pagina's: Home ======*/
.block.list.partners .swiper-wrapper { align-items: center;}
.block.list.partners .swiper-slide { width: fit-content;}
.block.list.partners .image img { filter: grayscale(1) opacity(0.6);}

/*====== Pagina's: Home, Interieuradvies ======*/
.block.html.contact-bar { position: relative; overflow: hidden;}
.block.html.contact-bar .image { position: relative; height: clamp(200px, 22vw, 280px);}
.block.html.contact-bar .image img { width: 100%; height: 100%; object-fit: cover; display: block;}
.block.html.contact-bar .image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(48, 47, 17, 0.45) 0%, rgba(48, 47, 17, 0.45) 100%); pointer-events: none; z-index: 1;}
.block.html.contact-bar .content { position: absolute; top: 0; left: 0; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 36px clamp(16px, 18vw, 140px); color: var(--bg-color);}
.block.html.contact-bar .content h2 { color: var(--bg-color); margin-bottom: 16px; font-size: clamp(1.2rem, 3vw, 2.5rem); font-weight: 700;}
.block.html.contact-bar .content h2::after { content: none;}
.block.html.contact-bar .content .text p { margin: 0;}
.block.html.contact-bar .content .text p:has(.btn) { margin-top: 24px;}
.block.html.contact-bar .content .text .btn.btn-primary { color: var(--bg-color);}
.block.html.contact-bar .content .text .btn.btn-primary::before { border-color: var(--bg-color); color: var(--bg-color);}


/*============================================
		FOOTER & ENDPAGE
=============================================*/

/*====== Footer ======*/
.container-fluid.footer-endpage { padding: 0 calc(var(--body-padding) - 12px) calc(var(--body-padding) - 12px); background-color: unset;}
.container-fluid.footer-endpage .footer { border-bottom: 1px solid var(--tertiary-color); background-color: var(--footer-color);}
.container-fluid.footer-endpage .footer .footer-brand { position: relative; padding: 83px 70px 70px calc(var(--bs-gutter-x) * .5);}
.container-fluid.footer-endpage .footer .footer-brand::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--tertiary-color);}
.container-fluid.footer-endpage .footer .footer-brand .block.html.logo { margin-bottom: 38px;}
.container-fluid.footer-endpage .footer .footer-brand .socials { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 40px 0;}
.container-fluid.footer-endpage .footer .footer-brand .socials li a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: var(--primary-color); color: var(--tertiary-color); border-radius: 50%; text-decoration: none; transition: background 0.3s, color 0.3s;}

.container-fluid.footer-endpage .footer .footer-brand .business-link { font-weight: 300;}
.container-fluid.footer-endpage .footer .footer-brand .business-link a { font-weight: 300; text-underline-offset: 1px; }
.container-fluid.footer-endpage .footer .footer-brand .business-link a span { text-decoration: underline; }
.container-fluid.footer-endpage .footer .footer-brand .business-link a[target="_blank"]::after { content: '\e09f'; font-family: var(--font-awesome); font-weight: 300; margin-left: 10px; color: var(--tertiary-color); font-size: 0.85rem; flex-shrink: 0; transition: transform 0.3s; text-decoration: none; }

.container-fluid.footer-endpage .footer .footer-col { padding: 83px 70px;}
.container-fluid.footer-endpage .footer .footer-col ul { list-style: none; padding: 0; margin: 0;}
.container-fluid.footer-endpage .footer .footer-col ul li { margin-bottom: 15px;}
.container-fluid.footer-endpage .footer .footer-col ul li a { color: var(--tertiary-color); text-decoration: none; opacity: 0.7; font-weight: 500;}
.container-fluid.footer-endpage .footer .footer-col .block.menuitem ul li.active a { }

.container-fluid.footer-endpage .footer .footer-col.column2 .contact-details ul li { margin-bottom: 12px;}

.container-fluid.footer-endpage .footer .footer-col:last-child .hours li { display: flex; justify-content: flex-start; gap: 30px; font-weight: 500; opacity: 0.75;}
.container-fluid.footer-endpage .footer .footer-col:last-child .hours li .day { min-width: 110px;}
.container-fluid.footer-endpage .footer .footer-col:last-child .hours li .time { }
.container-fluid.footer-endpage .footer .footer-col:last-child .socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; opacity: 0.75; }


.container-fluid.footer-endpage .endpage div[class*="col-"] { opacity: 0.75;}

/*Hover*/
.container-fluid.footer-endpage .footer .footer-brand .socials li a:is(:hover, :focus-visible) { background: var(--tertiary-color);}
.container-fluid.footer-endpage .footer .footer-brand .socials li a:is(:hover, :focus-visible) i { color: var(--primary-color) !important;}
.container-fluid.footer-endpage .footer .footer-brand .business-link p a:is(:hover, :focus-visible) { color: var(--secondary-color); border-color: var(--secondary-color);}
.container-fluid.footer-endpage .footer .footer-col ul li a:is(:hover, :focus-visible) { opacity: 1; color: var(--secondary-color); text-decoration: none;}

.container-fluid.footer-endpage .endpage { background-color: var(--footer-color);}
.container-fluid.footer-endpage .endpage div[class*="col-"]:has(a:hover) { opacity: 1;}
/*============================================
		MOBIEL
=============================================*/

/*---------------------------------------*/
@media only screen and (max-width: 1599px) {
  .block.list.steps .item { grid-template-columns: clamp(25px, 3vw, 50px) 1fr; padding-top: 16px; gap: clamp(16px, 1vw, 30px);}
  .block.list.steps .item .content h3 { margin-bottom: 10px;}

  .container-fluid.footer-endpage .footer .footer-col { padding: 83px 40px;}
}

/*---------------------------------------*/
@media only screen and (max-width: 1399px) {
  .container-fluid.footer-endpage .footer .footer-col { padding: 83px 20px;}

  .block.html.contact-bar .content { padding: 0 48px;}
}

/*---------------------------------------*/
@media only screen and (max-width: 1199px) {
  .container-fluid.top .topbar-right .block.html .links ul li:not(:last-child) a span { display: none;}
  .container-fluid.navigation .navbar .navbar-brand { max-width: 125px;}
  .container-fluid.navigation .navbar .navbar-collapse .navbar-nav { gap: 20px;}
  .container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { font-size: 1rem;}

  .ps-lg-9rem { padding-left: 4.5rem;}
  .pe-lg-9rem { padding-right: 4.5rem;}

  .block.html.advies-card.bg .content { padding: 30px;}
  .block.html.advies-card:not(.bg) .content { padding: 24px;}
  .block.html.advies-card .content .labels { margin-bottom: 20px;}

  .block.html.contact-bar .content { max-width: 65%;}

  .container-fluid.footer-endpage .footer .footer-col { padding: 83px 70px;}
  .container-fluid.footer-endpage .footer .footer-col:not(:first-of-type) { border-top: 1px solid var(--tertiary-color);}
  .container-fluid.footer-endpage .footer .footer-col:last-of-type { border-left: 1px solid var(--tertiary-color);}
}

/*---------------------------------------*/
@media only screen and (max-width: 991px) {
  .ps-lg-7 { padding-left: calc(var(--bs-gutter-x) * .5);}
  .pe-lg-7 { padding-right: calc(var(--bs-gutter-x) * .5);}

  .pe-lg-9rem { padding-right: calc(var(--bs-gutter-x) * .5);}
  .ps-lg-9rem { padding-left: calc(var(--bs-gutter-x) * .5);}

  .col-lg-6 + .col-lg-6 { margin-top: 30px; }
  .col-lg-6 + .col-lg-6.order-lg-2 { margin-top: 0; margin-bottom: 30px; }

.block.up { margin-top: 0; }

  .block.list.steps .item { grid-template-columns: 60px 1fr; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--grey);}
  .block.list.steps .item:is(:hover, .active) { border-bottom: 1px solid var(--grey);}
  .block.list.steps .item::before { color: var(--primary-color);}
  .block.list.steps .item .content h3 { color: var(--secondary-color);}
  .block.list.steps .item .content p { color: var(--text-color);}
  .block.list.steps .item .tab-panel { position: static; display: block; grid-column: 2 / -1; width: 100%; height: auto; max-width: 300px;}
  .block.list.steps .item .tab-panel .image-card { position: static; width: 100%; height: auto;}
  .block.list.steps .item .tab-panel img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--border-radius); display: block;}
  .block.list.steps.step-image { display: none;}
  .block.list.steps .tab-panel .image-card::after { display: none;}

  .card-wrapper { margin-top: 24px;}
  .block.html.advies-card:not(.bg) a { gap: 16px;}

  .row:has(.container .block.up) { margin-top: 0;}

  .block.html.contact-bar .content { max-width: 70%;}

  .container-fluid.footer-endpage .footer .footer-col { padding: 83px 30px;}
}

/*---------------------------------------*/
@media only screen and (max-width: 767px) {
  .container-fluid.mainbanner .block.html.mainbanner .video-wrap { background-position: center;}
  .container-fluid.mainbanner .block.html.mainbanner .video-wrap,
  .container-fluid.mainbanner .block.html.mainbanner .video-wrap iframe { height: 60vh;}

  .block.html.dubble-img { grid-template-columns: 1fr; gap: 20px;}
  .block.html.dubble-img .img-right { margin-top: 0;}

  .block.html.advies-card.bg .content { padding: 24px;}
  .block.html.advies-card:not(.bg) a { flex-direction: column;}
  .block.html.advies-card:not(.bg) .content { padding: 24px; order: 1;}
  .block.html.advies-card:not(.bg) .image { order: 2;}
  .block.html.advies-card:not(.bg) .image img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
  .block.html.advies-card:not(.bg):nth-child(even) .content { order: 1;}
  .block.html.advies-card:not(.bg):nth-child(even) .image { order: 2;}

  .block.down { margin-top: 2rem;}

  .block.html.contact-bar .image { height: clamp(260px, 40vw, 320px);}
  .block.html.contact-bar .content { max-width: 100%; padding: 0 32px;}

  .container-fluid.footer-endpage .footer .footer-brand { padding: 50px calc(var(--bs-gutter-x) * .5) 15px;}
  .container-fluid.footer-endpage .footer .footer-brand::after { content: none;}
  .container-fluid.footer-endpage .footer .footer-brand .block.html.logo img { max-width: 130px;}
  .container-fluid.footer-endpage .footer .footer-col:not(:first-of-type) { padding: 15px calc(var(--bs-gutter-x) * .5); border: none;}
  .container-fluid.footer-endpage .footer .footer-col:last-of-type { border-left: none;}
}

/*---------------------------------------*/
@media only screen and (max-width: 575px) {
  .container-fluid.top { padding: 5px calc(var(--body-padding) + (-.5 * var(--bs-gutter-x)) ); }
  .container-fluid.top .topbar-left { width: 75%; } 
  .container-fluid.top .topbar-left .block.availability .availa_column .available::before { width: 8px; height: 8px; }
  .container-fluid.top .topbar-left .block.availability .availa_column .not_available::before { width: 8px; height: 8px;}

  .container-fluid.top .topbar-right { width: 25%; }
  .container-fluid.top .topbar-right .block.html .links ul { gap: 15px; }

  .container-fluid.navigation { padding: 0 var(--body-padding); }
  .container-fluid.navigation .navbar-brand img { max-width: 75px;}
  .container-fluid.navigation.sticky .navbar .navbar-brand { max-width: 75px;}

  .container-fluid.mainbanner { padding: 0 calc(var(--bs-gutter-x) * .5); margin-bottom: 0; }
  .container-fluid.mainbanner .block.html.mainbanner .content { padding: 50px 0;}

  .container-fluid.content { padding: 0 calc(var(--bs-gutter-x) * .5);}
  .container-fluid.content > .row { margin-bottom: 2rem;}
  .row.bg-color { padding-top: 2rem; padding-bottom: 2rem;}
  
  .btn::before { width: 40px; height: 40px; font-size: 1.1rem; }

  div[class*=col-].pad-left { padding-left: var(--half-space);}
  div[class*=col-].pad-right { padding-right: var(--half-space);}

  .block.html.dubble-img:not(.vector) .image img { aspect-ratio: 1 / 1; }

  .block.list.steps .item { grid-template-columns: 20px 1fr;}

  .block.content.inspiration-header header .swiper-controlls :is(.swiper-prev, .swiper-next) { width: 30px; height: 30px;}
  .block.slides.inspiration-swiper .swiper-progressbar { max-width: calc(100% - 24px);}

  .block.html.advies-card.bg .content { padding: 20px;}
  .block.html.advies-card:not(.bg) .content { padding: 20px;}
  .block.html.advies-card .content .labels { gap: 8px; margin-bottom: 20px; margin-right: 0;}
  .block.html.advies-card .content .labels .label { padding: 8px 16px; font-size: 14px;}

  .container-fluid.container-fluid.footer-endpage .footer { padding-bottom: 30px;}
  .container-fluid.container-fluid.footer-endpage .footer h2 { margin-bottom: 10px;}
  .container-fluid.footer-endpage .footer .footer-brand { padding: 50px calc(var(--bs-gutter-x) * .5) 0;}
  .container-fluid.footer-endpage .footer .footer-brand .block.html.logo { margin-bottom: 25px;}
  .container-fluid.footer-endpage .footer .footer-brand .socials { margin: 9px 0 25px;}
  .container-fluid.footer-endpage .footer .footer-col:not(:first-of-type) { padding: 25px calc(var(--bs-gutter-x) * .5) 0;}
  .container-fluid.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav { display: block; column-count: 2;}
  .container-fluid.footer-endpage .footer .footer-col ul li { margin-bottom: 5px;}
}

/*---------------------------------------*/
@media only screen and (max-width: 479px) {
  .block.content.inspiration-header header { flex-direction: column; align-items: flex-start; gap: 0;}
  .modal.fixed-left .menu-footer .socials a .item i {font-size: 1.1rem; }
}