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



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



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

.container-fluid.banner {position: relative;}
.container-fluid.banner::before {content: ''; inset: 0; position: absolute; width: 100%; height: 100%; background: var(--gradient-banner); opacity: 1; z-index: 2;}
.container-fluid.banner::after {content: ''; inset: 0; position: absolute; width: 100%; height: 100%; background: var(--gradient-banner-layer-vervolg); opacity: 1; z-index: 1;}
.container-fluid.banner img { min-height: 220px;}
.container-fluid.banner .content {position: absolute; inset: 0; height: 100%; display: flex; align-items: flex-end; z-index: 3;}
.container-fluid.banner .content .text {}
.container-fluid.banner .content .text h1 {margin-bottom: 40px;} 

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

.container-fluid.content > .row:first-child:is(:not(.bg-grey),:not(.bg-dark)) {margin-top: calc(var(--row-space) / 2);}
.container-fluid.content > .row.bg-grey:is(:not(.bg-grey),:not(.bg-dark)) {padding-top: 3rem;}

.container-fluid.content > .row:first-child:has(.listitem) {margin-top: 0;}


/* Pagina's: Diensten */
.block.product.job-tabs {position: relative; width: 100%;}
.block.product.job-tabs:has(.nav-tabs) {display: flex; justify-content: flex-end;}
.block.product.job-tabs .nav-tabs { position: relative; max-width: 690px; transform: translateY(calc(-40px - calc(var(--row-space) / 2))); padding: 50px; display: flex; flex-direction: column; gap: 40px 0; border: unset; background: var(--dark); z-index: 2; box-shadow: -10px 10px 20px 0px #00000029;}
.block.product.job-tabs .nav-tabs .nav-item { padding: 0; border: unset; display: flex; align-items: center; gap: 0 20px;}
.block.product.job-tabs .nav-tabs .nav-item::before {content: ''; flex: 0 0 50px; position: relative; left: 0; font-family: var(--font-awesome); font-weight: 400; color: var(--text-color); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--primary-color); }
.block.product.job-tabs .nav-tabs .nav-item a {color: var(--white); font-weight: 400; background-color: transparent; border: none !important; padding: 0;}
.block.product.job-tabs .nav-tabs .nav-item a h3 { font-size: 1.875rem; display: flex; align-items: center; gap: 12px; &::after {content: var(--arrow-right); font-family: var(--font-awesome); color: var(--white); font-size: 1.125rem; font-weight: 400; transition: all 0.5s; } }
.block.product.job-tabs .nav-tabs .nav-item a p {font-size: 1.125rem;}

.block.product.job-tabs .nav-tabs .nav-item {
	&.renovatie::before {content: var(--house);}
	&.nieuwbouw::before {content: var(--pen);}
	&.onderhoud::before {content: var(--pen);}
	&.reparatie::before {content: var(--group);}
}

/* Mutaties */
.block.product.job-tabs .nav-tabs .nav-item a:hover h3::after {transform: translateX(6px);}

/* Doorklik */
.container-fluid.content:has( > .row .block.product.job-tabs .listitem) > .row:has(.block.product.cards.types) {display: none;}

body:has(.block.product.job-tabs .listitem) {overflow-x: hidden;}
.container-fluid.content > .row:has(.block.product.job-tabs .listitem) {background: var(--bg-color); box-shadow: none; padding-top: 0; margin-top: 0; padding-bottom: 0; margin-bottom: 0;}
.container-fluid.content > .row:has(.block.product.job-tabs .listitem) .webpage-col {display: none;}
.container-fluid.content > .row:has(.block.product.job-tabs .listitem) .webpage-col:has(.listitem) {display: flex; width: 100%; max-width: 100%; flex: 0 0 100%;}
.container-fluid.content > .row:has(.block.product.job-tabs .listitem) .webpage-col:has(.listitem) .block:not(:has(.listitem)) {display: none;}

.block.product.job-tabs .listitem {}
.block.product.job-tabs .listitem > .row {margin-bottom: var(--row-space); position: relative;}
.block.product.job-tabs .listitem > .row:first-child {padding-top: 60px; } 

.block.product.job-tabs .listitem > .row:has(.btn.back)  {margin-bottom: 0px; padding-bottom: 140px;}

.block.product.job-tabs .listitem > .row:is(.bg-grey, .bg-dark):first-child > * {z-index: 1;}
.block.product.job-tabs .listitem > .row:is(.bg-grey, .bg-dark):first-child .image {margin-bottom: -30px;}
.block.product.job-tabs .listitem > .row:is(.bg-grey, .bg-dark)::before {content: ''; position: absolute; top: 0; left: calc(0px - var(--half-space)); width: 100vw; height: 100%; z-index: 0;}

.block.product.job-tabs .listitem > .row.bg-grey:first-child::before {background: var(--grey);}
.block.product.job-tabs .listitem > .row.bg-dark:first-child::before {background: var(--dark);}

.block.product.job-tabs .listitem > .row:is(.bg-grey, .bg-dark):has(.detail-slider)::before {height: calc(100% - 30px);}

.block.product.job-tabs .listitem .content h2 {margin-bottom: 30px;}
.block.product.job-tabs .listitem .content hgroup {margin-bottom: 30px; & :is(h2,h3,p) {margin-bottom: 0;}}
.block.product.job-tabs .listitem .content .text {}
.block.product.job-tabs .listitem .content .text ul { margin-top: 30px; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.block.product.job-tabs .listitem .content .text ul li {display: inline-block; align-items: center; padding-left: calc(25px + 12px);}
.block.product.job-tabs .listitem .content .text ul li::before {content: ''; display: inline-block; background-image: var(--check); filter: var(--filter-text); background-size: contain; width: 25px; height: 20px; position: absolute; left: 0; top: 3px;}
.block.product.job-tabs .listitem .content .text ul li :is(strong, b, span)::before,
.block.product.job-tabs .listitem .content .text ul li :is(strong, b, span)::after { content: var(--check); display: inline-block;}
.block.product.job-tabs .listitem .btn.back {margin-top: 40px;}


/* Pagina's: Diensten */
.block.product.cards.types:has(.item h3) { margin-top: calc(0px - 60px - 40px);}

.block.product.cards.types {position: relative; width: 100%;}
.block.product.cards.types .item {}
.block.product.cards.types .item::before {display: none;}
.block.product.cards.types .item .image {}
.block.product.cards.types .item .image::before {background: linear-gradient(190deg, rgba(214, 85, 211, 0) 7%, rgba(154, 49, 152, 0.5) 100%); opacity: 1; height: 40%;}
.block.product.cards.types .item .image figcaption { padding: 40px; display: flex; justify-content: space-between; align-items: flex-end;}
.block.product.cards.types .item .image figcaption::after {content: var(--arrow-right); font-family: var(--font-awesome); font-weight: 300; font-size: 1.625rem; color: var(--white); transition: all 0.5s;}
.block.product.cards.types .item .image figcaption h3 {max-width: 230px;}

.block.product.cards.types a:hover .item .image img {scale: 1.05;}
.block.product.cards.types a:hover .item .image figcaption::after {transform: translateX(6px);}

/* Doorklik */
.container-fluid.content:has( > .row .block.product.cards.types .listitem) > .row:has(.block.product.job-tabs) {display: none;}
body:has(.block.product.job-tabs .listitem) {overflow-x: hidden;}

.container-fluid.content > .row:has(.block.product.cards.types .listitem) {background: var(--bg-color); box-shadow: none; padding-top: 0; margin-top: 0; padding-bottom: 0; margin-bottom: 0;}
.container-fluid.content > .row:has(.block.product.cards.types .listitem) .webpage-col {display: none;}
.container-fluid.content > .row:has(.block.product.cards.types .listitem) .webpage-col:has(.listitem) {display: flex; width: 100%; max-width: 100%; flex: 0 0 100%;}
.container-fluid.content > .row:has(.block.product.cards.types .listitem) .webpage-col:has(.listitem) .block:not(:has(.listitem)) {display: none;}

/* Pagina's: Onderhoudspakketten */
.container-fluid.content > .row:has(.block.list.plans) {margin-bottom: calc(0px - calc(var(--row-space) * 1.5)); }
.container-fluid.content > .row:has(.block.list.plans) + .row.bg-grey {padding-top: calc(var(--row-space) * 2.5);}

.block.list.plans { margin-top: 30px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: center;}
.block.list.plans .item {flex: 1; }
.block.list.plans .item .content { position: relative; display: flex; flex-direction: column; background: var(--dark); min-height: 550px; height: 100%; padding: 40px 40px 30px 40px; box-shadow: 0px 0px 20px 0px #00000022;}
.block.list.plans .item .content > h3 {margin-bottom: 30px;}
.block.list.plans .item .content hgroup {}
.block.list.plans .item .content hgroup h3 {font-size: 1.875rem;}
.block.list.plans .item .content hgroup p { font-size: 1rem; font-weight: 700; margin-bottom: 30px;}
.block.list.plans .item .content .price {}
.block.list.plans .item .content .price span {font-size: 1rem; font-weight: 400;}
.block.list.plans .item .content .price strong {font-size: 1.875rem; font-weight: 700; margin-right: 6px; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.block.list.plans .item .content .text {flex: 1;}
.block.list.plans .item .content .text ul { margin-top: 30px; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.block.list.plans .item .content .text ul li {display: inline-block; align-items: center; padding-left: calc(25px + 12px);}
.block.list.plans .item .content .text ul li::before {content: ''; display: inline-block; background-image: var(--check); filter: var(--filter-primary); background-size: contain; width: 25px; height: 20px; position: absolute; left: 0; top: 3px;}
.block.list.plans .item .content .text ul li :is(strong, b, span)::before,
.block.list.plans .item .content .text ul li :is(strong, b, span)::after { content: var(--check); display: inline-block;}
.block.list.plans .item .content .btn {width: 100%; justify-content: center; border-width: 2px; color: var(--text-color); border-color: var(--text-color); &:hover { border-color: var(--primary-color); color: var(--white);} }
.block.list.plans .item .content .btn::after {color: var(--white);}

/* Populair */
.block.list.plans .item:has(hgroup) {height: calc(100% + 75px);}
.block.list.plans .item:has(hgroup) .content {  border: 1px solid var(--green);}
.block.list.plans .item:has(hgroup) .content::before {content: var(--thumb); font-size: 1.5rem; font-weight: 400; font-family: var(--font-awesome); color: var(--white); background: var(--green); width: 50px; height: 85px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 6px; position: absolute; top: 0; right: 30px;}
.block.list.plans .item:has(hgroup) .content .btn {color: var(--white); background: var(--green); border-color: var(--green); &:hover {background: var(--primary-color);}}

/* Pagina's: Sectoren doorklik, projecten doorklik */
body:has(.listitem) {overflow-x: hidden;}
.block.product:is(.cards, .job-tabs):has(.listitem) {margin-top: 0;}

.block.product:is(.cards, .job-tabs) .listitem > .row:not(:last-child) {margin-bottom: var(--row-space);}
.block.product:is(.cards, .job-tabs) .listitem > .row:is(.bg-grey, .bg-dark) {position: relative; background-color: transparent !important;}
.block.product:is(.cards, .job-tabs) .listitem > .row:is(.bg-grey, .bg-dark)::before {content: ''; width: 100vw; height: calc(100% - 30px); position: absolute; left: calc(0px - var(--half-space)); top: 0; }
.block.product:is(.cards, .job-tabs) .listitem > .row:is(.bg-grey, .bg-dark) > * {position: relative; z-index: 2;}

.block.product:is(.cards, .job-tabs) .listitem > .row.bg-grey::before { background: var(--grey); }
.block.product:is(.cards, .job-tabs) .listitem > .row.bg-dark::before { background: var(--dark); }

.block.product.cards:not(.types) .listitem {
	position: relative;
	&::before {content: ''; font-size: 22px; font-family: var(--font-awesome); font-weight: 300; color: var(--white); width: 50px; height: 60px; background: var(--primary-color); position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; z-index: 2; }
	&.renovatie::before {content: var(--house);}
	&.nieuwbouw::before {content: var(--pen);}
	&.onderhoud::before {content: var(--pen);}
	&.reparatie::before {content: var(--group);}
}

.block.product:is(.cards, .job-tabs) .listitem .content {}
.block.product:is(.cards, .job-tabs) .listitem .content h2 {margin-bottom: 30px; text-wrap: balance;}
.block.product:is(.cards, .job-tabs) .listitem .content hgroup h2 {margin-bottom: 0;}
.block.product:is(.cards, .job-tabs) .listitem .content ul {margin: 30px 0 0 0; display: flex; flex-direction: column; gap: 24px; padding: 0;}
.block.product:is(.cards, .job-tabs) .listitem .content ul li {display: inline-block; align-items: center; padding-left: calc(25px + 12px);}
.block.product:is(.cards, .job-tabs) .listitem .content ul li::before {content: ''; filter: var(--filter-text); display: inline-block; background-image: var(--check); background-size: contain; width: 25px; height: 20px; position: absolute; left: 0; top: 3px;}

.detail-slider {position: relative;}
.detail-slider::before { content: ''; width: 100%; height: 100%; inset: 0; position: absolute; background: var(--gradient-image); pointer-events: none; opacity: 0.5; z-index: 2;}
.detail-slider .swiper-wrapper {}
.detail-slider .swiper-wrapper .swiper-slide {}
.detail-slider .swiper-wrapper .swiper-slide .image {}
.detail-slider .swiper-wrapper .swiper-slide .image img {width: 100%;}
.detail-slider .swiper-detail-nav {position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: fit-content; padding: 15px; display: flex; justify-content: space-between; align-items: flex-end;}
.detail-slider .swiper-detail-nav .swiper-bullets {padding-left: 15px; height: fit-content;}
.detail-slider .swiper-detail-nav .swiper-bullets .swiper-pagination-bullet { width: 12px; height: 12px; background: var(--white) !important; opacity: 1;}
.detail-slider .swiper-detail-nav .swiper-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background: var(--primary-color) !important;}

 .detail-slider .swiper-detail-nav .swiper-arrows {display: flex; gap: 12px;}
 .detail-slider .swiper-detail-nav .swiper-arrows .swiper-arrow {
	width: 60px; height: 60px; background-color: transparent; border: 1px solid var(--white); display: flex; justify-content: center; align-items: center; transition: all 0.5s;
	&::before {content: ''; font-family: var(--font-awesome); color: var(--white);}
	&.prev::before {content: var(--arrow-left);}
	&.next::before {content: var(--arrow-right);}
	&:is(:focus-visible,:hover) {background: var(--primary-color);}
}

.detail-slider:not(:has(.swiper-slide + .swiper-slide)) .swiper-detail-nav .swiper-arrows .swiper-arrow {display: none;}

.block.product:is(.cards, .job-tabs) .listitem .picture {}
.block.product:is(.cards, .job-tabs) .listitem .picture figure {width: calc(var(--container-width) / 12 * 5);}
.block.product:is(.cards, .job-tabs) .listitem .picture figure img {width: 100%;}

.block.product .listitem .content p:has(+ p .btn) {margin-bottom: 30px;}

.block.product:is(.cards, .job-tabs) .listitem .swiper-slide {max-width: unset; max-height: 615px;}
.block.product:is(.cards, .job-tabs) .listitem .swiper-slide img {object-position: center;  max-height: 615px;}

/* Pagina's: Projecten */
.block.html.filters {position: relative; z-index: 10;}
.block.html.filters .filter { margin-right: 15px; margin-bottom: 15px; }
.block.html.filters .filter::after { display: none; }
.block.html.filters .filter.mixitup-control-active { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white) !important; }

.block.html.filters .mobile-filters .custom-dropdown { position: relative;}
.block.html.filters .mobile-filters .custom-dropdown .selected-option { width: 100%; padding: 10px 40px 10px 20px; color: var(--white); font-weight: 600; border: 2px solid var(--white); background-color: transparent; cursor: pointer; display: block; text-align: left; position: relative; border-radius: 30px; }
.block.html.filters .mobile-filters .custom-dropdown .selected-option::after { content: var(--angler-down); font-family: var(--font-awesome); font-size: 1rem; margin-left: 10px; position: absolute; right: 15px; }
.block.html.filters .mobile-filters .custom-dropdown .selected-option:hover { background-color: var(--dark); color: var(--white); border-color: var(--white); }
.block.html.filters .mobile-filters .custom-dropdown .dropdown-options { display: none; position: absolute; top: 110%; left: 0; z-index: 3; background-color: var(--dark); padding: 0; margin: 0; list-style: none; border: 2px solid var(--white); border-radius: 30px; overflow: hidden; width: 100%; }
.block.html.filters .mobile-filters .custom-dropdown .dropdown-options .mixitup-control-active { background-color: var(--bg-color); color: var(--white); }
.block.html.filters .mobile-filters .custom-dropdown .dropdown-options li { padding: 10px 40px 10px 20px; margin: 0; font-size: 1rem; color: var(--quaternary-color); font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap; }
.block.html.filters .mobile-filters .custom-dropdown .dropdown-options li::before { display: none; }
.block.html.filters .mobile-filters .custom-dropdown .dropdown-options li:hover { background-color: var(--bg-color); color: var(--white); }
.custom-dropdown .dropdown-options { display: none; }
.custom-dropdown.open .dropdown-options { display: flex !important; flex-direction: column; z-index: 3;}

/* Pagina's: Over Jacobs */
.container-fluid.content > .row.bg-dark:has(.comp-cards) { margin-top: 0; padding-bottom: 0; background: linear-gradient(180deg,  var(--dark) 0%, var(--dark) calc(100% - 40px), var(--bg-color) calc(100% - 40px)) !important;}

.block.html.picture.big {height: 100%;}
.block.html.picture.big .image {height: 100%;}
.block.html.picture.big .image img {height: 100%;}

.block.content.big {}
.block.content.big :is(h2, hgroup h2) {text-transform: uppercase;}
.block.content.big hgroup {}
.block.content.big hgroup p { font-size: clamp(2rem, 4vw, 2.75rem); text-transform: uppercase;}

.block.list.comp-cards {gap: 24px 0; margin-top: 70px;}
.block.list.comp-cards .item { display: block; position: relative; height: 100%; background: var(--white); padding: 36px 24px; z-index: 2; box-shadow: 0px 0px 20px 0px #00000022; transition: all 0.5s;}
.block.list.comp-cards .item a {}
.block.list.comp-cards .item a::before {content: var(--arrow-right-up); font-weight: 300; font-family: var(--font-awesome); color: var(--primary-color); padding: 4px 8px; position: absolute; width: 100%; height: 100%; inset: 0; display: flex; justify-content: flex-end; align-items: flex-start; }
.block.list.comp-cards .item .image {}
.block.list.comp-cards .item .image img {}

.block.list.comp-cards .item:hover {transform: translateY(-6px);}

/* Pagina's: Over Jacobs */
.container-fluid.content > .row:has(.team) {overflow: hidden;}

.block.list.team {width: calc(var(--container-width) + var(--half-space));}
.block.list.team .item {}
.block.list.team .item .image {}
.block.list.team .item .image img { width: 100%; background: var(--bg-color); background: linear-gradient(360deg,  var(--dark) 0%, var(--dark) 90%, var(--bg-color) 90%);}
.block.list.team .item .image figcaption { margin-top: 12px;}

.block.list.team.swiper {}
.block.list.team.swiper .swiper-wrapper {}
.block.list.team.swiper .swiper-wrapper .swiper-slide {width: fit-content; max-width: 335px;}

.block.html:has(.team-nav) {position: relative; padding-top: 40px;}
.team-nav { position: relative; display: flex; justify-content: flex-end; right: 0;}

/* Pagina's: Over Jacobs */
.block.product.timeline {position: relative; display: flex; flex-direction: column; gap: 70px; margin-top: 40px; padding-top: 40px; padding-bottom: 100px; }
.block.product.timeline::before {content: ''; width: 1px; height: 100%; background: var(--dark); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.block.product.timeline .item {position: relative; display: flex; gap: 64px;}
.block.product.timeline .item .badge {padding: 12px 24px; font-size: 1.25rem; font-weight: 400; position: absolute; top: 0; left: 50%; background: var(--primary-color); border-radius: 0;  z-index: 2;}
.block.product.timeline .item .content {flex: 1 0 0; padding: 50px 0; display: flex; flex-direction: column; justify-content: center; }
.block.product.timeline .item .content h2 {margin-bottom: 24px;}
.block.product.timeline .item .content .text {padding-right: 80px;}
.block.product.timeline .item .image {flex: 1 0 0;}
.block.product.timeline .item .image img {height: 100%;}

.block.product.timeline .item:nth-child(odd) {flex-direction: row-reverse;}
.block.product.timeline .item:nth-child(even) .badge {transform: translateX(-100%);}

/* Pagina's: Contact, Lekkage of schade melden */
body:has(.block.html.maps) .container-fluid.footer-endpage {margin-top: 0; padding-top: 100px; box-shadow: none;}
body:has(.block.html.maps) .container-fluid.footer-endpage .footer .block.html.contact-bar {display: none;}

.webpage-col:has(.contact-info) h2 {margin-bottom: 30px;}

.block.html.maps {}
.block.html.maps iframe {width: 100%;}

.block.form {}
.block.form form {}
.block.form form .form-group {margin-bottom: 12px;}
.block.form form .form-group .form_field_entry { }
.block.form form .form-group .form_field_entry .form-control { color: var(--white); background: transparent; border-radius: 0px;border-image: linear-gradient(to right, var(--primary-color) 0%, var(--text-color) 100%) 1; border-width: 2px; border-style: solid; padding: 12px 12px;}
.block.form form .form-group .form_field_entry .form-control::placeholder {color: var(--off);}

.block.content.contact-info {}
.block.content.contact-info a:not(.btn) {text-decoration: none !important; color: var(--text-color); &:is(:hover,:focus-visible) {color: var(--primary-color);}}
.block.content.contact-info h3 { font-size: 20px; margin-bottom: 12px;}
.block.content.contact-info address {}
.block.content.contact-info address p { &::before {content: ''; font-family: var(--font-awesome); font-weight: 700; display: inline-block; padding-right: 12px; display: none; transition: all 0.5s;}  &:is(:hover,:focus-visible)::before {transform: translateY(-6px);} }

.block.content.contact-info address p:has([href*="tel"])::before {content: var(--tel); display: inline-block;}
.block.content.contact-info address p:has([href*="mailto"])::before {content: var(--mail); display: inline-block;}
.block.content.contact-info address p.coc::before {content: var(--briefcase); display: inline-block;}

.block.content.contact-info table {border: unset;margin-top: 0; margin-bottom: 12px;}
.block.content.contact-info table tr:not(:last-child) {border-bottom: 12px solid transparent;}
.block.content.contact-info table tr td:first-child {width: initial !important;}

.block.calendar {margin-top: 30px;}
.block.calendar .item {padding: 12px 0; border: unset; &:not(:nth-last-child(2)){border-bottom: 1px solid var(--primary-color);} }

/* Pagina's: Lekkage of schade melden */
.block.form.damageform {padding: 30px 40px; margin-top: 30px;}
.block.form.damageform > p {display: none;}
.block.form.damageform form {}
.block.form.damageform form .form-group {margin-bottom: 24px;}
.block.form.damageform form .form-group .control-label {margin-bottom: 12px; font-weight: 700;}
.block.form.damageform form .form-group .form_field_entry { }
.block.form.damageform form .form-group .form_field_entry .form-control {border-width: 2px;}

/* ===== Mutaties ===== */
.block.form.damageform form .form-group.no-title .control-label {display: none;}
.block.form.damageform form .form-group.conditions {font-size: 0.875rem; margin-top: 12px;}
.block.form.damageform form .form-group.conditions p {display: none;}
.block.form.damageform form .form-group.conditions p + div {display: flex; flex-wrap: wrap;}
.block.form.damageform form .form-group.conditions p + div > span { order: 2; flex: 1;}
.block.form.damageform form .form-group.conditions p + div > input {order: 1; flex: 0; margin-right: 6px;}
.block.form.damageform form .form-group.conditions p + div > label {order: 3; flex: 0 0 100%;}
.block.form.damageform form .form-group.conditions input {margin-left: 6px;}
.block.form.damageform form .form-group.conditions label {margin-top: 12px;}
.block.form.damageform form .form-group.conditions .undertext {display: none;}

.block.form.damageform .mod_block.button .form_field_entry{ display: flex; flex-wrap: wrap; gap: 14px;}
.block.form.damageform .mod_block.button .form_field_entry > label{ color: var(--white); position: relative; display: flex !important; align-items: center; justify-content: center; min-height:40px; min-width: 100px; padding: 14px 16px; border-radius: 0px; border-image: linear-gradient(to right, var(--primary-color) 0%, var(--text-color) 100%) 1; border-width: 2px; border-style: solid; background: transparent; cursor: pointer; user-select: none; text-align: center; font-weight: 400; transition:all 0.5s;}
.block.form.damageform .mod_block.button .form_field_entry > label:hover{transform: translateY(-3px);}

input[type="file"]::file-selector-button,
input[type="file"]:hover::file-selector-button {background: transparent !important; color: var(--white);}

/* checked state (zoals jouw voorbeeld donker) */
.block.form.damageform .mod_block.button .form_field_entry > label > input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;}
.block.form.damageform .mod_block.button .form_field_entry > label:has(> input:checked){ background: var(--gradient-text); color: var(--white);}
.block.form.damageform .mod_block.button .form_field_entry > label:has(> input:focus-visible){ outline: 3px solid rgba(63,84,99,.35); outline-offset: 2px;}

.block.form.damageform .mod_block.button:is(.option-under, .option-accessible ) .form_field_entry > label{ min-height: 40px;}

.block.form.damageform a:not(.btn){ color: var(--text-color); text-decoration: underline; text-underline-offset: 5px; transition: text-underline-offset 0.3s ease-in-out; }
.block.form.damageform a:not(.btn):hover{ text-underline-offset: 1px }

.block.form.damageform input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; width: 20px; height: 20px; min-width: 20px; opacity: 1; color-scheme: var(--primary-color);}

/* Tarieven */
.block.content.prices {}
.block.content.prices table { margin-bottom: 24px;}
.block.content.prices table tr {}
.block.content.prices table tr td:first-child {width: 50%;}
.block.content.prices table tr td {border-bottom: 1px solid #eee; padding: 8px;}

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



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


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

	/* Content */
	.block.product.job-tabs .item {height: 500px;}

}

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

	.block.product:is(.cards, .job-tabs).types .listitem > .row:is(.bg-grey, .bg-dark):first-child {padding-bottom: 0;}

	/* Content */
	.webpage-col:first-child .block.html.picture .image:has(figcaption) figcaption {bottom: 12px; padding: 24px;}

	.block.product.job-tabs .item {height: fit-content; width: 100%; max-width: 100%; flex-direction: column;}
	.block.product.job-tabs .item .image {flex: 0 0 300px;}
	.block.product.job-tabs .item .image img { width: 100%; max-height: 300px;}
	.block.product.job-tabs .item .content {padding: 40px;}
	.block.product.job-tabs .item .content .btn {margin-top: 40px;}

	.block.list.plans .item .content {padding: 24px;}

	.block.content.contact-info table tr {display: flex; flex-direction: column;}
	.block.content.contact-info table tr td:first-child {font-weight: 700;}

	.block.product.cards.types .item .image figcaption {padding: 24px;}
	.block.product.cards.types .item .image figcaption h3 {font-size: 1.25rem;}

}

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

	/* Content */
	.webpage-col:first-child .block.html.picture .image:has(figcaption) img {max-width: calc(var(--container-width) /12 * 8);}
	
	.block.list.plans {display: flex; flex-wrap: wrap; gap: 24px 0; justify-content: space-between;}
	.block.list.plans .item {width: 100%; flex: 0 0 100%;}
	.block.list.plans .item:nth-child(-n + 2) {width: calc(50% - 12px); flex: 0 0 calc(50% - 12px);}
	.block.list.plans .item .content {padding: 24px;}
	.block.list.plans .item .content :is( h3, hgroup h3) {font-size: 1.25rem !important; margin-bottom: 0 !important;}
	.block.list.plans .item .content :is( h3, hgroup p) {margin-bottom: 12px;}

	.block.list.plans .item:nth-child(-n + 2) .content {min-height: 500px; height: 100%; }
	.block.list.plans .item .content .text {padding-bottom: 24px;}
	.block.list.plans .item:last-child .content {min-height: unset;}

	.block.product:is(.cards, .job-tabs) .listitem .detail-slider {margin-top: 24px;}

	.block.product.cards.big.swiper {margin-top: 0;}
	.mobile-cards-nav {margin-bottom: 36px;}

	.block.product:is(.cards, .job-tabs) .listitem .picture figure {width: 100%;}
	.block.product:is(.cards, .job-tabs) .listitem .picture figure img {max-height: 650px;}

	body:has(.listitem) .btn.back {margin-bottom: 24px;}

	.block.list.comp-cards {margin-top: 40px; margin-bottom: 40px;}

	.block.html.picture.big .image img {width: 100%;}

	.block.product.timeline {padding-bottom: 40px;}
	.block.product.timeline::before {left: 0;}
	.block.product.timeline .item {flex-direction: column !important; padding-left: 60px; gap: 24px;}
	.block.product.timeline .item .badge { position: relative; width: fit-content; left: 0; transform: translateX(-60px) !important;}
	.block.product.timeline .item .content {padding: 0;}

	.webpage-col:has(.contact-info) {display: flex; flex-wrap: wrap;}
	.block.content.contact-info {width: 50%;}

	.block.product.job-tabs .nav-tabs { margin-top: 24px; transform: unset; width: 100%; max-width: unset;}
	.block.product.cards.types:has(.item h3) {margin-top: 12px;}
	
	.block.product.job-tabs .listitem > .row:has(.btn.back) {padding-bottom: 100px !important;}

	.block.product.cards.types .listitem .content {margin-bottom: 24px;}
	.block.product.cards.types .listitem .row:has(.btn.back) {padding-top: 50px !important; }
	.block.product.cards.types .listitem .row:has(.btn.back) {padding-top: 50px !important; }

	.block.product.cards.job-tabs .listitem .row .btn.back {margin-bottom: 50px !important;}
	.block.product.cards.job-tabs .listitem .row .btn.back {margin-bottom: 50px !important;}

	.block.product.cards .listitem[data-filter] > .row:is(.bg-grey, .bg-dark) {padding-top: 72px;}
	.container-fluid.content:has(.block.product.cards .listitem[data-filter]) .mobile-cards-nav {margin-top: 24px;}

}

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

	/* Content */
	.block.list.plans .item:nth-child(-n + 2) {width: 100%; flex: 0 0 100%;}

	.block.product.timeline .item {padding-left: 36px;}
	.block.product.timeline .item .badge {transform: translateX(-36px) !important;}

	.block.content.contact-info {width: 100%; margin-bottom: 24px;}

	.block.form.damageform form .form-group.conditions {font-size: 0.75rem;}

	/* Footer */
	body:has(.block.html.maps) .container-fluid.footer-endpage {padding-top: 75px;}

}

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

	/* Content */
	.webpage-col:first-child .block.html.picture .image:has(figcaption) img {width: 100%; max-width: unset; margin-bottom: 12px;}
	.webpage-col:first-child .block.html.picture .image:has(figcaption) figcaption {width: 100%; max-width: unset; bottom: 0;}

	.block.product.job-tabs ul {padding-right: 0; margin-bottom: 24px;}

	.container-fluid.content > .row:has(.block.list.plans) + .row:is(.bg-grey, .bg-dark) {padding-top: calc(var(--row-space) * 2);}

	.block.product.timeline .item {padding-left: 24px;}
	.block.product.timeline .item .badge {transform: translateX(-24px) !important;}

	.block.form.damageform {padding: 24px;}

	.block.product.job-tabs .nav-tabs {padding: 24px;}
	.block.product.job-tabs .nav-tabs .nav-item {flex-direction: column; align-items: flex-start; gap: 12px;}
	.block.product.job-tabs .nav-tabs .nav-item a h3 {width: 100%; justify-content: space-between;}

	.block.product:is(.cards, .job-tabs) .listitem .swiper-slide {height: 100%;}

	.block.block.product.cards .listitem[data-filter] .swiper {}
	.block.block.product.cards .listitem[data-filter] .swiper .swiper-wrapper {}
	.block.block.product.cards .listitem[data-filter] .swiper .swiper-wrapper .swiper-slide {height: auto;}
	.block.block.product.cards .listitem[data-filter] .swiper .swiper-wrapper .swiper-slide .image {height: 100%;}
	.block.block.product.cards .listitem[data-filter] .swiper .swiper-wrapper .swiper-slide .image img {height: 100%;}
 
}

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

	/* Content */
	.block.product.job-tabs .item .content {padding: 24px 12px;}
	.block.product.job-tabs .item .content h3 {margin-bottom: 24px;}

	.block.product:is(.cards, .job-tabs) .listitem > .row:is(.bg-grey, .bg-dark):first-child {padding-top: 24px; padding-bottom: 60px;}
	.block.product:is(.cards, .job-tabs) .listitem[data-filter] > .row:is(.bg-grey, .bg-dark):first-child {padding-top: 80px;}
	.block.product:is(.cards, .job-tabs) .listitem .content h2 {margin-bottom: 12px;}

	.container-fluid.content:has(> .row:is(.bg-grey, .bg-dark):last-child) + .container-fluid.footer-endpage {margin-top: 0;}

	.block.product:is(.cards, .job-tabs) .listitem .detail-slider .swiper-detail-nav .swiper-bullets {padding-left: 0;}

	.block.product.timeline .item {padding-left: 12px;}
	.block.product.timeline .item .badge {transform: translateX(-12px) !important;}

	.block.product.job-tabs .listitem .row:has(.btn.back) {padding-top: 0 !important;}
	.block.product.job-tabs .listitem .row .btn.back {margin-bottom: 30px !important;}

	.block.product.cards.types .listitem .row:has(.btn.back) {padding-top: 30px !important;}
	.block.product.cards.types .listitem .row .btn.back {margin-bottom: 70px !important;}

}

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

	.container-fluid.banner .content .text h1{font-size: 1.8rem;}
	
	.block.product:is(.cards, .job-tabs) .listitem .detail-slider .swiper-detail-nav .swiper-arrows .swiper-arrow {width: 45px; height: 45px;}
	.block.product:is(.cards, .job-tabs) .listitem > .row:not(:last-child) {margin-bottom: 0;}

	.block.product.cards.types .item .image figcaption {padding: 12px;}
	.block.product.cards.types .item .image figcaption h3 {font-size: 1rem;}
	.block.product.cards.types .item .image figcaption::after {font-size: 1.125rem;}

}

/* Min width's */
/* --------------------------------------- */
@media only screen and (min-width: 1399px) {

	.block.block.product:is(.cards, .job-tabs) .listitem > .row:has(.detail-slider) {padding-bottom: 0;}

}