/************ FUNDAMENTALS ************/
:root {
  --color_text: hsla(15, 0%, 20%, 1.00);
  --color_text_light: hsla(15, 5%, 20%, 0.40);
  --color_background_dark: hsla(226, 23%, 35%, 1.00);
  --color_background_grey: hsla(15, 8%, 93%, 1.00); /* #efeceb */
  --color_background_none: hsla(226, 23%, 35%, 0);
  --color_text_white: hsla(226, 15%, 20%, 1.00);
  --color_white: #ffffff;
  --color_line: hsla(15, 5%, 90%, 1.00);
  --margin_full: 100px;
  --margin_full_small: 50px;
  --margin_mobile: 40px;
  --margin_mobile_small: 25px;
}

body{
	background: #fff;
/*	background: 
		linear-gradient(
		0deg,
		rgba(162,198,208,0) 0%, 
		rgba(163,165,194, 0.3) 100%); */
	min-height: 100vh;
	}		
main{max-width:740px;
	padding:0 20px;
	margin:0px auto;
	display: block;}	
.rightalign{text-align: right;}
.leftalign{text-align: left;}
.clear{clear:both;}
@media screen and (min-width: 1050px) {
main{
	margin:0px auto;}
}	

/************ GENERAL TYPOGRAPHY ************/

body{
	font-family: 'Crimson Pro', serif;
	color:var(--color_text);
	margin:0;padding:0;}	
h1, h1.postview, h2.form_header{ font-size: 26px;
	font-weight: 500;
	font-family: 'Chivo';
	margin-bottom: 0px;
	position: relative;
/*	margin-block-start:3em; */
	margin-block-end:15px;
	line-height: 1.1;
	text-align: left;
	}
h1 a{text-decoration: none;}
.italic{font-style: italic;}
p, .listview{
	line-height: 1.5;
	font-size: 20px;
	font-weight: 300;}
	
h2.listview_date_year_mobile, h2.postdate{
	color:var(--color_text_light);
	text-align: left;
	margin-bottom: 1.5em;
	padding:10px 0;
	font-weight: 600;
	font-size: 16px;
	font-family: 'Chivo';
	text-transform: uppercase;
}	
h2.recent{display: block;}

@media screen and (min-width: 1050px) {
  	p, .listview{
		line-height: 1.5;
		font-size: 24px;
		font-weight: 300;
	  	}
  	h1{
		 margin-bottom: 0px;
		 text-align: left;
		 margin-block-end:15px;
	  	}
  	h2.recent{display: none;}
  	h2.listview_date_year_mobile{
		text-align: left;
		font-family: 'Chivo';
		font-size: 14px;
		border-radius: 100px;
		color: #fff;
		padding: 10px 20px;
		font-weight: 400;
		font-style: normal;
		margin-bottom: 50px;
		width: fit-content;
		margin-top: 0px;background-color: hsla(226, 50%, 35%, 1.00);
		}
	h2.postdate{
		font-family: 'Chivo';
		color:var(--color_text_light);
	}
}	
	
a{	color:inherit;}	
b{	font-weight: 700;}

@font-face {
	font-family: "Crimson Pro";
	src: url("../fonts/Crimson_Pro/CrimsonPro-VariableFont_wght.ttf");
	font-weight: 1 999;
	font-style: normal;
}

@font-face {
	font-family: "Crimson Pro";
	src: url("../fonts/Crimson_Pro/CrimsonPro-Italic-VariableFont_wght.ttf");
	font-weight: 1 999;
	font-style: italic;
}

@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Thin.eot');
	src: url('../fonts/Chivo/Chivo-Thin.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Thin.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Thin.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Thin.ttf') format('truetype');
	font-style: normal;
	font-weight: 100;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-ThinItalic.eot');
	src: url('../fonts/Chivo/Chivo-ThinItalic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-ThinItalic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-ThinItalic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-ThinItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: 100;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Light.eot');
	src: url('../fonts/Chivo/Chivo-Light.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Light.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Light.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Light.ttf') format('truetype');
	font-style: normal;
	font-weight: 300;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-LightItalic.eot');
	src: url('../fonts/Chivo/Chivo-LightItalic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-LightItalic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-LightItalic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-LightItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: 300;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Regular.eot');
	src: url('../fonts/Chivo/Chivo-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Regular.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Regular.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Italic.eot');
	src: url('../fonts/Chivo/Chivo-Italic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Italic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Italic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Italic.ttf') format('truetype');
	font-style: italic;
	font-weight: 400;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Medium.eot');
	src: url('../fonts/Chivo/Chivo-Medium.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Medium.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Medium.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Medium.ttf') format('truetype');
	font-style: normal;
	font-weight: 500;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-MediumItalic.eot');
	src: url('../fonts/Chivo/Chivo-MediumItalic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-MediumItalic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-MediumItalic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-MediumItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: 500;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Bold.eot');
	src: url('../fonts/Chivo/Chivo-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Bold.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Bold.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Bold.ttf') format('truetype');
	font-style: normal;
	font-weight: 700;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-BoldItalic.eot');
	src: url('../fonts/Chivo/Chivo-BoldItalic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-BoldItalic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-BoldItalic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-BoldItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: 700;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-ExtraBold.eot');
	src: url('../fonts/Chivo/Chivo-ExtraBold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-ExtraBold.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-ExtraBold.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-ExtraBold.ttf') format('truetype');
	font-style: normal;
	font-weight: 800;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-ExtraBoldItalic.eot');
	src: url('../fonts/Chivo/Chivo-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-ExtraBoldItalic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-ExtraBoldItalic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-ExtraBoldItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: 800;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-Black.eot');
	src: url('../fonts/Chivo/Chivo-Black.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-Black.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-Black.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-Black.ttf') format('truetype');
	font-style: normal;
	font-weight: 900;
}
@font-face {
	font-family: 'Chivo';
	src: url('../fonts/Chivo/Chivo-BlackItalic.eot');
	src: url('../fonts/Chivo/Chivo-BlackItalic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Chivo/Chivo-BlackItalic.woff2') format('woff2'),
		 url('../fonts/Chivo/Chivo-BlackItalic.woff') format('woff'),
		 url('../fonts/Chivo/Chivo-BlackItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: 900;
}

/************ NAVIGATION ************/

#nav{
	font-family: 'Chivo';
	margin:0 auto 0px auto;
	margin-bottom: var(--margin_full);
	  padding-top:var(--margin_mobile_small);
	  padding-bottom: var(--margin_mobile_small);
	border-bottom: 0px solid var(--color_line);
	text-align: left;
	background-color: var(--color_background_grey);
	}
.nav-main{
	max-width: 740px; 
	padding:0 20px;
	margin:0 auto;
	text-align: center;
	font-family: 'Chivo';
	}
#nav a{
	font-size: 22px;
	text-decoration: none;
	color: var(--color_text_white);
	display: inline-block;
	}
#nav a:hover{
	text-decoration: underline;
	}
#nav a.mainleft:hover{
	text-decoration: none;
	}	

#nav a.mainleft{font-weight: 600;margin-right: 30px;float:left;}
#nav a.mainright{margin-left: 30px;float: right;display: none;}



.hamburger img{
	margin-left: 20px;float: right;cursor: pointer;}
.cross{
	padding-top: 4px;padding-right: 4px;
}	
	
.nav_fullscreen{
	background-color: var(--color_background_grey);
	width:100vw;
	height:100vh;
	z-index: 999;
	margin:0 auto 0 auto; 
	position: fixed;top:0;left:0;
	display: block;
	display: none;
	overflow-x: hidden; 
	overflow: hidden;
    overflow-y: hidden;
    
    height: calc(var(--vh, 1vh) * 100);
}
.nav_fullscreen .nav-main{
	
	padding-top:var(--margin_mobile_small);
	padding-bottom: var(--margin_mobile_small);
}
.show{
	display: block;
}
.vertical-center {
margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: var(--color_text_white);
  text-decoration: none;
  text-align: center;
}
#nav a.maincenter{
	color: var(--color_text_white);
	text-decoration: none;
	display: block;
	font-family: 'Chivo';
	font-size: 20px;
	margin:20px auto;

}


@media screen and (min-width: 1050px) {
  #nav{

	  background-color: var(--color_background_none);
	  border-bottom: 1px solid var(--color_line);
	  margin-bottom: var(--margin_full);
	  padding-top:var(--margin_full_small);
	  padding-bottom: var(--margin_full_small);
  }
  #nav a{
	color: var(--color_text);
	}
#nav a.mainright{display: inline-block;}
.hamburger{display: none;}
.nav_fullscreen{display: none}
.show{display: none;}	
}
			
			
/************ LIST ************/

main #page_introduction p:first-of-type{margin-top: 0;}	
#page_introduction{
	margin-top:1em;margin-bottom:6em;
}	

.listview{
	display: block;
	vertical-align: top;
	list-style-type: none;
	margin:0 auto;
	padding:0;
	position: relative;
	margin-bottom: var(--margin_full);
	}
.listview li{
	margin:1.5em 0 1.5em 0;
	position: relative;
	}
	
.listview li:first-of-type{
	margin-top:1em;
}	
.listview li:last-of-type{
	margin-bottom:1em;
}	
.listview + h2.listview_date_year_mobile{
	margin-top:3em;
	} 
 
/* List view: date */ 
.listview_date{
	position: absolute;
	top: 11px;
	left: -130px;
	color:var(--color_text_light);
	font-weight: 300;
	font-style: italic;
	font-family: 'Chivo';
	font-size: 14px;
	width:110px;
	text-align: right;
	line-height: 1.2;
	}
.listview_date_daymonth{
	text-align: right;
	display: inline-block;
	width:70px;
	}
.listview_date_suffix .listview_date_daymonth{
	width: auto;text-align: left;
}

.listview_year{
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	font-family: 'Chivo';
	color: var(--color_text_light);
}	
.listview_date_slash{
	margin: 0 4px 0 3px;
	font-size: 80%;
	vertical-align: 1px;
}	
.listview_date_suffix{
	color:var(--color_text_light);
	font-weight: 300;
	font-style: italic;
	font-family: 'Chivo';
	font-size: 14px;
	display: block;
	margin-top:5px;
}
.listview_date_daymonth_dot{
	display: none;
}
.listview_date_daymonth_full{
	display: inline;
}

.listview_hidefirst li:first-of-type{display: none;}
	
@media screen and (min-width: 1050px) {
	.listview{
  text-align: left;
  display: inline-block;
  margin-bottom: var(--margin_full);
}
.listview li{
	margin:3em 0 3em 0;
	}
	
.listview_humble li{margin:1.5em 0;}	
.listview li:first-of-type{
	margin-top:0em;
}	

.listview li:last-of-type{
	margin-bottom:1em;
}	
.listview_date_suffix{
	display: inline-block;
	margin-left: 20px;
	margin-top:0;
}
.listview_date_daymonth_dot{
	display: inline;
}
.listview_date_daymonth_full{
	display: none;
}

}

@media screen and (max-width: 1050px) {
  .listview_date {
    display: none;
  }
}


/* List view: blog titles & descriptions */		


a.no-underline:hover{text-decoration: none;}
a.listview_linktopost{
	text-decoration: none;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	font-family: 'Chivo';
}
a.listview_linktopost:hover{
	text-decoration: underline;
}
a.listview_linktopost:link{
	color:var(--color_text);
}
.listview_humble a.listview_linktopost{
	font-size: 22px;
}
.listview_description, .postview_description{
	font-size: 20px;
	color:var(--color_text_light);
	margin-top:10px;
	line-height: 1.1;
	font-weight: 300;
	font-family: 'Chivo';
	}
@media screen and (min-width: 1050px) {
  .listview_description, .postview_description{
	font-size: 20px;
}	
a.listview_linktopost{
	font-size: 26px;
}
}

/* List view: meer blogs zien */
.footer_center_link{
	font-family: 'Chivo';
	font-size: 20px;
	margin-top:var(--margin_mobile_small);
	margin-bottom:var(--margin_mobile_small);
	text-align: center;
}
@media screen and (min-width: 1050px) {
.footer_center_link{
	margin-top:var(--margin_full_small);
	margin-bottom:var(--margin_full_small);
	text-align: left;
}	
}

.footer_center_link a{
	color:var(--color_text);
	display: block;
	text-decoration: none;
}
.footer_center_link a:hover{
	color:inherit;
	text-decoration: underline;}
.arrow{
	display: inline-block;
	vertical-align: -2px;
	margin-left: 5px;
}
.fullwidthline{
	height: 1px;
	display: block;
	background-color: var(--color_line);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

/************ BLOG POSTS ************/


#postview_content p:first-of-type{
	margin-top:3em;
}	
#postview_content blockquote p:first-of-type{
	margin-top:0;
}	
#postview_content{
	padding-bottom: var(--margin_full);
}
.postview_footer{
	background-color: var(--color_background_grey);
	color:var(--color_text_white);
	text-align: center;
	width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-bottom: var(--margin_full);
    padding-top: var(--margin_full);
    border-top-width:0px;
    border-top-color: var(--color_line);
    border-top-style: solid;
    font-family: 'Chivo';
    font-size: 20px;
    line-height: 1.5;
}
.postview_footer + .postview_footer
{
	border-top: 1px solid hsla(226, 23%, 30%, 1.00);
}
.postview_footer_contact{
	max-width: 740px;
	padding: 0 20px;
	margin:0 auto;
}
.postview_footer_nextpost{
	max-width: 740px;
	padding: 0 20px;
	margin:0px auto;text-align: center;font-family: 'Chivo';font-size: 20px;
}
.postview_footer_list{
	max-width: 740px;
	padding: 0 20px;
	margin:0px auto;
	text-align: left;
}
.postview_footer .listview{
	margin-bottom: 0;
}
.postview_footer .listview_year, .postview_footer .listview_date_daymonth{
	color:var(--color_text_light);
}
.postview_footer_nextpost_introduction{
	margin-bottom: .5em;}
.postview_footer_nextpost a{
	text-decoration: none;
	font-size: 26px;
	font-weight: 500;
	font-family: 'Chivo';}
.postview_footer_nextpost a:hover{text-decoration: underline;}

@media screen and (min-width: 1050px) {
	.postview_footer{
		border-top-width: 1px;
		background-color: hsla(226, 23%, 35%, 0);
		color:var(--color_text_dark);
	}
	.postview_footer + .postview_footer{
		border-top: 1px solid var(--color_line);
	}
	h1.postview{
	font-size:36px;
	font-weight: 700;
	}
	.postview_footer .listview_year, .postview_footer .listview_date_daymonth{
	color:var(--color_text_light);
}
}

/* Voetnoten */
hr{
	display: block;
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
	margin-inline-start: auto;
	margin-inline-end: auto;
	border-style: solid;
	border-top-width: 1px;
	border-bottom-width: 0;
	border-color: var(--color_line);
}
sup{font-size: small;}
a.footnote-ref{text-decoration: none;}
a.footnote-backref{text-decoration: none;font-size:75%;color:var(--color_text_light);}
.footnotes, .footnotes p{
	font-family: 'Chivo';
	color:var(--color_text_light);
	font-size: 16px;
	font-weight: 300;
	margin-top: var(--margin_mobile);
}
.footnotes ol{
	padding-inline-start:20px;
}
.footnotes hr{
	display: none;
}
#postview_content .footnotes p:first-of-type{
		margin-top:0;
	}	
	
#thanks{
	font-family: 'Chivo';
	color:var(--color_text_light);
	font-size: 16px;
	font-weight: 300;
	margin-top: var(--margin_full);
	line-height: 1.5;
}	
/* Contactformulier */

input, label, textarea{
	margin:0;
	border:0;
	padding:0;
	display:inline-block;
	vertical-align:middle;
	white-space:normal;
	background:none;
	line-height:1;
}	
input:focus, textarea:focus
{
	outline:0;
}
input,
textarea
{
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
	/* Fix IE7 display bug */
	overflow:visible;
	width:auto;
}
textarea 
{
	/* Move the label to the top */
	vertical-align:top;
	
	/* Turn off scroll bars in IE unless needed */
	overflow:auto;
	resize: none;
}
textarea.contactformulier_field{
	min-height: 100px;
}

.contactformulier_field{
	font-size:16px;
	font-weight: 300;
	font-family: 'Chivo';
	border:1px solid var(--color_line);
	width:100%;
	border-radius: 2px;
	padding:15px;
	margin:10px auto;
	line-height: 1.5;
	width:calc(100% - 32px);
}
#contactformulier label{
	display: block;
}
#my-form-button{
	padding:15px 30px;
	background-color:hsla(226, 23%, 35%, 1);
	color:#fff;
	border:0;
	border-radius: 2px;
	cursor: pointer;
	font-size:16px;
	font-weight: 500;
	font-family: 'Chivo';
	margin-top: 10px;
	margin-right: 30px;
	width:100%;
	text-transform: uppercase;
}
#my-form-button:hover{
	background-color: hsla(226, 23%, 30%, 1.00)
}
#my-form-status{
	font-size:16px;
	font-weight: 500;
	font-family: 'Chivo';
	color: var(--color_text);
	padding:15px 0;
	text-align: center;
	
}
.statuslight_red{color:hsl(353, 99%, 39%);}
#my-form{
	margin-top:var(--margin_mobile_small);
}
@media screen and (min-width: 1050px) {
	#my-form{
	margin-top:var(--margin_full_small);
}
textarea.contactformulier_field{
	min-height: 200px;
}
.contactformulier_field{
	font-size:20px;
	}
}

/* For v0.8 only */	
.hamburger, #nav a.mainright{display: none;}	
@media screen and (min-width: 1050px) {
	.hamburger, #nav a.mainright{display: none;}
}