@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300);

img { border: 0; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0px; height: 0px; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
body {
	background: #ffffff;
}
p,td,p,input,select,textarea,ul,ol,li,div {  
	font: 1em 'Source Sans Pro', sans-serif; 
	line-height: 1.6;
	color: #818376; 
	text-decoration: none
}
p {margin-bottom: 1em;}
img.mright {margin: 0 8px 8px 0;}
img.mleft {margin: 0 0 8px 8px;}
img.border {border: 1px solid #cccccc;}
p.center, div.center {text-align: center;}
p.closer {line-height: 1;}
a.button {
	height: 46px;
	line-height: 46px;
	background: #ff5a5f;
	text-align: center;
	color: white;
	text-decoration: none;
	padding: 12px;
}
a.mlr10 {margin: 0 10px;}
a {color: #ff5a5f; font-weight: bold;}
.verplicht {color: #ff5a5f;}
.submit {
	background: #ff5a5f;
	color: white;
	padding: 8px; 
}

h1 {
	font: 2em 'Source Sans Pro', sans-serif; 
	font-weight: 300;
	margin: 0px;
	padding-bottom: 10px;
	color : #616161;
}
h1.home {
	background: #0f58a4;
	font-size: 2.2em;
	padding: 0 2% 24px 2%;
	color : white;
}
h1.home b {font-weight: 700;}
h2 {
	font: 1.7em 'Source Sans Pro', sans-serif; 
	font-weight: 700;
	margin: 0px;
	padding-bottom: 18px;
	color : #616161;
}
h2.underline {padding: 0; margin: 0 0 36px;position:relative;}
h2.underline:after{
	content:''; width:10%; height:1px; background:#d4d4d4; position:absolute; bottom:-18px; left: 0;
}
h3 {
	font: 1.5em 'Source Sans Pro', sans-serif; 
	font-weight: normal;
	margin: 0px;
	padding-bottom: 12px;
	color : #616161;
}
h3.underline {padding: 0; margin: 0 0 36px;position:relative;}
h3.underline:after{
	content:''; width:10%; height:1px; background:#d4d4d4; position:absolute; bottom:-18px; left: 0;
}
/** background */
body {
	background: #ffffff url('/img/bg.gif') repeat-x 0 0;
	background-attachment: fixed;
}
.videoflex {display: flex;}
.video { float:left;margin-right:1em;}
.videoflex .vink {flex: 1;}

/* width */
#nav, #pageintro, #page0, #page1, #page2, #page3, #page4, #page5, #page6, #page7, #page8, footer {
	margin: 0 auto;
	width: 1120px;
}
#nav {
	background: #0f58a4;
	position: relative;
}
/* page separotors*/
div.pageintro {
	padding: 100px 2% 0;
}
div.page0 {
	background: #f9f9f9;
	border-bottom: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
	border-right: 1px solid #e8e8e8;
	padding: 5% 2%; 
}
div.page1 {
	background: white;
	border-bottom: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
	border-right: 1px solid #e8e8e8;
	padding: 5% 2%; 
}
div.page2 {
	padding: 5% 2%; 
}

div.pageintro img {
	border: 2px solid white;
}
div.pageintro p {
	margin: 18px;
}
#navwrap {
	position: fixed;
	width: 100%;
	top: 0; left:0;
	z-index: 2;
}
.scroll {
	position: relative;
}
/* lang */
#nav div.lang {
	width: 100%;
	height: 46px;
	background: #0a3c6f;
}
#nav div.lang ul {
	float: right;
}
#nav div.lang ul li {
	float: left;
	height: 46px;
	line-height: 46px;
	padding: 0 5px;
}
#nav div.lang div.icp, footer div.icp {
	width: 74px;
	height: 46px;
	line-height: 46px;
	background: #ff5a5f;
	text-align: center;
	vertical-align: middle;
	float: right;
	margin-left: 20px;
}
#nav div.lang div.icp:hover {
	background: transparent url(/img/icp-logo-46.gif);
	text-indent: -9999em;
}
div.icp a {color: white; text-decoration: none;display:block;}
footer div.icpwebsite {
	float: right;
}
/** navigation */
#nav nav::after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#nav nav a.logo {display:block;height:88px;line-height: 88px;float: left;}
#nav nav a.logo img {vertical-align: middle;}
#nav nav ul {
	float: right;
}
#nav nav ul li {
	display: inline-block;
	margin: 20px 0 0; padding: 0;
	padding-left: 10px;
}
#nav a {color: white; text-decoration: none;}
#nav a.active {font-weight: bold;}
#nav nav ul li a:hover, #nav nav ul li a.active {
	color: #ff5a5f;
	background: white;
}
#nav nav ul li a {font-size: 1.2em; text-transform: uppercase;padding: 3px; border-radius: 3px;display: inline-block;padding: 8px 16px; position: relative;}
#nav nav ul li a:hover::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
    content: "";
    left: 50%;
    margin-left: -8px;
    position: absolute;
    top: 100%;
    z-index: 1000;
}
/** responsive prep */
.anchor-link {
	display: none;
	width: 104px;
	height: 46px;
	line-height: 46px;
	margin-top: 18px;
	background: #ff5a5f;
	text-align: center;
	vertical-align: middle;
	float: right;
	//dmargin-left: 20px;
	color: #fff;
	text-decoration: none;  }
#mobile-nav { display:none; }

/** slider */
div.slider {position: relative;}
div.slider div.captions {
	position: absolute;
	top: 5%;
	left: 5%;
}
div.slider div.caption1 {
	font-weight: 300;
	color: #575757;
	font-size: 1.3em;
	padding: 12px 24px;
	background: white;
	margin-bottom: 12px;
}
div.slider div.caption2 {
	font-weight: 700;
	color: white;
	font-size: 1.3em;
	padding: 12px 24px;
	background: #ff5a5f;
}
a.springmat {color : #818376; font-weight: normal;}
.expand {
	cursor: pointer; cursor: hand;
}
.expand img.spacer {
	width: 1px !important;
	height: 1px !important;
}
/** pages */
/** page0 always top padding */
#page0, #pageintro {
	padding-top: 134px;
	background: #0f58a4;
}
#page0 h2 {padding: 36px 0 0; margin: 0 0 36px;position:relative;}
#page0 h2.underline {
	font-weight: 700;
	text-align: center;
}
#page0 h2:after{
	content:''; width:10%; height:1px; background:#d4d4d4; position:absolute; bottom:-18px; left: 45%;
}
#page0 p.big {
	color: #616161;
	font-size: 1.5em;
	font-weight: 300;
	margin: 18px 0;
}
#page4 {font-size: 90%;}
#page6 .references {
	width: 70%;
	float: left;
}
#page6 ul.vink {
	margin: 0 3em;
	width: 33%;
	float: left;
}
#page6 .guides {
	width: 30%;
	float: left;
}
ul.download li {background: #efefef; padding: 15px 10px;margin-bottom: 12px;}
ul.download li a {
	float: right;
	width: 25px;
	height: 25px;
	text-indent: -9999em;
	background: url(/img/btn-download.png) no-repeat top right;
}
ul.download li p {
	margin: 1px 0 0;
}

#page7 {
	background: #28343c;
}
#page7 .contact {width: 718px; float:left; margin-right: 50px;}
#page7 h2 {color: white;}
#page7 img {margin-bottom: 18px; width: 100%;}

.contact label {color: #d1d1d1; width: 175px; padding-right: 5px;display: inline-block;}
.contact .verplicht {margin-left:5px;}
.contact div {margin: 8px 0;}
.contact .field {width: 535px; background: #465057;padding:0;}
.contact .submit {float: right; margin: 8px 0;}

#page7 .getintouch {float:left;}

.getintouch label {
	width: 20px;
	height: 20px;
	display: inline-block;
	text-indent: -9999em;
}
.getintouch label.pin {	background: url(/img/btn-pin.png) no-repeat 0 7px;}
.getintouch label.tel {	background: url(/img/btn-tel.png) no-repeat 0 7px;}
.getintouch label.email {	background: url(/img/btn-email.png) no-repeat 0 9px;}
.getintouch p {display: inline-block;color: #d1d1d1;}




footer {
	background: #253038;
}
footer div.fwrap {
	padding: 2% 2%;
}
footer p.footer {
	color: #d2d2d2;
	line-height: 47px;
}
footer p.footer a {color: #d2d2d2;text-decoration: none;font-weight: 700;}
footer div.icp {display: inline;}
footer div.webdesign a {font-size: 0.8em;line-height: 1;	color: #818376; text-decoration: none;font-weight: 300;}

ul.vink {margin: 1em 3em;}
ul.vink li {
	list-style-image: url(/img/vinkje.png);
	list-style-position: outside; 
	padding-left: 0px;
}
div.c2 {
	width: 48%;
	padding: 0 1% 1%;
	float: left;
}
div.c2 div.pre {
	float: left;
	width: 80px;
	height: 90px;
}
div.c2 div.post {
	padding-left: 90px;
	width: 80%;
}
div.c2 div.post ul {margin: 0 1.2em;}
div.c2 div.w-increase-production {	background: url(/img/w-increase-production.png) no-repeat 50% 0;}
div.c2 div.w-less-maintenance {	background: url(/img/w-less-maintenance.png) no-repeat 50% 0;}
div.c2 div.w-better-quality {	background: url(/img/w-better-quality.png) no-repeat 50% 0;}
div.c2 div.w-less-energy {	background: url(/img/w-less-energy.png) no-repeat 50% 0;}

.introrows, .introrows img {
		width: 50%; 
}
.introrows img {
	width: 70%;
}

@-ms-viewport{
  width: device-width;
}
@media screen and (max-width: 1120px) {
	#nav, #pageintro, #page0, #page1, #page2, #page3, #page4, #page5, #page6, #page7, #page8, footer {
		width: 100%;
	}

	/** slider */
	div.slider div.captions {
		font-size: 100%;
	}
	div.slider img {
		width: 100%;
	}



	footer p.footer {
		padding-top: 5px;
		line-height: 120%;
	}
}

@media screen and (max-width: 1012px) {
	ul.simple-toggle { display: none; }
	.anchor-link, #mobile-nav { display: block; }
	ul.open { 
	    background-color: #0f58a4;
	    border: 2px solid white;
	    border-radius: 3px;


	    display: block;
	    list-style: none outside none;
	    margin: 0;
	    padding: 24px 0;
	    position: absolute;
	    right: 25px;
	    top: 100%;
	    width: 170px;
	    z-index: 500;
	}
	#nav nav ul li {
		display: block;
		margin: 0;
		padding: 0 12px;
		text-align: center;
	}
	#nav nav ul li a {
		border: 0;
	}
	#nav nav ul li a:hover {
		color: #0f58a4;
		background: white;
	}
	.videoflex {display: block;}
	.videoflex .vink {float:left; flex: auto;}
}
@media screen and (max-width: 755px) {
	#page7 .contact {width: 100%; margin: 0;}
	.contact label, .contact .field {width: 100%;}
	.video {margin: 0;}
	.video video {width: 100%;}
	.expand img {
		width: 100%;
	}
}
@media screen and (max-width: 640px) {
	.introrows {
		width: 100%; 
	}
	.introrows img {
		width: 60%;
	}
	div.c2 {
		width: 100%;
	}
	div.c2 div.pre {
		width: 20%;
	}
	div.c2 div.post {
		padding-left:20%;
	}
	#page6 .references, #page6 .guides { width: 100%; }
	#page6 .references {margin-bottom: 5%;}
}
@media screen and (max-width: 380px) {
	.introrows img {
		width: 90%;
	}
	#nav nav a.logo {
		float: none;
	}
	#nav nav a.logo img {
		width: 60%;
	}
	div.page0 img, div.page1 img {
		width: 100%;
	}
}