@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato-regular-webfont.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato-bold-webfont.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato-black-webfont.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}


/* Body */
body {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.72;
}

.article-details [itemprop="articleBody"] > h1 {
	color: #ff00dd;
	font-size: 2.5em;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 1.4em;
}


/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Lato', sans-serif;
	font-weight: 900;
}


/* =========================================================
   OFF-CANVAS MENU
   ========================================================= */

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
	color: #ff4de7;
}


/* =========================================================
   OFF-CANVAS MENU - MOBIEL
   ========================================================= */

@media (max-width: 991.98px) {

	/* Elk menu-item is het referentiepunt voor de chevron */
	.offcanvas-menu
	.offcanvas-inner
	ul.menu li {
		position: relative;
	}


	/* Hoofdmenu-items */
	.offcanvas-menu
	.offcanvas-inner
	ul.menu > li > a,
	.offcanvas-menu
	.offcanvas-inner
	ul.menu > li > span {
		display: flex;
		align-items: center;

		min-height: 48px;

		padding-top: 11px;
		padding-right: 58px;
		padding-bottom: 11px;

		line-height: 1.4;
	}


	/* Submenu-items - extra verticale klikruimte */
	.offcanvas-menu
	.offcanvas-inner
	ul.menu ul li > a,
	.offcanvas-menu
	.offcanvas-inner
	ul.menu ul li > span {
		display: flex;
		align-items: center;

		min-height: 46px;

		padding-top: 11px;
		padding-right: 58px;
		padding-bottom: 11px;

		line-height: 1.45;
	}


	/* Chevron / submenu-toggler */
	.offcanvas-menu
	.menu-toggler {
		position: absolute !important;

		top: 0 !important;
		right: 0 !important;

		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 52px !important;
		height: 48px !important;
		min-width: 52px !important;

		margin: 0 !important;
		padding: 0 !important;

		transform: none !important;

		cursor: pointer;
	}
}


/* =========================================================
   L.A. RAEVEN
   HELIX ULTIMATE + SP PAGE BUILDER
   COMPLETE SITE CSS
   ========================================================= */


/* =========================================================
   ALGEMENE HEADER
   ========================================================= */

#sp-header {
	background: #fff;

	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}


/* Classic header: geen logo in de navigatie */
#sp-header #sp-logo {
	display: none !important;
}


/* =========================================================
   ALGEMENE MENU KOLOM
   ========================================================= */

#sp-header #sp-menu {
	width: 100%;
	max-width: 100%;

	flex: 0 0 100%;
}


#sp-header #sp-menu > .sp-column,
#sp-header #sp-menu .sp-megamenu-wrapper {
	display: flex !important;

	justify-content: center !important;
	align-items: center;

	width: 100%;
}


/* =========================================================
   ALGEMEEN DESKTOP MENU
   ========================================================= */

#sp-header .sp-megamenu-parent {
	display: flex !important;

	flex-wrap: nowrap !important;

	justify-content: center !important;
	align-items: center;

	width: auto;

	margin: 0 auto !important;
	padding: 0;

	float: none !important;
}


#sp-header
.sp-megamenu-parent > li {
	position: relative;

	flex: 0 0 auto;

	white-space: nowrap;
}


/* Algemene menu typografie */

#sp-header
.sp-megamenu-parent > li > a,

#sp-header
.sp-megamenu-parent > li > span {
	position: relative;

	color: #222 !important;

	font-family: 'Lato', sans-serif;
	font-size: 13px;
	font-weight: 900 !important;
	text-transform: uppercase;
	letter-spacing: 1px;

	text-shadow: none;

	transition:
		color 0.25s ease,
		opacity 0.25s ease;
}


/* =========================================================
   MENU HOVER + ACTIVE
   ========================================================= */

#sp-header
.sp-megamenu-parent > li:hover > a,

#sp-header
.sp-megamenu-parent > li:hover > span,

#sp-header
.sp-megamenu-parent > li.active > a,

#sp-header
.sp-megamenu-parent > li.active > span {
	color: #ff80ee !important;
}


/* =========================================================
   LIJNTJE ONDER HOVER / ACTIVE
   ========================================================= */

#sp-header
.sp-megamenu-parent > li > a::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: 10px;

	width: 0;
	height: 1px;

	background: currentColor;

	transform: translateX(-50%);

	transition:
		width 0.25s ease,
		background-color 0.25s ease;
}


#sp-header
.sp-megamenu-parent > li:hover > a::after,

#sp-header
.sp-megamenu-parent > li.active > a::after {
	width: 28px;
}


/* =========================================================
   SUBMENU / DROPDOWN
   Positionering en openen/sluiten laat Helix zelf doen
   ========================================================= */

@media (min-width: 992px) {

	/* Witte achtergrond + gecentreerde inhoud */
	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-dropdown-inner {
		background: #fff;
		text-align: center;
	}


	/* Submenu-items */
	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item > a,

	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item > span {
		display: block;

		width: 100%;

		padding: 8px 10px;

		color: #222 !important;

		font-family: 'Lato', sans-serif;
		font-weight: 700;

		text-align: center !important;
		text-decoration: none !important;

		transition: color 0.25s ease;
	}


	/* Hover / focus / actief */
	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item:hover > a,

	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item:hover > span,

	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item > a:focus,

	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item.active > a,

	#sp-header
	.sp-megamenu-parent
	.sp-dropdown
	.sp-menu-item.active > span {
		color: #ff80ee !important;
	}
}


/* =========================================================
   NORMALE HELIX DROPDOWN - CENTREREN
   ========================================================= */

@media (min-width: 992px) {

	#sp-header
	.sp-megamenu-parent > li.sp-has-child {
		position: relative;
	}

	#sp-header
	.sp-megamenu-parent > li.sp-has-child
	> .sp-dropdown.sp-dropdown-main {
		left: calc(50% - 95px) !important;
		right: auto !important;

		width: 190px !important;
		min-width: 190px !important;

		margin-left: 0 !important;
	}
}


/* =========================================================
   CLASSIC HEADER - SOCIAL ICONS
   ========================================================= */

/* Normale pagina: donker op witte header */
#sp-header
#sp-menu
.social-wrap
ul.social-icons a {
	color: #222 !important;

	transition: color 0.25s ease;
}


/* SVG / icon volgt linkkleur */
#sp-header
#sp-menu
.social-wrap
ul.social-icons a svg,

#sp-header
#sp-menu
.social-wrap
ul.social-icons a i {
	color: inherit !important;
	fill: currentColor !important;
}


/* Hero: wit zolang de header transparant is */
.hero-page
#sp-header:not(.header-sticky)
#sp-menu
.social-wrap
ul.social-icons a {
	color: #fff !important;
}


/* Hover / focus op normale pagina */
#sp-header
#sp-menu
.social-wrap
ul.social-icons a:hover,

#sp-header
#sp-menu
.social-wrap
ul.social-icons a:focus {
	color: #ff00dd !important;
}


/* Hero hover / focus */
.hero-page
#sp-header:not(.header-sticky)
#sp-menu
.social-wrap
ul.social-icons a:hover,

.hero-page
#sp-header:not(.header-sticky)
#sp-menu
.social-wrap
ul.social-icons a:focus {
	color: #ff00dd !important;
}


/* Sticky header: donker op witte achtergrond */
#sp-header.header-sticky
#sp-menu
.social-wrap
ul.social-icons a {
	color: #222 !important;
}


/* Sticky hover / focus */
#sp-header.header-sticky
#sp-menu
.social-wrap
ul.social-icons a:hover,

#sp-header.header-sticky
#sp-menu
.social-wrap
ul.social-icons a:focus {
	color: #ff00dd !important;
}


/* Socials verdwijnen uit de header zodra de toggler wordt gebruikt */
@media (max-width: 991.98px) {
	#sp-header
	#sp-menu
	.social-wrap {
		display: none !important;
	}
}


/* =========================================================
   HERO HEADER
   Alleen pagina's met Page Class: hero-page
   ========================================================= */

.hero-page #sp-header {
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;

	z-index: 1000;

	background: transparent;

	box-shadow: none;
}


/* Hero direct bovenaan */

.hero-page #sp-main-body {
	padding-top: 0 !important;
	margin-top: 0 !important;
}


/* Menu boven hero wit */

.hero-page #sp-header:not(.header-sticky)
.sp-megamenu-parent > li > a,

.hero-page #sp-header:not(.header-sticky)
.sp-megamenu-parent > li > span {
	color: #fff !important;

	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.30);
}


/* Hero hover / active roze */

.hero-page #sp-header:not(.header-sticky)
.sp-megamenu-parent > li:hover > a,

.hero-page #sp-header:not(.header-sticky)
.sp-megamenu-parent > li:hover > span,

.hero-page #sp-header:not(.header-sticky)
.sp-megamenu-parent > li.active > a,

.hero-page #sp-header:not(.header-sticky)
.sp-megamenu-parent > li.active > span {
	color: #ff80ee !important;
}


/* =========================================================
   STICKY HEADER
   ========================================================= */



#sp-header.header-sticky {
	position: fixed;

	background:
		rgba(255, 255, 255, 0.97);

	box-shadow:
		0 3px 18px rgba(0, 0, 0, 0.08);
}


/* Sticky normale items */

#sp-header.header-sticky
.sp-megamenu-parent > li > a,

#sp-header.header-sticky
.sp-megamenu-parent > li > span {
	color: #222 !important;

	text-shadow: none;
}


/* Sticky hover / active */

#sp-header.header-sticky
.sp-megamenu-parent > li:hover > a,

#sp-header.header-sticky
.sp-megamenu-parent > li:hover > span,

#sp-header.header-sticky
.sp-megamenu-parent > li.active > a,

#sp-header.header-sticky
.sp-megamenu-parent > li.active > span {
	color: #ff80ee !important;

	text-shadow: none;
}


/* =========================================================
   HOMEPAGE HERO
   ========================================================= */

#home-hero,
.hero-home {
	position: relative;

	width: 100%;
	max-width: none;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;
}


/* SPPB wrappers volledig breed */

#home-hero .sppb-row-container,
#home-hero .sppb-container-inner,
.hero-home .sppb-row-container,
.hero-home .sppb-container-inner {
	width: 100%;

	max-width: none !important;

	margin: 0 !important;

	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* =========================================================
   HOMEPAGE SLIDESHOW
   ========================================================= */

.home-slideshow {
	position: relative;

	width: 100%;
	max-width: none;

	margin: 0;
	padding: 0;
}


/* Desktop verhouding */

.home-slideshow
.sp-slider-outer-stage {
	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	height: auto !important;

	overflow: hidden;
}


/* Slides volledige hoogte */

.home-slideshow
.sp-slider-outer-stage > div,

.home-slideshow
.sp-slider-item,

.home-slideshow
.sp-item {
	height: 100% !important;
	min-height: 100% !important;
}


/* =========================================================
   SLIDESHOW ACHTERGRONDBEELDEN
   ========================================================= */

.home-slideshow .sp-background,
.home-slideshow [class*="sp-background"] {
	width: 100%;
	height: 100%;

	background-size: cover !important;

	background-position:
		center center !important;

	background-repeat:
		no-repeat !important;
}


/* =========================================================
   VASTE H1 - L.A. RAEVEN
   ========================================================= */

#home-hero .home-title,
.hero-home .home-title {
	position: absolute;

	top: auto !important;
	bottom: 50% !important;

	left: 0 !important;
	right: 0 !important;

	z-index: 20;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center !important;

	pointer-events: none;
}


/* Werkelijke H1 */

#home-hero .home-title *,
.hero-home .home-title * {
	display: block;

	width: 100% !important;
	max-width: none !important;

	margin: 0 auto !important;
	padding: 0 !important;

	font-family:
		"Lato",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif !important;

	font-size: 14vw !important;

	font-weight: 900 !important;

	line-height: 0.88 !important;

	letter-spacing: 20px !important;

	color: #fff !important;

	opacity: 0.5 !important;

	white-space: nowrap !important;

	text-align: center !important;

	text-shadow: none !important;
}


/* =========================================================
   HOME TITLE - FADE IN BIJ PAGINALAAD
   ========================================================= */

.home-page .home-title {
	opacity: 0;

	animation:
		home-title-fade-in 1.2s ease-out 0.25s forwards;
}

@keyframes home-title-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/* Toegankelijkheid: animatie uitschakelen indien gewenst */
@media (prefers-reduced-motion: reduce) {

	.home-page .home-title {
		opacity: 1;
		animation: none;
	}
}


/* =========================================================
   WITTE LIJN ONDER H1
   ========================================================= */

#home-hero .home-title::after,
.hero-home .home-title::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -50px;

	width: 80px;
	height: 4px;

	background: #fff;

	transform: translateX(-50%);
}


/* =========================================================
   SLIDESHOW CONTENT WRAPPER
   ========================================================= */

#home-hero
.home-slideshow
.sp-slider-content-wrap {
	position: absolute !important;

	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	transform: none !important;

	display: flex !important;

	justify-content: center !important;
	align-items: center !important;

	z-index: 21;
}


/* Interne slide-content */

#home-hero
.home-slideshow
.sp-slider-content-align-center {
	position: relative !important;

	width: 100% !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	transform:
		translateY(125px) !important;

	text-align: center !important;
}


/* =========================================================
   SUBTITEL PER SLIDE
   ========================================================= */

#home-hero
.home-slideshow
.sppb-sp-slider-title {
	position: static !important;

	display: block !important;

	width: 90% !important;
	max-width: none !important;

	margin: 0 auto !important;
	padding: 0 !important;

	transform: none !important;

	font-family:
		"Lato",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif !important;

	font-size: 5vw !important;

	font-weight: 400 !important;

	line-height: 1.1 !important;

	letter-spacing: 5px !important;

	color: #fff !important;

	opacity: 0.5 !important;

	white-space: normal !important;

	text-align: center !important;

	text-shadow: none !important;
}


/* Eventuele extra slide tekst */

#home-hero
.home-slideshow
.sppb-sp-slider-text {
	position: static !important;

	width: 90% !important;

	margin: 1rem auto 0 !important;
	padding: 0 !important;

	color: #fff !important;

	text-align: center !important;
}


/* =========================================================
   HOME ABOUT
   ========================================================= */

#home-about,
.home-about {
	position: relative;

	padding-top:
		clamp(60px, 8vw, 120px);

	padding-bottom:
		clamp(60px, 8vw, 120px);
}


.home-about
.about-intro {
	padding-right:
		clamp(20px, 4vw, 70px);
}


.home-about
.about-intro
.sppb-addon-title {
	margin-bottom: 1.5rem;

	line-height: 1.2;
}


.home-about
.about-intro p {
	line-height: 1.7;
}


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

.home-about
.home-latest {
	display: flex;

	flex-direction: column;

	gap:
		clamp(40px, 5vw, 70px);
}


.home-about
.latest-installations,

.home-about
.latest-publications {
	width: 100%;
}


.home-about
.latest-installations
.sppb-addon-title,

.home-about
.latest-publications
.sppb-addon-title {
	margin-bottom: 1.5rem;

	letter-spacing: 0.04em;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

	/* Hamburger uit */

	#sp-header
	#offcanvas-toggler {
		display: none !important;
	}


	/* Desktop menu zichtbaar */

	#sp-header
	.sp-megamenu-parent {
		display: flex !important;
	}


	/* Ruimere spacing */

	#sp-header
	.sp-megamenu-parent > li > a,

	#sp-header
	.sp-megamenu-parent > li > span {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}


/* =========================================================
   IPAD LANDSCAPE / KLEINE LAPTOP
   992px t/m 1199px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

	/* Hero viewporthoogte */

	#home-hero,
	.hero-home {
		min-height: 100vh;
		min-height: 100svh;
	}


	.home-slideshow,
	.home-slideshow
	.sppb-addon-content {
		min-height: 100vh;
		min-height: 100svh;
	}


	.home-slideshow
	.sp-slider-outer-stage {
		aspect-ratio:
			auto !important;

		height: 100vh !important;
		height: 100svh !important;

		min-height: 100vh !important;
		min-height: 100svh !important;
	}


	.home-slideshow
	.sp-slider-outer-stage > div,

	.home-slideshow
	.sp-slider-item,

	.home-slideshow
	.sp-item {
		height: 100% !important;
		min-height: 100% !important;
	}


	.home-slideshow .sp-background,
	.home-slideshow [class*="sp-background"] {
		width: 100%;
		height: 100%;

		background-size:
			cover !important;

		background-position:
			center center !important;
	}


	/* H1 */

	#home-hero .home-title *,
	.hero-home .home-title * {
		font-size:
			14vw !important;

		line-height:
			0.88 !important;

		letter-spacing:
			16px !important;

		opacity:
			0.5 !important;
	}


	/* Witte lijn */

	#home-hero
	.home-title::after,

	.hero-home
	.home-title::after {
		bottom: -48px;

		width: 80px;
		height: 4px;
	}


	/* Subtitel */

	#home-hero
	.home-slideshow
	.sp-slider-content-align-center {
		transform:
			translateY(115px) !important;
	}


	#home-hero
	.home-slideshow
	.sppb-sp-slider-title {
		width: 90% !important;

		font-size:
			5vw !important;

		line-height:
			1.1 !important;

		letter-spacing:
			4px !important;

		opacity:
			0.5 !important;
	}
}


/* =========================================================
   TABLET + MOBIEL
   ONDER 992px
   ========================================================= */

@media (max-width: 991.98px) {

	/* ---------------------------------------------
	   Header
	   --------------------------------------------- */

	#sp-header > .container {
		width: 100% !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}


	/* Transparante header zodra de toggler in beeld is */

	#sp-header {
		padding-top: 20px;
		background: transparent !important;
		box-shadow: none !important;
		border-bottom: 0 !important;
	}


	/* Ook wanneer Helix de header sticky maakt */

	#sp-header.header-sticky {
		padding-top: 12px;
		padding-bottom: 12px;
		background: transparent !important;
		box-shadow: none !important;
		border-bottom: 0 !important;
	}


	#sp-header
	#offcanvas-toggler {
		background: #fff !important;
		padding: 6px 8px !important;
		border-radius: 5px;
	}


	/* Desktop menu weg */

	#sp-header
	.sp-megamenu-parent {
		display: none !important;
	}


	/* Menu wrapper */

	#sp-header
	#sp-menu {
		display: flex !important;

		width: 100%;
		max-width: 100%;
	}


	#sp-header
	#sp-menu > .sp-column,

	#sp-header
	#sp-menu
	.sp-megamenu-wrapper {
		display: flex !important;

		justify-content:
			flex-end !important;

		align-items: center;

		width: 100%;
	}


	/* =====================================================
	   HAMBURGER / TOGGLER
	   ===================================================== */

	#sp-header
	#offcanvas-toggler,

	#sp-header
	#offcanvas-toggler.offcanvas,

	#sp-header
	#offcanvas-toggler.mega {
		display: flex !important;

		visibility:
			visible !important;

		justify-content: center;
		align-items: center;

		width: auto;
		height: auto;

		/*
		 * 10px boven
		 * 20px rechts
		 * auto links = rechts uitgelijnd
		 */
		margin:
			10px 20px 0 auto !important;

		opacity: 1 !important;
	}


	#sp-header
	#offcanvas-toggler
	.burger-icon {
		display: block !important;

		width: 25px;

		cursor: pointer;
	}


	/* Donkere hamburger op alle pagina's */

	#sp-header
	#offcanvas-toggler
	.burger-icon > span {
		display: block !important;

		width: 25px;
		height: 2px;

		margin: 5px 0;

		background-color:
			#222 !important;
	}


	/* ---------------------------------------------
	   Hero beeldvullend
	   --------------------------------------------- */

	.home-slideshow
	.sp-slider-outer-stage {
		aspect-ratio:
			auto !important;

		height: 100vh !important;
		height: 100svh !important;

		min-height:
			650px !important;
	}
	
	


	.home-slideshow
	.sp-background,

	.home-slideshow
	[class*="sp-background"] {
		background-size:
			cover !important;

		background-position:
			center center !important;
	}


	/* H1 */

	#home-hero .home-title *,
	.hero-home .home-title * {
		font-size:
			14vw !important;

		line-height:
			0.88 !important;

		letter-spacing:
			12px !important;

		opacity:
			0.5 !important;
	}


	/* Witte lijn */

	#home-hero
	.home-title::after,

	.hero-home
	.home-title::after {
		bottom: -45px;
	}


	/* Subtitel */

	#home-hero
	.home-slideshow
	.sp-slider-content-align-center {
		transform:
			translateY(108px) !important;
	}


	#home-hero
	.home-slideshow
	.sppb-sp-slider-title {
		width: 90% !important;

		font-size:
			5vw !important;

		line-height:
			1.1 !important;

		letter-spacing:
			4px !important;

		opacity:
			0.5 !important;
	}
	

	/* About */

	.home-about
	.about-intro {
		padding-right: 30px;
	}
}


/* =========================================================
   MOBIEL
   ONDER 768px
   ========================================================= */

@media (max-width: 767.98px) {

	/* ---------------------------------------------
	   Hero beeldvullend
	   --------------------------------------------- */

	.home-slideshow
	.sp-slider-outer-stage {
		aspect-ratio:
			auto !important;

		height: 100vh !important;
		height: 100svh !important;

		min-height:
			620px !important;
	}


	.home-slideshow
	.sp-background,

	.home-slideshow
	[class*="sp-background"] {
		width: 100%;
		height: 100%;

		background-size:
			cover !important;

		background-position:
			center center !important;

		background-repeat:
			no-repeat !important;
	}


	/* ---------------------------------------------
	   H1
	   --------------------------------------------- */

	#home-hero .home-title,
	.hero-home .home-title {
		bottom: 50% !important;

		left: 0 !important;
		right: 0 !important;

		width: 100% !important;
	}


	#home-hero .home-title *,
	.hero-home .home-title * {
		width: 100% !important;

		font-size:
			14vw !important;

		font-weight:
			900 !important;

		line-height:
			0.88 !important;

		letter-spacing:
			6px !important;

		opacity:
			0.5 !important;

		white-space:
			nowrap !important;
	}


	/* ---------------------------------------------
	   Witte lijn
	   --------------------------------------------- */

	#home-hero
	.home-title::after,

	.hero-home
	.home-title::after {
		bottom: -38px;

		width: 65px;
		height: 3px;
	}


	/* ---------------------------------------------
	   Subtitel
	   --------------------------------------------- */

	#home-hero
	.home-slideshow
	.sp-slider-content-align-center {
		transform:
			translateY(90px) !important;
	}


	#home-hero
	.home-slideshow
	.sppb-sp-slider-title {
		width: 90% !important;
		max-width: 90% !important;

		margin-left:
			auto !important;

		margin-right:
			auto !important;

		font-size:
			5vw !important;

		font-weight:
			400 !important;

		line-height:
			1.15 !important;

		letter-spacing:
			2px !important;

		opacity:
			0.5 !important;

		white-space:
			normal !important;

		text-align:
			center !important;
	}


	/* ---------------------------------------------
	   About
	   --------------------------------------------- */

	.home-about
	.about-intro {
		padding-right: 0;

		padding-bottom: 50px;
	}


	.home-about
	.home-latest {
		gap: 50px;
	}
}


/* =========================================================
   KLEINE MOBIELE SCHERMEN
   ========================================================= */

@media (max-width: 480px) {

	.home-slideshow
	.sp-slider-outer-stage {
		min-height:
			600px !important;
	}


	#home-hero
	.home-slideshow
	.sppb-sp-slider-title {
		font-size:
			max(5vw, 18px) !important;

		letter-spacing:
			2px !important;

		opacity:
			0.5 !important;
	}


	#home-hero
	.home-slideshow
	.sp-slider-content-align-center {
		transform:
			translateY(82px) !important;
	}
}


/* ==================================================
   HOME NAVIGATION
   ================================================== */

#home-navigation,
.home-navigation {
	position: relative;

	width: 100%;

	padding-top: 0;
	padding-bottom: 0;
}


.home-navigation .sppb-row {
	margin-top: 0;
	margin-bottom: 0;
}


.home-navigation img {
	display: block;

	width: 100%;
	height: auto;
}


.home-navigation a {
	text-decoration: none;
}


.home-navigation
.sppb-addon-title {
	letter-spacing: 0.06em;
}


/* ==================================================
   LAYOUT
   Alleen de kolommen van de geneste tegelrijen!
   De buitenste kolom blijft 100%.
   ================================================== */

#home-navigation .sppb-nested-row {
	flex-wrap: wrap !important;
}


/* Desktop: 4 tegels naast elkaar */

#home-navigation .sppb-nested-row > .sppb-row-column {
	width: 25% !important;
	flex: 0 0 25% !important;
	max-width: 25% !important;
}


/* ==================================================
   VIERKANTE TEGELS
   ================================================== */

#home-navigation .addon-root-image-overlay
.sppb-addon-overlay-image-content {
	position: relative !important;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;

	aspect-ratio: 1 / 1 !important;

	padding: 0 !important;
	overflow: hidden !important;
}


/* ==================================================
   ACHTERGRONDAFBEELDING
   ================================================== */

#home-navigation .addon-root-image-overlay
.overlay-background-image-wrapper {
	position: absolute !important;
	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	min-height: 0 !important;
	max-height: none !important;

	/* Grijswaarden op wrapper voor soepelere zoom */
	filter: grayscale(100%);

	transition: filter 0.4s ease;

	z-index: 0;
}


/* Afbeelding vult volledige vierkante tegel */

#home-navigation .addon-root-image-overlay
.overlay-background-image {
	position: absolute !important;
	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	min-height: 0 !important;
	max-height: none !important;

	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;

	transform: scale3d(1, 1, 1);

	transition:
		transform 0.65s cubic-bezier(0.25, 0.1, 0.25, 1);

	transform-origin: center center;

	will-change: transform;
	backface-visibility: hidden;
}


/* Eventuele overlaylaag van SP Page Builder */

#home-navigation .addon-root-image-overlay
.overlay-background-style {
	position: absolute !important;
	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	z-index: 1;
}


/* ==================================================
   HOVER
   Van grijswaarden naar kleur + subtiele zoom
   ================================================== */

#home-navigation
.sppb-addon-overlay-image-content:hover
.overlay-background-image-wrapper {
	filter: grayscale(0%);
}


#home-navigation
.sppb-addon-overlay-image-content:hover
.overlay-background-image {
	transform: scale3d(1.06, 1.06, 1);
}


/* ==================================================
   TITEL
   ================================================== */

/* Titel over volledige tegel */

#home-navigation .overlay-image-title {
	position: absolute !important;
	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	z-index: 10;
}


/* Titelcontainer vult tegel */

#home-navigation .overlay-image-title
.sppb-addon-title {
	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* Link vult tegel en centreert titel */

#home-navigation .overlay-image-title
.sppb-addon-title a {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: 100% !important;

	box-sizing: border-box;

	/* Ruimte tussen tekst en rand */
	padding: clamp(10px, 2vw, 28px) !important;

	font-family: "Lato", sans-serif !important;

	/*
	 * Maximaal ca. 150%.
	 * Schaal automatisch iets terug op kleine tegels.
	 */
	font-size: clamp(1rem, 1.7vw, 1.5rem) !important;

	font-weight: 400 !important;
	line-height: 1.15 !important;

	color: #fff !important;

	text-align: center !important;
	text-decoration: none !important;

	text-shadow:
		0 2px 8px rgba(0, 0, 0, 0.45);

	overflow-wrap: break-word;
}


/* Titel blijft wit */

#home-navigation .overlay-image-title
.sppb-addon-title a:hover,
#home-navigation .overlay-image-title
.sppb-addon-title a:focus,
#home-navigation .overlay-image-title
.sppb-addon-title a:active {
	color: #fff !important;
	text-decoration: none !important;
}


/* ==================================================
   TABLET + MOBILE
   2 TEGELS NAAST ELKAAR
   ================================================== */

@media screen and (max-width: 991.98px) {

	#home-navigation
	.sppb-nested-row > .sppb-row-column {
		width: 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}

	/* Vierkant expliciet behouden */
	#home-navigation
	.addon-root-image-overlay
	.sppb-addon-overlay-image-content {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		aspect-ratio: 1 / 1 !important;
	}

	#home-navigation
	.overlay-image-title
	.sppb-addon-title a {
		font-size: clamp(1rem, 3vw, 1.4rem) !important;
		padding: 14px !important;
	}
}


/* ==================================================
   KLEINE TELEFOONS
   Nog steeds 2 tegels naast elkaar
   ================================================== */

@media screen and (max-width: 575.98px) {

	#home-navigation
	.overlay-image-title
	.sppb-addon-title a {
		font-size: clamp(0.9rem, 4vw, 1.1rem) !important;

		line-height: 1.1 !important;

		padding: 8px !important;
	}
}


/* ==================================================
   LATEST INSTALLATIONS + LATEST PUBLICATIONS
   ================================================== */

.latest-installations,
.latest-publications {
	font-family: "Lato", "Verdana", "Helvetica", "Arial", sans-serif;
	color: #686868;
}


/* ==================================================
   LIJST
   ================================================== */

.latest-installations ul.mod-list,
.latest-publications ul.mod-list {
	list-style: none;
	margin: 0 -15px;
	padding: 0;
}


/* Individueel artikel */

.latest-installations ul.mod-list > li,
.latest-publications ul.mod-list > li {
	margin: 0 0 5px 0;
	padding: 0;

	list-style: none;
}


/* ==================================================
   ARTIKEL-LINK
   ================================================== */

.latest-installations ul.mod-list > li > a,
.latest-publications ul.mod-list > li > a {
	display: block;
	position: relative;

	padding: 5px 20px 5px 42px;

	font-family: "Lato", "Verdana", "Helvetica", "Arial", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;

	color: #ff00dd !important;

	text-decoration: none !important;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}


/* ==================================================
   PIJLTJE
   ================================================== */

.latest-installations ul.mod-list > li > a::before,
.latest-publications ul.mod-list > li > a::before {
	content: "";

	position: absolute;
	left: 22px;
	top: 50%;

	width: 7px;
	height: 7px;

	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;

	transform: translateY(-50%) rotate(45deg);

	transition: transform 0.2s ease;
}


/* ==================================================
   HOVER / FOCUS
   ================================================== */

.latest-installations ul.mod-list > li > a:hover,
.latest-installations ul.mod-list > li > a:focus,
.latest-publications ul.mod-list > li > a:hover,
.latest-publications ul.mod-list > li > a:focus {
	color: #ff4de7 !important;
	text-decoration: none !important;

	transform: translateX(4px);
}


/* ==================================================
   DATUM / EXTRA INFORMATIE VERBERGEN
   ================================================== */

.latest-installations ul.mod-list > li > a > span:not(:first-child),
.latest-publications ul.mod-list > li > a > span:not(:first-child) {
	display: none !important;
}


/* =========================================================
   FOOTER - TABLET + MOBILE STACK
   Socials boven, copyright onder
   ========================================================= */

@media (max-width: 991.98px) {

	#sp-footer1,
	#sp-footer2 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;

		text-align: center !important;
	}

	#sp-footer1 .sp-column,
	#sp-footer2 .sp-column {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* Social icons horizontaal en gecentreerd */
	#sp-footer1 ul.social-icons {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;

		margin: 0 auto !important;
		padding: 0 !important;
	}

	/* Copyright centreren */
	#sp-footer2 {
		text-align: center !important;
	}

	/* Ruimte tussen socials en copyright */
	#sp-footer1 {
		margin-bottom: 12px;
	}
}


/* =========================================================
   PAGE TOP / CONTENT BRAND
   Geldt voor normale achterliggende contentpagina's
   ========================================================= */


/* =========================================================
   CONTENT TOP - L.A. RAEVEN BRAND
   ========================================================= */

/* Geen extra modulemarges rond het logo */

#sp-content-top .page-brand,
#sp-content-top .page-brand.sp-module {
	margin: 0 !important;
	padding: 0 !important;
}


/* Ook interne module-wrapper compact houden */

#sp-content-top .page-brand .sp-module-content,
#sp-content-top .page-brand .mod-custom,
#sp-content-top .page-brand .custom {
	margin: 0 !important;
	padding: 0 !important;
}


/* L.A. RAEVEN */

.page-brand .superhero {
	position: relative;

	margin: 35px 0 55px;
	padding: 0;

	text-align: center;

	/* Fade-in */
	opacity: 0;
	animation: page-brand-fade-in 1.4s ease-out 0.2s forwards;
}


.page-brand .superhero span {
	display: inline-block;

	margin: 0;
	padding: 0;

	font-family: "Lato", sans-serif;
	font-size: clamp(64px, 8vw, 110px);
	font-weight: 900;
	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;

	color: #686868;
}


/* Zwarte lijn */

.page-brand .superhero::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -30px;

	width: 80px;
	height: 4px;

	background: #090d0f;

	transform: translateX(-50%);
}


@media (max-width: 767.98px) {

	.page-brand .superhero {
		margin: 25px 0 45px;
	}

	.page-brand .superhero span {
		font-size: clamp(42px, 12vw, 72px);
		letter-spacing: 0.10em;
	}

	.page-brand .superhero::after {
		bottom: -24px;

		width: 65px;
		height: 3px;
	}
}


/* =========================================================
   PAGE BRAND - FADE IN
   ========================================================= */

@keyframes page-brand-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


@media (prefers-reduced-motion: reduce) {

	.page-brand .superhero {
		opacity: 1;
		animation: none;
	}
}


/* =========================================================
   MAIN BODY
   Normale achterliggende pagina's
   ========================================================= */

body:not(.home-page) #sp-main-body {
	padding-top: 0;
}


/* =========================================================
   BREADCRUMB
   Normale achterliggende pagina's
   ========================================================= */

#sp-content-top .page-breadcrumb,
#sp-content-top .page-breadcrumb.sp-module {
	margin: 0 !important;
	padding: 0 !important;
}


#sp-content-top .page-breadcrumb .sp-module-content {
	margin: 0;
	padding: 0;
}


.page-breadcrumb .breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	margin: 0 0 35px !important;
	padding: 0 !important;

	background: none !important;
	border: 0;

	font-family: "Lato", sans-serif;
	font-size: 16px;
	line-height: 1.4;
}


/* Items */

.page-breadcrumb .breadcrumb-item {
	color: #999;
}


/* Links */

.page-breadcrumb .breadcrumb-item a {
	color: #ff00dd;

	text-decoration: none;

	transition: color 0.2s ease;
}


.page-breadcrumb .breadcrumb-item a:hover,
.page-breadcrumb .breadcrumb-item a:focus {
	color: #ff4de7;

	text-decoration: none;
}


/* Actieve / laatste item */

.page-breadcrumb .breadcrumb-item.active {
	color: #999;
}


/* Bootstrap standaard separator uitschakelen */

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	content: none;
}


/* Eigen separator */

.page-breadcrumb .breadcrumb-item:not(:last-child)::after {
	content: "›";

	margin: 0 10px;

	color: #686868;
}


@media (max-width: 767.98px) {

	.page-breadcrumb .breadcrumb {
		margin-bottom: 28px !important;

		font-size: 15px;
	}
}


/* =========================================================
   JOOMLA CATEGORY BLOG
   Installations + Publications
   ========================================================= */


/* =========================================================
   CATEGORY HEADING
   ========================================================= */

.category-blog-page
.category-desc {
	margin: 0 0 50px;
	padding: 0;
}


.category-blog-page
.category-desc h1 {
	margin: 0;

	font-family: "Lato", sans-serif;
	font-size: 2.5em;
	font-weight: 400;
	line-height: 1;

	color: #ff00dd;
}


/* =========================================================
   BLOG WRAPPER
   ========================================================= */

.category-blog-page
.blog,
.category-blog-page
.com-content-category-blog {
	width: 100%;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.category-blog-page
.article {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	margin: 0 0 7em;
	padding: 0 0.75rem 1.5rem;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	overflow: hidden;
}


/* =========================================================
   INTRO IMAGE
   ========================================================= */

.category-blog-page
.article-intro-image {
	flex: 0 0 50%;

	float: none !important;

	margin: 0 2em 0 0 !important;
	padding: 0;

	border: 0;
}


.category-blog-page
.article-intro-image a {
	display: block;

	margin: 0;
	padding: 0;

	text-decoration: none;
}


.category-blog-page
.article-intro-image img {
	display: block;

	width: 100%;
	max-width: 100%;
	height: auto;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}


/* =========================================================
   ARTICLE BODY
   ========================================================= */

.category-blog-page
.article-body {
	flex: 1 1 auto;

	min-width: 0;

	margin: 0;
	padding: 0;
}


/* =========================================================
   ARTICLE HEADER
   ========================================================= */

.category-blog-page
.article-header {
	margin: 0 0 12px;
	padding: 0;

	border: 0;
}


.category-blog-page
.article-header h2 {
	margin: 0;

	font-family: "Lato", sans-serif;
	font-size: 2em !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	color: #ff00dd !important;
}


/* =========================================================
   ARTICLE TITLE LINK
   ========================================================= */

.category-blog-page
.article-header h2 a {
	color: #ff00dd !important;

	text-decoration: none !important;

	transition: color 0.2s ease;
}


.category-blog-page
.article-header h2 a:hover,
.category-blog-page
.article-header h2 a:focus,
.category-blog-page
.article-header h2 a:active {
	color: #ff4de7 !important;

	text-decoration: none !important;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.category-blog-page
.article-introtext {
	margin: 0;
	padding: 0;
}


.category-blog-page
.article-introtext > p {
	margin: 0 0 18px;

	color: #262626;
}


/* =========================================================
   READ MORE
   ========================================================= */

.category-blog-page
.readmore {
	margin: 20px 0 0;
	padding: 0;
}


.category-blog-page
.readmore a {
	display: inline-flex;
	align-items: center;

	gap: 10px;

	margin: 0;
	padding: 0;

	border: 0;

	background: none !important;

	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;

	color: #262626 !important;

	text-decoration: none !important;

	box-shadow: none !important;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}


/* Eigen eenvoudige chevron */

.category-blog-page
.readmore a::before {
	content: "";

	flex: 0 0 auto;

	width: 7px;
	height: 7px;

	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;

	transform: rotate(45deg);
}


/* Read more hover */

.category-blog-page
.readmore a:hover,
.category-blog-page
.readmore a:focus,
.category-blog-page
.readmore a:active {
	color: #ff00dd !important;

	background: none !important;

	text-decoration: none !important;

	box-shadow: none !important;

	transform: translateX(4px);
}


/* =========================================================
   TABLET + MOBILE
   Onder 992px: beeld boven tekst
   ========================================================= */

@media (max-width: 991.98px) {

	.category-blog-page
	.article {
		flex-direction: column;

		margin-bottom: 5em;
	}

	.category-blog-page
	.article-intro-image {
		flex: 0 0 auto;

		width: 100%;

		margin: 0 0 28px !important;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.category-blog-page
	.category-desc {
		margin-bottom: 40px;
	}

	.category-blog-page
	.category-desc h1 {
		font-size: 2em;
	}

	.category-blog-page
	.article {
		margin-bottom: 70px;

		padding-left: 0;
		padding-right: 0;
	}

	.category-blog-page
	.article-intro-image {
		margin-bottom: 22px !important;
	}

	.category-blog-page
	.article-header {
		margin-bottom: 10px;
	}

	.category-blog-page
	.article-header h2 {
		font-size: 1.7em !important;
	}

	.category-blog-page
	.readmore {
		margin-top: 16px;
	}
}


/* =========================================================
   ARTICLE DETAIL - SHARED
   Installations + Publications
   ========================================================= */


/* Article header basis */

.article-details.installations-page .article-header,
.article-details.publications-page .article-header {
	padding: 0;
	border: 0;
}


.article-details.installations-page .article-header h1,
.article-details.publications-page .article-header h1 {
	margin: 0;

	font-family: "Lato", sans-serif;
	font-size: 2.5em;
	font-weight: 400;
	line-height: 1;

	color: #ff00dd;
}


/* Article body */

.article-details.installations-page [itemprop="articleBody"],
.article-details.publications-page [itemprop="articleBody"] {
	width: 100%;
}


/* Links in article text */

.article-details.installations-page [itemprop="articleBody"] a,
.article-details.publications-page [itemprop="articleBody"] a {
	color: #ff00dd;
	text-decoration: none;

	transition: color 0.2s ease;
}


.article-details.installations-page [itemprop="articleBody"] a:hover,
.article-details.installations-page [itemprop="articleBody"] a:focus,
.article-details.publications-page [itemprop="articleBody"] a:hover,
.article-details.publications-page [itemprop="articleBody"] a:focus {
	color: #ff4de7;
	text-decoration: none;
}


/* Previous / Next navigation */

.article-details.installations-page .pagenavigation,
.article-details.publications-page .pagenavigation {
	padding: 0;
}


.article-details.installations-page .pagenavigation .pagination,
.article-details.publications-page .pagenavigation .pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;

	margin: 0 !important;
	padding: 0;

	border: 0;
}


.article-details.installations-page .pagenavigation .btn,
.article-details.publications-page .pagenavigation .btn {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	background: none !important;
	box-shadow: none !important;

	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;

	color: #262626 !important;
	text-decoration: none !important;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}


.article-details.installations-page .pagenavigation .btn:hover,
.article-details.installations-page .pagenavigation .btn:focus,
.article-details.installations-page .pagenavigation .btn:active,
.article-details.publications-page .pagenavigation .btn:hover,
.article-details.publications-page .pagenavigation .btn:focus,
.article-details.publications-page .pagenavigation .btn:active {
	color: #ff00dd !important;

	border: 0;
	background: none !important;
	box-shadow: none !important;

	text-decoration: none !important;
}


.article-details.installations-page .pagenavigation .next:hover,
.article-details.installations-page .pagenavigation .next:focus,
.article-details.publications-page .pagenavigation .next:hover,
.article-details.publications-page .pagenavigation .next:focus {
	transform: translateX(4px);
}


.article-details.installations-page .pagenavigation .previous:hover,
.article-details.installations-page .pagenavigation .previous:focus,
.article-details.publications-page .pagenavigation .previous:hover,
.article-details.publications-page .pagenavigation .previous:focus {
	transform: translateX(-4px);
}


@media (max-width: 767.98px) {

	.article-details.installations-page .article-header h1,
	.article-details.publications-page .article-header h1 {
		font-size: 2em;
	}

	.article-details.installations-page .pagenavigation .btn,
	.article-details.publications-page .pagenavigation .btn {
		font-size: 15px;
	}
}


/* =========================================================
   INSTALLATIONS - ARTICLE DETAIL
   ========================================================= */


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

.article-details.installations-page .article-header {
	margin: 0 0 40px;
}


/* =========================================================
   EXTRA ARTICLE H2 / PAGE HEADER
   ========================================================= */

.article-details.installations-page .page-header {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}


.article-details.installations-page .page-header h2 {
	margin: 0;

	font-family: "Lato", sans-serif;
	font-size: 2em;
	font-weight: 400;
	line-height: 1;

	color: #ff00dd;
}


/* =========================================================
   OLD GANTRY GRID
   Video/beeld links - tekst rechts
   ========================================================= */

.article-details.installations-page
[itemprop="articleBody"] > .g-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1fr);

	column-gap: 36px;
	align-items: start;

	width: 100%;

	margin: 0 0 55px;
	padding: 0;
}


.article-details.installations-page
[itemprop="articleBody"] > .g-grid > .g-block {
	min-width: 0;
	margin: 0;
	padding: 0;
}


/* Oude Gantry spacer niet meer nodig */

.article-details.installations-page
[itemprop="articleBody"] > .g-grid > .size-2 {
	display: none;
}


/* Oude 49%-kolommen neutraliseren */

.article-details.installations-page
[itemprop="articleBody"] > .g-grid > .size-49 {
	width: auto;
	max-width: none;
	min-width: 0;
}


/* =========================================================
   VIDEO / EMBEDS
   ========================================================= */

.article-details.installations-page video,
.article-details.installations-page
[itemprop="articleBody"] > .g-grid iframe {
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;
}


.article-details.installations-page video {
	height: auto;
}


.article-details.installations-page
[itemprop="articleBody"] > .g-grid iframe {
	width: 100% !important;
	height: auto;

	aspect-ratio: 16 / 9;

	border: 0;
}


/* =========================================================
   ARTICLE TEXT
   ========================================================= */

.article-details.installations-page
[itemprop="articleBody"]
.g-block.size-49 p:first-child {
	margin-top: 0;
}


.article-details.installations-page
[itemprop="articleBody"] p {
	color: #262626;
}


/* =========================================================
   SHOWTIME IMAGE GALLERY
   Alleen frontend-output stylen
   ========================================================= */

.article-details.installations-page .showtime {
	width: 100%;

	margin: 0 0 45px;
	padding: 0;
}


.article-details.installations-page .showtime-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 28px;

	width: 100%;

	margin: 0;
	padding: 0;
}


.article-details.installations-page .showtime-image {
	flex: 1 1 0;
	min-width: 0;

	margin: 0;
	padding: 0;

	text-align: center;
}


.article-details.installations-page .showtime-image a,
.article-details.installations-page .showtime-image picture {
	display: block;

	margin: 0;
	padding: 0;
}


.article-details.installations-page .showtime-image img {
	display: block;

	max-width: 100%;
	height: auto;

	margin: 0 auto;

	border: 1px solid #ccc;

	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.12);
}


/* Installation-specific spacing */

.article-details.installations-page .pagenavigation {
	margin: 15px 0 0;
}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

	.article-details.installations-page .article-header {
		margin-bottom: 32px;
	}

	/* Video/beeld en tekst onder elkaar */

	.article-details.installations-page
	[itemprop="articleBody"] > .g-grid {
		grid-template-columns: 1fr;
		row-gap: 30px;

		margin-bottom: 45px;
	}

	.article-details.installations-page
	[itemprop="articleBody"] > .g-grid > .size-49 {
		width: 100%;
		max-width: 100%;
	}

	.article-details.installations-page
	[itemprop="articleBody"] > .g-grid > .size-2 {
		display: none;
	}


	/* Showtime: twee beelden per rij */

	.article-details.installations-page .showtime-gallery {
		justify-content: center;
		gap: 24px;
	}

	.article-details.installations-page .showtime-image {
		flex: 0 1 calc(50% - 12px);
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.article-details.installations-page .article-header {
		margin-bottom: 28px;
	}


	.article-details.installations-page .page-header {
		margin-bottom: 22px;
	}

	.article-details.installations-page .page-header h2 {
		font-size: 1.7em;
	}

	.article-details.installations-page .showtime {
		margin-bottom: 35px;
	}

	.article-details.installations-page .showtime-gallery {
		gap: 20px;
	}
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	/* Showtime: één beeld per rij */

	.article-details.installations-page .showtime-image {
		flex: 0 1 100%;
	}
}


/* =========================================================
   PUBLICATIONS - ARTICLE DETAIL
   ========================================================= */


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

.article-details.publications-page .article-header {
	margin: 0 0 20px;
}


/* =========================================================
   ARTICLE INFO / DATE
   ========================================================= */

.article-details.publications-page .article-info {
	margin: 0 0 35px;
	padding: 0;

	font-size: 15px;
	line-height: 1.4;

	color: #999;
}


.article-details.publications-page .article-info time {
	color: #999;
}


.article-details.publications-page
[itemprop="articleBody"] h3 {
	margin: 0 0 45px;

	font-family: "Lato", sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1.2;

	color: #262626;
}


/* =========================================================
   PUBLICATION IMAGE
   ========================================================= */

.article-details.publications-page
[itemprop="articleBody"] img {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;

	margin: 0;
	padding: 0;
}


.article-details.publications-page
[itemprop="articleBody"] p:has(> img) {
	margin: 0;
}


/* Publication-specific spacing */

.article-details.publications-page .pagenavigation {
	margin: 45px 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.article-details.publications-page .article-header {
		margin-bottom: 16px;
	}


	.article-details.publications-page .article-info {
		margin-bottom: 28px;
		font-size: 14px;
	}


	.article-details.publications-page
	[itemprop="articleBody"] h3 {
		font-size: 1.3em;
		margin-bottom: 24px;
	}


	.article-details.publications-page .pagenavigation {
		margin-top: 35px;
	}
}


/* =========================================================
   YOUTUBE FILMS
   ========================================================= */

.youtube-consent {
	position: relative;

	width: 100%;
	max-width: 550px;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	margin: 0.4rem;

	box-shadow:
		6px 6px 10px hsl(206.5, 0%, 75%);
}


/* Thumbnail */

.youtube-consent > img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* Consent-laag over de thumbnail */

.youtube-consent__overlay {
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	padding: 30px;

	background: rgba(0, 0, 0, 0.55);

	color: #fff;
	text-align: center;
}


/* Tekst */

.youtube-consent__overlay p {
	max-width: 430px;

	margin: 0 0 18px;

	color: #fff;

	line-height: 1.5;
}


.article-details.installations-page
.youtube-consent__overlay p {
	color: #fff;
}


/* Knop */

.youtube-consent__button {
	padding: 10px 18px;

	border: 0;

	background: #ff00dd;
	color: #fff;

	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: 700;

	cursor: pointer;
}


.youtube-consent__button:hover,
.youtube-consent__button:focus {
	background: #ff4de7;
}


/* YouTube-player na toestemming */

.youtube-consent iframe {
	display: block;

	width: 100%;
	height: 100%;

	border: 0;
}


/* =========================================================
   TV & YOUTUBE APPEARANCES
   ========================================================= */

/* Oude Gantry-rijen als moderne 2-koloms grid */

body.youtube-page
.article-details
[itemprop="articleBody"] > .g-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	column-gap: 36px;
	row-gap: 45px;

	width: 100%;

	margin: 0 0 45px;
	padding: 0;
}


/* Oude Gantry-kolommen neutraliseren */

body.youtube-page
.article-details
[itemprop="articleBody"] > .g-grid > .g-block {
	min-width: 0;

	width: auto;
	max-width: none;

	margin: 0;
	padding: 0;
}


/* Videotitel */

body.youtube-page
.article-details
[itemprop="articleBody"] .g-block > h4 {
	margin: 0 0 12px;

	color: #686868;

	line-height: 1.2;
}


/* Mobiel: één video per rij */

@media (max-width: 767.98px) {

	body.youtube-page
	.article-details
	[itemprop="articleBody"] > .g-grid {
		grid-template-columns: 1fr;

		row-gap: 36px;
	}
}


@media (min-width: 768px) and (max-width: 991.98px) {

	body.youtube-page
	.article-details
	[itemprop="articleBody"] .g-block > h4 {
		min-height: 2.4em;
	}
}


body.youtube-page
.article-details
[itemprop="articleBody"] .page-header h1 {
	margin: 0 0 1.4em;

	font-family: "Lato", sans-serif;
	font-size: 2.5em;
	font-weight: 400;
	line-height: 1.2;

	color: #ff00dd;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 4%;

	width: 100%;
}


.contact-column {
	min-width: 0;

	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.72;
}


/* Oude page-header h2 */

.contact-title {
	margin: 0 0 20px;

	font-family: "Lato", sans-serif;
	font-size: 2em;
	font-weight: 400;
	line-height: 1em;

	color: #ff00dd;
}


/* Oude h3 */

.contact-name {
	margin: 10px 0;

	font-family:
		"Lato",
		"Verdana",
		"Helvetica",
		"Arial",
		sans-serif;

	font-size: 22.4px;
	font-weight: 400;
	line-height: 28.8px;

	color: #686868;
}


.contact-grid p {
	color: #686868;
}


/* Contactlinks */

.contact-grid a {
	color: #ff00dd;

	text-decoration: none;
}


.contact-grid a:hover,
.contact-grid a:focus {
	color: #ff4de7;
}


/* Mobiel */

@media (max-width: 767.98px) {

	.contact-grid {
		grid-template-columns: 1fr;

		gap: 36px;
	}
}

@media (max-width: 991.98px) {

	html,
	body.home-page {
		max-width: 100%;
		overflow-x: hidden !important;
	}

	body.home-page #sp-main-body,
	body.home-page #home-hero,
	body.home-page .hero-home,
	body.home-page .home-slideshow,
	body.home-page .sp-slider-outer-stage {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}
}


/* =========================================================
   HOMEPAGE - VASTE MOBIELE HEADER
   ========================================================= */

@media (max-width: 991.98px) {

	body.home-page .sticky-header-placeholder {
		display: none !important;
		height: 0 !important;
	}

	body.home-page #sp-header,
	body.home-page #sp-header.header-sticky {
		position: fixed !important;

		top: 0 !important;
		left: 0 !important;
		right: 0 !important;

		width: 100% !important;

		padding-top: 20px !important;
		padding-bottom: 0 !important;

		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;

		transform: none !important;
		animation: none !important;
		transition: none !important;

		z-index: 1000 !important;
	}

	body.home-page #sp-header #offcanvas-toggler,
	body.home-page #sp-header.header-sticky #offcanvas-toggler {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;

		margin: 10px 20px 0 auto !important;

		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}