@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Van mezelf. Opm.: enkel pointer behouden. */

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

/*
	Page
*/

:root {
	--primary-color: #0B9AA6; /* #009AA6, Turquoise van Aurelia: #0086b3 */
	--secondary-color: #C94051; /* Of #C84051, #D32D43 */
	--black: #3f3e3e; /* #131313; Titels */
	--dark-grey: #777; /* Tekst */
	--test: #808080;
	--grey: #b3b4b4;
	--white: white;
	--primary-see-through: rgba(0, 154, 166, 0.3);
	--footer-border: #DEDEDE;
	--box-shadow: #ebebeb;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;

	min-height: 100vh;
	display: flex;
	flex-direction: column;
		
	background-color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 100;
	color: var(--dark-grey);
}

/*
	Header
*/

header {	
	margin-bottom: 1rem;
	position: relative;
}

header nav#wideNav {
	/* height: 7rem; */
	/* height: max-content; */
	/* height: min-content; */
	/* height: fit-content; */
	/* margin-bottom: 1.6rem; */

	background-color: var(--primary-color);	

	display: flex;
	justify-content: space-between;
	/* align-items: flex-end; */
	align-items: flex-end;
}

header nav#wideNav > a { /* Logo-link */
	height: 7rem;
}

header nav#wideNav img#company-logo {
	height: calc(7rem + 1px);
	overflow: visible;
}

header nav img#home-icon {
	position: absolute;
	top: 0.5rem;
	left: 9rem;
}

header nav#wideNav > ul {
	margin-bottom: 1rem;

	display: flex;
	flex-wrap: wrap;
	align-items: center;

	color: var(--white);
}

header nav#wideNav > ul > li {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	position: relative;
}

header nav#wideNav > ul > li:not(:last-child)::after {
	content: '•';
	font-size: 1.2rem;
	position: absolute;
	top: -0.2rem;
	transform: translate(0.84rem);
}

header #smallNav {
	background-color: var(--primary-color);
	/* padding-top: 0.1rem; */
	/* padding-bottom: 0.1rem; */
}

header #smallNav ul {
	/* margin-bottom: 1rem; */

	display: flex;
	flex-direction: column;
	align-items: center;

	color: var(--white);
}

header #smallNav ul > li {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
}

#smallNav {
	display: none;
}

#hamburger-checkbox {
	display: none;
}

#hamburger-label {
	position: absolute;
	top: 4.6rem;
	right: 1rem;
}

#hamburger-label #hamburger-icon,
#hamburger-label #close-icon {
	width: 1.4rem;
}

label#hamburger-label #close-icon {
	display: none;
}

#hamburger-checkbox:checked ~ label#hamburger-label #hamburger-icon {
	display: none;
}

#hamburger-checkbox:checked ~ label#hamburger-label #close-icon {
	display: block;
}

#hamburger-checkbox:checked ~ nav {
	display: block;
}

@media screen and (max-width: 780px) {
	label#hamburger-label {
		display: block;
	}

	header #wideNav > ul {
		display: none !important; /* Waarom? */
	}
}

@media screen and (min-width: 780px) { /* dus boven deze breedte — GROOT */
	label#hamburger-label {
		display: none;
	}

	header #smallNav {
		display: none !important;
	}
}

/* Menu-item 'Contact' */
header nav#wideNav > ul > li:last-child { 
	background-color: var(--white);
	color: var(--secondary-color);
	border-radius: 30%/60%;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	padding-left: 0.6rem;
	padding-right: 0.7rem;
}

/*
	Main content
*/

main {
	flex-grow: 1; /* In de hoogte! */
	flex-shrink: 1;

	width: 100%;
	max-width: 960px;

	align-self: center;

	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 1rem;

	line-height: 1.4;
}

#page-title-container {
	display: flex; 
	flex-grow: 1; 
	justify-content: center; 
	align-items: center;
	margin-top: 1.6rem;
}

#page-title {
	text-align: center;
	color: var(--black);
}

section {
	margin-bottom: 1rem;
}

section.banner {
	text-align: center;
}

article {
	margin-bottom: 1.8rem;
}

/*
	Cards
*/

ul.cards,
ul.smallcards {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;

	margin-bottom: 1.8rem;
}

.has-border {
	box-shadow: 0 0.2rem 0.5rem 0 var(--box-shadow);
	border-radius: 2.6rem;
}

ul.cards > li figure {
	max-height: 13.75rem;
	overflow: hidden;
	border-top-left-radius: 2.6rem;
	border-top-right-radius: 2.6rem;
	position: relative;
}

ul.cards > li figure > img {
	width: 100%;
}

ul.cards > li figure > figcaption {
	position: absolute;
	bottom: 0;
	background-color: var(--primary-see-through);
	width: 100%;
}

ul.cards > li figure > figcaption > h3 {
	color: white;
	padding: .75rem;
	font-size: 1.25rem;
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	ul.cards {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 1rem;
		justify-content: center;
	}

	ul.cards > li {
		width: calc((100% - 1rem) / 2);
	}
}

@media screen and (min-width: 640px) {
	ul.smallcards {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 1rem;
		justify-content: center;
	}

	ul.smallcards > li {
		width: calc((100% - 2rem) / 3);
	}
}

.text-block {
	padding-top: 1.4em;
	/* padding-bottom: 0.6em; */
	padding-bottom: 1.4em;
	padding-left: 1.4em;
	padding-right: 1.4em;
}

/*
	Blockquotes
*/

blockquote {
	position: relative;

	padding-top: 0.5rem;
	padding-right: 0.5rem;
	padding-left: 2rem;
	padding-right: 1rem;

	text-indent: 1.6rem;
	color: var(--primary-color);
}

blockquote:before {
	position: absolute;
	top: -1rem;
	left: -0.2rem;

	color: var(--primary-color);
	content: "\201c";
	font-size: 4rem;
	
	margin-right: 0.25rem;
	margin-left: -1rem;
}
	
blockquote cite {
	font-style: italic;
}

/*
	Footer
*/

footer {
	background-color: var(--secondary-color);
	color: var(--white);
	/* padding-top: 1rem; */
	/* padding-bottom: 1rem; */
	/* padding-left: 3rem; */
	/* padding-right: 3rem; */

	display: flex;
	flex-direction: row;	
	/* justify-content:center; */ /* flex-end; */
	justify-content: space-around;
	flex-wrap: wrap;
	/* align-items: center; */

	font-size: 0.9rem;
	line-height: 1.2;
}

/*
footer > *:first-child {
	margin-right: auto;
}
*/

footer > * {
	padding-right: 1.4rem;
	width: 12rem;
	height: 6.4rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

footer > *:last-child {
	padding-right: 0;
	/* align-self: flex-end; */
}

footer img#company-logo {
	height: 4rem;
	/* margin-left: 1rem; */
}

footer .center {
	text-align: center;
}

footer > nav {
	display: flex; flex-direction: column;
}

footer > nav > ul {
	flex-grow: 1; flex-shrink: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
}

body ul.social-media,
footer ul.social-media {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	
	display: flex;
	justify-content: center;
}

body ul.social-media > li,
footer ul.social-media > li {
	padding-left: 0.3rem;
	padding-right: 0.3rem;
}

body ul.social-media img,
footer ul.social-media img {
	height: 1.4rem;
}

/*
	Tekst-elementen
*/

h1, h2, h3 {
	/* font-family: 'Lato', sans-serif; */
	font-family: 'Montserrat', sans-serif;
	/* font-family: 'Josefin Slab', serif; */
	/* color: var(--black); */
}

h1 {
	font-size: 2rem;
	color: var(--black);
	text-align: center;

	/* letter-spacing: 0.8rem; */
}

h2 {
	/* color: var(--primary-color); */
	color: var(--secondary-color);
	font-size: 1.2rem;
	font-weight: 400;
	margin-bottom: 1rem;
}

h3 {
	color: var(--black);
	font-size: 1.2rem;
	/* font-weight: 400; */

	/* margin-top: 0; */
	margin-bottom: 0.8rem;
}

p {
	margin-bottom: 1rem;
	font-size: 1rem;
}

p:last-child {
	margin-bottom: 0;
}

em, i {
	font-style: italic;
}

strong {
	font-style: italic;
	color: var(--black);
}

sup {
	vertical-align: super;
	font-size: 0.8rem;
}

.footnotelink {
	vertical-align: super;
	font-size: 0.8rem;
	margin-left: 0.1rem;
	margin-right: 0.1rem;
}

.footnote {
	font-size: 0.8rem;
}

hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: var(--box-shadow);
	/* background-color: red; */
	border-width: 0.5px;
	/* height: 0.5px; */
	/* width:50%;text-align:left;margin-left:0 */
}

ul.bullet-list {
	padding-left: 1rem;
}

ul.bullet-list > li:last-child {
	margin-bottom: 1rem;
}

ul.bullet-list > li {
	position: relative;
	margin-bottom: 0.6rem;
	padding-left: 0.2rem;
}

ul.bullet-list > li:last-child {
	margin-bottom: 1rem;
}

ul.bullet-list li::before {
	color: var(--primary-color);
	position: absolute;
	width: 2rem;
}

ul.bullet-list > li::before {
	/* \25A0 ▶ ▸ ► \25BA ■ ● ▰ */
	content: "●";
	/* content: url("./icons/rounded-square.svg"); */
	/* width: 0.55rem; */
	top: -0.06rem;
	left: -1rem;
}

ul li p span.list-title {
	color: var(--primary-color);
}

ol {
	list-style:decimal;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

ol li {
	padding-left: 0.4rem;
}

ol li::marker {
	color: var(--primary-color);
	font-size: 1em;
	font-weight: bold;
}

ul.custom-list > li {
	margin-bottom: 0.4rem;

	position: relative;
}

ul.custom-list > li img {
	position: absolute;
	top: 0.1rem;

	height: 1rem;
}

ul.custom-list > li > div {
	margin-left: 1.8rem;
}

ul.custom-list > li:last-child {
	margin-bottom: 1rem;
}

ul.custom-list-contact-info > li {
	margin-bottom: 0.4rem;

	position: relative;
}

ul.custom-list-contact-info > li img {
	position: absolute;
	top: 0.1rem;

	height: 1rem;
}

ul.custom-list-contact-info > li div {
	margin-left: 1.8rem;
}

ul.custom-list-contact-info > li:last-child {
	margin-bottom: 1rem;
}

div.text-item {
	margin-bottom: 0.6rem;
}

p.disabled-link {
	color: var(--primary-color);
}

main a {
	/* line-height: 1; */
	/* line-height: unset; */
	color: var(--primary-color);
}

ul.custom-list-contact-info a {
	color: var(--dark-grey);
}

a.card-link {
	display: block; 
	height: 100%;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

a.open-in-new-window::after {
	content: url("./../icons/open-in-new-window-icon.svg");
	color: var(--primary-color);
	/* position: absolute; */
	display: inline-block;	
	height: 0.8rem;
	width: 0.8rem;
	margin-left: 0.2rem;
	/* right: -1.1rem; */
	/* top: -0.14rem; */
}

/* 

	Forms

*/

button,
a.button,
a.primary-button {
	display: block;
	/* height: 2.4rem; */

	text-align: center;
	line-height: 1.4rem;

	margin-bottom: 1rem;

	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	
	text-decoration: none;
	border-radius: 0.5rem;
}

button,
a.button,
a.primary-button:last-child {
	margin-bottom: 0;
}

button,
a.button {
	color: var(--dark-grey);
	background-color: white;
	border: 1px solid var(--dark-grey);
}

button.primary-button,
a.primary-button {
	color: white;
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

button {
	cursor: pointer;
}

form {
	max-width: 36rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	display: flex;
	flex-wrap: wrap;
	column-gap: 0.4rem;
	justify-content: space-between;
}

form > * {
	width: 100%;
}

@media screen and (min-width: 960px) {
	form .half {
		width: calc((100% - 0.4rem) / 2);
	}
	
	form .eenderde {
		width: calc((100% - 0.4rem) / 3);
	}
	
	form .tweederde {
		width: calc((100% - 0.4rem) / 1.5);
	}
}

form div {
	margin-top: 0.6rem;
	margin-bottom: 0.2rem;
}

form button {
	margin-top: 0.6rem;
}

.hide {
	display: none;
}

input, textarea, select, button {
	color: inherit;
	font: inherit;
	font-variant-ligatures: inherit;
	font-variant-caps: inherit;
	font-variant-numeric: inherit;
	font-weight: inherit;
	font-stretch: inherit;
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	
	margin-bottom: 0.25rem;
}

input, textarea, select {
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	
	border-width: 1px;
	border-style: solid;
	border-color: #ccc;

	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 4px;
}

input[type="radio"] {
	box-shadow: none;
}

input:focus {
	outline: none;
	border-color: var(--primary-color);
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
	color: var(--secondary-color);
	border-color: var(--secondary-color);
}

select {
	/* Normalizes the height; padding is not sufficient. */
	height: 2.8rem;
	border: 1px solid #ccc;
	background-color: white;
}

select[multiple] {
	height: auto;
}

/*
	Message boxes
*/

.information-message,
.warning-message,
.error-message {
	max-width: 36rem;
	width: 100%;

	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1rem;
	padding: 0.8rem;

	border-radius: 0.5rem;
	text-align: center;
}

.information-message {
	background-color: RGBA(11, 154, 166, 0.1);
	border: 1px solid RGBA(11, 154, 166, 0.3);
}

.error-message {
	background-color: #FFE7E7;
	border: 1px solid #FFDBDB;
}

.warning-message {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border: 1px solid #faebcc;
}

ul.upcoming {
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
}

.upcoming-item {
	display: flex;
}

.upcoming-item > div:first-child { /* datum */
	width: 4rem;
	flex-grow: 0;
	flex-shrink: 0;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	border-radius: 0.5rem;
	background-color: var(--dark-grey);
	color: var(--white);
}

.upcoming-item > div:first-child > div {
	text-align: center;
}

.upcoming-item > div:first-child > div:first-child {
	font-size: 0.9rem;
}

.upcoming-item > div:first-child > div:last-child {
	font-size: 1.1rem;
}

.upcoming-item > div:last-child { /* aankondiging */
	padding-left: 1rem;
	padding-right: 1rem;
	flex-grow: 1;
	display: flex;
	align-items: center;
}

#cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;

	background-color: var(--primary-color);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;

	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

#cookie-banner > div {
	color: var(--white);	
}

#cookie-banner > button {
	margin-bottom: 0;	
}