@font-face {
	font-family: 'HaasRecastOpen';
	font-style: normal;
	font-weight: normal;
	src: url('../_incf/HaasRecastOpen_Trial_Rg.ttf') format('truetype');
}
:root {
	--donkerbruin: #7E4B23;
	--yassergroen: #AFAC14; /* bg yasser */
	--lichtgroen: #C4D6B5;
	--heldergroen: #00D164;
	--oranje: #FF6400;
	--roze: #FFB3E6; /* border */
	--blauw: #3182FF; /* text in white introtext frame */
	--geel: #EFFF82;
	--fontsize1: 0.88vw;
	--fontsize2: 1.61vw;
	--fontsize3: 2.63vw;
	--fontsize4: 1.46vw;
	--lineheight1: 1.42;
	--lineheight2: 1.14;
	--lineheight3: 1;
	--lineheight4: 1.25;
	--borderradius: 1vw;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
	border: 0; margin: 0; padding: 0;
	font-family: 'HaasRecastOpen', courier;
	font-size: var(--fontsize2);
	line-height: var(--lineheight2);
	width: 100vw;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	background-color: pink;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
hr {
	border: 0;
	background-color: var(--donkerbruin);
	height: 1px;
}
.mobonly {
	display: none;
}
#site {
/*	background-color: lime; */
	width: 100%;
	min-height: 160vh;
}
#hamburger, #closemenu {
	display: none;
}
.header {
	position: fixed;
	display: flex;
	left: 0;
	width: 100vw;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	padding-top: 1.25vw;
	padding-bottom: 1.25vw;
	z-index: 1000;
}
.subheader {
	font-size: var(--fontsize3);
	margin-bottom: 1em;
}	
div.logoholder {
	width: 47.5vw;
/*	background-color: red; */
}
#logo {
	width: 36vw;
	height: 8.4vw;
}
div.navmenu {
	width: 47.5vw;
/*	background-color: orange; */
}
div.navmenu div {
	height: inherit;
}
div.navmenu div a {
	position: relative;
	background-image: none;
	display: inline-block;
	height: inherit;
}
div.navmenu div a img {
	position: absolute;
	top: 1.8vw;
	right: -1vw;
	width: 5vw;
	height: 6.4vw;
}
div.navmenu div.submenu {
	position: absolute; left: 0; top: 4em; display: inline-block; z-index: 10000;
	line-height: 1.3em;
	min-width: 100%;
}
div.navmenu div.submenu a {
	display: inline-block;
	height: 2em;
	min-width: 100%;
	overflow: show;
	text-transform: none;
	border-bottom: 1px solid blue;
}
div.pagecontent {
	padding-top: 10.9vw;
	padding-top: 11.3vw;
	position: relative;
	overflow-x: hidden;
}
div.pagecontent img.bigimage {
	width: 100%;
	margin-bottom: 3.2vw;
	border-radius: var(--borderradius);
	max-height: 75vh;
	object-fit: cover;
}
div.pagecontent div.body {
	width: 100%;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	display: flex;
	justify-content: space-between;
}
div.pagecontent div.body div.col {
	width: 42.8vw;
	width: 44.1vw;
}
div.pagecontent div.body div.col p:first-child {
	margin-top: 0;
}
div.introframe {
	padding: 20px;
	background-color: white;
	color: var(--blauw);
	border: 2px solid var(--blauw);
	border-radius: var(--borderradius);
	position: absolute;
	top: calc(10.99vw + 3vw);
	left: 3vw;
	width: calc(50% - 3vw - 3vw);
	font-size: var(--fontsize3);
}
div.introframe.relative {
	position: relative;
	top: unset;
	margin-bottom: 2rem;
	left: 2.5vw;
	left: 0;
	width: 100%;
}
div.navmenu {
	display: flex;
	font-size: var(--fontsize4);
	text-transform: uppercase;
	justify-content: space-between;
}
div.navmenu div {
	display: inline-block;
	height: 8.4vw;
	line-height: 8.4vw;
}
div.navmenu div a {
	text-decoration: none;
	color: var(--blauw);
}
div.navmenu div a.active {
	color: var(--oranje);
}
div.navmenu div a {
	padding-right: 10px;
	padding-top: calc(0.5 * var(--fontsize4));
	padding-bottom: calc(0.5 * var(--fontsize4));
}
div.videoholder {
	margin-bottom: 4rem;
}	
div.imageseries {
	width: 44.1vw;
	height: 33vw;
	position: relative;
	margin-bottom: 4rem;
}
div.imageseries span.prev {
	position: absolute;
	display: flex;
	left: 0;
	top: 0;
	padding-left: 10px;
	width: 40px;
	height: 20px;
	cursor: pointer;
	height: 33vw;
	align-items: center;
}
div.imageseries span.next {
	position: absolute;
	display: flex;
	right: 0;
	top: 0;
	padding-right: 10px;
	width: 40px;
	height: 20px;
	cursor: pointer;
	height: 33vw;
	align-items: center;
}
div.imageseries div.mediaitem {
    display: none;
}
div.imageseries div.mediaitem img {
	height: 33vw;
	max-width: 44.1vw;
	width: auto;
}
div.imageseries > div.mediaitem:first-of-type {
    display: block;
}
div.navmenu div a:hover {
	animation: linear;
	/* infinite; */
	animation-name: moverightleft;
	animation-duration: 1s;
}
@keyframes moverightleft {
  0% {
    left: 0;
  }
  50% {
    left: 10%;
  }
  100% {
    left: 0;    
  }
}
.rounded {
	border-radius: var(--borderradius);
}
div.rounded.itemintroframe {
	padding: 1vw;
	order: 1;
}
div.cols2 {
	columns: 2;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
}
div.stars {
	height: 35vw;
	position: relative;
}

div.colseries div.item {
	margin-bottom: 2rem;
}
div.colseries div.item div.coli {
	order: 1;
	display: flex;
	flex-direction: column;
}
div.colseries div.item div.bodytext {
	margin-top: 1em;
	order: 2;
}
div.colseries div.item div.media {
	order: 2;
}
div.col img {
	width: 100%;
	height: auto;
	border-radius: var(--borderradius);
}
div.col p.logos img {
	max-height: 8vw;
	width: auto;
	border-radius: 0;
	padding-left: 10px;
	padding-right: 10px;
}
div.caption {
	font-size: var(--fontsize1);
	color: var(--oranje);
	margin-top: 0.5em;
	text-align: right;
}
div.footerholder {
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	margin-top: 5rem;
}	
div.footer {
	display: flex;
	border-top: 1px solid var(--donkerbruin);
	padding-top: 0.5em;
	padding-bottom: 2rem;
}
div.footer > div {
	flex: 1;
}
div.footer div.itemlogo {
	float: right; width: 4vw;
}
div.footer img {
	width: 4vw;
	height: 4vw;
}
div.smalldoemeed {
	position: absolute;
	position: fixed;
	z-index: 1001;
/*	transform: rotate(0.5turn); */
	transition: 0.3s ease;
}
div.smalldoemeed svg:hover {
	border: 2px solid lime;
}
div.smalldoemeem {
	position: absolute;
	left: 25%;
	top: 0;
	/*!important;*/
}
div.bigdd {
	position: absolute;
	width: 29vw;
	height: 29vw;
}
div.bigdd img {
	width: inherit;
	height: inherit;
}
div.bigstard {
	position: absolute;
	width: 29vw;
	height: 29vw;
}
div.bigstard img {
	width: inherit;
	height: inherit;
}
form > div {
	border: 2px solid var(--blauw);
	border-radius: 0.5em;
	padding: 1vw;
}
form p.formheader {
	font-size: var(--fontsize3);
	color: var(--donkerbruin);
}
form label {
	font-size: var(--fontsize2);
	color: var(--donkerbruin);
}
form input[type="text"],
form input[type="email"],
form textarea {
	font-family: HaasRecastOpen;
	width: 100%;
	border: 2px solid var(--oranje);
	background-color: white;
	border-radius: 0.7em;
	padding: 1em;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid var(--oranje);
  border-radius: 0.5em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
  background-color: var(--oranje);;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}
p.checkboxholder {
	position: relative;
}
p.checkboxholder label {
	position: absolute;
	left: 2em;
	top: 0;
}
p.buttonholder {
	text-align: right;
}
.form-control + .form-control {
	margin-top: 1em;
}
select {
	appearance: none;
	background-color: transparent;
	border: none;
	padding: 0 0 0 0;
	margin: 0;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: inherit;
	z-index: 1;
	&::-ms-expand {
		display: none;
	}
	outline: none;
}
.select {
	display: grid;
	grid-template-areas: "select";
	align-items: center;
	position: relative;
	select,
	&::after {
		grid-area: select;
	}
	width: 100%;
	border: 2px solid var(--oranje);
	border-radius: 0.7em;
	padding: 1em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	cursor: pointer;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	font-family: HaasRecastOpen;
}
.select::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
	width: 1.5em;
	height: 1em;
    background-color: var(--oranje);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
option {
	width: 100%;
	font-family: HaasRecastOpen;
}
input[type="range"] {
	width: 300px;
	margin: 0;
}
datalist {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	writing-mode: sideways-lr;
	height: 200px;
	width: 200px;
	color: var(--donkerbruin);
}
datalist option {
	background-color: lime;
}
.range-labels {
  display: flex;
  justify-content: space-between;
  width: 300px; /* same width as slider */
}
button {
	background-color: var(--blauw);
	color: var(--geel);
	border: 2px solid var(--blauw);
	border-radius: 0.7em;
	text-transform: uppercase;
	cursor: pointer;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
div.faqq {
	font-weight: bold;
	margin-bottom: -0.75em;
}
div.faqq p:first-child {
	margin-bottom: 0;
}

.ghost > *{
    animation: fly 50s linear infinite;
    top: 0;
	left: 0;
	position: fixed;
	z-index: 999;
	pointer-events: none;
}
@keyframes fly {
	0% {
		transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
	}
	12.5% {
		transform: translate(120vw,-120%) rotateZ(20deg);
	}
	25% {
		transform: translate(-200%,50vh) scale(1.75) rotateZ(-20deg);
	}
	37.5% {
		transform: translate(-200%,-120%) rotateZ(-40deg);opacity: .5;
	}
	50% {
		transform: translate(100vw,50vh) rotateZ(0deg);
	}
	62.5% {
		transform: translate(20vw,100vh) rotateZ(20deg);
	}
	75% {
		transform: translate(200%,100vh) rotateZ(20deg);opacity: .25;
	}
	87.5% {
		transform: translate(50vw,-200%) scale(1.75) rotateZ(20deg);
	}
	100% {
		transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
	}
}
    .fixed-image {
        position: fixed;
/*        transition: transform 0.5s ease; */
    }

    .fixed-image.scrolling {
        transform: translateY(50px);
		animation: shake 0.15s infinite;
    }
@keyframes shake {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-2px, 1px) rotate(-1deg); }
    50%  { transform: translate(2px, -1px) rotate(1deg); }
    75%  { transform: translate(-1px, -2px) rotate(-1deg); }
    100% { transform: translate(1px, 2px) rotate(1deg); }
}
@media only screen and (max-width: 768px) {
	:root {
		--fontsize1: 2.5vw; /* onderschift fotos */
		--fontsize2: 4vw; /* text */
		--fontsize3: 5.1vw; /* kopjes */
		--fontsize4: 6.7vw; /* menu */
		--borderradius: 6vw;
	}
	body {
		padding-left: 4vw;
		padding-right: 4vw;
	}
	.mobonly {
		display: block;
	}
	#logo {
		width: 54vw;
		height: 12.6vw;
	}
	#hamburger, #closemenu {
		position: fixed;
		display: inline-block;
		right: 2.5vw;
		width: 10vw;
		height: 8.4vw;
		top: 3vw;
		top: 6vw;
		z-index: 1000;
		cursor: pointer;
	}
	#closemenu {
		display: none;
		width: 8vw;
		height: 6vw;
	}
	#closemenu img {
		width: inherit;
		height: inherit;
	}
	div.logoholder {
		position: absolute;
		left: 4vw;
		top: 2.5vw;
		top: 4vw;
		z-index: 1000;
	}
	div.navmenu {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		padding-top: 25vw;
		background-color: var(--geel);
		width: 100vw;
		height: 100vh;
		text-transform: none;
	}
	div.navmenu div {
		display: block;
		text-align: center;
		background-color: var(--geel);
		font-size: var(--fontsize4);
	}
	div.navmenu div a img {
		display: none;
	}
	div.pagecontent {
		padding-top: 19vw;
/*		background-color: lime; */
	}
	div.pagecontent img.bigimage {
		max-height: 50vh;
	}
	div.pagecontent div.body {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}
	div.pagecontent div.body div.col {
		width: 100%;
	}
	div.pagecontent div.body div.coli {
		padding-left: 2.5vw;
		padding-right: 2.5vw;
	}
	div.rounded.frame {
		padding: 4vw;
	}
	div.introframe {
		position: static;
		width: calc(100% - 5vw);
		margin-left: 2.5vw;
		margin-right: 2.5vw;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	div.rounded.itemintroframe {
		padding: 4vw;
	}
	div.introframe.relative {
		width: calc(100% - 10vw);
	}
	div.cols2 {
		columns: 1;
		position: relative;
	}
	div.colseries div.item {
		display: flex;
		flex-direction: column;
	}
	div.colseries div.item div.col {
		margin-bottom: 1em;
	}
	div.colseries div.item div.coli {
		order: 2;
	}
	div.colseries div.item div.media {
		order: 1;
	}

	form > div {
		border: 0;
	}
	form label {
		display: inline-block;
		margin-bottom: 0.5em;
	}
	p.buttonholder {
		padding-top: 1rem;
		text-align: center;
	}
	button {
		font-size: var(--fontsize3);
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	div.footer {
		display: block;
		padding-top: 5vw;
		margin-top: 8rem;
	}
	div.footer div.item {
		margin-bottom: 2rem;
		margin-bottom: 2em;
	}
	div.footer div.itemlogo {
		width: 15vw;
	}
	div.footer img {
		width: 15vw;
		height: 15vw;
	}
	div.smalldoemeed {
		display: none;
	}
	div.smalldoemeem {
		display: block;
		position: absolute;
	}
	div.smalldoemeem img {
		width: 50vw;
		height: 50vw;
	}
	div.stars {
		height: 70vw;
	}
	div.bigdd {
/*		display: none; */
	}
	div.stars div.bigdd {
		width: 65vw;
		height: 65vw;
		display: block;
	}
	div.col p.logos img {
		height: 60px;
		width: auto;
		max-width: 90px;
	}
	div.imageseries {
		width: 92vw;
		height: 69vw;
	}
	div.imageseries div.mediaitem img {
		height: 69vw;
		max-width: 92vw;
		width: auto;
	}
	div.imageseries span.prev {
		height: 69vw;
	}
	div.imageseries span.next {
		height: 69vw;
	}
	div.navmenu div {
		height: auto;
	}
	div.navmenu div a {
		padding-top: 0;
		padding-bottom: 0.5em;
	}
	div.navmenu div.submenu {
		position: static;
		padding-bottom: 0.5em;
	}
	div.navmenu div.submenu a {
		border-bottom: none;
		font-size: var(--fontsize2);
		height: 1em;
		line-height: 1;
	}
}
@media only screen and (min-width: 1921px) {
	:root {
		--fontsize1: 16px; /* onderschift fotos */
		--fontsize2: 31px; /* text */
		--fontsize3: 50px; /* kopjes */
		--fontsize4: 28px; /* menu */
		--borderradius: 19px;
	}
	#site {
		width: 1824px;
		margin-left: calc(0.5 * (100vw - 1920px));
		margin-right: calc(0.5 * (100vw - 1920px));
	}
	div.logoholder {
		width: 912px;
	}
	#logo {
		width: 691px;
		height: 161px;
	}
	.header {
		padding-left: calc(0.5 * (100vw - 1920px));
		padding-right: calc(0.5 * (100vw - 1920px));
		padding-top: 24px;
		padding-bottom: 24px;
	}
	div.navmenu {
		width: 912px;
	}
	div.navmenu div {
		height: 161px;
		line-height: 161px;
	}
	div.navmenu div a img {
		top: 34px;
		right: -19px;
		width: 96px;
		height: 122px;
	}
	div.bigdd {
		width: 556px;
		height: 556px;
	}
	div.pagecontent div.body {
		padding-left: 48px;
		padding-right: 48px;
	}
	div.pagecontent div.body div.col {
		width: 846px;
	}
	div.footerholder {
		padding-left: 48px;
		padding-right: 48px;
	}
	div.imageseries {
		width: 846px;
		height: 633px;
	}
	div.imageseries div.mediaitem img {
		height: 633px;
		max-width: 846px;
		width: auto;
	}
	div.imageseries span.prev {
		height: 633px;
	}
	div.imageseries span.next {
		height: 633px;
	}
}