/* ============================================
		Algemene elementen
=============================================*/

figure {margin: 0;}

a { color: var(--primary-color); text-decoration: underline; transition: all 0.5s; }
a:hover { color: var(--secondary-color); }

a[href*='mailto:']::before,
a[href*='tel:']::before { display: inline-block; transition: all 0.5s;}

a:hover[href*='mailto:']::before,
a:hover[href*='tel:']::before {transform: translateY(-3px);}

.bg-color {background-color: var(--bg-color);}
.bg-color :is(h2, h3, p) {color: var(--white);}
.bg-color .btn-secondary {background: transparent; color: var(--white); }

b, strong {color: var(--secondary-color);}

.primary-block-left {position: relative;}
.primary-block-left::before {content: ''; position: absolute; left: 0; top: 0; width: calc(var(--half-space) + calc(var(--container-width) * 0.25)); height: 100%; background: var(--primary-color); border-radius: 0 var(--br-xl) var(--br-xl) 0;}

/* === Swiper === */
.swiper {position: relative;}
.swiper-wrapper {}
.swiper-wrapper .swiper-slide {height: fit-content;}

:is(.swiper-button-next, .swiper-button-prev) { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: absolute; top: unset; bottom: 0; border: none; border-radius: var(--br-sm); transition: all 0.5s; z-index: 10;}
:is(.swiper-button-next, .swiper-button-prev):hover {background-color: var(--secondary-color);}
:is(.swiper-button-next, .swiper-button-prev)::after { display: none;}
:is(.swiper-button-next, .swiper-button-prev)::before { font-family: var(--font-awesome); font-size: 1.125rem; color: var(--white);}

.swiper-button-prev {right: calc(var(--half-space) - 12px + var(--space-xl)); left: unset; background: var(--tertiary-color); }
.swiper-button-next {right: calc(var(--half-space) - 12px); left: unset; background: var(--primary-color);}

.swiper-button-prev::before {content: var(--arrow-left);} 
.swiper-button-next::before {content: var(--arrow-right);}

/* Dots/Pagination */
.swiper-pagination { --dot-size: 10px; padding: var(--space-md) 0; position: absolute; bottom: 0 !important; display: flex; gap: 0 8px; justify-content: center;}
.swiper-pagination-bullet { width: var(--dot-size); height: var(--dot-size); background-color: var(--white); border-radius: 100%; opacity: 1; margin: 0 !important;}
.swiper-pagination-bullet-active {background-color: var(--primary-color);}

/* Verberg pijlen aan de randen */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled { background-color: var(--grey); pointer-events: none;}
  
/* ============================================
		TOP
=============================================*/

.container-fluid.topbar { position: relative; background-color: var(--secondary-color); z-index: 4;}
.container-fluid.topbar::after {content: ''; position: absolute; left: var(--half-space); bottom: 0; width: var(--container-width); height: 1px; background-color: var(--tertiary-color);}

.container-fluid.topbar .top-left {}
.container-fluid.topbar .top-left .top-el {}
.container-fluid.topbar .top-left .top-el .usp-list {}
.container-fluid.topbar .top-left .top-el .usp-list ul {margin: 0; padding: 0; display: flex; gap: 0 var(--space-lg);}
.container-fluid.topbar .top-left .top-el .usp-list ul li { list-style: ''; font-weight: 400; }
.container-fluid.topbar .top-left .top-el .usp-list ul li::before { 
    content:var(--check-duo); font:var(--fa-font-duotone); font-weight:900; --fa-primary-color:var(--white); --fa-secondary-color:var(--green); --fa-secondary-opacity:1; color: var(--green);
    font-style:normal; 
    margin-right:14px; 
    display:inline-block; line-height:1; 
    text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container-fluid.topbar .top-right {}
.container-fluid.topbar .top-right .top-el {}
.container-fluid.topbar .top-right .top-el .top-contact {display: flex; gap: 0 45px; margin-bottom: 0;}
.container-fluid.topbar .top-right .top-el .top-contact a {text-decoration: none; display: flex; gap: 0 12px; align-items: center;}
.container-fluid.topbar .top-right .top-el .top-contact a::before { font-family: var(--font-awesome); color: var(--primary-color); font-weight: 300; }

.container-fluid.topbar .top-right .top-el .top-contact a[href*="tel"]::before {content: var(--phone);}
.container-fluid.topbar .top-right .top-el .top-contact a[href*="mailto"]::before {content: var(--mail);}

.container-fluid.topbar .top-right .top-el .top-contact a:hover {color: var(--primary-color)}

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

.container-fluid.navigatie { position: relative; padding: 0; z-index: 4;}
.container-fluid.navigatie .nav-top { padding: 16px 0; background: var(--secondary-color);}
.container-fluid.navigatie .nav-top .nav-top-menu {color: var(--white); display: flex; justify-content: end; align-items: center; gap: 6px 24px; height: 100%;}
.container-fluid.navigatie .nav-top .nav-top-menu .account {color: var(--white); font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 0 12px;}
.container-fluid.navigatie .nav-top .nav-top-menu .account::before {content: var(--user); font-family: var(--font-awesome);}
.container-fluid.navigatie .nav-top .nav-top-menu .cartmenu { padding: 10px 24px; background: var(--tertiary-color); border-radius: var(--br-sm); position: relative; }
.container-fluid.navigatie .nav-top .nav-top-menu .cartmenu i {font-size: 1.125rem; transition: all 0.5s;}
.container-fluid.navigatie .nav-top .nav-top-menu .navbar-toggler {display: none;}

/* Hover top menu */
.container-fluid.navigatie .nav-top .nav-top-menu .account:hover {color: var(--primary-color);}
.container-fluid.navigatie .nav-top .nav-top-menu .cartmenu:hover i {color: var(--primary-color);}

.container-fluid.navigatie .nav-bottom {background: var(--tertiary-color);}

.container-fluid.navigatie .mainmenu { height: 100%; padding: 0; border: unset; }
.container-fluid.navigatie .mainmenu #navbarNav {}
.container-fluid.navigatie .mainmenu #navbarNav .nav { justify-content: flex-start; align-items: center; gap: 0 45px;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item {padding: 16px 0; margin: 0;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item .nav-link {color: var(--white); font-size: 1rem; font-weight: 400; padding: 0; text-decoration: none; transition: all 0.5s;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item .nav-link:hover {color: var(--primary-color);}

.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item:first-child {}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item:first-child .nav-link { padding: 6px 12px; text-transform: uppercase; background-color: var(--primary-color); border-radius: var(--br-sm); }
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item:first-child .nav-link:hover {color: var(--white); }

/* Mega-menu */
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown {position: static;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu {padding: 0; margin: 0; border-bottom: 2px solid var(--primary-color);}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu { padding-top: 40px; padding-bottom: 40px;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu .all-products { position: relative; font-size: 1.375rem; font-weight: 500; text-decoration: underline; display: flex; gap: var(--space-xs); width: fit-content; margin-bottom: 40px; }
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu .all-products::after {content: var(--arrow-right); font-family: var(--font-awesome); position: absolute; left: calc(100% + 12px); transition: all 0.5s;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu .cat-head {color: var(--primary-color); font-size: 1.375rem; font-weight: 500; text-decoration: none; }
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu ul {padding-left: 0; margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 8px;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu ul .nav-item {list-style: none; padding: 0; margin: 0;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu ul .nav-item::marker {display:none;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu ul .nav-item .nav-link { font-size: 1.125rem; font-weight: 400; color: var(--secondary-color); text-transform: capitalize; background: transparent; padding: 0; display: flex; gap: 0 12px; align-items: center; }
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu ul .nav-item .nav-link::after {content: var(--angler-right); font-family: var(--font-awesome); color: var(--primary-color); font-weight: 300; }

.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu > .container { display: block; }
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu > .container > .row > .col-3::before { content: ''; position: absolute; left: -25%; top: 0; width: 2px; height: 100%; background: var(--grey); }

.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu > .container > .row > .col-3:nth-child(2)::before { display: none;}

/* Hover menu */
body:has(.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown:hover) {position: relative; overflow-x: hidden; }
body:has(.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown:hover)::before {content: ''; position: fixed; inset: 0; width: 100%; height: 100vh; background: var(--secondary-color); opacity: 0.5; z-index: 3;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu .all-products:hover {color: var(--primary-color); gap: 18px; } 
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu .all-products:hover::after {left: calc(100% + 18px);}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu ul .nav-item .nav-link:hover {color: var(--primary-color); gap: 18px;}

.navbar-toggler-icon { width: fit-content; display: flex; align-items: center;}

/* Zoeken / search */
header .search-bar {display: flex; align-items: center; height: 100%;}
header .search-bar .search {}
header .search-bar .search .form-group {}
header .search-bar .search .form-group input { padding: 25px 35px; background: var(--white); border-radius: 10px !important; border: none; border: 1px solid var(--white); border-radius: 10px; color: var(--primary-color) !important; }
header .search-bar .search .form-group .search-results {background-color: var(--white); border-radius: 0 0 10px 10px;}
header .search-bar .search .form-group .search-results .search-result {}
header .search-bar .search .form-group .search-results .search-result {padding: var(--space-sm); text-decoration: none !important;}
header .search-bar .search .form-group .search-results .search-result figure {display: flex; justify-content: space-between; gap: var(--space-sm); margin: 0;}
header .search-bar .search .form-group .search-results .search-result figure img {width: 100%; object-fit: contain;}
header .search-bar .search .form-group .search-results .search-result figure figcaption { flex: 1; display: flex; flex-direction: column; justify-content: center;}
header .search-bar .search .form-group .search-results .search-result figure figcaption span {}
header .search-bar .search .form-group .search-results .search-result figure figcaption span.producttitle {font-size: 1.375rem; color: var(--secondary-color); transition: all 0.5s;}
header .search-bar .search .form-group .search-results .search-result figure figcaption span.specs-title {color: var(--grey2); font-size: 1rem;}
header .search-bar .search .form-group .search-results .search-result figure figcaption span.pricestyle {}
header .search-bar .search .form-group .search-results .search-result figure figcaption .btn-wrap {display: flex; justify-content: end;}
header .search-bar .search .form-group .search-results .search-result figure figcaption .btn-wrap .btn { text-align: end; display: flex; flex-direction: row-reverse; gap: var(--space-xs);}
header .search-bar .search .form-group .search-results .search-total-results {display: flex; gap: 10px; color: var(--secondary-color);}

/* Hover */
header .search-bar .search .form-group .search-results .search-result a:hover figure figcaption span.producttitle {color: var(--secondary-color)}

/* Open */
header .search-bar .search .form-group:has(.search-results.open) input {border-radius: 25px 25px 0 0 !important;}

/* ============================================
		SLIDER/BANNER
=============================================*/

.block.list.main-banner {margin-bottom: -150px;}
.block.list.main-banner .item {}
.block.list.main-banner .item figure {position: relative;}
.block.list.main-banner .item figure::before {content: ''; position: absolute; inset: 10% 0 0 50%; width: 400px; height: 18vw; background-image: url('/template/images/kubus-outline.svg'); background-size: contain; background-repeat: no-repeat; filter: var(--filter-white); opacity: 0.5;}
.block.list.main-banner .item figure::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--primary-color); opacity: 0.5; z-index: 1;}
.block.list.main-banner .item figure figcaption {position: absolute; inset: 20% 0 0 0; width: 100%; z-index: 2;}
.block.list.main-banner .item figure figcaption hgroup {}
.block.list.main-banner .item figure figcaption hgroup p {}
.block.list.main-banner .item figure figcaption hgroup h1 {font-size: 5.625rem; text-transform: uppercase; max-width: 775px; line-height: 5rem; color: var(--white) !important;}
.block.list.main-banner .item figure img {height: auto;}

/* ============================================
		CONTENT
=============================================*/

.breadcrumbs {}
.breadcrumbs ul {}
.breadcrumbs ul li {}
.breadcrumbs ul li a {text-decoration: none;}

.container-fluid.page-content > .row {margin-bottom: var(--row-space);}
.container-fluid.page-content > .row:nth-last-child(1) {margin-bottom: 0px;}

.container-fluid.page-content > .row:has(.main-banner-block) {padding-top: var(--space-md);}

.block.content.title {margin-bottom: var(--space-md);}
.block.content.title h2 {margin-bottom: 0;}
.block.content.title p {font-size: 1.375rem;}

.block.content {}
.block.content h2 {margin-bottom: var(--space-lg);}
.block.content p {}
.block.content p:has( + p .btn) {margin-bottom: var(--space-lg);}
.block.content p:has(.btn) {margin-bottom: 0;}
.block.content p .btn + .btn {margin-top: 12px;}

.block.content.bg-color { padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; height: 100%; border-radius: var(--br-xl); }
.block.content.bg-color p {font-size: 1.125rem;}

/* === Pagina's: Home === */

/* .container-fluid.page-content > .row:has(.main-banner-block) {max-height: calc(100vh - calc(56px + 161px));} */

/* Banner blok groot */
/* .block.list.main-banner-block {height: 100%; max-height: calc(100vh - calc(56px + 161px) - 35px - 12px);} */
.block.list.main-banner-block {height: 100%;}
.block.list.main-banner-block .item { position: relative; height: 100%; }
.block.list.main-banner-block .item .content { padding: var(--space-lg); position: absolute; inset: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-end; z-index: 1;}
.block.list.main-banner-block .item .content h1 { color: var(--white); position: sticky; bottom: 24px; text-wrap: balance; flex: 0 0 55%; margin: 0; }
.block.list.main-banner-block .item .content .btn { position: sticky; bottom: 24px;}
.block.list.main-banner-block .item .content .btn::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%;}
.block.list.main-banner-block .item .image { position: relative; height: 100%; margin: 0; border-radius: var(--br-xl); overflow: hidden; }
.block.list.main-banner-block .item .image::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: var(--gradient-tertiary); z-index: 0; } 
.block.list.main-banner-block .item .image img {height: 100%; width: 100%; object-fit: cover;}

/* Banner blok klein (slider) */
.small-product-slider { border-radius: var(--br-xl); overflow: hidden;}
.small-product-slider .item {position: relative; height: 100%;}
.small-product-slider .item .content { padding: var(--space-md); position: absolute; width: 100%; height: 100%; inset: 0; display: flex; flex-direction: column; gap: var(--space-md); z-index: 1; }
.small-product-slider .item .content hgroup { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.small-product-slider .item .content hgroup::after {content: ''; position: absolute; top: calc(100% + 12px); left: 55%; width: 40px; height: 40px; background: var(--svg-arrow-bend); background-size: contain; filter: var(--filter-white); background-repeat: no-repeat; }
.small-product-slider .item .content hgroup h2 {color: var(--white);}
.small-product-slider .item .content hgroup p {color: var(--white); font-size: 1.375rem; font-weight: 500; margin-bottom: 0; }
.small-product-slider .item .content .btn {width: fit-content;}
.small-product-slider .item .image {height: 100%; margin: 0;}
.small-product-slider .item .image::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 75%; background: var(--gradient-secondary); z-index: 0; } 
.small-product-slider .item .image img {height: 100%;}

.small-product-slider .swiper-pagination {justify-content: end; padding-right: var(--space-md); width: fit-content; left: unset; right: 0;}

/* Banner blok klein (usps) */
.block.list.main-banner-side-block {margin-top: 24px;}
.block.list.main-banner-side-block .item {position: relative; border-radius: var(--br-xl); overflow: hidden;}
.block.list.main-banner-side-block .item .content { padding: var(--space-md); position: absolute; width: 100%; height: 100%; inset: 0; display: flex; flex-direction: column; justify-content: center; z-index: 2;}
.block.list.main-banner-side-block .item .content h2 {color: var(--white);}
.block.list.main-banner-side-block .item .content .text {color: var(--white);}
.block.list.main-banner-side-block .item .content .text ul {padding: 0; display: flex; flex-direction: column; gap: 16px; }
.block.list.main-banner-side-block .item .content .text ul li {font-size: 1.125rem; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 12px; }
.block.list.main-banner-side-block .item .content .text ul li::before {content: var(--thumb); font-family: var(--font-awesome); font-weight: 300; color: var(--secondary-color); background: var(--white); width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; border-radius: var(--br-xs); }
.block.list.main-banner-side-block .item .image {position: relative;}
.block.list.main-banner-side-block .item .image::before {content: ''; position: absolute; inset: 0; background: var(--gradient-primary); z-index: 1; }
.block.list.main-banner-side-block .item .image img {}

/* Producten slider */
.main-product-slider {margin-left: calc(var(--half-space) - 12px); padding-bottom: 65px;}
.main-product-slider .swiper-wrapper {}
.main-product-slider .swiper-wrapper .swiper-slide {height: auto;}

.item.promo { padding: var(--space-md); display: block; height: 100%; border-radius: var(--br-xl); background: var(--tertiary-color);}
.item.promo .content {display: flex; flex-direction: column; align-items: center; gap: 50px 0; height: 100%;}
.item.promo .content h2 {color: var(--white); margin-top: var(--space-md);}
.item.promo .content h2 span {color: var(--primary-color); text-transform: uppercase;}
.item.promo .content .text {}
.item.promo .content .text ul { padding: 0; margin-bottom: 0; color: var(--white);}
.item.promo .content .text ul li {list-style: none; display: flex; gap: 12px; font-size: 1.125rem; }
.item.promo .content .text ul li::before {content: var(--check-duo); font-family: var(--font-awesome-duo); font-size: 1.625rem; color: var(--primary-color); }
.item.promo .content .btn-wrapper {flex: 1; display: flex; align-items: flex-end; width: 100%;}
.item.promo .content .btn-wrapper .btn {width: 100%; justify-content: center;}

.item.promo .content .btn-wrapper .btn:hover {background: transparent; color: var(--white);}

/* Impressie slider */
.list-image-slider { position: relative; border-radius: var(--br-xl); overflow: hidden;}
.list-image-slider .item {}
.list-image-slider .item .image {border-radius: var(--br-xl); overflow: hidden;}
.list-image-slider .item .image img {}

.list-image-slider .swiper-button-prev { bottom: 24px; right: calc(24px + var(--space-xl)); left: unset;}
.list-image-slider .swiper-button-next { bottom: 24px; right: 24px; left: unset;}

/* Formulieren */
.block.form form .form-group:has(.g-recaptcha) {display: flex;}
.block.form form .form-group:has(.g-recaptcha) div[class*="col"] { padding: 0; display: flex; justify-content: end;}

.block.form form .form-group .required {}
.block.form form .form-group .required:after {content: '*'; display: inline;}
.block.form form .form-group input[data-validation="[NOTEMPTY]"] {}
.block.form form .form-group:has(.btn) {width: 100%; text-align: end; margin: 0;}
.block.form form .form-group:has(.btn) > div {width: 100%; max-width: 100%; flex: 1 1 100%; padding: 0;}
.block.form form .form-group:has(.btn) > div .btn {background-color: var(--secondary-color); color: var(--white);}

.form-check {padding-left: 0;}
.form-check .form-check-label {}
.form-check .form-check-label::before {content: var(--check); font-family: var(--font-awesome); color: var(--white); margin-right: var(--space-xs); display: inline-flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: var(--br-xs); border: 1px solid var(--grey); transition: all 0.5s; }
.form-check .form-check-label .form-check-input {display: none;}

/* Mutaties */
.form-check .form-check-label:not(:has(:checked)):hover::before {background-color: var(--primary-color); cursor: pointer; opacity: 0.2; }
.form-check .form-check-label:has( :checked)::before {background-color: var(--primary-color);}

/* Logo-slider */
.logo-slider {}
.logo-slider .item { width: 225px; padding: 24px; display: flex; justify-content: center; border: 1px solid var(--grey); border-radius: var(--br-xl);}
.logo-slider .item .image {}
.logo-slider .item .image img {object-fit: contain;}

.logo-slider .swiper-wrapper {}
.logo-slider .swiper-wrapper .swiper-slide { width: 225px; height: auto;}

/* Contact */

body:has(.block.html.contact) .footer-help {display: none;} 
body:has(.block.html.contact) footer .subfoot {padding-top: 45px;}

/* .form-control-error-list {margin-top: 0;} */
.block.html.contact {padding: var(--space-md); background: var(--primary-color); border-radius: var(--br-xl); }
.block.html.contact h2 {color: var(--secondary-color);}
.block.html.contact h3 {color: var(--secondary-color);}
.block.html.contact section { margin-bottom: var(--space-sm);}
.block.html.contact section p {margin-bottom: var(--space-xs);}
.block.html.contact section p:last-child {margin-bottom: 0;}
.block.html.contact section:not(:last-child)::after {content: ''; display: block; width: 100%; height: 1px; background: var(--grey); margin: var(--space-sm) 0;}

.block.html.contact a { position: relative; padding-left: 24px; display: block; color: var(--white); text-decoration: none; }
.block.html.contact a::before {content: ''; font-family: var(--font-awesome); color: var(--white); font-weight: 700; margin-right: 15px; position: absolute; left: 0;}
.block.html.contact a:hover {color: var(--secondary-color);}

.block.html.contact address {margin-bottom: 0;}
.block.html.contact address .address {}
.block.html.contact address .address a {}
.block.html.contact address .address a::before {content: var(--location-dot);}
.block.html.contact address .address a span:last-child {display: block;}

.block.html.contact address a[href*='mailto:'] {}
.block.html.contact address a[href*='mailto:']::before {content: var(--mail); transform: none;}
.block.html.contact address a[href*='tel:'] {}
.block.html.contact address a[href*='tel:']::before {content: var(--phone); transform: none;}

.block.html.contact .terms a::before {content: var(--tooltip); font-family: var(--font-awesome); color: var(--white); font-weight: 700; margin-right: 15px;}

.block.html.contact .btw span {color: var(--white);}
.block.html.contact .btw span::before {content: var(--bank); font-family: var(--font-awesome); color: var(--white); font-weight: 700; margin-right: 15px;}

.block.html.contact .coc::before {content: var(--briefcase); font-family: var(--font-awesome); color: var(--white); font-weight: 700; margin-right: 15px;}
.block.html.contact .coc {display: block; color: var(--white);}
.block.html.contact .coc i {color: var(--white);}

.block.html.contact .times {color: var(--white);}

.block.html.map {border-radius: 15px; overflow: hidden;} 
.block.html.map iframe {}

.block.form.form-bg {padding: var(--space-md); background: var(--primary-color); border-radius: var(--br-xl);}

.block.content:has( + .block.form) {}
.block.content:has( + .block.form) h2 {margin: var(--space-md) 0 var(--space-sm) 0}

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

/* Help bar */
.footer-help { z-index: 2; margin-bottom: -113px;}
.footer-help * {color: var(--white);}
.footer-help .help-container { position: relative; padding: var(--space-md) var(--space-xxl); background: var(--primary-color); border-radius: var(--br-xl);}
.footer-help .help-container hgroup {}
.footer-help .help-container hgroup h2 {}
.footer-help .help-container hgroup p {color: var(--white); margin-bottom: 0;}
.footer-help .help-container address { height: 100%; padding: 0 var(--space-md); margin: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: var(--space-sm) var(--space-xl);}
.footer-help .help-container address a { display: flex; align-items: center; gap: var(--space-xs); width: fit-content; text-decoration: none !important;}
.footer-help .help-container address a::before {font-family: var(--font-awesome); width: 30px; height: 30px; background: var(--white); color: var(--secondary-color); display: flex; justify-content: center; align-items: center; border-radius: var(--br-xs);}
.footer-help .help-container address a[href*='mailto:'] {}
.footer-help .help-container address a[href*='mailto:']::before {content: var(--mail);}
.footer-help .help-container address a[href*='tel:'] {}
.footer-help .help-container address a[href*='tel:']::before {content: var(--phone);}
.footer-help .help-container address p { font-size: 1.125rem; width: 100%; margin: 0;}
.footer-help .help-container address p i { display: inline-block; width: 70%;}
.footer-help .help-container .image {position: absolute; bottom: 0; left: -60px; display: block; width: 240px; height: 290px;}
.footer-help .help-container .image img {position: absolute; bottom: -40px; left: 0; height: 290px; width: 240px; object-fit: contain;}


/* Main footer */
footer {}
footer :is(h2, h3, li, a, p) {color: var(--white) !important; text-decoration: none !important; font-size: 1.25rem;}
footer .subfoot { padding: 165px 0 var(--space-md) 0; background: var(--tertiary-color);}
footer .subfoot .logo-wrap {}
footer .subfoot .logo-wrap .image {}
footer .subfoot .logo-wrap .image img {object-fit: contain; height: fit-content;}
footer .subfoot .logo-wrap p {margin-top: var(--space-xl);}

footer .subfoot .footer-menu {display: flex; flex-direction: column; gap: var(--space-xs) 0;}
footer .subfoot .footer-menu li {margin: 0;}
footer .subfoot .footer-menu li a {font-size: 1.25rem;}

footer .subfoot address {font-size: 1.125rem;}
footer .subfoot address a {}
footer .subfoot address a span {}
footer .subfoot address a span {}
footer .subfoot address p i {font-size: 0.875rem; display: inline-block; width: 70%;}
footer .subfoot address p i a {font-size: 0.875rem; text-decoration: underline !important;}
footer .subfoot address p i::after {content: var(--svg-arrow); filter: var(--filter-white); display: inline; margin-left: 12px; transition: all 0.5s;}
footer .subfoot address p i:has(a:hover)::after {margin-left: 18px;}

/* Mutaties */
footer .subfoot a:hover {color: var(--primary-color) !important;}
footer .subfoot .logo-wrap .image:not(:first-child) img { max-width: 150px; max-height: 80px; filter: var(--filter-white);}
footer .subfoot .footer-menu.cats li:first-child a {text-transform: uppercase;}


/* Endpage */
footer .foot { font-size: 1.125rem; font-weight: 400; background: var(--tertiary-color);}

footer .foot > .container {position: relative;}
footer .foot > .container::before {content: ''; display: block; width: 100%; height: 1px; background: var(--grey2); }

footer .foot ul {margin-left: var(--space-lg);}
footer .foot ul li {}
footer .foot ul li a {font-size: 1.125rem; text-decoration: none;}
footer .foot .lr-logo {position: relative; display: flex; align-items: center;}
footer .foot .lr-logo img {transition: all 0.5s;}
footer .foot .lr-logo img.basic {opacity: 1;}
footer .foot .lr-logo img.hover {position: absolute; left: 0; z-index: 2; opacity: 0; }
footer .foot .lr-logo:hover img.basic {opacity: 0;}
footer .foot .lr-logo:hover img.hover {opacity: 1;}

/* ============================================
		MOBIEL
=============================================*/

/* --------------------------------------- */
@media only screen and (max-width: 1499px) {

    /* Algemene elementen */


    /* Topbar */

    /* Navigatie */
    .container-fluid.navigatie .mainmenu #navbarNav .nav {gap: 0 var(--space-md);}
    .search-bar .form-group::after {right: 15px;}

    .container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .mega-menu > .container > .row > .col-3::before { left: calc(0px - var(--space-md)); }

    /* Content */
    .block.list.main-banner-block .item .content h1 {font-size: 3.125rem;}
    .small-product-slider .item .content hgroup::after {left: 65%;}

    .item.promo {padding: var(--space-sm);}

    /* Footer */
    footer .subfoot {padding-top: 200px;}
    
}

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {

    h2 {font-size: 1.875rem;}

    .container-fluid.page-content > .row.breadcrumbs {margin-bottom: var(--space-sm);}
    
    /* SLIDER/BANNER */
    .block.list.main-banner .item figure::before { inset: 5% 0 0 50%; }

    /* Content */
    .block.list.main-banner-block .item .content {flex-wrap: wrap; gap: 24px; align-content: flex-end;}
    .block.list.main-banner-block .item .content h1 {font-size: 2.75rem; bottom: 88px;}

    :is(.block.list.main-banner-side-block .item .content, .small-product-slider .item .content) {padding: var(--space-sm);}

    .footer-help .help-container address p i {width: 100%;}

    /* Footer */
    footer .subfoot .logo-wrap {display: flex; justify-content: space-between; margin-bottom: var(--space-lg);}
    footer .subfoot .logo-wrap p {flex: 1; text-align: right; padding-right: var(--space-sm); margin: 0;}
    footer .subfoot .logo-wrap .image:has(figcaption) {display: flex; align-items: flex-end;}

}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {

    /* Topbar */
    .topbar .container > .row {flex-direction: column-reverse;}
    .container-fluid.topbar .top-right {margin-bottom: 6px;}
    .container-fluid.topbar :is(.top-left, .top-right) {padding: 0;}

    /* Navigatie */
    .container-fluid.navigatie .mainmenu {justify-content: flex-end;}
    .container-fluid.navigatie .nav-top .nav-top-menu {}
    .container-fluid.navigatie .nav-top .nav-top-menu .navbar-toggler {display: inline; color: var(--white); transition: all 0.5s; }
    .container-fluid.navigatie .nav-top .nav-top-menu .navbar-toggler:hover {color: var(--primary-color);}
    
    header .search-bar {padding-top: 12px;}

    /* Mobiel menu */
    .modal.fixed-left {}
    .modal.fixed-left .menu-content {}
    .modal.fixed-left .menu-content nav {}
    .modal.fixed-left .menu-content nav ul {margin: 0; padding: 0;}
    .modal.fixed-left .menu-content nav ul .item { padding: 15px; font-weight: 500; flex-grow: 1; text-decoration: none; color: var(--primary-color) !important; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between;}
    .modal.fixed-left .menu-content nav ul .item a {color: var(--primary-color) !important; text-decoration: none !important;}

    /* Content */
    .container-fluid.page-content > .row:has(.main-banner-block) {padding-top: var(--space-sm);}
    .container-fluid.page-content > .row:has(.main-banner-block) > .container > .row {gap: var(--space-sm) 0;}
    .side-blocks {display: flex; gap: var(--space-sm);}
    .small-product-slider {width: 50%; height: 100%; }
    .block.list.main-banner-side-block {width: 50%; margin-top: 0;}
    .block.list.main-banner-side-block .item {height: 100%;}
    .block.list.main-banner-side-block .item .content {display: flex; flex-direction: column; justify-content: center;}
    .block.list.main-banner-side-block .item .image {height: 100%;}
    .block.list.main-banner-side-block .item .image img {height: 100%;}

    .list-image-slider {margin-top: 24px;}
    .list-image-slider .item .image img {width: 100%; height: auto;}

    .block.html.contact {margin-top: 24px;}


    /* Footer */
    .footer-help .help-container .image {display: none;}

    footer .subfoot .location {margin-top: var(--space-xxl);}

}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {

    h1 {font-size: 3rem !important; line-height: 2.5rem !important;}
    h2 {}
    h3 {font-size: 1.5rem;}

    /* Algemene styling */
    .container.container-small {max-width: var(--container-width);}

    /* Topbar */
    .container-fluid.topbar .top-left {padding: 0;}
    .container-fluid.topbar .top-left .top-el .usp-list ul {justify-content: flex-start; flex-wrap: wrap;}
    .container-fluid.topbar .top-left .top-el .usp-list ul li {font-size: 0.875rem;}
    .container-fluid.topbar .top-right .top-el .top-contact a {font-size: 0.875rem;}

    /* Navigatie   */
    .container-fluid.navigatie .mainmenu {justify-content: center;}
    .container-fluid.navigatie .mainmenu .navbar-toggler { }

    /* Content */
    .block.list.main-banner-block .item .content {padding: var(--space-sm);}
    .block.list.main-banner-block .item .image::before {height: 60%;}
    .side-blocks {flex-wrap: wrap;}
    .small-product-slider {width: 100%; height: fit-content; }
    .small-product-slider .item .content hgroup::after {left: 35%;}
    .block.list.main-banner-side-block {width: 100%; }
    :is(.small-product-slider .item .image, .block.list.main-banner-side-block .item .image) img {width: 100%; max-height: 300px; object-fit: cover; }

    .primary-block-left::before {width: calc(var(--half-space) + calc(var(--container-width) * 0.15));}

    .block.content.bg-color {padding: var(--space-sm);}

    /* Footer */
    .footer-help .help-container {padding: var(--space-md);}
    .footer-help .help-container address {padding: 0;}

    footer .subfoot .logo-wrap .image:has(figcaption) {justify-content: flex-end;}
    footer .subfoot .logo-wrap .image figcaption {width: 40%;}
}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {

    .block.content h2 {margin-bottom: var(--space-sm);}
    
    /* Navigatie */
    .container-fluid.navigatie .nav-top .nav-top-menu {flex-wrap: wrap; gap: 12px 24px;}
    .container-fluid.navigatie .nav-top .nav-top-menu .account { width: 100%; justify-content: flex-end; }
    
    /* Content */
    .block.list.main-banner-block .item .content h1 {flex: 0 0 100%;}
    .small-product-slider .item .content hgroup::after {left: 50%;}

    .primary-block-left::before {width: calc(var(--half-space) + calc(var(--container-width) * 0.1));}

    /* Footer */
    .footer-help .help-container address { margin-top: 12px; gap: var(--space-sm) var(--space-md);}
    .footer-help .help-container address p i {width: 70%;}

    footer .subfoot .logo-wrap {align-items: flex-end;}
    footer .subfoot .logo-wrap .image:has(figcaption) {flex-direction: column;}
    footer .subfoot .logo-wrap .image figcaption {width: 75%;}
    footer .subfoot .logo-wrap .image:has(figcaption) p {padding-right: 0; margin-bottom: 12px;}

    footer .foot .footer-part {flex-direction: column-reverse;}
    footer .foot .footer-part:has(ul) {margin-bottom: 0;}
    footer .foot .footer-part ul {flex-direction: column; padding: 0; margin: 0; text-align: center;}

}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {

    h1 {font-size: 2rem !important; line-height: 1.8rem !important;}
    h2 {}
    h3 {}

    /* Topbar */
    .container-fluid.topbar::after {width: calc(100% - 24px);}
    .container-fluid.topbar :is(.top-left, .top-right) {padding: 0 12px;}

    
    .container-fluid.topbar .top-left .top-el .usp-list {display: none;}
    
    /* Navigatie */
    .container-fluid.navigatie .nav-logo {width: 50%; flex: 0 0 50%;}
    .container-fluid.navigatie .nav-sb {}
    .container-fluid.navigatie .nav-sum {width: 50%; flex: 0 0 50%;}
    
    .container-fluid.navigatie .nav-top .nav-top-menu {justify-content: flex-end; margin-top: 12px;}
    .container-fluid.navigatie .nav-top .nav-top-menu .account { flex: 0; justify-content: flex-end; width: fit-content;}
    .container-fluid.navigatie .nav-top .nav-top-menu .account span {display: none;}
    .container-fluid.navigatie .nav-top .nav-top-menu .navbar-toggler {padding-left: 0;}

    /* Content */
    .small-product-slider .item .content hgroup::after {left: 220px;}

    .list-image-slider :is(.swiper-button-next, .swiper-button-prev) {display: none;}

    .block.list.main-banner-block .item .image::before {height: 100% !important;}

    /* Footer */
    .footer-help .help-container {padding: var(--space-sm);}
    
    footer .subfoot > .container > .row {gap: 45px 0;}

    footer .subfoot h2 {font-size: 1.125rem; margin-bottom: 12px;}
    footer .subfoot .logo-wrap {margin-bottom: 0;}
    footer .subfoot .footer-menu {gap: var(--space-xs) 0;}
    footer .subfoot .footer-menu li a {font-size: 1rem;}
    footer .subfoot address a {font-size: 1rem;}
    footer .subfoot .location {margin-top: 0;}

}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {

    h3 {font-size: 1.125rem;}

    .btn {font-size: 1rem;}
    
    /* Navigatie */
    .container-fluid.navigatie .nav-logo {width: 45%; flex: 0 0 45%;}
    .container-fluid.navigatie .nav-sb {}
    .container-fluid.navigatie .nav-sum {width: 55%; flex: 0 0 55%;}

    .container-fluid.navigatie .nav-top .nav-top-menu .navbar-toggler {padding: 0;}

    /* Content */
    .block.list.main-banner-side-block .item .content {position: relative;}
    .block.list.main-banner-side-block .item .image {position: absolute; inset: 0;}
    .block.list.main-banner-side-block .item .image img {height: 100%; max-height: none;}

    /* Footer */
    footer .subfoot {padding-top: 150px;}

    footer .subfoot .logo-wrap {flex-direction: column;}
    footer .subfoot .logo-wrap .image:has(figcaption) {width: 100%; align-items: flex-start; margin-top: var(--space-xs);}
    footer .subfoot .logo-wrap .image:has(figcaption) p {text-align: start;}

}

@media only screen and (min-width:1399px) {

    .order-xxl-1 {order: 1;}
    .order-xxl-2 {order: 2;}
    .order-xxl-3 {order: 3;}
    .order-xxl-4 {order: 4;}
    .order-xxl-5 {order: 5;}
    .order-xxl-6 {order: 6;}

    .col-xxl-1 { -ms-flex: 0 0 8.33%; flex: 0 0 8.33%; max-width: 8.33%; }
    .col-xxl-2 { -ms-flex: 0 0 16.67%; flex: 0 0 16.67%; max-width: 16.67%; }
    .col-xxl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
    .col-xxl-4 { -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; }
    .col-xxl-5 { -ms-flex: 0 0 41.67%; flex: 0 0 41.67%; max-width: 41.67%; }
    .col-xxl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    .col-xxl-7 { -ms-flex: 0 0 58.33%; flex: 0 0 58.33%; max-width: 58.33%; }
    .col-xxl-8 { -ms-flex: 0 0 66.67%; flex: 0 0 66.67%; max-width: 66.67%; }
    .col-xxl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
    .col-xxl-10 { -ms-flex: 0 0 83.33%; flex: 0 0 83.33%; max-width: 83.33%; }
    .col-xxl-11 { -ms-flex: 0 0 91.67%; flex: 0 0 91.67%; max-width: 91.67%; }
    .col-xxl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

}