@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;
	}

.review-holder {
	padding: 400px auto;
	}

.review.holder .review {
	width: 700px;
	position: relative;
	background: #e0d2c8 url(../img/noise.png);
	box-sizing: border-box;
	padding: 40px 50px;
	margin: 0 auto;
	}

.review.holder .review p {
	font-size: 18px;
	}

@media screen and (min-width: 931px) {

.dropdown {
	position: absolute;
	background: #403933;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.17);
	opacity: 0;
	display: none;
	margin-top: 20px;
	margin-left: 100px;

	transition: opacity .4s ease, margin-top .4s ease;
	}

.dropdown.visible {
	display: block;
	}

.dropdown.show {
	opacity: 1;
	margin-top: 10px;
	}

.dropdown:before {
	width: 15px;
	height: 5px;
	position: absolute;
	background: url(../img/dropdown-arrow.svg);
	content: "";
	top: -4px; left: 40px;
	}

.menu .dropdown li {
	display: block;
	margin-top: 0;
	margin-right: 0;

	transition: background .4s ease;
	}

.menu .dropdown li:after {
	display: none;
	}

.menu .dropdown li:first-child {
	border-radius: 10px 10px 0 0;
	}

.menu .dropdown li:last-child {
	border-radius: 0 0 10px 10px;
	}

.menu .dropdown li:nth-child(even) {
	background: #39332d;
	}

.menu .dropdown li:hover {
	background: #1f1c19;
	}

.menu .dropdown li a {
	font-size: 14px;
	color: #fff;
	display: block;
	padding: 16px 20px;
	}

.menu .dropdown li:first-child a {
	padding-top: 22px;
	}

.menu .dropdown li:last-child a {
	padding-bottom: 22px;
	}

	}

#contact-b {
	display: none;
	}

html, body {
	width: 100%;
	height: auto;
	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;
	opacity: 0;
	margin: 0 auto;
	top: 50%;
	filter: blur(2px);

	transition: all .7s ease;
	}

#preloader-logo.show {
	opacity: 1;
	filter: blur(0);
	}

.draw-logo {
	width: 100%;
//	height: 66px;
	stroke: #000;
	fill: transparent;
	stroke-width: 0.2px;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	transition: stroke-dashoffset 8s 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);
	}

::moz-selection {
	background: #cab8ab;
	}

::selection {
	background: #cab8ab;
	}

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

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

#header {
	width: 100%;
	position: fixed;
//	background: linear-gradient(0deg, rgba(222, 209, 199, 0) 0%, rgba(222, 209, 199, 1) 100%);
	background: url(../img/header.png);
	z-index: 99;
	padding-bottom: 90px;
	top: 0; left: 0;
	}

#blur {
	width: 100%;
	height: 80%;
	position: absolute;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	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%;
	}

.menu li.aanbod:before {
	width: 7px;
	height: 7px;
	position: relative;
	background: url(../img/drop-arrow.svg);
	float: right;
	content: "";
	margin-left: 10px;
	top: 5px;
	}

#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.l-3 {
	background: url(../img/laura-banner-3.jpg);
	background-size: cover;
	background-position: center;
	}

.block.banner.l-4 {
	background: url(../img/laura-banner-4.jpg);
	background-size: cover;
	background-position: center;
	}

.block.banner.praktijk {
	background: url(../img/praktijk-banner.jpg);
	background-size: cover;
	background-position: center;
	}


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

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

.frame-bg {
	width: 100%;
	height: 48.8%; /* aanpassen */
	position: absolute;
	background: #d0c0b5;
	left: 0; bottom: 0;
	}

.block.banner:after {
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0, 0, 0, 0.65);
	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 0.8s ease, filter 0.5s ease, top 0.5s ease, transform 1.2s ease;
	}

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

h2 .line {
	display: block;
	}

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

.ld:after {
	width: 1px;
	height: 0%;
	position: absolute;
	background: #bfb2a9;
	content: "";
	top: 0; left: 0;

	transition: height 1s ease;
	}

.ld.show:after {
	height: 100%;
	}

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

#hero p {
	width: 520px;
	position: relative;
	font-size: 18px;
	letter-spacing: -0.4px;
	line-height: 190%;
	text-align: center;
	margin: 0 auto;
	top: 20px;
	opacity: 0;
	filter: blur(5px);

	transition: filter 0.5s ease, opacity 1s ease, top 0.6s ease;
	}

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

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

	transition: filter 0.5s ease, opacity 1s ease, top 1s ease;
	}

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

.block p a {
	color: #000;
	border-bottom: 1px solid #9d9088;
	padding-bottom: 7px;

	transition: padding-bottom .3s ease;
	}

.block p a:hover {
	padding-bottom: 10px;
	}

.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: 520px;
	margin-top: 70px;
	}

.over-button {
	position: relative;
	color: #000;
	display: table;
	padding-bottom: 12px;
	margin-top: 60px;
	margin-left: 40px;
	}

.over-button:before {
	width: 50px;
	height: 50px;
	position: absolute;
	background: #cec1b7;
	border-radius: 99px;
	content: "";
	margin-top: -10px;
	margin-left: -20px;
	transform: scale(1);

	transition: transform .6s ease;
	}

.dark .over-button:before {
	background: #bfb0a6;
	}

.over-button:hover:before {
	transform: scale(0);
	}

.over-button:after {
	width: 90%;
	height: 1px;
	position: relative;
	background: #000;
	display: block;
	content: "";
	top: 10px;

	transition: width .5s ease, opacity .5s ease, top .5s ease;
	}

.over-button:hover:after {
	width: 70%;
	opacity: 0.4;
	top: 18px;
	}

.over-button .text {
	position: relative;
	z-index: 1;

	transition: margin-left .5s ease;
	}

.over-button:hover .text {
	margin-left: -10px;
	}

.over-arrow {
	width: 50px;
	height: 50px;
	position: absolute;
	background: #222 url(../img/arrow-right-white.svg);
	border-radius: 99px;
	margin-left: 3px;
	top: -10px;
	transform: scale(0);

	transition: transform .6s ease;
	}

.over-button:hover .over-arrow {
	transform: scale(1);
	}

.laura-img {
	width: 600px;
	position: absolute;
	top: 0; right: 0;
	}

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

	transform: rotate(3deg);

	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: relative;
	z-index: 2;
	margin-top: -230px;
	left: 0;
	}

.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;
	}

.logos {
	display: flex;
	justify-content: center;
	}

.logos img {
	width: 80px;
	}

.d-line {
	width: 1px;
	height: 36px;
	background: #b3a69c;
	margin: 0 50px;
	}

picture {
	position: relative;
	display: inline-block;
	}

.image {
	width: 100%;
	height: 800px;
	overflow: hidden;
	margin-bottom: -4px;
	}

.image img {
	width: 100%;
	transition: margin-top .2s ease;
	}

#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;
	}

.web {
    display: none;
    }

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

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

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	}

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

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

#page {
	display: none;
	}

#contactForm input#verstuur {
	width: 50%;
	background: #463b35;
	font-family: "Silka";
	font-weight: 400;
	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 {
	position: relative;
	float: left;
	z-index: 5;
	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;
	margin-right: 0;
	}

.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%;
	}

.socials {
	margin-top: 50px;
	}

.social {
	width: 40px;
	height: 40px;
	position: relative;
//	background: #333;
	border: 1px solid #978a84;
	border-radius: 99px;
	display: inline-block;
	float: left;
	overflow: hidden;
	margin-right: 18px;

	transition: border .4s ease;
	}

.social:after {
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/linkedin-icon.svg);
	background-size: cover;
	content: "";
	top: 0; left: 0;

	transition: background-position .4s ease;
	}

.social:hover:after {
	background-position: 0 -2px;
	}

.social:before {
	width: 150%;
	height: 150%;
	position: absolute;
	background: #b5a69e;
	border-radius: 999px;
	content: "";
	margin-left: -25%;
	top: 100%; left: 0;

	transition: top .35s ease;
	}

.social.youtube:before {
	background: #b5a69e;
	}

.social:hover:before {
	top: 0;
	}

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

.development p a {
	color: #3d3d3d;
	text-shadow: 0px 0px 1px #3d3d3d;
	letter-spacing: -0.5px;
	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%;
	}