/* FONTS */
@media screen {
	@font-face {
	  font-family: RobotoMono;
	  src: url(fonts/RobotoMono-Regular.ttf);
	  font-weight: regular;
	}
	@font-face {
	  font-family: RobotoMono;
	  src: url(fonts/RobotoMono-Bold.ttf);
	  font-weight: bold;
	}
	@font-face {
	  font-family: RobotoMono;
	  src: url(fonts/RobotoMono-Italic.ttf);
	  font-weight: regular;
	  font-style: italic;
	}
	@font-face {
	  font-family: RobotoMono;
	  src: url(fonts/RobotoMono-BoldItalic.ttf);
	  font-weight: bold;
	  font-style: italic;
	}
	@font-face {
	  font-family: Montserrat;
	  src: url(fonts/Montserrat-Regular.ttf);
	  font-weight: 400;
	}
	@font-face {
	  font-family: Montserrat;
	  src: url(fonts/Montserrat-Bold.ttf);
	  font-weight: 700;
	}
	@font-face {
	  font-family: Montserrat;
	  src: url(fonts/Montserrat-Italic.ttf);
	  font-weight: 400;
	  font-style: italic;
	}
	@font-face {
	  font-family: Montserrat;
	  src: url(fonts/Montserrat-BoldItalic.ttf);
	  font-weight: 700;
	  font-style: italic;
	}
	@font-face {
	  font-family: Montserrat;
	  src: url(fonts/Montserrat-Medium.ttf);
	  font-weight: 500;
	}
	@font-face {
	  font-family: Montserrat;
	  src: url(fonts/Montserrat-MediumItalic.ttf);
	  font-weight: 500;
	  font-style: italic;
	}
	@font-face {
	  font-family: Bree;
	  src: url(fonts/BreeSerif-Regular.ttf);
	  font-weight: bold;
	}
}

/* GENERAL */
@media screen {
	body {
		background-color: #aaa;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		font-family: 'Montserrat', 'Trebuchet MS', sans-serif;;
	}
	p {
		display: block;
		position: relative;
		line-height: 175%;
		margin: 0 3rem 3rem calc(40px + 9rem);
		font-size: 1rem;
		font-family: 'Montserrat', 'Trebuchet MS', sans-serif;
	}
	ol, ul {
		display: block;
		position: relative;
		line-height: 175%;
		margin: 0 3rem 3rem calc(40px + 9rem);
		padding: 0;
		font-size: 1rem;
		position: static;
	}
	h1 {
		margin: 0 3rem 3rem 10%;
		font-size: 3.5rem;
	}
	h2 {
		margin: 0 3rem 3rem 15%;
		font-size: 2.5rem;
	}
	h3 {
		margin: 0 3rem 3rem 15%;
		font-size: 2rem;
	}
	h4 {
		margin: 0 3rem 3rem 15%;
		font-size: 1.2rem;
	}
	h1, h2,	h3, h4 {
		font-family: 'Bree', 'Georgia', serif;
		font-weight: bold;
		text-transform: uppercase;
	}
	a {
		color: #d91016;
		font-weight: 500;
		text-decoration: none;
		padding: 0.1em 0.5em;
		margin: 0 -0.5em;
		border: 0px solid;
		border-radius: 1em;
		background-color: none;
		transition: background-color 0.3s;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}
	a:hover {
		background-color: rgba(150, 150, 150, 0.3);
	}
}
/* /GENERAL */





/* HEADER + NAVBAR */
@media screen {
	.header {
		position: relative;
		width: 100%;
		background: white;
		top: 0;
	}
	.header-container {
		margin: 0 25% 0 10%;
		padding: 3rem 0;
		max-width: 1100px;
		position: relative;
		overflow: auto;
	}
	.header h1 {
		line-height: 175%;
		display: inline;
		padding: 0 1rem 0;
		background: #d91016;
		color: white;
		font-family: 'Bree', 'Georgia', serif;
		font-size: 4vw;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}
	.header h2 {
		display: block;
		margin: 0 20% 0 0 ;
		font-family: 'Bree', 'Georgia', serif;
		font-weight: normal;
		font-size: 2vw;
	}
	.header p {
		display: block;
		position: relative;
		line-height: 150%;
		margin: 0 20% 3rem 10%;
		font-size: 1.5rem;
		position: static;
		font-family: 'Montserrat', 'Trebuchet MS', sans-serif;
	}
	.vatoplogo {
		float: right;
		top: 2rem;
		width: 20vw;
		margin: 0;
	}
	.vatoplogo img {
		width: 100%;
	}
	
	
	#lang {
		position: fixed;
		display: flex;
		top: 0;
		right: 2rem;
		font-family: 'bree';
		z-index: 999;
	}
	#lang a {
		color: black;
		text-decoration: none;
		padding: 1rem;
		font-size: 1.5rem;
		background-color: #fff;
		padding: 2rem 1rem 1rem;
		margin: 0;
		border-radius: unset;
		border: 5px solid #d91016;
		border-top: unset;
	}
	#lang a:hover, #lang a:active, #lang a.active {
		background: #d91016;
		color: #fff;
	}
	#lang a.active {	
		padding: 2rem calc(1rem - 5px) 1rem;
	}	
	
	/* TOPNAV */
	@media screen {
		/* Add a black background color to the top navigation */
		.topnav {
			font-family: 'Bree';
			text-transform: uppercase;
			background-color: #333;
			overflow: hidden;
			position: -webkit-sticky;
			z-index: 100;
			margin-bottom: 3rem;
			padding: 0 0 0 10%;
		}
		#topnav {
			position: sticky;
			top: 0;
		}

		/* Style the links inside the navigation bar */
		.topnav a {
		  float: left;
		  display: block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		  font-size: 17px;
		}
		
		/* Add an active class to highlight the current page */
		.active {
		  background-color: #d91016;
		  color: white;
		}
		
		/* Hide the link that should open and close the topnav on small screens */
		.topnav .icon {
		  display: none;
		}
		
		/* Add a dark background on topnav links and the dropdown button on hover */
		.topnav a:hover {
		  background-color: #555;
		  color: white;
		}
				
		/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
		@media screen and (max-width: 600px) {
		  .topnav {
		    padding: 0;
		  }
		  .topnav a.icon {
		    float: right;
		    display: block;
		  }
		}
		.topnav .lang {
			float: right;
		}
		.topnav .lang.active {
			color: white;
			background-color: #d91016;
		}
	}
}


/* IMAGES */
@media screen {
	section.content > div.afbeelding-volledige-breedte:first-child {
		top: 0;
	}

	section.content > div.afbeelding-volledige-breedte:first-child p {
		bottom: 7rem;
	}	
	.afbeelding-volledige-breedte {
		position: relative;
		width: 100%;
		overflow: hidden;
		margin: 0;
		top: -6rem;
		margin-bottom: -9rem;
	}

	.afbeelding-beperkte-breedte {
		position: relative;
		margin: -3rem 25% 0 10%;
		min-width: 700px;
		width: 65%;
		max-width: 1100px;
		min-height: 100px;
	}
	.afbeelding-beperkte-breedte img {
		position: relative;
		width: 100%;
		margin: 0;
		display: block;
	}
	.afbeelding-volledige-breedte img {
		position: relative;
		width: 100%;
		height: auto;
		display: block;
		z-index: -1;
	}
	.afbeelding-volledige-breedte p {
		position: absolute;
		bottom: 1rem;
		margin: 0 0 0 10%;
		padding-left: 1rem;
		z-index: 100;
		width: 100%;
		font-size: 0.9em;
		font-style: italic;
		color: #333;
	}
	.afbeelding-beperkte-breedte p {
		position: absolute;
		bottom: 0;
		right: 1rem;
		margin-bottom: -2rem;
		z-index: 2;
		font-size: 0.9em;
		font-style: italic;
		color: #333;
		text-align: right;
	}
	.afbeelding-inline {
		position: relative;
		margin: 0 2rem 2rem 3rem;
		width: calc(100% - 5rem);
		min-height: 100px;
		height:auto;
	}
	.afbeelding-inline img {
		position: relative;
		width: 100%;
		margin: 0;
		display: block;
	}
	.afbeelding-inline h1, .afbeelding-inline h2, .afbeelding-inline h3, .afbeelding-inline h4 {
		position: absolute;
		margin: 1rem 0 0 1rem;
		color: white;
		z-index: 5;
	} 
	.afbeelding-inline p {
		position: relative;
		bottom: 0;
		left: 0;
		margin: 0.7rem 0 0 1.5rem;
		z-index: 2;
		font-size: 1rem;
		font-style: italic;
		color: #333;
		text-align: left;
		display: block;
	}
}	

/* PARAGRAPHS */
@media screen {
	.paragraph {
		position: relative;
		margin: 0 25% 3rem 10%;
		padding: 3rem 0;
		min-width: 700px;
		width: 65%;
		max-width: 1100px;
		background-color: #fff;
	}
	.paragraph p {
		z-index: 2;
	}
	.paragraph > p:last-child {
		padding-bottom: 3rem;
	}
	.paragraph > p:first-child {
		padding-top: 1rem;
	}
	h1+h2 {
		margin-top: -3rem;
	}
	.inline-title {
		font-family: Bree;
		font-size: 1.5rem;
		margin-left: -2rem;
	}
	a.atdb::after {
		content: '';
		background-image: url(afbeeldingen/atdb-grey.png);
		background-size: cover;
		background-position: center;
		margin: 0 -0.4em -0.3em 0.3em;
		display: inline-block;
		width: 1.3em;
		height: 1.3em;
		transition: background-image 0.2s;
	}
	a.atdb:hover::after {
		background-image: url(afbeeldingen/atdb.png);
	}
	a.atdb {
		text-decoration: none;
		font-family: 'roboto', 'courier', monospace;
		font-size: 0.9em;
		color: inherit;
		cursor: pointer;
		background-color: #E3E3E3;
		border: 0.1em solid #DDD;
		border-radius: 1em;
		padding: 0 0.4em 0 0.6em;
		transition: border 0.2s, background-color 0.2s;
	}
	a.atdb:hover {
		background-color: #EEE;
	}
	.quote {
		margin: 1rem 3rem 1rem 5%;
		font-style: italic;
		font-size: 1.3rem;
		line-height: 1.5;
		background-color: #F3F3F3;
		border-radius: 1rem;
		padding: 1rem 2rem;
	}
	.paragraph > ul li, .paragraph > ol li {
		margin-bottom: 1rem;
	}
	.paragraph > .quote {
		margin: 0 3rem 3rem 25%;
	}
	.quote p {
		margin: 0;
		padding: 0;
	}
	.quote ol, .quote ul {
		margin: 0;
		padding: 0 1rem 0 2rem;
	}
	.timeline {
		position: relative;
		margin: 0;
		width: 100%;
	}
	.timeline::before {
		content: "";
		position: absolute;
		height: calc(100% + 9rem);
		width: 10px;
		left: 6rem;
		top: -3rem;
		bottom: -3rem;
		background-color: #333333;
	}
	.timeline > ul {
		margin: 0 0 0 6rem;
		position: relative;
		box-sizing: border-box;
		width: calc(100% - 6rem);
	}
	.timeline > ul > li {
		margin-bottom: 3rem;
		position: relative;
		list-style-type: none;
		display: flex;
		flex-direction: row;
		align-items: left;
		
	}
	.timeline > ul > li > .content {
		width: 100%;
		padding: 0 0 0 40px;
		position: relative;
		box-sizing: border-box;
	}
	.paragraph > .content {
		margin: 0 3rem 3rem calc(40px + 9rem);
		box-sizing: border-box;
	}
	.timeline h1, .timeline h2, .timeline h3, .timeline h4  {
		margin: 0 0 2rem 0;
	}
	.timeline h2 {
		line-height: 80%;
	}
	.timeline .date {
		color: #666;
		position: relative;
		margin: 0;
	}
	.timeline .title {
		left: 20px;
		display: block;
		margin-bottom: 2rem;
		padding-right: 1rem;
		font-size: 3rem;
	}
	.timeline .sourcetitle {
		font-family: RobotoMono;
		font-size: 1.5rem;
		font-weight: bold;
		margin: 0 1rem 1rem 0;
	}
	.proven .sourcetitle {
		padding-top: 1rem;
	}
	.timeline > ul > li > .content > .title:before {
		content: " ";
		display: block;
		width: 30px;
		height: 30px;
		background-color: #fff;
		border-radius: 100%;
		z-index: 2;
		border: 10px #333333 solid;
		position: absolute;
		left: -20px;
		top: -3px;
	}
	.timeline > ul > li > .content > .sourcetitle:before {
		content: "";
		background-image: url('afbeeldingen/check.svg');
		background-size: contain;
		background-color: #333;
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		box-sizing: border-box;
		z-index: 2;
		border: 5px #333333 solid;
		position: absolute;
		left: -15px;
		top: -5px;
	}
	.timeline > ul > li > .content > p {
		margin: 0 3rem 1rem 3rem;
		width: calc(100% - 6rem);
	}
	.timeline > ul > li > .content > .proven {
		font-family: RobotoMono;
		margin: 0 0 0 3rem;
		padding: 2rem 2rem 2rem;
		background-color: #ccc;
		width: calc(100% - 3rem);
		box-sizing: border-box;
	}
	.timeline > ul > li > .content > .proven.proven2 {
		margin-top: -3rem;
		padding-bottom: 1rem;
	}
	.timeline > ul > li > .content > .proven2 h4.sourcetitle {
		margin: 2rem 0 0 0;
	}
	.timeline > ul > li > .content > .proven p, .timeline > ul > li > .content > .proven h1, .timeline > ul > li > .content > .proven h2, .timeline > ul > li > .content > .proven h3, .timeline > ul > li > .content > .proven h4 {
		font-family: RobotoMono;
		margin: 0;
	}
	.content > .proven h1, .timeline > ul > li > .content > .proven h2, .timeline > ul > li > .content > .proven h3, .timeline > ul > li > .content > .proven h4 {
		font-weight: bold;
		margin-bottom: 1rem;
	}

	.sourcecontainer {
		position: relative;
		padding: 0;
		background-color: #333;
		overflow: visible;
		margin: 0 0 1rem 3rem;
		
	}
	.source {
		max-height: 0;
		width: 100%;
		padding: 0 2rem 0;
		overflow-y: auto;
		overflow-x: hidden;
		background-image: linear-gradient(to bottom, #333, #666, #666, #666, #555);
		color: #fff;
		transition: max-height 0.4s;
		box-sizing: border-box;
	}
	.source a {
		color: #fff;
		text-decoration: underline;
	}
	.source .afbeelding-inline, .proven .afbeelding-inline {
		margin: 1rem 0 1rem;
		width: 100%;
	}
	a.clickimage {
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		overflow: hidden;
		background-color: #333;
		display: block;
	}
	a.clickimage img {
		transition: filter 0.2s;
		transition: transform 0.2s ease-out;
	}
	a.clickimage:hover img {
		filter: brightness(110%);
		filter: contrast(110%);
		transform: scale(1.1);

	}
	.sourcecontainer p, .sourcecontainer h1, .sourcecontainer h2, .sourcecontainer h3, .sourcecontainer h4, .sourcecontainer h3, .sourcecontainer ul, .sourcecontainer h3 {
		font-family: RobotoMono;
		font-size: 0.9em;
		margin: 0 0 1rem;
		line-height: 150%;
	}
	.sourcecontainer h1, .sourcecontainer h2, .sourcecontainer h3, .sourcecontainer h4 {
		font-weight: bold;
	}
	.sourcecontainer li {
		font-family: RobotoMono;
		font-size: 0.9em;
		line-height: 150%;
		display: block;
		list-style-type: disc;
		margin-left: 2rem;
	}
	.source .lightgreen {
		color: lightgreen;
	}
	.source .green {
		color: #83cf35;
	}
	.source .darkgreen {
		color: darkgreen;
	}
	.source .yellow {
		color: #fce94f;
	}
	.source .blue {
		color: #729fcf;
	}
	.source .lightblue {
		color: lightblue;
	}
	.source .darkblue {
		color: darkblue;
	}
	.source .red {
		color: #ef2929;
	}
	.source .darkred {
		color: #ef2929;
	}
	.source .white {
		color: #fff;
		font-weight: bold;
	}
	.source .orange {
		color: orange;
	}
	.source .darkorange {
		color: darkorange;
	}
	.source .pink {
		color: pink;
	}
	.source .purple {
		color: purple;
	}
	.source .bleh {
		color: #;
	}
	.source .bleh {
		color: #;
	}
	.source img {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		/* border: 5px solid #eee; */
	}
	.sourcecontainer > input {
		display: none;
	}
	.sourcecontainer input[name="collapse"]:checked ~ .source {
		max-height: 100vh;
		padding-bottom: 2rem;
	}
	.sourcecontainer input[name="collapse"]:checked ~ .source:after {
	  content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3rem;
		overflow: hidden;
		background: linear-gradient(transparent, #444);
		pointer-events: none;
	}
	.sourcecontainer label {
		position: sticky;
		top: 0;
		display: block;
		float: right;
		height: 2rem;
		margin-top: -2rem;
		padding: 0.5rem;
		background-color: #333;
		color: white;
		z-index: 5;
		font-size: 1rem;
		font-family: RobotoMono;
		font-weight: bold;
		cursor: pointer;
	}
	.sourcecontainer label:hover{
		text-decoration: underline;
	}
	.sourcecontainer  label:before {
		content: "TOON BEWIJS";
	}	
		content: "VERBERG BEWIJS";
	.sourcecontainer input[name="collapse"]:checked ~ label:before {
	}
	
	
	
	
	.tiles {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		width: 100%;
		max-width: 100%;
		position: relative;
	}
	.tiles .tile {
		display: block;
		padding: 0 1rem 1rem 0;
		flex: 50%;
		max-width: calc(50% - 0.5rem);
		max-height: 100%;
	}
	.tiles .tile:nth-child(even) {
		padding-right: 0;	
	}
	.tiles h1, .tiles h2, .tiles h3, .tiles h4, .tiles p {
		margin: 0;
		padding: 0;
	}
	 .tiles .tile img, .tiles .tile p {
		display: block;
		max-height: 100%;
		min-width: 100%;
		margin: 0;
		object-fit: cover;
		width: 100%;
	}
	
	
	
	/* FOOTNOTES */
	#footnotes {
		background-color: #333;
		color: #BBB;
		margin-bottom: 0;
	}
	#footnotes a {
		text-decoration: none;
		color: inherit;
		transition: text-decoration 0.3s;
	}
	#footnotes a:hover {
		text-decoration: underline;
	}
	#footnotes ol, footnotes ul {
		font-size: 1rem;
	}
	#footnotes ol li {
		padding: 0.5rem 0 0.3rem 0.6rem;
		margin:  -0.4rem 0 -0.2rem -0.5rem;
	}
	#footnotes ol li::before {
		font-weight: bold;
	}	
	#footnotes li:target {
		background: #444;
		border-radius: 1em;
		margin: 0.5rem 0 0.5rem -0.5rem;
	}
	#footnotes li::before {
		display: block; 
		content: " "; 
		margin-top: -285px; 
		height: 285px;
	}	
	a[aria-describedby="footnote-label"] {
		text-decoration: none;
		color: inherit;
		cursor: pointer;
		vertical-align: super;
		font-size: 0.5em;
		margin: -0.3em 0 0 0.3em;
		padding: 0.3em 0.6em;
		background-color: #DDD;
		border-radius: 2em;
	}
	.expandable a[aria-describedby="footnote-label"] {
		background-color: #BBB;
	}
}

/* PARAGRAPH - SIDENOTE */
@media screen {
	.sidenote {
		position: relative;
		top: -1.3rem;
		float: right;
		clear: both;
		color: #fff;
		width: 40%;
		margin-right: calc(-40% - 3rem);
		margin-bottom: 1rem;
		display: inline;
		font-size: 1rem;
		font-style: italic;
		line-height: 1.25;
		text-decoration: none;
		z-index: 101;
	}
	.sidenote svg {
		line-height: 0;
	}
	.sidenote a {
		padding: 0;
		margin: 0;
	}
	.sidenote > .box {
		position: relative;
		margin: 0;
		text-decoration: none;
		transition: margin 0.3s;
	}
	.sidenote .arrow {
		position: absolute;
		left: -2rem;
		width: 2rem;
		height: 100%;
	}
	.sidenote .arrow svg {
		width: 2rem;
		height: 100%;
		fill: #aaa;
	}
	.sidenote .icon {
		position: absolute;
		left: -1rem;
		width: 1.5rem;
		height: 100%;
		z-index: 5;
	}
	.sidenote .icon svg {
		width: 1.5rem;
		height: 100%;
		fill: #fff;
	}
	.sidenote .content {
		position: relative;
		width: 100%;
		min-height: 1rem;
		padding: 1rem;
		background-image: linear-gradient(to right, #aaa, #aaa);
		left: 0;
	}
	.sidenote .content .text {
		color: #fff;
		text-decoration: none;
		font-size: 0.9em;
	}
	.sidenote-link {
		position: static;
	}
	.dropdown-label {
		color: #d91016;
		text-decoration: none;
		background-color: none;
		padding: 0.1em 0.5em;
		margin: 0 -0.5em;
		border: 0px solid;
		border-radius: 1em;
		transition: background-color 0.3s;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		font-weight: 500;
	}
	.sidenote-link:hover .dropdown-label {
		background-color: rgba(150, 150, 150, 0.3);
	}
	.sidenote-link:hover .sidenote .box {
		margin-left: -1rem;
		margin-right: 1rem;
	}
	.sidenote-link:hover .sidenote .content {
		background-image: linear-gradient(to right, #999, #aaa);
	}
	.sidenote-link:hover .sidenote .arrow svg {
		fill: #999;
	}
	.dropdown, .sidenote-link input[type=checkbox], .dropdown-text, .dropdown-arrow {
		display: none;
		transition: border 0.3s;
	}
	.dropdown-text {
		height: 0;
		padding: 0.5rem 2rem;
		margin: 1rem;
		background-color: #eee;
		font-style: italic;
		border: 0px solid #ddd;
		border-radius: 1rem;
		transition: height 0.3s;
		color: #267F5F;
	}
	.section-table .dropdown-text, .section-table .sidenote-link:hover .dropdown-label, section-table .sidenote-link:hover .dropdown-arrow, .section-table .sidenote-link:active .dropdown-label, section-table .sidenote-link:active .dropdown-arrow {
		background-color: #fff;
	}
}

/* For smaller screens: 
@media only screen and (max-width: 1200px) {
	.header h1, .header h2 {
		margin: 0 0 0 5%;
	}
	.header h1 {
		font-size: 6vw;
	}
	.header h2 {
		font-size: 4vw;
	}
	p {
		margin: 0 3rem 4vw 10%;
		font-size: 1.1rem;
		right: 0;
	}
	h1 {
		margin: 0 0 10% 5%;
		font-size: 5vw;
	}
	h2 {
		margin: 0 10% 4vw 5%;
		font-size: 4vw;
	}
	h3 {
		margin: 0 10% 3vw 5%;
		font-size: 3vw;
	}
	h2 + h1 {
		margin-top: -4vw;
	}
	.sidenote {
		width: 40%;
		margin-right: calc(-40% - 3rem);
	}
	.sidenote a {
		color: #fff;
	}
	.sidenote-link:active a, .sidenote-link:hover a {
		text-decoration: underline;
	}
	.sidenote-link:active .sidenote .box {
		margin-left: -1rem;
		margin-right: 1rem;
		text-decoration: underline;
	}
	.sidenote-link:active .sidenote .content {
		background-image: linear-gradient(to right, #999, #aaa);
	}
	.sidenote-link:active .sidenote .arrow svg {
		fill: #999;
	}
	.planemap {
		height: auto;
		margin-top: -3rem;
		margin-bottom: 0;
	}
}
*/

/* For smaller screens: */
@media only screen and (max-width: 850px) {

	.header h1, .header h2 {
		margin: 0 0 0 5%;
	}
	.header h1 {
		font-size: 8vw;
	}
	.header h2 {
		font-size: 4vw;
	}
	p, ul {
		margin: 0 3rem 4vw 10%;
		font-size: 1.1rem;
		right: 0;
	}
	
	h1 {
		margin: 0 0 10% 5%;
		font-size: 5vw;
	}
	h2 {
		margin: 0 10% 4vw 5%;
		font-size: 4vw;
	}
	h3 {
		margin: 0 10% 3vw 5%;
		font-size: 3vw;
	}
	h2 + h1 {
		margin-top: -4vw;
	}
	.timeline > ul {
		margin: 0 0 0 3rem;
	}
	.timeline:before {
		left: 3rem;
	}
	.timeline > ul > li > .content > p {
		margin: 0 2rem 1rem 1rem;
		width: 100%;
	}
	.timeline > ul > li > .content > .proven, .timeline > ul > li > .content > .sourcecontainer {
		margin: 0;
		width: calc(100% + 3rem);
	}
	.paragraph {
		width: 100%;
		margin-left: 0;
		min-width: 0;
	}
	.header-container {
		padding: 3rem 0 1rem;
		margin: 0 1rem 0 1rem;
	}
	.vatoplogo {
		width: 40vw;
	}
	section.content > div.afbeelding-volledige-breedte:first-child p {
		bottom: -2rem;
		left: calc(-10%);
		z-index: 100;
	}	
	.afbeelding-volledige-breedte {
		margin: 0;
		top: 0;
		overflow: visible;
	}
	.afbeelding-beperkte-breedte {
		min-width: 100%;
		margin-left: 0;
	}
	.stemgedrag {
		width: calc(100% - 2rem);
		margin: 2rem 2rem 2rem 0;
	}
	.sidenote {
		display: none;
	}
	.sidenote-link a:active, .sidenote-link a:hover {
		color: #267F5F;
	}
	.dropdown {
		display: initial;
		height: auto;
	}
	.dropdown-arrow {
		display: inline;
		padding: 0 0.2em;
		margin-left: 0.3em;
		background-color: #eee;
		border: 1px solid #aaa;
		border-radius: 1em;
		font-weight: regular;
		font-style: normal;
		font-family: sans-serif;
		color: #aaa;
	}
	.sidenote-link:active .dropdown-arrow, .sidenote-link:hover .dropdown-arrow {
		color: #666;
		background-color: transparent;
		border: 1px solid transparent;
	}
	.sidenote-link input[type=checkbox]:checked ~ .dropdown .dropdown-text {
		display: block;
		height: auto;
	}
}



.footer {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 2rem 0;
	background-color: #333;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}
.footer .footerlogo {
	flex: 1 1 0;
	width: 30vw;
	height: auto;
	max-width: 20rem;
	margin: 0 1rem;
}
.footer .footerlogo img {
	width: 30vw;
	max-width: 20rem;
}
.footer > img {
	flex: 0.5 1 0;
	width: 15vw;
	min-width: 15vw;
	height: auto;
	max-width: 15vw;
	margin: 0 1rem;
}