body, #loadWebsite, #loadWebsite, #welkom, header, .introductie{
	width: 100vw;
}

#loadWebsite, #loadWebsiteWit, #welkom{
	height: 100vh;
}

body{
	position: relative;
	margin:0;
	overflow-x: hidden;
	color: #F9F9F9;
	text-align: justify;
}

	.contactBody{
		overflow: hidden;
	}

	#loadWebsite{
		display: grid;
		grid-template-rows: 1fr auto 1fr;
		background-color: white;
		position: fixed;
		z-index: 5;
		opacity: 0;
		transition: opacity 1s cubic-bezier(.365,.305,0,1);
		overflow-y: hidden;
	}

		#loadWebsiteTitel{
			display: flex;
			grid-column: 2/3;
			grid-row:2/3;
			margin: auto;
			width: 50%;
			align-self: center;
			justify-content: center;
			flex-direction: column;
			transform: translateY(800px);
			transition: transform 1s cubic-bezier(.365,.305,0,1);
		}

		#loadWebsiteTitel span{
			margin-bottom: 0;
		}

		#loadWebsiteTitel p{
			margin-top: 0px;
		}

		#loadWebsiteBar, #loadWebsiteBarBackground{
			width: 100%;
		}

		#loadWebsiteBar{
			height: 5px;
			position: relative;
			background-color: transparent;
		}

			#loadWebsiteBarFilled, #loadWebsiteBarBackground{
				height: 100%;
				position: absolute;
			}

			#loadWebsiteBarFilled{
				z-index: 5;
				background-color: #FFED00;
				width: 0%;
				transition: width 1s cubic-bezier(.365,.305,0,1);
				transition-delay: 1s;
			}

			#loadWebsiteBarBackground{
				background-color: #F6F6F6;
			}

			#loadWebsiteWit{
				width: 100vw;
				display: block;
				position: fixed;
				background-color: white;
				z-index: 4;
			}

			#scroll-beneden{
				opacity: 0;
				transition: opacity 1s cubic-bezier(.365,.305,0,1);
			}

	.progress-container, .progess-bar{
		height: 0.125rem;
	}

	.progress-container{
		grid-column: 1/-1;
		grid-row: 1/2;
		width: 100%;
		background: transparent;
	}

		.progress-bar{
		  background: #FFED00;
		  width: 0%;
		  /*box-shadow: 3px 3px 10px rgba(255, 237, 0,0.5);*/
		}
	
	#welkom{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(6, 1fr);
		height: 100vh;
		position: relative;
		opacity: 0;
		transition: opacity .3s cubic-bezier(.365,.305,0,1);
	}

		.welkom-bericht{
			display: flex;
			flex-direction: column;
			/*align-self: center;*/
			/*position: absolute;*/
			grid-column: 3/7;
			grid-row: 3/5;
			opacity: 1;
			width: 100%;
		}

		#welkom-bericht-title, .highlightTitle, .welkom-project-name{
			letter-spacing: 0.25px;
		}

		.welkom-project-name{
			font-size: 1.75rem;
			margin-bottom: 0.5rem;
		}

		.welkom-project-description{
			margin-bottom: 3rem;
		}

		#welkom-bericht-title, #welkom-bericht-title-mobile{
			opacity: 0;
			transform: translateY(20%);
			transition: transform 0.6s cubic-bezier(.365,.305,0,1) 1.3s, opacity 0.6s cubic-bezier(.365,.305,0,1) 1.3s;
		}

		#welkom-bericht-title{
			margin: 16px 0px;
		}

		#welkom-lijn{
			width: 0%;
			height: 1px;
			background-color: #E6E6E6;
			transition: width 1s cubic-bezier(.365,.305,0,1) 1s;
			margin-bottom: 8px;
		}

		#welkom-foto-1{
			grid-column: 7/10;
			grid-row: 1/6;
			background-image: url('../Afbeeldingen/Welkom/welkom-foto-1-small.jpg');
			background-repeat: no-repeat;
			background-position: center;
			position: absolute;
			align-self: center;
			background-size: 100%;
			border-radius: 12px;
			height: 400px;
			width: 400px;
			opacity: 0;
			transform: translateY(10%);
			z-index: 1;
			transition: opacity 1s cubic-bezier(.365,.305,0,1) .6s, transform 1s cubic-bezier(.365,.305,0,1) .6s;
		}

		#welkom-yellow{
			grid-column: 8/13;
			grid-row: 4/6;
			height: 100%;
			width: 0%;
			background-color: #FFED00;
			border-radius: 0px 0px 0px 12px;
			position: relative;
			z-index: 0;
			transition: width 0.3s cubic-bezier(.365,.305,0,1) .3s;
		}

			#welkomIntroductieMobileTitle{
				display: none;
			}

			.welkom-introductie p{
				font-weight: 700;
				color: #131824;
				line-height: 32px;
			}
			
			.highlightTitle{
				grid-column: 1/-1;
				font-size: 3rem;
				margin-bottom: 4rem;
				justify-self: center;
			}

			#highlightTitleDesktop{
				transform: translateY(0%);
				transition: transform 1s cubic-bezier(.365,.305,0,1);	
			}


			#welkom-projecten-title{
				opacity: 0;
				margin-left: -40px;
				transform: translateY(200px);
				transition: transform .3s cubic-bezier(.365,.305,0,1), opacity .3s cubic-bezier(.365,.305,0,1);
			}

		.welkom-projecten{
			display: grid;
			grid-template-columns: 140px repeat(12, 1fr) 140px;
		}

			.welkom-projecten-intro{
				grid-column: 2/3;
			}

			#welkom-roadmappie, #welkom-bykarlie, #welkom-save-now, #welkom-play-next{
				height: 80vh;
				background-size: 300%;
				background-repeat: no-repeat;
				box-shadow: 0px;
				border-radius: 12px;
			}

			#welkom-roadmappie, #bykarlie-project-info, #welkom-save-now, #play-next-project-info{
				grid-column: 2/6;
			}

			#roadmappie-project-info, #welkom-bykarlie, #save-now-project-info, #welkom-play-next{
				grid-column: 9/13;
			}

			#welkom-roadmappie{
				background-position: 100% 50%;
				transition: transform 1s cubic-bezier(.365,.305,0,1), box-shadow 1s cubic-bezier(.365,.305,0,1), background-position 1s cubic-bezier(.365,.305,0,1);
			}

			#welkom-save-now{
				background-position: 30% 50%;
				transition: transform 1s cubic-bezier(.365,.305,0,1), box-shadow 1s cubic-bezier(.365,.305,0,1), background-position 1s cubic-bezier(.365,.305,0,1);
			}

			#welkom-play-next{
				background-position: 20% 100%;
				transition: transform 1s cubic-bezier(.365,.305,0,1), box-shadow 1s cubic-bezier(.365,.305,0,1), background-position 1s cubic-bezier(.365,.305,0,1);
			}

			#welkom-bykarlie{
				background-position: 0% 50%;
				background-size: 300%;
				transition: transform 1s cubic-bezier(.365,.305,0,1), box-shadow 1s cubic-bezier(.365,.305,0,1), background-position 1s cubic-bezier(.365,.305,0,1);
			}

			.welkom-projecten-info{
				align-self: center;
				opacity: 1;
			}

				.welkom-projecten-info h2{
					margin-top: 0px;
				}

		header *, .introductie *{
			grid-column: 2/3;
		}

		.arrow-left {
			display: flex;
			align-items: center;
			justify-content: center;
		  	position: absolute;
		  	background-color: #E3C9FC;
		  	align-self: center;
		  	border:none;
		 }

		header h1{
			align-self: center;
			display: flex;
			justify-content: center;
		}

		.caseLanding{
			display: grid;
			width: 100vw;
		}

			#case-header-title{
				grid-column: 2/12;
				grid-row: 2/3;
			}

				#projectTitle,  #projectType, #projectDescription{
					margin: 0.5rem 0px;
				}

				#projectTitle{
					margin-top: 8px;
					opacity: 0;
					transition: opacity 0.3s cubic-bezier(.365,.305,0,1), letter-spacing 1s cubic-bezier(.365,.305,0,1);
				}

				#projectType{
					color: #71747C;
					margin-bottom: -8px;
					opacity: 0;
					transform: translateY(100%);
					transition: opacity 0.6s cubic-bezier(.365,.305,0,1), transform 1s cubic-bezier(.365,.305,0,1);
				}

					#projectType span{
						font-weight: 700;
						font-size: 20px;
						align-self: center;
					}

					.roadmappie-brand{
						color:#F64F21;
					}

					.bykarlie-brand{
						color: #102442;
					}

					.save-now-brand{
						color: #3962d4;
					}

					.play-next-brand{
						color: #F22C50;
					}

			#projectDescriptionContainer{
				display: grid;
			}

			#projectDescription{
				color: #71747C;
				opacity: 0;
				transition: opacity 0.6s cubic-bezier(.365,.305,0,1) 1.2s;
			}

			.case-header-content{
				display: grid;
				grid-template-columns: repeat(12, 1fr) auto;
				grid-template-rows: repeat(6, 1fr);
				min-height: 70vh;
				grid-column: 1/13;
				grid-row: 4/5;
				align-items: start;
			}

				#caseHeaderImage{
					grid-column: 2/12;
					grid-row: 1/10;
					z-index: 1;
					height: 0%;
					background-repeat: no-repeat;
					background-position: 50% 100%;
					border-radius: 0px 0px 12px 12px;

					transition: background-position 2s cubic-bezier(.365,.305,0,1), height 1s cubic-bezier(.365,.305,0,1);
				}

				#case-header-line{
					height: 1px;
					background-color: rgba(112,112,112,0.15);
					width: 0%;
					grid-column: 1/14;
					transition: width 1s cubic-bezier(.365,.305,0,1) 1s;
				}

				#case-header-description{
					width: fit-content;
					max-width: 500px;
					height: auto;

					grid-column: 8/13;
					grid-row: 7/13;
					z-index: 2;
					justify-self: end;
					background-color: #FFED00;
					border-radius: 12px 0px 0px 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 32px 24px;

					transform: translateX(100%);
					transition: transform 0.6s cubic-bezier(.365,.305,0,1);
					transition-delay: 1s;
				}

					#case-header-description p{
						color: #131824;
						font-weight: 700;
						align-self: center;
						padding: 0;
						margin: 0;
						margin: none;
						line-height: 2em;
					}

				#case-header-background{
					width: 100vw;
					height: 100%;
					grid-column: 1/13;
					grid-row: 1/13;
					background: linear-gradient(to bottom, rgba(246, 246, 246,1), rgba(255,255,255,1), transparent);
					z-index: -2;
					opacity: 0;
					transform: translateY(100%);
					transition: opacity 3s cubic-bezier(.365,.305,0,1), transform 1s cubic-bezier(.365,.305,0,1);
				}


		.case-header-title-container{
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
		}

		#case-header-title-responsive{
			align-self: center;
			text-align: center;
			opacity: 0;
			transform: translateY(50%);
			transition: opacity .4s cubic-bezier(.365,.305,0,1) 0.4s, transform .4s cubic-bezier(.365,.305,0,1) 0.4s; 
		}


		#case-header-title-responsive{
			/*position: absolute;
			top: 50%;
			width: 50%;*/
		}

		#case-header-title-responsive *{
			color: white;
			margin:16px 0px;
		}

		#case-header-title-responsive h1{
			text-shadow: 2px 2px 4px rgba(37,46,69,0.04);
		}

		#case-header-title-responsive h3{
			text-shadow: 2px 2px 4px rgba(37,46,69,0.30);
			text-align: center;
		}

		#case-header-title-line-box{
			display: grid;
			grid-template-columns: 45% 10% 45%;
			height: 8px;
			align-self: center;
			margin-bottom: 48px;
		}

			#case-header-title-line{
				width: 100%;
				grid-column: 2/3;
				height: 8px;
				background-color: #FFED00;
			}

		.parallax-container{
			position: relative;
			height: 800px;
		}

		.header-extra{
		  background: white;
		  height: 200px;
		  width: 100vw;
		  margin-bottom: -100px;
		  z-index: -5;
		}

	.introductie{
		line-height: 30px;
		z-index: 3;
	}

	#welkom-bericht-desktop h1{
		font-size: 2rem;
	}

 	h1,h2,h3,h4,h5,h6, #desktop-project-title, #mobile-nav-title, #loadWebsiteTitel span{
 		font-family: paralucent, sans-serif;
 		font-weight: 500;
 		font-style: normal;
 		color: #131824;
 		text-align: left;
 	}

 	#desktop-project-title, #mobile-nav-title{
 		align-self: center;
 	}

 	p, figcaption{
 		font-family: 'Work Sans', sans-serif;
 		font-style: normal;
 		color: #5C5C5C;
 	}

 	p{
 		font-weight: 400;
 		text-align: left;
 		margin:0;
 	}

 		p > span{
 			font-weight: 700;
 		}

 	figcaption{
 		margin-top: 1.5rem;
 		font-size: 0.875rem;
 		font-weight: 600;
 		text-align: center;
 	}

		#case-title{
			z-index: 1;
			opacity: 0;
			transform: translateY(50px);
			transition: transform 2s cubic-bezier(.365,.305,0,1), opacity 2s cubic-bezier(.365,.305,0,1) 0.3s;
		}

			#introductie-lijn{
				grid-column: 2/3;
				height: 8px;
				width: 0%;
				background-color: #FFED00;
				/*box-shadow: 3px 3px 10px rgba(255, 237, 0,0.5);*/
				z-index: 2;
				transition: width 2s cubic-bezier(.365,.305,0,1);
			}

			.introductie-lijn > .ruimte{
				position: absolute;
				background-color: white;
				width: 100%;
				height: 100px;
				z-index: -1;
			}

		#projectbeschrijving{
			position: relative;
			z-index: -1;
			opacity: 1;
			transform: translateY(-50px);
			transition: transform 2s cubic-bezier(.365,.305,0,1), opacity 2s cubic-bezier(.365,.305,0,1) 0.3s;
		}

		#animateIn1, #animateIn2, #animateIn3, #animateIn4, #animateIn5, #animateIn6, #animateIn7{
			opacity: 1;
			transition: opacity 2s cubic-bezier(.365,.305,0,1);
			transition-delay: 1.5s;
		}

	#caseSwitchAnimationWhite{
		position: fixed;
		z-index: 3;
		opacity: 1;
		transform: translateX(0px);
		height: 100vh;
		width: 100vw;
		background-color: white;
		transition: transform .6s cubic-bezier(.365,.305,0,1);
		animation-duration: 1s;
	}

	#caseSwitchAnimation{
		position: fixed;
		z-index: 4;
		opacity: 1;
		transform: translateX(0px);
		height: 100vh;
		width: 100vw;
		background-color: #FFED00;
		transition: transform 0.6s cubic-bezier(.365,.305,0,1);
		animation-duration: 1.6s;
		animation-delay: 0.1s;
	}

	@keyframes caseSwitch {
	  from {transform: translateX(100%);}
	  to {transform: translateX(0px);;}
	}

	section{
		display: grid;
		width: 100vw;
		padding-bottom: clamp(60px, 8vw, 120px);
	}

	section *{
		grid-column: 2/3;
	}

	.is-full-width {
	  grid-column: 1 / -1; /* Beslaat de volledige breedte van het grid */
	}

		.is-full-width > img{
			border-radius: 0px;
		}

	.is-wide{
		grid-column: 2/3;
	}

	.presentation-cards {
	  display: flex;
	  flex-direction: column;
	  gap: 60px;
	  width: 100%;
	  box-sizing: border-box; 
	}

	.mobile-only{
		display: block;
	}

	.desktop-only{
		display: none;
	}

	.is-full-width > img{
		border-radius: 0px;
	}

	.presentation-cards img {
	  width: 100%;
	  height: auto;
	  border-radius: 0px;
	  object-fit: cover;
	}

	.sectie-indicatie-achtergrond{
		grid-column: 1/2;
		color: #131824;
		background-color: #F9F9F9;
		height: 108px;
		position: relative;
		margin-top: 48px;
		margin-bottom: 48px;
		border-radius: 0px 0px 12px 0px;
	}

	#sectie-indicatie-achtergrond{
		transform: translateX(0px);
		transition: transform 0.3s cubic-bezier(.365,.305,0,1);
		transition-delay: 1s;
	}

	.eindresultaatTile{
		display: grid;
		width: 100vw;
		height: 100%;
		grid-column: 1/4;
		grid-template-columns: 60% 40%;
	}

	.eindresultaatTileImage{
		grid-column: 1/2;
		width: 100%;
		height: 70vh;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 0px 20px 20px 0px;
	}

	.eindresultaatTileTekst{
		grid-column: 2/3;
		/*display: flex;*/
		align-items: center;
		align-self: center;
		/*justify-content: center;*/
		/*background-color: red;*/
		/*flex-direction: column;*/
		margin: 64px;
	}	

	img{
		border-radius: 0.75rem;
	}

	.eindresultaat-section{
		display: grid;
		grid-template-columns: 300px auto auto auto 300px;
		text-align: left;
	}

		.eindresultaat-section img{
			margin-bottom:5%;
		}

		.eindresultaat-section h1{
			font-family: paralucent, sans-serif;
			font-weight: 500;
			font-style: normal;
			color:#131824;
		}

		.play-next-line, .finance-line{
			height: 5px;
			width: 100%;
			border-radius: 10px;
		}

		.play-next-line{
			background-color:#F22B50;
		}

		.finance-line{
			background-color: #0B41DA;
		}

		.eindresultaat{
			position: relative;
			display: grid;
			grid-template-columns: 70vw 30vw;
		}

			.eindresultaat-afbeelding{
				grid-column: 1/2;
				background-image: url("../Afbeeldingen/Finance/header.jpg");
				background-size: 100%;
				height: 100%;
				width: 100%;
			}

			#eindresultaat-beschrijving-SaveNow{
				position: absolute;
				bottom: 0;
				/*padding: 8%;*/
				grid-column: 2/3;
				width: 100%;
				height: 200px;
				background-color: #0B41DA;
			}

		.stay-showcase figure.is-wide,
		  .stay-showcase picture {
		    width: 100%;
		    margin: 0;
		  }

		  /* Zorg dat de afbeelding daarbinnen 100% van de picture-tag pakt */
		  .stay-showcase picture img {
		    width: 100%;
		    height: auto;
		    display: block;
		  }
		}

		.flights-showcase{
			max-width: 100vw;
		}

			.flights-showcase > img{
				width: 100%;
			}

		.eindresultaatContainer{
			grid-column: 1/5;
			width: 100vw;
			display: grid;
			grid-template-columns: repeat(12,1fr);
			position: relative;
		}

			/*.ananas{
				position: absolute;
				z-index: 0;
				background-color: #F22B50;
				grid-column: 5/7;
				width: 100%;
				height: 50%;
			}*/

			.eindresultaatImageTekst{
				position: absolute;
				z-index: 1;
				transform: translateY(50%);
			}

				/*Save Now*/

				#eindresultaatITArticles{
					grid-column: 4/7;
				}

				#eindresultaatArticles{
					grid-column:6/11;
				}

				#eindresultaatITDebt{
					grid-column: 8/11;
				}

				#eindresultaatDebt{
					grid-column:1/7;
				}

				/*Play Next*/

				#eindresultaatITHome{
					grid-column: 9/13;
					transform: translateX(-10%);
				}

				#eindresultaatHome{
					grid-column: 5/9;
				}

				#eindresultaatITNews{
					grid-column: 4/7;
				}

				#eindresultaatNews{
					grid-column:7/13;
				}

				#eindresultaatITDiscover{
					grid-column: 7/10;
				}

				#eindresultaatDiscover{
					grid-column:1/7;
				}

				#eindresultaatITCommunity{
					grid-column: 4/7;
				}

				#eindresultaatCommunity{
					grid-column:6/10;
				}

				#eindresultaatITFollowing{
					grid-column: 8/11;
				}

				#eindresultaatFollowing{
					grid-column:1/8;
				}

				.eindresultaatContainer h4{
					margin-bottom: 0px;
					font-family: paralucent, sans-serif;
					font-weight: 700;
					font-style: italic;
				}

				.eindresultaatContainer h3{
					margin-top: 4px;
				}

				.eindresultaatContainer p{
					line-height: 32px;
					color: #5c5c5c;
				}

				.bykarlieEindresultaat{
					grid-template-columns: repeat(16, 1fr);
					margin:60px 0px;
				}

					.eindResultaatStart{
						grid-template-columns: repeat(16, 1fr);
						margin:120px 0px 60px 0px;
					}

				/* Home */

				#bykarlieHome .eindresultaatTekst{
					grid-column: 9/13;
				}

				#bykarlieHome img{
					grid-column: 5/8;
					box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
				}

				.backdrop-grey{
					z-index: -1;
					position: absolute;
					align-self: center;
					background-color: #F6F6F6;
					height: 50%;
					width: 100%;
					border-radius: 16px;
				}

				#bykarlieHome .backdrop-grey{
					grid-column: 6/10;
				}

				/* Oefenen */

				#bykarlieOefenen .eindresultaatTekst{
					grid-column: 3/7;
				}

				#bykarlieOefenen img{
					box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
				}

				#nhOefenen1{
					grid-column: 8/11;
				}

				#nhOefenen2{
					grid-column: 12/15;
				}

				#bykarlieOefenen .backdrop-grey{
					grid-column: 6/14;
				}

				/* Kalibratie */

				#bykarlieKalibratie .eindresultaatTekst{
					grid-column: 10/14;
					align-self: center;
					position: absolute;
				}

				#bykarlieKalibratie img{
					box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
				}

				#nhKalibratie1{
					grid-column: 2/6;
				}

				#nhKalibratie2{
					grid-column: 3/7;
				}

				#nhKalibratie3{
					grid-column: 2/6;
				}

				#bykarlieKalibratie .backdrop-grey{
					grid-column: 4/9;
				}

				/* Spelen */

				#bykarlieSpelen .eindresultaatTekst{
					grid-column: 3/7;
					align-self: center;
					position: absolute;
				}

				#bykarlieSpelen img{
					box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
				}

				#nhSpelen1{
					grid-column: 8/13;
				}

				#nhSpelen2{
					grid-column: 10/15;
				}

				#bykarlieSpelen .backdrop-grey{
					grid-column: 6/14;
				}

				/* Beoordeling */

				#bykarlieBeoordeling .eindresultaatTekst{
					grid-column: 9/13;
				}

				#bykarlieBeoordeling img{
					box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
					grid-column: 5/8;
				}

				#bykarlieBeoordeling .backdrop-grey{
					grid-column: 6/10;
				}



		.eindresultaat-links{
			grid-column: 1/3;
			margin: -30px;
		}

		#expenses-tekst, #analyse-tekst, #debt-tekst, #toevoegen-tekst, #articles-tekst{
			opacity: 0;
			transition: opacity .6s cubic-bezier(.365,.305,0,1) 0.6s;
		}

		#expenses-tekst, #analyse-tekst, #debt-tekst{
			grid-column: 3/4;
			width: 100%;
		}

		.eindresultaat-rechts{
			grid-column: 3/6;
			position: relative;
		}

		#toevoegen-tekst, #articles-tekst{
			grid-column: 2/3;
			position: relative;
			width: 90%;
		}


		#gaming-home-tekst, #gaming-discover-tekst, #gaming-following-tekst{
			grid-column: 3/4;
			width: 100%;
		}

		#gaming-news-tekst, #gaming-community-tekst{
			grid-column: 2/3;
			position: relative;
			width: 90%;
		}

	.ruimte{
		grid-column: 2/4;
	}

	#volgendeCase{
		opacity: 0;
		transform: translateY(30%);
		transition: opacity 0.3s cubic-bezier(.365,.305,0,1), transform .3s cubic-bezier(.365,.305,0,1);
		display: grid;
	}

		#volgendeCase h2{
			grid-column: 2/3;
		}

	.sectie-indicatie{
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #FFED00;
		border-radius: 0px 0px 12px 0px;
	}
		.sectie-indicatie h6{
			align-self: center;
			font-family: paralucent, sans-serif;
			font-weight: 700;
			font-style: italic;
		}

	.prototypeContainer{
		display: grid;
		grid-column: 1/4;
		grid-template-columns: 300px auto 300px;
	}

		.wideImage > img{
			grid-row: 1/4;
			grid-column: 2/3;
			border:1px solid #F6F6F6;
			box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
		}

		.mobileDesktopContainer{
			grid-column: 3/11;
			display: grid;
			grid-template-columns: 300px auto 300px;
		}

			.mobileDesktop{
				display: grid;
				grid-column:1/4;
				grid-template-columns: 70% 2% 28%;
				grid-template-rows: auto auto auto;
			}

			.mobileDesktop img, .mobileResultContainer{
				border-radius: 12px;
				border:1px solid #F6F6F6;
				box-shadow: 0px 10px 20px rgba(0,0,0,0.04);
			}

				.mobileDesktop > .desktopResult, .mobileDesktop > cite {
					grid-column: 1/2;
				}

				.mobileDesktop > .mobileResultContainer{
					grid-column: 3/4;
				}

				.mobileResultContainer{
					border-radius: 12px;
					max-height: 60vh;
					overflow-y: auto;
					overflow-x: hidden;
					width: fit-content;
				}

				/* Hide scrollbar for Chrome, Safari, and Opera */
				.mobileResultContainer::-webkit-scrollbar {
				  display: none; /* or width: 0; height: 0; */
				}

				/* Hide scrollbar for IE, Edge and Firefox (modern versions) */
				.mobileResultContainer {
				  -ms-overflow-style: none;  /* IE and Edge */
				  scrollbar-width: none;  /* Firefox */
				}

					.mobileResultContainer img{
						width: 100%;
						height: auto;
						display: block;
					}



		.imageBackground{
			grid-column: 1/4;
			grid-row: 2/3;
/*			position: relative;*/
			width: 100%;
			height: 10%;
			align-self: center;
			background-color: #F6F6F6;
			z-index: -1;
		}

		cite{
			font-family: 'Work Sans', sans-serif;
			font-weight: 400;
			color: #5C5C5C;
		}


	.research-container{
	  display: flex;
	  flex-direction: column;
	  row-gap: 60px; /* Bepaalt de vaste afstand tussen de Affinity Maps en Persona's */
	  margin-bottom: 64px;
	}

	.maps-wrapper{
	  display: flex;
	  flex-direction: column;
	  gap: 16px;
	  width: 100%;
	}

	.research-container > .persona-wrapper {
	  display: flex;
	  grid-column: 2 / -1;
	  
	  /* 1. CRUCIELE FIX: Voorkomt dat het Flex/Grid item de pagina uitrekt */
	  min-width: 0;
	  max-width: 100%;

	  gap: 1.5rem; /* Tip: 3.75rem (60px) is erg groot op mobiel, 1.5rem / 24px werkt vaak prettiger */
	  overflow-x: auto;
	  scroll-snap-type: x mandatory;
	  
	  scroll-behavior: smooth;
	  -webkit-overflow-scrolling: touch;
	  scrollbar-width: none; /* Firefox */

	  /* Ruimte onderaan en rechts */
	  padding-bottom: 1rem; 
	}

	/* Verberg scrollbar voor Chrome, Safari en Opera */
	.research-container > .persona-wrapper::-webkit-scrollbar {
	  display: none;
	}

	.map-card {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  margin: 0; /* Figuurelementen hebben standaard een inline margin */
	}

	.map-card img {
	  width: 100%;
	  height: 80vh;
	  object-fit: cover;
	  border-radius: 16px;
	}

	.crop-img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	figure {
	  min-width: 0; /* Dwingt het grid-item om binnen de kolom te blijven */
	  width: 100%;
	  margin:0;
	  padding: 0;
	}

	/* Optie B: Zorg dat de afbeelding zich altijd schaalt naar de figure */
	figure img {
	  width: 100%;
	  max-width: 100%;
	  height: auto;
	  display: block;
	}

	.pos-left {
	  object-position: left center;
	}

	.pos-center {
	  object-position: center center;
	}

	#focus{
		position: relative;
		grid-column: 1/4;
		width: 100vw;
		display: grid;
		grid-template-columns: 300px 1fr 4% 1fr 4% 1fr 300px;
	}

	#focustekst{
		margin: 8% 0% -12% 0%;
	}

	#focus1, #focus2, #focus3{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 500px;
	}

	#focus1 h2, #focus2 h2, #focus3 h2{
		z-index: -1;
		margin: 0px;
		color: rgba(211,211,211,0.20);
		font-weight: 700;
		font-style: italic;
		align-self: center;
		position: relative;
	}

	#focus1 h3, #focus2 h3, #focus3 h3{
		position: absolute;
		align-self: center;
		white-space: nowrap;
		border-radius: 20px;
	}

	#focus1{
		grid-column: 2/3;
	}

	#focus2{
		grid-column: 4/5;
	}

	#focus3{
		grid-column: 6/7;
	}

	#focus-lijn{
		transform: translateY(12px);
		height: 20px;
		background-color: #FFED00;
		width: 100vw;
		grid-column: 1/8;
		z-index:-2;
		position: absolute;
		align-self: center;
	}

	.focusUitleg{
		position: relative;
		grid-column: 2/3;
		padding: 6%;
	}

		.focusUitleg h2, .focusUitleg h3{
			grid-column: 2/3;
		}

		.focusUitlegGrijs{
			position: absolute;
			grid-column: 1/2;
			width: 30vw;
			height: 50%;
			border-radius: 0px 20px 20px 0px;
			background-color: #F9F9F9;
			z-index: -1;
		}

	.quote{
		width: 100%;
		background-color: #FFED00;
	}
		.quote h2, .quote h3{
			padding: 0px 20px;
		}

		.quote h3{
			color:#5c5c5c;
			font-style: italic;
			font-weight: 500;
		}

			.quote-getal-flex{
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			.quote-getal{
				display: flex;
				justify-content: center;
				flex-direction: column;
			}

				.research-div-procenten h2{
					align-self: center;
					margin-bottom: 0%;
				}

				.research-div-procenten h3{
					color: white;
				}

			#researchBron{
				color: #575757;
			}

		blockquote{
			font-family: paralucent, sans-serif;
			font-weight: 300;
			color:#131824;
			position: relative;
		}

			blockquote span{
				font-weight: 500;
				color: #131824;
			}

			#doelgroepAnimation,#doelgroepBeschrijving{
				opacity: 0;
				transition: opacity 0.3s cubic-bezier(.365,.305,0,1);
			}

			#saveNowQuote1,#saveNowQuote2{
				opacity: 0;
				transform: translateY(30%);
				transition: opacity 0.3s cubic-bezier(.365,.305,0,1) 0.3s, transform .3s cubic-bezier(.365,.305,0,1) 0.3s;
			}

			#saveNowQuote2{
				transition-delay: 0.6s;
			}

			section ul{
				padding:0;
			}

			section li{
				list-style:none;
				font-size: 20px;
				line-height: 30px;
				color: #5c5c5c;
				font-family: paralucent, sans-serif;
				font-weight: 500;
			}

			section li::before{
				list-style:none;
				content: "- ";
				font-family: paralucent, sans-serif;
				font-weight: 700;
				color: #131824;
			}

		li, a, button{
			cursor: pointer;
		}

		a{
			text-decoration: none;
		}

		.image{
			grid-column: 2/3;
		}

		.imageEnBeschrijving{
			position: relative;
			margin-bottom: 60px;
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
		}

		#full-image-save-now-1, #full-image-save-now-2, #full-image-save-now-3{
			grid-column: 1/6;
			opacity: 1;
			transition: opacity 0.3s cubic-bezier(.365,.305,0,1) 0.3s;
		}

		#saveNowEindresultaat{
			opacity: 0;
			background-size: 140%;
			transition: opacity .6s cubic-bezier(.365,.305,0,1), background-size 2s cubic-bezier(.365,.305,0,1) 1s;
		}

		#saveNowExpenses, #saveNowAnalyse, #saveNowDebt{
			opacity: 0;
			transform: translateX(-100%);
			transition: opacity .6s cubic-bezier(.365,.305,0,1), transform .6s cubic-bezier(.365,.305,0,1) .3s;
		}

		#saveNowToevoegen, #saveNowArticles{
			opacity: 0;
			transform: translateX(100%);
			transition: opacity .6s cubic-bezier(.365,.305,0,1), transform .6s cubic-bezier(.365,.305,0,1) .3s;
		}

		.volgende-case{
			position: relative;
			background-color: #F9F9F9;
		}

		#volgendeCaseNieuw{
			display: grid;
			grid-template-columns: 200px auto 50%;
			grid-column: 1/4;
			width: 100%;
			height: 280px;
			background-color: white;
			background-size: cover;
			background-position: right;
			background-repeat: no-repeat;
			margin-bottom: -50px;
			opacity: 1;
			border-top: 1px solid #F6F6F6;
			transition: opacity .6s cubic-bezier(.365,.305,0,1) .3s;
		}

			.volgendeCaseRoadmappie, .volgendeCaseBykarlie, .volgendeCaseSaveNow, .volgendeCasePlayNext{
				grid-column: 3/4;
				background-size: 100%;
				background-repeat: no-repeat;
				transition: background-size 1s cubic-bezier(.365,.305,0,1);
			}

			.volgendeCaseSaveNow, .volgendeCasePlayNext{
				background-position: 50% 0%;
				transition: background-size 1s cubic-bezier(.365,.305,0,1), background-position 1s cubic-bezier(.365,.305,0,1);
			}

			.volgendeCaseRoadmappie{
				background-image: url('../Afbeeldingen/Roadmappie/header.png');
				background-position: 50% 0%;
			}

			.volgendeCaseBykarlie{
				background-image: url('../Afbeeldingen/Bykarlie/Header.jpg');
				background-position: 50% 0%;
			}

			.volgendeCaseSaveNow{
				background-image: url('../Afbeeldingen/Finance/header.jpg');
				background-position: center;
			}

			.volgendeCasePlayNext{
				background-image: url('../Afbeeldingen/Gaming/Eindresultaat/overview.jpg');
				background-position: center;
			}

			.volgendeCaseCardSaveNow, .volgendeCaseCardPlayNext, .volgendeCaseCardBen, .volgendeCaseCardbykarlie{
				grid-column: 1/4;
				background-size: 50%;
				background-repeat: no-repeat;
			}

			.volgendeCaseCardSaveNow{
				background-image: url('../Afbeeldingen/Finance/header-responsive.jpg');
			}

			.volgendeCaseCardPlayNext{
				background-image: url('../Afbeeldingen/Gaming/Eindresultaat/overview-responsive.jpg');
			}

			.volgendeCaseCardBen{
				background-image: url('../Afbeeldingen/Ben/header-responsive.jpg');
			}

			.volgendeCaseCardbykarlie{
				background-image: url('../Afbeeldingen/Bykarlie/header-responsive.jpg');
			}

		#footer{
			opacity: 0;
			width: 0%;
			transition: opacity .6s cubic-bezier(.365,.305,0,1) 0.6s, width .6s cubic-bezier(.365,.305,0,1) 0.6s;
		}

		#volgendeCaseStatic{
			grid-template-columns: 200px auto 200px;
			padding: 0;
		}

		#volgendeCaseNieuwTekst{
			width: 100%;
			height: 100%;
			grid-column: 2/3;
			opacity: 1;
			transition: opacity .6s cubic-bezier(.365,.305,0,1) .5s, transform .6s cubic-bezier(.365,.305,0,1) .5s;
		}

			#volgendeCaseNieuwTekst p{
				color: #5c5c5c;
				font-weight: 400;
			}

		button{
			font-family: paralucent, sans-serif;
			border: none;
			font-weight: 500;
			font-style: normal;
			color: #131824;
			background-color: #FFED00;
			border-radius: 0.75rem;
			background-image: url("../Afbeeldingen/arrow-right.svg");
			background-size: 0%;
			background-repeat: no-repeat;
			background-position: 100% 50%;
			transition: background-position .3s cubic-bezier(.365,.305,0,1), background-size 0.3s cubic-bezier(.365,.305,0,1) 0.1s, 
			padding 0.3s cubic-bezier(.365,.305,0,1);
		}

			.interactiveButtonIndex, .interactiveButtonCase{
				color:#131824;
				background-color: transparent;
				border:4px solid #131824;
				transform: translate(0px, 0px);
				transition: transform .6s cubic-bezier(.365,.305,0,1);
				z-index: 1;
			}

			.interactiveUnderlayIndex, .interactiveUnderlayCase{
				position: absolute;
				transition: width .3s cubic-bezier(.365,.305,0,1) .6s, opacity .3s cubic-bezier(.365,.305,0,1) .5s;
				color:transparent;
				background-color: #FFED00;
				border:none;
				outline:none;
				z-index: 0;
				transform: translate(12px, 12px);
				transition: transform .6s cubic-bezier(.365,.305,0,1);
			}

			button:focus{
				outline: none;
			}

		.finance-header, .save-now-header{
			background-image: url('../Afbeeldingen/Finance/header.jpg');
			background-position: 30% 50%;
			background-size: cover;
		}

		.save-now-header-responsive{
			background-image: linear-gradient(to bottom, rgba(37,46,69,0.50), rgba(37,46,69,0.40), transparent), url('../Afbeeldingen/Finance/header-responsive.jpg');
		}

		#finance-persona, #play-next-persona, #ben-persona{
			height: 400px;
		}

		#finance-persona{
			background-image: url('../Afbeeldingen/Finance/spending.jpg');
			opacity: 0;
			transition: opacity .6s cubic-bezier(.365,.305,0,1) 1s;
		}

		.image-beschrijving{
			transform: translateY(100%);
			background-color: #FFED00;
			font-weight: 700;
			margin:0px;
			padding: 8px 2%;
			opacity: 1;
			position: absolute;
			bottom: 0;
			transition: opacity .6s cubic-bezier(.365,.305,0,1) 0.6s;
		}

		.finance-case-header, .play-next-case-header, .ben-case-header, .bykarlie-case-header{
			position: relative;
			background-position: top;
			background-size: cover;
			transition: background-size 2s cubic-bezier(.365,.305,0,1);
		}

		.play-next-header, .play-next-case-header{
			background-image: url('../Afbeeldingen/Gaming/Eindresultaat/header.jpg');
		}

		.play-next-header-responsive{
			background-image: linear-gradient(to bottom, rgba(37,46,69,0.40), rgba(37,46,69,0.30), transparent), url('../Afbeeldingen/Gaming/Eindresultaat/overview-responsive.jpg');
		}

		#play-next-persona{
			background-image: url('../Afbeeldingen/Gaming/play-next-persona.jpg');
		}

		#left-text{
			grid-column: 1/2;
			text-align: right;
			margin-left: 10px;
		}

		#image-wide{
			grid-column: 1/4;
		}

		.roadmappie-header{
			background-image: url('../Afbeeldingen/Roadmappie/header.png');
			background-size: cover;
		}

		.bykarlie-header{
			background-image: url('../Afbeeldingen/Bykarlie/header.jpg');
			background-size: cover;
		}

		.bykarlie-header-responsive{
			background-image: url('../Afbeeldingen/Bykarlie/header-responsive.jpg'); 
			background-position: 85% 50% !important;
		}		

	footer{
		display: grid;
		grid-column: 1/4;
	}

		.footerSection{
			position: relative;
			height: 100vh;
			width: 100vw;
		}

		.contactFooter{
			grid-template-columns: 140px auto auto 200px 50px 50px;
			width: 100vw;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.footer-balk{
			border-top: 1px solid #F6F6F6;
			grid-row: 2/3;
			grid-column: 1/5;
			width: 100%;
			height: 100%;
			background-color: white;
			z-index: -1;
		}

		footer h5{
			font-family: paralucent, sans-serif;
			font-weight: 500;
			color: #131824;
			grid-row: 2/3;
			grid-column: 2/3;
			align-self: center;
		 	letter-spacing: 3px;
		 	margin: 0px;
		}

		#footer-transparent-left{
			grid-column: 1/3;
			grid-row: 1/2;
			width: auto;
			height: 50px;
			background-color: transparent;
		}

		#linkedIn, #email{
			grid-row:2/3;
			width: 50px;
			height: 50px;
			background-size: 40%;
			background-position: center;
			background-repeat: no-repeat;
			background-color: #FFED00;
			opacity: 1;
			transition: opacity .3s cubic-bezier(.365,.305,0,1);
		}

		#linkedIn{
			grid-column: 6/7;
			background-image: url(../Afbeeldingen/linkedin.svg);
			transition-delay: 0.9s;
		}

		#email{
			grid-column: 5/6;
			background-image: url(../Afbeeldingen/email.svg);
			background-position: 50% 58%;
			transition-delay: 1s;
		}

		#email-popup{
			grid-column: 4/6;
			grid-row: 1/2;
			width: 400px;
			height: 50px;
			background-color: #F9F9F9;
			bottom: 50px;
			display: none;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0px;
		}

			#email-popup h5{
				letter-spacing: 0px;
			}

		#email-popup-text::selection{
			background-color: #FFED00;
		}

			#emailCopy{
				display: flex;
				justify-content: center;
				width: 150px;
				height: 50px;
				background-color: #FFED00;
				position: relative;
			}

			#emailCopy:hover{
				box-shadow: none;
				text-shadow: none;
			}

			#email-popup-text{
				margin-left: 5px;
				outline: none;
				border: none;
				font-family: paralucent, sans-serif;
				font-weight: 500;
				font-style: normal;
				color: #131824;
				background-color: #F9F9F9;
				transition: background-color .3s cubic-bezier(.365,.305,0,1);
			}

			.focusPoint{
				display: none;
			}

			.color-sn{
				color: #0B41DA;
			}

			.color-pn{
				color: #F22C50;
			}

			.color-bv{
				color: #00AEEF;
			}

			.color-nh{
				color: #6400D4;
			}

		.contactContent{
			position: absolute;
			z-index: -1;
			background: url('../Afbeeldingen/Contact/contactBackground.jpg');
			background-size: cover;
			background-position: top;
		}

			.contactCard{
				display: grid;
				align-self: center;
				background-color: white;
				position: relative;
				border-radius: 12px;
				border:1px solid #F6F6F6;
			}

				.contactCardTitle{
					display: grid;
					position: absolute;
					top:0;
					left: 0;
					width: 100%;
					border-bottom:1px solid #F6F6F6;
				}

					.contactCardIcon{
						grid-column: 1/2;
						background-color: #F6F6F6;
					}

					.contactCardIconEmail{
						background-image: url(../Afbeeldingen/emailGrey.svg);
						background-repeat: no-repeat;
						background-position: center;
					}

					.contactCardIconTelefoon{
						background-image: url(../Afbeeldingen/phone.svg);
						background-repeat: no-repeat;
						background-position: center;
					}

					.contactCardIconLinkedin{
						background-image: url(../Afbeeldingen/linkedinGrey.svg);
						background-repeat: no-repeat;
						background-position: center;
					}

					.contactCardTitle h2{
						align-self: center;
					}

				.contactCardDescription{
					display: flex;
				}

				.contactCardDescription .p-small{
					font-family: 'Work Sans', sans-serif;
					color: #71747C;
					align-self: center;
					border:none;
					letter-spacing: 1px;
					width: 100%;
				}

					.contactCardDescription button:focus{
						outline: none;
					}

				.contactCardLine{
					background-color: #FFED00;
					position: absolute;
				}

				.buttonSmall{
					border-top: 2px solid #FFED00;
					font-style: normal;
					font-size: 14px !important;
					text-align: left;
					letter-spacing: 0px;
					padding: 16px 20px 16px 20px !important;
					position: absolute;
					right: 20px;
					align-self: center;
					margin-top: 0px !important;
				}

			.contactCardContainer{
				position: absolute;
				display: grid;
			}

			.contactBackground1, .contactBackground2{
				position: absolute;
				width: 100%;
				z-index: -1;
				border-radius: 12px 0px 0px 12px;
			}

			.contactBackground1{
				background-color: #F6F6F6;
			}

			.contactBackground2{
				background-color: #FFED00;
			}


/* MOBILE */

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

	h1{
		font-size: 1.75rem;
		line-height: 1.20;
	}

	#loadWebsiteTitel span{
		font-size: 3rem;
		margin-bottom: 8px;
	}

	#loadWebsiteTitel p{
		font-size: 2rem;
	}

	h2{
		font-size: 1.30rem; 
		line-height: 1.20;
	}

 	h3{
		font-size: 1.15rem; 
		line-height: 1.30;
	}

	.hero-title{
		font-size: 1.75rem; 
		line-height: 1.20;
	}

	.section-title{
		font-size: 1.35rem; 
		line-height: 1.25;
		margin-bottom: 0.3rem;
	}

	h4{
		font-size: 1.25rem; 
		line-height: 1.35;
	}

	h5{
		font-size: 1.125rem; 
		line-height: 1.4;
	}

	h6{
		font-size: 1rem; 
		line-height: 1.4;
	}

	button{
		font-size: 1.125rem;
  		padding: 0.875rem 1.5rem;
	}

	p{
		font-size: 1rem;
  		line-height: 1.60;
  		margin-top:0;
	}

	#welkom-bericht-tekst-mobile{
		opacity: 1;
		transform: translateY(-20%);
		transition: transform 0.6s cubic-bezier(.365,.305,0,1) 1.3s, opacity 0.6s cubic-bezier(.365,.305,0,1) 1.3s;
	}

	#mobile-nav-title{
		font-size: 1rem;
		align-self: center;
		opacity: 1;
		transform: translateY(0%);
		transition: transform .6s cubic-bezier(.365,.305,0,1) 0.2s, opacity .3s cubic-bezier(.365,.305,0,1) 0.2s;
	}

	.full-width-text{
		display: grid;
		grid-template-columns: 1.5rem auto 1.5rem;
		width: 100%;
	}

		.full-width-text > *{
			grid-column: 2/3
		}

	.welkom-projecten-info button{
		display: flex;
		justify-content: center;
		padding: 1.25rem;
		bottom: -5rem;
		width: 60%;
		text-shadow: none;
		box-shadow: none;
	}

	.buttonSmall{
		grid-column: 1/2;
		grid-row: 2/3;
		border-top: 2px solid #FFED00;
		font-style: normal;
		font-size: 32px !important;
		text-align: left;
		letter-spacing: 0px;
		padding: 32px 40px 32px 40px !important;
		position: absolute;
		left: 40px;
		align-self: center;
		margin-top: 80px !important;
	}

	#finance-persona, #play-next-persona, #ben-persona{
		height: 600px;
	}

	.caseLanding {
	  display: flex;
	  flex-direction: column;
	  min-height: 100dvh;
	  padding-top: 4rem; /* Zorgt dat de tekst onder de nav-balk begint */
	  box-sizing: border-box;
	}

		#case-header-title, #projectDescriptionContainer{
			padding-left: 1.5rem;
		}

		#case-header-title{
			/*width: 100%;*/
		}

		#projectDescriptionContainer{
			grid-column: 1/6;
			grid-row: 3/4;
			height: auto;
		}

		#projectDescription{
			grid-column: 2/3;
		}

		.case-header-content{
			display: grid;
			grid-template-columns: 1.5rem repeat(5, 1fr) 1.5rem;
			grid-template-rows: repeat(12, 1fr) auto;
			height: 80vh;
			grid-column: 1/13;
			grid-row: 4/5;
		}



			.case-header-content > *{
				background-position: 10% 0% !important;
			}

		#caseHeaderImage{
			grid-column: 2/8;
			grid-row: 1/13;
			border-radius: 0px 0px 0px 24px;
		}

		#case-header-description{
			display: none;
		}

		#case-header-description-mobile{
			display: grid;
			grid-template-columns: 4rem auto 4rem;
			grid-template-rows: 80px auto 80px;
			grid-column: 2/7;
			grid-template-rows: 13/14;
			margin-bottom: 80px 0px;
		}

		#case-description-dots{
			display: flex;
			flex-direction: row;
			grid-row: 2/3;
			grid-column: 1/2;
			position: absolute;
			left: -16px;
			margin: 0px;
			font-size: 160px;
			color: #FFED00;
		}

			#case-description-dots div{
				height: 24px;
				width: 24px;
				margin-right: 10px;
				background-color: #FFED00;
				border-radius: 12px;
			}

		#case-header-description-mobile h4{
			grid-column: 2/3;
			grid-row: 2/3;
			margin:0px;
			color: #757575;
			line-height: 60px;
		}

	#projectType{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.4rem;
	}

	#projectType span{
		font-size: 40px;
	}


	a{
		grid-column: 1/4;
	}

	.imageEnBeschrijving{
		grid-column: 1/4;
		margin-top: 28px;
		margin-bottom: 102px;
		background-size: 100%;
	}

	#focus{
		grid-column: 1/4;
		width: 100vw;
		display: grid;
		grid-template-columns: 100vw;
		grid-template-rows: 1fr 1fr 1fr;
		max-width: 100vw;
		overflow-x: hidden;
		margin-bottom: 64px;
	}

	#focustekst{
		margin-bottom: 0px;
	}

	#focus1, #focus2, #focus3{
		height: 100%;
	}

	#focus1 h1, #focus2 h1, #focus3 h1{
		font-size: 400px;
		z-index: -1;
		margin: 0px;
		color: rgba(211,211,211,0.20);
		font-weight: 700;
		font-style: italic;
		align-self: center;
	}

	#focus1 h3, #focus2 h3, #focus3 h3{
		/*position: relative;*/
		align-self: center;
		white-space: nowrap;
	}

	.focusBackground{
		display: grid;
		grid-template-columns: 30% auto 30%;
		width: 100vw;
		height: 100%;
		position: relative;
	}

	#focus1Yellow, #focus1Getal, #focus2Yellow, #focus2Getal, #focus3Yellow, #focus3Getal{
		position: absolute;
	}

	.focusTekst{
		z-index: 3;
	}

	#focus1{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	#focus2{
		grid-column: 1/2;
		grid-row: 2/3;
	}

	#focus3{
		grid-column: 1/2;
		grid-row: 3/4;
	}

	#focus1Getal, #focus2Getal, #focus3Getal{
		align-self: center;
		font-size: 400px !important;
		text-align: center;
	}

	.focusPoint{
		display: inline;
		position: relative;
		color: #FFED00;
		font-size: 120px;
	}

	#welkom-introductie-title, #focus-lijn{
		display: none;
	}

	#welkom-introductie-title-responsive{
		margin:0;
		opacity: 0;
		transform: translateY(50px);
		transition: transform .6s cubic-bezier(.365,.305,0,1), opacity .6s cubic-bezier(.365,.305,0,1) .03s;
		/*transition-delay: 1s;*/
	}

	#welkom-introductie-tekst{
		font-size-adjust: 1.5;
		line-height: auto;
		opacity: 0;
		transform: translateY(50px);
		transition: transform .6s cubic-bezier(.365,.305,0,1), opacity .6s cubic-bezier(.365,.305,0,1) .03s;
		transition-delay: .3s;
	}

	#case-title{
		opacity: 0;
		transform: translateY(-50px);
		animation: projectBeschrijvingOmhoog 2s forwards;
	}

	#introductie-lijn{
		opacity: 0;
		width: 0%;
		animation: introductieLijn 2s forwards;
	}

	#projectbeschrijving{
		margin-top: 40px;
		opacity: 0;
		transform: translateY(-50px);
		animation: projectBeschrijvingOmlaag 2s forwards;
	}

	@keyframes projectBeschrijvingOmhoog {
	  from {opacity: 0; transform: translateY(50px);}
	  to {opacity: 1; transform: translateY(0px);}
	}

	@keyframes introductieLijn {
	  from {opacity: 0; width: 0%;}
	  to {opacity: 1; width:100%;}
	}

	@keyframes projectBeschrijvingOmlaag {
	  from {opacity: 0; transform: translateY(-50px);}
	  to {opacity: 1; transform: translateY(0px);}
	}

	#scroll-beneden{
		opacity: 0;
	}

	#myBarResponsive{
		height: 4px;
	}

	.parallax-container{
		position: relative;
		height: 40vh;
	}

	#volgendeCaseNieuw{
		width: 100vw;
	}

	#desktop, .desktop-image, #eindresultaat-section-desktop, .parallax-container, .header-extra, #volgendeCase, #volgendeCaseStatic,
	.welkom-projecten-info, #welkom-bericht-desktop, #highlightTitleDesktop, .desktopImage, #contactDesktop{
		display: none;
	}

	#responsive,#responsive-nav,.responsive-image, #eindresultaat-section-responsive{
		display: block;
	}

	.sectie-indicatie-achtergrond h4{
		margin-left: 40px;		
	}

	#loadWebsite{
		position: relative;
		grid-template-columns: 50px auto 50px;
	}

		#loadWebsiteTitel{
			width: 100%;
			align-self: center;
		}

		#loadWebsiteBar{
			position: absolute;
			width: 100%;
			height: 15px;
			bottom: 0px;
			right: 0px;
			background-color: transparent;
		}

	#welkom{
		display: grid;
		grid-template-columns: 1rem 1fr 2fr 1fr 1rem;
		grid-template-rows: 10vh 40vh;
		width: 100vw;
		height:50vh;
		position: relative;
		background: linear-gradient(to bottom, rgba(246, 246, 246,1), rgba(255,255,255,1), transparent);
	}

		.welkom-bericht-mobile-container{
			display: grid;
			width: 100vw;
			height: 100%;
			grid-template-columns: 1rem auto 1rem;
		}

		#welkom-bericht-mobile{
			display: grid;
			grid-template-columns: 1rem auto 1rem;
			grid-column: 2/4;
			background-color: #F6F6F6;
			margin: 0;
			border-radius: 0px 0px 0px 0.75rem;
		}

			#welkom-bericht-mobile *{
				grid-column: 2/3;
				text-align: right;
				color: #5c5c5c;
			}

			#welkom-bericht-title-mobile{
				margin: 2rem 0px 1rem 0px;
			}

			@keyframes welkomBericht{
				from {opacity: 0; transform: translateY(50px);}
				to {opacity: 1; transform: translateY(0px);}
			}


	#welkom-foto-1{
		grid-column: 2/5;
		grid-row: 2/4;
		border-radius: 12px;
		/*margin-top:120px;*/
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: top;
		animation: welkomFoto 2s cubic-bezier(.365,.305,0,1) forwards;
	}

	.persona-wrapper figure picture,
	  .persona-wrapper figure img {
	    display: block;
	    width: 100%;
	    height: auto;
	  }

	.research-container .persona-wrapper > figure {
	    /* 80% breedte MIN de gap-ruimte */
	    flex: 0 0 calc(85% - 1.5rem);
	    max-width: calc(85% - 1.5rem);
	    min-width: 0;
	    scroll-snap-align: start;
	    margin: 0;
	  }

	/* 2. Zorg dat de individuele persona-kaarten niet in elkaar krimpen */
	.research-container > .persona-wrapper > * {
	  flex: 0 0 85%; /* Elke kaart pakt 85% van de zichtbare breedte (zodat de volgende alvast uitsteekt) */
	  max-width: 320px; /* Optioneel: voorkomt dat kaarten te groot worden */
	  scroll-snap-align: start; /* Zorgt dat kaarten netjes vastklikken bij het scrollen */
	}

	@keyframes welkomFoto{
		from {background-size: 140%;}
		to {background-size: 110%;}
	}

	#welkom-yellow{
		grid-column: 1/4;
		grid-row: 1/3;
		height: 75%;
	}

	.welkom-introductie{
		display: grid;
		grid-template-columns: 1rem auto 1rem;
		/*grid-template-rows: 48px auto 100px auto;*/
		position: relative;
	}

		.introductie-container{
			display: flex;
			grid-column: 1/4;
			flex-direction: column;
			/*margin-bottom: -2rem;*/
		}

			#introductie-1{
				z-index: 2;
				margin-left: auto;
			}

				#introductie-1 p{
					grid-row: 1/3;
				}

			#introductie-2{
				z-index: 1;
				margin-right: auto;
				transform: translateY(-2rem);
			}

				#introductie-2 p{
					grid-row: 2/4;
					padding-top: 3rem;
				}

	.welkom-introductie p{
		/*line-height: 60px;*/
		padding: 1.5rem 1.5rem;
		font-size: 0.875rem;
		line-height: 1.50rem;
	}

	#welkomIntroductieMobileTitle{
		/*margin-top: 80px;*/
		display: block;
		grid-column: 2/3;
		grid-row: 1/2;
	}

	#introductie-1, #introductie-2{
		width: calc(100% - 1rem);
		display: grid;
		position: relative;
	}

	.introductie-1-background, .introductie-2-background{
		position: absolute;
		height: 100%;
		width: 100%;
		grid-column: 1/3;
		grid-row: 1/4;
	}

	.introductie-1-background{
		display: block;
		border-radius: 0.75rem 0px 0px 0.75rem;
		background-color: #F6F6F6 !important;
		z-index: -1;
	}

	.introductie-2-background{
		display: block;
		border-radius: 0px 0.75rem 0.75rem 0px;
		background-color: #FFED00 !important;
		z-index: -2;
	}

	.welkom-projecten{
		grid-template-rows: auto auto;
		row-gap: 1rem;
	}

	#welkom-projecten-indicator{
		display: none;
	}

	.welkom-projecten div{
		position: relative;	
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	.welkom-projecten-info{
		grid-column: 3/4;
		grid-row:1/2;
		top: 500px;
		left: 5%;
		width: 80%;
		height: auto;
		align-self: center;
		position: absolute;
		background-color: white;
		padding: 30px;
		border-left: 5px solid #FFED00;
	}

	#arrow-left-mobile{
		opacity: 1;
		transition: transform .6s cubic-bezier(.365,.305,0,1) 0.2s, opacity .3s cubic-bezier(.365,.305,0,1) 0.2s;
	}

	#arrow-left-home{
		opacity: 0;
		transform: translateY(+90%);
		transition: transform .6s cubic-bezier(.365,.305,0,1) 0.2s, opacity .3s cubic-bezier(.365,.305,0,1) 0.2s;
	}

	header, .introductie{
		display: grid;
		grid-template-columns: 50px auto 50px;
		width: 100vw;
	}

	.eindresultaat-rechts{
		max-width: 100%;
	}

	header{
		z-index: 2;
		border: none;
	}

	.index-header{
		background-color: transparent;
	}

	.stay-showcase{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.wideImage{
		display: grid;
		grid-column:1/4;
		grid-template-rows: auto auto auto;
	}

	#responsive-nav, .welkom-introductie, .welkom-projecten{
		display: grid;
		grid-template-columns: 1rem auto 1rem;
	}

	#responsive-nav{
		position: fixed;
		top:1.25rem;
		left: 0;
		grid-column: 1/3;
		width: 100%;
		height: 2.5rem;
		transition: height .3s cubic-bezier(.365,.305,0,1);
		z-index: 6;
	}
		.responsive-nav-top{
			display: flex;
			grid-column: 2/3;
			position: relative;
			justify-content: center;
			height: 2.5rem;
			background-color: rgba(239, 239, 239, 0.3);
			border-radius: 1rem;
		}

			#responsive-nav-list{
				display: flex;
				justify-content: center;
				flex-direction: column;
				grid-column: 1/3;
				position: absolute;
				width: 100vw;
				height: 7.5rem;
				transition: height .3s cubic-bezier(.365,.305,0,1);
				opacity: 0;
				transition: opacity .3s cubic-bezier(.365,.305,0,1);
			}

			#responsive-nav-list a{
				align-self: center;
				font-family: paralucent, sans-serif;
				font-style: normal;
				font-weight: 500;
				font-size: 60px;
				/*margin: 9.375rem;*/
				opacity: 0;
				transition: opacity .3s cubic-bezier(.365,.305,0,1);
			}

				#responsive-nav-list-item-1, #responsive-nav-list-item-2{
					opacity: 0;
					transition: opacity 0.3s cubic-bezier(.365,.305,0,1) 6s;
				}

				#responsive-nav-list-item-2{
					text-decoration: line-through;
					text-decoration-color: white;
				}


			#overlay-menu-1{
				opacity:0;
				transition: opacity 2s ease-in;
			}

			#close-overlay{
				background-color: ;
			}

			.yellow{
				color:#FFED00;
			}

			.white{
				color: white;
			}

			#overlay{
				height: 0vh;
				width: 100vw;
				transition: height .5s ease-in;
			}

		.arrow-left, .hamburger-menu{
			border-radius: 0.6rem;
			width: 2rem;                  
			height: 2rem;
		}

		.arrow-left {
		  position: absolute;
		  align-self: center;                     /* Zet de bovenkant van de pijl halverwege de nav */
		  left: 0.25rem;              
		  cursor: pointer;
		}

		.arrow-left img {
		  width: 1rem;  /* 20px */
		  height: 1rem; /* 20px */
		  display: block;  /* Haalt ongewenste witruimte onder afbeeldingen weg */
		}

		.hamburger-menu{
			background-color: #FFED00;
			position: absolute;
			right: 0.25rem;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-self: center;
		}

		.hamburger-menu div{
			align-self: center;
			width: 40%;
			height: 0.2rem;
			margin: 0.2rem;
			transition: background-color .3s cubic-bezier(.365,.305,0,1);
			transition: margin-top .3s cubic-bezier(.365,.305,0,1);
			transition: margin-bottom .3s cubic-bezier(.365,.305,0,1);
		}

			#hamburger-1,#hamburger-2{
				background-color: #131824;
				transform: rotate(0deg);
				transition: transform 0.3s cubic-bezier(.365,.305,0,1);
			}

		#responsive-nav-item-1,#responsive-nav-item-2,#responsive-nav-item-3{
			display: none;
		}

		#responsive-nav-item-1 h2{
			color: #FFED00;
		}

		#responsive-menu a{
			color: #131A2B;
		}

	.responsive-header-image{
		height: 100vh;
		/*height: calc(var(--vh, 1vh) * 100);*/
		width: 100vw;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		position: relative;
		transform: translateY(0px);
		position: relative;
	}

	.header-scroll{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 340px;
		height: 160px;
		background-color: white;
		bottom: 0%;
		right: -4px;
		text-align: right;
		background-image: url("../Afbeeldingen/arrow-down.svg");
		background-size: 40px;
		background-position: 16% 50%;
		padding-left: 8%;
		background-repeat: no-repeat;
		z-index: 1;
	}

	.header-scroll-yellow{
		z-index: 0;
		position: absolute;
		width: 354px;
		height: 160px;
		bottom: 0;
		right: -4px;
		background-color: #FFED00;
		/*transform: translateX(400px);*/
		transform: translateY(-20%);
	}

	.introductie{
		transform: translateY(-100px);
		margin-top: 32px;
	}

		.interactiveButtonCase{
			border: 8px solid #131824;
		}

	.interactiveButtonIndex{
		background-image: url("../Afbeeldingen/arrow-right.svg");
		background-size: 40px;
		background-position: 95% 67%;
		background-repeat: no-repeat;
	}

	.interactiveUnderlayIndex, .interactiveUnderlayCase{
		transform: translate(20px, 20px);
		transition: transform .6s cubic-bezier(.365,.305,0,1);
	}

	section{
		grid-template-columns: 1.5rem auto 1.5rem; 
	}

		.sectie-indicatie-achtergrond{
			width: 500px;
			height: 150px;
			padding: 10px;
		}

		.sectie-indicatie{
			width: 100px;
			height: 60px;
		}

		.sectie-indicatie-titel{
			margin-top: 20px;
			margin-left: 40px;
		}

	#welkom-roadmappie, #welkom-bykarlie, #welkom-save-now, #welkom-play-next{
		display: none;
		background-size: 140%;
		height: 800px;
	}

	.welkom-projecten-intro{
		grid-column: 2/3;
	}

	#welkom-projecten-title{
		font-family: paralucent, sans-serif;
		font-weight: 500;
		opacity: 1;
		color: #131824;
		margin-left: 0px;
		margin-bottom: 0px;
		transform: translateY(0px);
		/*transition: transform .3s cubic-bezier(.365,.305,0,1), opacity .3s cubic-bezier(.365,.305,0,1);*/
	}

	.welkom-introductie h3::before, #welkom-projecten-title::before{
		content: none;
	}

	#projectCardContainer {
	    display: flex;
	    flex-wrap: nowrap;
	    overflow-x: auto;
	    overflow-y: hidden;
	    align-items: stretch; /* DIT DWT ALLE CARDS NAAR DERZELFE HOOGTE */
	    width: 100%;
	    grid-column: 1 / 4;
	    scrollbar-width: none;
	}

	#projectCardContainer::-webkit-scrollbar{
		display: none;
	}

		.projectCardFirst{
			margin-left: 1rem;
		}

		.projectCardLast{
			margin-right: 1rem;
		}

		.projectCard {
		    flex: 0 0 80%; /* 80% breedte per kaart */
		    display: flex;
		    flex-direction: column; /* Stapel afbeelding en info onder elkaar */
		    margin-right: 1rem;
		    border: 1px solid #F6F6F6;
		    border-radius: 1rem;
		    overflow: hidden;
		}

			.projectCardImage {
			    width: 100%;
			    height: 10rem; /* Of pas dit aan naar wens, bijv. aspect-ratio: 16/9 */
			    object-fit: cover;
			}

			.projectCardInfo {
			    display: flex;
			    flex-direction: column;
			    padding: 1.5rem 1rem;
			    flex-grow: 1; /* Neemt alle overgebleven verticale ruimte in beslag */
			}

				.projectCardInfo h3{
					font-size: 1.25rem;
					margin: 0 0 0.50rem 0;
				}

				.projectCardInfo p{
					margin-bottom: 2rem;
					color: #757575;
				}

			.projectCardInfo button {
			    margin-top: auto; /* Duwt de knop naar de onderkant van de kaart */
			}

		#welkom-projecten-scroll{
			display: flex;
			flex-direction: row;
		}

		#welkom-projecten-scroll h3{
			margin-top: 0px;
			color: #757575;
		}

			#welkom-projecten-scroll img{
				margin-left: 24px;
			}

	.eindresultaat-section{
		display: grid;
		grid-template-columns: 50px auto auto auto 50px;
		text-align: left;
		max-width: 100vw;
	}

		.eindresultaat-section img{
			margin-bottom:5%;
		}

		.eindresultaat-section h1{
			font-family: paralucent, sans-serif;
			font-weight: 700;
			font-style: normal;
			color:#131824;
		}

		.play-next-line, .finance-line{
			height: 5px;
			width: 100%;
			border-radius: 10px;
		}

		.play-next-line{
			background-color:#F22B50;
		}

		.finance-line{
			background-color: #0B41DA;
		}

		.eindresultaat-container{
			position: relative;
			display: grid;
			grid-template-columns: 50px auto auto auto 50px;
			grid-column: 1/6;
			margin-bottom: 200px;
		}

		#eindresultaat-container-toevoegen{
			position: relative;
			display: grid;
			grid-template-columns: 50px auto auto auto 50px;
			grid-column: 1/6;
			margin-bottom: 500px;
		}

		.eindresultaat-afbeelding{
			grid-column: 1/6;
			position: relative;
		}

		.eindresultaat-links{
			grid-column: 2/4;
			margin: 0px;
		}

		#expenses-tekst, #toevoegen-tekst{
			box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
		}

		#expenses-tekst{
			grid-column: 3/5;
			padding: 6%;
			width: auto;
			background-color: white;
			position: absolute;
			z-index: 3;
		}

			.eindresultaat-tekst-analyse{
				bottom: -300px;
			}

		.eindresultaat-rechts{
			margin: 0px;
		}

		#toevoegen-tekst{
			grid-column: 3/5;
			padding: 6%;
			/*right: 10px;
			bottom: -400px;
			width: auto;
			/*height: auto;*/
			background-color: white;
			position: absolute;
			z-index: 3;
		}

	.focusUitleg{
		grid-column: 1/4;
	}

	.image{
		margin-top: 30px;
		height: 500px;
		grid-column: 1/4;
	}

	.mobile-image{
		display: flex;
		justify-content: center;
		grid-column: 1/4;
	}

	footer{
		grid-template-columns: 1rem auto auto 1fr repeat(2, 2rem);
		grid-template-rows: 3rem 1rem;
		width: 100vw;
		height: 4rem;
	}

		.footer-balk{
			grid-row: 2/3;
			grid-column: 1/5;
			width: 100%;
			height: 1rem;
			z-index: -1; 
		}

		footer p{
			margin:0;
			font-weight: 700;
		 	color:#131A2B;
		}

		#footer-transparent-left{
			height: 50px;
		}

		#email, #linkedIn{
			height: 2rem;
			width: 2rem;
		}

		#email-popup{
			/*right: 0px;*/
			width: 100%;
			height: 80px;
			bottom: 100px;
		}

		.focusUitlegGrijs{
			left: -50px;
			bottom: 0px;
		}

		.eindresultaat-responsive{
			display: grid;
			grid-template-columns: 50px auto 50px;
			width:100vw;
		}

			.minder-margin{
			/*	padding-bottom: 0px;
				margin-bottom: -140px;*/
			}

			.responsive-eindresultaat-beschrijving{
				z-index: 3;
				grid-column: 2/3;
				width: 100%;
				background-color: white;
			}

				.responsive-eindresultaat-beschrijving h4{
					margin-bottom: 0px;
				}

				.responsive-eindresultaat-beschrijving h2{
					margin-top: 0px;
					margin-bottom: 20px;
				}

				.responsive-eindresultaat-line{
					height: 2px;
					width: 100%;
					background-color: #F6F6F6;
				}

				.responsive-eindresultaat-beschrijving p{
					margin-top: 20px;
				}

			.eindresultaat-links, .eindresultaat-rechts, .eindresultaat-dubbel{
				display: grid;
				grid-column: 1/4;
				position: relative;
				width: 100vw;
				margin-top: 120px;
				margin-bottom: 40px;
			}

			.eindresultaat-links, .eindresultaat-rechts{
				grid-template-columns: 50px repeat(6, 1fr) 50px;
			}

			.eindresultaat-dubbel{
				grid-template-columns: 50px 1fr 40px 1fr 50px;
			}

				.eindresultaat-links img{
					grid-column: 2/6;
					box-shadow: 0px 8px 16px rgba(112, 112, 112, 0.20);
				}

				.eindresultaat-links .backdrop-grey{
					grid-column: 1/8;
					border-radius: 0px 0px 40px 0px;
				}

				.eindresultaat-rechts img{
					grid-column: 4/8;
					box-shadow: 0px 8px 16px rgba(112, 112, 112, 0.20);
				}

				.eindresultaat-rechts .backdrop-grey{
					grid-column: 2/9;
					border-radius: 0px 0px 0px 40px;
				}

				.eindresultaat-dubbel img{
					box-shadow: 0px 8px 16px rgba(112, 112, 112, 0.20);
				}

					.eindresultaat-dubbel-links{
						grid-column: 2/3;
						margin-bottom: 240px;
					}

					.eindresultaat-dubbel-rechts{
						grid-column: 4/5;
						margin-top: 240px;
					}

					.eindresultaat-horizontaal{
						grid-column: 2/5;
					}

						.eindresultaat-horizontaal{
							margin-bottom: 40px;
						}


				.eindresultaat-dubbel .backdrop-grey{
					grid-column: 1/6;
				}

			.backdrop-grey{
				display: flex;
				justify-content: center;
				align-self: center;
				vertical-align: middle;
				position: absolute;
				z-index: -1;
				background-color: #F9F9F9;
				height: 40%;
				width: 100%; 
			}

			.eindresultaat-backdrop-white{
				background-color: white;
			}

			.backdrop-links{
				grid-column: 1/3;
			}

			.backdrop-rechts{
				grid-column: 2/4;
			}

			.backdrop-bovenste{
				padding: 10% 0% 10% 0%;
				transform: translateY(3%);
				z-index: 7;
			}

			.backdrop-boven{
				padding: 5% 0% 0% 0%;
				transform: translateY(-5%);
				z-index: 5;
			}

			.backdrop-midden{
				padding: 10% 0% 20% 0%;
				transform: translateY(1%);
				z-index: 5;
			}

			.backdrop-onder{
				padding: 5% 0% 20% 0%;
				transform: translateY(1%);
				z-index: 5;
			}

			/*.researchContainer{
				display: grid;
				grid-template-columns: 50px auto 50px;
				grid-template-rows: auto auto 50px auto auto;
				grid-column: 1/4;
			}*/

			.quote{
				grid-column: 1/4;
			}

				.quote h3{
					font-family: paralucent, sans-serif;
					font-style: normal;
					font-weight: 700;
					color: #131824;
				}

				.quote p{
					margin-left: 60px;
				}

				blockquote{
					font-family: paralucent, sans-serif;
					font-size: 44px;
					line-height: 68px;
					margin: 48px 60px;
					font-style: normal;
					color:#131824;
					position: relative;
				}

				#research1, #research2{
					grid-column: 2/3;
					border-radius: 24px;
				}

				#researchSingle{
					grid-column: 2/3;
					border-radius: 24px;
				}

					#researchSingle h3{
						color: #131824;
						font-style: normal;
						padding-left: 0px;
					}

				#research1{
					grid-row: 1/3;
				}

				#research2{
					grid-row: 4/6;
				}

				#researchImage{
					align-self: center;
					z-index: -1;
					grid-column: 1/4;
					grid-row: 2/5;
					height: 100%;
					background-color: #F6F6F6;
				}

				.quote-getal-flex{
					display: flex;
					flex-direction: row;
					justify-content: center;
				}

				.quote-getal{
					width: 100%;
				}

					.quote-getal h2, .quote-getal p{
						text-align: center;
					}

					.quote-getal h2{
						margin-bottom: 8px;
					}

				#gamingResearch2{
					margin:48px 60px;
				}

					#gamingResearch2 p{
						color: #131824;
						margin-left: 0px;
					}

			.wideImage{
				grid-template-columns: 50px auto 50px;
				grid-column: 1/-1;
			}

			cite{
				font-size: 32px;
				margin: 32px 0px;
			}

			.eindresultaatTileTekst{
				margin: 24px 0px;
			}

			#eindresultaatImageMobile{
				width: 100%;
				grid-column: 1/4;
				height: 100vh;
				background-position: 10% 50%;
				background-size: cover;
			}

			.volgendeCaseStatic, .volgendeCaseBen{
				width: 100%;
				height: 600px;
				background-size: 100%;
				/*background-position: 0% -20%;*/
				/*background-color: red;*/
				background-repeat: no-repeat;
			}

			.caseCard{
				grid-column: 2/3;
				width: 100%;
/*				margin-bottom: 200px;*/
				height: 840px;
				/*background-color: red;*/
				/*background-position: 60vw;*/
				background-repeat: no-repeat;
				/*margin-bottom: -150px;*/
				opacity: 1;
				transition: opacity .6s cubic-bezier(.365,.305,0,1) .3s;
			}

					#projectTypeLine{
						/*align-self: center;*/
						height: 100px;
						width: 12px;
						background-color: #FFED00;
						margin-right: 40px;
					}

				#volgendeCaseCard{
					width: 100vw;
				}

				#volgendeCaseCard h2{
					margin-bottom: 0px;
				}

				#volgendeCaseCardText{
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					grid-column: 2/3;
					opacity: 1;
				}

					#volgendeCaseCardText h3{
						width: 90%;
					}

					#volgendeCaseCardButton{
						grid-column: 2/3;
						left:0;
					}

					.mobile-image{
						display: flex;
						justify-content: center;
						grid-column: 1/4;
					}

			.contactContent{
				width: 100vw;
				height: 100vh;
			}

				.contactCard{
					grid-template-rows: 120px auto;
					height: auto;
				}

					.contactCardTitle{
						grid-template-columns: 120px 1fr;
						grid-column: 1/3;
						grid-row: 1/2;
						height: 120px;
					}

						.contactCardIcon{
							grid-column: 1/2;
							width: 120px;
							height: 120px;
						}

						.contactCardIconEmail{
							background-size: 40%;
						}

						.contactCardIconTelefoon{
							background-size: 40%;
						}

						.contactCardIconLinkedin{
							background-size: 40%;
						}

						.contactCardTitle h3{
							grid-column: 2/3;
							margin: 0px 0px 0px 32px;
							padding: 0px !important;
							align-self: center;
						}

					.contactCardDescription{
						display: grid;
						grid-template-columns: auto;
						grid-template-rows: 120px 160px;
						grid-column: 1/3;
						grid-row: 2/3;
/*						margin-left: 24px;*/
						height: auto;
					}

						.contactCardDescriptionP{
							grid-column: 1/3;
							display: flex;
							justify-content: center;
							grid-row: 1/2;
							background-color: orange;
						}

							.contactCardDescriptionP .p-small{
								margin-left: 40px !important;
								margin-top: 0px !important;
								margin-bottom: 0px !important;
								background-color: green;
							}

						.contactCardDescriptionButton{
							grid-column: 1/3;
							display: flex;
							justify-content: center;
							grid-row: 2/3;
							background-color: purple;
						}

							.contactCardDescriptionButton button{
								margin-top: -2.5rem !important;
							}

					.contactCard p, .contactCard .p-small{
						grid-column: 1/2;
						grid-row: 1/2;
						letter-spacing: 1px;
						margin-left: 20px;
					}

					.contactCard p{
						margin-top: 80px;
					}

					.contactCard #contact-email-text-res, .contactCard #contact-phone-text-res{
						margin-top: 40px;
					}

						.contactCard #contact-email-text-res::selection, .contactCard #contact-phone-text-res::selection{
							background-color: transparent;
						}

					.contactCard .buttonSmall{
						margin-left: 0px;
					}

					.contactCardLine{
						width: 10%;
						height: 1%;
						bottom: 35%;
					}

				.contactCardContainer{
					grid-column: 1/17;
					grid-template-columns: 50px auto auto 50px;
					grid-template-rows: auto auto 0px auto 0px auto auto;
					grid-column-gap: 1vw;
					height: 100vh;
					width: 100vw;
				}

				.contactCardDescription .p-small{
					font-size: 2rem;
				}

				#contact1, #contact2, #contact3{
					grid-column: 2/4;
				}

				#contact1{
					grid-row: 2/3;
				}

				#contact2{
					grid-row: 4/5;
				}

				#contact3{
					grid-row: 6/7;
				}

				.contactBackground1, .contactBackground2{
					height: 25vh;
				}

				.contactBackground1{
					grid-column: 1/3;
					top:16vh;
				}

				.contactBackground2{
					grid-column: 3/6;
					bottom:20vh;
				}


}

/* DESKTOP*/

@media screen and (min-width: 1001px){
	
	h1{
		font-size: 3.125rem;
	}

	h2{
		font-size: 2rem;
	}

 	h3{
		font-size: 1.35rem;
	}

	h4{
		font-size: 1.15rem;
	}

	h5{
		font-size: 1rem;
	}

	h6{
		font-size: 0.875rem;
	}

 	p{
		font-size: 1.125rem;
		line-height: 1.8;
	}

	#loadWebsiteTitel span{
		font-size: 2rem;
		margin-bottom: 0;
	}

	#loadWebsiteTitel p{
		margin-bottom: 1rem;
	}

		.p-small{
			font-size: 1rem
		}

	#desktop-project-title{
		font-size: 1rem;
	}

	.hero-title{
		font-size: 2.5rem;
	}

	.section-title{
		font-size: 1.75rem;
		margin-bottom: 0.5rem;
	}

	.footer-title{
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.next-case-title{
		font-size: 3rem;
		margin-bottom: 0.5rem;
	}

	#welkom-bericht-tekst-desktop{
		width: 100%;
		margin: 0px 0px 60px 0px;
		opacity: 0;
		animation: welkomBericht .6s cubic-bezier(.365,.305,0,1) forwards;
		animation-delay: .6s;
		transform: translateY(-20%);
		transition: transform 0.6s cubic-bezier(.365,.305,0,1) 1.3s, opacity 0.6s cubic-bezier(.365,.305,0,1) 1.3s;
	}

	.next-case-subtitle{
		margin-bottom: 1.5rem;
	}

	.desktop-only{
		display: block;
	}

	.text-left, .full-width-text{
		grid-column: 2 / 6;
	}

	.right-half{
		grid-column: 7 / -1;
	}

	.text-right{
		grid-column: 8/12;
	}

	.research-container > .callout-text{
		grid-column: 4/10;
		margin: 5rem 0 7.5rem 0px;
		font-size: 2rem;
		font-weight: 600;
		color: #757575;
		line-height: 1.6;
	}	

	.caseButton{
		font-size: 1.125rem;
		font-style: normal;
		outline:none;
		color: #131824;
		background-color: #FFED00;
		padding: 1rem 2rem;
		background-image: url("../Afbeeldingen/arrow-right.svg");
		background-size: 0%;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		transition: background-position .3s cubic-bezier(.365,.305,0,1), background-size 0.3s cubic-bezier(.365,.305,0,1) 0.1s, 
		padding 0.3s cubic-bezier(.365,.305,0,1);
	}

	.buttonSmall{
		border-top: 2px solid #FFED00;
		font-style: normal;
		font-size: 14px !important;
		text-align: left;
		letter-spacing: 0px;
		padding: 16px 20px 16px 20px !important;
		position: absolute;
		right: 20px;
		align-self: center;
		margin-top: 0px !important;
	}


	#responsive, #responsive-nav, .responsive-image, #eindresultaat-section-responsive, #projectCardContainer, #welkom-introductie-title-responsive,
		#welkom-projecten-scroll, .save-now-header-responsive, .gaming-header-responsive, .eindresultaat-responsive, #volgendeCaseCard, .welkom-bericht-mobile-container, 
		#case-header-description-mobile, .mobileImage, #contactMobile, .mobile-only{
		display: none;
	}

	.play-next-header-responsive, .responsive-header-image{
		display: none;
	}

	.caseLanding{
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 6rem 16vh 3.375rem 1fr;
		min-height: 100vh;
	}

	/*Desktop Grid*/
	#loadWebsite, .introductie{
		display: grid;
		grid-template-columns: 300px auto 300px;
		width: 100vw;
	}

	#projectbeschrijving{
		margin-bottom: 80px;
	}

	#volgendeCase{
		display: grid;
	}

	.indexHeader{
		opacity: 0;
		animation-duration: 1s;
		animation-timing-function: cubic-bezier(.365,.305,0,1);
	}

	#desktop{
		position: fixed;
		top: 1.5rem;
		display: grid;
		grid-template-columns: 8.75rem auto 8.75rem;
		grid-template-rows: 0.125rem 4.25rem 0.125rem;
		width: 100vw;
		z-index: 3;  
	}

		#headerContainer{
			display: grid;
			grid-template-columns: 8.75rem 7.50rem auto 7.50rem 8.75rem;
			grid-column: 2/3;
			grid-row: 2/3;
			height: 4.25rem;
			width: 100%;
			background-color: rgba(239, 239, 239, 0.30);
			border-radius: 0.4rem;
			opacity: 0.7;
			transition: all 6s cubic-bezier(.365,.305,0,1);
			/*box-shadow: 0px 10px 20px rgba(112,112,112,0.05);*/
		}

			#headerContainer:hover{
				opacity: 1;
				border:1px solid rgba(239, 239, 239, 0.4);
				/*box-shadow: 0px 1rem 2rem rgba(0, 0, 0, 0.04);*/
			} 

			.headerItems{
				display: flex;
				flex-direction: row;
				justify-content: space-evenly;
				grid-column: 3/4;
			}

				.headerPages{
					display: flex;
					flex-direction: row;
					gap:2rem;
					position: absolute;
					left:0;
					height: 100%;
				}

			.arrow-left {
			  left: 1.5rem;

			  /* Flexbox centreert het icoontje exact in het midden */

			  /* Optie A: Vaste afmetingen voor een vierkante knop */
			  width: 2.25rem;  /* 36px */
			  height: 2.25rem; /* 36px */

			  border-radius: 0.4rem;
			  border: none;
			  cursor: pointer;
			}

			/* De afbeelding behoudt altijd zijn strakke 20x20px verhouding */
			.arrow-left img {
			  width: 1.25rem;  /* 20px */
			  height: 1.25rem; /* 20px */
			  display: block;  /* Haalt ongewenste witruimte onder afbeeldingen weg */
			}

			.lang-switch{
				display: flex;
				justify-content: space-around;
				flex-direction: row;
				row-gap: 2.875rem;
				position: absolute;
				right: 10.25rem;
				border-radius: 0.4rem;
				background-color: #FFED00;
				grid-column: 4/5;
				width: 7.50rem;
				height: 2.25rem;
				align-self: center;	
				transform: translateX(0px);
			}

				.lang-switch > button{
					z-index: 2;
					background: none;
					border: none;
					font-family: paralucent, sans-serif;
					font-style: normal;
				}

				.lang-btn {
				  font-weight: 400;
				  color: #948A00;
				}

					.lang-btn:hover{
						color:#131824;
						font-weight: 500;
					}

				/* Actieve status */
				.active-lang {
				  font-weight: 500;
				  color:#131824;
				}

				.lang-indicator{
					z-index: 1;
					position: absolute;
					height: 1.75rem;
					left: 0.25rem;
					top: 0.25rem;
					width: 3.25rem;
					background-color: white;
					border-radius: 0.4rem;
					transition: transform 0.4s cubic-bezier(.365,.305,0,1);
				}

		.headerIndicator{
			grid-column: 2/3;
			grid-row: 3/4;
		}

		.headerContainerDefault{
			grid-template-columns: auto auto;
		}

		.headerContainerCase{
			grid-template-columns: 1fr 1fr 1fr;
		}

		header, #headerContainer{
			transition: height .3s cubic-bezier(.365,.305,0,1);
		}

			.headerPages{
				left:1.5rem;
			}

			.headerPages > *{
				font-family: paralucent, sans-serif;
				font-style: normal;
				text-align: left;
				font-weight: 500;
				font-size: 1rem;
				align-self: center;
				transition: color .6s cubic-bezier(.365,.305,0,1);
			}

			.header-active-page{
				color: #131824;
			}

			.header-inactive-page{
				color: #71747C;
			}

				.header-inactive-page:hover{
					color:#131824;
				}

			#headerItem1, #headerItem2, #headerItem3, #headerItemDefault2{
				display: flex;
				justify-content: center;
			    white-space: nowrap;
			}

			#headerItem1{
				grid-column: 1/2;
				opacity: 0.5;
				transition: opacity .3s cubic-bezier(.365,.305,0,1);
			}

			#headerItem2{
				grid-column: 3/4;
				opacity: 0.5;
				transition: opacity .3s cubic-bezier(.365,.305,0,1);
			}

			#headerItem3{
				z-index: 2;
				grid-column: 2/3;
			}

			#headerItemDefault2{
				grid-column: 2/3;
			}

			#headerContainer1, #headerContainer2, #headerContainer3{
				height: 0.125;
				width: 100%;
				/*transform: translateY(-100px);*/
			}

			@keyframes headerContainer{
				0%   {width: 100%;}
		 	  	50%  {width: 90%;}
		 	  	100% {width: 100%;}
			}

			#headerContainer1{
				grid-column: 1/2;
				grid-row: 2/3;
				transform: translateX(0%), translateY(-1px);
				transition: transform 0.4s cubic-bezier(.365,.305,0,1);
				animation-duration: 0.3s;
				animation-timing-function: cubic-bezier(.365,.305,0,1);
			}

			#headerContainer2{
				grid-column: 2/3;
				grid-row: 2/3;
				transform: translate(0%, -2px);
				transition: transform 0.4s cubic-bezier(.365,.305,0,1);
				animation-duration: 0.3s;
				animation-timing-function: cubic-bezier(.365,.305,0,1);
			}

			#headerContainer3{
				grid-column: 3/4;
				grid-row: 2/3;
			}

			.headerContainerActive{
				background-color: #FFED00;
			}

			.headerDefault{
				background-color: white !important;
			}

				.headerDefault #headerItem1, .headerDefault #headerItem2{
					opacity: 1;
				}

				.headerDefault #active-page-1{
					color: #131824;
				}

				.headerDefault #inactive-page-1{
					color: #131824;
					opacity: 0.5;
				}

			.headerContainerActiveIndex{
				background-color: #FFED00;
			}

		header ul{
			display: flex;
			justify-content: center;
			list-style: none;
			padding: 0;
			grid-column: 1/3;
			grid-row: 1/2;
		}

		header li h1:hover{
			color:black;
		}

	header h1{
		margin: 0px 30px;
		transition: color .3s cubic-bezier(.365,.305,0,1);
		transition: font-size .3s cubic-bezier(.365,.305,0,1);
	}

		#active-page div{
			width: 100%;
			height: 4px;
			background-color: #FFED00;
		}

		.responsive-nav{
			display: none;
		}

	.introductie{
		margin-top: 32px;
	}

	.welkom-introductie .introductie-container {
	    grid-column: 2 / 12; /* Beslaat alle kolommen van de pagina-section */
	    display: grid;
	    grid-template-columns: repeat(12, 1fr);
	    grid-template-rows: repeat(6, 1fr);
	    width: 100%;
	}

/* De container kan eventueel weg als de blokken direct in het grid staan, 
   of je gebruikt het grid direct op de blokken hieronder: */

	#introductie-1, #introductie-2 {
	    padding: 2.5rem 4rem; /* 40px omgezet naar rem */
	    border-radius: 0.75rem; /* 12px */
	}

	/* Het gele blok (links) */
	#introductie-1 {
	    grid-column: 2 / 7 !important; /* !important of specifieke selector overschrijft 'section *' */
	    grid-row: 1 / 6;
	    background-color: #FFED00;
	    z-index: 2;
	    border-radius: 0.75rem;
	    align-self: center;
	}

	.introductie-1-background {
	    display: none;
	}

	/* Het grijze blok (rechts, overlappend) */
	#introductie-2 {
		display: grid;
	    grid-column: 4 / 12 !important; /* Overlapt van kolom 6 t/m 11 */
	    grid-row: 2 / 7;
	    background-color: #F6F6F6;
	    z-index: 1;
	    border-radius: 0.75rem;
	    align-self: center;
	    grid-template-columns: 50% 50%;
	}
		
		#introductie-2 p{
			grid-column: 2;
		}

	section{
		grid-template-columns: repeat(12, 1fr); 
	}

	.sectie-indicatie{
		width: 60px;
		height: 40px;
	}

	section h2{
		font-style: normal;
	}

	.eindresultaatTileTekst p{
		margin: 0;
	}

	.research-container, .flights-showcase, .stay-showcase{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-column: 1 / -1;
		row-gap: 7.5rem;
		margin-bottom: 64px;
	}
		.research-container > *{
			grid-column: 2/12;
		}

	.persona-wrapper {
		gap: 3.75rem;
		grid-column: 2/-1;
	}
	.persona-wrapper figure {
	/* Op desktop kun je ze eventueel breder of juist naast elkaar tonen */
		flex: 0 0 70%; 
	}

	#projectDescriptionContainer{
		grid-template-columns: repeat(12, 1fr);
		grid-column: 1/13;
		grid-row:3/4;
		height: 3.375rem;
		width: 100%;
		align-items: center;
	}

	.eindresultaatTileTekst > h2{
		font-size: 2rem;
		margin-top:0;
		margin-bottom: 0.5rem;
	}

	.opdracht-container{
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		height: 40vh;
		grid-column: 2/12;
		width: 100%;
		background-color: #FFED00;
		border-radius: 12px;
	}

		.opdracht-container p{
			width: 40%;
			color: #131824;
		}

		#projectDescription{
			grid-column: 2/12;
		}

	.quote{
		width: 100%;
		background-color: #FFED00;
	}
		.quote h2, .quote h3{
			padding: 0px 20px;
		}

		.quote h3{
			color:#5c5c5c;
			font-style: italic;
			font-weight: 500;
		}

			.quote-getal-flex{
				display: flex;
				flex-direction: row;
				justify-content: space-evenly;
			}

			.quote-getal{
				display: flex;
				justify-content: center;
				flex-direction: column;
			}

				.quote-getal h2{
					align-self: center;
					margin-top: 16px;
					margin-bottom: 4px;
				}

				.research-div-procenten h3{
					color: white;
				}

	.researchContainer{
		display: grid;
		grid-column: 2/12 !important;
		grid-template-columns: 50% 50%;
		grid-template-rows: 3fr 2fr;
		height: 100%;
		width: 100%;
		grid-gap: 1rem;
	}

	.save-now-wireframes{
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		row-gap: 3.75rem;
		grid-column: 2/12;
	}	

		.save-now-wireframes > .mobileImage, .save-now-wireframes > .desktopImage{
			grid-column: 1/-1;
		}

		.save-now-wireframes > .text-left{
			grid-column: 1/5;
		}

	blockquote{
		font-size: 22px;
		line-height: 32px;
	}

	#research1{
		grid-column: 1/2;
		grid-row: 1/2;
		position: relative;
		border-radius: 0px 0.75rem 0.75rem 0px;
	}

	#researchImage{
		grid-column: 2/3;
		grid-row: 1/2;
		height: 50vh;
		border-radius: 0.75rem 0px 0px 0.75rem;
	}

		.researchImageFinance{
			background-image: url(../Afbeeldingen/Finance/geld.jpg);
			background-size: cover;
			background-position: 70%;
			background-repeat: no-repeat;
		}

		.researchImageGaming{
			background-image: url(../Afbeeldingen/Gaming/dualshock-controller.jpg);
			background-size: cover;
			background-position: 0;
			background-repeat: no-repeat;
		}

	#research2{
		grid-column: 1/3 !important;
		grid-row: 2/3 !important;
		position: relative;
		border-radius: 0.75rem 0px 0px 0.75rem;
	}

		#research2 blockquote{
			padding-right: 2.5rem;
		}

	#researchSingle{
		grid-column: 2/4;
		border-radius: 12px 0px 0px 12px;
		margin-bottom: 20px;
	}

		#researchSingle h3{
			color: #131824;
			font-style: normal;
			padding-left: 0;
		}

		#researchSingle blockquote{
			font-size: 20px;
		}

		#researchSingle p{
			color: #575757;
			font-style: italic;
			margin-top: 24px;
		}

	#researchBron{
		font-style: italic;
		font-weight: 500;
		position: absolute;
		bottom: 0px;
		display: inline;
		margin-left:4px;
	}

	#researchBron{
		margin-left: 40px;
	}

	.image{
		margin-top: 20px;
		height: 500px;
		grid-column: 2/3;
	}

	.wideImage{
		grid-template-columns: 300px auto 300px;
	}

		cite{
			font-size: 16px;
			margin: 16px 0px;
		}

	#focus1 h2, #focus2 h2, #focus3 h2{
		font-size: 400px;
		align-self: center;
	}

	#focus1 h3, #focus2 h3, #focus3 h3{
		position: absolute;
		align-self: center;
		white-space: nowrap;
		padding: 24px 60px;
		background-color: white;
	}

	.focusUitleg{
		margin-top: -10%;
	}

	.focusUitlegGrijs{
		left:-300px;
		bottom: 20px;
	}

	footer{
		grid-template-columns: 140px auto auto 200px 50px 50px 1%;
		grid-template-rows: repeat(2, 3.125rem);
	}

	.affinity{
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		grid-template-rows: auto auto;
		row-gap: 3.75rem;
	}

		.affinity > .text-left{
			grid-column: 1/5;
		}

	.maps-wrapper{
	  grid-column: 1 / -1;
	  flex-direction: row; 
	}

	.affinity_3{
		object-position: center right;
	}

	.is-full-width{
		margin-top: 100px;
	}

	.is-wide{
		grid-column: 2/12;
	}

	section .byKarlieOld{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 40px;
		align-items: center;
		grid-column: 1 / -1;
		overflow: visible;
	}

		section .byKarlieOld img {
		    width: 100%;
		    object-fit: cover;
		}

		section .byKarlieOld img:nth-child(1) {
			grid-column: 1/2;
		}

		section .byKarlieOld img:nth-child(2) {
			grid-column: 2/3;
		}

		section .byKarlieOld img:nth-child(3) {
			grid-column: 3/4;
		}

	section .presentation-cards.is-full-width {
	  display: grid;
	  grid-template-columns: 2fr 2fr 1fr;
	  gap: 40px;
	  align-items: center;
	  grid-column: 1 / -1;
	  overflow: visible;
	}

	section .presentation-cards {
	    display: grid;
	    /* Geeft alle 3 de kolommen een vaste breedte gelijk aan jouw middelste kaart */
	    grid-template-columns: repeat(3, min(40vw, 450px)); 
	    gap: 40px;
	    overflow: visible;
	}

	section .presentation-cards img {
	    width: 100%;
	    object-fit: cover;
	}

	section .presentation-cards img:nth-child(1) {
		grid-column: 1/2;
		border-radius: 0px 24px 24px 0px;
	}

	section .presentation-cards img:nth-child(2) {
		grid-column: 2/3;
		border-radius: 24px;
	}

	section .presentation-cards img:nth-child(3) {
		grid-column: 3/4;
		border-radius: 24px 0px 0px 24px;
		height: 100%;
		object-position: 20% center;
	}

	.flights-showcase, .profile-showcase {
	  display: grid;
	  /* 12-koloms grid */
	  grid-template-columns: repeat(12, 1fr);
	  grid-gap: 2rem;
	  grid-column: 1 / -1;
	  align-items: start; /* Voorkomt dat afbeeldingen verticaal opgerekt worden */
	}

		.flights-showcase > .text-right {
		  grid-column: 8 / 12; /* Smakelijker uitgelijnd met de rechterkolom */
		  grid-row: 1/2;
		}

		.text-right * {
		  text-align: right;
		}

		.flights-imgs{
			display: grid;
			grid-column: 1/-1;
			/*width: 100%;*/
			height: 100vh;
			grid-template-columns: 50% 50%;
			grid-template-rows: 66vh 34vh;
			gap:2rem;
		}

		/* Standaard afbeeldingsgedrag: behoud originele verhoudingen (GEEN inzoomen) */
		.flights-imgs img {
		  width: 100%;
		  height: 100%;
		  display: block;
		  object-fit: cover;
		  object-position: top;
		}

		/* Linker grote afbeelding (pakt nu 7 kolommen i.p.v. 6) */
		#flights-eco {
		  grid-column: 1/2; /* Van lijn 1 tot 8 (breder dan de rechterkant) */
		  grid-row: 1/3; 
		  border-radius: 0px 0.75rem 0.75rem 0px;
		}

		/* Rechter bovenste afbeelding */
		#flights-default {
		  grid-column: 2/3; /* Van lijn 8 tot het einde */
		  grid-row: 1/2;
		  border-radius: 0.75rem 0px 0px 0.75rem;
		}

		/* Rechter onderste afbeelding */
		#flights-eco-bottom {
		  grid-column: 2/3;
		  grid-row: 2/3;
		  border-radius: 0.75rem 0px 0px 0.75rem;
		}

		.profile-showcase{
			align-items: center;
		}

	.stay-showcase{
		row-gap: 3.75rem;
		/*width: 100%;*/
		/*height: 50px;*/
	}

		.stay-showcase > img{
			width: 100%;
			grid-column: 2/12;
		}

	.sectie-indicatie-achtergrond h4{
		margin-left: 24px;		
	}

	.contactContent{
		width: 100vw;
		height: 100vh;
	}

		.contactCard{
			grid-template-rows: 60px 80px;
			height: 140px;
		}

			.contactCardTitle{
				grid-template-columns: 60px 1fr;
				grid-column: 1/3;
				grid-row: 1/2;
				height: 60px;
			}

				.contactCardIcon{
					grid-column: 1/2;
					width: 60px;
					height: 60px;
				}

				.contactCardIconEmail{
					background-size: 40%;
				}

				.contactCardIconTelefoon{
					background-size: 40%;
				}

				.contactCardIconLinkedin{
					background-size: 40%;
				}

				.contactCardTitle h4{
					grid-column: 2/3;
					margin: 0px 0px 0px 24px;
					padding: 0px !important;
					align-self: center;
				}

			.contactCard #contact-email-text::selection, .contactCard #contact-phone-text::selection{
				background-color: transparent;
			}

			.contactCardDescription{
				grid-column: 1/3;
				grid-row: 2/3;
				margin-left: 24px;
			}

			.contactCard p, .contactCard a{
				letter-spacing: 1px;
				margin-bottom: 0px;
			}

			.contactCardLine{
				width: 10%;
				height: 1%;
				bottom: 35%;
			}

		.contactCardContainer{
			grid-column: 1/16;
			grid-template-columns: repeat(17, 1fr);
			grid-column-gap: 1vw;
			height: 92vh;
			width: 100%;
		}

		#contact1{
			grid-column: 2/7;
		}

		#contact2{
			grid-column: 7/12;
		}

		#contact3{
			grid-column: 12/17;
		}

		.contactBackground1, .contactBackground2{
			height: 25vh;
		}

		.contactBackground1{
			grid-column: 1/5;
			top:16vh;
		}

		.contactBackground2{
			grid-column: 14/18;
			bottom:20vh;
		}

	/*Animaties*/

	@keyframes navDown {
	  from {opacity: 0; transform: translateY(-100%);}
	  to {opacity: 1; transform: translateY(0px);}
	}


}
/*4K*/
@media screen and (min-width: 2560px){

	header, .introductie{
		display: grid;
		grid-template-columns: 600px auto 600px;
		width: 100vw;
	}

	header{
		z-index: 2;
		height: 100px;
	}

		header ul{
			display: flex;
			justify-content: center;
			list-style: none;
			padding: 0;
		}

	header h1{
		margin: 5px 50px;
	}

	section{
		grid-template-columns: 600px auto 600px; 
	}

	.sectie-indicatie{
		width: 60px;
		height: 40px;
	}

	section h2{
		margin-bottom: -3px;
	}

	.welkom-introductie{
		grid-template-columns: 600px auto 600px; 
		height: 100vh;
	}

	.welkom-introductie *{
		line-height: 60px;
	}

	.image{
		margin-top: 20px;
		height: 500px;
		grid-column: 2/3;
	}

	.welkom-projecten-info{
		grid-column: 1/3;
		grid-row:1/2;
		top: 250px;
		left: 80%;
		width: 600px;
		height: auto;
		align-self: center;
		position: absolute;
		background-color: white;
		padding: 50px;
		border-left: 10px solid #FFED00;
	}
		
		 h3{
			font-size: 40px;
			line-height: 80px;
		}

		.welkom-projecten-info button{
			bottom:-40px;
			font-size: 35px;
			height: 80px;
			width: 50%;
		}


		#welkom-save-now, #welkom-play-next, #welkom-ben, #welkom-bykarlie{
			background-size: 100%;
			height: 1100px;
			background-position: center;
			transition: background-size 3s ease-in;
		}
}