/* CSS Document */

/* ROOT */
:root {
	--color-bg: #F9F9F9;
	--color-white: #FFFFFF;
	--color-black: #333333;
	--color-stone-blue: #00416B;
	--color-stone-midblue: #22819E;
	--color-stone-lightblue: #6FB1C8;
	--color-stone-highlightblue: #2595b8;
	--color-grey-light: #EEEEEE;
	--color-grey-midlight: #CCCCCC;
	--color-grey-mid: #AAAAAA;
	--color-grey-dark: #666666;
	--page-width: 1330px;
	--page-small: 950px;
}


/* GENERAL */
body{
	margin: 0;
	padding: 0;
	min-width: 350px;
	background-color: var(--color-bg);
	font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 400;
	font-family: 'Poppins', sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: scroll;
}

body, html{
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

html{
	box-sizing: border-box;
    font-size: 62.5%;
    height: 100%;
	background-color: var(--color-white);	
}

section, .section {
    position: relative;
    max-width: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, p {
    margin: 2rem 0;
}
h1, h2, h3{
	line-height: 1.12;
}
h1, h2{
	font-weight: 600;
	letter-spacing: 0.05rem;
}

h1 strong,
h2 strong{
	font-size: 102%;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
}
h1 em,
h1 em strong,
h2 em,
h2 em strong{
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.06rem;
}
h1{
	font-size: 2.9rem;
	color: var(--color-stone-blue);
}

h1 u{
	text-decoration: none;
	font-size: 90%;
}

h2{
	font-size: 2.7rem;
	color: var(--color-stone-blue);
}
h3{
	font-size: 1.8rem;
	color: var(--color-stone-blue);
	margin-bottom: -1.3rem;
}
h4{
	font-size: 1.65rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-stone-blue);
}
h5{
	font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 400;
    opacity: 0.4;
}

h2 + h3,
h1 + h3{
	margin-top: -1.5rem;
}
h2 + h4,
h1 + h4{
	margin-top: -1.7rem;
}

h4 + h1,
h4 + h2{
	margin-top: -1.8rem;
}
p strong{
	font-weight: 500;
	display: inline-block;
	line-height: 1.7;
}
p + h3{
	margin-top: 3rem;
}

.main-sections .column p a{
	white-space: nowrap;	
}
ul,
ul.menu{
	padding: 0;
	margin: 2rem 0;	
}

img{
	max-width: 100%;
	display: inline-block;
	height: auto;	
}
a{
	outline: none;
	color: inherit;
}
.menu-item{
	padding: 0;
}

section.style--15 + .field--name-field-articles .field__item:first-child article section.style--15 .row{
	padding-top: 0;	
}
p.scroller{
	overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin-left:-1.2rem;
	margin-right:-1.2rem;
}
blockquote{
	margin: 2rem 0;
}
.style--15 blockquote{
	padding: 2.5rem 5rem;
	margin: 0;
	background-color: var(--color-white);
	position: relative;
	box-shadow: 2px 2px 9px 0px rgba(0, 0, 0, 0.15);
}
blockquote.double{
	margin: 4rem 0 2rem 0;
}
blockquote.double > *:first-child{
	margin-top: 0;
}

blockquote a{
	text-decoration: none;	
}
section .column .field blockquote ul{
	list-style: none;
	padding-left: 2.4rem;	
}
blockquote ul li{
	position: relative;	
}
blockquote ul li i{
	width: 2rem;
	position: absolute;
	left: -2.6rem;
	top: 0.65rem;
	color: var(--color-grey-mid);
	text-align: center;
}

.main section .column ul.icons{
	display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    column-gap: 4rem;
	margin: 1rem 0;
}
	.main section .column ul.icons li{
		flex-basis: 100%;
		max-width: 100%;
		position: relative;
		margin: 1rem 0 2rem 0;
		line-height: 1.4;
		font-size: 1.35rem;
		color: var(--color-grey-dark);
		text-align: center;
	}
		.main section .column ul.icons li strong{
			text-transform: uppercase;
			font-size: 1.4rem;
			display: inline-block;
			margin-bottom: 0.5rem;
		}
		.main section .column ul.icons li i{
			display: block;
			font-size: 19px;
			color: var(--color-stone-blue);
			margin-bottom: 1rem;
		}
	.main section.layout--11 .column ul.icons{
		padding-left: 3rem;
		padding-right: 3rem;
	}

.column p em{
	font-style: normal;
    opacity: 0.4;
    font-size: 1.3rem;
}


/* ROWS & CONTAINERS */
.row{
	width: 100%;
	max-width: var(--page-width);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
}
.column{
	flex-basis: 100%;
	max-width: 100%;	
}
main.main{
	position: relative;	
	max-width: 100%;
    overflow: hidden;
	/* overflow: hidden;*/
}
/* MARGINS & PADDINGS */
.row {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.column {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.main-sections .row{
	padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.field--name-field-articles{
	/*margin-top: -2rem;*/
}
.section-1.layout--23 + .field--name-field-articles .field__item:first-child article .layout--10,
.section-1.layout--23 + .field--name-field-articles .field__item:first-child article .layout--13{
	margin-top: -3rem;	
}

section .column .field ul,
section .column .field ol{
	padding-left: 1.9rem;
}
section .column .field ul li{
	margin-bottom: 0.3rem;
	break-inside: avoid-column;
}


/* LAYOUT */
/*
	7	main 100
	8	main sidebar 50/50
	
	9	sidebar main 50/50
	13	sidebar main 33/66
	
	11 Full width
*/
.main-banner-type--3 + section .row,
.main-banner-type--3 + .projecten-crumbler .row{
	padding-top: 0;
}
.layout--23 .column-2,
.layout--11 .column-2,
.layout--7 .column-2{
	display: none;
}
.layout--9 .column-1{
	order: 2;
}
.layout--9 .column-2{
	order: 1;
}
section.layout--11 .row{
	width: 100%;
	max-width: 100%;
	padding: 0;
}
section.layout--11 .column-1 iframe{
	width: calc(100% + 3rem);
    display: block;
    margin-bottom: -3.5rem;
    margin-top: -3.5rem;
    margin-left: -1.5rem;
    filter: grayscale(0.9);
}

/* HEADER */
header{
	position: sticky;
	top: 0;
	background-color: var(--color-bg);
	z-index: 200;
	transition: all .35s;	
	/*border-bottom: 1px solid #EEE;*/	
}
	body.scroll-min header{
		box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
	}

header.main-header .column{
	margin-top: 0;	
	margin-bottom: 0;
}
.column.header-column-logo{
	flex-basis: 200px;
	max-width: 200px;
	align-items: center;
    display: flex;
	padding-left: 0;
}
	.column.header-column-logo a{
		display: block;	
		padding: 0.7rem 0 0.7rem 0;
	}

.column.header-column-nav{
	padding-right: 0;
}	
	.menu-nav{
		display: flex;
		flex: 1;
	}
	.menu-toggle{
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		text-transform: uppercase;
		position: relative;
		z-index: 250;
	}
	.menu-toggle--title {
		align-self: center;
		margin-right: 0.5rem;
		display: none;
		color: var(--color-stone-blue);
		font-weight: 500;
	}
	.menu-toggle--bars {
		display: flex;
		width: 40px;
		height: 40px;
		position: relative;
	}
		.menu-toggle--bars span {
			width: 70%;
			height: 3px;
			background-color: var(--color-stone-blue);
			position: absolute;
			left: 15%;
			top: 50%;
		}
			.menu-toggle--bars span:nth-child(1), 
			.menu-toggle--bars span:nth-child(2){
				margin-top: -2px;
				transition: 0.5s cubic-bezier(.77, 0, .175, 1);
				transition-delay: 0s;
			}
			.menu-toggle--bars span:nth-child(3) {
				margin-top: -9px;
				opacity: 1;
				transition: 0.3s ease-in;
				transition-delay: 0.3s;
			}
			.menu-toggle--bars span:nth-child(4) {
				margin-top: 5px;
				opacity: 1;
				transition: 0.3s ease-in;
				transition-delay: 0.3s;
			}
			.menu-open .menu-toggle--bars span:nth-child(1) {
				transform: rotate(225deg);
				transition-delay: 0.3s;
			}
			.menu-open .menu-toggle--bars span:nth-child(2) {
				transform: rotate(135deg);
				transition-delay: 0.3s;
			}
			.menu-open .menu-toggle--bars span:nth-child(3) {
				margin-top: -2px;
				opacity: 0;
				transition-delay: 0s;
			}
			.menu-open .menu-toggle--bars span:nth-child(4) {
				margin-top: -2px;
				opacity: 0;
				transition-delay: 0s;
			}

.column.header-column-nav nav > ul.menu > .menu-item.footer-item{
	display: none;
}
/* IMAGE EFFECT */
.image-effect--1 img{
	object-position: top;
	filter: grayscale(1);
}
.image-effect--2 img{
	filter: saturate(0.5);
}
.image-effect--3 img{
	filter: sepia(0.7);
}
.image-effect--4 img{
	/*object-position: top;*/
	filter: brightness(0.9);
}

/* BANNER */
.main-banner{
	padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.main-banner .main-banner-container{
	background-color: var(--color-grey-light);
}
.main-banner .main-banner-list{
	list-style: none;
	padding: 0;
	margin: 0;
}

.main-banner .main-banner-list{
	opacity: 0;
	/*filter: blur(4px);*/
	transition: all .9s;
}
body.loaded .main-banner .main-banner-list.animated{
	opacity: 1;
	/*filter: blur(0);*/
}
.main-banner .main-banner-list .banner-item:not(.splide__slide){
	display: none;
}
.main-banner .main-banner-list .banner-item:first-child{
	display: block;
}
.main-banner .banner-content{
	width: 100%;
	position: relative;
    display: flex;
    flex-wrap: wrap;
	background-color: var(--color-grey-light);
	aspect-ratio: 2.8;
	overflow: hidden;
}
.main-banner.main-banner-type--1 .banner-content{
	aspect-ratio: 1.6;
}
.main-banner.main-banner-type--2 .banner-content{
	aspect-ratio: 1.8;
}
.main-banner.main-banner-type--3 .banner-content{
	aspect-ratio: 5;
}
.main-banner .banner-image > article,
.main-banner .banner-image > article .field,
.main-banner .banner-image > article .field__item,
.main-banner .banner-image > article img{
	width: 100%;
	height: 100%;
}
.main-banner .banner-overlay,
.main-banner .banner-image{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
	.main-banner .banner-image img{
		width: 100%;
		height: 100%;
		display: block;	
		object-fit: cover;
	}
	
.main-banner .banner-overlay{
	display: flex;
	align-items: center;
}
	.banner-overlay .banner-overlay-container{
		padding-left: 1rem;
		padding-right: 1rem;
		position: relative;
		display: flex;
	}
		.banner-overlay-container .banner-overlay-content{
			position: relative;
			padding-left: 1.5rem;
			padding-right: 1.5rem;
			padding-bottom: 2rem;
			padding-top: 2rem;
			line-height: 1.4;
			letter-spacing: 0;
			color: var(--color-white);
			/*letter-spacing: 0.03rem;*/
			cursor: default;
		}
		.banner-overlay-container .banner-overlay-content > *{
			margin: 1rem 0;
			position: relative;
		}
		.banner-overlay-container .banner-overlay-content p{
			opacity: 0.85;
			letter-spacing: 0.07rem;
			margin-top: -0.7rem;
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
		}
		.banner-overlay-container .banner-overlay-content h3{
			/*-webkit-text-stroke-width: 0.5px;
			-webkit-text-stroke-color: white;*/
			color: rgba(255,255,255,0.9);
			text-transform: uppercase;
			line-height: 0.92;
			font-weight: 600;
		}
	/* OVERLAY STYLES */
	.overlay-style--1 .banner-overlay-content h3{
		font-size: 4rem;
		text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.6);
		/*opacity: 0.9;*/
	}
		.overlay-style--1 .banner-overlay-container{
			width: 100%;
			max-width: var(--page-width);
			margin-left: auto;
			margin-right: auto;
		}
		.overlay-style--2 .banner-overlay-container,
		.overlay-style--3 .banner-overlay-container{
			width: 65%;
			align-self: flex-end;
			padding-bottom: 5.5%;
		}
			.overlay-style--2 .banner-overlay-content,
			.overlay-style--3 .banner-overlay-content{
				opacity: 0;
				transition: opacity .25s; 
				transition-delay: 0.25s;	
			}
			.overlay-style--2 .banner-overlay::before,
			.overlay-style--3 .banner-overlay::before{
				content: '';
				width: 64%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				clip-path: polygon(0 0, 77% 0, 100% 100%, 0 100%);
				transform: translateX(-100%);
				opacity: 0;
				transition: all .25s; 	
			}
			.overlay-style--2 .banner-overlay::before{
				background-color: rgba(0,0,0,0.3);
			}
			.overlay-style--3 .banner-overlay::before{
				background-color: rgba(0,65,106,0.6);
				mix-blend-mode: multiply;
			}
			.banner-item.is-active .overlay-style--2 .banner-overlay::before,
			.banner-item.is-active .overlay-style--3 .banner-overlay::before{
				opacity: 1;
				transform: translateX(0%);
			}
			.banner-item.is-active .overlay-style--2 .banner-overlay-content,
			.banner-item.is-active .overlay-style--3 .banner-overlay-content{
				opacity: 1;
			}
	.overlay-style--2 .banner-overlay-content h3,
	.overlay-style--3 .banner-overlay-content h3{
		font-size: 2rem;
	}

.main-banner.main-banner-type--1{
	margin-bottom: 1rem;	
}
/* BANNER ICON BLOCKS */
/*body:not(.user-logged-in) .view-icon-blocks-overview{
	display: none;	
}*/
.banner-icon-blocks{
	z-index: 100;
	padding: 0 2rem;
}
.iconblock-container{
	margin: -6.5rem auto -4rem auto;
	max-width: var(--page-small);
}
.iconblock-list{
	list-style: none;
	padding: 0;	
	margin: 0;
	display: flex;
}
	.iconblock-list:not(.splide__list){
		
	}
	.iconblock{
		padding: 0 1.5rem;
		margin: 2rem 0;
		display: flex;
    	justify-content: center;
	}
	.iconblock:not(.splide__slide){
		flex: 1;
		display: none;
		/*max-width: 320px;*/
	}
	.iconblock:not(.splide__slide):nth-child(1){
		display: flex;
	}
	.iconblock-content{
		flex: 1;
		position: relative;
		background-color: var(--color-white);
		box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.1);
		cursor: default;
		display: block;
		max-width: 316px;
	}
	a.iconblock-content{
		text-decoration: none;
		cursor: pointer;
	}
	a.iconblock-content::after{
		content: '\f054';
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 0.9rem;
		position: absolute;
		right: 1rem;
		bottom: 0.6rem;
		color: var(--color-grey-mid);
	}
		.iconblock--main{
			padding: 1.5rem 1.8rem 1.7rem 1.8rem;
			line-height: 1.1;
			font-size: 1.5rem;
			text-align: center;
		}
			.iconblock--main p,
			.iconblock--main h2{
				margin: 0;	
			}
			.iconblock--main h2{
				font-size: 2rem;
				line-height: 1.2;	
			}
			.iconblock--main em{
				font-size: 1.3rem;
				font-style: normal;
				color: var(--color-grey-mid);	
			}
		.iconblock-content.icon .iconblock--icon{
			width: 5rem;
			height: 5rem;
			background-color: #00416b;
			border-radius: 50%;
			position: absolute;
			top: -2.9rem;
			left: 50%;
			transform: translateX(-50%);
			color: #FFF;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.25);
			padding: 1.1rem;
		}
			.iconblock-content.icon .iconblock--icon img{
				width: 100%;
				height: 100%;
				display: block;
				object-fit: contain;
				margin: -0.3rem 0 0 0;
			}
		.iconblock-content.icon--inline .iconblock--title{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
			.iconblock-content.icon--inline .iconblock--icon{
				width: 2.5rem;
				height: 2.5rem;
				position: relative;
				top: -0.1rem;
				margin: 0 0.5rem -0.1rem 0;
			}
				.iconblock-content.icon--inline .iconblock--icon img{
					width: 100%;
					height: 100%;
					display: block;
					object-fit: contain;
					filter: invert(79%) sepia(57%) saturate(1427%) hue-rotate(172deg) brightness(96%) contrast(105%);
				}
		.iconblock.is-active .iconblock-content,
		a.iconblock-content:hover{
			box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
			transform: scale(1.01);
		}
		.splide__track--nav>.splide__list>.splide__slide{
			border: unset;
		}
		/*.iconblock.is-active .iconblock-content h2,*/
		a.iconblock-content:hover h2{
			color: var(--color-stone-midblue);
		}
		.iconblock.is-active .iconblock--main em,
		a.iconblock-content:hover .iconblock--main em{
			color: var(--color-black);	
		}
		.iconblock.is-active .iconblock-conten::after,
		a.iconblock-content:hover::after{
			color: var(--color-stone-midblue);
			right: 0.9rem;
		}
		/*.iconblock.is-active .iconblock-content.icon--inline .iconblock--icon img,*/
		a.iconblock-content.icon--inline:hover .iconblock--icon img{
			filter: invert(63%) sepia(90%) saturate(384%) hue-rotate(147deg) brightness(101%) contrast(92%)
		}

/* FOOTER */
footer{
	padding: 10rem 0 9rem 0;
	border-top: 1px solid var(--color-grey-light);
	letter-spacing: 0.2px;
	line-height: 2;
	position: relative;	
	z-index: 100;
}
footer > *{
	position: relative;	
}
footer h2{
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--color-stone-blue);
	position: relative;
}
footer strong{
	color: var(--color-stone-blue);
}
footer ul.menu .menu-item--active-trail a,
footer ul.menu a.is-active,
footer a:hover{
	color: var(--color-stone-midblue);
}
	/* footer main */
	.footer-content{
		color: var(--color-black);
	}
	.footer-content .row .column:first-child .field{
		max-width: 500px;
	}
	.footer-content .row .column:first-child h2::before{
		content: '';
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.footer-content .row .column:last-child{
		flex: 0;
		white-space: nowrap;
	}
	.footer-content nav .menu-item{
		text-transform: uppercase;
	}
	.footer-content nav ul{
		column-count: 2;
	}
	.footer-content nav.column{
		padding-right: 0;
	}

	/*.footer-content nav .menu-item:first-child{
		display: none;	
	}*/
	
	/* footer socials */
	.footer-socials .column{
		display: flex;
    	align-items: center;
		margin-top: 0.5rem;
    	margin-bottom: 0.5rem;
	}
	.footer-socials .column::before{
		content: '';
		height: 0.5px;
		flex: 1;
		background-color: var(--color-grey-mid);
		opacity: 0.8;
	}
	.footer-socials .field ul{
		display: flex;
    	list-style: none;
		margin: 0 0 0 3rem;
		column-gap: 2rem;
	}
	.socials{
		color: var(--color-stone-blue);
		font-size: 2.8rem;
	}
	
	/* footer end */
	.footer-endline{
		font-size: 1.3rem;
		color: var(--color-grey-mid);
    	line-height: 1.3;
	}
	.footer-endline a{
		display: inline-block;	
	}
	.footer-endline .row{
		align-items: center;
		padding-left: 3rem;
		justify-content: center;
	}
	.footer-endline .column{
		flex: 0;
		white-space: nowrap;
		padding: 0;
	}
	.footer-endline .column,
	.footer-endline ul.menu,
	.footer-endline p{
		margin-top: 0;
		margin-bottom: 0;	
	}
	.footer-endline ul.menu{
		display: flex;	
	}
	.footer-endline li.menu-item:before{
		content: '/';
		margin: 0 0.3rem 0 0.7rem;
	}

/* CONTENT */
.layout-content{
	line-height: 1.8;
    letter-spacing: 0.02rem;
}

/* PROJECTEN */
.view-projects{
	
}
.view-projects .views-exposed-form{
	display: flex;
    justify-content: flex-start;
    margin-top: 0rem;
    margin-bottom: 2rem;
}
#edit-submit-projects{
    display: none;
}
	.view-projects .views-exposed-form .form-item{
		margin: 0 0.7rem;
	}
		.view-projects .views-exposed-form .form-item select{
			min-width: 160px;
			outline: none;
			border: none;
			padding: 0.3rem 0.3rem 0.3rem 0;
			color: var(--color-black);
			background-color: transparent;
			border-bottom: 1px solid var(--color-grey-mid);
			font-size: 15px;
    		letter-spacing: 0.01rem;
			cursor: pointer;
		}
.view-projects-highlight{
	
}
.projectslider-container{
	margin: 0 -2rem;
}
.projectslider-container ul.projectslider{
	list-style: none;
	padding: 0;
	margin: 0;
}
	.projectslider li.project{
		width: 33.33%;
		float: left;
		padding: 2rem;
	}
	.projectslider li.project:not(.splide__slide){
		display: none;
	}
	.projectslider li.project:nth-child(1),
	.projectslider li.project:nth-child(2),
	.projectslider li.project:nth-child(3){
		display: block;
	}

.projectlist-container{
	
}
.projectlist{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 4rem -2rem 2rem -2rem;
}
	.projectlist li.project{
		flex-basis: 100%;
		max-width: 100%;
		padding: 0 2rem;
	}
	
	.project--link{
		text-align: center;	
		display: block;
		text-decoration: none;
	}
		.project--image{
			background-color: var(--color-grey-light);
			aspect-ratio: 1;
			overflow: hidden;
			box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
		}
			.project--image img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		.project--details{
			width: 82%;
			position: relative;
			z-index: 100;
			top: -3.5rem;
			margin: 0 auto;
			padding: 1.5rem 2rem 1.55rem 2rem;
			line-height: 1.3;
			background-color: var(--color-white);
			box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.2);
		}
			.project--details h3,
			.project--details p{
				margin: 0;
			}
			.project--details span{
				display: block;	
			}
			.project--details h3{
				color: var(--color-stone-blue);
				text-transform: uppercase;
				font-size: 1.6rem;
			}
			.project--details .project-location{
				color: var(--color-grey-dark)
			}
			.project--details .project-tags{
				font-size: 1.4rem;
				color: var(--color-grey-mid);
				text-transform: lowercase;
				margin-top: 0.15rem;
			}
	.project--link:hover .project--image img{
		transform: scale(1.025);
	}
	.project--link:hover .project--details h3{
		color: var(--color-stone-midblue);
	}
	.project--link:hover .project--details .project-location{
		color: var(--color-black);
	}
	.project--link:hover .project--details .project-tags{
		color: var(--color-black);
	}
	
/* PROJECT DETAILS */
.main-sections .projecten-crumbler .row,
.main-sections .projecten-crumbler .column{
	margin-bottom: 0;
	padding-bottom: 0;
}
.projecten-crumbler + .section-1.layout--8 .row{
	padding-top: 0;
	margin-top: -2rem;
}
.projecten-crumbler .contextual{
	display: none;	
}
.projecten-crumbler h1 a{
	position: relative;
	text-decoration: none;
}
.projecten-crumbler h1 a::before{
	display: flex;
    content: '<';
    position: absolute;
    left: 0;
	bottom: 0;
    top: 0;
    font-weight: 400;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;
    transform: translateX(-100%);
}
	.projecten-crumbler h1 a:hover{
		color: var(--color-stone-blue) !important;
	}
	.projecten-crumbler h1 a:hover::after{
		content: '';
		height: 1px;
		position: absolute;
		bottom: 0.2rem;
		left: 0;
		right: 0;
		background-color: var(--color-stone-blue);	
	}
.projecten-crumbler h1 em{
	font-size: 1.8rem;
}
.projecten-crumbler h1 em::before{
	content: '/';
	margin: 0 0.7rem 0 0.2rem;
    display: inline-block;
	font-size: 1.4rem;
	position: relative;
	bottom: 2px;
}

.projectdetails-info-wrapper{
	position: sticky;
	top: 110px;	
	margin-bottom: 0.8rem;
}
.projectdetails-info{
	margin: 1.5rem 0 4rem 0;
	padding: 1.5rem 3rem;
	background-color: #FFF;
	border-left: 3px solid var(--color-stone-midblue);
	box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.15);
	color: var(--color-grey-dark);
	line-height: 1.4;
	letter-spacing: 0;
}
	.projectdetails-info-row{
		display: flex;
		flex-wrap: wrap;
    	padding: 4px 0;
	}
		.projectdetails-info-row .info-row-label{
			flex-basis: 100%;
			max-width: 100%;
		}
		.projectdetails-info-row .info-row-value{
			flex: 2;
			color: var(--color-black);
		}
	.projectdetails-specs{
		line-height: 1.5;
	}
	.projectdetails-specs .field--name-field-specifications{
		font-size: 92%;
		color: var(--color-grey-dark);
	}
/* PROJECT DETAILS - images */
.projectdetails-images-main{
	margin: 2rem 0 0.5rem 0;
}
	.projectdetails-slider-large-container{
		
	}
		.projectdetails-slider-large{
			list-style: none;
			padding: 0;
			margin: 0;
		}
			.projectdetails-slide{
				
			}
			.projectdetails-slide a{
					width: 100%;
					display: block;	
					aspect-ratio: 1.3;
					cursor: zoom-in;
				}
					.projectdetails-slide a img{
						width: 100%;
						height: 100%;
						display: block;	
						object-fit: cover;
					}
				.splide__video .splide__video__wrapper{
					position: relative;
					display: block !important;
					overflow: hidden;
				}
				.splide__video .splide__video__wrapper iframe{
					position: absolute;
					top: 50%;
					left: 50%;
					width: 140%;
					height: 100%;
					transform: translate(-50%, -50%);
				}
.projectdetails-images-thumbs{
	margin: 0.5rem -0.5rem 0.5rem -0.5rem;
}
		.projectdetails-slider-thumbs{
			list-style: none;
			padding: 0;
			margin: 0;
		}
			.projectdetails-thumb{
				width: 16.666%;
				padding: 0.3rem;
			}
				.project-thumb--link{
					display: block;
					cursor: pointer;
					position: relative;
					border: 0.5px solid #DDD;
				}
					.project-thumb--link img{
						width: 100%;
						height: 100%;
						display: block;	
						object-fit: cover;
						opacity: 0.75;
    					transition: 0.3s;
					}
			.splide__track--nav > .splide__list > .splide__slide.is-active{
				border-width: 0;
			}
			.projectdetails-thumb.is-active .project-thumb--link{
				box-shadow: 0 0 5px 2px rgba(0,0,0,0.25);
				border-color: #FFF;
			}
			.projectdetails-thumb:hover .project-thumb--link img,
			.projectdetails-thumb.is-active .project-thumb--link img{
				opacity: 1;
			}
		.projectslider-container .project--link.project-vid::after,
		.projectlist-container .project--link.project-vid::after,
		.projectdetails-thumb .project-thumb--link.project-vid::after{
			content: '\f03d';
			position: absolute;
			font-family: 'Font Awesome 6 Free';
			font-weight: 900;
			color: #FFF;
			line-height: 1;
			text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
			opacity: 0.8;
		}
			.projectdetails-thumb .project-thumb--link.project-vid::after{
				top: 8%;
				right: 8%;
				font-size: 12px;
			}
			.projectslider-container .project--link.project-vid::after,
			.projectlist-container .project--link.project-vid::after{
				top: 3%;
				right: 4%;
				font-size: 16px;
			}
		.projectdetails-thumb .project-thumb--link.project-vid:hover::after{
			opacity: 1;
		}
		.projectslider-container .project--link.project-vid:hover::after,
		.projectlist-container .project--link.project-vid:hover::after{
			opacity: 1;
		}
.projectslider-container .project--link,
.projectlist-container .project--link{
	position: relative;
}

.projectdetails-photography{
	margin: 0;
	color: var(--color-grey-dark);
	font-size: 1.3rem;
	letter-spacing: 0;
}

/* CONTROLS */
.actions-right{
	width: 100%;
    display: flex;
    clear: both;
    position: relative;
    top: -2rem;
    justify-content: end;
}

a.next{
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--color-stone-blue);
	letter-spacing: 0.03rem;
	text-decoration: none;
}
a.next::after{
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	font-size: 1.2rem;
	margin-left: 0.3rem;
}
a.next:hover{
	color: var(--color-stone-highlightblue);
}

header a,
footer a{
	text-decoration: none;	
}
.button,
.button:first-child, 
.image-button:first-child{
	margin: 0.5rem 0.5rem 0.5rem 0;
	text-decoration: none;
}
.button{
	padding: 1rem 2rem 1.1rem 2rem;
	background-color: var(--color-stone-blue);
	color: var(--color-white);
	display: inline-block;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.03rem;
	font-weight: 400;
	transition: all .35s;
	cursor: pointer;
	border-width: 0;
}
	.button:hover{
		background-color: var(--color-stone-highlightblue);
	}
.button.button-open{
	color: var(--color-stone-blue);
	background-color: transparent;
	border: 1px solid var(--color-stone-blue);
}
	.button.button-open:hover{
		background-color: var(--color-stone-highlightblue);
		color: var(--color-white);
		border-color: var(--color-stone-highlightblue);
	}
.tag{
	min-width: 120px;
	display: inline-block;
    margin: 0.4rem 0.2rem 0.4rem 0.2rem;
	padding: 0.75rem 1.3rem 0.75rem 1.3rem;
    line-height: 1;
    letter-spacing: 0.03rem;
    font-weight: 400;
    background-color: var(--color-stone-midblue);
    color: var(--color-white);
    /*border-radius: 1rem;*/
    font-size: 1.4rem;
	text-align: center;
	transition: all .35s;
	text-decoration: none;
}
.tag:hover{
	background-color: var(--color-stone-highlightblue);	
}
.more{
	font-size: 1.3rem;
    display: inline-block;
    color: #00416b;
    letter-spacing: 0;
	position: relative;
    padding-right: 12px;
}
.more::after{
	content: '\f054';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    font-size: 1rem;
    top: 4px;
	margin-left: 0.2rem;
}
.more:hover{
	color: var(--color-stone-highlightblue);
}

.field--name-field-articles section.style--16 .row::before{
	width: 60px;
    height: 60px;
	display: flex;
	align-items: center;
    justify-content: center;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 50%;
	border-radius: 50%;
	content: '\f062';
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	color: var(--color-white);
	background-color: var(--color-stone-blue);
	box-shadow: 1px 0 6px 0px rgba(0,0,0,0.25);
	font-size: 2.6rem;
    transform: translate(-50%, -50%);
}
.splide__arrow{
	width: 40px;
    height: 40px;
	display: flex;
	align-items: center;
    justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-white);
	background-color: var(--color-stone-blue);
	border: 0;
	outline: none;
	text-decoration: none;
	line-height: 1;
	font-size: 2rem;
	padding-bottom: 1px;
	transition: background-color .35s;
	opacity: 1;
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
}
.splide__arrow:hover {
	opacity: 1;
    background-color: var(--color-stone-highlightblue);
}
.splide__arrow svg{
	display: none;
}
	.splide__arrow:before{
		font-family: 'Font Awesome 5 Free';
		font-weight: 900; 
	}
		.splide__arrow--prev:before{
			content: '\f060';
		}
		.splide__arrow--next:before{
			content: '\f061';
		}
.splide__arrow{
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}
	.main-banner .splide__arrow--prev{
		left: -1.3rem;	
	}
	.main-banner .splide__arrow--next{
		right: -1.3rem;	
	}
	.view-projects-highlight .splide__arrow{
		margin-top: -3rem;
	}
	.view-projects-highlight .splide__arrow--prev{
		left: -2rem;	
	}
	.view-projects-highlight .splide__arrow--next{
		right: -2rem;
	}
	.projectdetails-images-main .splide__arrow--prev{
		left: -1.5rem;
		/*margin-top: -1rem;*/
	}
	.projectdetails-images-main .splide__arrow--next{
		right: -1.5rem;
		/*margin-top: -1rem;*/
	}
.splide__pagination {
    bottom: 1em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
}
.splide__pagination {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}
.splide__pagination li{
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
    display: none
}

.splide__pagination__page {
	width: 8px;
	height: 8px;
	position: relative;
	display: inline-block;
    margin: 3px;
	padding: 0;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    opacity: .7;
    transition: transform .2s linear;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}
.splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1.4);
    z-index: 1;
}
.splide__pagination__page:hover {
    cursor: pointer;
    opacity: .9
}
.splide__pagination__page:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}
.splide.is-focus-in .splide__pagination__page:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.main-banner-type--1 .splide__pagination{
	/*display: none;*/
	justify-content: flex-end;
	padding-right: 4%;
}
	
/* PAGER */
nav.pager{
	text-align: center;
}
.pager__items{
	margin: 0 auto 4rem auto;
	display: inline-block;
	position: relative;
}
.pager__item{
	padding: 0 0.3rem;	
	color: var(--color-stone-blue);
	display: inline-block;
}
.pager__item:not(.pager__item--next) a,
.pager__item:not(.pager__item--previous) a{
	width: 32px;
	height: 32px;
	display: inline-block;
	line-height: 32px;
	border: 1px solid var(--color-grey-midlight);
}
.pager__item a{
	text-decoration: none;	
}
.pager__item.is-active a{
	background-color: var(--color-stone-blue);
	color: var(--color-white) !important;
	font-weight: 400;
}
.pager__item.pager__item--first,
.pager__item.pager__item--last{
	display: none;	
}
.pager__item--previous{
	position: absolute;
	left: -100%;
}
.pager__item--next{
	position: absolute;	
}

.pager__item--previous a,
.pager__item--next a{
	padding: 0 0.7rem;
	white-space: nowrap;
}
.pager__item--next a::after,
.pager__item--previous a::before{
	display: inline-block;
	position: relative;
	top: 1px;
}
.pager__item--next a::after{
	content: '>';
}
.pager__item--previous a::before{
	content: '<';
}

/* MISC */
.contact-label-container{
	position: fixed;
    right: 0;
    z-index: 120;
    bottom: 65vh;
}
.contact-label-container .contextual{
	display: none;	
}
.contact-label-container .field{
	transform: rotate(-90deg);
    position: relative;
}
.contact-label-container p{
	margin: 0;
	position: absolute;
    top: 0;
    right: 0;
    transform: translateY(0%);
	transition: all .35s;
	opacity: 0;
	visibility: hidden;
}
	body.scroll-min .contact-label-container p{
		transform: translateY(-100%);
		opacity: 1;
		visibility: visible;
	}
.contact-label-container .field a{
	display: inline-block;
	color: var(--color-white);
	background-color: var(--color-stone-midblue);
	text-transform: uppercase;
	font-size: 1.4rem;
	letter-spacing: 0.03rem;
	line-height: 1;
	padding: 1rem 2rem;
	transition: all .25s;
	text-decoration: none;
}
.contact-label-container .field a:hover{
	background-color: var(--color-stone-highlightblue);
	padding: 1rem 2rem 1.2rem 2rem;
}

.scroll-up{
	width: 40px;
	height: 40px;
	display: flex;
	color: var(--color-white);
	background-color: var(--color-stone-blue);
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
	justify-content: center;
    align-items: center;
    font-size: 2rem;
	position: fixed;
	z-index: 120;
	right: 3rem;
	bottom: 3rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all .35s;
}
	.scroll-up:hover{
		background-color: var(--color-stone-highlightblue);
	}

body.scroll-half .scroll-up{
	opacity: 1;
	visibility: visible;
}

/* TRANSITIONS */
.projectslider li.project .project--link,
.projectlist li.project{
    transition: 0.5s cubic-bezier(.5, 0, .07, 1);
	transform: scale3d(.8,.8,.8);
    opacity: 0;
}
/*.projectslider li.project,
.loaded .projectslider li.project.animated,*/

.loaded .projectslider.animated li.project .project--link,
.loaded .projectlist li.project.animated{
    transform: scale3d(1,1,1);
    opacity: 1;
}
.project--link .project--details h3,
.project--link .project--details .project-tags,
footer a{
	transition: color .25s;
}

a.iconblock-content,
a.iconblock-content h2,
.iconblock-content.icon--inline .iconblock--icon img,
.iconblock-content .iconblock--desc em,
a.iconblock-content::after,
.column.header-column-nav nav > ul.menu > .menu-item > a::after{
	transition: all .25s;
}

.project--link .project--image img{
	transition: all .35s;
}


/* COLORING */
/*
	15	white (offwhite)
	24  white (extra)
	33	white (bar)
	35	white (panel)
	16	blue
	18	light grey
*/
section .column .field ul li strong,
section .column .field ol li strong,
section .column p strong{
	color: var(--color-stone-blue);
}

section.style--15{
	
}
section.style--18 a:not(.button):not(.next):not(.tag),
section.style--15 a:not(.button):not(.next):not(.tag){
	color: var(--color-stone-blue);
}
section.style--18 a:not(.button):not(.next):not(.tag):hover,
section.style--15 a:not(.button):not(.next):not(.tag):hover{
	color: var(--color-stone-highlightblue);
}
section.style--16{
	z-index: 100;	
}
section.style--16 .row{
	position: relative;
	z-index: 102;
	color: var(--color-white);
	margin-top: 2rem;
	margin-bottom: 2rem;
}
section.style--16 .row h1,
section.style--16 .row h2,
section.style--16 .row strong{
	color: var(--color-white);
}
section.style--16::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-stone-blue);
	z-index: 100;	
}
section.style--16 h2,
section.style--16 h3,
section.style--16 h4,
section.style--16 h5,
section.style--16 a{
	color: var(--color-white);
}
section.style--16 a.button{
	background-color: var(--color-stone-blue);
	border-color: var(--color-white);
	border-width: 1px;
	border-style: solid;
	color: var(--color-white);	
}
section.style--16 a.button:hover{
	background-color:  var(--color-white);
	color: var(--color-stone-blue);
}

section.style--18 .row{
	position: relative;
	z-index: 2;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
section.style--18::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-grey-light);
	z-index: 1;	
}

section.style--24{
	background-color: var(--color-white);
}
section.style--33 {
    background-color: var(--color-white);
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.07);
}

section.style--36{
	background-color: var(--color-white);
}
section.style--36 .row .column *{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	
}
section.style--36 .row .column a.button{
	margin-top: 0.7rem;
}
section.style--36 .row .column h2{
	font-size: 2.4rem;
}
section.style--36 .row .column p{
	line-height: 1.3;
}
section.style--36 .row .column img{
	width: 100%;
	aspect-ratio: 1.5;
	display: block;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

section.style--36 a img{
	transition: all .25s;
	border: 0;
}
section.style--36 a:hover img{
	transform: scale(1.015);
    box-shadow: 2px 2px 9px 0px rgba(0, 0, 0, 0.5);
}

/* MEDIA STYLE */
.media--19{
	/*min-height: 24vw;*/
	aspect-ratio: 4.3;
}
.media--19 .section-media{
	position: absolute;
	z-index: 10;
}
.media--19 .row {
    position: relative;
    z-index: 20;
}
.media--19 .section-media, 
.media--19 .section-media * {
    width: 100%;
    height: 100%;
}
.media--19 .section-media img {
	object-fit: cover;
	display: block;
}
.media--20 .field--type-image img{
	/* normal */
	display: block;
	width: 100%;
}
.media--20 .row{
	align-items: center;	
}
.media--21 .field--type-image{
	/* fill height */
	margin: 0 -3rem 0 -3rem;	
}
.media--21 .field--type-image img{
	display: block;
	width: 100%;
}
.media--22 .field--type-image{
	/* wide */
	margin: 0 -3rem 0 -3rem;	
}
.media--22 .field--type-image img{
	display: block;
	width: 100%;
}

.media--34 .field--type-image img{
	/* contain */
	display: block;
	width: 100%;
}
.media--35 .column-1{
	position: relative;
	z-index: 50;
}
.media--35 .column-2{
	/* beeldmerk */
	position: relative;
	z-index: 40;
	margin: 0;
}
.media--35 .column-2::before{
	content: '';
	width: 100%;
	height: 80px;
	position: absolute;
	left: 0;
	bottom: 0.5rem;
	background-image: url(/themes/stone/images/beeldmerk-outlines-znc-black.svg);
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	background-position: right;
}
.style--16.media--35 .column-2::before{
	background-image: url(/themes/stone/images/beeldmerk-outlines-znc-white.svg);
}

.media--25 .field--type-image img{
	/* normal main */
	display: block;
	width: 100%;
}

/* CRUMBLER */
.block-system-breadcrumb-block{
	width: var(--page-width);
	max-width: calc(100vw);
	position: absolute;
	left: 50%;
	top: 1.5rem;    
    transform: translateX(-50%);
    padding: 0 1.5rem;
}
.breadcrumb{
	padding: 0;
	margin: 0;	
}
.breadcrumb ol{
	padding: 0 1.5rem;
	margin: 0;
	font-size: 1.4rem;
	text-transform: uppercase;
	line-height: 1;
}
.breadcrumb ol li{
	position: relative;
	padding: 0;
	margin: 0;
}
.breadcrumb ol li:first-child{
	display: none;	
}
.breadcrumb ol li::before{
	display: none;
}
.breadcrumb ol li:last-child::after{
	display: none;	
}
.breadcrumb ol li a{
	text-decoration: none;
	/*font-weight: 500;
	letter-spacing: -0.05rem;*/
	position: relative;
}
.breadcrumb ol li a:hover{
	/*text-decoration: underline;*/
	color: var(--color-stone-blue) !important;
}
.breadcrumb ol li a:hover::after {
    content: '';
    height: 0.5px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-stone-blue);
}
.breadcrumb ol li a.current{
	pointer-events: none;
	font-weight: 400;
	font-size: 90%;
	opacity: 0.65;
}
.breadcrumb ol li:nth-child(2) a::before{
	content: '<';
    font-weight: 400;
    display: flex;
	position: absolute;
    font-size: 1.4rem;
    padding: 0 0.4rem;
    transform: translateX(-100%);
}
.breadcrumb ol li::after{
	content: '/';
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--color-grey-dark);
    display: inline-block;
    margin: 0 0.2rem;
    position: relative;
    bottom: 1px;
	opacity: 0.65;
}


/* FORM */
.form-item{
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.form-actions{
	margin-top: 3rem;
	margin-bottom: 2rem;
}
.field > form{
	/*margin: -3rem 0 3rem 0;*/	
}
.form-item input[type="text"],
.form-item input[type="tel"],
.form-item input[type="email"],
.form-item input[type="password"],
.form-item textarea{
	width: 100%;
	border-style: solid;
    border-color: var(--color-black);
    border-width: 0 0 1px 0;
    font-size: 16px;
    padding: 1rem 0.6rem;
	background-color: transparent;
    box-shadow: 0 0 0 30px var(--color-bg) inset !important;
}

.style--18 .form-item input[type="text"],
.style--18 .form-item input[type="tel"],
.style--18 .form-item input[type="email"],
.style--18 .form-item input[type="password"],
.style--18 .form-item textarea{
	box-shadow: 0 0 0 30px var(--color-grey-light) inset !important;
}
.style--24 .form-item input[type="text"],
.style--24 .form-item input[type="tel"],
.style--24 .form-item input[type="email"],
.style--24 .form-item input[type="password"],
.style--24 .form-item textarea{
	box-shadow: 0 0 0 30px var(--color-white) inset !important;
}

.form-item input[type="text"]:focus,
.form-item input[type="tel"]:focus,
.form-item input[type="email"]:focus,
.form-item textarea:focus {
  border-color: var(--color-stone-lightblue);
  outline: var(--color-stone-lightblue);
}

/* LANGSELECT */
.footer-langselect{
	z-index: 200;
}
	.footer-langselect .column{
		margin: 0;
	}
	.lang-select{
		min-height: 3rem;
	}
	.lang-select-list{
		width: 14rem;
		display: flex;
		position: absolute;
		bottom: 0;
		padding: 0.4rem 2rem 0.4rem 0;
		margin: 0;
		list-style: none;
		border: 1px solid var(--color-grey-mid);
		color: var(--color-grey-mid);
		background-color: var(--color-bg);
    	flex-direction: column;
		line-height: 1.1;
	}
	.lang-select-list:hover{
		background-color: var(--color-white);
		color: var(--color-black)
	}
		.lang-select-list::after{
			content: '\f078';
			position: absolute;
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			right: 8px;
			bottom: 12px;
			font-size: 11px;
			color: var(--color-grey-dark);
		}
		.lang-select-list li{
			order: 1;
			display: none;
			padding: 0;
			margin: 0;
			cursor: pointer;
		}
		.lang-select-list li.active{
			order: 2;
			display: block;
			pointer-events: none;
		}
			.lang-select-list li a{
				display: block;
				padding: 0.6rem 1rem;
				color: var(--color-grey-dark);
				font-size: 1.5rem;
				cursor: pointer;
			}
		.lang-select-list:hover li{
			display: block;	
		}
		.lang-select-list:hover::after{
			transform: rotate(-180deg);
		}
		.lang-select-list li.active a{
			pointer-events: none;
		}

/* SYSTEM */
.fancybox__container{
	--fancybox-bg: rgba(24, 24, 27, 0.9);
}
.block-local-tasks-block{
	position: absolute;
    top: -0.2rem;
    right: 2rem;
	z-index: 100;
}
.block-local-tasks-block .tabs a{
	background-color: rgba(205, 205, 205, 0.7);
	font-size: 1.3rem;
}
.block-local-tasks-block .tabs a:hover{
	background-color: rgba(225, 225, 225, 0.95);
}
.main-banner .contextual,
.block-local-tasks-block .contextual{
	display: none;	
}
.block-system-main-block > article > .contextual{
	top: 4rem;	
}
.user-login-form{
	max-width: var(--page-small);
	margin: 5rem auto;
	padding: 2rem;
}
.consent-container{
	left: 2.5rem;
	right: 2.5rem;
	z-index: 150;
    position: fixed;
    bottom: 0;
	padding: 1.5rem 0;
    background-color: rgba(255,255,255,0.94);
    color: var(--color-black);
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
	transform: translateY(101%);
}
.consent-container .row{
	align-items: center;	
}
.consent-container .column p{
	margin: 0;	
}
.column.consent-text{
	
}
.column.consent-actions{
	flex: 0;	
	white-space: nowrap;
}
.column.consent-actions .button{
		
}
.column.consent-actions .button.button__primary{
	background-color: var(--color-stone-midblue);
}
	.column.consent-actions .button.button__primary:hover{
		background-color: #38b43d;
	}
.column.consent-actions .button.button__secondary{
	background-color: var(--color-grey-dark);
}
	.column.consent-actions .button.button__secondary:hover{
		background-color: #bd1a1a;
	}
body.askconsent .consent-container{
    opacity: 1;
    visibility: visible;
	transform: translateY(0);
	transition-delay: 0.6s;
}

/* ANIMATIONS */
.main-sections p{
	transform: translateY(1rem);
	opacity: 0;
	transition: 0.75s cubic-bezier(.77, 0, .175, 1);
}
	.main-sections .project--details p,
	.loaded .main-sections p.animated{
		opacity: 1;
		transform: translateY(0);
	}

.main-sections p a.tag,
.main-sections p a.button{
	opacity: 0;
	transform: scale(0.8);
	transition: 1s cubic-bezier(.77, 0, .175, 1);
	
}
	.loaded .main-sections p.animated a.tag,
	.loaded .main-sections p.animated a.button{
		opacity: 1;
		transform: scale(1);
	}
		.main-sections p a.tag:nth-child(1){
			transition-delay: 0.5s;
		}
		.main-sections p a.tag:nth-child(2){
			transition-delay: 0.75s;
		}
		.main-sections p a.tag:nth-child(3){
			transition-delay: 1s;
		}

section.style--16 .row::before{
	
	
}
section.style--16::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: 1s cubic-bezier(.77, 0, .175, 1);
	transform: translateX(0);
	background-color: rgba(255,255,255,0.6);
}
	.loaded section.style--16.animated::after{
		
		transform: translateX(101%);
	}

/* RESPONSIVE */
@media screen and (min-width: 750px){
	/* phone landscape */
	.column{
		flex: 1;	
	}
	.row {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.column {
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.column.header-column-logo{
		flex-basis: 300px;
		max-width: 300px;
		padding-left: 2rem;
	}
	.column.header-column-nav{
		padding-right: 2rem;
	}
	p.scroller{
		overflow-x: unset;
		overflow-y: unset;
		white-space: normal;
		margin-left: 0;
		margin-right: 0;
	}
	blockquote.double{
		column-count: 2;
		column-gap: 4rem;
	}
	.menu-toggle--title {
		display: flex;
	}
	.main-sections .row{
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.main-banner-type--3 + section .row,
	.main-banner-type--3 + .projecten-crumbler .row{
		padding-top: 1.5rem;
	}
	.projecten-crumbler + .section-1.layout--8 .row{
		padding-top: 1.5rem;
	}
	section.style--15 + section.style--15 .row{
    	margin-top: -3rem;
	}
	section.style--16::before,
	section.style--18::before{
		left: 2rem;
		right: 2rem;
	}
	.main-banner{
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.main-banner.main-banner-type--1 .banner-content{
		aspect-ratio: 2.8;
	}
	.main-banner.main-banner-type--2 .banner-content{
		aspect-ratio: 3.2;
	}
	.main-banner.main-banner-type--3 .banner-content{
		aspect-ratio: 10;
	}
	
	.banner-overlay-container .banner-overlay-content h3{
		-webkit-text-stroke-width: 0.5px;
		-webkit-text-stroke-color: white;
		color: transparent;
	}
	.banner-overlay-container .banner-overlay-content p{
		display: block;
		font-size: 1.4rem;
	}
	.banner-overlay .banner-overlay-container{
		padding-left: 2rem;
		padding-right: 2rem;
	}
		.banner-overlay-container .banner-overlay-content{
			padding-left: 2rem;
			padding-right: 2rem;
		}
		/*.overlay-style--1 .banner-overlay-content::before{
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: -2rem;
			right: -2rem;
			background-color: rgba(0,0,0,0.2);
		}*/
		.overlay-style--1 .banner-overlay-content h3{
			font-size: 8rem;
		}
		.overlay-style--2 .banner-overlay::before,
		.overlay-style--3 .banner-overlay::before{
			width: 55%;
		}
		.overlay-style--2 .banner-overlay-content,
		.overlay-style--3 .banner-overlay-content{
				padding-left: 6%;
		}
		.overlay-style--2 .banner-overlay-container,
		.overlay-style--3 .banner-overlay-container{
			align-self: center;
			width: 45%;
			padding-bottom: 0%;
		}
		
	.overlay-style--2 .banner-overlay-content h3,
	.overlay-style--3 .banner-overlay-content h3{
		font-size: 3rem;
	}
	.main section .column ul.icons{
		
	}
		.main section .column ul.icons li {
			flex: 1;
			margin: 0.3rem 0 1.3rem 0;
		}
	.iconblock:not(.splide__slide):nth-child(2),
	.iconblock:not(.splide__slide):nth-child(3){
		display: flex;
	}
	.iconblock-content{
		max-width: 330px;
	}
	.layout--7 .column-1,
	.layout--23 .column-1{
		flex-basis: 100%;
	}
	.layout--23 .row{
		max-width: var(--page-small);
	}
	.layout--13 .column-1{
		order: 2;
	}
	.layout--13 .column-2{
		order: 1;
	}
	.layout--10 .column-1,
	.layout--13 .column-1{
		flex: 2;
	}
	.block-system-breadcrumb-block{
		top: 2.9rem;
		padding: 0 2rem;
	}
	.breadcrumb ol{
		/*font-size: 1.5rem;*/
		padding: 0 2rem;
	}
	.projectdetails-thumb{
		padding: 0.4rem;
	}
	.tag{
		margin: 0.5rem 0.5rem 0.5rem 0;
		font-size: 1.5rem;
	}
	
	.media--21 .column-2{
		display: flex;
		flex-direction: column;	
	}
	.media--21 .column-2 .field--type-entity-reference,
	.media--21 .column-2 .field--type-entity-reference .media{
		flex: 1;
		display: flex;
		position: relative;
	}
		.media--21  .column-2 .field--type-image{
			position: absolute;
			top: 2rem;
			bottom: 1.8rem;
			left: 0;
			right: 0;
			/*background-color: var(--color-grey-light);*/
			margin: 0;
		}
			.media--21 .column-2 .field--type-image img{
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
	.media--21.layout--10 .column-1 > .field{
		padding-right: 1rem;
	}
	
	.media--22 .column-2,
	.media--34 .column-2{
		position: relative;
	}
	.media--22 .column-2 .media,
	.media--34 .column-2 .media{
		position: absolute;
		left: 2rem;
		right: 2rem;
		top: 2rem;
		bottom: 2rem;
	}
	.media--22 .column-2 .field--type-image,
	.media--34 .column-2 .field--type-image{
		/* wide */
    	height: 100%;
		margin: 0;	
	}
		.layout--13.media--22 .column-2 .field--type-image{
			margin-left: -4rem;
		}
		.media--22 .column-2 .field--type-image img{
			display: block;
			height: 100%;
			object-fit: cover;
		}
		.media--34 .field--type-image img{
			/* contain */
			height: 100%;
			object-fit: contain;
		}
	.media--35 .column-2::before{
		top: 0;
		height: unset;
		background-position: 38% 50%;
		opacity: 0.6;
	}
	.media--35.style--24 .column-2::before{
		opacity: 0.2;
	}
	section.layout--11 .column-1 iframe{
		width: calc(100% + 4rem);
		margin-bottom: -4rem;
		margin-top: -4rem;
		margin-left: -2rem;
	}

	.projectlist li.project{
		flex-basis: 50%;
		max-width: 50%;
	}
	.projectslider li.project:nth-child(2n+2) .project--link,
	.projectlist li.project:nth-child(2n+2) {
		transition-delay: 0.15s;
	}
	.view-projects .views-exposed-form{
		justify-content: flex-end;
		margin-top: -4.6rem;
	}
	
	.projectdetails-info-row .info-row-label{
		flex: 1;
		min-width: 140px;
	}
	
	section .column .field ul.double,
	section .column .field ol.double{
		column-count: 2;
		column-gap: 4rem;
		margin-top: 4rem;
	}
	section .column .field ul.double li,
	section .column .field ol.double li{
		margin-bottom: 2rem;
	}
	footer{
		padding: 12rem 0 9rem 0;
	}
	
	.footer-content .column:first-child{
		flex: 1.25;
	}
	.footer-endline .row{
		justify-content: flex-start;
		padding-left: 4rem;
	}
}

@media screen and (min-width: 940px){
	/* tablet portrait */
	
	.overlay-style--2 .banner-overlay-content h3,
	.overlay-style--3 .banner-overlay-content h3{
		font-size: 4rem;
	}
	.overlay-style--2 .banner-overlay::before,
	.overlay-style--3 .banner-overlay::before{
		width: 50%;
	}
	.banner-overlay-container .banner-overlay-content h3{
		-webkit-text-stroke-width: 1px;
	}
	.banner-overlay-container .banner-overlay-content p{
		max-width: 48rem;
		font-size: 1.75rem;	
	}
	.projectlist li.project{
		flex-basis: 33.33%;
		max-width: 33.33%;
	}
	.projectslider li.project:nth-child(3n+1) .project--link,
	.projectlist li.project:nth-child(3n+1) {
		transition-delay: 0s;
	}
	.projectslider li.project:nth-child(3n+2) .project--link,
	.projectlist li.project:nth-child(3n+2) {
		transition-delay: 0.15s;
	}
	.projectslider li.project:nth-child(3n+3) .project--link,
	.projectlist li.project:nth-child(3n+3) {
		transition-delay: 0.3s;
	}
}

@media screen and (min-width: 1024px){
	/* TABLET LANDSCAPE */
	
	.overlay-style--3 .banner-overlay-content h3{
		font-size: 5rem;
	}
	.overlay-style--2 .banner-overlay-content h3{
		font-size: 7rem;
	}
	/*.iconblock-container{
		margin-top: -9rem;
	}*/
	.footer-content nav ul.menu{
		column-count: 2;
	}
	
}
@media screen and (min-width: 1330px){
	/* LARGE */
	.column.header-column-logo{
		flex-basis: 190px;
		max-width: 190px;
	}
	.view-projects-highlight .splide__arrow--prev{
		left: -6rem;	
	}
	.view-projects-highlight .splide__arrow--next{
		right: -6rem;
	}
	.layout--13.media--22 .column-2 .field--type-image{
		margin-left: calc(((100vw - 1330px) * -0.5) - 4rem);
		padding-right: 1rem;
	}
}

/* MOBILE MENU */
@media screen and (max-width: 1023px){
	.column.header-column-nav{
		flex: 1;
		position: relative;
		align-items: center;
		justify-content: flex-end;
		display: flex;
	}
	.column.header-column-nav .menu-nav {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		z-index: 200;
		top: 0;
		left: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		transition: .5s cubic-bezier(.86, 0, .07, 1);
		background-color: rgba(255,255,255,0.97);
	}
	.column.header-column-nav .menu-nav::after{
		content: '';
        width: 60px;
        height: 60px;
        position: absolute;
        top: 84vh;
        left: 2rem;
        background-image: url(/themes/stone/images/beeldmerk-znc.svg);
        background-repeat: no-repeat;
        background-size: contain;
	}
	.menu-open .menu-nav {
		transform: translateX(-100%);
		transition-delay: 0s;
	}
	.header-column-nav .menu-nav nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.menu-nav nav > .menu{
		margin: 0;	
	}
	.menu-nav nav > .menu > .menu-item{
		margin: 0.7rem 0;	
	}
	.menu-nav nav > .menu > .menu-item > a{
		text-transform: uppercase;
		font-weight: 500;
		font-size: 2.2rem;
		position: relative;
		color: var(--color-black);
		padding: 3px 8px;
		letter-spacing: -0.2px;
	}
		.menu-nav nav > .menu > .menu-item > a.is-active::after {
			height: 2px;
			content: '';
			position: absolute;
			bottom: 0;
			left: 8px;
			right: 8px;
			background-color: var(--color-stone-midblue);
		}
	
}

/* DESKTOP MENU */
@media screen and (min-width: 1024px){
	.menu-toggle{
		display: none;
	}
	.column.header-column-nav,
	.column.header-column-nav nav,
	.column.header-column-nav nav > ul.menu{
		display: flex;
		flex: 1;
	}
	.column.header-column-nav nav > ul.menu{
		margin: 0 -8px 0 auto;
    	justify-content: space-between;
    	max-width: 950px;
	}
	.column.header-column-nav nav > ul.menu > .menu-item{
		display: flex;
    	align-items: center;
	}
	.column.header-column-nav nav > ul.menu > .menu-item > a{
		display: inline-block;
		position: relative;
		text-transform: uppercase;
		color: var(--color-black);
		font-weight: 500;
		padding: 25px 8px;
		
	}
	.column.header-column-nav nav > ul.menu > .menu-item > a::after{
		height: 3px;
		content: '';
		position: absolute;
		bottom: 0;
		left: 8px;
		right: 8px;
		background-color: var(--color-stone-midblue);
		transform: scaleX(0);
		opacity: 0;
	}
	.column.header-column-nav nav > ul.menu > .menu-item.menu-item--active-trail > a::after,
	.column.header-column-nav nav > ul.menu > .menu-item > a.is-active::after,
	.column.header-column-nav nav > ul.menu > .menu-item > a:hover::after{
		transform: scaleX(1);
		opacity: 1;
	}
}