@charset "utf-8";

/* Typography */

	html { 																font-size: 62.5%; /*for using REM units - default .1rem - .1rem = 1px */
																		scroll-padding-top: 2.24em;
																		scroll-behavior: smooth }

	body {																font-family: system-ui, sans-serif;
																		font-size: 1.8rem;
																		font-weight: 400;
																		line-height: 1.7;
																		color: #222 }

	@media screen and (min-width: 30rem) {								/* based on root before CSS (16px) */
		
			body {														font-size: 2rem }

	}

	@media screen and (min-height: 30rem) {								/* based on root before CSS (16px) */
		
			html {														scroll-padding-top: calc(16rem + 2.24em) /* anchor links fix */ }

	}

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */
		
			html {														scroll-padding-top: calc(18rem + 3.36em) /* anchor links fix */ }
		
			body {														font-size: 2.4rem }

	}

	/* Custom reset
		- https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e */

	*, *::before, *::after {											box-sizing:border-box }

	a {																	text-decoration:none;
																		color:inherit;
																		cursor:pointer }

	button {															background-color:transparent;
																		color:inherit;
																		border-width:0;
																		padding:0;
																		cursor:pointer }
	figure {															margin:0 }
	
	input::-moz-focus-inner {											border:0;
																		padding:0;
																		margin:0;
																		outline: none }

	ul, ol, dd {														margin:0;
																		padding:0;
																		list-style:none }

	h1, h2, h3, h4, h5, h6 {											margin:0;
																		font-size:inherit;
																		font-weight:inherit }

	p {																	margin:0 }

	cite {																font-style:normal }

	fieldset {															border-width:0;
																		padding:0;
																		margin:0 }

	*:focus {														    outline: none }

/* Prevent unwanted focus on mobile devices
================================================================ */

	.nofocus {															-webkit-tap-highlight-color: transparent;
																		-webkit-touch-callout: none;
																		-webkit-user-select: none;
																		-khtml-user-select: none;
																		-moz-user-select: none;
																		-ms-user-select: none;
																		user-select: none }

	.nofocus:focus {													outline: none !important }

/* Global
================================================================ */

	html {																height: 100% }

	body {																background: #fff;
																		height: 100%; /* 120% for testing */
																		max-height: 100% }

	strong {															font-weight: bold }

	.serif {															font-family: Charter,
																			'Bitstream Charter',
																			'Sitka Text',
																			Cambria,
																			serif;
																		line-height: 1.2;
																		font-style: italic;
																		color: #133f53 }

	a {																	color: #0f3d8f;
																		text-decoration: underline }

	a:hover {															color: #0056b3 }

	span.blockspam {													display: none } /* used for email */
	

/* Logo
================================================================ */

	#logo {																display: block;
																		width: 12rem;
																		height: 12rem;
																		line-height: 0; /* prevent spacing */
																		z-index: 2000; /* allways on top */											
																		position: absolute;
																		top: 2rem }

	#logo a {															display: block;
																		position: relative }

	#logo img {															width: 12rem;
																		height: 12rem }

	#logo img:first-of-type {											position: absolute;
																		width: 7rem;
																		height: 7rem;
																		top: 1.5rem;
																		left: 2.5rem;
																		right: 2.5rem }

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */
		
		#logo {															height: 26rem; /* 14.2 + 11.8 */
																		top: 6.2rem }
		
		.home #logo {													top: 13rem;
																		transition: all .5s ease-out }
		
		.scrolled #logo,
		.reload #logo {													top: 6.2rem }
		
		.scrolled.menu-open #logo {										top: 6.2rem }
		
		#logo img:first-of-type {										position: relative;
																		width: 11.8rem;
																		height: 11.8rem;
																		top: 0;
																		left: .1rem;
																		right: .1rem }
		
	}

/* Header
================================================================ */

	#main-header {														width: 100%;
																		background: #b9dade;
																		z-index: 1000 }

	#main-header .inner {												display: flex; /* default: row */
																		width: 90%;
																		max-width: 96rem;
																		height: 16rem;
																		margin: 0 auto }

	/* Header sizing & positioning
	 --------------------------------- */	

	@media screen and (min-height: 30rem) {								/* based on root before CSS (16px) */
		
		#main-header {													position: fixed;
																		top: 0 }
		
	}

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */
		
		#main-header {													z-index: inherit }
		
		#main-header .inner {											height: 18rem }

		}

	/* Navigation styling
	 --------------------------------- */

	#main-header nav {													display: flex;
																		flex-direction: column;
																		width: 100% }

	#main-header nav a {												color: #133f53;
																		text-decoration: none }

	#main-header nav a:hover {											color: #0e0739 }

	#main-header .toggler {												display: flex;
																		justify-content: flex-end;
																		align-items: center;
																		height: 16rem;
																		min-height: 16rem }

	#main-header nav .toggler a {										display: flex;
																		padding: .8em 0 .8em .8em;
																		justify-content: flex-end;
																		align-items: center;
																		line-height: 1;
																		text-transform: uppercase }

	#main-header nav svg {												width: auto;
																		height: 1em;
																		margin: 0 0 0 .5em;
																		fill: #133f53 }

	#main-header nav a:hover svg {										fill: #0e0739 }

	#main-header nav svg:nth-of-type(2) {								display: none }

	.menu-open #main-header nav svg:first-of-type {						display: none }

	.menu-open #main-header nav svg:nth-of-type(2) {					display: inherit }

	@media screen and (min-width: 30rem) {								/* based on root before CSS (16px) */

		#main-header nav .toggler a {									line-height: 1 }

	}

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */

		#main-header .toggler {											height: 18rem;
																		min-height: 18rem }

	}

	/* Navigation options styling
	 --------------------------------- */

	ul#menu {															display: none;
																		margin: 4.4rem 0 6.4rem }
																		/* ( margin 64 - margin-bottom logo 20 ) */


	ul#menu li a {														display: block;
																		font-weight: 600;
																		border-bottom: .2rem dotted #133f53;
																		padding: .4em 0 .8em;
																		margin: 0 0 .4em }

	ul#menu li:last-of-type a {											border-bottom: none }

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */

		ul#menu {														margin: 3.36em 0 4.48em;
																		padding: 0 0 0 24rem }

	}

	/* Navigation toggle actions
	 --------------------------------- */

	.menu-open #main-header .inner {									height: inherit	}

	.menu-open ul#menu {												display: block }

	.menu-open #payoff { 												display: none }

	@media screen and (min-height: 30rem) {								/* based on root before CSS (16px) */
		
		.menu-open #main-header {										height: 100vh }
		
		.menu-open #payoff { 											opacity: 0 }
		
	}

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */

		.menu-open #payoff { 											display: inherit;
																		opacity: 1 }
		
		.menu-open #payoff p { 											position: relative;
																		opacity: 0;
																		z-index: -100 }

	}

	/* Header payoff
	 --------------------------------- */

	#payoff {															display: flex;
																		align-items: center;
																		height: 34rem;
																		padding: 1.67em 0 0;
																		background: #b9dade;
																		transition: height .5s ease-out }

	#payoff p { 														width: 90%;
																		max-width: 96rem;
																		margin: 0 auto;
																		font-size: 1.675em;
																		opacity: 1;
																		transition: opacity 0.3s ease-out, transform 1.25s ease }

	@media screen and (min-height: 30rem) {								/* based on root before CSS (16px) */
		
		#payoff {														margin: 12rem 0 0 }
		
		.scrolled #payoff {												height: 12rem }
		
		.scrolled #payoff p {											opacity: 0;
																		transform: translateY(-2.3em);
																		pointer-events: none }
		
		body > header:first-of-type + .spacer {							display: block;
																		height: 16rem } /* spacer on other then home */
		
		@media screen and (min-width: 60rem) {							/* based on root before CSS (16px) */
		
			#payoff {													margin: 18rem 0 0;
																		padding: 0 }
			
			.scrolled #payoff {											height: 18rem }
			
			#payoff p { 												width: 90%;
																		max-width: 96rem;
																		margin: 0 auto;
																		padding: 0 0 0 24rem }
			
			body > header:first-of-type + .spacer {						height: 18rem }

		}
		
	}

/* Main
================================================================ */

	main {																width: 90%;
																		max-width: 96rem;
																		margin: 3.36em auto 4.48em;
																		padding: 0 0 4.48em }

	/* Headers
	 --------------------------------- */

	h1 {																margin: 0 0 .67em;
																		font-size: 2.4em;
																		font-weight: 800;
																		line-height: 1.2;
																		color: #133f53 }

	h2 {																margin: 1.5em 0 .75em;
																		font-size: 1.8em;
																		font-weight: 700;
																		line-height: 1.2;
																		color: #133f53 }

	h3 {																margin: 1.66em 0 .83em;
																		font-size: 1.5em;
																		font-weight: 700;
																		line-height: 1.2;
																		color: #133f53 }

	h4 {																margin: 1.12em 0;
																		font-size: 1.2em;
																		font-weight: 600 }

	/* Text formatting
	 --------------------------------- */

	blockquote {														font-family: Charter,
																			'Bitstream Charter',
																			'Sitka Text',
																			Cambria,
																			serif;
																		line-height: 1.2;
																		font-style: italic;
																		font-size: 1.675em;
																		font-weight: 500;
																		margin: 1.68em .8em } /* 1.12 + .56em */

	blockquote mark::before {											content: '\201C' }
	blockquote mark::after {											content: '\201D' }

	mark {																margin: 0 -0.4em;
																		padding: 0.1em 0.4em;
																		background: transparent;
																		background-image: linear-gradient(
																			to right,
																			rgba(185, 218, 222, 0.1),
																			rgba(185, 218, 222, 0.5) 5%,
																			rgba(185, 218, 222, 0.3)
																		);
																		-webkit-box-decoration-break: clone;
																		box-decoration-break: clone;
																		line-height: 1.5;
																		color: #133f53 /* override */ }

	main p {															margin: 1.12em 0 }

	main ul,
	main ol {															margin: 1.12em 0;
																		padding: 0 1.12em }

	main ul {															list-style: square }

	main ol {															list-style: decimal }

	main ul li,
	main ol li {														margin: 0 0 0 .56em }

	code {																color: #133f53;
																		background: #f5f9fa;
																		font-size: .875em;
																		white-space: pre-wrap;
																		word-wrap: break-word }

	/* Visuals
	 --------------------------------- */

	figure {															display: block;
																		width: 100%;
																		margin: 2.2em auto }

	figure img {														width: 100%;
																		height: auto;
																		border-radius: .25em }

	figcaption {														font-size: .65em;
																		text-align: right;
																		font-style: italic;
																		color: #133f53 }

	figcaption a:first-of-type::before {								content: "Foto: " }

	figcaption a {														color: #133f53;
																		text-decoration: none }

	figcaption a:hover {												color: #0056b3 }

	/* Buttons
	 --------------------------------- */

	.button a,
	form input[type=submit] {											display: inline-block;
																		padding: .4em 1.2em;
																		border: none;
																		border-radius: .25em;
																		font-weight: 500;
																		color: #fff;
																		text-decoration: none;
																		background-color: #0f3d8f;
																		margin: 1.68em 0 } /* 1.12 + .56em */

	.button a:hover,
	form input[type=submit]:hover {										background-color: #0056b3;
																		cursor: pointer }

	@media screen and (min-width: 30rem) {								/* based on root before CSS (16px) */
		
			.button a {													font-size: .875em }

	}

	@media screen and (min-height: 30rem) and (min-width: 60rem) {		/* based on root before CSS (16px) */
		
			main {														margin: 4.48em auto;
																		padding: 0 0 4.48em 24rem }

	}

	/* Form */

	form {																display: block;
																		width: 100%;
																		padding: 1.12em;
																		margin: 2.24em 0;
																		background-color: #f5f9fa;
																		border: .112em dotted #b9dade;
																		border-radius: .25em }

	form h2 {															font-size: 1.2em;
																		margin: 0 }

	main form p {														margin: 1.12em 0 0 }

	form p label {														font-size: .875em;
																		font-weight: 500;
																		color: #133f53;
																		display: block;
																		padding: 0 0 .5em }

	form p input {														padding: .25em;
																		width: 95% }

	form p textarea {													padding: .25em;
																		width: 95%;
																		resize: vertical }

	form input[type=submit] {											margin: 0 0 .56em auto;
																		width: auto;
																		font-size: .875em }

	@media screen and (min-width: 30rem) {								/* based on root before CSS (16px) */
		
		form p textarea {												width: 100% }
		
		main form p:not(.opmerkingen) {									display: flex;
																		align-items: center }
		
		form p:not(.opmerkingen) label {								width: 30%;
																		padding: 0 }
		
		form p.opmerkingen {											border-top: .1rem solid #b9dade;
																		margin: 2.24em 0 0;
																		padding: 1.12em 0 0 }

	}

	@media screen and (min-width: 60rem) {								/* based on root before CSS (16px) */
		
		form p input {													padding: .25em;
																		width: 85% }

	}