/*

Green 	#fdaa00
Blue 	#095180

*/

*, *::before, *::after{ box-sizing:border-box; font-family:'Roboto', 'Arial', sans-serif; hyphens:manual; }
html, body{ padding:0; margin:0; height:100%; }
body{ overflow-y:scroll; overflow-x:hidden; position:relative; min-height:100%; font-size:14px; line-height:1.6; color:#12476a; }
a{ text-decoration:none; }
.clear{ clear:both; }
header, article, main, section, nav, aside, footer{ display:block; }
h1,h2,h3,h4,h5,h6{ margin:1em 0 0 0; }
p{ margin:0 0 1em 0; }
ul, li{ margin:0; padding:0; list-style:none; }
input[type="text"], textarea{ display:block; }
.t{ display:table; width:100%; height:100%; }
.tc{ display:table-cell; vertical-align:middle; }
a{ color:#fdaa00; text-decoration:none; }
.button{ background:#fdaa00; color:#fff; padding:16px; display:inline-block; cursor:pointer; }
.button:hover, .button:focus{ background:#fd8700; }
.block a:hover, .block a:focus{ background:#2175ac !important; }

div.container{ min-height:100%; position:relative; padding-bottom:124px; }
article{ width:984px; padding:0 24px; margin:auto; }
header{ background-color:#2175ac; background-position:center center; background-size:cover; }

nav{ background:#095180; color:#fff; }
.logo{ font-weight:bold; display:block; position:relative; float:left; text-transform:uppercase; padding:17px 0 17px 38px; }
.logo::before{ content:""; position:absolute; left:0; top:12px; width:30px; height:30px; background-image:url(../img/logo.png); background-repeat:no-repeat; background-position:left center; background-size:30px; }
nav ul{ float:right; }
nav ul.nav{ }
nav ul li{ display:inline-block; position:relative; }
nav ul li a{ padding:17px 8px; display:block; color:#fff; position:relative; }
	nav ul ul{ float:none; }
	nav ul li:hover ul.submenu{ display:block; }
	nav ul li ul.submenu li:hover ul.subsubmenu{ display:block; }
	nav ul li ul.submenu, nav ul li ul.subsubmenu{ display:none; position:absolute; }
	nav ul li ul.submenu li, nav ul li ul.subsubmenu li{ display:block; white-space:nowrap; background:#095180; }
	nav ul li ul.submenu li a, nav ul li ul.subsubmenu li a{ padding:8px; }
	nav ul li ul.subsubmenu{ left:100%; top:0; }
	nav ul li ul.subsubmenu.left{ right:100%; left:auto; }
	nav ul li:hover, nav ul.submenu li:hover{ background:#1c689a; }
	nav ul li.more{ padding-right:16px; }
	nav ul li.more > a::after { content:"\f0da"; font-family:"FontAwesome"; position:absolute; right:-8px; top:8px; }
nav .menuButton{ background:#fdaa00; display:block; float:right; color:#fff; padding:16px; margin-left:8px; }
nav .menu{ display:none; }
nav .back, nav .back2{ display:none; }

.home header{ background-image:url("../img/home-header.jpg"); color:#fff; padding:160px 0; text-align:center; }
.home header h1{ font-size:40px; line-height:56px; margin:0 0 8px 0; }
.home header h2{ font-size:24px; margin:0; font-weight:normal; }
.home header .button{ margin-top:32px; }

footer{ background:#095180; padding:24px 0; position:absolute; bottom:0; left:0; height:100px; width:100%; }
footer a{ float:right; padding:16px 0; color:#fff; }
footer a + a{ margin-left:8px; }
footer .logo{ float:left; color:#fdaa00; }

/* HOME */
.home main article{ padding-left:0; }
.home main .block{ width:calc(50% - 24px); float:left; margin:24px 0 0 24px; background:#f2f4f5; padding:24px 24px 48px 24px; position:relative; z-index:0; min-height:254px; }
.home main .block h3{ font-size:24px; margin:0 0 8px 0; font-weight:normal; }
.home main .block a{ background:#319ade; color:#fff; text-align:center; padding:8px 12px; position:absolute; bottom:24px; left:24px; }

/* CONTENT */
.content header{ height:270px; background-image:url("../img/wat-is-erp.jpg"); padding-bottom:24px; color:#fff; }
.content header .tc{ vertical-align:bottom; }
.content header a{ color:#fff; }
.content header a + a::before{ content:"\f105"; font-family:"FontAwesome"; margin:0 8px; }
.content main article{ }
.content main aside{ width:40%; float:right; background:#095180; color:#fff; padding:24px; margin-top:38px; }
	.content main aside h3{ margin:0; font-weight:normal; font-size:24px; line-height:32px; }
	.content main aside h4{ margin:16px 0; }	
	.content main aside .button{ margin-top:0; }
.content main .wrap{ width:60%; float:left; padding-right:24px; }
	.content main .wrap h1{ font-size:32px; line-height:40px; font-weight:normal; margin:32px 0 16px 0; }
	.content main .wrap h2{ font-size:18px; margin:0; }
	.content main .wrap h3{ font-size:14px; color:#3e5b70; margin:0; }
	.content main .wrap ul{ margin:0 0 1em 0; }
	.content main .wrap ul li{ position:relative; padding-left:16px; }
	.content main .wrap ul li::before{ content:"\2022"; float:left; font-weight:bold; color:#fdaa00; position:absolute; top:0; left:0; }
	.content main .wrap .block{ padding:24px; background:#f2f4f5; margin-bottom:1em; }
	.content main .wrap .block p{ margin:0; }
	.content main .wrap .block a{ margin-top:1em; display:inline-block; background:#319ade; color:#fff; text-align:center; padding:8px 12px; }
	
	.content main .wrap .sitemap ul{ margin-bottom:0; }
	.content.thanks main .wrap{ width: 100%; text-align: center; padding-top: 24px; }
	.content.thanks main .wrap h2{ font-weight:normal; }
	
/* FORM */
.ontvang-wrap{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.75); z-index:7; display:none; }
.ontvang-wrap article{ width:100%; max-width:704px; padding:24px; position:relative; top: 50%; transform: translateY(-50%); }
.ontvang-wrap .close{ cursor:pointer; position:absolute; right:10px; top:10px; color:#fff; background:#000; font-size:24px; line-height:26px; border:3px solid #fff; border-radius:100%; width:32px; height:32px; padding-left:1px; text-align:center; z-index:10; }
.ontvang{ background:#fff; margin:auto; position:relative; max-height:100%; max-height:100vh; max-height:calc(100vh - 48px); overflow-y:auto; padding:24px; }	
.ontvang h2{ margin:0 0 1em 0; }
.ontvang .col{ width:50%; float:left; }
.ontvang .col.left{ padding-right:8px; }
.ontvang .col.right{ padding-left:8px; }
.ontvang .row{ height:60px; }
.ontvang label{ position:relative; width:100%; float:left; }
.ontvang label.error, .ontvang label.error span{ color:red; }
.ontvang label.error input[type="text"]{ border:1px solid red; }
.ontvang label span{font-size:12px; line-height:16px; display:inline-block; position:absolute; top:-9px; left:5px; padding:0 4px; background:#fff; color:#095180; z-index:4; white-space:nowrap; }
.ontvang input[type="text"], .ontvang select, .ontvang textarea{ width:100%; padding:9px 0 6px 8px; font-size:14px; display:block; border:1px solid #aaa; color:#095180; }
.ontvang select{ padding-left:6px; }
.ontvang label#male, .ontvang label#female{ cursor:pointer; display:inline-block; margin-top:8px; width:auto; }
.ontvang #male{ margin-right:10px; }
.ontvang input[type="radio"]{ position:relative; top:1px; margin-left:0; }
.ontvang #firstname{ width:calc(50% - 4px); float:left; }
.ontvang #lastname{ width:calc(50% - 4px); float:right; }
.ontvang #streetname{ width:calc(60% - 4px); float:left; }
.ontvang #housenumber{ width:calc(40% - 4px); float:right; }
.ontvang #zipcode{ width:calc(40% - 4px); float:left; }
.ontvang #city{ width:calc(60% - 4px); float:right; }
.ontvang #users_now{ width:calc(50% - 4px); float:left; }
.ontvang #users_future{ width:calc(50% - 4px); float:right; }
.ontvang .button{ margin-top:16px; } 
.ontvang textarea{ resize:vertical; min-height:48px; }
.ontvang label.passive span{ top:10px; background:transparent; cursor:text; }
.ontvang label span{ transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; -webkit-transition:all 0.2s ease; }


@media screen and (max-width:1032px){
	header{ padding:96px 0; }
	article{ width:792px; }
	
	.home main .block { min-height:248px; }
}

@media screen and (min-width:817px){ nav ul.nav{ height:auto !important; } }
@media screen and (max-width:816px){
	article{ width:100%; }
	
	nav article{ padding:0; }
	nav .logo{ margin-left:24px; }
	nav .back, nav .back2{ display:block; background:#1c689a; position:absolute; width:calc(100% / 3); left:calc(100% / 3); top:0; padding:17px 24px 17px 35px; cursor:pointer; }
	nav .back2{ left:calc(200% / 3); }
	nav .back::before, nav .back2::before{ content:"\f0d9"; font-family:'FontAwesome'; position:absolute; left:24px; top:16px; display:inline-block; font-weight:normal; }
	nav .menu{ display:block; float:right; margin-right:24px; padding:16px 0 16px 16px; font-weight:bold; cursor:pointer; }
	nav .menu::after{ content:"\f078"; font-family:'FontAwesome'; margin-left:4px; display:inline-block; font-weight:normal; }
	nav .menu.active::after { content:"\f077"; }
		
	nav ul li a::after { content:"\f0da"; font-family:"FontAwesome"; position:absolute; top:17px; right:24px; }
	nav ul li ul.submenu a::after{ content:""; }
	nav ul li ul.submenu li.more{ padding-right:0; }
	nav ul li ul.submenu li.more a::after { content:"\f0da"; font-family:"FontAwesome"; position:absolute; top:17px; right:24px; }	
	nav ul li ul.submenu li.more ul.subsubmenu a::after{ content:""; }
	
	nav ul.nav{ float:none; clear:both; position:absolute; width:300%; left:0; top:56px; overflow:hidden; background:#095180; height:0; z-index:2; }
	nav ul li{ display:block; width:calc(100% / 3); position:static; }
	nav ul li a, nav ul li ul.submenu li a, nav ul li ul.subsubmenu li a{ padding:17px 24px; }
	nav ul li ul.submenu.show, nav ul li ul.subsubmenu.show{ display:block; }
	nav ul li ul.submenu{ width:100%; left:calc(100% / 3); top:56px; }
	nav ul li ul.subsubmenu{ width:100%; left:calc(100% / 3); top:0; }
	
	.home main article{ padding-left:24px; }
	.home main .block { padding:24px; min-height:auto; width:100%; margin-left:0; }
	.home main .block a{ display:inline-block; position:static; margin-top:8px; }
	
	.content header{ height:200px; }
}

@media screen and (max-width:650px){
	div.container{ padding-bottom:158px; }
	
	.home header{ padding:100px 0; }
	
	.content main aside{ width:100%; float:none; }
	.content main .wrap{ width:100%; float:none; padding-right:24px; }
	
	footer{ height:126px; }
	footer .logo{ float:none; }
	footer a{ float:none; }
	footer a + a { margin-left:0; margin-right:8px; }
}

@media screen and (max-width:500px){
	.ontvang .col{ width:100%; }
	.ontvang .col.left, .ontvang .col.right{ padding:0; }
}


/* ANIMATIONS */
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fade-out{ from{ opacity:1; } to{ opacity:0; } }

.ontvang-wrap{ animation:fade-in 0.2s both;-moz-animation:fade-in 0.2s both;-ms-animation:fade-in 0.2s both;-o-animation:fade-in 0.2s both;-webkit-animation:fade-in 0.2s both; }
.ontvang, .ontvang-wrap .close{ animation:slide-bottom-in 0.3s both;-moz-animation:slide-bottom-in 0.3s both;-ms-animation:slide-bottom-in 0.3s both;-o-animation:slide-bottom-in 0.3s both;-webkit-animation:slide-bottom-in 0.3s both; }
.ontvang-wrap.hide{ animation:fade-out 0.2s both;-moz-animation:fade-out 0.2s both;-ms-animation:fade-out 0.2s both;-webkit-animation:fade-out 0.2s both;-o-animation:fade-out 0.2s both; }
.ontvang-wrap.hide .ontvang, .ontvang-wrap.hide .close{ animation:slide-bottom-out 0.3s both;-moz-animation:slide-bottom-out 0.3s both;-ms-animation:slide-bottom-out 0.3s both;-o-animation:slide-bottom-out 0.3s both;-webkit-animation:slide-bottom-out 0.3s both; }

nav ul.nav{ transition:left 0.2s, height 0.2s; -moz-transition:left 0.2s, height 0.2s; -ms-transition:left 0.2s, height 0.2s; -o-transition:left 0.2s, height 0.2s; -webkit-transition:left 0.2s, height 0.2s; }

.button, .block a{ transition:background-color 0.2s; -moz-transition:background-color 0.2s; -ms-transition:background-color 0.2s; -o-transition:background-color 0.2s; -webkit-transition:background-color 0.2s; }