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



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



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

.container-fluid.banner {position: relative; height: fit-content; padding: 0 var(--background-spacer);}
.container-fluid.banner .image { position: relative; width: 100%; border-radius: 30px; overflow: hidden;}
.container-fluid.banner .image::before {content: ''; background: var(--gradient-background-banner); position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6;}
.container-fluid.banner .image::after {content: ''; position: absolute; inset: 0; z-index: 1; filter: var(--filter-white); background: var(--birds) no-repeat top right/170px auto; margin: 60px 20% 0 0;}
.container-fluid.banner .image img {min-height: 250px;}
.container-fluid.banner .image figcaption {}

.container-fluid.banner .content {position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; }
.container-fluid.banner .content h1 {margin-bottom: 40px;}

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

.block.product.projects .item {width: 100%;}

/* Pagina's: Projecten, Nieuws & Verhalen*/
.block.html.filters {display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 12px;}
.block.html.filters strong { font-size: 1.375rem; font-weight: 700;}
.block.html.filters .filter-body { display: flex; flex-wrap: wrap; gap: 12px;}
.block.html.filters .filter-body .filter {all: unset; position: relative; display: flex; justify-content: center; align-items: center; background: var(--gradient-primary); padding: 2px; border-radius: 22px; cursor: pointer;}
.block.html.filters .filter-body .filter span { font-weight: 400; background: var(--white); padding: 6px 24px; border-radius: 30px; transition: all 0.5s; }
.block.html.filters .filter-body .filter:nth-last-child(-n+2)  {background: var(--gradient-secondary);}

.block.html.filters .filter-body .filter.verhaal {background: var(--gradient-primary); order: 2;}
.block.html.filters .filter-body .filter.nieuws {background: var(--gradient-secondary); order: 3;}

/* Active en hover */
/* .block.html.filters .filter-body .filter:hover span, */
.block.html.filters .filter-body .filter.mixitup-control-active span { color: var(--white); background: transparent;}

/* .block.html.filters .filter-body .filter:nth-last-child(-n+2):hover span, */
.block.html.filters .filter-body .filter.mixitup-control-active:nth-last-child(-n+2) span {background: transparent;}

.block.html.filters .filter-body .filter[data-filter="all"] {background: var(--gradient-background);}
.block.html.filters .filter-body .filter[data-toggle="all"] {background: var(--gradient-background);}

/* Kaarten */
.block.product.projects > .container > .row {gap: 24px 0;}

/* Doorklik */
.block.block.product .listitem {}
.block.block.product .listitem > .row {margin-bottom: 80px;}

.block.block.product .listitem .content {position: relative;height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}
.block.block.product .listitem .content h2 {}
.block.block.product .listitem .content .text {}
.block.block.product .listitem .content .duration {margin-top: 40px;}
.block.block.product .listitem .content .duration::before {content: var(--icon-cal-time); font-family: var(--font-awesome); font-size: 1.3125rem; color: var(--white); background: var(--primary-color); border-radius: 100%; display: inline-flex; justify-content: center; align-items: center; width: 55px; height: 55px; margin-right: 18px;}
.block.block.product .listitem .content .duration strong {}
.block.block.product .listitem .content .duration span {}
.block.block.product .listitem .content .btn {margin-top: 40px;}

.block.block.product .listitem .picture {position: relative;}
.block.block.product .listitem .picture .image {}
.block.block.product .listitem .picture .image img {}

.block.block.product .listitem .picture:has(.tabs) {border-radius: unset;}
.block.block.product .listitem .picture:has(.tabs) .image {border-radius: 30px; overflow: hidden;}
.block.block.product .listitem .picture:has(.tabs) .image::before {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0.30%, rgba(24, 42, 83, 0.5) 65%); z-index: 1;}

.block.block.product .listitem .images .tabs { margin-top: 12px; padding: 35px; position: absolute; width: 100%; height: 100%; inset: 0; display: flex; flex-wrap: wrap; gap: 12px; flex-direction: column; justify-content: flex-end; pointer-events: none; z-index: 2;}
.block.block.product .listitem .images .tabs span {color: var(--white); height: fit-content; padding: 6px 25px; border-radius: 18px; }
.block.block.product .listitem .images .tabs .primary-tabs {display: flex; flex-wrap: wrap; gap: 12px 12px;}
.block.block.product .listitem .images .tabs .primary-tabs span {background: var(--gradient-primary);}
.block.block.product .listitem .images .tabs .secondary-tabs {display: flex; flex-wrap: wrap; gap: 12px 12px;}
.block.block.product .listitem .images .tabs .secondary-tabs span {background:var(--gradient-secondary);}

.block.block.product .listitem .images {position: relative;}
.block.block.product .listitem .images .image {}
.block.block.product .listitem .images .image img {width: 100%;}

.block.block.product .listitem .images .single-slider { }
.block.block.product .listitem .images .single-slider .swiper-wrapper { }

.block.block.product .listitem .images .swiper-arrow {}
.block.block.product .listitem .images .swiper-arrow.swiper-button-prev {left: -30px;}
.block.block.product .listitem .images .swiper-arrow.swiper-button-next {right: -30px;}

.block.block.product .listitem .content.quote {position: relative; padding-left: 90px; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.block.block.product .listitem .content.quote::before {content: ''; position: absolute; width: 100px; height: 70px; top: 24px; left: 24px; background: var(--quotation) no-repeat top right/100px 70px; }
.block.block.product .listitem .content.quote .text {}
.block.block.product .listitem .content.quote strong {}

.block.block.product .listitem .bg-gradient:has(.biglist) {padding: 80px;}
.block.block.product .listitem .content .text.biglist {margin-top: 50px;}
.block.block.product .listitem .content .text.biglist ul {display: flex; flex-wrap: wrap; gap: 40px 0; margin: 0; padding: 0;}
.block.block.product .listitem .content .text.biglist ul li { width: 50%; display: flex; align-items: center;}
.block.block.product .listitem .content .text.biglist ul li:nth-child(odd) {padding-right: 12px;}
.block.block.product .listitem .content .text.biglist ul li:nth-child(even) {padding-left: 12px;}
.block.block.product .listitem .content .text.biglist ul li::before {content: var(--icon-check); color: var(--white); font-size: 1.6rem; flex: 0 0 70px; margin-right: 24px; position: relative; inset: 0; display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; background: var(--gradient-primary); border-radius: 100%;   }

.block.block.product .listitem .content .mailbar { position: relative; color: var(--text-color); text-decoration: none; display: flex; flex-wrap: wrap; gap: 0 35px; width: fit-content; padding: 20px 35px; overflow: hidden; border-radius: 20px;}
.block.block.product .listitem .content .mailbar::before {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: var(--gradient-background); opacity: 0.2; transition: all 0.5s; z-index: 0;}
.block.block.product .listitem .content .mailbar strong {position: relative; z-index: 1;}
.block.block.product .listitem .content .mailbar span { position: relative; display: flex; align-items: center; gap: 12px; z-index: 1;}
.block.block.product .listitem .content .mailbar span::before {content: var(--icon-envelope); font-size: 1.125rem; font-family: var(--font-awesome); color: var(--secondary-color); transition: all 0.5s;}

.block.block.product .listitem .content .mailbar:hover::before {opacity: 0.6;}
.block.block.product .listitem .content .mailbar:hover span::before {transform: translateY(-6px);}
.block.block.product .listitem .content q { font-size: 3.125rem; position: absolute; right: 0; bottom: 0; display: flex; justify-content: flex-end; width: 100%;}

.block.block.product .listitem .text-center:has(> .btn + .btn) {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;}

/* Mutaties */
.block.block.product.news .listitem .content .duration::before {content: var(--icon-cal);}

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



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

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

	/* Content */
	.block.block.product .listitem .content q {bottom: -50px;}

}

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

	/* Content */
	.block.product.projects a {text-decoration: none;}
	.block.product.projects .item {height: 100%;}
	.block.product.projects .item .image {position: absolute; top: 0; height: 100%;}
	.block.product.projects .item .image img {height: 100%;}
	.block.product.projects .item .content {position: relative;}

	.block.block.product .listitem .content .duration {margin-top: 24px;}
	.block.block.product .listitem .content .btn {margin-top: 24px; margin-bottom: 24px;}
	.block.block.product .listitem .picture {margin: auto;}

	.block.block.product .listitem .content q {position: relative; bottom: 0;}

}

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

	/* Content */
	.block.product.projects .item {min-height: 250px;}
	.block.product.projects .item .content h3 {margin-top: 50px;}

	.block.block.product .listitem .content.quote {padding: 40px;}

	.block.block.product .listitem .bg-gradient:has(.biglist) {padding: 40px;}
	.block.block.product .listitem .content .text.biglist ul li {width: 100%; padding: 0 !important;}

	.block.block.product .listitem .content q {justify-content: center; rotate: -6deg;}

}

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

	.block.product.projects .item .content .tabs {max-width: calc(65% - 24px);}

}

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

	/* Banner */
	.container-fluid.banner .image::after {background: var(--birds) no-repeat top right/110px auto; margin: 24px 24px 0 0;}
	.container-fluid.banner .image img {min-height: 145px;}
	.container-fluid.banner .content h1 {padding: 0 12px; margin-bottom: 24px; }

	/* Content */
	.block.block.product .listitem {margin-bottom: 50px;}
	.block.block.product .listitem > .row {margin-bottom: 40px;}
	.block.block.product .listitem .picture .tabs { position: relative; padding: 0;}
	.block.block.product .listitem .images .swiper-arrow.swiper-button-prev {left: 12px;}
	.block.block.product .listitem .images .swiper-arrow.swiper-button-next {right: 12px;}
	.block.block.product .listitem .content .duration {margin-top: 0;}
	.block.block.product .listitem .content .text.biglist ul li::before { flex: 0 0 50px; width: 50px; height: 50px;}
	.block.block.product .listitem .content q {width: 70%; font-size: 2rem; margin: 20px auto;}
	
	.block.product.projects .item .content .tabs {max-width: 100%;}


	.container-fluid.content > .row:nth-child(1):has(.listitem) { margin-top: 24px; margin-bottom: 40px;}

}

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

	/* Banner */
	.container-fluid.banner .content h1 {max-width: 75%;}
	
	/* Content */
	.block.block.product .listitem .images .single-slider-nav .swiper-pagination { top: unset; bottom: 0; }
	.block.block.product .listitem .content.quote {padding: 24px;}

}