header#header {
	position: relative;
	background: #ffffff;
	border-bottom: solid 1px #ccc;
	padding: 0;
	/* Usually is top and bottom, changing with responsiveness */
	
	background: #222222 url('/assets/css/images/header/1.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	margin: 0;
}
nav#nav {
	height: 4em;
	background: rgba(0, 0, 0, 0.5);
	color: white;
}
#nav > ul {
	margin: 0;
}
#nav > ul > li {
	border-radius: 4px;
	display: inline-block;
	margin-left: 0.5em;
	padding: 0 0.5em;
	font-style: normal;
}
#nav > ul > li a {
	margin: 0;
	padding: 0;
	color: inherit;
	line-height: 4em;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1em;
}
#nav > ul > li:first-child {
	margin-left: 0;
}
#nav > ul > li.active a {
	color: white;
}
#nav > ul > li.current > a,
#nav > ul > li:hover > a,
#nav > ul > li.active > a {
	/* Overwriting basic layout */
	
	background: transparent;
	font-weight: 400;
}
/* Banner */

#banner {
	background: transparent;
	padding: 4em 0em 2em 0em;
	text-align: center;
	text-transform: uppercase;
	color: white;
	margin: 0 !important;
}

#banner .container {
	padding: 0em 2em;
}
#banner h2 {
	display: inline-block;
	padding: 0.50em 0.30em;
	background: rgba(0, 102, 153, 0.8);
	font-size: 3em;
	font-weight: 400;
}

@keyframes unblur {
    0%   {filter:blur(45px);}
    100% {filter:blur(0);}
}

#banner h2 img {
	filter:blur(45px);
	max-height: 140px;
	animation: unblur 1s ease-out 0s 1 forwards;
}
#banner span,
#banner p {
	display: block;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 1.6em;
	font-weight: 300;
}
#banner span {
	padding: 1em 0em;
	text-shadow: 0 0 1px black,0 0 2px black,0 0 5px black,0 0 5px black,0 0 6px black;
	/* -webkit-text-stroke: 0.5px #000; */
}

@media screen and (max-width: 736px) {
	#banner {
		padding: 2em 0em 1em 0em;
	}
	
	#banner h2 {
		display: inline-block;
		padding: 0.20em 0.10em;
	}

	#banner h2 img {
		max-height: 80px;
	}

	#banner span, #banner p {
		font-size: 1em;
		-webkit-text-stroke: 0; /* Too small for outline */
	}
}
.\32 large {
	position: relative;
	overflow: hidden;
}
.\32 large:after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	background: -webkit-linear-gradient(top, transparent 0%, white 100%);
	background: -moz-linear-gradient(top, transparent 0%, white 100%);
	background: linear-gradient(top, transparent 0%, white 100%);
	height: 40px;
	z-index: 100;
	bottom: 0;
}

#footer-wrapper .\32 large:after {
	background: -webkit-linear-gradient(top, transparent 0%, #252122 100%);
	background: -moz-linear-gradient(top, transparent 0%, #252122 100%);
	background: linear-gradient(top, transparent 0%, #252122 100%);
}

.dates a {
	text-decoration: none;
}

a.active {
	font-weight: bold;
	text-decoration: none;
}


/* kleuren */

a {
	color: #006699;
	text-decoration: underline;
}
textarea {
	resize: vertical;
	min-height: 100px;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	-webkit-appearance: none;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	border-radius: 5px;
	background: #006699;
	color: #fff !important;
	font-weight: 700;
	outline: 0;
	-moz-transition: background-color .25s ease-in-out;
	-webkit-transition: background-color .25s ease-in-out;
	-ms-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	background: #0077b3;
}
ul.dates .date {
	display: block;
	position: absolute;
	left: 0;
	top: 1.3em;
	background-color: #006699;
}
ul.dates .date:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: -1.2em;
	border-left: solid 1.25em #006699;
}
.icon.featured {
	position: relative;
	display: inline-block;
	background-color: #006699;
}
.icon.featured:after {
	content: '';
	position: absolute;
	bottom: -1.95em;
	left: 0;
	border-top: solid 2em #006699;
}
#banner header p {
	color: #006699;
}
/*#nav > ul > li.current > a {
	background: #006699;
}*/

pre {
	display: block;
	font-family: monospace;
	white-space: pre;
	font-size: 80%;
	line-height: 1.3;
	background: #f7f7f7;
	border-bottom: 1px solid #ccc;
	padding: 1em;
}

.dropotron .divider {
	height: 1px;
	background: #aaa;
	padding: 0;
	margin: 0.25em 0 0.25em 0;
}

/*
url("https://www.toptal.com/designers/subtlepatterns/patterns/bright_squares.png")
url("https://www.toptal.com/designers/subtlepatterns/patterns/brushed_alu.png")
	background: #f7f7f7 url("https://www.toptal.com/designers/subtlepatterns/patterns/light_wool.png");
*/

#main-wrapper {
	background: #f7f7f7;
	/* background: #f7f7f7 url("https://www.toptal.com/designers/subtlepatterns/patterns/brushed_alu.png"); */
}
#main-wrapper .major h2 {
	background: #f7f7f7;
	/* background: #f7f7f7 url("https://www.toptal.com/designers/subtlepatterns/patterns/brushed_alu.png"); */
}

#intro .middle:before {
	background: url('data:image/svg+xml;utf8,<svg width="20" height="140" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="top" cx="100%" cy="100%" r="100%"> <stop class="a" offset="0%"></stop> <stop class="b" offset="100%"></stop> </radialGradient> <linearGradient id="mid"> <stop class="b" offset="0%"></stop> <stop class="a" offset="100%"></stop> </linearGradient> <radialGradient id="bot" cx="100%" cy="0%" r="100%"> <stop class="a" offset="0%"></stop> <stop class="b" offset="100%"></stop> </radialGradient> <style type="text/css"> #r1{fill: url(#top);}#r2{fill: url(#mid);}#r3{fill: url(#bot);}.a{stop-color: rgba(0,0,0,.075);}.b{stop-color: transparent;}</style> </defs> <rect id="r1" x="0" y="0" width="20" height="20"></rect> <rect id="r2" x="0" y="20" width="20" height="100"></rect> <rect id="r3" x="0" y="120" width="20" height="20"></rect> </svg>');
	background-size: 100% 100%;
	box-shadow: none;
	left: -41px;
	width: 16px;
}

#intro .middle:after {
	background: url('data:image/svg+xml;utf8,<svg width="20" height="140" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="top" cx="0%" cy="100%" r="100%"> <stop class="a" offset="0%"></stop> <stop class="b" offset="100%"></stop> </radialGradient> <linearGradient id="mid"> <stop class="a" offset="0%"></stop> <stop class="b" offset="100%"></stop> </linearGradient> <radialGradient id="bot" cx="0%" cy="0%" r="100%"> <stop class="a" offset="0%"></stop> <stop class="b" offset="100%"></stop> </radialGradient> <style type="text/css"> #r1{fill: url(#top);}#r2{fill: url(#mid);}#r3{fill: url(#bot);}.a{stop-color: rgba(0,0,0,.075);}.b{stop-color: transparent;}</style> </defs> <rect id="r1" x="0" y="0" width="20" height="20"></rect> <rect id="r2" x="0" y="20" width="20" height="100"></rect> <rect id="r3" x="0" y="120" width="20" height="20"></rect> </svg>');
	background-size: 100% 100%;
	box-shadow: none;
	right: -41px;
	width: 16px;
}

.nice-uitlijning {
	display: table;
}
.nice-uitlijning > * {
	float: none;
	display: inline-block;
	vertical-align: top;
}


/* Type number was vergeten in main CSS */
form input[type=number] {
	-webkit-appearance: none;
	display: block;
	border: 0;
	padding: 0.75em 1em;
	font-size: 1em;
	border-radius: 5px;
	border: solid 1px #dddddd;
	background: #fff;
	width: 100%;
}

form input[type=number]:focus {
	box-shadow: inset 0px 0px 1px 1px #43bff0;
}






.alert {
	border: 2px dashed red;
	background: hsla(0, 100%, 90%, 1);
	line-height: 50px;
	padding: 0 20px;
	color: black;
	font-size: larger;
}

.alert.alert-success {
	border: 2px dashed green;
	background: hsla(120, 100%, 90%, 1);
}

::placeholder {
    font-style: italic;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
  }