@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.8em; color:#858585; font-size:1.15em; font-family: 'Arvo', 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:'Arvo'; }
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:'Arvo'; }


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

header{ position:fixed; z-index:999; width:100%; padding:20px 0px 30px 0px; left:0; top:0; /* height:220px; */ background-color:rgba(0, 0, 0, 0.7); }
header .logo{ float:left; width:18%; padding-left:10px; }
header .logo img{  width:100%; }
header .telefoon{ float:right; color:#fff; text-align:right; padding-top:10px; }
header .telefoon i{ display:block; float:right; font-size:4.2em; color:#f1d80f; margin-top:-5px; margin-left:15px; margin-bottom:-10px; }
header .telefoon span{ float:left; display:block; line-height:1.4em; padding-top:6px; }
header .telefoon a{ font-weight:normal; color:#fff; cursor:text; }

.top{ width:100%; height:71px; z-index:2; margin-top:-71px; overflow:hidden; position:relative; }

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{ background:#d7b927; display:inline-block; padding:20px 20px; font-size:1.6em; line-height:1.1em; color:#fff; }
section .button a:hover{ background:#000; color:#fff; }
section h2{}
section h3{ color:#646464; font-weight:normal; }
section ul { margin-bottom:30px; }
section ul li{ padding:0px 0px 0px 40px; background:url(images/bg_li.png) no-repeat 0px 6px; }

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

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

#referenties{ padding:0px; position:relative; z-index:1; }
#referenties .titel{ height:200px; margin-bottom:-300px; z-index:999; position:relative; padding-top:100px; }
#referenties .titel h2{ color:#fff; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.7); }
#referenties .titel h3{ color:#fff; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.7); }
#referenties img{ width:100%; }
#referenties .cycloneslider-template-standard{ margin-bottom:0px !important; }
#referenties .cycloneslider-slide { text-align:center; }
#referenties .cycloneslider-slide .cycloneslider-caption{ opacity:1.0; text-align:center; background:none; width:700px; height:183px; padding:0px 0px 0px 0px; bottom:48%; display:block; left:50%; margin:0 0 -122px -350px; font-family:"Arvo"; font-weight:bold; position:absolute; } 
#referenties .cycloneslider-slide .cycloneslider-caption .cycloneslider-caption-title{ text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.8); font-size:2.6em; font-weight:bold; } 
#referenties .cycloneslider-slide .cycloneslider-caption .cycloneslider-caption-description{ display:none; font-size:1.5em; color:#ffed00; } 
#referenties .button { position:absolute; bottom:100px; z-index:999; text-align:center; width:100%; }

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

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

.nav-collapse ul { margin: 0; padding:0px; width: 100%; display: block;list-style: none; }
.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:1.05em; padding-top:30px; padding-left:40px; 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: left; }
.nav-collapse li { float: left; }
.nav-collapse a { color:#fff; text-decoration: none; font-weight:normal; /* 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%; }
.span_1_of_2 { width: 47.5%; text-align:left; }

/* ==========================================================================
   Mobile forms
   ========================================================================== */
html body .wpcf7 { width:70%; margin:50px auto 70px auto; }
form.wpcf7-form label{ font-family: 'Arvo', 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:0; border-bottom:2px solid #b3b3b3; font-size: 18px; font-family: 'Arvo', 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: 'Arvo', sans-serif;background:#fff; color:#000; font-weight:normal;  padding:10px;  border:0; border-bottom:2px solid #b3b3b3; }
.wpcf7 input[type=checkbox] { width: 26px; height: 26px; border: 1px solid #bbb;}
.wpcf7 input[type=submit] { background: #d7b927; 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: 70px;height:70px; color:#fff;font-weight:bold;border-style:none;font-family: 'Arvo', sans-serif;cursor:pointer; text-align:center;}
.wpcf7 input[type=submit]:hover{ background: #000; }

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 {   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:20px 0px 0px 30px; }
	
	 
#referenties .titel{ height:200px; margin-bottom:-250px; z-index:999; position:relative; padding-top:100px; }
#referenties .titel h3{ display:none; }
#referenties .button { position:absolute; bottom:50px; z-index:999; text-align:center; width:100%; }
	 

}

@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:15px 0px 0px 20px; }
	.nav-collapse li { padding:0px 0px 0px 10px; }
	
	 header .telefoon{ font-size:0.7em; }
	
	 section{ padding:40px 0px 80px 0px; }
	 
	 #referenties .cycloneslider-slide .cycloneslider-caption { display:none; }

}


@media (max-width: 767px) { 
	.container{ font-size:0.9em; }
	.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, .span_1_of_2 { width: 100%; }
	
	.nav-collapse { margin:0px; padding:0px; font-size:1.4em; line-height:1.8em;  }
	.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; padding:0px; }
	header .logo{ float:left; width:50%; padding-bottom:15px; padding-top:15px; }
		
	header .telefoon span{ display:none; }
	header .telefoon { position:absolute; right:25%; top:13px; font-size:0.5em; }
	
	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; }
	
	#referenties .titel{ display:none; }
	#referenties .button { display:none; }

		
		
} 

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

}