/*
CLOUD 		#ecf0f1
SILVER 		#bdc3c7
ASPHALT 	#34495e
BLUE 		#3498db
ORANGE 		#ff6600
*/
*{ font-family: 'Open Sans', sans-serif; box-sizing:border-box; }
html{ height:100%; }
html, body{ padding:0; margin:0; color:#34495e; }
body{ font-size:14px; line-height:24px; overflow-y:scroll; overflow-x:hidden; margin:0; position:relative; min-height:100%; }
a{ text-decoration:none; color:#34495e; }
p{ margin:0 0 16px 0; }
header, article, main, section{ display:block; }
h1{ margin:0; font-weight:normal; font-size:46px; line-height:54px; }
h1.medium { font-size: 42px; line-height: 52px; }
h1.small { font-size: 34px; line-height: 46px; }
h1.smaller { font-size: 32px; line-height: 42px; }  
h2{ margin:0 0 24px 0; font-size:30px; font-weight:normal; line-height:48px; }
h3{ font-size:16px; line-height:24px; font-wieght:bold; margin:24px 0 0 0; }
ul, li{ margin:0; padding:0; list-style:none; }
table, tr, td{ width:100%; border-collapse:collapse; table-layout:fixed; }
label{ cursor:pointer; -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; }
input[type="text"], textarea, select{ border:1px solid #bdc3c7; }
input[type="checkbox"], input[type="radio"]{ margin:0 3px 0 0; position:relative; top:2px; cursor:pointer; }
input:disabled, .c2a.disabled{ cursor:default; opacity:0.2; }

.clear{ clear:both; }
.t{ display:table; width:100%; height:100%; }
.tc{ display:table-cell; vertical-align:middle; }
.c2a{ background:#ff6600; font-weight:bold; display:inline-block; color:#fff; padding:8px 12px; border-radius:4px; cursor:pointer; -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; }
.c2a:not(.disabled):hover{ background:#ff8433; }
.c2a.blue, .c2a.blue.disabled:hover{ background:#3498db; }
.c2a.blue:hover{ background:#2980b9; }

/* LAY OUT */
.wrap{ overflow:hidden; padding-bottom:160px; }
main{ padding:0 64px; position:relative; }
article{ width:100%; max-width:1224px; margin:auto; position:relative; z-index:1; }
header{ height:calc(100vh - 96px); min-height: 664px; margin:0 24px; overflow:hidden; padding:0 64px; position:relative; color:#fff; background-color:#ecf0f1; z-index:2; background-repeat: no-repeat; }
header a{ color:#84ceff; }
header p{ margin:8px 0 32px 0; }
header:not(.home) p{ width:50%; }
header::after{ content: ""; width:80%; height: 100%; background: rgba(52, 73, 94, 0.9); position: absolute; top: 0; left: -25%; transform: skew(-10deg); }
header.home::after{ background: rgba(52, 73, 94, 0.6); }

nav{ padding:24px; }
nav a.logo{ font-weight:bold; letter-spacing:2px; font-size:15px; position:relative; padding-left:26px; }
nav a.logo::before { content: ""; width: 20px; height: 20px; position: absolute; left: 0; top: 0px; background-image: url('../images/kompas.jpg'); }
nav ul{ margin:0 5px 0 0; float:right; }
nav li{ display:block; float:left; }
nav li.active a{ color:#3498db; }
nav li + li::before{ content:"\2022"; color:#bdc3c7; margin:0 24px; }
nav .t, nav .tc{ display:inline; }
.hb{ float:right; position:relative; cursor:pointer; display:none; margin-top:2px; z-index:5; }
.hb span{ width:24px; height:4px; background:#34495e; display:block; }
.hb span:first-of-type{ margin-bottom:10px; }
.hb i{ width:24px; height:4px; background:#34495e; display:block; position:absolute; top:7px; }

/* HOME */
header.home{ padding:0; background-color:#34485d; color:#fff; }
header.home a{ color:#fff; }
header.home p, header.home h1{ position:relative; z-index:1; color:#fff; }
header.home::before{ content: ""; background-image: url('../images/office.jpg'); background-size:cover; background-position:right; background-repeat:no-repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
header.home article{ width:744px; }
main.home{ padding:0 24px }

	/* CUBE */
	.cube-wrapper{ height:368px; position:relative; z-index:2; color:#34495e;  }
	.cube-wrapper.animate{ perspective:1000px; -webkit-perspective:1000px; -moz-perspective:1000px; ms-perspective:1000px; -o-perspective:1000px; }
	.cube-wrapper::after{ content: ""; position: absolute; z-index: -1; width: 696px; height: 0px; bottom: 0; left: 24px; box-shadow: 0 0 100px 5px rgba(0,0,0,0.5); display:none; }
	.cube{  width:100%; position:absolute; transform:translateZ(-372px);  transform-style:preserve-3d; transition:transform 0.6s; -webkit-transform-style:preserve-3d; -webkit-transition:transform 0.6s; -moz-transform-style:preserve-3d; -moz-transition:transform 0.6s; -ms-transform-style:preserve-3d; -ms-transition:transform 0.6s; -o-transform-style:preserve-3d; -o-transition:transform 0.6s; }
	.cube-side{ margin:0; padding:24px; width:100%; height:368px; position:absolute; transform: translateZ(-100px); background:#fff; }
		.cube-side.front{ transform: rotateY(0deg) translateZ(372px); }
			.cube-side.front ul{ margin:0 0 0 -24px;  }
			.cube-side.front input[type="radio"]{ display:none; }
			.cube-side.front li{ display:block; width:96px; height:96px; float:left; margin:24px 0 0 24px; font-size:12px; line-height:16px; background:#ecf0f1; border-radius:2px; text-align:center; position:relative; color:#3498db; cursor:pointer; -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; }
			.cube-side.front li:hover{ }
			.cube-side.front li.active{ background:#3498db; color:#fff; }
			.cube-side.front li.active .fa.fa-question-circle{ color:#fff; }
			.cube-side.front .tc{ padding-top:40px; }
			.cube-side.front li .fa{ position:absolute; left:0; top:16px; width:100%; font-size:35px; text-align:center; }
			.cube-side.front li .fa.fa-question-circle{ display:none; font-size:14px; top:2px; right:2px; left:initial; width:auto; text-align:right; color:#bdc3c7; }
			.cube-side.front li .fa-wrench, .cube-side.front li .fa-medkit{ font-size:32px; }
		
		.cube-side.right{ transform: rotateY( 90deg) translateZ(372px); }
			.cube-side.right .slider-employees-amount, .cube-side .slider-users-amount{ margin-right:4px;  width:35px; text-align:center; border-color:#bdc3c7; }
			.cube-side.right .slider-employees-wrapper, .cube-side .slider-users-wrapper{ text-align:center; margin:0 auto; width:456px; position:relative; }
			.cube-side.right .slider-users-wrapper{ margin-top:64px; }
			.cube-side.right .slider-employees, .cube-side .slider-users{ width:456px; margin:24px auto; }
			.cube-side.right label{ position:absolute; left:0; top:0; }
			.cube-side.right .t{ height: calc(100% - 45px ); }
		
		.cube-side.back{ transform: rotateX(180deg) rotateZ(180deg) translateZ(372px); }
			.cube-side.back .form{ margin-top:16px; }
			.cube-side.back .row.sex{ margin-bottom:10px; }
			.cube-side.back .col{ width:50%; float:left; }
			.cube-side.back .col.one{ padding-right:4px; }
			.cube-side.back .col.two{ padding-left:4px; }
			.cube-side.back .col .row{ height:40px; padding-bottom:8px; }
			.cube-side.back .col .row.sex{ padding-top:4px; }
			 
			.cube-side.back .margin{ width:8px; }
			.cube-side.back textarea{ width:100%; height:192px; resize:none; display:block; padding:4px 0 0 8px; border-radius:2px; }
			.cube-side.back input[type="text"]{ width:100%; height:32px; display:block; padding-left:8px; border-radius:2px; }
			.cube-side.back input[type="text"].error { border-color: #e60000; }
			.cube-side.back label{ margin-right:16px; }
			.cube-side.back .row.sex.error{ color:#e60000; }
			.cube-side.back #firstname{ width:calc(50% - 4px); float:left; }
			.cube-side.back #lastname{ width:calc(50% - 4px); float:right; }
			.cube-side.back #streetname{ width:calc(60% - 4px); float:left; }
			.cube-side.back #housenumber{ width:calc(40% - 4px); float:right; }
			.cube-side.back #zipcode{ width:calc(40% - 4px); float:left; }
			.cube-side.back #city{ width:calc(60% - 4px); float:right; }
			
		.cube-side.left{ transform: rotateY(-90deg) translateZ(372px); text-align:center; }
		.cube-side.left h2{ margin: 0 0 0 0; font-size: 32px; font-weight: normal; line-height: 56px; }
		.cube-side.left .tc{ padding-bottom:20px; }
	
	.cube .c2a.prev{ position:absolute; bottom:24px; left:24px; }	
	.cube .c2a.prev::before { content: "\f104"; font-family: FontAwesome; margin-right: 8px; font-size: 15px; }
	.cube .c2a.next{ position:absolute; bottom:24px; right:24px; }
	.cube .c2a.next::after { content: "\f105"; font-family: FontAwesome; margin-left: 8px; font-size: 15px; }
	.cube .steps{ float:right; font-size:12px; }
	

/* ARROWS */
.arrow{ position:absolute; top:128px; height:96px; width:38px; cursor:pointer; z-index:3; display:none; }
.arrow.disabled, .arrow:hover.disabled{ opacity:0; cursor:default; }
.arrow.right { right:-80px; }
.arrow.left { left:-80px; }
.arrow::before, .arrow::after{ content:""; position:absolute; background-color:#ecf0f1; }
.arrow::before{ top:0; left:14px; height:48px; width:14px; }
.arrow::after{ top:47px; left:14px; height:48px; width:14px; }
.arrow:hover::after, .arrow:hover::before{ background-color:#fff; }
.arrow.right::before{ -ms-transform: skewX(24deg); -webkit-transform: skewX(24deg); transform: skewX(24deg); }
.arrow.right::after{ -ms-transform: skewX(-24deg); -webkit-transform: skewX(-24deg); transform: skewX(-24deg); }
.arrow.left::before{ -ms-transform: skewX(-24deg); -webkit-transform: skewX(-24deg); transform: skewX(-24deg); }
.arrow.left::after{ -ms-transform: skewX(24deg); -webkit-transform: skewX(24deg); transform: skewX(24deg); }

/* LEGEND */
.legend{ line-height: normal; width:auto; margin:24px auto 0 auto; height:40px; position:relative; z-index:1; white-space:nowrap; }
.legend .fa{ font-size:30px; position:absolute; top:5px; left:0; }
.legend td{ width:auto; margin:auto; font-size: 12px; vertical-align:middle; position:relative; display:none; cursor:pointer; -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; }
.legend td.show{ display:table-cell; }
.legend td:nth-of-type(1){ padding-left:34px; }
.legend td:nth-of-type(2){ padding-left:62px; }
.legend td:nth-of-type(2) .fa{ left:30px; }
.legend .employees, .legend .users{ display:none; }
.legend .t, .legend .tc{ display:inline; }
.legend .fa-question-circle{ display:none; }
.legend .fa-industry, .legend .fa-shopping-basket, .legend .fa-desktop{ font-size: 25px; }
.legend .fa-briefcase{ left: -8px; font-size: 33px; }
.legend .fa-medkit{ font-size: 33px; top: 3px; left: -7px; }
.legend .fa-desktop{ top: 8px; }
.legend .fa-barcode, .legend .fa-flag, .legend .fa-truck, .legend .fa-wrench{ left:-7px; }

/* TESTIMONIALS */
.testimonials{ margin:96px auto; }
.testimonials table{ width:100%; }
.testimonials td{ vertical-align:top; }
.testimonial{ width:360px; position:relative; padding-left:40px; }
.testimonial.one{ float:left; }
.testimonial.two{ margin:auto; }
.testimonial.three{ float:right; }
.testimonial::before{ content:"\201C"; position:absolute; left:0; top:0; font-family:"Georgia", "Times New Roman", serif; font-size:55px; line-height:1; font-weight:bold; color:#bdc3c7; }
.testimonial p{ color:#bdc3c7; font-style:italic; margin:16px 0 0 0; }

/* FAQ */
.faq{ background:#ecf0f1; padding:72px 120px; }
.faq h2{ margin:0; text-transform:uppercase; font-weight:normal; font-size:32px; line-height:40px; float:left; }
.faq .text{ width:480px; float:right; }

/* OVER ONS */
main.over-ons{ background-image:url('../images/skyline-grey.jpg'); background-repeat:repeat-x; }
header.over-ons{ background-image:url('../images/over-ons.jpg'); background-size:cover; background-position:right; color:#fff; }
div.over-ons{ margin:96px 0; max-width:480px;  padding-bottom: 160px; }
.skyline{ background-image: url(../images/skyline.png); background-repeat: repeat-x; width: 100%; height: 357px; margin-top: -225px; position: absolute; left: 0; z-index: -1; opacity:.5; }

/* HOE HET WERKT */
header.hoe-het-werkt{ background-image: url('../images/hoe-het-werkt.jpg'); background-position:right; background-size:cover; }
header.hoe-het-werkt h1, header.hoe-het-werkt p{ position: relative; z-index: 2; }
main.hoe-het-werkt article{ position:relative; height:2000px; padding-top:60px; }
main.hoe-het-werkt .step{ width:100%; height:33%; clear:both; position: relative; z-index: 2; }
main.hoe-het-werkt .step:nth-of-type(1) .t{ float:right; width:480px; }
	main.hoe-het-werkt .step:nth-of-type(1)::before { content: ""; background-image: url('../images/hoe-het-werkt-1.png'); height: 394px; width: 555px; position: absolute; left: 0; top: calc(50% - 200px); }
main.hoe-het-werkt .step:nth-of-type(2) .t{ float:left; width:480px; }
	main.hoe-het-werkt .step:nth-of-type(2)::before { content: ""; background-image: url('../images/hoe-het-werkt-2.png'); height:393px; width: 491px; position: absolute; right: 0; top: calc(50% - 200px); }
main.hoe-het-werkt .step:nth-of-type(3) .t{ float:right; width:480px; }
	main.hoe-het-werkt .step:nth-of-type(3)::before { content: ""; background-image: url('../images/hoe-het-werkt-3.png'); height: 536px; width: 516px; position: absolute; left: 0; top: calc(50% - 200px); }
main.hoe-het-werkt .step h2{ margin:0 0 8px 0; position:relative; }
main.hoe-het-werkt svg{ height:125%; width:125%; top:-25%; left:-12.5%; position:absolute; }
main.hoe-het-werkt svg.straight{ display:none; }
main.hoe-het-werkt .c2a{ margin-top:20px; }
main.hoe-het-werkt svg .circle{ visibility:hidden; }

/* CONTACT */
header.contact{ background-image: url('../images/foto-kantoor-stationsweg.jpg'); background-position:right; background-size:cover; }
table.contact{ width:auto; max-width: 480px; }
table.contact td{ vertical-align:top; padding-right:25px; width:auto;  }

/* OTHER PAGES */
header.other{ background-color:#ecf0f1; }
header.other::before{ display:none; }
header.other::after{ display:none; }
header.other p, header.other h1{  text-shadow:none; color:#34495e; }
main.other h2{ margin-bottom:0; font-size:24px; }
main.other article{ max-width: 1224px; margin-top:96px; }
main.other article .content{ max-width:480px; }
header.other a, main.other a{ color:#3498db; }
header.other ul{ margin-top:16px; }

/* FOOTER */
footer{ background:#ecf0f1; padding:16px 0; position:absolute; width:100%; left:0; bottom:0; right:0; }
footer ul{ margin:0 auto; display:block; text-align:center; }
footer li{ display:inline-block; }
footer li::after{ content:"\2022"; color:#bdc3c7; margin:0 24px; }
footer li:last-child::after{ content:""; margin:0; }

/* LANDINGPAGE */
nav.landingpage{ max-width:1048px; margin:auto; }
.wrap.landingpage{ overflow:visible; padding-bottom:100px; }
.landingpage article{ max-width:1000px; }
.landingpage header{ height:330px; min-height:auto; min-height:initial; max-height:none; background-color:#34495e; overflow:visible; position:relative; background-image:url('../images/landingpage.jpg'); background-size:cover; }
.landingpage header.other h1{ font-size:40px; line-height:48px; color:#fff; margin:0; text-transform:none; }
.landingpage header.other h2{ font-size:18px; line-height:24px; color:#fff; margin:0 0 4px 0; }
.landingpage h3{ font-size:16px; line-height:24px; margin:0; font-weight:bold; }
.landingpage .description{ width:500px; margin:0; }
.landingpage .book{ position: absolute; right: 0; top:-120px; }
.landingpage .book img{ z-index: -2; position: relative; }
.landingpage .book .twv{ width:72px; height:72px; background:#3498db; text-align:center; color:#fff; position:absolute; left:-10px; bottom:10px; font-weight:bold; font-size:18px; line-height:24px; }
.landingpage .book .twv::after, .landingpage .book .twv::before, .landingpage .book .twv .t::after{ content:""; position:absolute; top:0; left:0; z-index:-1; width:72px; height:72px; background:#3498db;  }
.landingpage .book .twv::after{ transform: rotate(22.5deg); }
.landingpage .book .twv::before{ transform: rotate(45deg); }
.landingpage .book .twv .t::after{ transform: rotate(67.5deg); }
.landingpage main.other article{ margin-top:0; max-width:1000px;  }
.landingpage main.other article .content{ max-width:none; width:100%; width:calc(100% - 324px); margin-top:60px; float:left; }
.landingpage .usp { width: 300px; background: #ecf0f1; float: right; padding:16px; margin-top:99px; font-size:12px; line-height:20px; }
.landingpage .usp h2{ font-size: 14px; line-height: 22px; font-weight:bold; }
.landingpage .usp li{ padding-left: 24px; position:relative; margin-top:8px; }
.landingpage .usp li::before{ content: "\f046"; font-family: "FontAwesome"; font-size:20px; position:absolute; left:0; top:3px; }
.landingpage .form{ margin-top:16px; }
.landingpage .form .col{ width:50%; float:left; }
.landingpage .form .col:nth-of-type(1){ padding-right:4px; }
.landingpage .form .col:nth-of-type(2){ padding-left:4px; }
.landingpage .form .col .row{ height:40px; padding-bottom:8px; }
.landingpage .form .col .row.sex{ padding-top:4px; }
.landingpage .form .margin{ width:8px; }
.landingpage .form textarea{ width:100%; height:72px; resize:none; display:block; padding:4px 0 0 8px; border-radius:2px; }
.landingpage .form input[type="text"]{ width:100%; height:32px; display:block; padding-left:8px; border-radius:2px; }
.landingpage .form input[type="text"].error { border-color: #e60000; }
.landingpage .form label{ margin-right:16px; }
.landingpage .form .row.sex.error{ color:#e60000; }
.landingpage .form #firstname{ width:calc(50% - 4px); float:left; }
.landingpage .form #lastname{ width:calc(50% - 4px); float:right; }
.landingpage .form #streetname{ width:calc(60% - 4px); float:left; }
.landingpage .form #housenumber{ width:calc(40% - 4px); float:right; }
.landingpage .form #zipcode{ width:calc(40% - 4px); float:left; }
.landingpage .form #city{ width:calc(60% - 4px); float:right; }
.landingpage .form .c2a{ margin-top:16px; }
.landingpage .form .c2a.next::after { content: "\f105"; font-family: FontAwesome; margin-left: 8px; font-size: 15px; }

/* GDPR */
.gdpr header{ background-color:#34495e; height:360px; min-height:0; padding-bottom:48px; margin-bottom:48px; background-size: cover; background-image:url('../images/gdpr-header.jpg'); background-position: center; }
.gdpr.privacy header{ background-image:url('../images/privacy-header.jpg'); }
.gdpr header h1{ font-size:37px; }
.gdpr.privacy header h1{ font-size:32px; }
.gdpr header .tc{ vertical-align:bottom; }
.gdpr header::after{ display:none; }
.gdpr header article, .gdpr main article{ max-width: 560px; }
.gdpr main article h2{ font-size:20px; line-height:30px; margin:28px 0 7px 0; }
.gdpr main article h3{ font-size:14px; line-height:21px; margin:0 0 4px 0;  }
.gdpr main article p{ }
.gdpr main article a{ color:#3498db; }
.gdpr main article ul { margin:0 0 16px 19px; }
.gdpr main article ul li{ list-style:disc; }
.gdpr main article .sources{ font-size: 12px; border-top: 1px solid lightgrey; margin-top: 48px; line-height: 20px; padding-top: 8px; }
.gdpr main article .source{ font-size: 11px; vertical-align: super; margin-right: 2px; }
.gdpr main article .imageWrap{ position:relative; height:326px; margin: 48px 0 48px 0; }
.gdpr main article .imageWrap img{ position: absolute; top:0; left: 50%; transform: translate(-50%); }


label.privacy_statement.error{ color:red; }
label.privacy_statement{ cursor:pointer; display:inline-block; margin:0; }
label.privacy_statement a{ font-weight:normal; color:#3498db; text-decoration:underline; }
label.privacy_statement input[type="checkbox"]{ margin: 0 5px 0 0; position: relative; top: 1px; }

/* COOKIE NOTIFICATION */
.cookie{ text-align:center; background:#ecf0f1; font-size:12px; line-height:18px; padding:8px 48px; position:relative; transition:margin 200ms, opacity 200ms; }
.cookie.hide{ opacity:0; }
.cookie, .cookie a{ color:#a4a8af; }
.cookie a{ }
.cookie a span{ text-decoration:underline; }
.cookie .closeWrap{ height: 100%; position: absolute; top: 0; right: 24px; width: 16px; }
.cookie .close{ cursor:pointer; position:absolute; right:24px; top:45%; left:0; height:16px; width:16px; transform-origin:center center; transform:rotate(45deg) translateY(-50%); }
.cookie .close::after, .cookie .close::before{ content:""; background-color:#a4a8af; position:absolute; }
.cookie .close::before{ height:2px; width:16px; top:7px; left:0; }
.cookie .close::after{ height:16px; width:2px; top:0; left:7px; }

/* GDPR LABEL */
td[colspan="3"]{ position:relative; }
.gdprLabel{ position:absolute; right:16px; bottom:16px; background:#ecf0f1; height:52px; width:192px; 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; }
.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:#34495e; }
.gdprLabel .gdprLink a{ font-size:12px; text-decoration:none; color:#11aceb; }
.landingpage .gdprLabel{ position:relative; bottom:auto; right:auto; float:right; margin-top:8px; }

@media screen and (max-width: 1272px) {
	article{ width:744px; }		
	.testimonials td:nth-child(2){ width:24px; }
	.testimonial{ width:100%; }
	.testimonials td:nth-child(2) .testimonial{ display:none; }
	.faq h2{ float:none; margin-bottom:24px; }
	.faq .text{ float:none; width:100%; }
	.arrow.right { right:-56px; }
	.arrow.left { left:-56px; }
	header.home img{ right:-22%; }
	header.over-ons, header.contact{ overflow:hidden; }
	header.over-ons img{ width: 50%; height: auto; right:-80px; }
	header.contact img{ width: 50%; height: auto; right:-80px; }
	
	main.hoe-het-werkt article{ height:1800px; }
	main.hoe-het-werkt .step:nth-of-type(1)::before { transform: scale(.6); transform-origin:left; left:-150px; }
	main.hoe-het-werkt .step:nth-of-type(2)::before { transform: scale(.75); transform-origin:right; right:-150px; }
	main.hoe-het-werkt .step:nth-of-type(3)::before { transform: scale(.6); transform-origin:left; left:-120px; }

	/* LANDINGPAGE */
	.landingpage .book{ top:-100px; }
	nav.landingpage{ max-width:792px; }
  	.landingpage .description{ width: 400px; }
	.landingpage main.other article .content{ width:calc(100% - 284px); max-width:none; }
	.landingpage .usp { width: 260px; }
}

@media screen and (max-width: 900px) {
	h1 { font-size: 32px; line-height: 40px; }
	article { width:100%; max-width: 744px; }
	header.home{ min-height:784px; height:auto; padding: 24px 0 104px 0; }
	header.home article{ width:504px; }
	.cube-side.front ul { margin: 8px 0 0 -8px; }
	.cube-side.front li { width: 146px; margin: 8px 0 0 8px; }
	.cube-wrapper, .cube-side{ height: 552px; }
	.cube{ transform:translateZ(-252px); }
	.cube-side.front{ transform:rotateY(0deg) translateZ(252px); }
	.cube-side.right{ transform:rotateY(90deg) translateZ(252px); }
	.cube-side.back{ transform:rotateX(180deg) rotateZ(180deg) translateZ(252px); }
	.cube-side.left{ transform:rotateY(-90deg) translateZ(252px); }
	.cube-wrapper::after{ width:456px; }
	.cube-side.back .col{ width:100%; }
	.cube-side.back .col.one{ padding-right:0; }
	.cube-side.back .col.two{ padding-left:0; }
	.cube-side.back textarea{ height:142px; }
	.cube-side.right .slider-employees-wrapper, .cube-side .slider-users-wrapper{ margin-top:0; }
	.cube-side.right .t{ height: calc(100% - 100px ); }
	.cube-side.right .slider-users-wrapper { margin-top: 88px; }
	.cube-side.right .slider-employees-wrapper, .cube-side .slider-users-wrapper, .cube-side.right .slider-employees, .cube-side .slider-users{ width:392px; }
	.arrow{ top:224px; }
	.faq{ padding: 64px 56px; }
	header.home img { display:none; }
.cube .steps { color: #bdc3c7; }

	main.hoe-het-werkt article { height: 1400px; }
	main.hoe-het-werkt svg{ width:initial; left:initial; right:-60px;  }
	main.hoe-het-werkt svg.curve{ display:none; }
	main.hoe-het-werkt svg.straight{ display:block; }
	main.hoe-het-werkt svg .circle{ visibility:visible; }
	main.hoe-het-werkt .step:nth-of-type(1) .t, main.hoe-het-werkt .step:nth-of-type(2) .t, main.hoe-het-werkt .step:nth-of-type(3) .t{ float:none; }
	main.hoe-het-werkt .step:nth-of-type(1)::before, main.hoe-het-werkt .step:nth-of-type(2)::before, main.hoe-het-werkt .step:nth-of-type(3)::before { display:none; }	
	
	footer{ padding:16px; }
	footer li::after{ margin: 0 6px; }
	footer li:last-child::after{ margin:0; }
	
	/* LANDINGPAGE */
	.landingpage .description{ width:100%; width:calc(100% - 224px); }
	.landingpage header{ padding:32px; }
	.landingpage header.other h1{ font-size: 32px; line-height: 40px; }
	.landingpage header.other h2{ font-size: 16px; }
	.landingpage .book { top: -50%; top: calc(50% - 150px); }
	.landingpage .book img{ width:200px; }
	
	.landingpage main.other article .content{ width:100%; }
	.landingpage .usp { display:none; }
	
	/* GDPR */
	.gdpr header h1{ font-size:24px; line-height: 34px; }
}

@media screen and (max-width:650px) {
	main { padding: 0px 32px; }
	header{ padding:0 32px; }
	header::after{ transform:none; left:0; width:100%; }
	header:not(.home) p{ width:100%; max-width:none; }
	header.hoe-het-werkt { padding: 0 24px; }
	
	nav.show .t{ display:table; }
	nav.show .hb{ position:fixed; top:24px; right:24px; }
	nav .t{ display:none; background: #ecf0f1; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index:4; }
	nav .tc{ display:table-cell; }
	nav ul { float:none; margin:0 auto; }
	nav li{ display:block; float:none; text-align:center; font-size:32px; line-height:40px; padding:24px; animation:fade-in 0.5s both;-moz-animation:fade-in 0.5s both;-ms-animation:fade-in 0.5s both;-o-animation:fade-in 0.5s both;-webkit-animation:fade-in 0.5s both; }
	nav li + li::before { content:""; margin:0; }
	
	.hb{ display:block; }
	
	header.home article{ width:360px; }
	.cube-wrapper::after{ width:360px; }
	.cube{ transform:translateZ(-180px); }
	.cube-side{ padding:16px; }
	.cube-side.front ul { margin:2px 0 0 -8px; }
	.cube-side.front{ transform: rotateY(  0deg) translateZ(180px); }
	.cube-side.right{ transform: rotateY( 90deg) translateZ(180px); }
	.cube-side.back{ transform: rotateX(180deg) rotateZ(180deg) translateZ(180px); }
	.cube-side.left{ transform: rotateY(-90deg) translateZ(180px); }
	.cube-side.front li { width: 104px; margin:8px 0 0 8px; }
	.arrow.right::before{ -ms-transform: skewX(16deg); -webkit-transform: skewX(16deg); transform: skewX(16deg); }
	.arrow.right::after{ -ms-transform: skewX(-16deg); -webkit-transform: skewX(-16deg); transform: skewX(-16deg); }
	.arrow.left::before{ -ms-transform: skewX(-16deg); -webkit-transform: skewX(-16deg); transform: skewX(-16deg); }
	.arrow.left::after{ -ms-transform: skewX(16deg); -webkit-transform: skewX(16deg); transform: skewX(16deg); }
	.arrow.right { right: -48px;}
	.arrow.left { left:-48px; }
	.cube-side.right .slider-employees-wrapper, .cube-side .slider-users-wrapper, .cube-side.right .slider-employees, .cube-side .slider-users{ width:300px; }
	
	.cube .c2a.prev{ bottom:16px; left:16px; }
	.cube .c2a.next{ bottom:16px; right:16px; }
.cube .steps { float:none; }
	.cube-side.front li .fa{ font-size: 25px; top: 22px; }
	.cube-side.front li .fa-wrench, .cube-side.front li .fa-medkit { font-size: 25px; }	
		
	main.hoe-het-werkt svg{ right:-40px; }
	main.hoe-het-werkt .step { width: calc(100% - 40px); }
	main.hoe-het-werkt .step:nth-of-type(1) .t, main.hoe-het-werkt .step:nth-of-type(2) .t, main.hoe-het-werkt .step:nth-of-type(3) .t{ width:100%; }
	
	.testimonials { padding:0; }
	.testimonials td{ display:block; }
	.testimonials td + td div{ margin-top:40px; }
	.faq{ padding: 40px 32px; }
	
	/* LANDINGPAGE */
	.landingpage header{ padding:24px; }
	.landingpage .form .col{ width:100%; }
	.landingpage .form .col:nth-of-type(1){ padding-right:0; }
	.landingpage .form .col:nth-of-type(2){ padding-left:0; }
	.landingpage .form .col .row{ height:auto; }
	
	.landingpage .description{ width: 100%; width: calc(100% - 174px); }
	.landingpage .book { top: -50%; top: calc(50% - 110px); }
	.landingpage .book img { width: 150px; }
}

@media screen and (max-width:475px) {
	h2 { font-size: 24px; line-height: 32px; }
	main { padding: 0px 24px; }
	header { padding: 0 24px; margin: 0; }
	header.home{ margin:0; padding: 24px 16px 104px 16px; }
	header.home article{ width:360px; }
	header.hoe-het-werkt{ padding:0 24px; }
	.cube-wrapper::after{ width:260px; }
	.cube{ transform:translateZ(-180px); }
	.cube-side{ padding:16px; }
	.cube-side.front{ transform: rotateY(  0deg) translateZ(180px); }
	.cube-side.right{ transform: rotateY( 90deg) translateZ(180px); }
	.cube-side.back{ transform: rotateX(180deg) rotateZ(180deg) translateZ(180px); }
	.cube-side.left{ transform: rotateY(-90deg) translateZ(180px); }
	.cube-side.front ul { }
	.cube-side.front li { width: 104px; margin:8px 0 0 8px; }
	.cube-side.right label{ top:70px; }
	.cube-side.right .slider-employees-wrapper, .cube-side .slider-users-wrapper, .cube-side.right .slider-employees, .cube-side .slider-users { width: 200px; }
	.cube-side.right .t { padding-bottom:56px; }
	.arrow.right { right: -24px;}
	.arrow.left { left:-24px; }
	.cube .steps { color: #bdc3c7; }
	
	.testimonials{ }
	.testimonial{ padding-left: 32px; }
	.testimonial::before{ font-size:45px; }
	
	.faq{ padding:40px 24px; }
	main.hoe-het-werkt svg { right: -30px; }
	
	/* LANDINGPAGE 475px */
	.landingpage .book{ display:none; }
	.landingpage .description{ width:100%; }	
}

@media screen and (max-width:400px) {
	header.home article{ width:320px; }
	.cube-wrapper::after{ width:320px; }
	.cube{ transform:translateZ(-160px); }
	.cube-side.front ul { margin:16px 0 0 -16px; }
	.cube-side.front{ transform: rotateY(  0deg) translateZ(160px); }
	.cube-side.right{ transform: rotateY( 90deg) translateZ(160px); }
	.cube-side.back{ transform: rotateX(180deg) rotateZ(180deg) translateZ(160px); }
	.cube-side.left{ transform: rotateY(-90deg) translateZ(160px); }
	.cube-side.front ul { margin: 2px 0 0 -8px; }
	.cube-side.front li { width: 90px; margin:8px 0 0 8px; }


}

@media screen and (max-width:369px) {
	header.home article{ width:288px; }
	.cube-wrapper::after{ width:288px; }
	.cube{ transform:translateZ(-144px); }
	.cube-side.front{ transform: rotateY(  0deg) translateZ(144px); }
	.cube-side.right{ transform: rotateY( 90deg) translateZ(144px); }
	.cube-side.back{ transform: rotateX(180deg) rotateZ(180deg) translateZ(144px); }
	.cube-side.left{ transform: rotateY(-90deg) translateZ(144px); }
	.cube-side.front ul { margin: 2px 0 0 -2px; }
	.cube-side.front li { height:104px; width: 84px; margin:2px 0 0 2px; font-size: 11px; }
	
	.c2a.prev span.text{ display:none; }
	.cube .c2a.blue.prev::before{ margin-right: 3px; }
	.cube .c2a.blue.next::after{ margin-left: 3px; }
}

/* ANIMATIONS */
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fade-out{ from{ opacity:1; } to{ opacity:0; } }
header.home img{ transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s; }
.arrow, .arrow::after, .arrow::before{ transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s; }
.c2a{ transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s; }
.steps li .dot{ transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s; }
.cube-side.front li{ transition:background 0.2s, color 0.2s;-moz-transition:background 0.2s, color 0.2s;-ms-transition:background 0.2s, color 0.2s;-o-transition:background 0.2s, color 0.2s;-webkit-transition:background 0.2s, color 0.2s; }
nav li:nth-child(1){ animation-delay:0;-moz-animation-delay:0;-ms-animation-delay:0;-o-animation-delay:0;-webkit-animation-delay:0; }
nav li:nth-child(2){ animation-delay:0.1s;-moz-animation-delay:0.1s;-ms-animation-delay:0.1s;-o-animation-delay:0.1s;-webkit-animation-delay:0.1s; }
nav li:nth-child(3){ animation-delay:0.2s;-moz-animation-delay:0.2s;-ms-animation-delay:0.2s;-o-animation-delay:0.2s;-webkit-animation-delay:0.2s; }
nav li:nth-child(4){ animation-delay:0.3s;-moz-animation-delay:0.3s;-ms-animation-delay:0.3s;-o-animation-delay:0.3s;-webkit-animation-delay:0.3s; }
.path.loaded, .path{ transition:all 0.5s ease; -moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;-webkit-transition:all 0.5s ease; } 
svg .circle{ transition:all 0.5s cubic-bezier(0.65, 0, 0.32, 2); } 
.hb{animation:hb-start 1s;-moz-animation:hb-start 1s;-ms-animation:hb-start 1s;-o-animation:hb-start 1s;-webkit-animation:hb-start 1s}@keyframes hb-start{from{opacity:0}to{opacity:1}}.hb.close span{animation:hb-span-close .2s forwards;-moz-animation:hb-span-close .2s forwards;-o-animation:hb-span-close .2s forwards;-webkit-animation:hb-span-close .2s forwards}@keyframes hb-span-close{from{opacity:1}to{opacity:0}}.hb.close i:first-of-type{animation:hb-i-close-first .2s forwards;-moz-animation:hb-i-close-first .2s forwards;-ms-animation:hb-i-close-first .2s forwards;-o-animation:hb-i-close-first .2s forwards;-webkit-animation:hb-i-close-first .2s forwards}@keyframes hb-i-close-first{from{transform:rotate(0deg)}to{transform:rotate(45deg)}}.hb.close i:last-of-type{animation:hb-i-close-last .2s forwards;-moz-animation:hb-i-close-last .2s forwards;-ms-animation:hb-i-close-last .2s forwards;-o-animation:hb-i-close-last .2s forwards;-webkit-animation:hb-i-close-last .2s forwards}@keyframes hb-i-close-last{from{transform:rotate(0deg)}to{transform:rotate(-45deg)}}.hb.open span{animation:hb-span-open .2s forwards;-moz-animation:hb-span-open .2s forwards;-o-animation:hb-span-open .2s forwards;-webkit-animation:hb-span-open .2s forwards}@keyframes hb-span-open{from{opacity:0}to{opacity:1}}.hb.open i:first-of-type{animation:hb-i-open-first .2s forwards;-moz-animation:hb-i-open-first .2s forwards;-ms-animation:hb-i-open-first .2s forwards;-o-animation:hb-i-open-first .2s forwards;-webkit-animation:hb-i-open-first .2s forwards}@keyframes hb-i-open-first{from{transform:rotate(45deg)}to{transform:rotate(0deg)}}.hb.open i:last-of-type{animation:hb-i-open-last .2s forwards;-moz-animation:hb-i-open-last .2s forwards;-ms-animation:hb-i-open-last .2s forwards;-o-animation:hb-i-open-last .2s forwards;-webkit-animation:hb-i-open-last .2s forwards}@keyframes hb-i-open-last{from{transform:rotate(-45deg)}to{transform:rotate(0deg)}}
.wrap{ animation:fade-in 0.5s both;-moz-animation:fade-in 0.5s both;-ms-animation:fade-in 0.5s both;-o-animation:fade-in 0.5s both;-webkit-animation:fade-in 0.5s both; }
.wrap.out{ animation:fade-out 0.2s both;-moz-animation:fade-out 0.2s both;-ms-animation:fade-out 0.2s both;-o-animation:fade-out 0.2s both;-webkit-animation:fade-out 0.2s both; }
.cube-wrapper{ animation:fade-in 0.5s both;-moz-animation:fade-in 0.5s both;-ms-animation:fade-in 0.5s both;-o-animation:fade-in 0.5s both;-webkit-animation:fade-in 0.5s both; animation-delay:0.2s;-moz-animation-delay:0.2s;-ms-animation-delay:0.2s;-o-animation-delay:0.2s;-webkit-animation-delay:0.2s; }
header::before{ animation:fade-in 0.5s both;-moz-animation:fade-in 0.5s both;-ms-animation:fade-in 0.5s both;-o-animation:fade-in 0.5s both;-webkit-animation:fade-in 0.5s both; }