@font-face {
	font-family: MADE Mirage;
	font-weight: 400;
	src: url("../fonts/made-mirage.otf") format("opentype");
	}

@font-face {
	font-family: Silka;
	font-weight: 400;
	src: url("../fonts/silka.otf") format("opentype");
	}

* {
	margin: 0;
	padding: 0;
	border: none;
	underline: none;
	outline: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	}

html, body {
	width: 100%;
	height: 100%;
	background: #e0d2c8 url(../img/noise.png);
	font-family: "Silka", Arial, sans-serif;
	color: #151515;
	}

#preloader {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	top: 0; left: 0;
	}

#bg {
	width: 100%;
	height: 100%;
	background: #e0d2c8 url(../img/noise.png);
	}

#preloader-logo {
	width: 200px;
	position: relative;
	margin: 0 auto;
	top: 50%;

	transition: all 1s ease;
	}

.draw-logo {
	width: 100%;
//	height: 66px;
	stroke: #000;
	fill: transparent;
	stroke-width: 0.2px;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	transition: stroke-dashoffset 12s ease;
	margin-top: -68px;
	}

#pointer {
	width: 46px;
	height: 46px;
	position: fixed;
	border: 1px solid rgba(177, 166, 158, 0.7);
	border-radius: 99px;
	z-index: 60;
	pointer-events: none;
	margin-top: -25px;
	margin-left: -25px;

	transition: border .4s ease, transform .4s ease, top .1s ease, left .1s ease;
	}

#pointer.click {
	border: 1px solid #90867f;
	transform: scale(0.65);
	}

#pointer.hide {
	border: 1px solid rgba(177, 166, 158, 0);
	transform: scale(0);
	}

.no {
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/noise.png);
	display: block;
	}

#preloader {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99;
	top: 0; left: 0;
	}

#preloader.done {
	display: none;
	}

#preloader-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	background: #1d1d1b;
//	background: #444;
	top: 0; left: 0;

	transition: all 1s cubic-bezier(0.77, 0.25, 0.18, 1);
	}

h1, h2, h3, #logo p, .sub-title {
	font-family: Made Mirage;
	font-weight: 400;
	text-transform: uppercase;
	}

#header {
	width: 100%;
	position: absolute;
	top: 0; left: 0;
	}

.menu li {
	list-style: none;
	display: inline-block;
	margin-top: 85px;
	margin-right: 70px;
	}

.menu li a {
//	font-family: Made Mirage;
	font-size: 16px;
	color: #151515;
	letter-spacing: 1px;
	text-transform: uppercase;
	}

.menu li:after {
	width: 0;
	height: 1px;
	background: #bfb2a9;
	content: "";
	display: block;
	margin-top: 12px;

	transition: width .7s ease;
	}

.menu li:hover:after {
	width: 100%;
	}

#logo {
	width: 200px;
	position: absolute;
	margin-left: -100px;
	top: 60px; left: 50%;
	}

.icon {
	width: 68px;
	height: 46px;
	background: url(../img/swb-logo.svg);
	margin: 0 auto 20px auto;
	}

#logo p {
	font-size: 15px;
	color: #000;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 1px;
	}

#contact-button {
	position: absolute;
	background: #d0c0b5;
	font-size: 15px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	border-radius: 99px;
	cursor: pointer;
	padding: 20px 36px;
	top: 70px; right: 0;

	transition: background .5s ease;
	}

#contact-button:hover {
	background: #c1b2a7;
	}

.block {
	width: 100%;
	position: relative;
	display: inline-block;
	padding: 150px 0;
	}

.block.ns {
	padding: 0;
	}

.block.dark {
//	background: #c2b7af;
	background: #d0c0b5 url(../img/noise.png);
	}

.block.arc:after, .block.arc-2:after {
	width: 600px;
	height: 900px;
	position: absolute;
	background: #d8c9be;
	background: linear-gradient(0deg, rgb(222, 209, 199) 0%, rgb(208, 192, 181) 100%);
	border-radius: 999px 999px 0 0;
	content: "";
	top: -100px; left: 50%;
	margin-left: -300px;
	}

.block.arc-2:after {
	position: absolute;
	background: linear-gradient(0deg, rgb(222, 209, 199) 0%, rgb(208, 192, 181) 100%);
	border-radius: 999px 999px 0 0;
	content: "";
	opacity: 0.5;
	top: 450px; left: 30%;
	margin-left: -300px;
	margin-bottom: -150px;
	}

.block.ac {
	margin-top: -300px;
	}

.block.ac.nmb {
	margin-top: 0;
	}

.block.banner {
	width: 80%;
	background: url(../img/laura-banner.jpg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	left: 10%;
	}

.block.banner.full-img {
	box-shadow: 0 20px 120px rgba(0, 0, 0, 0.17);
	float: left;
	padding: 0;
	}

.block.frame:after {
	width: 100%;
	height: 48.8%; /* aanpassen */
	position: absolute;
	background: #d0c0b5;
	content: "";
	left: 0; bottom: 0;
	}

.block.banner:after {
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0, 0, 0, 0.8);
	content: "";
	top: 0; left: 0;
	}

.full-img img {
	width: 100%;
	position: relative;
	z-index: 1;
	float: left;
	}

.holder {
	width: 1500px;
	position: relative;
	margin: 0 auto;
	}

#hero {
//	margin-top: 350px;
	margin-top: 300px;
	margin-bottom: 200px;
	}

#hero.home .holder {
	width: 1000px;
	}

#hero h1 {
	font-size: 120px;
	text-transform: uppercase;
	letter-spacing: -2px;
	text-align: center;
	margin-bottom: 60px;
	}

#hero.home h1 {
	font-size: 80px;
	}

#hero h1 span {
	display: inline-block;
	}

#hero h1 span, h2 .l-h {
	position: relative;
	opacity: 0;
	display: inline-block;
	filter: blur(7px);
	transform: rotateX(45deg) rotate3d(0, 0, 10, -4deg);
	top: 60px;

	transition: opacity 1.5s ease, filter 1s ease, top 1.5s ease, transform 1.8s ease;
	}

#hero h1 span.show, h2 .l-h.show, h2 .line.show .l-h {
	opacity: 1;
	filter: blur(0);
	top: 0;
	transform: rotateX(0deg);
	}

.ld {
	width: 1px;
	height: 60px;
	position: relative;
	background: #bfb2a9;
//	margin: 0 auto 90px auto;
	margin: 30px auto 60px auto;
	}

.center .ld {
	margin: 30px auto 50px auto;
	}

#hero p {
	width: 520px;
	font-size: 18px;
	letter-spacing: -0.4px;
	line-height: 190%;
	text-align: center;
	margin: 0 auto;
	}

.block p {
	position: relative;
	top: 20px;
	opacity: 0;
	filter: blur(5px);

	transition: filter 1.5s ease, opacity 2s ease, top 2s ease;
	}

.block p.show {
	top: 0;
	opacity: 1;
	filter: blur(0);
	}

.arrow-down {
	width: 200px;
//	height: 400px;
//	height: 300px;
	height: 200px;
	position: relative;
//	background: #d8c9be;
	background: linear-gradient(0deg, rgb(222, 209, 199) 0%, rgb(208, 192, 181) 100%);
	border-radius: 999px 999px 0 0;
//	margin: 120px auto -350px auto;
	margin: 120px auto -200px auto;
	}

.laura-2 .sub-title, .laura-2 h2 {
	margin-left: 70px;
	}

.laura-2 .text-holder p {
	width: 480px;
	margin-top: 70px;
	}

.laura-pic-2 {
	width: 600px;
	position: absolute;
//	border-radius: 16px;
	border: 6px solid #efefef;
	box-shadow: 0 20px 120px rgba(0, 0, 0, 0.14);
	opacity: 0;
	top: -100px; right: 0;

	transform: rotate(8deg);

	transition: opacity 1s ease, top 1s ease, transform 1s ease;
	}

.laura-pic-2.show {
	opacity: 1;
	top: -200px;
	transform: rotate(2deg);
	}

.laura-2 .signature {
	position: absolute;
	z-index: 2;
	margin-top: -135px;
//	top: 490px;
//	right: 0;
	right: 370px;
	}

.block.right .holder {
	width: 1300px;
	}

.block.right .text-holder {
	float: right;
	}

.block.right .text-holder h2, .block.right .sub-title {
	text-align: right;
	}

.block.right p {
	width: 500px;
	padding-top: 340px;
	}

.full-img img.small-pic {
	width: 300px;
	position: absolute;
	border-radius: 999px;
	top: -225px; right: 400px;
	}

.full-img img.small-pic:active {
	border-radius: 0;
	border: 8px solid #d0c0b5;
	}


#contactForm {
	width: 900px;
	position: relative;
//	background: #9c8e84;
	background: #ac9a91;
	box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.05);
	display: table;
	padding-bottom: 80px;
	margin: 80px auto -150px auto;
	}

.form-holder {
	box-sizing: border-box;
	padding: 60px;
	}

.form-left, .form-right {
	width: 49%;
	float: left;
	}

.form-right {
	float: right;
	}

.contactHolder {
	margin-bottom: 70px;
	}

.contactHolder span {
	position: absolute;
	pointer-events: none;
	margin-top: 12px;
	}

#contactForm input, #contactForm textarea {
	width: 80%;
	background: none;
	border-bottom: 1px solid #4a3b34;
	padding: 12px 0;
	}

#contactForm textarea {
	height: 262px;
	resize: none;
	}

.contactHolder span, .contactHolder input, #contactForm textarea {
	font-family: "Manrope";
	font-size: 18px;
	}

#contactForm input#verstuur {
	width: 50%;
	background: #463b35;
	font-family: "Manrope";
	font-size: 18px;
	color: #ede7e4;
	cursor: pointer;
	padding: 18px 0;

	transition: background .4s ease;
	}

#contactForm input#verstuur:hover {
	background: #6d5950;
	}

#melding, #message {
	font-size: 17px;
	color: #bc0a0a;
	display: none;
	margin-top: 18px;
	}

#melding.show, #message.show {
	display: block;
	}

#melding.sent, #message.sent {
	color: #29641a;
	}

#footer {
	width: 100%;
	background: #ccbbb3;
	padding: 150px 0 100px 0;
	margin-top: -100px;
	}

#footer-logo {
	width: 80px;
	height: 54px;
	position: relative;
	background: url(../img/swb-logo.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	margin-bottom: 20px;
	}

.left-block {
	float: left;
	margin-right: 220px;
	}

.left-block p {
	font-size: 15px;
	display: block;
	}

.column {
	display: inline-block;
	vertical-align: top;
	margin: 0 100px;
	}

.column.right {
	float: right;
	}

.column h3 {
	position: relative;
	font-size: 20px;
	letter-spacing: 0.3px;
	margin-bottom: 48px;
	}

.column h3:before {
	width: 16px;
	height: 2px;
	position: absolute;
	background: #94837b;
	content: "";
	bottom: -24px; left: 0;
	}

.column li {
	line-height: 170%;
	list-style: none;
	margin-bottom: 28px;
	}

.column li, .column li a {
	font-size: 18px;
	color: #514c40;

	-webkit-transition: color .4s ease;
	-moz-transition: color .4s ease;
	-ms-transition: color .4s ease;
	-o-transition: color .4s ease;
	transition: color .4s ease;
	}

.column li a {
	display: inline-block;
	}

.column li a:after {
	width: 0;
	height: 1px;
	background: #222;
	content: "";
	display: block;

	-webkit-transition: width .7s ease;
	-moz-transition: width .7s ease;
	-ms-transition: width .7s ease;
	-o-transition: width .7s ease;
	transition: width .7s ease;
	}

.column li a:hover {
	color: #222;
	}

.column li a:hover:after {
	width: 100%;
	}

.development p {
	font-size: 14px;
	color: #3d3d3d;
	margin-top: 40px;
	}

.development p a {
	font-weight: 600;
	color: #3d3d3d;
	display: inline-block;
	}

.development p a:after {
	width: 0;
	height: 1px;
	background: #222;
	content: "";
	display: block;
	margin-top: 6px;

	-webkit-transition: width .7s ease;
	-moz-transition: width .7s ease;
	-ms-transition: width .7s ease;
	-o-transition: width .7s ease;
	transition: width .7s ease;
	}

.development p a:hover:after {
	width: 100%;
	}