*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

ul.nor {text-align:left;display:inline;}

    :root {
	  --trans:		rgba(255,255,255,0.7);
	  --ink:		rgb(24,154,170);
	  --inkDim:		rgba(24,154,170,0.3);
	  --inkLichter:	rgb(226,227,133);
	  --sectieBG:	rgba(255,255,255,0.70);
	  --paper: 		rgb(255,255,255);
	  --paperDim:	rgba(255,255,255,0.8);

	  --sans:       'Barlow', 'Open Sans', serif;
	  --serif:      'Barlow', 'Open Sans', serif;
	  
	  --accent: 		rgba(16,167,178,1);
	  --accentCM: 		rgba(0,175,255,1); /* CM Blue */
	  --accentCMD: 		rgba(0,120,178,1); /* CM Blue Dark */
	  --accentDim: 		rgba(16,167,178,0.3);
	  --accentP:     	rgba(255,153,204,1); /* De roze kleur */
      --nav-h:      	72px;
      --ease:       	cubic-bezier(0.4, 0, 0.2, 1);
	  --radius:			10px;
	  
	  --kleurPrimair:	rgba(16,167,178,1);
	  --kleurPrimairL:	rgba(16,167,178,0.5);
	  --kleurPriDonker:	rgba(58,83,89,1); 
	  --kleurSec:		rgba(127,204,182,1);/* secundaire kleur */
	  --kleurTer: 		rgba(255,153,204,1);/* tertiare kleur - flamingo Roze */
	  
	  --topPlaatsing:	857px; /* Hoogte voor iPhone */
	  --topPlaatsingM:	850px; /* Hoogte voor iPadPro Liggend */
	  --topPlaatsingT:	800px; /* Hoogte voor iPadPro Staand */
	  --topPlaatsingD:	840px; /* Hoogte voor Laptop1920 */
	  --ink-faint: 		rgba(0,0,0,0.4);
	  --zeeKleur: 		#2b929e;
	  --zandKleur: 		#fedfb0;   
    }
	
	.held 			{position:relative;overflow:hidden;width:100%;}
	.introFilmpje 	{position:relative;top:0;left:0;z-index:0;width:100%;height:100%;object-fit: cover;}
	.op				{position:relative;top:228px;left:20px;z-index:900;text-align:left;width:100%;}
	
	.tuchiGo {z-index:999;}
	.turtle-stage {border-solid:1px #000;
  position: relative;z-index:999;
  width: 100%;        /* matches the confines — set to your section's width */
  height: 160px;       /* the vertical "lane" the turtle walks along */
  overflow: hidden;    /* keeps it from wandering outside the box */
  margin-top:1%;
}

.turtle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;          /* adjust to taste */
  animation: walk 14s linear infinite;
}

@keyframes walk {
  0%   { left: 0;                    transform: scaleX(-1); }
  49%  { transform: scaleX(-1); }
  50%  { left: calc(100% - 200px);    transform: scaleX(1); } /* flips to face left */
  99%  { transform: scaleX(1); }
  100% { left: 0;                    transform: scaleX(-1); }
}

/* Navigation */
	.vervolg .nav {background: rgba(255,255,255,0.5);}
    .nav {
		line-height:14px;
      position: fixed;
      top: 0; left: 0; right: 0; z-index:9999;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(24px, 5vw, 64px);
      z-index: 100;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .nav.scrolled {
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 1px 0 rgba(26, 25, 22, 0.08);
    }
    .nav__logo { margin-top:12px; z-index:999;}
    .nav__logo span { color: var(--accent); }
	.nav__logo img {width:150px;}
    .nav__links { display: flex; align-items: center; gap: 40px; list-style: none; }
    .nav__links a { font-size: 0.875rem; font-weight: 400; color: var(--ink-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; }
    .nav__links a:hover { color: var(--ink); }
    .nav__cta { color: var(--ink) !important; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; font-weight: 500 !important; }
    .nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; }
    .nav__burger span { display: block; height: 1.5px; background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
    .nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav__burger.open span:nth-child(2) { opacity: 0; }
    .nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .nav__mobile { position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--paper); padding: 32px clamp(24px, 5vw, 64px) 40px; border-top: 1px solid rgba(26, 25, 22, 0.08); transform: translateY(-110%); opacity: 0; transition: transform 0.35s ease, opacity 0.25s ease; z-index: 9999; }
    .nav__mobile.open { transform: translateY(0); opacity: 1; background:#fff;}
    .nav__mobile ul { list-style: none; display: flex; flex-direction: column; gap: 24px; }
    .nav__mobile a { font-family: var(--serif); font-size: 1.75rem; color: var(--ink); text-decoration: none; transition: color 0.2s; }
    .nav__mobile a:hover { color: var(--accent); }
    @media (max-width: 680px) {
      .nav__links { display: none; }
      .nav__burger { display: flex; } .nav__logo img {width:120px;}
    }

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased;background:#2B929E;color:var(--ink);font-size:clamp(1.4rem, 2vw, 1.4rem);}
.scene{position:relative;width:100%;/*max-width:1920px;*/margin:auto;}
a 		{text-decoration:none;color:var(--ink);}
a:active{text-decoration:none;color:red;}
a:hover {text-decoration:none;color:var(--kleurPrimair);}
.project a 			{color:black;}
.project a:hover 	{color:orange;}

@media (prefers-reduced-motion: reduce) {
    .actor {
        animation: none;
    }
}

#testbal{width:200px;height:200px;border-radius:100%;background:red;position:absolute;bottom:0;}

#bottomDwellers	{background:#048da0;}

#hemel 			{position:absolute;top:0;left:0;}
#mountains 		{position:absolute;top:0;left:0;}
#eiland 		{position:absolute; top:0; left:0;}
#anna	 		{position:absolute; top:0; left:0;}

#zee 			{position:absolute; top:0; left:0;}
#flamingos 		{position:absolute; top:0; left:0;}
#bootje 		{position:absolute; top:38%; left:63%;transform-box:fill-box;transform-origin:center;width:10%;animation: vaar 20s linear infinite;}
#schildpad		{position:absolute; transform-box:fill-box;transform-origin:center;left:20%;top:60%;width:10%;animation: swim 12s linear infinite;}
#nemo			{position:absolute; transform-box:fill-box;transform-origin:center;left:0;top:90%;width:10%;}
#marlin, #nemoOud	{position:absolute; transform-box:fill-box;transform-origin:center;left:50%;top:70%;width:10%;}	
#dory 			{position:absolute;top:90%;width:8%;left:0;}
#marlin 		{position:absolute;top:90%;width:9%;left:0;}
#geleVis 		{position:absolute;top:80%;width:15%;left:0;}

#birds			{position:absolute;top:3%;width:10%;left:0;}
#visClown		{position:absolute;top:85%;width:10%;left:0;}

#waterkantLinks	{position:absolute; top:var(--topPlaatsingD); left:0;}
#waterkantR 	{position:absolute; top:var(--topPlaatsingD); left:0;}
#onderkant		{position:relative; top:var(--topPlaatsingD); left:0;}

#zeewier 		{position:absolute; top:var(--topPlaatsingD); left:0;transform-origin: bottom center;}
#plantenVoor	{position:absolute; top:var(--topPlaatsingD); left:0;transform-origin: bottom center;}
#tak 			{position:absolute; top:0; left:0;}

@media (max-width: 1367px) {
      #nemo {top:100%;}
		#waterkant 		{position:relative; top:var(--topPlaatsingM);}
		#waterkantLinks	{position:absolute; top:var(--topPlaatsingM);}
		#waterkantR 	{position:absolute; top:var(--topPlaatsingM); }
		#zeewier 		{position:absolute; top:var(--topPlaatsingM); }
		#plantenVoor	{position:absolute; top:var(--topPlaatsingM); }
    }
@media (max-width: 1024px) {
		#waterkant 		{position:relative; top:var(--topPlaatsingT);}
		#waterkantLinks	{position:absolute; top:var(--topPlaatsingT);}
		#waterkantR 	{position:absolute; top:var(--topPlaatsingT); }
		#zeewier 		{position:absolute; top:var(--topPlaatsingT); }
		#plantenVoor	{position:absolute; top:var(--topPlaatsingT); }
		
		#dory 			{position:absolute;top:90%;width:8%;left:0;}
		#nemo			{position:absolute; transform-box:fill-box;transform-origin:center;left:0;top:93%;width:10%;}
		#marlin 		{position:absolute;top:95%;width:9%;left:0;}
		#geleVis 		{position:absolute;top:90%;width:15%;left:0;}		
		#visClown		{position:absolute;top:87%;width:10%;left:0;}
			
    }
	
	@media (max-width: 441px) {
		#waterkant 		{position:relative; top:var(--topPlaatsing);}
		#waterkantLinks	{position:absolute; top:var(--topPlaatsing);}
		#waterkantR 	{position:absolute; top:var(--topPlaatsing); }
		#zeewier 		{position:absolute; top:var(--topPlaatsing); }
		#plantenVoor	{position:absolute; top:var(--topPlaatsing); }
		
		#dory 			{position:absolute;top:170%;width:8%;left:0;}
		#nemo			{position:absolute; transform-box:fill-box;transform-origin:center;left:0;top:163%;width:10%;}
		#marlin 		{position:absolute;top:155%;width:9%;left:0;}
		#geleVis 		{position:absolute;top:150%;width:15%;left:0;}		
		#visClown		{position:absolute;top:167%;width:10%;left:0;}
    }

.content			{position:absolute;width:100%;/*max-width:1920px;*/margin: auto;top:90px;z-index:99}
.project .content 	{min-height:500px;}
.sectiePanelProject {background-repeat:no-repeat; background-size:cover;}
.proThumb img 		{transition:  0.5s ease;opacity:0.8;}
.proThumb img:hover {transform: scale(1.03);  transition:  0.3s ease;cursor:pointer;opacity:1;}

@media (max-width: 431px) {
	.content{top:45px;}
}

#animation_container 	{width:100%;/*max-width:1920px;*/aspect-ratio: 1920/1080;margin:0 auto;}
#dom_overlay_container	{width:100%;/*max-width:1920px;*/aspect-ratio: 1920/1080;margin:0 auto;   pointer-events:none; overflow:hidden;  position: absolute; left: 0px; top: 0px; display: block;}
#canvas 				{width:100%;/*max-width:1920px;*/aspect-ratio: 1920/1080;margin:0 auto;   position: absolute; display: block; background-color:transparent;}


	    /* Hero */
		
	
    /*.hero { /*min-height: 100svh;*//* display: grid; place-items: center; /*padding: calc(var(--nav-h) + 40px) clamp(24px, 5vw, 64px) 100px; *//*position: relative; }*/
	.hero 				{/*background:rgba(255,255,255,0.5);*/top:0;border-radius:var(--radius);margin:12px 25px 0 25px;}
	.hero__title 		{font-family:var(--sans);color:#fff;font-size:2.8vw;padding:15px 0 15px 0;     width: clamp(100%, 60vw, 1200px); width: 100%;  display:flex;margin:auto;justify-content: center;}
	.hero__title  h2 	{font-weight:900;text-align:center;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;line-height:4vw;/*padding-top:11%;*/}
	.project .hero__title  h2 {color:var(--accentCM);text-shadow:none;}
	.hero__title em 	{color:var(--accentCMD);}
	.hero__front 		{max-width:820px;width: 100%;}
	.hero__front img 	{width:100%;}
	.containerWat 		{display:grid;grid-template-columns: repeat(3, 1fr);text-align:center; position:relative;font-size:1.1vw; gap:20px;}
	.containerWat div 	{border:solid 1px var(--ink);background:rgba(255,255,255,0.8);border-radius:var(--radius);padding:10px;}
	.containerWat h3 	{color:var(--accentCM);font-size:1.5vw;}
	.containerWat span 	{color:var(--kleurPriDonker);}
	.heroTag p			{line-height:40px;font-weight:700;font-size: clamp(23px, 2.2vw, 40px);text-align:center;color:var(--paper);text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;margin: 0 auto;padding: clamp(15px, 3vw, 20px) clamp(24px, 5vw, 40px);text-align:left;}
	p.heroTag			{line-height:40px;font-weight:700;font-size: clamp(23px, 2.2vw, 40px);text-align:left;color:var(--paper);text-shadow: -1px 0 var(--accentCMD), 0 1px var(--accentCMD), 1px 0 var(--accentCMD), 0 -1px var(--accentCMD);max-width: 1200px;margin: 0 auto;padding: clamp(15px, 3vw, 12px) clamp(12px, 2vw, 12px);}
  
	.overCM 			{text-align:left;display: grid; grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); gap: 20px; }
	.overCM > div 		{color: var(--kleurPriDonker);border-radius: var(--radius);padding: 24px;}
	.eersteKolom 		{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);border-radius:100%;border:solid 1px transparent;}
	.tweedeKolom 		{text-align:right;}
  @media (max-width: 441px) {
	  .overCM 		{grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));  }
	  .eersteKolom	{backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);}
  }
  
 
  
	 .sayWhat 			{color:#000;font-size: clamp(16px, 1.1vw, 20px);text-align:center; background:rgba(255,255,255,0.7);padding:6px;width:100%;margin:auto;position:fixed;top:0;left:0;}
	
    .hero__inner 			{ max-width: 820px; width: 100%; }
    .hero__eyebrow 			{ display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 28px; opacity: 0; transform: translateY(10px); animation: fadeUp 0.6s ease 0.1s forwards; }
    .hero__eyebrow::before 	{ content: ''; display: block; width: 24px; height: 1px; background: var(--accent); }
    .hero__headline 		{ font-family: var(--serif); font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.05; letter-spacing: -0.02em;color: var(--ink); margin-bottom: 28px; opacity: 0; transform: translateY(16px); animation: fadeUp 0.7s ease 0.25s forwards; font-weight:900;}
    .hero__headline em 		{ font-style: italic; color: var(--accent); }
    .hero__sub 				{ font-size: clamp(1rem, 2vw, 1.125rem); color: var(--ink-muted); max-width: 480px; line-height: 1.7; margin-bottom: 48px; opacity: 0; transform: translateY(12px); animation: fadeUp 0.7s ease 0.4s forwards; }
    .hero__actions 			{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; opacity: 0; transform: translateY(12px); animation: fadeUp 0.7s ease 0.55s forwards; }
    .btn 					{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.2s ease; }
    .btn--primary 			{ background: var(--accentCM); color: var(--paper); padding: 14px 28px; border-radius: 2px; letter-spacing: 0.01em; }
    .btn--primary:hover 	{ background: var(--accent); }
    .btn--ghost 			{ background: none; color: var(--ink-muted); border-bottom: 1px solid currentColor; padding-bottom: 2px; letter-spacing: 0.02em; }
    .btn--ghost:hover 		{ color: var(--ink); }
    .hero__scroll 			{ position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; animation: fadeUp 0.6s ease 1s forwards; }
    .hero__scroll span 		{ font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
    .hero__scroll-line 		{ width: 1px; height: 40px; background: linear-gradient(to bottom, var(--ink-muted), transparent); animation: scrollPulse 1.8s ease-in-out infinite; }
	
	@media (max-width: 3840px){ .hero__title {padding:0;} .containerWat{margin:400px 3vw 0 3vw;} }
	@media (max-width: 1921px){ .hero__title {} .containerWat{margin:80px 4vw 0 4vw; display:grid;grid-template-columns: repeat(3, 1fr);flex:1;}	}
	@media (max-width: 1281px){ .hero__title h2 {}.containerWat{margin:140px 4vw 0 4vw;} }
	@media (max-width: 1367px){ .hero__title h2 {}.containerWat{margin:240px 4vw 0 4vw;padding-bottom:25px;} }
	@media (max-width: 933px) { .hero__title {} }
	@media (max-width: 721px) { 
		.containerWat{align-content:center;display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin:40px 1.2vw 0 1.2vw;padding-bottom:25px;}  .containerWat div{ font-size:3.5vw; } .containerWat h3 {font-size:18px;}
		.hero__title {font-size:6vw;text-align:center;}
		.hero__title h2 {line-height:8vw;padding-top:0;text-align:center;} 		p.heroTag {line-height:20px;font-size:4.4vw;} .buttonCon{text-align:center;margin-top:10px;margin-bottom:0;} }
		
	.buttonField 		{text-align:center;padding:20px;}	
	button 				{padding:20px;border-radius:var(--radius);box-shadow: 0px 5px 12px -3px rgba(0, 0, 0, 0.5);cursor:pointer;font-size:clamp(1.4rem, 2vw, 1.4rem);font-weight:300;background:var(--accentCM);color:#fff;border:solid 1px var(--accent);}
	button:hover 		{transform:translateY(-4px);}
section.waaromIk h2	{text-align:center;} 
.buttonCon 			{/*display:grid;gap:20px;grid-template-columns: repeat(2, 1fr);*/padding-top:15px;}
.buttonCon button 	{margin-top:10px !important;}
button.primair 		{background:var(--accentCM);}
button.secundair	{background:var(--accentCMD);color:var(--paper);margin:auto;border:solid 1px var(--accent);}
.hero button 		{}
.buttonCon  span:nth-child(1) {text-align:right;}
#contact span:nth-child(2) {text-align:left;}
@media (max-width: 3840px)	{ #contact button {width:260px;} }
@media (max-width: 721px) 	{ #contact button {width:190px;} }
@media (max-width: 431px) 	{ button{font-size:3vw;padding:15px;}  #contact button {width:184px;} }


#wie 	{margin-top:25rem;color:white;}
@media (max-width: 441px)  { #wie {margin-top:5rem;}   }

.containerStory {background:rgba(255,255,255,0.5);padding:12px;width:clamp(350px, 100%,70vw);margin:15% auto 0 auto;;color:var(--accent);font-size:clamp(18px, 1.1vw, 20px);border-radius:10px;}
.jump			{margin-top:15px;}

    /* Contact */
    .contact { }
    .contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
    .contact__headline { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; /*letter-spacing: -0.02em;*/ margin-bottom: 20px; }
    .contact__headline em { font-style: italic; color: white; }
    .contact__body { font-size: 1rem; color: var(--paperDim); line-height: 1.75; margin-bottom: 36px; }
    .contact__links { display: flex; flex-direction: column; gap: 0; }
    .contact__link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: black; font-size: 0.9rem; font-weight: 400; padding: 14px 0; border-bottom: 0.5px solid rgba(26,25,22,0.1); transition: color 0.2s, padding-left 0.2s; }
    .contact__link:hover { color: var(--accent); padding-left: 6px; }
    .contact__link-label { font-size: 0.7rem; color: var(--paperDim); letter-spacing: 0.08em; text-transform: uppercase; min-width: 60px; }
    .contact__form { display: flex; flex-direction: column; gap: 16px; }
    .form-field { display: flex; flex-direction: column; gap: 6px; }
    .form-field label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paperDim);text-align:left }
    .form-field input, .form-field textarea { background: rgba(255,255,255,0.6); border: none;border-radius:5px; border-bottom: 1px solid rgba(26,25,22,0.2); padding: 10px; font-family: var(--sans); font-size: 0.95rem; font-weight: 300; color: var(--ink); outline: none; transition: border-color 0.2s; width: 100%; resize: none; }
    .form-field input:focus, .form-field textarea:focus { border-color: var(--accent); }
    .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); }
	
	.project .contact__headline 	{padding-top:90px;}
	.project .contact__body 		{color:var(--paperDim);}
	.project .contact__link-label	{color:var(--paperDim);}
	.project .form-field label		{color:var(--paperDim);}
	.project .contact__form			{padding-top:90px;}
	
	.projectLabel p 				{text-align:right;font-weight:700;}
	.projectContent p				{text-align:left;}
	
	.project__skills 	{display: flex;flex-wrap: wrap;gap: 6px;margin-top:20px;margin-bottom:50px;justify-content:center;}
	.skill-chip 		{font-size: 0.7rem; font-weight: 400;letter-spacing: 0.04em;color: var(--ink-muted); border: 0.5px solid rgba(26, 25, 22, 0.2);padding: 3px 9px;border-radius: 1px;background:rgba(255,255,255,0.9);}
	.cenCell 			{text-align:center;}
	.onderschrift 		{font-size: 0.7rem;}
	
    @media (max-width: 720px) { .contact__inner { grid-template-columns: 1fr; } }
	
	.container {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 clamp(24px, 5vw, 64px);
    }
			

/* Stijlen Waterkant */
	  .wk0 {fill: url(#radial-gradient);  }
	  .wk1 {fill: #046f7f;	  }
	  .wk2 {	fill: #2b929e;			  }
	  .wk3 {		fill: #d1dac5;	  }
	  .wk4 {  fill: #f2dfbc; }			  
			  
	.bootje0 {        fill: #fff;      }
      .bootje1 {        fill: #7b6547;      }
      .bootje2 {        fill: #81d4cc;      }
      .bootje3 {        fill: #936530;      }
      .bootje4 {        fill: #52675a;      }
      .bootje5 {        fill: #d49d50;      }
      .bootje6 {        fill: #dbd7b7;      }
      .bootje7 {        fill: #6c755a;      }
      .bootje8 {        fill: #f9f6e1;      }

@keyframes swim {

    0%{
        transform:translate(0px,0px) scaleX(1);
    }

    25%{
        transform:translate(80px,-6px) scaleX(1);
    }

    50%{
        transform:translate(160px,3px) scaleX(1);
    }

    50.1%{
        transform:translate(160px,3px) scaleX(-1);
    }

    75%{
        transform:translate(80px,-4px) scaleX(-1);
    }

    100%{
        transform:translate(0px,0px) scaleX(-1);
    }

}

@keyframes vaar {

    0%{
        transform:translate(0px,0px) scaleX(1);
    }

    25%{
        transform:translate(-200px,-6px) scaleX(1);
    }

    50%{
        transform:translate(-200px,3px) scaleX(1);
    }

    50.1%{
        transform:translate(-200px,3px) scaleX(-1);
    }

    75%{
        transform:translate(100px,-4px) scaleX(-1);
    }

    100%{
        transform:translate(0px,0px) scaleX(-1);
    }

}


@keyframes swimNemo {

    0%{
        transform:translate(0px,0px) scaleX(-1);
    }

    25%{
        transform:translate(-500px,-16px) scaleX(-1);
    }

    50%{
        transform:translate(500px,13px) scaleX(-1);
    }

    50.1%{
        transform:translate(260px,13px) scaleX(1);
    }

    75%{
        transform:translate(280px,-14px) scaleX(1);
    }

    100%{
        transform:translate(0px,0px) scaleX(1);
    }

}


/* Added */

.numberImpact 			{font-weight:900;font-size:clamp(2rem, 2vw, 4.4rem);float:left;margin-left:10px;display:inline-block;color:var(--ink);}
.impactPanel span img	{width:120px;float:left;}
.impactPanel p 			{text-align:left;padding-top:12px;clear:both;}

.impact div:hover img   {}
.impact div { width: 100%;    height: 100%;  transition: transform 0.5s var(--ease);  align-items: center;  justify-content: center;  position: relative;}




.sectiePanelProject {min-height:500px;}
.sectiePanel 		{max-width: 900px;margin: 0 auto;padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);color: var(--kleurPriDonker);border-radius:var(--radius);background:rgba(255,255,255,0.75);margin-top:25px;}
.sectieNoPad 		{margin: 0 50px;text-align:right;font-size: 0.8rem;}/* Speciaal voor terug link */
.sectiePanelBreed 	{margin: 0 50px;padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);color: var(--kleurPriDonker);border-radius:var(--radius);/*background:rgba(255,255,255,0.75);*/margin-top:25px;}
.sectiePanelNor 	{max-width: 1200px;margin: 0 auto;padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);color: var(--kleurPriDonker);border-radius:var(--radius);margin-top:25px;}
.metBG 				{background:rgba(255,255,255,0.75);}
.metBGP				{background:rgba(255,255,255,0.95);margin:90px;}
.sectiePanel, .sectiePanelNor h2 {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 20px;
  text-align: center;
}.sectiePanel h2 span 	{font-size:clamp(1.4rem, 2vw, 1.4rem);font-weight:300;display:block;}
.sectiePanel p {
   font-size:clamp(1.4rem, 2vw, 1.4rem);font-weight:300;
  line-height: 1.7;
  margin-bottom: 16px;
}

.altPanel 			{margin: 0 auto;color: var(--kleurPriDonker);margin-top:25px;}
.sectionImg img 	{width:100%;}



.overTxt 			{}

#over        				{ /*background: transparent; margin-top:70px;*/ z-index:900;position:relative;}
#portfolio   				{ background: var(--sectieBG); }
#weetjes     				{ background: var(--sectieBG); color: var(--kleurPriDonker); }
#contact     				{ color: var(--kleurPriDonker); border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);}
.footerPart					{background:var(--zeeKleur);text-align:center;font-size: clamp(1.6rem, 2vw, 2.4rem);margin-top:-5px;z-index:999;}
.project .footerPart 		{background:var(--accentCM);}
.footerPart	 .buttonCon 	{padding-bottom:50px;}
.endFoot 					{font-size:clamp(0.5rem, 1vw, 1.4rem);border-top:solid 1px var(--accent);}
.endFoot .kaartenRij div 	{background:transparent;}

.projectLook .kaartenRij 	{display: grid;  grid-template-columns: 1fr 2fr;  gap: 20px;  margin-top: 32px;}
.kaartenRijPro.gek			 	{display: grid;  grid-template-columns: 2fr 1fr;  gap: 20px;  margin-top: 32px;}

.kaartenRij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.kaartenRijPro 	{display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 40px;  margin-top: 32px;}
.kaartenRijPro1 {display: grid;  grid-template-columns: 1fr 2fr;  gap: 20px;  margin-top: 32px;}
.kaartenRij > div {
  background: rgba(255,255,255,0.85);
  color: var(--kleurPriDonker);
  border-radius: var(--radius);
  padding: 24px;text-align:center;
}
.kaartenRij h3 { font-size: 1.1rem; margin-bottom: 8px; }
.kaartenRij h4 { font-size: 1.1rem; margin-bottom: 8px; font-weight:300;}
.kaartenRij img 	{width:100%;}
.kaartenRijPro img 	{width:100%;}
#contact .buttonCon { justify-content: center; margin-top: 24px; }

/* 4 op een rijproberen */

.kaartenRij4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.kaartenRij4 > div {
  background: rgba(255,255,255,0.85);
  color: var(--kleurPriDonker);
  border-radius: var(--radius);
  padding: 24px;text-align:center;
}
.kaartenRij4 h3 	{ font-size: 1.1rem; margin-bottom: 8px; }
.kaartenRij4 h4 	{ font-size: 1.1rem; margin-bottom: 8px; font-weight:300;}
.kaartenRij4 img 	{width:100%;}





@media (max-width: 769px) {
	.sectiePanel 		{margin:32px 10px;}
	.sectiePanelBreed 	{margin:32px 10px;}
	.kaartenRij4		{grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));}
	
	.kaartenRij {grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));}
  
}

@media (max-width: 431px) {
  
  .sectiePanel			{margin:32px 10px;}
  
}
@media (max-width: 441px) {
	.sectiePanelNor 				{margin:25px 10px;}
  .sectiePanel 				{margin:32px 10px;}
  .sectiePanelBreed 		{margin:32px 10px;}
  .kaartenRij 				{grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));}
  .kaartenRij4				{grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));}
  .projectLook .kaartenRij 	{grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));}
  .projectLabel p			{text-align:left;}
 
}

      .anna0 {fill: #fc0;}
      .anna1 {fill: #d97949;}
      .anna2 {fill: #386327;}
      .anna3 {fill: #fff;}
      .anna4 {fill: #5c9444;}
      .anna5 {fill: #900;}
      .anna6 {fill: #84c36a;}
      .anna7 {fill: #f8edb9;}
      .anna8 {
        fill: #666;
      }

      .anna9 {
        fill: #333;
      }

      .anna10 {
        fill: #cc0;
      }

      .anna11 {
        fill: #dea85d;
      }

      .anna12 {
        fill: #ccc;
      }

      .anna13 {fill: #c30;  }
      .anna14 { fill: #7d5015;}
      .anna15 {fill: #00a6fb;}


body.vervolg.project 			{background:white;}
body.vervolg.project .content	{margin-top:0;}
figcaption {text-align: center;font-size: 0.7rem; font-weight: 400;letter-spacing: 0.04em;color: var(--ink-muted);}