@charset "utf-8";
/* CSS Document */
body {
	font-family: 'Montserrat', sans-serif;
	font-size:18px;
	font-size:100%;/*was 90%*/
	font-weight:300;
	color: #000000;	/*black*/
	background-color: transparant;
	margin:0;
	padding:0;
	border:0;/* This removes the border around the viewport in old versions of IE */
	width:100%;
	min-width:400px;/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	-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*/
}
* {
	box-sizing: border-box;
}
textarea, input, button, select { font-family: inherit; font-size: inherit; }
/*WEBKITBEHAVIORS*/
input[type=button], input[type=text], input[type=submit], textarea{
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius: 0;
}
select{
	width:100%;
	-webkit-appearance: none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius: 0;
}
input[type="file"] {
   	display: none;
}
.custom-file-upload{
	cursor: pointer;
	color:black;
}
input[type="submit"] {
   	display: none;
}
/*custom submitbutton uploaden beelden */
.custom-submitbutton{
	visibility:hidden;
	cursor: pointer;
	font-weight: bold;
	color:red;
	animation-name: uploadwarning;
	animation-duration: .6s;
	animation-iteration-count: infinite;
}
@keyframes uploadwarning {
	from {color: red;}
	to {color: yellow;}
}
/*custom delete button uploaden beelden */
.custom-deletebutton{
	cursor: pointer;
	color:red;
}
.custom_submitbutton_text{
	visibility:hidden;
	cursor: pointer;
	font-weight: bold;
}
/*layout bestaand*/
/* 'widths' sub menu */
#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}
/* column container */
.colmask {
	position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
    float:left;
    width:97%;			/* width of whole page */
	left:3%;
	overflow:hidden;	/* This chops off any overhanging divs */
	z-index: 0;
}
/* 1 column full page settings */
.fullpage {
	background:transparant;
}
.fullpage .col1 {
	margin:160px 0px 40px 0px;
		}
.fullpage .col2 {
	margin:220px 0px 40px 0px;
	z-index: -1;
		}
.fullpage .col3 {
	margin:240px 0px 40px 0px;
	z-index: -1;
		}

/* header and name styles */
#header{position:fixed; left:3%; width:97%; z-index:2; visibility:visible;float:left; background:transparant;}
/*
#name{height:40px; width: 1200px; font-size:30px; color:black; text-align:left; background:transparant; padding-left:0%; padding-top:10px; padding-bottom:10px;}
*/
/* Footer menu styles */
#footer {position:fixed; z-index:1; bottom: 0px; clear:both; float:left; width:100%; height:70px; left:0%; background:transparant; }
#footerwhite{position:fixed; z-index:1; bottom: 0px; clear:both; float:left; width:100%; height:70px; left:0%; background-color:#fff;}
#footergrey{position:fixed; z-index:1; bottom: 0px; clear:both; float:left; width:100%; height:70px; left:0%; background-color:rgba(225,225,225,1); }
#footer .content, #footerwhite .content, #footergrey .content{
	position: absolute;
	z-index: 1;
	padding-top: 20px;
	left:3%;
	height:60px;
	width: 1200px;
	background:transparant;
	font-size: 80%;
}
#nlen{
	position: absolute;
	text-align: left;
	font-size:30px;
	width: auto;
	top:10px;
	right:1%;
	/*letter-spacing: 4px;*/
	cursor:hand;
}

/* lauout nieuw*/
.grid-container {
   	display: grid;
   	grid-template-columns: 30% 45% 25%;
	grid-gap: 20px;
	margin-bottom: 1em;
}
.left {
	position:relative;
	z-index: -1;
	background-color: transparant;
	/*padding-left: 2%;/*procent, dus schaalt mee*/
	padding-right: 2%;
	float: left;
	left:0;
	top:0;
	width: 48%; /* The width is 50%, by default */
}
.right {
	position: inherit;
	z-index: -1;
	top:0;
	/*background-color: #f1f1f1;*/
	background-color: white;
	padding-right: 2%;/*procent, dus schaalt mee*/
	float: left;
	left:50%;
	width: 48%; /* The width is 50%, by default */
}
	.menu{
		background-color: white;
		padding-top:4%;
		padding-left: 9%;
		min-height: 50vw ;
		font-size:2vw;
	}
	.center {
			text-align: center;
			color:grey;
			font-size:90%;
	}
	.text{
		column-count: 3;
	}
	h2 {
	  column-span: all;
	}
/* Use a media query to add a break point at 800px: */
	@media screen and (max-width: 600px) {
		.right {
			width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
			top:0px;
			left:0%;
			padding-top:50%;
		}
		.left {
			width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
			margin-top:10%;
		}
	}	
/*turning loading symbol-*/
.loader{
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*buttons*/
button.task{
	width:100%;
	border: 1px solid black;
	background-color: transparent;
	cursor: pointer;
}
button.task:hover{
	color:red;
	border:1px solid red;
}