html																{height: calc(100vh - env(safe-area-inset-bottom)); line-height: 1.2em;}
body																{color:#444; font-family: 'Nunito', sans-serif; font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem) /* 16 - 18 pixels */; font-weight: 400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} 

/* headings */
h1, h2, h3, h4, .h1, .h2, .h3, .h4									{overflow-wrap: break-word; word-break: break-word /* Safari */; hyphens: auto; line-height: 1.2em;}
h1, .h1																{font-size: clamp(2.125rem, 3vw + 1rem, 4rem); /* 64 - 34 https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=34&fluidSize=3&relativeSize=1&maxSize=64 */ font-weight: 900; margin-bottom: 0.3em; color:var(--color-orange);}
h2, .h2																{font-size: clamp(1.75rem, 2vw + 0.5rem, 2.125rem); /* 34 - 28 https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=28&fluidSize=2&relativeSize=0.5&maxSize=34 */ font-weight: 900; margin-bottom: 0.3em; color:var(--color-blue)} 
h3, .h3																{font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); /* 28 - 20 https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=20&fluidSize=1&relativeSize=1&maxSize=28 */ font-weight: 900;}
h4, .h4																{font-size: clamp(1.125rem, 1vw + 0.8rem, 1.375rem); /* 22 - 18 https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=18&fluidSize=1&relativeSize=0.8&maxSize=22 */ font-weight: 700;}

.partHeading.heading-long-text 										{font-size: clamp(1.75rem, 2.37vw + 1rem, 3.375rem); /* 54 - 28 https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=28&fluidSize=2.37&relativeSize=1&maxSize=54 */}

/* bold & italic */
strong                                	                            {font-weight: 900; font-style: inherit;}
em                                    	                            {font-style: italic; font-weight: inherit;}

/* sup- & subscript */
sup, sub 															{vertical-align: baseline; position: relative; font-size: 75%; line-height: 0;} /* preventing from affecting line-height */
sup																	{top: -.5em; vertical-align: sub}
sub																	{bottom: -.25em; vertical-align: sub}

/* fundementals */
.basicContainer 													{width: 100%; /* in case you place it in a flex container */ max-width: 1440px; margin: 0px auto; padding-top: var(--spacing-100); padding-bottom: var(--spacing-100);}

:root {
	--basicContainerPadding: clamp(1.25rem, 3vw + 0.25rem, 2.5rem); /* min 20px from 300 pixels to 40 pixels 1200 pixels */
    --box-shadow: 0px 15px 40px rgb(0, 0, 0, 0.1);
	--border-radius: 0.33333em;

    /* spacing */
	--spacing-100: clamp(3.125rem, 6vw + 1.5rem, 6.25rem); /* 50 - 100 */
	--spacing-80: clamp(2.5rem, 3.6vw + 1.8rem, 5rem); /* 40 - 80 */
	--spacing-60: clamp(1.25rem, 3.9vw + 0.2rem, 3.75rem); /* 30 - 60 */
	--spacing-40: clamp(1.25rem, 2vw + 0.8rem, 2.5rem);; /* 20 - 40 */
	--spacing-30: clamp(0.938rem, 1.8vw + 0.4rem, 1.875rem); /* 15 - 30 */
	--spacing-20: clamp(0.625rem, 1vw + 0.4rem, 1.25rem); /* 10 - 20 */

	/* colors */
	--color-purple: #69335A;
	--color-purple-dark: #542948;
	--color-purple-light: #FEECF3;
	--color-green: #40AC4C;
	--color-green-light: #eaffed;
	--color-green-dark: #338A3D;
	--color-blue: #00A3DA;
	--color-blue-light: #F4F5FF;
	--color-blue-dark: #0082AE;
	--color-orange: #EC933A;
	--color-orange-light: #FFF8F0;
	--color-orange-dark: #BD762E;
	--color-pink: #BC3B76;
	--color-pink-dark: #962F5E;
	--color-pink-light: #FEECF3;
}

/***********************************************
Fundementals
***********************************************/

/* various */
.hideInlineSVG 														{width: 0; height: 0; position: absolute;} 

/* top bar */
#topBar        				{position: fixed; top:0; left: 0; width: 100%; display: flex; gap:var(--spacing-20); height: 100px; padding:0 var(--spacing-40) 0 0; align-items: center; z-index: 1003; transition: background-color 0.3s ease, box-shadow 0.3s ease;}
#topBar.scrolled  			{box-shadow: 4px 4px 10px 0 rgb(0,0,0,0.05);}
#topBar.scrolled, .mobileMenuToggleActive #topBar			{background-color: #fff;}
#homePage.mobileMenuToggleActive #topBar, #vacancyDetailPage.mobileMenuToggleActive #topBar {filter: none; box-shadow: none;}

	/* logo */
	#topBar #logo 					{flex: 0 1 auto; max-width: calc(100% - 100px); /* 100px is for menu and contact button */ align-self: flex-start; display: flex; justify-content: center; align-items: center; background-color: #fff; border-bottom-right-radius: var(--border-radius);}
		#logoImgContainer 				{width: 160px; position: relative; transition: height 0.3s ease; margin:15px;}
			#logoImgContainer:before 		{content: ''; display: block; padding-bottom: 100%; transition: padding-bottom 0.3s ease;}
			#topBar.scrolled #logoImgContainer:before		{padding-bottom: 70px;}
			#logoImgContainer img 			{position: absolute; left: 0; top:0; width:100%; height: 100%; object-fit: contain; object-position: center;}

	/* menu */
	#topBar .partNavigation.horizontal ul.level-0 > li.search .navigationIcon {margin-right: 0;}
		#topBar .partNavigation.horizontal ul.level-0 > li.search .navigationIcon svg {height: 22px; fill: var(--color-purple);}
		#topBar .partNavigation.horizontal ul.level-0 > li > a {color: var(--color-purple);}
		#topBar .partNavigation.horizontal ul.level-0 > li a svg {fill: var(--color-purple);}

		#homePage #topBar:not(.scrolled) .partNavigation.horizontal ul.level-0 > li.search .navigationIcon svg, #vacancyDetailPage #topBar:not(.scrolled) .partNavigation.horizontal ul.level-0 > li.search .navigationIcon svg {fill: #fff;}
		#homePage #topBar:not(.scrolled) .partNavigation.horizontal ul.level-0 > li > a, #vacancyDetailPage #topBar:not(.scrolled) .partNavigation.horizontal ul.level-0 > li > a {color: #fff;}
		#homePage #topBar:not(.scrolled) .partNavigation.horizontal ul.level-0 > li a svg, #vacancyDetailPage #topBar:not(.scrolled) .partNavigation.horizontal ul.level-0 > li a svg {fill: #fff;}

	#topBar .partNavigation.horizontal ul.level-0 > li.search .navigationLabel {display: none;}

	/* menu button */
	#homePage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) #mobileMenuToggle .mobileMenuButtonLabel, #vacancyDetailPage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) #mobileMenuToggle .mobileMenuButtonLabel {
		color: #fff;
	}
	#homePage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) #mobileMenuToggle .mobileMenuButtonHamburger span, #vacancyDetailPage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) #mobileMenuToggle .mobileMenuButtonHamburger span {
		background-color: #fff;
	}

	/* contact button */
	#topBar .partButton.meet {margin-left: auto; font-size: 22px; }
	#topBar .partButton.meet, #buttonNakedContainer .partButton.meet {color: #fff; background-color: var(--color-green); padding: 0 0.7em; height: 40px; border-radius: var(--border-radius); font-weight: 900; transition: background-color .3s ease /* hover & focus */, transform 0.15s ease /* active */;}

		#topBar .partButton.meet svg, #buttonNakedContainer .partButton.meet svg {fill: #fff; }
		#topBar .partButton.meet svg {height: 22px; max-width: 22px;}

		@media (hover: hover) {
			#topBar .partButton.meet:hover, #buttonNakedContainer .partButton.meet:hover {background-color: var(--color-green-dark);}
		}

	/* hamburger button */
	.hamburgerButton 	{display:flex; align-items:center; color: var(--color-purple); display: none; padding:0 0.8em;}
	
		/* icon */
		.hamburgerButton .icon 					{display:flex; flex-direction:column; justify-content:center;}
			.hamburgerButton .icon span 				{width: 23px; height: 3px; background-color: var(--color-purple); transition: all 0.3s ease-in-out;}
			.hamburgerButton .icon span:nth-child(2)  	{margin: 4px 0;}

			.overlayActive .hamburgerButton .icon span:nth-child(1) 	{transform: translateY(7px) rotate(45deg);}
			.overlayActive .hamburgerButton .icon span:nth-child(2) 	{opacity: 0;}
			.overlayActive .hamburgerButton .icon span:nth-child(3) 	{transform: translateY(-7px)rotate(-45deg);}

		/* label */
		.hamburgerButton .label {font-weight: 900; font-size: 1.2222em; margin-left: 0.3em; text-align: left;} 

		#homePage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) .hamburgerButton .label, #vacancyDetailPage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) .hamburgerButton .label {color: #fff;}
		#homePage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) .hamburgerButton .icon span, #vacancyDetailPage:not(.mobileMenuToggleActive) #topBar:not(.scrolled) .hamburgerButton .icon span{background-color: #fff;}

	/* contact */
	#menuContact 	{text-decoration: none; font-size: 1.2222em; display: flex; align-items: center; color: #fff;}
		#menuContact .label 	{margin-right: 6px;}
		#menuContact .icon 		{}
			#menuContact .icon svg {width: 28px; height: 28px;}

	/* header */
	#basicHeading 			{display: flex; flex-wrap: wrap; background-color: var(--color-green-light); margin-top: 100px;}
		#basicHeadingText			{width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding:var(--spacing-60) 0 var(--spacing-60) 0; min-height: 360px; /* in case there is no image uploaded */}

			#basicHeadingTitle			{width: 100%; max-width: 720px;}
				/* #basicHeadingTitle .partBreadcrumb 	{margin-bottom:10px;} */
				#basicHeadingText.noImage .partBreadcrumb	{margin-top: 20px;}
				#basicHeadingTitle h1 				{color: var(--color-green); line-height: 1em; margin-bottom: 0;}

				#basicHeadingTitle .partSearchBar 	{padding-right: 30px; margin-top: 15px;}
		
		#basicHeadingImage			{width: 50%; clip-path: url(#basicHeadingImageClipPath); margin-top: -100px; background-color: var(--color-green); max-width: 1000px; /* maximizing height */ margin-left: auto; }
			#basicHeadingImage .partContentFileImageGallery {position: relative; height: 100%;}
				#basicHeadingImage .partContentFileImageGallery * {height: 100%;}
				#basicHeadingImage .partContentFileImageGallery::after 	{content:''; position: absolute; top:0; width: 100%; height: 30%; z-index: 10; background-image: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.00) 100%);}
			
/***********************************************
Home
***********************************************/

#homePage #topBar:not(.scrolled) .partNavigation.horizontal			{filter: drop-shadow(0 0.1em 0.1em rgba(0,0,0,0.5));}

#heroHeader {height: calc(100vh + 60px); background-color: #000; /* keep this black for opacity */ position: relative;}

	/* text */
	#heroHeaderText 	{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 40;}
		 #heroHeaderText .basicContainer 	{text-align: center; max-width: 1200px;}
			 #heroHeaderText h1 				{color: #fff; text-shadow: 0 3px 5px rgba(0,0,0,0.20); margin-bottom: 0.3em;}

	/* shadow overlay */
	#heroHeader::after {content:''; position: absolute; top:0; width: 100%; height: 100%; background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0.1) 100%);}

	/* video */
	#heroVideo {position: absolute; height: 100%; width: 100%; z-index: 20;}
		#heroVideo video {width: 100%; height: 100%; object-fit: cover;}
		
	/* image */
	#heroImage 									{position: absolute; height: 100%; width: 100%; z-index: 10;}
	   #heroImage .partContentFileImageGallery, #heroImage .partContentFileImageGallery * {height: 100%;}

/* home intro + usp */
#introAndUSP {
	display: flex;
	flex-wrap: wrap;
	/* align-items: flex-start; */
	position: relative;
}

	#homeIntro 					{width: 50%; padding:var(--spacing-60); margin-top: calc(-1 * var(--spacing-60)); background-color: #fff; border-radius: 0 var(--border-radius) 0 0; z-index: 50;}

		#homeIntro::before {
			position: absolute;
			top: var(--spacing-40);
			left:0;
			content: '';
			width: 26%;
			aspect-ratio: 449/527;
			background: url(/images/style/background-stars.svg) no-repeat top left;
			background-size: contain;
			z-index: -1;
		}

		#homeIntroText 				{width: 100%; max-width: calc(720px - var(--spacing-60)); margin-left: auto;}
		#homeIntroText .partContentText strong {color: var(--color-orange);}
	#homeUSP 					{width: 50%; padding:var(--spacing-60); background-color: var(--color-orange-light); border-radius: 0 0 0 var(--border-radius); z-index: 70; /* prevent star overlay */}
		#homeUSPList 				{width: 100%; max-width: calc(720px - var(--spacing-60)); margin-right: auto;}
			#homeUSPList ul  			{display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px;}
				#homeUSPList ul li 			{}
					#homeUSPList ul li a		{color: inherit; display: flex; text-decoration: none; line-height: 1.2em;}
						#homeUSPList .icon 	{display: flex; justify-content: center; align-items: center; height: 60px; width: 60px; flex: 0 0 auto; background-color: var(--color-orange); border-radius: 50%; margin-right: 15px;}
				
						#homeUSPList .text 	{}
							#homeUSPList .h4  	{color: var(--color-orange); text-decoration: none; display: inline; line-height: 1.2em; background-image: linear-gradient(var(--color-orange), var(--color-orange)); background-repeat: no-repeat; background-position: bottom 0 left; background-size: 0% 2px; transition: background-size 0.3s ease-in-out;}

							@media (hover: hover) {
								#homeUSPList a:hover .h4 {background-size: 100% 2px;}
							}
							#homeUSPList p 		{font-size: 1rem; margin-top: 0.2em; }


/* quote slider */
#quoteSliderSection 					{position: relative; z-index: 70; /* prevent star overlay */}

	#contentBlockHomeSection + #quoteSliderSection .basicContainer 	{padding-top: 0;}

		#quoteSliderContainer 	{position: relative;}

		#quoteSliderContainer .partSlider 		{}
			#quoteSliderContainer .partSlider .slideContainer {}

				/* #quoteSliderContainer .partSlider .quoteItem {min-height: 360px;} */


		#quoteSliderButtonContainer 			{margin-top: var(--spacing-30); text-align: right;}

/***********************************************
Content
***********************************************/

#contentAndMenu 	{
	overflow-x: hidden; /* hide before background of sidecontainer */ 
}

	#contentAndMenu .basicContainer {
		padding-top: var(--spacing-60);
		padding-bottom: 0;
		position: relative;
	}
	
	#contentAndMenu .basicContainer::before {
		position: absolute;
		top: var(--spacing-30);
		left: -25%;
		content: '';
		width: 35%;
		aspect-ratio: 449/527;
		background: url(/images/style/background-stars.svg) no-repeat top left;
		background-size: contain;
		z-index: -1;
	}

		 #contentAndMenuContainer 			{display: flex; align-items: flex-start;}

			/* content */
			#contentContainer 				{width: 100%; max-width: 720px; flex: 1 1 auto; min-width: 0; /* hack to prevent the formItemContainer to grow */;}

			#contentContainer:only-child 	{max-width: 1024px;} /* used for ervaringen pagina */

				/* headdings */
				#contentContainer h2 			{margin-bottom: 0.1em; font-weight: 900; color: var(--color-blue);}
				#contentContainer h1 + h2 		{margin-top: -25px; margin-bottom: 25px;}

				/* text */
				#contentContainer .partContentText strong {color: var(--color-purple);}

				/* image */
				#contentContainer .partContentFileImageGallery.single {margin-bottom: var(--partContent-margin)}

				/* form */
				#contentContainer .partContentForm 													{padding:var(--spacing-30); background-color: var(--color-blue-light); border-radius: var(--border-radius);}
				#contentContainer .partContentForm h2 												{color: var(--color-blue); margin-bottom: 0.8em;}

			/* side */
			#sideContainer 					{width: calc(100% - 770px); min-width: 330px; margin-left: var(--spacing-60); background-color: var(--color-orange-light); border-radius: var(--border-radius) 0 0 var(--border-radius); position: relative;}
			.basicContainer > #sideContainer{width: auto; min-width: auto; margin-left: 0;} /* in case of team or quote page */
			#sideContainer:before 			{content:""; background-color: var(--color-orange-light); position: absolute; right: -999em; width: 999em; height: 100%;}
				#sideMenuContainer 				{padding:var(--spacing-40); padding-right: 0;}
				#sideMenuContainer .h3 			{display: block; margin-bottom: 10px; color: var(--color-orange); margin-left: 20px;}

/***********************************************
Content block text + image
***********************************************/				

#contentBlockHomeSection 					{}
	#contentBlockHomeSection .basicContainer {}

#contentBlockSection  {}
	#contentBlockSection .basicContainer {padding-top: 0;}

		#contentBlockList  					{display: flex; flex-direction: column; gap: var(--spacing-100);}

			.contentBlockItem 					{display: flex;}
			.contentBlockItem:last-child 		{} 

				/* text */
				.contentBlockItemText 			{border-radius: var(--border-radius); color: #fff; padding: var(--spacing-60); width: 52%; margin-right: -120px; z-index: 10; margin-bottom: var(--spacing-60); display: flex; flex-direction: column; justify-content: center;}

					/* title */
					.contentBlockItemText h2 		{color: #fff;}

					/* text */
					.contentBlockItemText .partContentText {color: #fff;}

					/* file admin */
					.contentBlockItemText .partContentFileAdmin ul li a .fileAdminLabel span {color: #fff;}

					/* files */
					.contentBlockItemText .partContentFileAdmin ul li a .fileAdminIcon {background-color: rgba(255,255,255,0.25);}

					/* links */
					.contentBlockItemText .partContentText a, .contentBlockItemText .partContentFileAdmin ul li a .fileAdminLabel span {background-image: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)), linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1));}
					
					/* form */
					.contentBlockItemText .formV2 input, .contentBlockItemText .formV2 textarea {background-color: transparent; border-color: #fff!important;}
					.contentBlockItemText .formV2>.formItemContainer>.formItemContainerLabel .formItemLabelValue {color: #fff;}
					.contentBlockItemText .formV2 .formItemContainerLabel .formItemLabelRequired {color: #fff;}

					/* button */
					.contentBlockItemText .partButton.partButton1.default {background-color: #fff; color: inherit!important;}
					@media (hover: hover) {
						.contentBlockItemText .partButton.partButton1.default:hover, .contentBlockItemText .partButton.partButton1.default:focus {
							background-color: rgba(255,255,255,0.25)!important; color: #fff!important;
						}
					}	

				/* image + map for contactpage */
				.contentBlockItemImage, .contentBlockItemMap			{width: calc(48% + var(--spacing-100)); margin-top: var(--spacing-60); border-radius: var(--border-radius); overflow: hidden;} 
					.contentBlockItemMap .partGoogleMaps.partGoogleMaps1 {height: 100%;}


			.contentBlockItem:nth-child(even) .contentBlockItemText 	{order:2; margin-right: 0; margin-left: calc(-1 * var(--spacing-100)); margin-top: var(--spacing-60); margin-bottom: 0;}
			.contentBlockItem:nth-child(even) .contentBlockItemImage 	{order:1; margin-top: 0; margin-bottom: var(--spacing-60);}

			.contentBlockItem:nth-child(4n+1) .contentBlockItemText {background-color: var(--color-blue); color: var(--color-blue);} /* Select Every Fourth, Starting At The First */
				.contentBlockItem:nth-child(4n+1) .contentBlockItemText .partButton.default {color: var(--color-orange);}

			.contentBlockItem:nth-child(2n+2) .contentBlockItemText {background-color: var(--color-purple); color: var(--color-purple);} /* Select Every Second, Starting At The Second */
				.contentBlockItem:nth-child(2n+2) .contentBlockItemText .partButton.default {color: var(--color-orange);}

			.contentBlockItem:nth-child(3n+3) .contentBlockItemText {background-color: var(--color-orange); color: var(--color-orange);} /* Select Every Thrith, Starting At The Thirth */
				.contentBlockItem:nth-child(3n+3) .contentBlockItemText .partButton.default {color: var(--color-orange);}

			.contentBlockItem:nth-child(4n+1) .contentBlockItemText .partContentForm .formControlFeedback,
			.contentBlockItem:nth-child(2n+2) .contentBlockItemText .partContentForm .formControlFeedback,
			.contentBlockItem:nth-child(3n+3) .contentBlockItemText .partContentForm .formControlFeedback {
				color: #fff;
			}

			.contentBlockItem:nth-child(4n+1) .partFormControlMessageError .formControlMessageContainer,
			.contentBlockItem:nth-child(2n+2) .partFormControlMessageError .formControlMessageContainer,
			.contentBlockItem:nth-child(3n+3) .partFormControlMessageError .formControlMessageContainer  {
				background-color: #fff;
			}

			.contentBlockItem:nth-child(4n+1) .formV2 .errorLabel,
			.contentBlockItem:nth-child(2n+2) .formV2 .errorLabel,
			.contentBlockItem:nth-child(3n+3) .formV2 .errorLabel {
				background-color: #fff;
				width: fit-content;
				padding: 0.3em;
				border-radius: 0.3em;
			}

			/* hover */
			@media (hover: hover) {
				.textWithImageContainer.first .partButton:not([disabled]):hover, .textWithImageContainer.first .partButton:not([disabled]):focus {
					background-color: transparent;
				}
			}	

		/* second */
		.textWithImageContainer.second .text {background-color: var(--color-purple);}
			.textWithImageContainer.second .partButton 	{background-color: var(--color-purple-darker); border-color: var(--color-purple-darker);}

			/* hover */
			@media (hover: hover) {
				.textWithImageContainer.second .partButton:not([disabled]):hover, .textWithImageContainer.second .partButton:not([disabled]):focus {
					background-color: transparent;
				}
			}	
			
/********************************************** 
highlight blocks 
**********************************************/
#highlightedSection 			{margin-bottom: var(--spacing-100);}
#basicHeading + #highlightedSection {margin-top: var(--spacing-100);}

	#highlightedContainer 			{display: flex; flex-wrap: wrap; align-items: flex-start;}
		.highlightedBlock			{width: 33.3333333333%;}
			.highlightedBlock .partContentFileImageGallery a {opacity: 1; transition: opacity 0.3s ease;}
			.highlightedBlock .partContentFileImageGallery a:hover {opacity: 0.8;}

			.highlightedBlockText 	{padding: var(--spacing-60); padding-bottom: calc(var(--spacing-30) + 50px); font-size: 0.88889em; position:relative;}
				
				.highlightedBlock .partButton.iconOnly 	{position: absolute; right:20px; bottom: 20px;}
				.highlightedBlockText .partContentText p:last-child {margin-bottom: 0;}
	
		.highlightedBlock:nth-child(1)		{background-color: var(--color-green-light); border-top-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); overflow: hidden;}
			.highlightedBlock:nth-child(1) .partContentFileImageGallery {background-color: var(--color-green);}
			.highlightedBlock:nth-child(1) .h4		{color: var(--color-green);}
				.highlightedBlock:nth-child(1) .h4 a	{background-image: linear-gradient(transparent, transparent), linear-gradient(var(--color-green), var(--color-green));}
			.highlightedBlock:nth-child(1)	.partButton.iconOnly .buttonIcon	{background-color: var(--color-green);}

			@media (hover: hover) {
				.highlightedBlock:nth-child(1)	.partButton.iconOnly:hover .buttonIcon {background-color: var(--color-green-dark);}
			}

		.highlightedBlock:nth-child(2)			{margin-top: 60px; background-color: var(--color-orange-light); border-top-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); overflow: hidden;} 
			.highlightedBlock:nth-child(2) .partContentFileImageGallery {background-color: var(--color-orange);}
			.highlightedBlock:nth-child(2)	.h4	{color: var(--color-orange);}
				.highlightedBlock:nth-child(2) .h4 a	{background-image: linear-gradient(transparent, transparent), linear-gradient(var(--color-orange), var(--color-orange));}
			.highlightedBlock:nth-child(2) .partButton.iconOnly .buttonIcon	{background-color: var(--color-orange);}

			@media (hover: hover) {
				.highlightedBlock:nth-child(2)	.partButton.iconOnly:hover .buttonIcon {background-color: var(--color-orange-dark);}
			}

		.highlightedBlock:nth-child(3)			{margin-top: 120px; background-color: var(--color-purple-light); border-top-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); overflow: hidden;}
			.highlightedBlock:nth-child(3) .partContentFileImageGallery {background-color: var(--color-purple);}
			.highlightedBlock:nth-child(3)	.h4 	{color: var(--color-purple);}
				.highlightedBlock:nth-child(3) .h4 a	{background-image: linear-gradient(transparent, transparent), linear-gradient(var(--color-purple), var(--color-purple));}
			.highlightedBlock:nth-child(3)	.partButton.iconOnly .buttonIcon	{background-color: var(--color-purple);}

			@media (hover: hover) {
				.highlightedBlock:nth-child(3)	.partButton.iconOnly:hover .buttonIcon {background-color: var(--color-purple-dark);}
			}

/********************************************** 
Map + Facebook 
**********************************************/

#googleMapsAndSocialMediaContainer   						{display: flex; flex-wrap: wrap;;}

	#googleMapscontainer 									{width: 50%; position: relative;}
	#googleMapscontainer:only-child 						{width: 100%;}

		#googleMapscontainer .partGoogleMaps, #googleMapscontainer .partGoogleMaps iframe {min-height: 60vh; height: calc(100% - 30px); border-top-right-radius: var(--border-radius);}
		#googleMapscontainer:only-child .partGoogleMaps, #googleMapscontainer:only-child .partGoogleMaps iframe {border-top-right-radius: 0;}
		#addressContainer 										{position: absolute; left:0; top:0; background-color: var(--color-orange); padding:var(--spacing-60); display: flex; border-bottom-right-radius: var(--border-radius);}
			#addressContainer .icon 								{height: 60px; width: 60px; padding:15px; background-color: #fff; border-radius: 50%; margin-right: 15px; display: flex; justify-content: center; align-items: center;}
				#addressContainer .icon svg 							{fill: var(--color-orange);}
			#addressContainer .partContentText 						{color: #fff; line-height: 1.5em;}
			#addressContainer .partContentText strong 				{}

	#socialMediaContainer 									{width: 50%; margin-top: 60px;}

		/* Social feed */
		.socialFeedList 					{text-align: left;}
		.socialFeedList.facebook			{}
		.socialFeedList.instagram 			{}

			/* item */
			.socialFeedItem 						{display: flex; flex-direction: column; flex: 1 1 auto; background-color: var(--color-orange-light); border-bottom-left-radius: var(--border-radius);}
				
				/* image container */
				.socialFeedImage 						{flex: 0 0 auto; background-color: var(--color-blue-darker);}

					/* image */
					.socialFeedImage .partContentFileImageGallery.single {}

					/* placeholder */
					.socialFeedImagePlaceholder 		{position: relative;}
					.socialFeedList.facebook .socialFeedImagePlaceholder	{background-color: #1877f2;}
					.socialFeedList.instagram .socialFeedImagePlaceholder	{background-color: #833ab4;}
						.socialFeedImagePlaceholder svg 	{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #fff; opacity: 0.2; height: 30%; max-width: 30%;}

					/* hover */
					.socialFeedImage .partContentFileImageGallery.single, .socialFeedImage .socialFeedImagePlaceholder  {transition: opacity 0.3s ease;}
					.socialFeedImage .partContentFileImageGallery.single:hover, .socialFeedImage .socialFeedImagePlaceholder:hover {opacity: 0.7;}
				
				/* text container */
				.socialFeedText	  						{display: flex; flex-direction: column; align-items: flex-start; padding:var(--spacing-60); flex: 1 1 auto; color: #000;}
					.socialFeedElapsedTime 					{line-height: 1.3em; font-size: 14px; margin-bottom: 5px;}

					.socialFeedItem .partContentText 		{font-size: 16px; word-break: break-word; /* break long url's */}
					.socialFeedItem .partButton.partButton1.naked	{margin-top: auto; color: var(--color-orange);}
						.socialFeedItem .partButton.partButton1.naked .buttonIcon svg {fill: var(--color-orange);}

/********************************************** 
Team 
**********************************************/

#teamSection {overflow: hidden; /* hide before background of sidecontainer */}

	#teamSection .basicContainer {padding-top: var(--spacing-60); padding-bottom: 0;}

		#teamIntroContainer 				{background-color: var(--color-blue-light); margin-right: 120px; padding:var(--spacing-60) var(--spacing-60) calc(var(--spacing-100) + var(--spacing-60)) var(--spacing-60); border-radius: var(--border-radius);}
		#teamIntroContainer.noTeamPhotos 	{margin-bottom: var(--spacing-60); padding-bottom: var(--spacing-60);}

			#teamIntroContainer h2 				{color: var(--color-blue);} 
			#teamIntroContainer .partContentText strong {color: var(--color-blue);}
			#teamIntroContainer .partContentText ul li::marker {color: var(--color-blue);}
		
		#teamProfileContainer				{margin: -120px -20px 0 -20px; width: calc(100% + 40px); padding-left: 60px; display: flex; flex-wrap: wrap; align-items: flex-start;}
			.teamMember 						{width: calc(25% - 40px); margin: 0 20px 40px 20px;}
				.teamMemberPhoto 					{border-radius: 6px; overflow: hidden; margin-bottom: 15px; background-color: var(--color-blue-light); box-shadow: inset 0 0 50px rgba(0,0,0,0.05); position: relative;}
					.teamMemberPhoto .partContentFileImageGallery {}
					.teamMemberPhoto .noPhoto			{content: ''; display: block; padding-top: 132%; background: url("data:image/svg+xml,%3Csvg width='210' height='210' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M105 105c29.006 0 52.5-23.494 52.5-52.5S134.006 0 105 0 52.5 23.494 52.5 52.5 75.994 105 105 105Zm0 26.25c-35.044 0-105 17.588-105 52.5V210h210v-26.25c0-34.912-69.956-52.5-105-52.5Z' fill='rgb(255,255,255)' fill-rule='nonzero' /%3E%3C/svg%3E") no-repeat center; background-size: 50%;}
					.teamMemberPhoto .partButton 		{position: absolute; bottom: 20px; right:20px;}
					.teamMemberPhoto .noPhoto + .partButton {color: var(--color-purple);}
					.teamMemberPhoto .noPhoto + .partButton:hover {color: var(--color-green);}

				.teamMember h3 							{color: var(--color-purple); margin-bottom: 3px;}
				.teamMember .function 					{font-size: 1rem;}

				.popupCustomContainer .h2 				{display: block; margin-bottom: 5px;}
				.popupCustomContainer .function  		{font-weight: 700; color: var(--color-purple); display: inline-block; margin-bottom: 10px;}

/* home */
#homeTeamSection {}
	#homeTeamSection .basicContainer 	{padding-top: 0;}

		#homeTeamSection #teamIntroContainer 				{background-color: var(--color-purple-light);}
		#homeTeamSection #teamIntroContainer h2 				{color: var(--color-purple);}		

		#homeTeamSection .teamMember h3 					{color: var(--color-purple);}
		#homeTeamSection .teamMemberPhoto 					{background-color: var(--color-purple-light);}

		#teamLinktoOverview.teamMember 		{text-decoration: none; position: relative;}

		#teamLinktoOverview:before			{content: ''; display: block; padding-top: 132%; background-color: var(--color-purple); border-radius: var(--border-radius); transition: background-color 0.3s ease;}
		#teamLinktoOverview:hover:before 	{background-color: var(--color-orange);}

			#teamLinktoOverview.teamMember h3  	{color: #fff; position: absolute; left:0; right:0; top: 50%; transform: translateY(-50%); z-index: 10; padding:var(--spacing-40); margin-bottom: 0; hyphens: none;}

			#teamLinktoOverview.teamMember .partButton.iconOnly {position: absolute; bottom: 20px; right:20px;}
				#teamLinktoOverview.teamMember .partButton.iconOnly .buttonIcon	{background-color: #fff;}
				#teamLinktoOverview.teamMember .partButton.iconOnly .buttonIcon svg {fill: var(--color-purple);}

/********************************************** 
Quotes 
**********************************************/

#quoteSection  {overflow: hidden; /* hide before background of sidecontainer */}
	#quoteSection .basicContainer {padding-top: 0;}
		#quoteList 					{display: flex; flex-direction: column; gap: var(--spacing-30); margin-bottom: var(--spacing-100);}
			.quoteItem 					{display: flex; border-radius: var(--border-radius); overflow: hidden;}

			.quoteItem:nth-child(3n+1) {background-color: var(--color-pink)} /* Select Every third, Starting At The First */
			.quoteItem:nth-child(3n+2) {background-color: var(--color-green)} /* Select Every third, Starting At The second */
			.quoteItem:nth-child(3n+3) {background-color: var(--color-blue)} /* Select Every third, Starting At The third */

				.quoteItemTextContainer 	{width: calc(100% - 400px); display: flex; align-items: center;}
				.quoteItemTextContainer:only-child {width: 100%;}

					/* text */
					.quoteItemText 				{color: #fff; padding: var(--spacing-60); font-size: 1.2222em; font-weight: 900;
						background-image: url("data:image/svg+xml,%3Csvg width='79' height='61' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60.259v-16.54c0-4.882.917-10.022 2.75-15.42 1.835-5.399 4.385-10.567 7.651-15.506 3.267-4.94 7.106-9.16 11.519-12.664l12.722 9.132a99.99 99.99 0 0 0-8.94 16.023c-2.464 5.57-3.696 11.63-3.696 18.176V60.26H0Zm43.84 0v-16.54c0-4.882.916-10.022 2.75-15.42 1.834-5.399 4.384-10.567 7.65-15.506 3.267-4.94 7.107-9.16 11.52-12.664L78.48 9.261a99.99 99.99 0 0 0-8.94 16.023c-2.464 5.57-3.696 11.63-3.696 18.176V60.26H43.84Z' fill='%23FFF' fill-rule='nonzero' fill-opacity='.2'/%3E%3C/svg%3E"); 
						background-position: 52px 30px; background-repeat: no-repeat;}
					.quoteItemText .partContentText p:last-child	{margin-bottom: 15px;}
					.quoteItemText .author 				{font-size: 1em; font-weight: 400;}

					/* images */
					.quoteItemImage 			{width: 400px;} 
						.quoteItemImage .partContentFileImageGallery.single {height: 100%;}
							.quoteItemImage .partContentFileImageGallery.single * {height: 100%;}
 

			#quoteSliderSection .sliderPagination {margin-top: 20px;}

/********************************************** 
Contact 
**********************************************/

#contactSection {}
	#contactSection .basicContainer {}

/********************************************** 
Search 
**********************************************/

#searchSection {}
	#searchSection .basicContainer {padding-top: var(--spacing-60);}

/********************************************** 
Footer 
**********************************************/

footer          			{background: url(/images/style/footer-pencils.jpg) repeat-x top center; background-size: contain; padding-top: calc(16.85% - var(--spacing-100));}

	/* menu */
	#footerMenu 				{background-color: var(--color-blue-light); clip-path: polygon(0 0, 100% calc(0% + var(--spacing-100)), 100% 100%, 0% 100%);}
		#footerMenu .basicContainer {padding-bottom: var(--spacing-60);}
			.menuColumnContainer 		{display: flex; gap: var(--spacing-30) var(--spacing-80);}
				.menuColumn 				{}
					.menuColumn h2 				{color: var(--color-blue); margin-bottom: 0.2em;}
					.menuColumn ul 				{font-size: 16px; line-height: 1.2em;}
						.menuColumn ul li 			{}
							.menuColumn ul li a 		{color: inherit; text-decoration: none; padding:0.4em 0; display: inline-block;}
							.menuColumn ul li a:hover 	{text-decoration: underline; color: var(--color-blue);}

					.menuColumnButtonList 		{display: flex; flex-direction: column; align-items: flex-start;}
					#footerMenu .menuColumnButtonList  {margin-top: 31px;}
						.menuColumnButtonList .partButton	{margin-bottom: 5px;}
						.menuColumnButtonList .partButton .buttonIcon {width: 16px;}
							.menuColumnButtonList .partButton .buttonIcon svg {margin:0 auto;}
						.menuColumnButtonList .partButton:nth-child(3), .menuColumnButtonList .partButton:nth-child(6) {margin-top: 20px;}

				.menuColumnContainer .partSearchBar {margin-bottom: 20px;}

	/* links */
	#footerBottom 		{background-color: #fff;}

		#footerBottom .basicContainer 	{padding-top: var(--spacing-40); padding-bottom: var(--spacing-40);}

			/* bottom footer with links */
			#footerBottom ul 					{display: flex; flex-wrap: wrap; gap:15px 30px; font-size: 0.875em;}
				#footerBottom ul li 				{}
				
					#footerBottom ul li a 			{color: #000; text-decoration: none; display: flex; align-items: center;}
					#footerBottom ul li a:hover 		{text-decoration: underline;}
					#footerBottom ul li:first-child a 	{font-weight: 700; color: var(--color-purple);}

						#footerBottom ul li a .label 	{line-height: 1.2em; margin-top: 0.2em;}

						#footerBottom ul li a .icon 	{margin-right: 5px; flex: 0 0 auto;}
						#footerBottom ul li a .label + .icon {margin-left: 5px; margin-right: 0;}
							#footerBottom ul li a img 		{height: 16px; display: block;}

						#footerBottom ul li#realisation  {margin-right: auto;}
							#footerBottom ul li#realisation img {aspect-ratio: 1/1;}

						#footerBottom ul li#stichting  	{}
							#footerBottom ul li#stichting img {aspect-ratio: 82/16;}


/*************************************************
Overlay left
*************************************************/

/* body altering */
body.overlayActive                         		{position: fixed; /* prevents scrolling bug at the bottom of the screen */ overflow: hidden; /* prevents iOS refresh swipe down via top of screen */ width: 100%;}

/* window */
.overlayWindow                            		{position: fixed; background-color:#fff; z-index: 3110; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; width: 400px; max-width: 100%;}

	/* overlay close button */
	.overlayCloseButton 							{font-weight: 900; font-size: 20px; color: var(--color-purple); padding:0 20px; height: 60px; background-color: #fff; box-shadow: 4px 4px 10px 0 rgb(0, 0, 0, 0.05); flex: 0 0 auto; position: sticky; top:0; z-index: 10; width: 100%; display:flex; justify-content: flex-end; align-items:center; }

		/* icon */
		.overlayCloseButton .icon 					{width: 23px; height: 23px; position: relative;}
			.overlayCloseButton .icon span 				{height: 23px; border-left: 3px solid var(--color-purple); position: absolute; left: calc(50% - 1px);}

			.overlayCloseButton .icon span:nth-child(1) 	{transform: rotate(45deg);}
			.overlayCloseButton .icon span:nth-child(2) 	{transform: rotate(-45deg);}

		/* label */
		.overlayCloseButton .label {font-weight: 900; margin-right: 0.15em; text-align: left; margin-bottom: 0.1em;}

	/*  container with menu of filters */
	.overlayContainer 	{flex: 1 1 auto; background-color: var(--color-purple-light);}

	/* footer */
	.overlayFooterContainer 					{width: 100%; padding:0em; position: sticky; bottom: 0; background-color: #fff; box-shadow: 4px -4px 10px 0 rgb(0 0 0 / 5%); z-index: 10; flex: 0 0 auto;}
		.overlayFooterContainer .partButton.default 		{width: 100%;} /* maak kennis button */
		.overlayFooterContainer #buttonNakedContainer 	{display: flex; gap:20px; flex-wrap: wrap; padding:20px;}
		.overlayFooterContainer #buttonNakedContainer .partButton.naked {font-size: 0.88889em;}

/* background */
#overlayBackground                           {background-color: rgba(0,0,0,0.0); position: fixed; top:0; bottom:0; left: 0; right:0; z-index: 3100; visibility: hidden; opacity: 0; transition: ease 0.15s; /* fade out */} 
body.overlayActive #overlayBackground        {background-color: rgba(0,0,0,0.3); visibility: visible; opacity: 1; cursor:pointer; transition: ease 0.3s; /* fade in */}

/* overlay left */
.overlayWindow.overlayLeft             		{top:0; left: 0; transform: translateX(-100%); transition: transform ease 0.3s;}
.overlayWindow.overlayLeft.show      		{transform: translateX(0%);}

/* responsive */
@media (max-width: 667px){
	.overlayWindow       				 	{width:100%!important;}
	#overlayBackground 						{transition: none;}
}