/*
dark blue  	#2c3e50
green 		#0f8b9b
orange 		#f39c12
*/

*{ font-family:'Montserrat', sans-serif; box-sizing:border-box; }
html, body{ margin:0; padding:0; font-size:16px; line-height:1.5; }
body{ overflow:hidden; min-height:100%; width:100%; background:#0f8b9b; }
main, nav, article, section, footer, header{ display:block; }
a{ color:#0f8b9b; text-decoration:none; }
.clear{ clear:both; }
.t{ display:table; width:100%; height:100%; }
.tc{ display:table-cell; vertical-align:middle; }
h1, h2{ font-weight:normal; }
h2{ margin:0 0 16px 0; font-size:32px; }
.typed-cursor{ display:none; }
.c2a{ background:#f39c12; color:#fff; cursor:pointer; display:inline-block; height:88px; line-height:88px; overflow:hidden; }
.c2a div{ padding:0 24px; }
.c2a.hide{ width:0; }

nav{ background-color:#2c3e50; height:88px; position:absolute; top:0; left:0; width:100%; z-index:2; overflow:hidden; }
nav img{ position:absolute; top:24px; left:24px; }
nav ul{ margin:0; padding:0; float:right; }
nav li{ margin:0; padding:0; display:block; float:left; list-style:none; }
nav li a{ color:#fff; height:88px; line-height:88px; padding:0 24px; display:block; position:relative; z-index:0; overflow:hidden; }
nav li:last-of-type { background-color:#f39c12; margin-left:20px; }
nav li:last-of-type .c2a{ display:block; }

header{ overflow:hidden; height:100vh; }
header.off{ height:0vh; }
header .wrap{ background-color:#0f8b9b; background-image:url('../img/header-home.jpg'); background-size:cover; height:100vh; color:#fff; padding:88px 0 48px 10%; }
header h1{ font-size:72px; line-height:80px; height:160px; letter-spacing: -1px; margin:0; }
header h1 .tc{ vertical-align:bottom; }
header p{ max-width:500px; margin:24px 0; }

div.about-us{ overflow:hidden; height:0vh; position:absolute; bottom:0; left:0; width:100%; }
div.about-us.on{ height:100vh; }
div.about-us .wrap{ background-color:#34495e; background-image:url('../img/header-sub.jpg'); background-size:cover; height:100vh; position:absolute; width:100%; left:0; bottom:0; color:#fff; padding:88px 10% 48px 10%; overflow-y:auto; }
div.about-us h1{ font-size:48px; line-height:48px; margin:0; }
div.about-us p{ max-width:500px; margin:24px 0; }

div.form{ overflow:hidden; height:0vh; position:absolute; bottom:0; left:0; width:100%; }
div.form.on{ height:100vh; }
div.form .wrap{ background-color:#34495e; background-image:url('../img/header-sub.jpg'); background-size:cover; height:100vh; position:absolute; width:100%; left:0; bottom:0; color:#fff; padding:88px 10% 48px 10%; overflow-y:auto; }
.validate-form{ position:relative; }
.form label{ display:block; position:relative; margin-top:10px; cursor:pointer; }
.form label.radio{ margin:0; display:inline-block; }
.form label.radio + .radio{ margin-left:10px; }
.form label.radio input{ margin:0 2px 0 0; position:relative; top:2px; }
.form label.disabled{ cursor:text; }
.form label span{ color:rgba(255,255,255,0.5); font-size:14px; }
.form label input[type="text"], .form label input[type="password"], .form label textarea, .form label select{ font-size: 14px; display: block; width: 100%; padding: 8px 0 8px 8px; border: 0; color: #ffffff; background: #495c6e; }
.form label select{ padding:0 0 0 8px; height:36px; }
.form label input[type="text"]:focus, .form label input[type="password"]:focus, .form label textarea:focus, .form label select:focus{ outline:0; }
.form textarea{ resize:vertical; height:170px; }
.form label.error{ color:#ff7b7b; }
.form label.error span{ color:#ff7b7b; }	
.form label.error input[type="text"], .form label.error input[type="password"], .form label.error textarea, .form label.error select{ border-color:#ff7b7b; }	
	.form label#initials{ width:35%; float:left; }
	.form label#lastname{ width:calc(65% - 10px); float:right; }
	.form label#streetname{ width:calc(65% - 10px); float:left; }
	.form label#housenumber{ width:35%; float:right; }
	.form label#zipcode{ width:35%; float:left; }
	.form label#city{ width:calc(65% - 10px); float:right; }
.form .col { width:33.3%; float:left; }
.form .col + .col{ padding-left: 20px; }	
.form .c2a{ position:absolute; bottom:0; right:0; height: 72px; line-height: 72px; }

footer{ background:#0f8b9b; padding:16px; line-height:1; font-size:14px; position:absolute; width:100%; bottom:0; left:0; }
footer ul{ margin:0; padding:0; }
footer li{ margin:0; padding:0; display:inline; list-style:none; }
footer li a, footer li{ color:rgba(255,255,255,0.5); }
footer li + li{ margin-left:16px; }

/* MODAL */
.modal{ display:none; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); width:100%; height:100%; z-index:100; }
.modal.show{ display:block; }
.modal .t.padding{ padding:10px 20px; }
.modal .wrap{ position:relative; margin:0 auto; max-width:800px; }
.modal .card{ margin:0 auto; background:#fff; width:100%; padding:20px; max-height: 100%; max-height: 100vh; max-height: calc(100vh - 20px); overflow-y:auto; overflow-x:visible; float:none; }
.modal .card h1{ margin:0; font-size:32px; color:#0f8b9b; }
.modal .card h2{ margin:0; font-size:24px; color:#0f8b9b; }
.modal .card h3{ margin:0; font-size:14px; }
.modal .card p{ margin:0 0 16px 0; font-size:14px; }
.modal .modal-close-wrap{ position:absolute; left:0; top:0; width:100%; z-index:101; }
	.modal .modal-close-wrap .modal-close{ position:absolute; right:-8px; top:-8px; width:26px; height:26px; background-image:url('../img/close.png'); background-repeat:no-repeat; cursor:pointer; }
	.modal.bedankt .wrap{ width:520px; }
	.modal.bedankt p { margin:8px 0 0 0; }
	
/* GDPR LABEL */
.gdprLabel{ position:relative; margin-top:20px; background:#495c6d; height:52px; width:246px; overflow:hidden; z-index:1; /* width:58px; transition:width 0.3s; -webkit-transition:width 0.3s; -moz-transition:width 0.3s; -ms-transition:width 0.3s; -o-transition:width 0.3s; */ }
.gdprLabel img{ width:58px; height:52px; position:absolute; top:0; left:0; display:block !important; margin:0; }
.gdprLabel .gdprText{ position:absolute; right:0; top:0; white-space:nowrap; display:table; height:100%; font-weight:bold; line-height: 18px; padding-top: 1px; }
.gdprLabel .gdprText > div{ display:table-cell; vertical-align:middle; padding-right:10px; }
.gdprLabel .gdprTitle{ font-size:14px; color:#fff; }
.gdprLabel .gdprLink a{ font-size:12px; text-decoration:none; color:#63bcc7; }
.landingpage .gdprLabel{ position:relative; bottom:auto; right:auto; float:right; margin-top:8px; }
.ontvang .c2a{ padding: 14px 16px; margin-top:16px; }
@media screen and (max-width:460px){ .gdprLabel{ float:none; } }	

@media screen and (max-width:1400px) , screen and (max-height: 650px) {
	nav{ height:72px; }
	nav img { top: 16px; left: 16px; }
	nav li a{ height:72px; line-height:72px; }
	.c2a{ height:72px; line-height:72px;  }
	.c2a div { padding: 0 16px; }
	
	header .wrap{ padding-top:72px; }
	header h1 { font-size: 48px; line-height: 56px; height: 112px; }
}

@media screen and (max-width:1000px) , screen and (max-height: 500px) {
	html, body{ font-size:14px; }
	header h1 { font-size: 40px; line-height: 48px; height: 96px; }
	
}

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fadeOut{ from{ opacity:1; } to{ opacity:0; } }
.modal{ animation:fadeIn 0.2s both; -moz-animation:fadeIn 0.2s both; -ms-animation:fadeIn 0.2s both; -o-animation:fadeIn 0.2s both; -webkit-animation:fadeIn 0.2s both; }
.modal.hide{ animation:fadeOut 0.2s both; -moz-animation:fadeOut 0.2s both; -ms-animation:fadeOut 0.2s both; -o-animation:fadeOut 0.2s both; -webkit-animation:fadeOut 0.2s both; }

header, div.form, div.about-us{ transition:height 0.7s ease; -moz-transition:height 0.7s ease; -ms-transition:height 0.7s ease; -o-transition:height 0.7s ease; -webkit-transition:height 0.7s ease; }