@font-face{font-family:"responsivenav";src:url("../icons/responsivenav.eot");src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"), url("../icons/responsivenav.ttf") format("truetype"), url("../icons/responsivenav.woff") format("woff"), url("../icons/responsivenav.svg#responsivenav") format("svg");font-weight:normal;font-style:normal}

html{ background-color: #fff; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin:0px; padding:0px; overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
body{ margin:0px; line-height:1.55em; color:#858585; font-size:1.2em; font-family: 'Lato', sans-serif;  text-decoration:none; padding:0px; }
body a{ text-decoration:none; color:#000; font-weight:bold;}
body a:hover{ text-decoration:none; color:#858585; }

/* ==========================================================================
   Resets
   ========================================================================== */
.browsehappy { margin: 0.2em 0; background: #ccc; color: #000;  padding: 0.2em 0; }

*{ outline:0; } hr { display: block; height: 1px; border: 0;  border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} audio, canvas, img, video { border:0px; vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; }
ul, li{list-style:none; margin:0px; padding:0px; } form, fieldset {margin:0px; padding:0px; border:0;}  p{margin:0px; padding:0px 0px 24px 0px; overflow:hidden;} table tr th{ text-align:left; }
h1, h2{ font-size:2.8em;  line-height:1.1em; font-weight:bold; color:#000; margin:0px; padding:0px 0px 24px 0px; font-family:'Lato'; }
h3, h4, h5, h6 { font-size:1.4em;  line-height:1.1em; font-weight:bold; color:#000; margin:0px; padding:0px 0px 24px 0px; font-family:'Lato'; }


/* ==========================================================================
   Styles
   ========================================================================== */
.center{ position:relative; overflow:hidden; width:1200px; margin:0 auto; }
.container{ }
.padding{ padding:26px; overflow:hidden; }

header{ background:url(images/bg_menu.png) no-repeat top; position:fixed; z-index:999; width:100%; left:0; top:0; height:220px; }
header .logo{ float:left; width:23%; padding-top:30px; padding-left:10px; }
header .logo img{  width:100%; }

.top{ width:100%; height:71px; z-index:2; margin-top:-71px; overflow:hidden; position:relative; }
.white{ background:url(images/bg_white.png) no-repeat top; }
.yellow{ background:url(images/bg_yellow.png) no-repeat top; }
.yellow2{ background:url(images/bg_yellow2.png) no-repeat top; margin-top:0px; margin-bottom:-71px; }
.zwart{ background:url(images/bg_black.png) no-repeat top; }

section{ padding:70px 0px 120px 0px; width:100%; position:relative; z-index:1; text-align:center; }
section figure{ margin:0px 0px 30px 0px; padding:0px; }
section figure img{ width:100%; }
section .cijfer{  background:#000; border-radius: 50%; width:180px; height:180px; display:inline-block; line-height:180px; color:#fff; font-size:3.8em; font-weight:bold; margin-bottom:30px; }
section .button a{  border:4px solid #000; display:inline-block; padding:15px 15px; font-size:1.6em; line-height:1.1em; }
section .button a:hover{  border:4px solid #858585; }

#home{ padding:0px; }
#home img{ width:100%; }

#klanten{ background:#fada00; }
#klanten .button a:hover{ color:#fff; border:4px solid white; }

#referenties{ padding:0px; }
#referenties img{ width:100%; }
#referenties .cycloneslider-slide { text-align:center; }
#referenties .cycloneslider-slide .cycloneslider-caption{ text-align:center; background:url(images/bg_referentie.png) no-repeat; width:700px; height:183px; padding:70px 0px 0px 0px; font-family:"Lato"; font-weight:bold; /* display: inline-block; */ position:absolute; bottom:40%; display:block; left:50%; margin:0 0 -122px -350px; /* margin:0px 0px -122px 0px; left: auto; bottom:50%; */ } 
#referenties .cycloneslider-slide .cycloneslider-caption .cycloneslider-caption-title{ font-size:1.9em; } 
#referenties .cycloneslider-slide .cycloneslider-caption .cycloneslider-caption-description{ font-size:1.5em; color:#ffed00; } 


#contact{ background:#000; color:#fff; padding-bottom:20px; }
#contact h2{ color:#fff; }
#contact h3{ color:#fff; }
#contact a, #contact span{ color:#fada00; }

/* ==========================================================================
   Navigatie
   ========================================================================== */

.nav-collapse ul { margin: 0; padding:0px; width: 100%; display: block;list-style: none; text-transform:uppercase; }
.nav-collapse li { width: 100%; display: block;}
.js .nav-collapse {  clip: rect(0 0 0 0);  max-height: 0;  position: absolute;  display: block;  overflow: hidden;  zoom: 1;}
.nav-collapse.opened {  max-height: 9999px; }
.disable-pointer-events {  pointer-events: none !important;}
.nav-toggle { -webkit-touch-callout: none;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  -o-user-select: none; user-select: none;}
.mask {  -webkit-transition: opacity 300ms;  -moz-transition: opacity 300ms;  transition: opacity 300ms;  background: rgba(0,0,0, .5);  visibility: hidden;  position: fixed;  opacity: 0;  z-index: 2;  bottom: 0;  right: 0;  left: 0;  top: 0;}
.android .mask { -webkit-transition: none; transition: none;}
.js-nav-active .mask { visibility: visible; opacity: 1;}
.fixed {  position: fixed;  width: 100%;  left: 0;top: 0;}

.nav-collapse{ font-size:0.9em; padding-top:50px; z-index:999; } 
.nav-collapse,
.nav-collapse * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; }
.nav-collapse, .nav-collapse ul {  list-style: none;  width: 100%;  float: right; }
.nav-collapse li { float: left; }
.nav-collapse a { color:#fff; text-decoration: none; /* background: #fff; */ padding: 0px; float: left;}
.nav-collapse a:active, .nav-collapse .current-menu-item a, .nav-collapse a:hover { color:#ffed00;  }
.nav-collapse ul ul a { /* background: #ca3716; padding-left: 2em; */ }
.nav-collapse ul li.active a{ color:#ffed00; }

.nav-toggle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; text-indent: -300px; position: relative; overflow: hidden; width: 60px; height: 70px;float: right;}
.nav-toggle:before { font-size:24px; line-height:70px; text-align: center; position: absolute;text-indent: 0;  speak: none; width: 100%;  left: 0;  top: 0; content: "\f0c9";font-family: FontAwesome;font-style: normal; font-weight: normal; text-decoration: inherit;}
.nav-toggle.active:before { content: "\f00d"; }
a.nav-toggle{ color:#ffed00; }
a:hover.nav-toggle{ color:#ffffff; }

/* ==========================================================================
   Grid
   ========================================================================== */
.section {clear: both;padding: 50px 0px 0px 0px;margin: 0px;}
.col {display: block; float:left; margin: 1% 0 4% 5%; }
.col:first-child{ margin-left: 0; }

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65%; }
.span_1_of_3 { width: 30%; }

/* ==========================================================================
   Mobile forms
   ========================================================================== */
html body .wpcf7 { width:70%; margin:50px auto 70px auto; }
form.wpcf7-form label{ font-family: 'Lato', sans-serif; }
.wpcf7 .input{ overflow:hidden; }
.wpcf7 .input.two{ overflow:hidden; }

.wpcf7 .input.two span{ float:right; width:48%; }
.wpcf7 .input.two span:first-child{ float:left; }

.wpcf7 select{ width: 100%; font-size: 18px; border: 1px dotted #4e4e4f; background:#FBE4B7; color:#fff; font-weight:normal; }
.wpcf7 input[type=text], 
.wpcf7 input[type=url], 
.wpcf7 input[type=email], 
.wpcf7 input[type=password], 
.wpcf7 input[type=tel] { -webkit-appearance: none; -moz-appearance: none; display: block; margin: 0px 0px 25px 0px; padding:0px; width: 100%;  height: 50px; line-height: 50px; border:0px solid #dfdfdf; font-size: 18px; font-family: 'Lato', sans-serif; background:#fff; color:#000; font-weight:normal;text-indent:10px;}
.wpcf7 textarea{ -webkit-appearance: none; -moz-appearance: none; display: block; margin: 0px 0px 25px 0px; padding:0px;width: 100%;  min-width:100%; max-width:100%; height: 120px; line-height: 36px;  font-size: 18px; font-family: 'Lato', sans-serif;background:#fff; color:#000; font-weight:normal;  padding:10px; border:0px solid #dfdfdf; }
.wpcf7 input[type=checkbox] { width: 26px; height: 26px; border: 1px solid #bbb;}
.wpcf7 input[type=submit] { background: #fada00; border:0px solid #dfdfdf; width:48%; -webkit-appearance: none; -moz-appearance: none;display: block; margin: 0px 0px 0px 0px; padding:0px 40px; font-size: 1.6em; line-height: 50px;height:50px; color:#000;font-weight:bold;border-style:none;font-family: 'Lato', sans-serif;cursor:pointer; text-align:center;}

form .input span.wpcf7-not-valid-tip{ display:none;}
form .input strong{ display:block;font-size:2.0em;padding:4px 0px 0px 0px;}
.wpcf7 .input input.wpcf7-not-valid, .wpcf7 .input textarea.wpcf7-not-valid{ background:#F99; color:#fff; }

html body div.wpcf7-response-output{ background:#fff; width:inherit; text-indent:20px; margin:0px; border:0px; font-size: 18px; width:100%;  }
html body .one-of-four div.wpcf7-response-output{ margin:-40px 0px 90px 0px; }
html body div.wpcf7-validation-errors{ background:#F99; color:#fff; display:block; float:left;  }
html body div.wpcf7-mail-sent-ok{ background:#3C3; color:#fff; display:block; float:left;  }


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 767px){ 
  .nav-collapse {  float: right;  width: auto; }
  .mask {  display: none !important;   opacity: 0 !important; }
  .nav-collapse li { width: auto; float:left; display:block; padding:0px 14px 0px 14px; }
  .nav-collapse a { float:left; display:block; text-align: center; border-top: 0; }
  .nav-collapse ul ul a { display: none; }
  
  .js .nav-collapse { position: relative; }
  .js .nav-collapse.closed {  max-height: none; }
  .nav-toggle { display: none; }
}  
   
@media (max-width: 1199px)	{ 
	.container{ }
	.center{ width:92%; }
	.nav-collapse { padding:45px 0px 0px; }

}

@media (max-width: 1024px) 	{ 
	.container{  }
	.padding{ padding:25px; }
	h1, h2{ font-size:2.4em; }
	h3, h4, h5, h6{ font-size:1.3em; }
	
	.nav-toggle:before{ font-size:40px; }
	.nav-collapse { font-size:0.7em; padding:40px 0px 0px; }
	.nav-collapse li { padding:0px 0px 0px 10px; }
	
	 section{ padding:40px 0px 80px 0px; }
	 
	 #referenties .cycloneslider-slide .cycloneslider-caption { display:none; }
}


@media (max-width: 767px) { 
	.container{ p }
	.padding{ padding:25px; }
	h1, h2{ font-size:1.5em; }
	h3, h4, h5, h6{ font-size:1.1em; }
	
	.col{  margin: 1% 0 5% 0%; min-height:inherit; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	
	.nav-collapse { margin-bottom:0px; padding-top:0px; margin-top:0px; }
	.nav-collapse ul{ padding-bottom:15px; }
	.nav-toggle:before{ font-size:35px; }
	
	section{ padding:20px 0px 60px 0px; }
	.section {padding: 20px 0px 0px 0px}
	
	header{background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); position:fixed; z-index:3; width:100%; left:0; top:0; height:auto; }
	header .logo{ float:left; width:50%; padding-bottom:15px; padding-top:15px; }
	
	html body .wpcf7 { width:100%; margin:20px 0px 30px; }
	.wpcf7 .input.two span{ float:none; width:100%; }
	.wpcf7 .input.two span:first-child{ float:none; }
	.wpcf7 input[type=submit] { width:100% }
	
	section .button a{  font-size:1.2em; line-height:1.0em; }	
} 

@media (max-width: 480px){ 
	.container{  }
	.padding{ padding:12px; }
	.nav-toggle:before{ font-size:30px; }
	
	.top.zwart, .top.yellow2{ display:none; }

}

/* ==========================================================================
   Carousel
   ========================================================================== */

.slider {
	padding: 0;
}

.slider .slide {
	width: 100%;
	height: 98vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover !important;
}

.slider .slide figure img {
	max-width: 950px;
	width: 100%;
	object-fit: contain !important;
}

.spacing-slider {
	height: 100px;
	width: 100%;
	background-size: #000;
}