@import "reset.css";

@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@400;500;600;700&family=Oswald:wght@400..700&display=swap');

html {  -webkit-text-size-adjust: none;}
body{background-color:#fff;color:#000;font-family:'Hind Madurai', Arial;font-size:18px;font-weight:300;line-height:30px;}
body, html {height: 100%;}
/*  Float containers fix: */
.clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clear {clear:both;}
a {color:#000;}
a:hover {color:#ff3b37;}
b,strong {font-weight:bold;}

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

#webdevelopement a {text-decoration:none;text-transform:uppercase;}
#webdevelopement a i{color:#ff3b37;}
#webdevelopement a:hover {color:#ff3b37;}
#superwrapper {min-height: 100%;height: auto !important;height: 100%;}
.wrapper {max-width:1160px;width:95%;height:auto;margin:0px auto;position:relative;}
.wrapper2 {max-width:960px;width:95%;height:auto;margin:0px auto;position:relative;}

.placeholder {color:#fff;}
::-webkit-input-placeholder, ::-webkit-textarea-placeholder {color:#fff;}
:-moz-placeholder {color:#fff;opacity:1;}
::-moz-placeholder {color:#fff;opacity:1;}
:-ms-input-placeholder, :-ms-textarea-placeholder {color:#fff;}	
input[placeholder], textarea[placeholder] {color:#fff;}

#page_title {background:url(../images/slide.jpg) no-repeat bottom center;padding:30px 0;text-align:center;width:100%;}
h1 {color:#fff;font-size:20px;line-height:normal;font-weight:400;}
h2 {color:#000;font-size:24px;line-height:24px;font-weight:400;margin-bottom:30px;font-family:Oswald,arial;}
h3 {color:#fff;font-size:30px;line-height:30px;font-weight:700;margin:20px 0;}
h4 {color:#555;font-size:24px;line-height:24px;font-weight:400;margin-bottom:30px;font-family:Oswald,arial;}
h5 {color:#ff3b37;font-size:24px;line-height:24px;font-weight:400;font-family:Oswald,arial;}
h6 a {color:#ff3b37;font-size:20px;line-height:24px;font-weight:400;font-family:Oswald,arial;text-decoration:none;}
h6 a:hover {text-decoration:underline;}
.ch2025{position:absolute;bottom:10vh;z-index:10;left:50%;background-color:#fff;text-decoration:none;line-height:12px;display:inline-block;padding:15px;border-radius:10px;text-align:center;transform: translate(-50%, -50%) translate(-20px, -10px);}

#top {background-color:#fff;position:fixed;border-bottom:3px solid #e5e7e9;top:0px;left:0px;z-index:9999;width:100%;}
#header {width:100%;}

#logo {position:absolute;left:0px;top:10px;border-radius:6px;padding:10px 30px 25px;background-color:#fff;z-index:999;border-bottom:3px solid #e5e7e9;}

#navMob {display:none;float:right;}
#navigation {display:none;}
#mobile-header a {display:block;color:#aaa;text-decoration:none;font-size:24px;padding:23px 0;line-height:24px;} 

#slideshow {background:url(../images/slide.jpg) no-repeat bottom center;width:100%;}
.slideleft {float:left;width:45%;margin-right:10%;padding:100px 0;}
.slideleftrelative {float:left;width:45%;padding:200px 0 0 0;}
.slideleft2 {float:left;width:45%;padding:100px 0 0 0;}
.slideright {position:absolute;width:45%;bottom:0px;right:0px;}
.sliderightrelative {float:right;width:45%;padding:100px 0 0 0;}
.slideright2 {float:right;width:45%;margin-left:10%;padding:100px 0;}
.heading {font-size:50px;font-weight:900;color:#fff;line-height:50px;margin-bottom:30px;}
.heading2 {font-size:40px;font-weight:900;color:#fff;line-height:40px;margin-bottom:30px;}
.slideright23 {padding:100px 0;background:url(../images/seo.png) no-repeat bottom right;}
.sliderightwelkom {padding:100px 0;text-align:center;}
.uitleg {font-size:22px;color:#fff;width:350px;}

#puntjes {background-color:#f8f8f8;margin-bottom:30px;padding:15px;}
.puntje {float:left;width:25%;}
.padpunt {text-align:center;}

#main {width:100%;margin:0 0 80px 0;}
#mobTopImg{display:none}
#bellen {display:none;}
.brNot{display:none;}
.offerteH{color:#fff;margin-top:10px;display:block;text-align:center;}
#contenthome {background-color:#fff;padding:100px 0;font-size:30px;line-height:44px;text-align:center;color:#333;}
.knop {display:inline-block;margin:50px 25px 0 0px;}
.knop:last-child {margin-right:0;}
.btnrood {display:inline-block;padding:10px 30px;font-family:Oswald,arial;font-size:21px;color:#fff;text-decoration:none;background-color:#ff3b37;border-bottom:3px solid #de211d;border-radius:6px;line-height:normal;}
.btnrood:hover {background-color:#de211d;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}
.btnwit {display:inline-block;padding:10px 30px;font-family:Oswald,arial;font-size:21px;color:#fff;text-decoration:none;background-color:#444;border-bottom:3px solid #000;border-radius:6px;line-height:normal;}
.btnwit:hover {background-color:#000;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}
#telTop{display:none;margin-left:15px;}
.btnroodwelkom {display:inline-block;padding:10px 30px;font-family:Oswald,arial;font-size:21px;color:#fff;text-decoration:none;background-color:#ff3b37;border-bottom:3px solid #de211d;border-radius:6px;line-height:normal;}
.btnroodwelkom:hover {background-color:#de211d;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}

.btnnieuws {display:inline-block;padding:10px 30px;font-family:Oswald,arial;font-size:18px;color:#fff;text-decoration:none;background-color:#aaa;border-bottom:3px solid #888;border-radius:6px;line-height:normal;}
.btnnieuws:hover {background-color:#888;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}
.moblnbtn{display:none;}
.striped{display:none;}
#diensten {background:url(../images/koffie_bg.jpg) no-repeat center center fixed;padding:100px 0;text-align:center;}
.ontwerpen-bouwen {float:left;width:30%;margin-right:5%;}
.online-marketing {float:left;width:30%;margin-right:5%;}
.extra-services {float:left;width:30%;}

.moduletel {display:inline-block;padding:10px;background-color:#de211d;color:#fff;text-transform:uppercase;text-decoration:none;border-radius:10px;}
.moduletel:hover {color:#fff;}
.provincie {position: absolute;bottom: 25px;left: 25px;font-size: 50px;color: #de211d;font-weight: 700;line-height: 50px;}

.dienst {float:left;width:30%;margin-left:5%;}
.d3 {margin-left:0;}
.die3 {margin-bottom:60px;}
.die2 {display:none;margin-bottom:40px;}
.icoon {padding:40px 30px 30px 30px;border-radius:50%;width:58px;background-color:#ff3b37;color:#fff;font-size:30px;display:block;text-align:center;line-height:normal;margin:0 auto;}
.tekst {color:#aaa;}
.tekst a {line-height:21px;color:#aaa;}
.knopklein {margin-top:20px;}
.btnroodklein {display:inline-block;padding:5px 20px;font-family:Oswald,arial;font-size:18px;color:#fff;text-decoration:none;background-color:#ff3b37;border-bottom:3px solid #de211d;border-radius:6px;line-height:normal;}
.btnroodklein:hover {background-color:#de211d;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}

#content {width:100%;}
#mainleft {float:left;width:50%;}
#mainright {float:right;width:50%;}
#menuleft {float:left;width:25%;margin-right:5%;}
#menuleft ul {list-style-type:none;margin:0;}
#menuleft ul li a {display:block;border-bottom:1px solid #eee;color:#aaa;text-decoration:none;position:relative;padding:20px;transition: padding .25s ease-in, background-color .25s ease .05s;line-height:18px;}
#menuleft ul li a:after {position:absolute;top:50%;left:0;margin-top:-11px;color:#000;font-size:14px;font-family:'FontAwesome';content:'\f105';-webkit-transition: left .25s ease-in;transition: left .25s ease-in;}
#menuleft ul li.menu-current a {color:#ff3b37 !important;padding-left:30px;background-color:#eee;}
#menuleft ul li.menu-current a:after {left:10px;color:#ff3b37 !important;}
#menuleft ul li a:hover {color:#ff3b37 !important;padding-left:30px;}
#menuleft ul li a:hover:after {left:10px;}
#contentright {float:right;width:70%;}

#wet-bep {background-color:#444;color:#fff;font-size:18px;text-align:center;padding:20px 0;font-weight:700;}
#wet-bep a {color:#fff;}
#nieuws {padding:100px 0;}
.nieuws {float:left;width:60%;margin-right:5%;}
.ipad {float:right;width:35%;padding-top:75px;}
.datum {padding:5px 15px;color:#fff;background-color:#aaa;display:inline-block;line-height:normal;margin-bottom: 15px;}
.nieTitel {font-size:24px;font-weight:700;margin:0 0 15px 0;}
.nieKorteTekst {color:#777;line-height:24px;}

.ref {float:left;}
.refs4 {display:none;}
.refs3 {display:none;}
.refs2 {display:none;}
.dh-container {float:left;height:100%;}
.dh-overlay {background:rgba(0,0,0,0.4);width:100%;height:100%;text-align:center;color:#fff;}
.valign {height:100%;width:100%;display:table;}
.vcenter {height:100%;padding:0 40px;width:60%;display:table-cell;vertical-align:middle;}
.project-title {font-size:24px;display:block;font-family:Oswald,arial;line-height:normal;}
.project-title.current a {color:#fff;}
.project-title a:hover {color:#fff;}
.knopwit {margin-top:20px;}
.knopwit a {display:inline-block;color:#000;font-family:Oswald,arial;background-color:#fff;font-size:16px;text-decoration:none;padding:10px 20px;border-bottom:3px solid #aaa;border-radius:6px;line-height:normal;}
.knopwit a:hover {background-color:#aaa;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}

.border {padding:30px 50px;border:1px solid #eee;text-align:center;border-bottom:3px solid #ccc;}
.dienst-icoon {border:1px solid #eee;background-color:#fff;padding:20px;display:inline-block;} 
.dienst-icoon:hover {background-color:#eee;}
.dienst-title a {font-size:20px;display:block;font-family:Oswald,arial;line-height:normal;color:#000;text-decoration:none;margin:30px 0 20px 0;}
.dienst-tekst {font-size:16px;color:#777;}
.dienst-tekst ul {list-style-type:none;margin:0;}
.dienst-tekst ul li {padding:5px;border-bottom:1px solid #eee;}
.dienst-tekst ul li:last-child {padding-bottom:0;border-bottom:0px;}
.meer-info {margin-top:20px;}
.meer-info a {display:block;padding:5px 20px;font-family:Oswald,arial;font-size:16px;color:#fff;text-decoration:none;background-color:#ff3b37;border-bottom:3px solid #de211d;border-radius:6px;line-height:normal;}
.meer-info a:hover {background-color:#de211d;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}

.webh {float:left;width:33%;}
.webh:first-child, .webh:last-child {margin-top:22px;}
.teller2 {border:3px solid #ff3b37;padding:50px;}
.w3 {margin-left:0;}
.web3 {margin-bottom:50px;}
.web2 {display:none;}
#webhosting {margin-top:40px;}
.webhosting-title span {font-size:20px;display:block;font-family:Oswald,arial;line-height:normal;color:#000;text-decoration:none;margin-bottom:20px;}

.reff {float:left;width:23.5%;margin-left:2%;}
.reff a {display: block;}
.reff img {aspect-ratio: 1/1;object-fit: cover;}
.rr4 {margin-left:0;}
.refss4 {margin-bottom:40px;}
.refss3 {margin-bottom:30px;display:none;}
.refss2 {margin-bottom:20px;display:none;}

#mijlpalen {background-color:#ff3b37;padding:35px 0 50px 0;}
.mijlpaal {float:left;width:25%;font-family:Oswald,arial;font-size:24px;color:#fff;text-align:center;line-height:normal;}
.mijlpaal strong {color:#fff;font-size:60px;font-weight:700;font-family:Source Sans Pro,arial;}

.free {font-weight:bold;color:#000;}

#sectoren {text-align:center;margin-bottom:80px;}
.sectoren {margin:0;list-style-type:0;}
.sectoren li {display:inline-block;margin-right:10px;padding-right:10px;border-right:1px solid #eee;}
.sectoren li:last-child {margin-right:0px;padding-right:0px;border-right:0px;}
.sectoren li a.current {color:#ff3b37;}

.newsPicc{float:left;width:35%;margin-right:5%;}
.nieImgH{float:left;width:30%;margin-right:5%;}
.nieTxtH{float:left;width:65%;}
.videoWrapper {position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.nieuwsbericht {margin-bottom:50px;padding-bottom:50px;border-bottom:1px solid #ddd;}
.nieTitel a {text-transform:uppercase;letter-spacing:1px;text-decoration:none;font-family:OswaldLight,arial;line-height:normal;}
.nieTekst {margin-top:5px;}
.nieTekst span {color:#999999;font-size:14px;}
.nieTekst2 {margin-top:5px;width:60%;float:left;}
.nieTekst2 span {}
.leesmeer {text-align:right;}
.leesmeer a {display:inline-block;border-radius:5px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;padding:7px 15px;font-family:OswaldLight,arial;font-size:13px;background-color:#4d5168;color:#fff;text-shadow:1px 1px 0px #434343;}
.leesmeer a:hover {border:1px solid #656a83;color:#656a83;background-color:#fff;text-shadow:none;}
.leesmeer2 {text-align:right;margin-top:30px;}
.leesmeer2 a {display:inline-block;border-radius:5px;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;background-color:#4d5168;padding:7px 15px;font-family:OswaldLight,arial;font-size:13px;text-shadow:1px 1px 0px #434343;}
.leesmeer2 a:hover {background-color:#fff;color:#4d5168;text-shadow:none;}

.leesmeer3 {margin-top:10px;}
.leesmeer3 a {display:inline-block;border-radius:5px;color:#000;text-decoration:none;text-transform:uppercase;letter-spacing:2px;background-color:#fff;padding:5px 8px;font-family:OswaldLight,arial;font-size:11px;border:1px solid #656a83}
.leesmeer3 a:hover {background-color:#4d5168;color:#fff;text-shadow:1px 1px 0px #434343;}

.leesmeer4 {text-align:right;margin-top:30px;}
.leesmeer4 a {display:inline-block;border-radius:5px;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;background-color:#4d5168;padding:7px 15px;font-family:OswaldLight,arial;font-size:13px;text-shadow:1px 1px 0px #434343;}

#map_canvas { border:0; margin:0; padding: 0; height:500px; width: 100%;position:relative;z-index:1;box-shadow:0 3px 3px -1px gray;}
.box {line-height:30px;font-size:18px;font-family:'Hind Madurai',arial;}

#footer {padding:50px 0px;color:#555;background-color:#f8f8f8;line-height:24px;border-top:3px solid #e5e7e9;}
#footer a {color:#555;text-decoration:underline;}
#fct {float:left;width:40%;}
#fct ul {margin:0px;list-style-type:none;}
#fct ul li {display:block;margin-bottom:5px;}
#fct ul li:last-child {margin-bottom:0px;}
#fct2 {float:left;width:40%;}
#fct3 {float:left;width:20%;text-align:right;}
#fct3 ul {margin:0px;list-style-type:none;}
#fct3 ul li {display:block;margin-bottom:5px;}
#fct3 ul li:last-child {margin-bottom:0px;}
#footer a.tel{text-decoration:none;}
.navB{display:none;}
.fb {display:inline-block;margin-right:5px;}
.fb a {padding:5px;color:#555;background-color:#fff;display:block;border:1px solid #e5e7e9;}
.ln {display:inline-block;}
.ln a {padding:5px;color:#555;background-color:#fff;display:block;border:1px solid #e5e7e9;}

.imgClass {width:100%;object-fit:cover;aspect-ratio:4/3;}
.imgClass2 {width:100%;object-fit:cover;aspect-ratio:1/1;}

.required {color: #FF0000;}
.field_heading {font-weight: bold;padding-top: 10px;}
.field_title {margin-bottom:5px;float:left;width:35%;margin-right:5%;}
.field_input {margin-bottom:15px;float:right;width:60%;}
.field_checkbox {margin-right:10px;}
.field_title2 {width:100%;margin-bottom:10px;}
.field_input2 {width:100%;margin-bottom:10px;}

input[type="button"], input[type="submit"], input[type="image"], button, .submit {border:0px;display:inline-block;padding:10px 30px;font-family:Oswald,arial;font-size:21px;color:#fff;text-decoration:none;background-color:#ff3b37;border-bottom:3px solid #de211d;border-radius:6px;line-height:normal;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type="button"]:hover, input[type="submit"]:hover, input[type="image"]:hover, button:hover, .submit:hover {background-color:#de211d;color:#fff;-webkit-transition:0.4s ease;-moz-transition:0.4s ease;-ms-transition: 0.4s ease;-o-transition:0.4s ease;transition:0.4s ease;}

.input,.email,.textfield,.textarea,select {color:#7c7c7c;background-color:#fff;border:1px solid #d8d8d8;padding:2px;width:100%;font-family:'Hind Madurai',arial;box-sizing: border-box;font-weight:300;}
.email,.textfield,.textarea{-webkit-appearance: none;border-radius: 0;}
.textarea {height: 100px;}
.checkbox_label {cursor: pointer;}
.radio_label {cursor: pointer;}
.nixhier {display:none;}