body {
			background-color: #262626;
			font-family: Montserrat, sans-serif;
			font-size: 1.0em;
			font-weight: 200;
			color: #fff;
		}
		
		.wrapper {
			height: 100%;
			overflow-x: hidden !important;
			overflow-y: scroll;
			width: 100%;
			position: relative;
		}
		/* xs < 768 */
		
		@media screen and (max-width: 767px) {
			body {
				font-size: 1.2em;
			}
		}
		/* sm */
		
		@media screen and (min-width: 768px) {
			body {
				font-size: 1.2em;
			}
		}
		/* md */
		
		@media screen and (min-width: 992px) {
			body {
				font-size: 1.1em;
			}
		}
		/* lg */
		
		@media screen and (min-width: 1200px) {
			body {
				font-size: 1.3em;
			}
		}
		
		#backgrounddiv {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.75);
			z-index: -1;
		}

		/* unvisited link */
		
		a:link {
			color: white;
		}
		/* visited link */
		
		a:visited {
			color: white;
		}
		/* mouse over link */
		
		a:hover {
			color: #1ABC9C;
		}
		
		p {
			font-weight: 200;
		}
		
		p1 {
			font-size: 15px;
			line-height: 0;
			letter-spacing: 0.5px;
			font: Montserrat, sans-serif;
			font-weight: 200;
		}
		
		p2 {
			font-size: 20px;
			line-height: 0;
			letter-spacing: 1.0px;
			color: black;
			font-weight: 500;
		}
		
		p3 {
			font-size: 23px;
			line-height: 0;
			letter-spacing: 1.5px;
			color: black;
			font: Montserrat, sans-serif;
			font-weight: 900;
		}
		
		p4 {
			font-size: 30px;
			line-height: 0;
			letter-spacing: 1.5px;
			color: black;
			font: Montserrat, sans-serif;
			font-weight: 500;
		}
		
		p.contact {
			font-weight: 200;
			font-size: 14px;
			line-height: 2.3;
			margin-top: 24px;
			margin-left: -15px;
		}
		/* xs < 768 */
		
		@media screen and (max-width: 767px) {
			p.contact {
				text-align: center;
			}
		}
		
		h1 {
			font-size: 60px;
			text-transform: uppercase;
			color: black;
			font-weight: 400;
			margin-top: 10px;
			padding-bottom: 0px;
			padding-top: 60px;
			letter-spacing: 3px;
		}
		
		h2 {
			font-size: 60px;
			text-transform: uppercase;
			color: #303030;
			font-weight: 400;
			margin-top: -70px;
			padding-bottom: 50px;
			padding-top: 60px;
			letter-spacing: 3px;
		}
		
		h3 {
			font-size: 60px;
			text-transform: uppercase;
			color: white;
			font-weight: 400;
			margin-top: -70px;
			padding-bottom: 50px;
			padding-top: 60px;
			letter-spacing: 3px;
		}
		
		h4 {
			font-size: 30px;
			text-transform: uppercase;
			color: white;
			font-weight: 100;
			padding-top: 40px;
			margin-bottom: 20px;
			letter-spacing: 3px;
		}
		
		h5 {
			font-size: 30px;
			text-transform: uppercase;
			color: white;
			font-weight: 100;
			padding-top: 0px;
			margin-bottom: 20px;
			letter-spacing: 3px;
		}
		
		@media only screen and (max-width: 1000px) {
			h5 {
				font-size: 20px;
			}
		}
		
		.formfont {
			font-family: Montserrat, sans-serif;
			font-size: 14px;
			font-weight: 200;
			color: white;
		}
		
		.margin {
			margin-bottom: 45px;
		}
		
		.margin0 {
			margin-bottom: 1px;
		}
		
		.catmargin {
			margin-bottom: 30px;
		}
		
		.imgmargin {
			margin-bottom: 30px;
		}
		
		@media only screen and (min-width: 1200px) {
			.marginform {
				padding-right: 45px;
			}
		}
		
		.bg-1 {
			background-color: #1abc9c;
			/* Green */
			color: #ffffff;
		}
		
		.bg-2 {
			background-color: #474e5d;
			/* Dark Blue */
			color: #ffffff;
		}
		
		.bg-3 {
			background-color: #ffffff;
			/* White */
			color: #555555;
		}
		
		.bg-4 {
			background-color: #262626;
			/* Black*/
			color: #white;
		}
		
		.center-block {
			display: block;
			margin-right: auto;
			margin-left: auto;
		}
		
		.container-fluid {
			padding-top: 70px;
			padding-bottom: 70px;
		}
		/* border around skills */
		
		.borderskills {
			margin-right: -1px;
			outline: 1px solid;
			outline-color: #1abc9c;
			outline-offset: -15px;
			padding-bottom: 65px;
			font-size: 14px;
			font-weight: 200;
			line-height: 2.5;
		}
		
		@media (max-width: 767px) {
			.borderskills {
				outline: 0px;
			}
		}
		/* TABLE equal */
		
		@media (min-width: 768px) {
			.row.equal {
				display: flex;
				flex-wrap: wrap;
			}
		}
		/* figure image */
		
		figure {
			display: inline-block;
			margin-bottom: 30px;
			/* adjust as needed */
		}
		
		figure img {
			vertical-align: top;
		}
		
		figure figcaption {
			border: 1px solid white;
			padding-top: 5px;
			padding-bottom: 5px;
			text-align: center;
		}
		/* navbar */
		
		.navbar-default {
			background-color: #262626;
			padding-top: 15px;
			padding-bottom: 15px;
			border: 0;
			border-radius: 0;
			margin-bottom: 0;
			font-size: 11px;
			letter-spacing: 5px;
		}
		/* Title */
		
		.navbar-default .navbar-brand {
			color: white;
			font-size: 15px;
		}
		
		.navbar-default .navbar-brand:hover,
		.navbar-default .navbar-brand:focus {
			color: #1ABC9C;
		}
		/* Link */
		
		.navbar-default .navbar-nav>li>a {
			color: white;
		}
		
		.navbar-default .navbar-nav>li>a:hover,
		.navbar-default .navbar-nav>li>a:focus {
			color: #1ABC9C;
		}
		
		.navbar-default .navbar-nav>.active>a,
		.navbar-default .navbar-nav>.active>a:hover,
		.navbar-default .navbar-nav>.active>a:focus {
			color: #1ABC9C;
			background-color: #262626;
		}
		
		.navbar-default .navbar-nav>.open>a,
		.navbar-default .navbar-nav>.open>a:hover,
		.navbar-default .navbar-nav>.open>a:focus {
			color: #1ABC9C;
			background-color: #1ABC9C;
		}
		/* Caret Navbar*/
		
		.navbar-default .navbar-nav>.dropdown>a .caret {
			border-top-color: #777;
			border-bottom-color: #777;
		}
		
		.navbar-default .navbar-nav>.dropdown>a:hover .caret,
		.navbar-default .navbar-nav>.dropdown>a:focus .caret {
			border-top-color: #333;
			border-bottom-color: #333;
		}
		
		.navbar-default .navbar-nav>.open>a .caret,
		.navbar-default .navbar-nav>.open>a:hover .caret,
		.navbar-default .navbar-nav>.open>a:focus .caret {
			border-top-color: #555;
			border-bottom-color: #555;
		}
		/* Mobile version */
		
		.navbar-default .navbar-toggle {
			border-color: #DDD;
		}
		
		.navbar-default .navbar-toggle:hover,
		.navbar-default .navbar-toggle:focus {
			background-color: #DDD;
		}
		
		.navbar-default .navbar-toggle .icon-bar {
			background-color: #CCC;
		}
		
		@media (max-width: 767px) {
			.navbar-default .navbar-nav .open .dropdown-menu>li>a {
				color: #777;
			}
			.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
			.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
				color: #333;
			}
		}
		/* Custom Buttons*/
		
		.button {
			background-color: #1ABC9C;
			/* Green */
			border: none;
			color: white;
			padding: 15px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 14px;
			margin: 4px 2px;
			cursor: pointer;
		}
		
		.button1 {
			background-color: white;
			color: black;
			border: 2px solid #1ABC9C;
			/* Green */
			width: 100%;
			margin-bottom: 30px;
		}
		
		.button1:hover {
			background-color: #1ABC9C;
			/* Green */
			color: white;
		}
		
		.selec {
			background-color: #1ABC9C;
		}
		/* vormgeving mail form formulier */
		
		input.dave {
			border-radius: 0px;
		}
		
		textarea.dave {
			border-radius: 0px;
		}
		
		.btn {
			border-radius: 0px;
			background-color: #1ABC9C;
		}
		
		.btn-success.disabled:hover {
			background-color: #1ABC9C;
		}
		
		.btn-succes {
			background-color: #1ABC9C;
		}
		/* MODAL CODE */
		
		.modall {
			height: 100%;
			width: 100%;
			display: none;
			position: fixed;
			z-index: 3000;
			top: 0;
			left: 0;
			background-color: #262626;
			overflow-y: hidden;
			overflow-x: hidden;
			-webkit-overflow-scrolling: touch;
			color: #fff;
		}
		
		@media only screen and (min-width: 1500px) {
			.modall {
				max-width: 1800px;
				margin: auto;
				bottom: 0;
				right: 0;
				color: #fff;
			}
		}
		
		.modall-content {
			position: relative;
			top: 0px;
			/* waar modal begint met tekst (Margin) */
			width: 100%;
			height: 100%;
			text-align: left;
			margin-top: 80px;
			background-color: #262626;
			overflow-y: hidden;
			overflow-x: hidden;
			color: #fff;
			border: 0px;
		}
		
		.modall a {
			padding: 0px;
			text-decoration: none;
			color: #fff;
			display: hidden;
			transition: 0.3s;
		}
		
		.modall a:hover,
		.modall a:focus {
			color: #1ABC9C;
		}
		
		.modall .closebtn {
			position: absolute;
			top: 5px;
			right: 25px;
			font-size: 50px;
			/* grootte van knop */
		}
		

/* PROJECTEN BESCHRIJVING */
		.projectdescription {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			padding-bottom: 10px;
			width: 40%;
			max-height: 100%;
			padding-left: 30px;
			padding-right: 15px;
			overflow-y: hidden;
			color: #fff;
		}
		
		.imageviewer {
			position: absolute;
			top: 0;
			right: 0;
			padding-right: 30px;
			padding-left: 15px;
			padding-bottom: 80px;
			max-height: 100%;
			width: 60%;
			overflow-y: auto;
			color: #fff;
		}
		/*@media screen and (max-height: 450px) {
	.modall {
		overflow-y: hidden;
	}
	.modall a {
		font-size: 20px
	}
	.modall-content {
		position: relative;
		width: 100%;
		text-align: left;
		margin-top: 30px;
	}
}*/
		
		@media only screen and (max-width: 850px) {
			.modall-content {
				top: -30px;
				overflow-y: auto;
				padding-bottom: 30px;
				color: #fff;
			}
			.projectdescription {
				position: static;
				left: 0;
				width: 100%;
				max-height: 100%;
				padding-left: 15px;
				padding-right: 15px;
				bottom: auto;
				color: #fff;
				font-weight: 200;
			}
			.imageviewer {
				position: static;
				padding-left: 15px;
				padding-right: 15px;
				width: 100%;
				overflow-y: hidden;
				max-height: none
			}
			.modall .closebtn {
				position: absolute;
				top: -10px;
				right: 10px;
				font-size: 50px;
				/* grootte van knop */
			}
			.imgmargin {
				margin-bottom: 15px;
			}
			figure {
				margin-bottom: 15px;
			}
		}

/* EXPERIMENTEEL NIEUWE PHOTOBOOK */
.photobook {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding-left: 15px;
	padding-right: 15px;
	height: 20%;
	width: 100%;
	overflow-y: hidden;
	color: white;
	text-align: center;
}

.photobooktext {
	position: relative;
	margin: auto;
	padding-left: 15px;
	padding-right: 15px;
	overflow-y: hidden;
	color: white;
	max-width: 800px;
	text-align: left;
	align-self: center;
	font-size: 15px;
}

.photobookviewer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 55px;
	height: 80%;
	width: 100%;
	overflow-y: hidden;
	color: white;
}

		/*@media only screen and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px) {
	/* iPhone 6 and iPhone 6+ portrait and landscape */
		/*.photobook {
		height: 0%;
		display: none;
	}
	.photobooktext {
		display: none;
	}
	.photobookviewer {
		bottom: 55px;
		height: 100%;
	}
}*/
		
/* PHOTOALBUM voor fotos */
		.albumdescription {
			position: absolute;
			top: 0;
			left: 0;
			padding-bottom: 20px;
			width: 30%;
			max-height: 100%;
			padding-left: 15px;
			padding-right: 15px;
			overflow-y: auto;
			color: white;
		}
		
		.albumviewer {
			position: absolute;
			top: 0;
			right: 0;
			padding-right: 30px;
			padding-left: 15px;
			padding-bottom: 80px;
			max-height: 100%;
			width: 70%;
			overflow-y: auto;
			color: white;
		}
		
		@media only screen and (max-width: 800px) {
			.albumdescription {
				position: static;
				width: 100%;
				max-width: 100% max-height: auto;
				bottom: auto;
			}
			.albumviewer {
				position: static;
				padding-left: 15px;
				padding-right: 15px;
				width: 100%;
				overflow-y: hidden;
				max-height: none
			}
		}
		/* W3 animations */
		
		.w3-animate-opacity {
			animation: opac 0.8s
		}
		
		@keyframes opac {
			from {
				opacity: 0
			}
			to {
				opacity: 1
			}
		}
		/* CUSTOM CODE BOOTSTRAP OFFSET RIGHT */
		
		.col-xs-offset-right-12 {
			margin-right: 100%;
		}
		
		.col-xs-offset-right-11 {
			margin-right: 91.66666667%;
		}
		
		.col-xs-offset-right-10 {
			margin-right: 83.33333333%;
		}
		
		.col-xs-offset-right-9 {
			margin-right: 75%;
		}
		
		.col-xs-offset-right-8 {
			margin-right: 66.66666667%;
		}
		
		.col-xs-offset-right-7 {
			margin-right: 58.33333333%;
		}
		
		.col-xs-offset-right-6 {
			margin-right: 50%;
		}
		
		.col-xs-offset-right-5 {
			margin-right: 41.66666667%;
		}
		
		.col-xs-offset-right-4 {
			margin-right: 33.33333333%;
		}
		
		.col-xs-offset-right-3 {
			margin-right: 25%;
		}
		
		.col-xs-offset-right-2 {
			margin-right: 16.66666667%;
		}
		
		.col-xs-offset-right-1 {
			margin-right: 8.33333333%;
		}
		
		.col-xs-offset-right-0 {
			margin-right: 0;
		}
		
		@media (min-width: 768px) {
			.col-sm-offset-right-12 {
				margin-right: 100%;
			}
			.col-sm-offset-right-11 {
				margin-right: 91.66666667%;
			}
			.col-sm-offset-right-10 {
				margin-right: 83.33333333%;
			}
			.col-sm-offset-right-9 {
				margin-right: 75%;
			}
			.col-sm-offset-right-8 {
				margin-right: 66.66666667%;
			}
			.col-sm-offset-right-7 {
				margin-right: 58.33333333%;
			}
			.col-sm-offset-right-6 {
				margin-right: 50%;
			}
			.col-sm-offset-right-5 {
				margin-right: 41.66666667%;
			}
			.col-sm-offset-right-4 {
				margin-right: 33.33333333%;
			}
			.col-sm-offset-right-3 {
				margin-right: 25%;
			}
			.col-sm-offset-right-2 {
				margin-right: 16.66666667%;
			}
			.col-sm-offset-right-1 {
				margin-right: 8.33333333%;
			}
			.col-sm-offset-right-0 {
				margin-right: 0;
			}
		}
		
		@media (min-width: 992px) {
			.col-md-offset-right-12 {
				margin-right: 100%;
			}
			.col-md-offset-right-11 {
				margin-right: 91.66666667%;
			}
			.col-md-offset-right-10 {
				margin-right: 83.33333333%;
			}
			.col-md-offset-right-9 {
				margin-right: 75%;
			}
			.col-md-offset-right-8 {
				margin-right: 66.66666667%;
			}
			.col-md-offset-right-7 {
				margin-right: 58.33333333%;
			}
			.col-md-offset-right-6 {
				margin-right: 50%;
			}
			.col-md-offset-right-5 {
				margin-right: 41.66666667%;
			}
			.col-md-offset-right-4 {
				margin-right: 33.33333333%;
			}
			.col-md-offset-right-3 {
				margin-right: 25%;
			}
			.col-md-offset-right-2 {
				margin-right: 16.66666667%;
			}
			.col-md-offset-right-1 {
				margin-right: 8.33333333%;
			}
			.col-md-offset-right-0 {
				margin-right: 0;
			}
		}
		
		@media (min-width: 1200px) {
			.col-lg-offset-right-12 {
				margin-right: 100%;
			}
			.col-lg-offset-right-11 {
				margin-right: 91.66666667%;
			}
			.col-lg-offset-right-10 {
				margin-right: 83.33333333%;
			}
			.col-lg-offset-right-9 {
				margin-right: 75%;
			}
			.col-lg-offset-right-8 {
				margin-right: 66.66666667%;
			}
			.col-lg-offset-right-7 {
				margin-right: 58.33333333%;
			}
			.col-lg-offset-right-6 {
				margin-right: 50%;
			}
			.col-lg-offset-right-5 {
				margin-right: 41.66666667%;
			}
			.col-lg-offset-right-4 {
				margin-right: 33.33333333%;
			}
			.col-lg-offset-right-3 {
				margin-right: 25%;
			}
			.col-lg-offset-right-2 {
				margin-right: 16.66666667%;
			}
			/* moet andere 8,333 zijn ofzo*/
			.col-lg-offset-right-1 {
				margin-right: 11.33333333%;
			}
			.col-lg-offset-right-0 {
				margin-right: 0;
			}
		}
		
		@media (min-width: 1500px) {
			.col-xl-offset-right-12 {
				margin-right: 100%;
			}
			.col-xl-offset-right-11 {
				margin-right: 91.66666667%;
			}
			.col-xl-offset-right-10 {
				margin-right: 83.33333333%;
			}
			.col-xl-offset-right-9 {
				margin-right: 75%;
			}
			.col-xl-offset-right-8 {
				margin-right: 66.66666667%;
			}
			.col-xl-offset-right-7 {
				margin-right: 58.33333333%;
			}
			.col-xl-offset-right-6 {
				margin-right: 50%;
			}
			.col-xl-offset-right-5 {
				margin-right: 41.66666667%;
			}
			.col-xl-offset-right-4 {
				margin-right: 33.33333333%;
			}
			.col-xl-offset-right-3 {
				margin-right: 25%;
			}
			/* moet andere 16,333 zijn ofzo*/
			.col-xl-offset-right-2 {
				margin-right: 18.0%;
			}
			.col-xl-offset-right-1 {
				margin-right: 8.33333333%;
			}
			.col-xl-offset-right-0 {
				margin-right: 0;
			}
		}
		/* CUSTOM XL COLUMNS */
		
		@media (min-width: 1500px) {
			.col-xl-1,
			.col-xl-2,
			.col-xl-3,
			.col-xl-4,
			.col-xl-5,
			.col-xl-6,
			.col-xl-7,
			.col-xl-8,
			.col-xl-9,
			.col-xl-10,
			.col-xl-11,
			.col-xl-12 {
				float: left;
				position: relative;
				min-height: 1px;
				padding-right: 15px;
				padding-left: 15px;
			}
			.col-xl-12 {
				width: 100%;
			}
			.col-xl-11 {
				width: 91.66666667%;
			}
			.col-xl-10 {
				width: 83.33333333%;
			}
			.col-xl-9 {
				width: 75%;
			}
			.col-xl-8 {
				width: 66.66666667%;
			}
			.col-xl-7 {
				width: 58.33333333%;
			}
			.col-xl-6 {
				width: 50%;
			}
			.col-xl-5 {
				width: 41.66666667%;
			}
			.col-xl-4 {
				width: 33.33333333%;
			}
			.col-xl-3 {
				width: 25%;
			}
			.col-xl-2 {
				width: 16.66666667%;
			}
			.col-xl-1 {
				width: 8.33333333%;
			}
			.col-xl-pull-12 {
				right: 100%;
			}
			.col-xl-pull-11 {
				right: 91.66666667%;
			}
			.col-xl-pull-10 {
				right: 83.33333333%;
			}
			.col-xl-pull-9 {
				right: 75%;
			}
			.col-xl-pull-8 {
				right: 66.66666667%;
			}
			.col-xl-pull-7 {
				right: 58.33333333%;
			}
			.col-xl-pull-6 {
				right: 50%;
			}
			.col-xl-pull-5 {
				right: 41.66666667%;
			}
			.col-xl-pull-4 {
				right: 33.33333333%;
			}
			.col-xl-pull-3 {
				right: 25%;
			}
			.col-xl-pull-2 {
				right: 16.66666667%;
			}
			.col-xl-pull-1 {
				right: 8.33333333%;
			}
			.col-xl-pull-0 {
				right: auto;
			}
			.col-xl-push-12 {
				left: 100%;
			}
			.col-xl-push-11 {
				left: 91.66666667%;
			}
			.col-xl-push-10 {
				left: 83.33333333%;
			}
			.col-xl-push-9 {
				left: 75%;
			}
			.col-xl-push-8 {
				left: 66.66666667%;
			}
			.col-xl-push-7 {
				left: 58.33333333%;
			}
			.col-xl-push-6 {
				left: 50%;
			}
			.col-xl-push-5 {
				left: 41.66666667%;
			}
			.col-xl-push-4 {
				left: 33.33333333%;
			}
			.col-xl-push-3 {
				left: 25%;
			}
			.col-xl-push-2 {
				left: 16.66666667%;
			}
			.col-xl-push-1 {
				left: 8.33333333%;
			}
			.col-xl-push-0 {
				left: auto;
			}
			.col-xl-offset-12 {
				margin-left: 100%;
			}
			.col-xl-offset-11 {
				margin-left: 91.66666667%;
			}
			.col-xl-offset-10 {
				margin-left: 83.33333333%;
			}
			.col-xl-offset-9 {
				margin-left: 75%;
			}
			.col-xl-offset-8 {
				margin-left: 66.66666667%;
			}
			.col-xl-offset-7 {
				margin-left: 58.33333333%;
			}
			.col-xl-offset-6 {
				margin-left: 50%;
			}
			.col-xl-offset-5 {
				margin-left: 41.66666667%;
			}
			.col-xl-offset-4 {
				margin-left: 33.33333333%;
			}
			.col-xl-offset-3 {
				margin-left: 25%;
			}
			.col-xl-offset-2 {
				margin-left: 16.66666667%;
			}
			.col-xl-offset-1 {
				margin-left: 8.33333333%;
			}
			.col-xl-offset-0 {
				margin-left: 0;
			}