@charset "utf-8";
/* CSS Document */
@import url('https://fonts.cdnfonts.com/css/genome');
body {
	font-family: 'Quicksand', sans-serif;
	/*	font-family: 'Genome', sans-serif;*/
	font-size:18px;
		/*font-weight: bold;*/
	-ms-overflow-style: none; /*hides scrolbars in IE while overflow is still scrollable */
	-webkit-overflow-scrolling: touch; /*makes scrolling in safari fluent*/
	-webkit-font-smoothing: antialiased;/*toegevoegd*/
	text-rendering: optimizeLegibility;/*toegevoegd*/
}
swiper-container::part(button-prev) {
	color: black;
	width: 10%;
	height: 10%;
}
swiper-container::part(button-next) {
	color: black;
	width: 10%;
	height: 10%;
}
* {
	box-sizing: border-box;
}
.left {
	position:fixed;
	z-index: 10;
	background-color: white;
	float: left;
	left:0;
	top:0;
	width: 20%; /* The width is 20%, by default */
	font-size: 100%;/*test*/
}
.main {
	position: absolute;
	top:0;
	/*background-color: #f1f1f1;*/
	background-color: white;
	padding: 2%;/*procent, dus schaalt mee*/
	float: left;
	/*left:20%;*/
	left:30%;
	/*width: 80%; /* The width is 80%, by default */
	width: 60%;
}
.menu{
	background-color: white;
	padding-top:4%;
	padding-left: 9%;
	min-height: 40vw ;
	/*font-size:100%;*/
	font-size:inherit;
}
.center {
	text-align: center;
	color:grey;
	font-size:90%;
}
.text{
	column-count: 3;
}
h2 {
  column-span: all;
}
#image_hor{
	display:block;
}
#image_ver{
	display:none;
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 600px) {
	.main {
		width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
		left:0%;
		padding-top:40%;
	}
	.left {
		width: 100%; /* The width is 50%, when the viewport is 600px or smaller */
		font-size: 100%;/*test*/
	}
	.logo{
		float:left;
		width:50%;
	}
	.menu{
		text-align: end;
		padding-right: 5%;
		width:45%;
		float:right;
		/*font-size:100%;*/
	}
	div.accordion:after{
		text-align: end;
	}
	div.accordion,div.panel {
		float:right;
	}
	.text{
		column-count: 1;
	}
	center{
		font-size:80%;/*werkt niet bij apple*/
	}
	#image_hor{
		display:none;
	}
	#image_ver{
		display:block;
	}
}
/* Link styles */
a{text-decoration: none;}
/* unvisited link */
a:link {
  color: #A4A4A4;
}

/* visited link */
a:visited {
  color: #A4A4A4;
}

/* mouse over link */
a:hover {
  color: #1C1C1C;
}

/* selected link */
a:active {
  color: #1C1C1C;
}
a.black:link,a.black:visited{
	color:black;
}
a.black:hover,a.black:active{
	color:#233AAF;
}
p.titel{font-size:150%; font-weight: bold; color:black;}
p.facts{ font-size:0.9em; display:inline; color:#AAAAAA; font-style:italic; font-weight:lighter; }
.black {color:black;}
/*image grayscale/color*/
img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover,img.grayscale:visited {
  filter: none;
  -webkit-filter: grayscale(0%);
}
img.grayscalenohover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
/*houdt afbeelding en tekst bij elkaar op de project pagina*/
.image-container {
  width: 100%; /* Stel hier de gewenste breedte in */
  overflow: hidden; /* Voorkom dat de inhoud buiten het container-element valt */
}

.image-container img {
  display: block; /* Zorgt ervoor dat de afbeelding geen extra witruimte heeft */
  max-width: 100%; /* Zorgt ervoor dat de afbeelding niet groter is dan de container */
  height: auto;
  margin-bottom: 5px; /* Voeg wat ruimte toe tussen de afbeelding en de tekst */
}

.image-container p {
  /*word-wrap: break-word;  Standaard manier om woorden te breken */
  overflow-wrap: break-word; /* Moderne en meer betrouwbare optie */
}
.text_no_image{
	overflow-wrap: break-word;
}