/*
 Theme Name:   Glabbast
 Description:  brainstorm en concept basisthema
 Author:       brainstorm en concept
 Version:      1.0.0
*/


@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');



.container {
	max-width:1600px;
}

:root {
	--orange:#EF7D00;
	--lightgray:#EBE8E5;
}
.cl-lightgray { color:var(--lightgray); }
.cl-orange { color:var(--orange); }
.cl-black { color:black; }

.bg-lightgray { background-color:var(--lightgray); }
.bg-orange { background-color:var(--orange); }
.bg-black { background-color:black; }

.bg-grain, #gdprc_bar {
	background-color:black;
	*background-image:url('img/bg_black_grain.webp');
	background-size:cover;
	background-position:center;
	background: #000000;
	background: linear-gradient(38deg, rgba(0, 0, 0, 1) 1%, rgba(30,30,30, 1) 25%, rgba(0, 0, 0, 1) 69%, rgba(30,30,30, 1) 100%);
	color:var(--lightgray);
	position:relative;
	overflow:visible;
	z-index:1;
}
	.bg-grain:after, #gdprc_bar:after {
		background-image:url('img/grain.webp');
		background-size:600px;
		position:absolute;
		top:0;
		left:0;
		content:" ";
		width:100%;
		height:100%;
		z-index:-1;
		border-radius:inherit;
		mix-blend-mode:screen;
	}
@media (max-width:991px) {
	.bg-grain:after, #gdprc_bar:after {
			background-image:url('img/grain_sm.webp');
			background-size:200px;
	}

}

body, html {
	width:100%;
	overflow:auto;
	margin:0px auto;
	font-family:DM sans;
	background-color:var(--lightgray);
	font-size:18px;
	color:black;
	overflow-x:hidden;
	scroll-behavior: smooth;
	-webkit-scroll-behavior:smooth;

}

main section {
	scroll-margin-top:100px;
}


h1, h2, h3, h4, h5, h6 {
	font-family:rubik;
	text-transform:uppercase;
	line-height:1;
}

h1 {
	font-size:80px;
	font-weight:800;
}
h2 {
	font-size:80px;
	font-weight:800;
}
h3 {
	font-size:60px;
	font-weight:800;
}
h4 {
	font-weight:700;
}




@media (min-width:991px) {
	.rotated {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		margin: 0;
		white-space: nowrap;
	}
}


mark {
	background-color:var(--orange);
	border-radius:12px;
	padding:0 0px;
	box-shadow: -10px 0px 0px var(--orange), 10px 0px 0px var(--orange);
	transform:translateX(100px);
	transition:.3s .2s;
	display:inline-block;
	z-index:-1;
	position:relative;
}
@media (max-width:991px) {
	mark {
		box-shadow: -5px 0px 0px var(--orange), 5px 0px 0px var(--orange);
		border-radius:6px;
	}
}
.visible mark {
	transform:translateX(0px);
}
::-moz-selection { /* Code for Firefox */
  color: black;
  background: var(--orange);

}

::selection {
  color: black;
  background:var(--orange);

}

p {
	font-size:18px;
	font-weight:200;
	line-height:1.8;
}
section p, {
	opacity:0;
	transform:translateX(70px);
	transition:.3s .2s;
}
section.visible p {
	opacity:1;
	transform:translateX(0);
}
b {
	font-weight:800;
}
h2 + p {
	margin-top:30px;
}

p > strong {
	font-weight:700;
}

p a, p a:hover {
	color:var(--orange);
}


@media (max-width:1399px) {
	h1, h2 	{ font-size:70px; }
	h3 			{	font-size:54px; }
}
@media (max-width:1199px) {
	h1, h2 	{ font-size:60px; }
	h3 			{	font-size:50px; }
}
@media (max-width:991px) {
	h1, h2 	{ font-size:60px; }
	h3 			{	font-size:40px; }
}
@media (max-width:767px) {
	h1, h2 	{ font-size:40px; }
	h3 			{	font-size:34px; }
	h4 			{ font-size:22px; }
}



.p-200 { padding-top:200px; padding-bottom:200px; }
.pt-200 { padding-top:200px; }
.pb-200 { padding-bottom:200px; }

.p-100 { padding-top:100px; padding-bottom:100px; }
.pt-100 { padding-top:100px; }
.pb-100 { padding-bottom:100px; }

.p-50 { padding-top:50px; padding-bottom:50px; }
.pt-50 { padding-top:50px; }
.pb-50 { padding-bottom:50px; }

@media screen and (max-width:1199px) {
	.p-200 { padding-top:100px; padding-bottom:100px; }
	.pt-200 { padding-top:100px; }
	.pb-200 { padding-bottom:100px; }

	.p-100 { padding-top:50px; padding-bottom:50px; }
	.pt-100 { padding-top:50px; }
	.pb-100 { padding-bottom:50px; }

	.p-50 { padding-top:25px; padding-bottom:25px; }
	.pt-50 { padding-top:25px; }
	.pb-50 { padding-bottom:25px; }
}

.v-align {
	position: relative;
	top: 50%;
	height: auto;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

/* Button */
.button, .wp-element-button {
	background:transparent;
	height:46px;
	line-height:46px;
	margin:0px 46px 0px 23px;
	border-radius:0px 23px 23px 0px;
	padding:0px 30px 0px 5px;
	display:inline-block;
	font-weight:600;
	font-family:rubik;
	cursor:pointer;
	position:relative;
	overflow:visible;
	z-index:1;
	transition:.4s ;
	background-color:var(--orange);
	color:var(--lightgray) !important;
	font-size:18px;
	text-decoration:none !important;
	border:0;
	width:auto !important;
}
.button.bg-black, .wp-element-button.bg-black {
	background-color:black;
}
	.button:before, .wp-element-button:before,
	.button:after, .wp-element-button:after {
		content:" ";
		height:100%;
		aspect-ratio: 1;
		background-color:inherit;
		color:inherit;
		display:inline-block;
		position:absolute;
		border-radius:23px;
		text-align:center;
		line-height:46px;
		transition:all .4s;
		z-index:-1;
		background-image:url('img/arrow_right.png');
		background-size:50%;
		background-position:50% 50%;
		background-repeat:no-repeat;

	}

	.button:before, .wp-element-button:before {
		left:-23px;
		border-radius:23px 0px 0px 23px ;
		background-position:-100% 50%;
		background-size:0%;
	}
	.button:after, .wp-element-button:after {
		left:100%;
	}

	/* Button Hovers */
	.button:hover, .wp-element-button:hover,
	a:hover .button {
		margin:0px 23px 0px 46px;
		padding: 0px 5px 0px 30px;
		border-radius:23px 0px 0px 23px;
	}
	.button:active, .wp-element-button:active {
		transform:scale(.9);
	}
		.button:hover:before, .wp-element-button:hover:before,
		a:hover .button:before {
			left:-46px;
			font-size:14px;
			border-radius:23px 23px 23px 23px;
			background-size:50%;
			background-position:50% 50%;

		}
		.button:hover:after, .wp-element-button:hover:after,
		a:hover .button:after {
			font-size:0;
			left:calc(100% - 23px);
			border-radius:0px 23px 23px 0px;
			background-size:0%;
			background-position:200% 50%;
		}


/* Button Arrows */
		.button.arrow-down:before,
		.button.arrow-down:after {
			background-size:auto 50%;
			background-image:url('img/arrow_down.png');
			background-position:50% 50%;
		}
			.button.arrow-down:before {background-position:50% -300%;	}
			.button.arrow-down:hover:before {background-position:50% 50%;	}
			.button.arrow-down:hover:after {background-position:50% 300%;	}

		.button.arrow-left:before,
		.button.arrow-left:after {
			background-image:url('img/arrow_left.png');
		}
			.button.arrow-left:before {background-position: 150% 50%;	}
			.button.arrow-left:hover:before {background-position:50% 50%;	}
			.button.arrow-left:hover:after {background-position:-100% 50% ;	}

		.button.arrow-up:before,
		.button.arrow-up:after {
			background-size:auto 50%;
			background-image:url('img/arrow_up.png');
		}
			.button.arrow-up:before {background-position:50% 300%;	}
			.button.arrow-up:hover:before {background-position:50% 50%;	}
			.button.arrow-up:hover:after {background-position:50% -300%;	}




@media (max-width:1399px) {
	body, p, .button  {
		font-size:16px;
	}
}


/* GDPR */
#gdprc_settings,
#gdprc_settings *:not(label, .button, .button *) {
	background:transparent !important;
	background-color:transparent;
	border-color:rgba(30,30,30,255) !important;
	color:inherit;
}
.dark #gdprc_settings {
	color:var(--lightgray);
}
@media (prefers-color-scheme: dark) {
	html:not(.light) #gdprc_settings {
		color:var(--lightgray);
	}
}
#gdprc_bar {
	background-color:black;
	*background-image:url('img/bg_black_grain.webp');
	background-size:cover;
	background-position:center;
	color:var(--lightgray);
	border-top:0;
	padding-top:30px;

}

@media (max-width:991px) {
	#gdprc_bar { {
			*background-image:url('img/bg_black_grain_sm.webp');
	}
}
	#gdprc_bar .container {
		max-width:1570px;
	}
	#gdprc_bar .container_gdprc_bar {
		border-bottom:1px solid rgba(255,255,255,.2);
		padding-bottom:30px;
	}

}
.button.gdprc_action {
	min-height:0 !important;
	padding:0px 15px !important;
	margin:0px;
	border-radius:46px !important;
}
	.button.gdprc_action:before,
	.button.gdprc_action:after {
		display:none;
	}

.gdprc_link {
	color:var(--orange);
	font-weight:200 !important;
}
	.gdprc_link:hover {
		color:var(--orange);
	}

	#gdprc_bar h3 {
		font-size:30px;
	}

	#gdprc_settings {
		max-width:unset;
	}
		#gdprc_settings .button.gdprc_action {
			width:auto;
		}
		.gdprc_item__label {
			text-transform:uppercase;
			font-weight:700 !important;
			font-family:'Rubik' !important;
		}

	/* Overlays */
:root {
	--overlay_border_radius: 35px;
}
.rounded-borders {
	border-radius:50px;
}
	.overlay {
		background-color:var(--lightgray);
		display:inline-block;
		position:relative;
		overflow:visible;
		z-index:2;
	}
	.overlay.absolute {
		position:absolute;
	}
		.overlay.bottom { padding-top:20px;	}
		.overlay.left { 	padding-right:20px; }
		.overlay.top {		padding-bottom:20px; }
		.overlay.right {	padding-left:20px; }

@media (max-width:767px) {
	.overlay.bottom { padding-top:10px;	}
	.overlay.left { 	padding-right:10px; }
	.overlay.top {		padding-bottom:10px; }
	.overlay.right {	padding-left:10px; }
	:root {
			--overlay_border_radius: 26px;
	}
	.rounded-borders {
		border-radius:23px;
	}
}

		.overlay.absolute.bottom { bottom: -0.5px; }
		.overlay.absolute.left { 	left:0;  }
		.overlay.absolute.top {		top:-0.5px; }
		.overlay.absolute.right {	right:0; }

		.overlay.bottom.left { 		border-radius:0px var(--overlay_border_radius) 0px 0px; }
		.overlay.bottom.right { 	border-radius:var(--overlay_border_radius) 0px 0px 0px; }
		.overlay.top.left {				border-radius:0px 0px var(--overlay_border_radius) 0px; }
		.overlay.top.right {			border-radius:0px 0px 0px var(--overlay_border_radius); }



		.overlay:before,
		.overlay:after {
			content:" ";
			background:transparent;
			aspect-ratio: 1;
			position:absolute;
			z-index:-1;
			width:var(--overlay_border_radius);
			background:inherit;
			mask-image:url('img/rounded_border_mask.png');
			mask-size:100% 100%;
			-webkit-mask-image:url('img/rounded_border_mask.png');
			-webkit-mask-size:100% 100%;
			*transition:.3s;

		}
		.overlay.bottom.left:before, .overlay.bottom.left:after { transform:rotate(0deg); }
			.overlay.bottom.left:before { bottom: calc(100% - .5px); left:-.5px;  	}
			.overlay.bottom.left:after 	{	bottom: -.5px; 	left:calc(100% - .5px); }

		.overlay.bottom.right:before, .overlay.bottom.right:after { transform:rotate(270deg); }
			.overlay.bottom.right:before 	{ bottom: calc(100% - .5px); right:-.5px; 	}
			.overlay.bottom.right:after 	{	bottom: -.5px; 	right:calc(100% - .5px); }

		.overlay.top.left:before, .overlay.top.left:after { transform:rotate(90deg); }
			.overlay.top.left:before { top: -.5px; left:calc(100% - .5px); 	}
			.overlay.top.left:after 	{	top: calc(100% - .5px); left:-.5px; }

		.overlay.top.right:before, .overlay.top.right:after { transform:rotate(180deg); }
			.overlay.top.right:before { top: -.5px; right:calc(100% - .5px); 	}
			.overlay.top.right:after 	{	top: calc(100% - .5px); 	right:-.5px; }


		.overlay * {
			z-index:2;
			position:relative;
		}
			.overlay h2,
			.overlay h3 {
				margin-bottom:0;
				padding-bottom:0;
			}




.arrow_dot {
		width:30px;
		aspect-ratio:1;
		background:var(--lightgray);
		border-radius:30px;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		*margin:0px 10px;
		*bottom:-2px;
		position:relative;
		transition:.3s !important;

	}
		.arrow_dot:after {
			content:" ";
			width:60%;
			height:60%;
			background:var(--orange);
			display:block;
			mask-image:url('img/arrow_right.png');
			mask-size:100%;
			mask-position:center;
			mask-repeat:no-repeat;
		}
a:hover  .arrow_dot {
	background-color:black;
}

.arrow_dot.left { transform:rotate(180deg); }
.arrow_dot.bottom { transform:rotate(90deg); }
.arrow_dot.top { transform:rotate(270deg); }
@media (max-width:991px) {
.arrow_dot { width:22px; margin: 0px 6px; bottom:0; }
}

	/* Top Bar */

	.top-bar {
		width:100%;
		position:absolute;
		top:30px;
		z-index:100;
		overflow:visible;

	}
	.scrolling .top-bar {
		top:0px;
		position:fixed;
	}

	.top-bar:after {
		content:" ";
		width:100%;
		height:150px;
		top:-200px;
		left:0;
		background:linear-gradient(0deg, rgba(235,232,229, 0) 0%, rgba(235,232,229, 1) 100%);
		position:absolute;
		z-index:-1;
		pointer-events:none;
		opacity:0;
		transition:.6s;
	}
		.scrolling .top-bar:after {
			opacity:1;
			top:-1px;
		}
		.nav-opened .top-bar:after {
			opacity:0;
			top:-10px;
			transition:.2s;
		}

		.top-bar .contents {
			display:flex;
			justify-content:space-between;

			height:100%;
			position:relative;
			height:80px;
		}
			.top-bar .logos {
				width:360px;
				display:block;
				margin:0px 15px 0px 0px; ;
				transition:.5s;
				position:relative;
				overflow:visible;
			}
				.top-bar .logos .logo {
					background-image:url('img/logo_brainstorm_en_concept_zwart.png');
					background-size:contain;
					background-position: 0% 40%;
					background-repeat:no-repeat;
					width:calc(100% - 60px);
					height:calc(100% - 30px);
					display:block;
					position:absolute;
					top:10px;
					left:0;
					transition:.3s;
				}
				body:not(.home) .top-bar .logos .logo.white {
					opacity:0;
				}
				.top-bar .logos .logo.white {
					background-image:url('img/logo_brainstorm_en_concept_wit.png');
				}


				.home .top-bar .logo {
					margin:0px 20px 0px 40px;
				}
					.home.scrolling .top-bar .logo {
						margin-left:0px;
					}
					.home.scrolling .top-bar .logo.white {
						opacity:0;
					}


			.top-bar nav {
				display:flex;
				align-items:flex-start;
			}
				.top-bar nav.desktop .cta {
					padding-bottom:12px;
					padding-left:15px;
					padding-top:12px;
					transition:.3s;
				}


				.top-bar nav.desktop .nav-bar ul   {
					padding:0px 40px;
					background:black;
					display:flex;
					flex-direction:row;
					margin:12px 15px;
					gap:40px;
					height:46px;
					line-height:46px;
					border-radius:23px;
					transition:.3s;
				}
				.home:not(.scrolling) .top-bar nav.desktop .nav-bar ul {
					background:var(--lightgray);
				}
				.home.scrolling .top-bar nav.desktop .nav-bar ul  {
					background-color:black;
				}
					.top-bar nav.desktop ul li {
						list-style-type:none;
						padding:0;
					}
						.top-bar nav.desktop ul li a {
							font-weight:600;
							color:var(--lightgray);
							font-family:rubik;
							transition:.1s;
							height:100%;

						}
						.home:not(.scrolling) .top-bar nav.desktop ul li a {
							color:black;
						}
						.top-bar nav.desktop ul li a:hover {
							color:var(--orange) !important;
							text-decoration:none;
						}

.top-bar .burger {
	width: 46px;
	aspect-ratio:1;
	border-radius:46px;
	transition:.3s;
	display:inline-block;
	margin:20px 5px 5px 5px;
	position:relative;
	overflow:visible;
	display:none;
}
.home:not(.scrolling, .nav-opened) .top-bar .burger {
	margin-top:5px;
}
	.top-bar .burger .line {
		width:60%;
		height:2px;
		border-radius:3px;
		background:black;
		position:absolute;
		top:calc(50% - 1px);
		left:20%;
		overflow:visible;
		transition:.3s;
	}
		.top-bar .burger .line.l2 { top:calc(33% - 1px); }
		.top-bar .burger .line.l3 { top:calc(67% - 1px); }


nav.mobile {
	position:fixed;
	top:-100%;
	left:0;
	width:100%;
	height:100%;
	background-color:black;
	z-index:80;
	padding-top:140px;
	pointer-events:none;
	opacity:0;
	transition:.4s;
}
	nav.mobile ul {
		opacity:0;
		transform:translateY(-100px);
		transition:.3s .3s;
		padding-left:0;
	}
		nav.mobile ul li {
			padding-left:0;
			list-style-type:none;
			padding:10px 0px;
		}

			nav.mobile ul li a {
				color:white;
				font-weight:800;
				font-size:18px;
			}
			nav.mobile ul li a:hover {
				text-decoration:none;
				color:var(--orange);
			}


@media (max-width:1199px) {
	.top-bar nav.desktop .nav-bar,
	.top-bar nav.desktop .cta {
		display:none;
	}
	.top-bar nav.desktop .burger {
		display:block;
	}

	.nav-opened .top-bar {
		position:fixed;
		top: 30px;
		background:none;
		transition:.3s;
	}
	.nav-opened .logo { margin-left:0 !important; }
	.nav-opened .logo.black { opacity:0; }
	.nav-opened .logo.white { opacity:1 !important; }

	.nav-opened nav.mobile {
		top:0;
		pointer-events:auto;
		opacity:1;
	}
		.nav-opened nav.mobile ul {
			opacity:1;
			transform:translateY(0);
		}

		.nav-opened .top-bar .burger {
			margin-top:20px;
		}
		.nav-opened .top-bar .burger .line {
			background-color:var(--lightgray);
		}

			.nav-opened .top-bar .burger .line.l1 { transform:rotate(45deg);}
			.nav-opened .top-bar .burger .line.l2,
			.nav-opened .top-bar .burger .line.l3 { transform:rotate(-45deg); top:calc(50% - 1px)}

}

@media screen and (max-width:767px) {
	.top-bar .logo {
		width:200px !important;

	}

	body:not(.home, .nav-opened, .scrolling) .top-bar .logo {
		margin:0px 20px 0px 0px !important;
	}
}

/* Footer */

footer {
	width:100%;
	padding:100px 0 50px 0;
	font-size:18px;
	margin-top:100px;
	font-weight:200;
}
	footer a { color:var(--lightgray); transition:.2s;   }
	footer a:hover { color:var(--orange); text-decoration:none; }

	footer nav, footer nav > div {
		height:100%;
	}

	footer nav ul {
		padding:0;
		height:100%;
		display:flex;
		justify-content:flex-end;
		flex-direction:column;
	}
		footer nav ul li {
			list-style-type:none;
		}


		footer .socials {
			height:100%;
			display:flex;
			align-items:flex-end;
			justify-content: flex-end;
			gap:7px;
		}
			footer .socials a {
				font-size:40px;
				cursor:pointer;
			}


@media (max-width:1199px) {
	footer .socials {
		justify-content:flex-start;
		padding-top:30px;
	}
}
@media (max-width:991px) {
	footer {
		padding:50px 0;
	}
}

/* Video */
.video-player {
	width:100%;
	aspect-ratio: 1920 / 1080;
	border-radius:23px;
}

/* Plyr */

.plyr {
	--plyr-color-main:var(--orange);
	border-radius:23px;
}

.plyr > button.plyr__control {
	opacity:1;
}
.plyr > button.plyr__control:hover {
	transform:translate(-50%, -50%);
}
.plyr input[type=range] {
	background:transparent !important;
}
.plyr .plyr__poster {
	background-size:cover;
}
.plyr .plyr__menu__container .plyr__control>span {
	color:var(--text_color);
}
.plyr .plyr__controls__item.plyr__menu {
	display:none !important;
}
.plyr .plyr__video-wrapper {
	background:transparent;
}
.plyr video {
	object-fit:cover;
	object-position:center;
}

.wp-block-columns .wp-block-embed.is-type-video:first-child,
.wp-block-columns .wp-block-embed.is-type-video:first-child .wp-block-embed__wrapper,
.wp-block-columns .wp-block-embed.is-type-video:first-child .wp-block-embed__wrapper .plyr,
.wp-block-columns .wp-block-video,
.wp-block-columns .wp-block-video .plyr  {
	min-height:100%;
	min-width:100%;
	*height:-webkit-fill-available;
	*height:500px; /* Deze is nodig omdat anders de min-height niet werkt */
	display:block;
	position:relative;
	*border-radius:0;
}

figure {
	padding-bottom:0;
	margin-bottom:0;
}
@media (min-width:781px) {
	.wp-block-columns .wp-block-embed.is-type-video:first-child,
	.wp-block-columns .wp-block-embed.is-type-video:first-child .wp-block-embed__wrapper,
	.wp-block-columns .wp-block-embed.is-type-video:first-child .wp-block-embed__wrapper .plyr,
	.wp-block-columns .wp-block-video,
	.wp-block-columns .wp-block-video .plyr  {
		height:100px;
	}
}


/* Border banner */
.border-banner {

	border:1px solid black;
	border-radius:115px;
	padding:50px 90px;
	display:flex;
	gap:80px;
	justify-content:space-around;
	align-items:center;
	margin:50px auto;
	overflow:hidden;
	position:relative;
}
	.border-banner > div {
		position:relative;
		overflow:hidden;
		height:100%;
		flex:1;
	}

	.border-banner .slick-track, .border-banner .slick-list {
		overflow:visible;
	}
	.border-banner .slick-slide {
		margin:0px 40px;
		height:100%;
		transition:.4s;
	}
		.border-banner .slick-slide:not(.slick-active) {
			opacity:0;
		}
	.border-banner img {
		width:100%;
		height:100%;
		object-fit:contain;
		object-position:center;
			height:130px;
	}
@media screen and (max-width:1199px) {
	.border-banner img {
		height:100px;
	}
}
@media screen and (max-width:576px) {
	.border-banner  {
		padding:20px 50px;
		margin:20px auto;
	}
}

/* Zoom bg */
.zoom-bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:inherit;
	background-size:cover;
	background-position:center;
	overflow:hidden;
	transition:.3s;
	border-radius:inherit;
	display:inherit;
	flex-direction:inherit;
	align-items:inherit;
	justify-content:inherit;
	z-index:1;
}

.zoom-bg:before {
	content:" ";
	width:100%;
	height:100%;
	background:inherit;
	background-size:inherit;
	display:block;
	transition:.3s;
	position:absolute;
	top:0;
	z-index:-1;

}
*:hover > .zoom-bg:before {
	transform:scale(1.1);
	transition:1s;
}


/* Glow backdrop */

.glow-backdrop {

	position:relative;
	overflow:visible !important;
	background-size:0;
	background-position:center;

	z-index:1;

}
	.glow-backdrop:after {
		content:" ";
		width:100%;
		height:100%;
		background-image:inherit;
		filter:blur(30px) saturate(150%);
		-webkit-filter:blur(30px)  saturate(150%);
		background-size:cover;
		background-position:center;
		display:block;
		transform:translateY(30px);
		z-index:-2;
		position:relative;
		position:absolute;
		top:0;
		left:0;
		transition:.3s;
		opacity:.5;
		  will-change: transform;
	}
@media (max-width:991px) {
	.glow-backdrop:after {
		transform:translateY(10px);
		filter:blur(20px) saturate(100%);
	}
}

/* Page designs */

header {
	margin:30px auto;
	position:relative;
	overflow:visible;
}
	body:not(.home) header {
		margin-top:130px;
	}

	header img {
		border-radius:23px;
	}


	.scroll-indicator {
		width:18px;
		height:32px;
		border-radius:20px;
		background:var(--lightgray);
		*border:1.5px solid white;
		position:absolute;
		right:calc(50% - 10px);
		bottom:50px;
	}
	.scroll-indicator.sticky {
		position:fixed;
	}
		.scroll-indicator:before {
			content:" ";
			width:7px;
			height:12px;
			position:absolute;
			top:3px;
			left:calc(50% - 3.5px);
			*border:1.5px solid white;
			background-color:rgba(0,0,0,.3);
			border-radius:5px;
		}
		.scroll-indicator:after {
			content:" ";
			width:3px;
			height:3px;
			border-radius:4px;
			background-color:var(--lightgray);
			left:calc(50% - 1.5px);
			top:5px;
			position:absolute;
			animation:scroll 1.5s infinite;
			*box-shadow:0px 0px 5px white;
		}

@media (max-width:991px) {
	.scroll-indicator {
		display:none;
	}
}
	@keyframes scroll {
		0% { transform:translateY(0); opacity:0; }
		30% { transform:translateY(0); opacity:1; }
		70% { transform:translateY(5px); opacity:1; }
		100% { transform:translateY(5px); opacity:0; }
	}

.single_content .wp-block-columns {
	gap:30px;
}
.single_content .wp-block-image {
	border-radius:23px;
	overflow:hidden;
	width:100%;
	margin:25px auto;
}
.single_content .wp-block-columns .wp-block-image {
	min-height:100%;
	height:100%;
	margin:0;
	position:relative;
}
	.wp-block-image img {
		width:100%;
	}
	.single_content .wp-block-columns .wp-block-image img {
		height:-webkit-fill-available;
		object-fit:cover;
		object-position:center;
		position:relative;
	}

	.single_content p,
	.single_content ul {
		margin-top:30px;
		margin-bottom:30px;
		font-weight:200;
	}
		.single_content h2 {
			font-size:40px;
			margin-bottom:0;
		}
		.single_content h2 + p {
			margin-top:15px;
		}
		.single_content p + p {
			margin-top:0;
		}

@media (max-width:767px) {
	.single_content h2 {
		font-size:28px;
	}
}

/* Fades */

.fade-in,
section:not(.block-fade) {
	opacity:0;
	transition:opacity .8s, transform .8s;
	transform:translateY(30%);

}
	.fade-in.from-top {
		transform:translateY(-30%);
	}
	.fade-in.from-right {
		transform:translateX(30%);
	}
	.fade-in.from-left {
		transform:translateX(-30%);
	}
	.fade-in.visible,
	section.visible {
		opacity:1;
		transform:translateX(0%);
	}

/* Related projects */


.related-project .poster {
  aspect-ratio:1;
  width:100%;
  background-color:transparent;
  border-radius:15px;
  position:relative;
  *overflow:hidden;
  display:flex;
  justify-content:flex-end;
  flex-direction:column;
  z-index:1;
  transition:.3s;
  text-decoration:none;
	margin:0px 0px 15px 0px;
}
    .related-project .poster .contents {
      color:var(--lightgray);
      padding:60px 30px 30px 30px;
      background: #000000;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
      transition:.5s;
    }
@media (min-width:991px) {
	.related-project .poster {
		  margin:20% 0 0 0;
	}
    .related-project:nth-of-type(2) .poster {
      width:80%;
      margin:60% 10% 0px 10%;
    }
    .related-project:nth-of-type(3) .poster {
      aspect-ratio:.8;
      margin:0;
    }
}


/* Related projects */


.related-ruimte .poster {

	width:100%;
	aspect-ratio:1920 / 1080;
  background-color:transparent;
  border-radius:15px;
  position:relative;
  *overflow:hidden;
  display:flex;
  justify-content:flex-end;
  flex-direction:column;
  z-index:1;
  transition:.3s;
  text-decoration:none;
	margin:0px 0px 20px 0;

}
    .related-ruimte .poster .contents {
      color:var(--lightgray);
      padding:60px 30px 30px 30px;
      background: #000000;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
      transition:.5s;

    }
		.related-ruimte .poster .contents h4 {
						max-width:300px;
		}



@media (min-width:991px) {
	.related-ruimte .poster {
		height:100%;
		margin:0px 25px 15px 25px;
		  width:calc(100% - 50px);
			aspect-ratio:unset;
	}
    .related-ruimte:nth-of-type(3) .poster {

			margin-bottom:100px;
			width:calc(100% - 100px);
			margin:100px 50px 0px 50px;
			height:calc(100% - 30px);
    }
}

	/* CTA */

	#cta {
		position:relative;
		overflow:visible;
		display:block;
	}

		#cta .tekst {
			padding-left:30px;
			*padding-bottom:30px;
			margin:50px 0;
		}

			#cta .tekst {
				margin:-20px 0px 60px 0;
				position:relative;
			}

		#cta img {
			width:calc(100% + 80px);
			max-height:calc(100% + 100px);
			position:absolute;
			right:-50px;
			bottom:-30px;
			object-fit:contain;
			object-position:center;
			z-index:3;
		}


	#cta .overlay.top.right {
		min-width:300px;
		min-height:70px;
	}
@media (max-width:1199px) {
	#cta img {
		width:100%;
		right:-10px;
		bottom:-15px;
	}
}
@media (max-width:991px) {
	#cta .overlay.top.right {
		min-width:300px;
		min-height:60px;
	}

	#cta .tekst {
		padding:0px 30px;
	}
	#cta .tekst h2:first-of-type,
	#cta .tekst h3:first-of-type {
		margin-top:0px;
	}
}
@media (max-width:767px) {
	#cta .tekst {
		margin-top:0px;
	}
	#cta img {
		left:30px;
		max-height:110px;
		position:relative;
		right:unset;
		object-position:center;
		bottom:0;
		margin:20px 0;
		left:0;
		top:0;
	}

	#cta .overlay.top.right {
		min-width:60px;
		min-height:60px;
	}
	#cta .overlay.top.right.empty {
		position:absolute;
		right:15px;
	}
}

@media (max-width:576px) {
	#cta img {



	}

}



/* Forms */

.form-control {
	width:100%;
	border-radius:23px;
	height:46px;
	line-height:46px;
	background-color:rgba(255,255,255,.3);
	border:0;

	transition:.3s;
	box-shadow:inset 0px 10px 20px -5px rgba(0,0,0,.3);
	color:var(--lightgray) !important;
}
.form-control:focus {
	background-color:rgba(255,255,255,.4);
	*box-shadow:inset 0px 0px 0px 2px var(--lightgray);
}
	textarea.form-control {
		height:200px;
		resize:none;
		line-height:36px;
	}

	input[type="submit"].form-control {
		background-color:var(--orange);
		font-weight:800;
		height:46px;
		line-height:46px;
		box-shadow:none;
		cursor:pointer;
		padding:0px 30px;
		margin:0;
	}
	input[type="submit"].form-control:hover {
		background-color:black;
	}

.wpcf7-spinner {
	display:none;
}


/* Panorama */
body .wonderpano-panorama {
	width:100%;
	aspect-ratio:1920 / 1080;
	height:unset;
	border-radius:23px;
}
body .pnlm-about-msg { display:none !important; }

.wonderpano-panorama:after {
	content:" ";
	width:120px;
	height:100px;
	position:absolute;
	top:calc(50% - 50px);
	left:calc(50% - 60px);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	background-image:url('img/360_icon.png');
	pointer-events:none;
	transition:.3s;
}
.wonderpano-panorama.dragged:after {
	opacity:0;
}







/*Darkmode */


.theme-toggle {
	text-align:right;
	display:none;
	font-size:30px;
	cursor:pointer;
}
.theme-toggle:hover {
	transition:.3s;
	opacity:.7;
}
@media (prefers-color-scheme: light) {
	.theme-toggle.to-dark {
		display:block;
	}
}
@media (prefers-color-scheme: dark) {
	.theme-toggle.to-light {
		display:block;
	}

	html:not(.light) body,
	html:not(.light) .overlay {
		background-color:rgba(10,10,10);
	}
	html:not(.light) .top-bar .burger .line {
		background:var(--lightgray);
	}

	html:not(.light) h1,html:not(.light) h2,html:not(.light) h3,html:not(.light) h4,html:not(.light)  p {
		color:var(--lightgray);
	}

	html:not(.light)  .logo-slider, html:not(.light) .button.bg-black {
		filter:invert(1);
	}
	html:not(.light) .top-bar .logos .logo.white {
		opacity:1 !important;
	}
	html:not(.light) .top-bar:after {
		background:linear-gradient(0deg, rgba(10,10,10, 0) 0%, rgba(10,10,10, 1) 100%)
	}

	html:not(.light) .top-bar nav.desktop .nav-bar ul {
		background-color:var(--lightgray) !important;
	}

	html:not(.light) .top-bar nav.desktop ul li a {
		color:var(--black);

	}

	html:not(.light) .cl-black {
		color:var(--lightgray);
	}

	html:not(.light) .glow-backdrop:after {
		opacity:.3;
	}

	html:not(.light) .bg-grain, html:not(.light) #gdprc_bar {
		background: #383838;
		background: linear-gradient(38deg, rgba(36, 36,36, 1) 1%, rgba(10,10,10, 1) 25%, rgba(46, 46, 46, 1) 69%, rgba(15,15,15, 1) 100%);
	}
}
html.light .theme-toggle.to-light,
html.dark .theme-toggle.to-dark {
	display:none;
}
html.light .theme-toggle.to-dark,
html.dark .theme-toggle.to-light {
	display:block;
}
html.dark body,
html.dark .overlay {
	background-color:rgba(10,10,10);
}
html.dark .top-bar .burger .line {
	background:var(--lightgray);
}
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark  p {
	color:var(--lightgray);
}

html.dark  .logo-slider, html.dark .button.bg-black {
	filter:invert(1);
}
html.dark .top-bar .logos .logo.white {
	opacity:1 !important;
}
html.dark .top-bar:after {
	background:linear-gradient(0deg, rgba(10,10,10, 0) 0%, rgba(10,10,10, 1) 100%)
}

html.dark .top-bar nav.desktop .nav-bar ul {
	background-color:var(--lightgray) !important;
}

html.dark .top-bar nav.desktop ul li a {
	color:var(--black);

}

html.dark .cl-black {
	color:var(--lightgray);
}

html.dark .glow-backdrop:after {
	opacity:.3;
}

html.dark .bg-grain, html.dark #gdprc_bar {
	background: #383838;
	background: linear-gradient(38deg, rgba(36, 36,36, 1) 1%, rgba(10,10,10, 1) 25%, rgba(46, 46, 46, 1) 69%, rgba(15,15,15, 1) 100%);
}