/*---------------------------------------------------------------------------------

	Theme Name: Weerklank
  	Text Domain: weerklank
	Theme URI: https://weerklank.org/
	Version: 1.0.2
	Description: Weerklank thema: ontworpen, gebouwd en onderhouden door Yvon Vuijk
	Author: Yvon Vuijk
	Author URI: https://yvonvuijk.nl

/* -------------------------------------------------------------------------------- */
/*	CSS Variables
/* -------------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800;900&family=Istok+Web:wght@400;700&family=Mohave:ital,wght@0,300..700;1,300..700&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--bg-color: #1C1C1C;
	
	--link-color: #F5AD29;

	--color-darkest: #000000;
	--color-dark: #1C1C1C;
	--color-medium: #282828;
	--color-light: #FCFCFC;
	--color-accent: #6F3D34;

	--font-serif: 'Inknut Antiqua', Georgia, serif;
	--font-sans-serif: 'Raleway', Helvetica, sans-serif;
}

/* -------------------------------------------------------------------------------- */
/*	CSS Reset
/* -------------------------------------------------------------------------------- */

html, body { 
	margin: 0; 
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	line-height: inherit;
	font-family: inherit;
	text-align: inherit;
}

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

blockquote:before, 
blockquote:after { 
	content: ""; 
}

/* -------------------------------------------------------------------------------- */
/*	Document setup
/* -------------------------------------------------------------------------------- */

body {
	background-color: var(--bg-color);
	border: none;
	color: var(--color-light);
	font-family: var(--font-sans-serif);
	font-size: 15px;
}

a {
	color: var(--link-color);
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

* { 
	box-sizing: border-box;
}

img {
	height: auto;
	max-width: 100%;
}

.hidden { display: none; }
.fleft { float: left; }
.fright { float: right; }

/* Clearing ---------------------------------- */

.clear:after,
.group:after,
.entry-content:after,
.widget-content:after,
[class*="__inner-container"]:after {
	clear: both;
	content: "";
	display: block;
}

/* Transitions ------------------------------- */

body a,
.post-tags a,
.post-tags a:before {
	 transition: all .1s ease-in-out;
}

.main-menu a,
.main-menu li::after,
.content form input,
.content form textarea {
	 transition: all .2s ease-in-out;
}

.nav-toggle .bar {
	 transition: all .3s ease-in-out;
}

/* Screen Reader Text ------------------------ */

.screen-reader-text {
	clip: rect( .1rem, .1rem, .1rem, .1rem );
	height: .1rem;
	overflow: hidden;
	position: absolute !important;
		left: -999999rem;
	width: .1rem;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: .3rem;
	box-shadow: 0 0 .2rem .2rem rgba( 0, 0, 0, 0.6 );
	clip: auto !important;
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	height: auto;
	left: .5rem;
	line-height: normal;
	padding: 1.5rem 2.3rem 1.4rem 2.3rem;
	text-decoration: none;
	top: .5rem;
	width: auto;
	z-index: 100000;
}

/* Skip Link --------------------------------- */

.skip-link {
	position: absolute;
		left: -9999rem;
		top: 2.5rem;
	z-index: 999999999;
}

.skip-link:focus {
	left: 2.5rem;
	text-decoration: none;
}

/* Accessibility Settings -------------------- */

@media ( prefers-reduced-motion:reduce ) {
	* {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}


/* -------------------------------------------------------------------------------- */
/*	Element Base
/* -------------------------------------------------------------------------------- */

p,
blockquote,
ul,
ol,
address,
dl,
pre {
	line-height: 1.5;
	margin-bottom: 16px;
}

h1, h2, h3, h4, h5, h6
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 32px 0 16px;
	font-family: var(--font-serif);
	color:var(--link-color);
	line-height: 140%;
	font-weight: 700;
}

h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 16px; }

h6 {
	font-family: var(--font-sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

blockquote {
	padding: 30px 30px 30px 85px;
	background: var(--bg-color);
	border: 1px solid var(--color-darkest);
	position: relative;
	font-style: italic;
}

blockquote:after {
	content: '”';
	width: 85px;
	font-family: var(--font-serif);
	font-size: 66px;
	line-height: 68px;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	color: var(--color-accent);
	position: absolute;
	top: 30px;
	left: 0px;
}

blockquote cite {
	display: block;
	margin-top: 1.1em;
	font-family: var(--font-sans-serif);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

blockquote cite:before { 
	content: "— "; 
}

.wp-block-pullquote {
	padding:8px 0;
}

.wp-block-pullquote blockquote {
	position: inherit;
	border:none;
	font-family:var(--font-serif);
}
.wp-block-pullquote blockquote:after {
	content:"";
	width:inherit;
}

hr {
	background: var(--color-light);
	border: none;
	height: 2px;
	margin: 50px auto;
	max-width: 60%;
	width: 128px;
}

dl { line-height: 160%; }

dl dt { font-weight: bold; }

ul,
ol {
	margin: .2em 0 .2em 1.5em;
}

li {
	margin: .2em 0;
}

pre {
	padding: 12px 16px;
	border: 1px solid var(--color-darkest);
		border-right: 3px solid var(--color-darkest);
		border-bottom: 3px solid var(--color-darkest);
}

p.has-drop-cap:not(:focus):first-letter {
	font-size: 5.9em;
	font-weight: 400;
}

/* Post Media -------------------------------- */

figure {
	margin: 0;
}

.wp-caption { 
	max-width: 100%; 
}

.wp-caption-text,
.gallery-caption,
figcaption {
	margin: 4px 0 0;
	font-family: var(--font-sans-serif);
	font-size: 13px;
	line-height:150%;
	color: var(--color-light);
	text-align: center;
}

.gallery-caption {
	font-size: 16px;
	line-height: 1.5;
}

/* Tables ------------------------------------ */

table {
	border-collapse: collapse;
    border-spacing: 0;
	margin: 16px 0;
    width: 100%;
}

th,
td,
caption {
	padding: 10px;
}

th,
td,
.wp-block-table td, 
.wp-block-table th {
	margin: 0;
	overflow: visible;
	line-height: 120%;
	border:1px solid var(--color-medium);
}

.wp-block-table thead {
	border-bottom:3px solid var(--color-medium);
}

thead {
	vertical-align: bottom;
	white-space: nowrap;
}

th {
	font-weight: 700;
}


/* Evenementen -------------------------------- */

.event-label-container {
	display:flex;
	margin-bottom:32px;
	flex-direction: row;
}

.event-label {
	display:block;
	width:50%;
	display:flex;
	align-items:center;
	align-self:center;
}

.event-label::before {
	display:block;
	content:"";
	width:32px;
	height:32px;
	margin-right:8px;
	padding:2px;
	color:var(--color-dark);
	border-radius:8px;
}

.event-label.location::before {
	background:url( ./assets/images/icons/map-marker-alt.svg ) no-repeat center center #F3F3F3;
}
.event-label.date::before {
	background:url( ./assets/images/icons/calendar.svg ) no-repeat center center #F3F3F3;
}

/* Forms ------------------------------------- */

fieldset {
	padding: 25px;
	border: 2px solid var();
	margin-bottom: 1em;
}

label {
	display:inline-block;
	font-size: 1rem;
	font-family: var(--font-sans-serif);
	font-weight: 700;
	margin-bottom:8px;
}

input,
select,
textarea { 
	font-family: var(--font-sans-serif); 
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea,
select {
	background-color: var(--color-light);
	border: 1px solid var(--color-light);
	border-radius: 0;
	color: var(--color-dark);
	margin: 4px 0;
	padding: 8px 12px;
	width: 100%;
}

select {
	background-image: url( ./assets/images/icons/chevron-down-black.svg );
	background-position: calc( 100% - 20px ) center;
	background-repeat: no-repeat;
	background-size: 15px 9px;
}

input[type="file"] {
	padding: 10px;
	background: var(--bg-color);
	border: 1px solid #ddd;
	border-radius: 3px;
}

textarea { 
	height: 180px; 
	line-height: 140%;
}

button,
.button,
.faux-button,
.wp-block-button__link,
.wp-block-button__link.is-style-outline,
:root .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	padding: 12px;
	margin: 0;
	border: none;
	border-radius: 0;
	font-size:0.9em;
	background: var(--color-accent);
	font-family: var(--font-sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-light);
	text-decoration:none;
}

input[type="submit"] + input[type="reset"],
input[type="submit"] + input[type="button"],
input[type="reset"] + input[type="submit"],
input[type="reset"] + input[type="button"],
input[type="button"] + input[type="reset"],
input[type="submit"] + input[type="submit"] {
	margin-left: 5px;
}

button:hover,
.button:hover,
.faux-button:hover,
.wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover,
:root .wp-block-file__button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	cursor: pointer;
	background: var(--color-darkest);
	color: var(--color-light);
}

/* -------------------------------------------------------------------------------- */
/*	Structure
/* -------------------------------------------------------------------------------- */

.bg-image { 
	text-align:center;
}

.section-inner {
	width: 1140px;
	max-width: 90%;
	margin: 0 auto;
}

.wrapper-inner { position: relative; }

/* Grid Classes ------------------------------ */

.one-fourth { width: 22%; margin-left: 4%; float: left; }
.one-third { width: 30%; margin-left: 5%; float: left; }
.one-half { width: 47.5%; margin-left: 5%; float: left; }
.two-thirds { width: 65%; margin-left: 5%; float: left; }

.one-fourth:first-child,
.one-third:first-child,
.one-half:first-child,
.two-thirds:first-child { margin-left: 0; }

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

.navigation {
	position:fixed;
	z-index:900;
	width:100%;
	top:0;
}
.navigation > .section-inner {
	background:var(--color-dark);
}

.header-spacer {
	height:100px;
	width:100%;
}

.toggles,
.mobile-menu { 
	display: none; 
}

.main-menu,
.main-menu ul,
.main-menu li {
	list-style: none;
	margin: 0;
}

.main-menu { 
	text-align: right;
	padding: 16px 0;
}

.main-menu li {
	display: inline-block;
	position: relative;
}

.main-menu > li { 
	margin: 0 8px;
}

.main-menu a {
	color: inherit;
	display: inline-block;
	position: relative;
	padding: 12px 8px;
	text-decoration: none;
	font-weight:700;
}

.main-menu > li > a {
	display: block;
	line-height: 1;
}

.main-menu > .menu-item-has-children > a { 
	padding-right: 18px; position: relative; 
}

.main-menu > .menu-item-has-children > a::after {
	border: 5px solid transparent;
	border-top-color: var(--color-light);
	content: "";
	display: block;
	margin-top: -2px;
	position: absolute;
		right: 0;
		top: 50%;
}

.main-menu li:hover > a,
.main-menu li.focus > a,
.main-menu li.current_page_item > a,
.main-menu li.current-menu-item > a { 
	color: var(--link-color); 
	cursor: pointer; 
}

/* Logo */
.website-logo {
	display:block;
	padding:8px 0;
	text-decoration: none;
	font-family: var(--font-serif);
	font-size:20px;
	float:left;
}
.website-logo > img {
	margin-right:12px;
	float:left;
}

/* Sub Menus --------------------------------- */

.main-menu ul {
	position: absolute;
	z-index: 10000;
	display: block;
	left: -9999px;
	top: calc( 100% + 5px );
	opacity: 0;
	z-index: 999;
	transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
	text-align: left;
}

.main-menu > li > ul:before {
	border: 8px solid transparent;
	border-bottom-color: #222;
	content: "";
	display: block;
	margin-left: -8px;
	position: absolute;
		left: 50%;
		top: -16px;
}

.main-menu ul .menu-item-has-children::after {
	content: "";
	display: block;
	border: 6px solid transparent;
	border-left-color: rgba(255,255,255,0.4);
	position: absolute;
	z-index: 1001;
	right: 10px;
	top: 50%;
	margin-top: -6px;
}

.main-menu ul .menu-item-has-children:hover::after { 
	border-left-color: #222; 
	right: -12px;
}

.main-menu ul li { 	
	width: 240px; 
	background: #222;
}

.main-menu ul a {
	display: block;
	padding: 20px;
	line-height: 130%;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	color: var(--color-light);
	font-style: italic;
}

.main-menu ul a:hover { 
	color: var(--link-color); 
}

.main-menu ul > li:last-child > a { 
	border-bottom-width: 0; 
}

.main-menu > li:hover > ul,
.main-menu > li.focus > ul {
	opacity: 1;
	left: 50%;
	margin-left: -120px;
	top: 100%;
}

/* Deep Down --------------------------------- */

.main-menu ul ul { 
	padding-top: 0;
	top: 10px;
}

.main-menu ul ul li { background: #333; }
.main-menu ul ul .menu-item-has-children:hover::after { border-left-color: #333; }
.main-menu ul ul ul li { background: #444; }
.main-menu ul ul ul .menu-item-has-children:hover::after { border-left-color: #444; }
.main-menu ul ul ul ul li { background: #555; }
.main-menu ul ul ul ul .menu-item-has-children:hover::after { border-left-color: #555; }
.main-menu ul ul ul ul ul li { background: #666; }
.main-menu ul ul ul ul ul .menu-item-has-children:hover::after { border-left-color: #666; }

.main-menu li > ul > li:hover > ul,
.main-menu li > ul > li.focus > ul {
	opacity: 1;
	top: 0;
	left: 240px;
	margin-left: 0;
}

.toggles {
	background: none;
	border: none;
}

.toggle { 
	height: 54px; 
	width: 24px;
	display:block;
	padding:12px;
}

.nav-toggle { right: 5%; }

.nav-toggle .bar { 
	width: 100%;
	margin-left: -12px;
}

.nav-toggle .bar:nth-child(1) { margin-top: -9px; }
.nav-toggle .bar:nth-child(3) { margin-top: 5px; }

.mobile-menu > li:first-child { 
	border-top: 1px solid var(--color-darkest); 
}
.mobile-menu > li:last-child { 
	border-bottom: 1px solid var(--color-darkest); 
}


/* -------------------------------------------------------------------------------- */
/*	Post Archive
/* -------------------------------------------------------------------------------- */


.content {
	float: left;
	width: 68.7%;
}

.post {
	position: relative;
}

.post + .post,
.infinite-wrap .post:first-child { 
	margin-top: 60px; 
}

/* Archive Header ---------------------------- */

.archive-header {
	background-color: var(--color-dark); ;
	color: var(--color-dark);
	padding: 23px 7.5%;
	text-align: center;
}

.archive-title {
	font-family: var(--font-sans-serif);
	font-size: 0.75em;
	font-weight: 900;
	letter-spacing: 1px;
	margin: 0;
	text-transform: uppercase;
}

.archive-header span:not(.vcard) { 
	color: rgba( 255, 255, 255, 0.75 ); 
	font-weight: 700;
	margin-left: 5px;
}

.archive-description {
	font-family: var(--font-serif);
	margin-top: 15px;
}

.archive-description p:last-child {
	margin-bottom: 0;
}

.archive-header + .posts > .post:first-child { 
	border-top: none; 
}


/* -------------------------------------------------------------------------------- */
/*	Blocks
/* -------------------------------------------------------------------------------- */


/* Block Editor Font Sizes ------------------- */

:root .has-small-font-size { font-size: .842em; }
:root .has-regular-font-size,
:root .has-normal-font-size { font-size: 1em; }

:root .has-large-font-size,
:root .has-larger-font-size {
	line-height: 1.5;
}

:root .has-large-font-size { font-size: 1.33em; }
:root .has-larger-font-size { font-size: 1.5em; }

/* Block Typography Classes ------------------ */

.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-justify { text-align: justify; }

/* Block Base Margins ------------------------ */

:root *[class*="_inner-container"] > *:first-child { margin-top: 0; }
:root *[class*="_inner-container"] > *:last-child { margin-bottom: 0; }

.wp-block-archives,
.wp-block-button,
.wp-block-buttons,
.wp-block-categories,
.wp-block-code,
.wp-block-columns,
.wp-block-embed,
.wp-block-file,
.wp-block-gallery,
.wp-block-group,
.wp-block-image,
.wp-block-latest-posts,
.wp-block-media-text,
.wp-block-preformatted,
.wp-block-quote,
.wp-block-quote.is-large,
.wp-block-quote.is-style-large,
.wp-block-video {
	margin-bottom: 16px;
	margin-top: 16px;
}

.content-fullwidth .post-content > .wp-block-columns {
	margin-top:80px;
	margin-bottom:80px;
}

/* Block: Buttons ---------------------------- */

.wp-block-buttons .wp-block-button {
	margin-bottom: 0;
	margin-top: 0;
}

/* Block: Column ----------------------------- */

.wp-block-column {
	padding: 0 5px;
}

body .wp-block-columns.is-layout-flex {
	column-gap: 1em;
	gap:1em;
}

/* Block: Gallery ---------------------------- */
/* Block: Image ------------------------------ */
/* Block: Media and Text --------------------- */

.wp-block-media-text__content > *:first-child { margin-top: 0; }
.wp-block-media-text__content > *:last-child { margin-bottom: 0; }

.wp-block-media-text .wp-block-media-text__content p {
	font-family:var(--font-serif);
	font-size:34px;
	line-height:1.4;
	font-style:italic;
}

.wp-block-media-text .wp-block-media-text__content strong {
	color:var(--link-color);
}

/* Block: Quote ------------------------------ */

.post-content .wp-block-quote.is-large, 
.post-content .wp-block-quote.is-style-large {
	margin: 2.5em 0;
	padding: 30px 30px 30px 90px;
}

.post-content blockquote p:last-child {
	margin-bottom: 0;
}

.wp-block-quote.is-large p, 
.wp-block-quote.is-style-large p {
	font-size: 1.25em;
	line-height: 1.5;
}

.wp-block-quote.is-large cite, 
.wp-block-quote.is-style-large cite {
	display: block;
	font-size: .8em;
	text-align: left;
}

/* Block: Separator -------------------------- */

hr.is-style-wide,
hr.is-style-dots {
	max-width: 100%;
	width: 100%;
}

hr.is-style-dots {
	background: none;
}

/* -------------------------------------------------------------------------------- */
/*	Post Content
/* -------------------------------------------------------------------------------- */


.post-content { 
	font-family: var(--font-sans-serif);
	font-size: 1.05em;
}

.post-content p,
.post-content li {
	line-height: 1.7;
}

.post-content > *:first-child { margin-top: 0; }
.post-content > *:last-child { margin-bottom: 0; }

/* Alignment Classes ------------------------- */

.alignnone,
.aligncenter,
.alignwide,
.alignfull {
	margin: 2.5em auto;
}

.alignwide {
	padding: 0 3.5%;
}

.alignwide,
.alignfull {
	margin-left: -77px;
	max-width: 783px;
	width: 783px;
}

.alignfull > figcaption {
	padding: 0 20px;
}

.alignleft,
.alignright {
	margin-bottom: 1.2em;
	max-width: 50%;
}

.wp-caption .alignleft,
.wp-caption .alignright {
	margin-bottom: 0;
}

.alignleft {
	float: left;
	margin-right: 30px;
}

.alignright {
	float: right;
	margin-left: 30px;
}

.aligncenter,
.aligncenter img {
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------------- */
/*	12. Page & Page Templates
/* -------------------------------------------------------------------------------- */


/* Full Width Page Template ------------------ */

.page-template-full-width-page-template-php .content {
	width: 100%;
	float: none;
}

.page-template-full-width-page-template-php .post-inner { 
	width: auto; 
}


/* -------------------------------------------------------------------------------- */
/*	Sidebar
/* -------------------------------------------------------------------------------- */

.sidebar { 
	float: right;
	width: 26.3%; 
	position: sticky;
	top: 80px;
}

.widget + .widget { 
	margin-top: 24px;
	padding-top: 24px;
}

.widget-title {
	display: inline-block;
	font-weight: 700;
	margin-bottom: 16px;
}

/* Widget Content ---------------------------- */

.widget-content { 
	font-family: var(--font-sans-serif); 
	font-size: 0.95em;
}

.widget-content > *:first-child { margin-top: 0; }
.widget-content > *:last-child { margin-bottom: 0; }

.widget-content li {
	margin-bottom:8px;
}

.widget-content ul ul { 
	margin-left: 1em;
}

.widget-content ul ul li:first-child { 
	margin-top: 0.5em; 
	border-top: 1px solid var(--color-light);
}

.widget-content > ul > li:first-child { 
	padding-top: 0; 
}

.widget-content li:last-child { 
	padding-bottom: 0;
	border-bottom: none; 
}


/* -------------------------------------------------------------------------------- */
/*	Site Footer
/* -------------------------------------------------------------------------------- */


.footer .section-inner { 
	border-top: 2px solid var(--color-darkest);
	padding: 32px 0;
	margin-top:64px;
}


/* -------------------------------------------------------------------------------- */
/*	Media Queries
/* -------------------------------------------------------------------------------- */


@media ( max-width: 1269px ) {

	/* Post Content -------------------------- */

	/* ALIGNMENT CLASSES */

	.alignwide,
	.alignfull {
		margin-left: calc( ( ( 90vw * .687 ) - 629px ) /-2 );
		max-width: calc( 90vw * .687 );
		width: calc( 90vw * .687 );
	}

}

@media ( max-width: 1199px ) {

	/* Post Content -------------------------- */

	/* ALIGNMENT CLASSES */

	.alignwide,
	.alignfull {
		margin-left: calc( ( ( 90vw * .687 ) - ( ( 90vw * .687 ) * .85 ) + 2px ) /-2 );
	}

}

@media ( max-width: 1000px ) {
	
	/* Structure ----------------------------- */
	
	.content { 
		width: 100%; 
		float: none;
	}
	
	.sidebar { 
		display: none; 
		margin: 64px 0 0;
		width: 100%;
	}

	.show-mobile-sidebar .sidebar {
		display: block;
	}
	
	/* Navigation ---------------------------- */
	
	/* Nav Toggle */
	
	.toggles { 
		display: block; 
		padding: 0 5%;
	}
	
	.toggle {
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;
		color: inherit;
		cursor: pointer;
		display: block;
		height: 55px;
		padding: 0;
		position: fixed;
		width: 30px;
		z-index:1000;
	}

	.toggle:hover {
		background-color: transparent;
		color: inherit;
	}
	
	.nav-toggle { 
		float: right; 
	}
	
	.nav-toggle .bar {
		width: 30px;
		height: 3px;
		background: var(--color-light);
		position: absolute;
		left: 50%;
		margin-left: -15px;
		top: 50%;
		transition: opacity 0.2s linear 0.2s, margin 0.2s linear 0.2s, transform 0.2s linear 0s;
	}
	
	.nav-toggle .bar:nth-child(1) { margin-top: -10px; }
	.nav-toggle .bar:nth-child(2) { margin-top: -2px; }
	.nav-toggle .bar:nth-child(3) { margin-top: 6px; }
	
	.nav-toggle.active .bar { 
		background: var(--link-color); 
		transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, transform 0.2s linear 0.2s;
	}
	
	.nav-toggle.active .bar:nth-child(1),
	.nav-toggle.active .bar:nth-child(3) { 
		margin-top: -2px; 
	}
	
	.nav-toggle.active .bar:nth-child(1) { transform: rotate( 45deg ); }
	.nav-toggle.active .bar:nth-child(2) { opacity: 0; }
	.nav-toggle.active .bar:nth-child(3) { transform: rotate( -45deg ); }
	
	/* Menus --------------------------------- */
	
	.main-menu { 
		display: none; 
	}

	.mobile-menu,
	.mobile-menu ul,
	.mobile-menu li {
		list-style: none;
		margin: 0;
	}
	
	.mobile-menu li { 
		border-top: 1px solid var(--color-darkest); 
	}
	
	.mobile-menu > li:first-child { 
		border-top: none; 
	}
	
	.mobile-menu a {
		display: block;
		padding: 12px 5%;
		font-size: 0.9em;
		color: var(--color-light);
		text-decoration: none;
	}
	
	.mobile-menu ul a { padding-left: 10%; }
	.mobile-menu ul ul a { padding-left: 15%; }
	.mobile-menu ul ul ul a { padding-left: 20%; }
	.mobile-menu ul ul ul ul a { padding-left: 25%; }
	.mobile-menu ul ul ul ul ul a { padding-left: 30%; }

	.header-spacer {
		height:150px;
	}

	.home .header-spacer {
		height:90px;
	}

	/* Post Content -------------------------- */

	/* ALIGNMENT CLASSES */

	.alignwide,
	.alignfull {
		margin-left: calc( ( 90vw - 629px ) /-2 );
		max-width: 90vw;
		width: 90vw;
	}
	
}

@media ( max-width: 824px ) {

	/* Post Content -------------------------- */

	/* ALIGNMENT CLASSES */

	.alignwide,
	.alignfull {
		margin-left: calc( ( 90vw - ( 90vw * .85 ) + 2px ) /-2 );
	}

}

@media ( max-width: 600px ) {

	/* Element Base -------------------------- */

	blockquote { 
		padding: 20px 20px 20px 70px; 
	}
	
	blockquote:after {
		font-size: 64px;
		top: 18px;
		width: 70px;
	}

	/* Structure ----------------------------- */
	
	.section { padding: 0; }
	.big-padding { padding: 50px 0; }
	.medium-padding { padding: 30px 0; }
	.small-padding { padding: 20px 0; }
	
	/* Site Header --------------------------- */
	
	.header-wrapper { 
		position: relative; 
	}
	
	.header .section-inner { 
		align-items: center;
		justify-content: center;
		max-width: 100%; 
		position:relative;
	}
	
	.blog-title { 
		font-size: 1.5em;
		padding: 0 24px; 
		margin: 0 10%;
		max-width: 65%;
	}
	
	/* Navigation ---------------------------- */
	
	.website-logo {
		font-size:16px;
		float:none;
	}
	.website-logo > img {
		width:36px;
	}
	
	/* Content ------------------------------- */
	
	.content { 
		margin-top: -80px; 
	}
	
	.post + .post { 
		margin-top: 40px; 
	}
	
	.post-header + .post-content { 
		margin-top: 30px; 
	}
	
}

@media ( max-width: 500px ) {

	h1, h2, h3, h4, h5, h6
	.h1, .h2, .h3, .h4, .h5, .h6 { 
		margin: 16px 0 6px;
	}

	h1 { font-size: 28px; }
	h2 { font-size: 20px; }
	h3 { font-size: 17px; }
	h4 { font-size: 16px; }
	h5 { font-size: 15px; }
	
	hr { 
		margin: 40px auto; 
	}
	
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="url"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="week"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	textarea,
	select {
		padding: 8px;
	}
	
	/* Single Post --------------------------- */
	
	.single .wrapper { 
		padding-bottom: 0; 
	}
	
	.post-navigation:before { 
		content: none; 
	}
	
	.post-navigation-inner {
		max-width: 100%;
		padding: 0;
		margin: 0;
	}
	
	.post-nav-prev,
	.post-nav-next {
		float: none;
		width: 100%;
		padding: 20px 5%;
	}
	
	.post-nav-prev + .post-nav-next { 
		border-top: 1px solid #ddd; 
	}
	
	/* Post Content -------------------------- */

	/* ALIGNMENT CLASSES */

	.alignwide,
	.alignfull {
		margin-left: calc( 50% - 50vw );
		max-width: 100vw;
		width: 100vw;
	}
	
	.alignleft,
	.alignright {
		float: none;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.alignleft img,
	.alignright img {
		display: block;
		margin: 0 auto;
	}

}


/* -------------------------------------------------------------------------------- */
/*	Tijdlijn
/* -------------------------------------------------------------------------------- */

.main-timeline{ position: relative; }
.main-timeline:before,
.main-timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline:before{
    content: "";
    width: 3px;
    height: 100%;
    background: #bababa;
    position: absolute;
    top: 0;
    left: 50%;
}
.main-timeline .timeline{
    width: 50%;
    float: left;
    position: relative;
    z-index: 1;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before{
    content: "";
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-dark);
    border: 4px solid var(--color-light);
    position: absolute;
    top: 0;
    right: -14px;
    z-index: 1;
}
.main-timeline .timeline:last-child:before{
    top: auto;
    bottom: 0;
}
.main-timeline .timeline:last-child:nth-child(even):before{
    right: auto;
    left: -12px;
    bottom: -2px;
}
.main-timeline .timeline-content{
    text-align: center;
    margin-top: 8px;
    position: relative;
    transition: all 0.3s ease 0s;
}
.main-timeline .timeline-content:before{
    content: "";
    width: 100%;
    height: 5px;
    background: var(--color-light);
    position: absolute;
    top: 88px;
    left: 0;
    z-index: -1;
}
.main-timeline .circle{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--color-dark);
    border: 8px solid var(--color-light);
    float: left;
    margin-right: 25px;
    position: relative;
}
.main-timeline .circle:before{
    content: "";
    width: 26px;
    height: 30px;
    background: var(--color-light);
    margin: auto;
    position: absolute;
    top: 0;
    right: -33px;
    bottom: 0;
    z-index: -1;
    box-shadow: inset 7px 0 9px -7px #444;
}
.main-timeline .circle span{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    line-height: 268px;
    font-size: 80px;
    color: #454344;
}
.main-timeline .circle span:before,
.main-timeline .circle span:after{
    content: "";
    width: 28px;
    height: 50px;
    background: var(--color-dark);
    border-radius: 0 0 0 21px;
    margin: auto;
    position: absolute;
    top: -54px;
    right: -33px;
    bottom: 0;
    z-index: -1;
}
.main-timeline .circle span:after{
    border-radius: 21px 0 0 0;
    top: 0;
    bottom: -56px;
}
.main-timeline .circle .img{
    vertical-align: initial;
    border-radius: 50%;
}
.main-timeline .content{
    display: table;
    padding-right: 40px;
    position: relative;
}
.main-timeline .year{
    display: block;
    padding: 10px;
    margin: 10px 0 50px 0;
    background: var(--color-light);
    border-radius: 7px;
    font-size: 25px;
    color: var(--color-dark);
}
.main-timeline .title {
    font-size: 25px;
    font-weight: bold;
    color: var(--link-color);
    margin-top: 0;
}
.main-timeline .description {
    color: var(--color-light);
}
.main-timeline .icon{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-dark);
    border: 4px solid var(--color-light);
    position: absolute;
    top: 78px;
    right: -14px;
}
.main-timeline .icon:before{
    content: "";
    width: 15px;
    height: 25px;
    background: var(--color-light);
    margin: auto;
    position: absolute;
    top: -1px;
    left: -15px;
    bottom: 0;
    z-index: -1;
}
.main-timeline .icon span:before,
.main-timeline .icon span:after{
    content: "";
    width: 21px;
    height: 25px;
    background: var(--color-dark);
    border-radius: 0 0 21px 0;
    margin: auto;
    position: absolute;
    top: -30px;
    left: -15px;
    bottom: 0;
    z-index: -1;
}
.main-timeline .icon span:after{
    border-radius: 0 21px 0 0;
    top: 0;
    left: -15px;
    bottom: -30px;
}
.main-timeline .timeline:nth-child(2n) .timeline-content,
.main-timeline .timeline:nth-child(2n) .circle{
    float: right;
}
.main-timeline .timeline:nth-child(2n) .circle{
    margin: 0 0 0 25px;
}
.main-timeline .timeline:nth-child(2n) .circle:before{
    right: auto;
    left: -33px;
    box-shadow: -7px 0 9px -7px #444 inset;
}
.main-timeline .timeline:nth-child(2n) .circle span:before,
.main-timeline .timeline:nth-child(2n) .circle span:after{
    right: auto;
    left: -33px;
    border-radius: 0 0 21px 0;
}
.main-timeline .timeline:nth-child(2n) .circle span:after{
    border-radius: 0 21px 0 0;
}
.main-timeline .timeline:nth-child(2n) .content{
    padding: 0 0 0 40px;
    margin-left: 2px;
}
.main-timeline .timeline:nth-child(2n) .icon{
    right: auto;
    left: -14px;
}
.main-timeline .timeline:nth-child(2n) .icon:before,
.main-timeline .timeline:nth-child(2n) .icon span:before,
.main-timeline .timeline:nth-child(2n) .icon span:after{
    left: auto;
    right: -15px;
}
.main-timeline .timeline:nth-child(2n) .icon span:before{
    border-radius: 0 0 0 21px;
}
.main-timeline .timeline:nth-child(2n) .icon span:after{
    border-radius: 21px 0 0 0;
}
.main-timeline .timeline:nth-child(2){
    margin-top: 180px;
}
.main-timeline .timeline:nth-child(odd){
    margin: -175px 0 0 0;
}
.main-timeline .timeline:nth-child(even){
    margin-bottom: 180px;
}
.main-timeline .timeline:first-child,
.main-timeline .timeline:last-child:nth-child(even){
    margin: 0;
}

@media only screen and (max-width: 990px){
    .main-timeline:before{ left: 100%; }
    .main-timeline .timeline{
        width: 100%;
        float: none;
        margin-bottom: 20px !important;
    }
    .main-timeline .timeline:first-child:before,
    .main-timeline .timeline:last-child:before{
        left: auto !important;
        right: -13px !important;
    }
    .main-timeline .timeline:nth-child(2n) .circle{
        float: left;
        margin: 0 25px 0 0;
    }
    .main-timeline .timeline:nth-child(2n) .circle:before{
        right: -33px;
        left: auto;
        box-shadow: 7px 0 9px -7px #444 inset;
    }
    .main-timeline .timeline:nth-child(2n) .circle span:before,
    .main-timeline .timeline:nth-child(2n) .circle span:after{
        right: -33px;
        left: auto;
        border-radius: 0 0 0 21px;
    }
    .main-timeline .timeline:nth-child(2n) .circle span:after{
        border-radius: 21px 0 0 0;
    }
    .main-timeline .timeline:nth-child(2n) .content{
        padding: 0 40px 0 0;
        margin-left: 0;
    }
    .main-timeline .timeline:nth-child(2n) .icon{
        right: -14px;
        left: auto;
    }
    .main-timeline .timeline:nth-child(2n) .icon:before,
    .main-timeline .timeline:nth-child(2n) .icon span:before,
    .main-timeline .timeline:nth-child(2n) .icon span:after{
        left: -15px;
        right: auto;
    }
    .main-timeline .timeline:nth-child(2n) .icon span:before{
        border-radius: 0 0 21px 0;
    }
    .main-timeline .timeline:nth-child(2n) .icon span:after{
        border-radius: 0 21px 0 0;
    }
    .main-timeline .timeline:nth-child(2),
    .main-timeline .timeline:nth-child(odd),
    .main-timeline .timeline:nth-child(even){
        margin: 0;
    }
}
@media only screen and (max-width: 480px){
    .main-timeline:before{ left: 0; }
    .main-timeline .timeline:first-child:before,
    .main-timeline .timeline:last-child:before{
        left: -12px !important;
        right: auto !important;
    }
    .main-timeline .circle,
    .main-timeline .timeline:nth-child(2n) .circle{
        width: 130px;
        height: 130px;
        float: none;
        margin: 0 auto;
    }
    .main-timeline .timeline-content:before{
        width: 99.5%;
        top: 68px;
        left: 0.5%;
    }
    .main-timeline .circle span{
        line-height: 115px;
        font-size: 60px;
    }
    .main-timeline .circle:before,
    .main-timeline .circle span:before,
    .main-timeline .circle span:after,
    .main-timeline .icon{
        display: none;
    }
    .main-timeline .content,
    .main-timeline .timeline:nth-child(2n) .content{
        padding: 0 10px;
    }
    .main-timeline .year{
        margin-bottom: 15px;
    }
    .main-timeline .description{
        text-align: center;
    }
}




/* -------------------------------------------------------------------------------- */
/*	Assorted styles
/* -------------------------------------------------------------------------------- */

.asterisk {
	color: #C60000;
}


/* -------------------------------------------------------------------------------- */
/*	Table of Contents
/* -------------------------------------------------------------------------------- */

.table-of-contents {
	padding:16px;
	margin-bottom:16px;
	border:1px solid var(--color-darkest);
		border-right:3px solid var(--color-darkest);
		border-bottom:3px solid var(--color-darkest);
}
.table-of-contents .toc-headline {
	font-weight: 700;
	display: block;
	border-bottom:2px solid var(--color-darkest);
	margin-bottom:8px;
	padding-bottom:8px;
}
.table-of-contents ul {
	padding: 0;
}
.table-of-contents li {
	padding-left: 4px;
}
.table-of-contents li a {
	text-decoration: none;
	color: var(--color-light);
}
.table-of-contents li a:hover {
	text-decoration: underline;
}
.table-of-contents li > ul {
	padding-left: 0.7rem;
}


/* -------------------------------------------------------------------------------- */
/*	Voorstellingen // Praktische informatie blok
/* -------------------------------------------------------------------------------- */

.voorstelling {
	padding: 32px 64px;
	border: 1px solid var(--color-darkest);
		border-right: 3px solid var(--color-darkest);
		border-bottom: 3px solid var(--color-darkest);
}

.voorstelling .wp-block-buttons,
.voorstelling h2 {
	text-align: center;
	margin: 0;
}

@media ( max-width: 824px ) {
	.voorstelling { 
		padding: 24px; 
	}

	.voorstelling .wp-block-buttons,
	.voorstelling h2 {
		text-align:left;
	}
}

/* -------------------------------------------------------------------------------- */
/*	Frontpage banner
/* -------------------------------------------------------------------------------- */

.frontpage-banner {
	padding: 100px 16px;
	text-align:center;
	border: 1px solid var(--color-darkest);
	background:url( ./assets/images/header.jpg ) no-repeat center center var(--color-dark);
	background-size:cover;
	margin-bottom:40px;
}

.frontpage-banner h1 {
	margin:0;
	text-shadow: 2px 2px var(--color-dark);
}

.frontpage-banner h1 > span {
	font-size:110px;
	line-height:1.4em;
	display:block;
}

@media ( max-width: 600px ) {
	.frontpage-banner { 
		padding: 32px 16px; 
	}

	.frontpage-banner h1 {
		font-size:15px;
	}

	.frontpage-banner h1 > span {
		font-size:34px;
	}

}



/* -------------------------------------------------------------------------------- */
/*	De Staten
/* -------------------------------------------------------------------------------- */

.de-staten .wp-block-columns {
	background:var(--color-medium);
	padding:12px 24px;
}