.mw-600 {max-width: 600px;}
.mw-650 {max-width: 650px;}


/* ============================================
		TOP
=============================================*/



/* ============================================
		NAVIGATIE
=============================================*/
.container-fluid.navigatie { top: 0; background-color: var(--secondary-color); padding-top: 0; margin-bottom: 0; }
.container-fluid.navigatie .navbar { min-height: 100px; position: relative; padding: 3rem 0 3.3rem 0; margin-bottom: 6rem; transition: all 0.3s ease-in-out; }
.container-fluid.navigatie .navbar::after { content: ''; background: var(--white); width: calc(100% - 250px); height: 2px; position: absolute; bottom: 0; right: 0; }
.container-fluid.navigatie .navbar-brand { top: 15px; margin-left: 0; max-width: 185px; transform: none; }
.container-fluid.navigatie .navbar-toggler { padding-right: 0; }

.container-fluid.navigatie.sticky .navbar { padding: 0; margin-bottom: 0; }
.container-fluid.navigatie.sticky .navbar::after { display: none; }


/* refresh */
.container-fluid.navigation { top: 0; background-color: var(--secondary-color); padding-top: 0; margin-bottom: 0; }
.container-fluid.navigation .navbar { min-height: 100px; position: relative; padding: 3rem 0 3.3rem 0; margin-bottom: 6rem; transition: all 0.3s ease-in-out; }
.container-fluid.navigation .navbar::after { content: ''; background: var(--white); width: calc(100% - 250px); height: 2px; position: absolute; bottom: 0; right: 0; }
.container-fluid.navigation .navbar-brand { top: 15px; margin-left: 0; max-width: 185px; transform: none; }
.container-fluid.navigation .navbar-toggler { padding-right: 0; }

.container-fluid.navigation .top-nav { opacity: 1; pointer-events: all;}
.container-fluid.navigation .top-nav ul {gap: 0 70px; }

.container-fluid.nanavigationv.sticky .navbar { padding: 0; margin-bottom: 0; }
.container-fluid.navigation.sticky .navbar::after { display: none; }

/* ============================================
		SLIDER/BANNER
=============================================*/
.block.html .header { display: flex; align-items: center; justify-content: flex-end; }
.block.html .header img { margin-bottom: 18px; margin-right: 30px; }
.block.html .header h1 { margin-bottom: 0; }
/* ============================================
		CONTENT
=============================================*/
.block.html.grey .NumOfVacatures { margin: auto 25px auto 0; padding-top: 3px; background-color: #ff7e27; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }

.block.html.grey { background-color: #D9D9D9; padding: 45px; margin-bottom: 0; color: var(--secondary-color); }
.block.html.grey .btn-info { display: inline-flex; align-items: center; }
.block.html.grey h2 { position: unset; margin: 0 0 25px 0; padding: 0; transform: none; color: var(--secondary-color); }
.block.html.grey p { font-size: 30px; margin-bottom: 20px; }

/* INSPIRATIEPAGINA */
.block.product.inspiration { display: flex; gap: 30px; flex-direction: row; flex-wrap: wrap; margin-bottom: 30px; }
.block.product.inspiration .grid-item:nth-child(7n+1) {max-width: calc(70% - 15px); }
.block.product.inspiration .grid-item:nth-child(7n+2) { max-width: calc(30% - 15px); } 
.block.product.inspiration .grid-item:nth-child(7n+3) {max-width: calc(50% - 15px); }
.block.product.inspiration .grid-item:nth-child(7n+4) { max-width: calc(50% - 15px); }
.block.product.inspiration .grid-item:nth-child(7n+5) {max-width: calc(30% - 15px); }
.block.product.inspiration .grid-item:nth-child(7n+6) { max-width: calc(70% - 15px); }
.block.product.inspiration .item { position: relative; border: none; }
.block.product.inspiration .item img { height: 465px; }

/* INSPIRATIE DOORKLIK */
.block.product.inspiration .listitem > .row { margin-bottom: 3rem; }
.block.product.inspiration .listitem .banner a { pointer-events: none; }
.block.product.inspiration .listitem .banner img { max-height: 720px; }
.block.product.inspiration .listitem .intro { position: sticky; top: 100px; height: fit-content; }
.block.product.inspiration .listitem .intro h1 { margin-bottom: 0; font-size-adjust: 0.5; }
.block.product.inspiration .listitem .intro ul { padding-left: 0; margin-top: 50px; }
.block.product.inspiration .listitem .intro ul li { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; }
.block.product.inspiration .listitem .intro ul li::before { display: none; }
.block.product.inspiration .listitem .intro ul li p { margin-bottom: 0; }
.block.product.inspiration .listitem .image { margin-bottom: 30px; position: relative; z-index: 1; }
.block.product.inspiration .listitem .image img { -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; }
.block.product.inspiration .listitem .image:hover img { -moz-transform: scale(1.08); -webkit-transform: scale(1.08); transform: scale(1.08); }
.block.product.inspiration .listitem .sticky { position: sticky; top: 175px; margin: 75px 12px 75px -13px; height: fit-content; padding: 0 6rem; }
body:has(.block.product.inspiration .listitem) .block.product.inspiration.swiper { padding-bottom: 0; margin-bottom: 0; display: block; }
body:has(.block.product.inspiration .listitem) .block.product.inspiration.swiper .swiper-button-next { margin-right: 0; position: relative; }
body:has(.block.product.inspiration .listitem) .block.product.inspiration.swiper .swiper-button-prev { margin-right: 0; position: relative; margin-right: 25px; }

.block.product.inspiration .listitem .quote p { position: relative; font-style: italic; }
.block.product.inspiration .listitem .quote p::before { content: "\201C"; display: inline; }
.block.product.inspiration .listitem .quote p::after { content: "\201D"; display: inline; }

/* CONTACTBLOK - Doorklik inspiratie */
.block.html.contact-bar .image { position: relative; z-index: 1; }
.block.html.contact-bar .border { margin-left: -12px; margin-right: 12px; }
.block.html.contact-bar .content h3 { margin: 0; }
.block.html.contact-bar .contact-links { display: flex; margin-top: 30px; }
.block.html.contact-bar .contact-links > div { margin-right: 30px; }
.block.html.contact-bar .contact-links i { margin-right: 15px; }
.block.html.contact-bar .contact-links a { color: var(--white); text-decoration: none; }

/* VIDEO VERVOLGPAGINA'S */
.block.html.home-video { position: relative; }
.block.html.home-video .video-wrap { position: relative; padding-bottom: 40%; overflow: hidden; }
.block.html.home-video .video-wrap::after { content: ''; background: linear-gradient(0deg, var(--black) 3.8%, rgba(0, 0, 0, 0.803824) 16.76%, rgba(0, 0, 0, 0.32) 29.21%, rgba(0, 0, 0, 0.1) 42.17%, rgba(0, 0, 0, 0) 53.63%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; }
.block.html.home-video .video-wrap > iframe { position: absolute; max-width: none; width: 100vw; min-height: 150%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.block.html.home-video .content-wrap { position: absolute; bottom: 0; right: 0; padding-left: 50px; margin: 30px; }
.block.html.home-video .content-wrap h2 { margin: 0; }

/* SOORTEN DEUREN */
.block.list.variety { row-gap: 15px; }
.block.list.variety .item h4 { font-size: 1.1rem; }
.block.list.variety .item .image { border: 2px solid var(--white); display: flex; justify-content: center; align-items: center; padding: 0 45px; opacity: 75%; }
.block.list.variety .item .image img { filter: brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(0%) hue-rotate(353deg) brightness(104%) contrast(102%); }

/* WERKWIJZE STAPPEN */
.block.list.steps { margin-top: 65px; }
.block.list.steps article {  }
.block.list.steps .item { background: var(--primary-color); height: 100%; padding: 30px; }
.block.list.steps .item .number { background-color: var(--secondary-color); width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -65px; margin-bottom: 30px; }
.block.list.steps .item .number span { width: 85px; height: 85px; border: 2px solid var(--white); display: flex; justify-content: center; align-items: center; font-size: 3rem; }
.block.list.steps .item .content {  }
.block.list.steps .item .content h4 { line-height: 1.6; margin: 0 0 20px 0; min-height: 80px; }

/* PRODUCTEN SLIDER - Deuren */
.block.product.showmodels.swiper::after { content: ''; background: linear-gradient(270deg, var(--secondary-color) 1.49%, rgba(66, 63, 60, 0.803824) 12.06%, rgba(66, 63, 60, 0.32) 22.21%, rgba(66, 63, 60, 0.1) 32.78%, rgba(66, 63, 60, 0) 42.13%); width: 30%; height: 100%; position: absolute; right: 0; bottom: 0; z-index: 1; pointer-events: none; }

/* USP LIJST */
.block.list.usp-list .item { margin-bottom: 20px; }
.block.list.usp-list p { display: flex; align-items: center; }
.block.list.usp-list p::before { content: '\f00c'; font-family: var(--font-awesome); width: 30px; height: 30px; margin-right: 15px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border: 1px solid var(--white); }

/* VACATURE USP */
.block.list.usp-vac { margin-top: 30px; }
.block.list.usp-vac p { align-items: start; display: flex; align-items: center; text-wrap: balance; margin-bottom: 30px; }
.block.list.usp-vac p::before { content: '\f00c'; font-family: var(--font-awesome); width: 30px; height: 30px; margin-right: 30px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border: 1px solid var(--white); }

/* VACATURES */
.block.product.vacancies article { margin-bottom: 50px; }
.block.product.vacancies .item { overflow: hidden; margin: 0 15px; border: none; }
.block.product.vacancies .item > a { position: relative; color: var(--white); text-decoration: none; display: block; box-shadow: 0 0 20px rgb(84 79 76 / 50%); }
.block.product.vacancies .item .img-wrap { position: relative; overflow: hidden; height: 100%; }
.block.product.vacancies .item .img-wrap img { width: 100%; transition: transform .3s; height: 100%; }
.block.product.vacancies .item .img-wrap::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.9) 100%); opacity: .6; transition: opacity .3s; }
.block.product.vacancies .item .text-contain { position: absolute; top: 0; left: 0; padding: 30px; height: 100%; width: 100%; }
.block.product.vacancies .item .content-wrap { border: 2px solid transparent; padding: 30px; height: 100%; }
.block.product.vacancies .item .content-wrap .btn { width: fit-content; transition: all 0.5s ease-in-out; transform: translateY(300%); }
.block.product.vacancies .item .content-wrap { display: flex; flex-direction: column; justify-content: end; transition: all 0.3s ease-in-out; overflow: hidden; }
.block.product.vacancies .item .content-wrap h3 { font-size: 2rem; transition: all 0.3s ease-in-out; }
.block.product.vacancies .item:hover .content-wrap { border: 2px solid var(--white); padding: 30px; }
.block.product.vacancies .item:hover .content-wrap h3 { opacity: 0; }
.block.product.vacancies .item:hover .content-wrap .btn { transform: translateY(0); }
.block.product.vacancies .item .content-wrap h3 { hyphens: auto; transition: all 0.3s ease-in-out; transform: translateY(50px); }

/* OPEN SOLLICITATIE */
.block.product.vacancies .item.opensollicitatie { border: 2px solid var(--white); padding: 60px; }
.block.product.vacancies .item.opensollicitatie .text-contain { position: relative; padding: 0; }
.block.product.vacancies .item.opensollicitatie .content-wrap { padding: 0; border: unset; }
.block.product.vacancies .item.opensollicitatie:hover .content-wrap { border: unset; }
.block.product.vacancies .item.opensollicitatie .content-wrap h3 { transform: unset; }
.block.product.vacancies .item.opensollicitatie .content-wrap:hover h3 { opacity: 1; }
.block.product.vacancies .item.opensollicitatie .content-wrap .btn { transform: unset; }
.block.product.vacancies .item.opensollicitatie .content-wrap:hover .btn { transform: unset; }

.block.product.vacancies .modal .modal-header { padding: 30px; }
.block.product.vacancies .modal .modal-header h4 { color: var(--white); line-height: 1.1; }
.block.product.vacancies .modal .modal-header .btn-close { filter: invert(1); opacity: 1; }
.block.product.vacancies .modal .modal-content { background-color: var(--primary-color); color: var(--white); border-radius: unset; }
.block.product.vacancies .modal .modal-content .modal-body { padding: 30px; }
.block.product.vacancies .modal .modal-content .block.content { display: none; }
.block.product.vacancies .modal .modal-content .block.form .form-group { margin-bottom: 15px; }
.block.product.vacancies .modal .modal-content .block.form .form-group .form-control { background: transparent; border: 1px solid var(--white); border-radius: unset; padding: 10px 30px; color: var(--white); position: relative; }
.block.product.vacancies .modal .modal-content .block.form .form-group .form-control::placeholder { color: var(--white); }
.block.product.vacancies .modal .modal-content .block.form .form-group.hidden { display: none; }

.block.product.vacancies .modal .modal-content input[type=file] { min-height: 150px; padding: 60px 30px 30px 30px !important; }
.block.product.vacancies .modal .modal-content input[type=file]:before { top: 30px; }

.block.html.video:has(iframe) { position: relative; }
.block.html.video:has(iframe) iframe { aspect-ratio: 640/360; width: 100%; height: auto; }

/* vacancies DOORKLIK */
.block.product.vacancies .listitem > .row { margin-bottom: 30px; }
.block.product.vacancies .listitem .impression { padding-top: 3rem; padding-bottom: 3rem; }
.block.product.vacancies .listitem .impression > div:nth-child(n+4) { display: none; }

/* SOLLICITATIEFORMULIER */
.block.product.vacancies .listitem .sollicitatieform { background: var(--primary-color); padding: 50px; margin-top: 0; margin-bottom: -50px; }
.block.product.vacancies .listitem .sollicitatieform h2 { color: var(--white); }
.block.product.vacancies .listitem .sollicitatieform .block.form form { position: relative; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group { margin-bottom: 20px; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group textarea { height: 100px; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group .form-control { background: transparent; border: 1px solid var(--white); padding: 10px 30px; color: var(--white); }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group .form-control::placeholder { color: var(--white); }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(5) { width: calc(30% - 15px); order: 1; float: left; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(6) { width: calc(30% - 15px); order: 2; float: left; margin-left: 15px; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(7) { width: calc(60% - 15px); order: 4; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(8) { width: calc(60% - 15px); order: 5; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) { width: calc(40% - 15px); order: 3; position: absolute; right: 0; top: 0; height: 100%; height: calc(100% - 67px); }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(10) { width: calc(60% - 15px); }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(12) { order: 6; margin-bottom: 0; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) .row { height: 100%; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) .form-control { height: 100%; padding: 140px 30px 80px 30px; position: relative; }
.block.product.vacancies .listitem .sollicitatieform .block.form .form-group.hidden { display: none; }
input[type=file] { display: flex; justify-content: center; align-items: center; }
input[type=file]:before { content: "CV uploaden (max 5MB)"; font-size: 1.2rem; font-weight: 500; margin-bottom: 20px; position: absolute; top: 100px; left: 30px; }
input[type=file]:after { content: '\e09a'; font-family: var(--font-awesome); margin-top: -37px; color: var(--white); font-size: 2rem; font-weight: 300; }
input[type=file]::file-selector-button { color: var(--white); background: var(--primary-color); border: 1px solid var(--white) !important; margin-top: 5px; margin-left: 50px; }
input[type=file]:hover::file-selector-button { background: var(--white) !important; color: var(--primary-color) !important; }
.block.product.vacancies .listitem .sollicitatieform .form-group .form-control { border-radius: 0; }
.block.product.vacancies .listitem .sollicitatieform .form-control { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }
.block.product.vacancies .listitem .sollicitatieform .btn.btn-default {  }

.block.html.sbb-logo { position: absolute; bottom: -65px; right: 65px; } 
.block.html.sbb-logo img { max-width: 135px; }

/* CONTACTPAGINA */
.block.html.contact-details { font-weight: 300; }
.block.html.contact-details .contact-links i { color: var(--white); margin-right: 15px; }
.block.html.contact-details .company-name strong { font-weight: 600; }
.block.html.contact-details .address { font-weight: 200; margin-bottom: 20px; }
.block.html.contact-details .contact-links { margin-bottom: 20px; }
.block.html.contact-details a { text-decoration: none; color: var(--white); } 
.block.html.contact-details a:hover { text-decoration: underline; }

.block.form.color-block { padding: 45px; background-color: var(--primary-color); position: relative; z-index: 1; }
.block.form.color-block h2 { margin: 0; } 
.block.form.color-block h3 { margin-top: 0; }
.block.form.color-block .form-control { background-color: transparent; border-radius: unset; margin-bottom: 15px; color: var(--white); border-color: var(--white); }
.block.form.color-block .form-control::placeholder { color: var(--white); }

/* Sitemap */
.block.sitemap a { text-decoration: none; color: var(--text-color); }
.block.sitemap a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Essentials pagina */
.ps-price-col {padding-left: 90px;}

.block.product.cards {gap: 24px 0;}
.block.product.cards .item { position: relative; border: unset; }
.block.product.cards .item figure {}
.block.product.cards .item figure::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 75%; background: linear-gradient(0deg, rgba(66, 63, 60, 0.8) 10.48%, rgba(66, 63, 60, 0.803824) 26.4%, rgba(66, 63, 60, 0.32) 41.72%, rgba(66, 63, 60, 0.1) 57.65%, rgba(66, 63, 60, 0) 71.74%); z-index: 2; }
.block.product.cards .item figure img { width: 100%; }
.block.product.cards .item figure figcaption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; z-index: 3; }
.block.product.cards .item figure figcaption h3 { font-size: 1.5rem; text-align: end; display: flex; justify-content: flex-end; align-items: baseline; gap: 24px; margin: 0; }
.block.product.cards .item figure figcaption h3::after { --size: 44px; content: var(--arrow-right); font-size: 24px; font-family: var(--font-awesome); display: inline-flex; justify-content: center; align-items: center; flex: 0 0 var(--size); width: var(--size); height: var(--size); border: 1px solid var(--white); }

.block.html.contact-bar-grey { padding: 50px; background: var(--primary-color); display: flex; justify-content: space-between; align-items: flex-end; }
.block.html.contact-bar-grey h2 { font-size: 2.5rem; max-width: 500px; margin: 0; }
.block.html.contact-bar-grey .btn {}

/* ====== Pagina's: Essentials producten ====== */

.block.list.swiper.single-slide { position: relative; }
.block.list.swiper.single-slide figure {position: relative;}
.block.list.swiper.single-slide figure a {}
.block.list.swiper.single-slide figure a::before {content: var(--zoom); font-family: var(--font-awesome);font-size: 3rem; color: var(--white); display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; width: 100%; height: 100%; background: rgb(from var(--primary-color) r g b / 0.8); opacity: 0; transition: all 0.5s;}
.block.list.swiper.single-slide figure a img {}

.block.list.swiper.single-slide .swiper-wrapper { }
.block.list.swiper.single-slide .swiper-slide { margin: 0; }
.block.list.swiper.single-slide .swiper-slide a { display: block; }
.block.list.swiper.single-slide .swiper-slide a img { width: 100%; height: auto; object-fit: cover; display: block; }
.block.list.swiper.single-slide .swiper-nav { position: absolute; bottom: 15px; right: 15px; display: flex; gap: 5px; z-index: 2; }
.block.list.swiper.single-slide .swiper-nav :is(.swiper-button-prev, .swiper-button-next) { position: relative; top: unset; left: unset; right: unset; margin: 0; width: 45px; height: 45px; background: transparent; border: 1px solid var(--white); color: var(--white); display: flex; justify-content: center; align-items: center; font-size: 0.9rem; cursor: pointer; transition: all 0.5s; }
.block.list.swiper.single-slide .swiper-nav .swiper-button-prev::before { content: var(--arrow-left);  font-family: var(--font-awesome); font-weight: 400; }
.block.list.swiper.single-slide .swiper-nav .swiper-button-next::before { content: var(--arrow-right); font-family: var(--font-awesome); font-weight: 400; }

/* Hover */
.block.list.swiper.single-slide figure a:is(:hover, :focus-visible)::before {opacity: 1;}
.block.list.swiper.single-slide .swiper-nav :is(.swiper-button-prev, .swiper-button-next):is(:hover, :focus-visible) { background: var(--primary-color);}

/* Header tekst */
.block.html.essentials { margin-bottom: 40px;}
.block.html.essentials .header {align-items: start;}
.block.html.essentials .header hgroup {margin-bottom: 40px;}
.block.html.essentials .header hgroup h1 { font-size: clamp(2.8rem, 4vw + 1rem, 5rem); }
.block.html.essentials .header hgroup p {font-style: italic;}

/* Prijsblok */
.block.html.price-block { background: linear-gradient(to right, transparent 0%, transparent 30px, var(--primary-color) 30px); display: flex; align-items: center; padding: 30px 45px 30px 0; margin-top: 60px; gap: 0; }
.block.html.price-block .price {font-size: 1.75rem; background: var(--secondary-color); outline: 2px solid var(--white) !important; outline-offset: -8px; padding: 35px 30px; display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.block.html.price-block .price span {font-family: var(--primary-font); text-transform: uppercase; line-height: 1;}
.block.html.price-block .price span:first-child {  }
.block.html.price-block .price #amount { }
.block.html.price-block .price sub { display: inline; font-size: 0.85rem; font-style: italic; color: var(--white); bottom: 0; }
.block.html.price-block .content { font-family: var(--primary-font); font-size: 1.3rem; font-weight: 400; text-transform: uppercase; text-wrap: balance; margin: 0; line-height: 1.3;flex: 1; padding: 0 45px; }
.block.html.price-block .btn.btn-secondary { flex-shrink: 0; width: 55px; height: 55px; padding: 0; display: flex; justify-content: center; align-items: center; border: 2px solid var(--white); background: transparent; }
.block.html.price-block .btn.btn-secondary::after { content: var(--arrow-right); font-family: var(--font-awesome); font-weight: 300; margin: 0; font-size: 1.1rem; }

/* Hover */
.block.html.price-block .btn.btn-secondary:is(:hover, :focus-visible) { background-color: var(--white); color: var(--secondary-color); }


/* Projecten */
.block.product.cards.projects {}
.block.product.cards.projects .item {  }
.block.product.cards.projects .item figure {}
.block.product.cards.projects .item figure::before {opacity: 0; transition: all 0.5s; }
.block.product.cards.projects .item figure img { }
.block.product.cards.projects .item figure figcaption { opacity: 0; transition: all 0.5s; }
.block.product.cards.projects .item figure figcaption h3 { }
.block.product.cards.projects .item figure figcaption h3::after { }

.block.product.cards.projects a:is(:hover,:focus-within) .item figure::before {opacity: 1;}
.block.product.cards.projects a:is(:hover,:focus-within) .item figure figcaption {opacity: 1;}

.block.product.cards.projects.swiper {}
.block.product.cards.projects.swiper .swiper-nav {padding: 0; display: flex; justify-content: end; align-items: end; gap: 12px;}
.block.product.cards.projects.swiper .swiper-nav .swiper-button-next {margin-right: 0;}
.block.product.cards.projects.swiper .swiper-nav .swiper-button-prev {}

.block.product.cards.projects.swiper .swiper-nav .swiper-button-prev::before { content: var(--arrow-left);  font-family: var(--font-awesome); font-weight: 400; }
.block.product.cards.projects.swiper .swiper-nav .swiper-button-next::before { content: var(--arrow-right); font-family: var(--font-awesome); font-weight: 400; }

/* essential-usps */
.block.list.essential-usps {display: flex; flex-direction: column; gap: 24px; margin-top: 24px;}
.block.list.essential-usps figure {display: flex; align-items: center; gap: 35px;}
.block.list.essential-usps figure img {object-fit: contain; filter: var(--filter-white); width: 70px; height: 70px; padding: 12px; border: 1px solid var(--white);}
.block.list.essential-usps figure figcaption {}
.block.list.essential-usps figure figcaption h3 {font-size: 1.5625rem; margin: 0;}

/* Surfaces */
.block.list.surfaces {gap: 24px 0;}
.block.list.surfaces figure {background: var(--primary-color); height: 100%;}
.block.list.surfaces figure img { display: block; margin: 0 auto; width: 100%;}
.block.list.surfaces figure figcaption {padding: 0 24px 40px;}
.block.list.surfaces figure figcaption h3 {font-size: 1.4rem; margin: 30px 0 12px;}
.block.list.surfaces figure figcaption p {font-size: 1.0625rem; margin: 0;}

.no-btn-bg .btn {background: transparent;}
.no-btn-bg .btn.btn-primary {border-color: transparent;}

p:has(.btn + .btn) { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 24px;}

.text-sm-center p:has(.btn + .btn) {justify-content: center;}

/* Color block */
.block.product.color-blocks {display: flex; justify-content: center; gap: 0 24px; padding: 0 160px;}
.block.product.color-blocks .item {flex: 0 0 210px; border: unset;}
.block.product.color-blocks .item .color-block {width: 210px; height: auto; aspect-ratio: 1/1; border: 1px solid var(--primary-color);}
.block.product.color-blocks .item .content {padding: 0;}
.block.product.color-blocks .item .content h3 {font-size: 1.125rem; margin: 12px 0; }
.block.product.color-blocks .item .content p {font-size: 1.0625rem; }

/* comparison-table */
.block.product.comparison-table { background-color: var(--primary-color); padding: 24px;}
.block.product.comparison-table .table-wrap { display: flex; gap: 12px;}

.block.product.comparison-table .labels-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 160px; flex-shrink: 0; }
.block.product.comparison-table .labels-col .col-header { padding: 20px; text-transform: uppercase; font-family: var(--primary-font); font-size: 1.1rem; letter-spacing: 0.05em; margin-bottom: 12px; &::after {content: 'Labels'; color: transparent;} }
.block.product.comparison-table .labels-col .col { padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 160px; flex-shrink: 0; background: var(--secondary-color);}
.block.product.comparison-table .labels-col .label { display: flex; align-items: center; padding: 15px 20px; font-style: italic;}

.block.product.comparison-table .product-col { display: flex; flex-direction: column; flex: 1; margin-left: -2px;}
.block.product.comparison-table .product-col .col-header { padding: 20px; text-transform: uppercase; font-family: var(--primary-font); font-size: 1.1rem; letter-spacing: 0.05em; margin-bottom: 12px; background: var(--secondary-color);}
.block.product.comparison-table .product-col .col {padding: 12px; background: var(--secondary-color);}
.block.product.comparison-table .product-col .cell { padding: 15px 20px; flex: 1; display: flex; align-items: center;}

.block.product.comparison-table .product-col.featured { border-color: var(--white); z-index: 1; }
.block.product.comparison-table .product-col.featured .col-header { outline: 2px solid var(--white) !important; outline-offset: -12px; }
.block.product.comparison-table .product-col.featured .col { outline: 2px solid var(--white) !important; outline-offset: -12px; }

.block.product.comparison-table .product-col.featured .cell {}
.block.product.comparison-table .product-col.featured .cell.last { font-weight: 700; }

/* Icon list */
.block.list.icon-list {display: flex; flex-wrap: wrap; gap: 50px;}
.block.list.icon-list .item { display: inline-block; max-width: calc(50% - 25px); background: var(--primary-color); padding: 0 35px; }
.block.list.icon-list .item figure { width: fit-content; background-color: var(--secondary-color); outline: 2px solid var(--white) !important; outline-offset: -8px; transform: translateY(-25px);}
.block.list.icon-list .item figure img {padding: 24px;}
.block.list.icon-list .item .content {}
.block.list.icon-list .item .content h3 {font-size: 1.5rem; margin-bottom: 20px;}
.block.list.icon-list .item .content .text {}

.block.html.icon-list-image img {width: 100%;}

.big-h2 h2 { font-size: clamp(2rem, 2.5vw + 1rem, 3.4375rem); }

/* ====== Formulier: select (alle pagina's) ====== */
.block.form form .form-group .undertext { display: inline-block; margin-bottom: 6px;}
.block.form form .form-group:has(select) { position: relative; }
.block.form form .form-group:has(select)::after { content: '\f078'; font-family: var(--font-awesome); font-size: 1rem; line-height: 1; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); pointer-events: none; }
.block.form form .form-group select.form-control { padding-right: 50px; cursor: pointer; text-overflow: ellipsis; }
.block.form form .form-group select.form-control option { color: var(--text-color); background-color: var(--white); }

/* ====== Formulier: color-block ====== */
.block.form.color-block .form-group:has(select) { margin-bottom: 15px; }
.block.form.color-block .form-group:has(select) .form-control { margin-bottom: 0; }
.block.form.color-block .form-group:has(select)::after { color: var(--white); }
.block.form form .form-group select.form-control option { color: var(--white); background-color: var(--dark); }

/* ===================== ACCORDION ===================== */
.block.list.accordion .accordion-item{ border: 1px solid var(--white); color: var(--white); margin-bottom: 10px; border-radius: 0; background-color: transparent; }
.block.list.accordion .accordion-item h3{ margin-top: 0; font-weight: 300; }
.block.list.accordion .accordion-item h3 .accordion-button{ font-size: 1.1rem; font-weight: 600; font-style: normal; color: var(--white); line-height: 1.5; background: transparent; filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(593%) hue-rotate(129deg) brightness(116%) contrast(100%);}
.block.list.accordion .accordion-item h3 .accordion-button:focus{ border-color: transparent !important; outline: 0 !important; box-shadow: none !important; }
.block.list.accordion .accordion-item h3 .accordion-button:not(.collapsed){ background-color: transparent  !important; box-shadow: 0 !important; }



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



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


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

	.block.html.price-block {flex-wrap: wrap; justify-content: space-between; gap: 24px 0;}
	.block.html.price-block .content {flex: 0 0 calc(100% - 55px);}

	.block.product.comparison-table .labels-col .label {font-size: 0.875rem;}
	.block.product.comparison-table .product-col .cell {font-size: 0.875rem;}

	.block.list.icon-list {gap: 36px 24px;}
	.block.list.icon-list .item {max-width: calc(50% - 12px); padding: 0 24px;}
	.block.list.icon-list .item .content h3 {margin-top: 0;}

}

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

	.block.list.icon-list .item {max-width: 100%;}

	.block.product.comparison-table .labels-col {display: none;}

}

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

	.ps-price-col {padding-left: 40px;}

	.block.product.vacancies .item .text-contain { padding: 15px; }
	.block.product.vacancies .item .content-wrap { padding: 15px; }
	.block.product.vacancies .item:hover .content-wrap { padding: 15px; }
	.block.product.vacancies .item .content-wrap h3 { font-size: 1.5rem; }
	.block.product.vacancies .item.opensollicitatie { padding: 30px; }
	
	.block.list.variety .item { height: 100%; display: flex; flex-direction: column; }
	.block.list.variety .item .content { flex: 1; }

	.block.product.color-blocks {padding: 0;}
	.block.product.color-blocks .item {flex: 1;}
	.block.product.color-blocks .item .color-block {width: 100%;}
	
}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {
	
	.ps-price-col { margin-bottom: 24px; padding-left: 12px;}
	
	.block.product.inspiration .grid-item:nth-child(7n+1) { max-width: calc(50% - 15px); }
	.block.product.inspiration .grid-item:nth-child(7n+2) { max-width: calc(50% - 15px); }
	.block.product.inspiration .grid-item:nth-child(7n+5) { max-width: calc(50% - 15px); }	
	.block.product.inspiration .grid-item:nth-child(7n+6) { max-width: calc(50% - 15px); }

	.block.product.inspiration .listitem .border { margin-top: 40px; }

	.block.list.steps article { margin-bottom: 60px; }
	.block.list.steps article:nth-child(n + 3) { margin-bottom: 0; }
	.block.html.home-video .video-wrap > iframe { min-height: 55vw; }

	.block.list.swiper.single-slide .swiper-slide a img {max-height: 550px;}

	.block.html.price-block .content {flex: 1;}

	.block.list.essential-usps {margin-bottom: 24px;}

	.block.list.icon-list .item {max-width: calc(50% - 12px);}

	.block.product.cards.projects .item figure::before,
	.block.product.cards.projects .item figure figcaption {opacity: 1;}
}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {
	.container-fluid.navigatie .navbar { margin-bottom: 4rem; }
	.banner-img img { min-height: 275px; }

	.block.product.inspiration .listitem .intro { position: static; }
	.block.product.inspiration .listitem .sticky { position: static; padding: 0 calc(var(--bs-gutter-x) * .5); margin: 0; }

	.block.html.contact-bar .image { margin: 0 0 -30px 30px; }
	.block.html.contact-bar .image img { max-width: 350px; }
	.block.html.contact-bar .border { margin-left: auto; margin-right: auto; border: 2px solid var(--white) !important; padding-top: 4rem; }

	.block.product.vacancies .item { margin: 0; }

	.block.html.sbb-logo { bottom: -80px; }

	.block.product.vacancies .listitem .impression > div { margin-bottom: 30px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(5) { width: calc(50% - 8px); }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(6) { width: calc(50% - 8px); margin-left: 16px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(7) { width: 100%; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(8) { width: 100%; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) { width: unset; position: unset; height: 175px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) .form-control { height: 100%; padding: 80px 30px 10px 30px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(10) { width: 100%; }
	input[type=file]:before { top: 40px; }

	.border.contact { border-bottom: unset !important; border-top: 2px solid var(--white) !important; }
	.block.html.contact-details { text-align: left; }

	.block.html.contact-bar-grey {padding: 24px; gap: 24px; flex-direction: column; align-items: start;}

	.block.product.cards .item figure figcaption h3 {font-size: 1.125rem; &::after { --size: 35px; font-size: 1rem;}}
	
	.block.html.essentials .header hgroup {margin-bottom: 0;}

	.block.html.price-block .content {font-size: 1.125rem;}

	.block.product.color-blocks {flex-wrap: wrap;}
	.block.product.color-blocks .item {flex: 0 0 25%;}

	.block.product.comparison-table .table-wrap {flex-direction: column;}
}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {
	.container-fluid.navigatie .navbar { padding: 2rem 0; }
	.container-fluid.navigatie .navbar::after { width: 100%; }
	.container-fluid.navigatie .navbar-brand { max-width: 115px; }
	.block.product.inspiration .grid-item:nth-child(7n+1) { max-width: 100%; }
	.block.product.inspiration .grid-item:nth-child(7n+2) { max-width: 100%; }
	.block.product.inspiration .grid-item:nth-child(7n+3) { max-width: 100%; }
	.block.product.inspiration .grid-item:nth-child(7n+4) { max-width: 100%; }
	.block.product.inspiration .grid-item:nth-child(7n+5) { max-width: 100%; }	
	.block.product.inspiration .grid-item:nth-child(7n+6) { max-width: 100%; }

	.block.list.steps article:nth-child(n + 3) { margin-bottom: 60px; }
	.block.list.steps article:nth-child(n + 4) { margin-bottom: 0; }
	.block.list.steps .item .number { width: 50px; height: 50px; margin-top: -50px; }
	.block.list.steps .item .number span { width: 100%; height: 100%; font-size: 1.5rem; }
	.block.list.steps .item .content h4 { min-height: unset; }

	.block.html.home-video .video-wrap { padding-bottom: 70%; }

	.block.html.grey { padding: 30px; }
	.block.html.grey p { font-size: 1.1rem; }
	.webpage-col:has(.block.html.sbb-logo) { margin-bottom: 30px; }
	.block.html.sbb-logo { right: unset; left: 30px; bottom: -50px; }
	.block.html.sbb-logo img { max-width: 100px; }

	.block.list.variety { margin-bottom: 30px; }

	.block.html.contact-bar-grey h2 {font-size: 2rem;}

	.block.product.color-blocks .item {flex: 0 0 calc(50% - 12px);}

	.block.list.icon-list .item {max-width: 100%;}

	.block.product.cards.projects.swiper .swiper-nav {display: none;}

}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {
	.container-fluid.navigatie .navbar { margin-bottom: 30px; }
	.block.html .header h1 { margin-top: 13px; }
	.block.html .header img { margin-bottom: 0; }
	.block.product.inspiration .listitem > .row { margin-bottom: 30px; }
	.block.product.vacancies .listitem .sollicitatieform { padding: 30px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group .form-control { padding: 10px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) { height: 150px; }
	.block.product.vacancies .listitem .sollicitatieform .block.form .form-group:nth-child(9) .form-control { padding: 50px 10px 25px 10px; }
	input[type=file]:after { display: none; }
	input[type=file]::file-selector-button { margin-left: 0; }
	input[type=file]:before { top: 15px !important; left: 10px; }
	.block.product.vacancies .item.opensollicitatie .btn.btn-secondary { width: unset; }
	.block.product.vacancies .item.opensollicitatie .modal .modal-content .block.form .form-group .form-control { padding: 10px; }
	.block.product.vacancies .item.opensollicitatie .modal .modal-content input[type=file] { padding: 50px 10px 25px 10px !important; }

	.block.product.cards .item figure figcaption {padding: 12px;}
	.block.product.cards .item figure figcaption h3 {font-size: 1.125rem; align-items: end; &::after { --size: 30px; font-size: 0.75rem;}}

	.block.list.surfaces figure figcaption {padding: 0 24px 24px;}
	.block.list.surfaces figure figcaption h3 {font-size: 1rem;}
	.block.list.surfaces figure figcaption p {font-size: 0.875rem;}

	.block.product.comparison-table {margin-bottom: 50px;}

}

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

	.block.product.cards .item figure figcaption h3 { font-size: 1rem; justify-content: flex-start; text-align: start; &::after {display: none;}}

	.block.html.essentials .header {flex-direction: column;}

}

/* min widths */
@media only screen and (min-width: 1999px) {
	
	.ps-price-col {padding-left: 110px !important;}

}

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

	.ps-xxl-110 {padding-left: 110px;}

}