@charset "utf-8";
/* CSS Document -  WEBSPICE - Sofie Vandenberghe -  www.webspice.be*/
@font-face {
    font-family: 'Norwester';
    src: url('../stijl/fonts/Norwester-Regular.woff2') format('woff2'),
        url('../stijl/fonts/Norwester-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --primary: #1c2c3a;
    --secondary:#e07e3b;
    --dark: #000000;
    --white: #ffffff;
    --light: #C6C8CA;
}
html {
  scroll-behavior: smooth;
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing:grayscale!important;
-webkit-font-smoothing:antialiased!important
}
* {box-sizing: border-box;list-style: none;margin: 0;padding: 0;transition: all ease .3s;}
*:focus, *:visited, *:focus:visited, *:focus:active {outline: none !important;}
.bootstrap-select .dropdown-toggle:focus {outline: none !important;box-shadow: none !important;}
textarea:focus, input:focus {outline: none !important;}
img {border: none;max-width: 100%;height:auto}
::-moz-selection {background: var(--primary);color: #fff;}
::selection {background: var(--primary);color: #fff;}
body{
	font-family: "Noto Sans",sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 16px;
	color: var(--primary);
	  font-weight: 400;
	overflow-x: hidden;
}
h1, h2, h3, h4{font-family: "Norwester";}
h1{ color: var(--primary);text-align: center; font-size: 60px;margin-bottom: 25px;}
h2{color: var(--primary);font-size: 48px;line-height: 58px;text-align: center;margin-bottom: 25px;}
h3 {
 color: var(--secondary);
  font-size: 35px;
  line-height: 45px;
  margin-bottom: 10px;font-weight: 400;}
h4{ font-size: 24px;color: var(--primary);}
h5{ font-size: 24px;line-height: 34px;font-weight: 600;color: var(--primary);}

p{font-size: 16px;line-height: 150%;color: var(--primary);}
a, a:hover, a:focus, a:focus, a:active{ text-decoration:underline;color:var(--primary);transition: all 0.4s;}
p a{color:var(--primary);}
p a:hover, p a:active, p a:visited{color:var(--primary)}
.inhoud ul {margin-left: 15px;margin-top: 10px;}
.inhoud ul li{margin:5px;list-style: disc;color: var(--primary);font-family: "Noto Sans", sans-serif;}
.inhoud ul li ul li {list-style: circle}
.breadcrumb {background-color:transparent;border-radius:0;justify-content:flex-end;padding-left:0px;padding-top:10px;margin-bottom: 0}
.breadcrumb-item {font-size:12px}
.breadcrumb-item.active a{color: var(--primary);}
.bgwece{background:#172432;}
#webspice { text-align: center;}
#webspice a {
font-weight:600;
font-size:14px;
color:#a9afb3;
text-decoration:none;
    padding-top: 5px;padding-bottom:5px;
    }
#webspice a:hover{color:#ffffff}
.bol {color:#D99F15;font-size:24px}
.btn {
 display: inline-block;
    background-color: var(--secondary);
    color: var(--white);
    border-radius: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 64px;
    padding: 0 30px;
    min-width: 280px;
    border: 0;
  transition: .2s ease-in;
}
.btn:hover,
.btn:active,
.btn:focus{
 background-color: var(--white);
    color: var(--dark);
  transition: .2s ease-in;
}
.btn:active:focus,
.btn:focus{
  box-shadow: none;
}
.btn-check:checked+.btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check)+.btn:active:focus-visible {
  box-shadow: none;
}
/*******/
input:focus{ outline:none;}

.form-control::placeholder {color:#959494}
.form-control, .form-control-file{
	padding: 8px 10px;
    border:1px solid var(--primary);
	border-radius:0px;
	color:#959494;
	background-color:#FFFFFF;
margin:10px 0;
width:100%}
.form-control:focus {
    color: var(--secundary);
    background-color: #fff;
    border-color:var(--secondary);
    outline: 0;
    box-shadow: none;
}
.input-group-text {border-color:var(--primary);border-radius:0px;padding: 8px 10px;height: 42px;
  margin-top: 10px;}
.container {
    max-width: 1164px;
    padding-left: 25px;
    padding-right: 25px;
}
section {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}
header {background-color: var(--primary);padding-bottom: 20px;}
.header-main {display: flex;justify-content: space-between;}
.header-logo a { display: block; max-width: 210px;}
.header-logo {padding-top: 15px;}
.header-logo img {display: block;}
nav.header-navbar { margin-left: auto;margin-right: 0;}
header nav > ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
header nav > ul > li + li {margin-left: 36px;}
header nav > ul > li > a.nav-link {
    color: var(--white);
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    line-height: normal;
    position: relative;
    text-transform: uppercase;
	font-weight:700;
    transition: all 0.5s !important;
}
header nav > ul > li a.nav-link.active, header nav > ul > li > a.nav-link:hover, header nav > ul > li > a.nav-link:focus { color: var(--secondary);text-decoration: none}
header nav > ul > li > a.nav-link:before {
    content: "";
    display: block;
    height: 1px;
    width: 0;
    margin: auto;
    background-color: var(--secondary);
    transition: all 0.4s;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
}
header nav > ul > li:hover > a:before ,header nav > ul > li.active > a:before{width: 100%;}
.navbar-toggle {display: none;}
.header-main .social_media { margin-left: 36px;}
.header-main .social_media a {color: var(--secondary);}
.header-main .social_media a:hover {color: var(--white);}
.header_contact_info {
    background-color: var(--secondary);
    padding: 10px 30px;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
	font-weight: 600;
}
.header_contact_info a {
    font-size: 18px;
    color: var(--white);
    border-right: 1px solid var(--white);
    padding-right: 35px;
    margin-right: 35px;
	text-decoration: none;
}
.header_contact_info a:hover{color: var(--primary);}
.header_contact_info a:last-child{border: 0;padding: 0;margin: 0;}
/*index*/
.over {padding-top: 30px;}
.over h1{margin-bottom: 45px;}
.over p {font-size: 20px;margin-bottom: 30px;}
.over p b {font-weight: 800; color: var(--secondary);}
.over .item .icon img {width: 56px;}
.over .item {margin-bottom: 34px;}
.over .item h5 { margin: 0;font-size: 18px;font-weight: 700;}
.cta .content {background-color: var(--primary);padding: 40px 40px 100px 40px;text-align: center;margin-right: -91px;}
.cta .content h3 {color: var(--white);font-size: 36px;margin-bottom: 70px;line-height: 50px;}
.cta h3 span {color: var(--secondary);}
.cta .img {border: 17px solid var(--white);box-shadow: 0px 0px 50px rgb(0 0 0 / 10%);margin-top: 184px;margin-left: -155px;}
.cta .img img {width: 100%;}
.laadstation {padding-bottom: 20px;}
.laadstation .content {position: relative;padding-left: 10px;}
.laadstation .content:after {
    content: "";
    display: inline-block;
    background-color: #F2F4F4;
    width: 740px;
    height: 635px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.laadstation .content h2 {
    font-size: 59px;
    color: #4dad33;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.laadstation .content h3 {
    color: var(--primary);
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 30px;
    font-family: 'Noto Sans';
	text-align: center
}
.laadstation .content p {font-size: 20px; margin-bottom: 0;color: var(--primary);}
.laadstation .content a {font-size: 20px;color: #4dad33;text-decoration: underline;margin-bottom: 46px;display: inline-block;}
.laadstation .content a:hover {color: var(--primary);}
.laadstation .img {text-align: center;margin-top: 80px;}
.laadstation .content ul {margin: 0;padding: 0;list-style: none}
.laadstation .content ul li {
    padding-left: 25px;
    position: relative;
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--primary);
}
.laadstation .content ul li:before {
    content: "";
    background-image: url("../fotomateriaal/pijl.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: inline-block;
    height: 14px;
    width: 14px;
    position: absolute;
    top: 6px;
    bottom: 0;
    left: 0;
}
.laadstation img {border: 17px solid var(--white);box-shadow: 0px 0px 50px rgb(0 0 0 / 10%);}
iframe.map {height: 450px;display: block;width:100%;margin-top: 80px;
    margin-bottom: 80px;}
iframe.map2 {height: 450px;display: block;width:100%;margin-bottom:50px}

/*anderepagina's*/
.inhoud{padding-top:50px}
.intro {position:relative;align-items: center}
.intro .tekst {background-color:#F2F4F4; padding:40px;min-height: 450px;}
.intro .tekst .txtwrp{max-width:66%;}
.intro img{border: 17px solid var(--white);
  box-shadow: 0px 0px 50px rgb(0 0 0 / 10%);position:absolute;right:0px;
  width: 50%;
  padding: 0;}
.galerij figure {height: 165px;overflow: hidden;}
.inhoud .cta .content {margin-right: 0}
/**----Footer Css----**/
footer{background-color: var(--primary);}
.footer-top{ padding: 50px 0;border-bottom: 1px solid var(--secondary);margin-bottom: 25px;}
.footer-top h3 {font-size: 24px;color: var(--white);margin-bottom: 30px;font-weight: 700;font-family: 'Noto Sans';}
.footer-top .item p,.footer-top .item a {font-weight: 500;color: var(--white);text-decoration: none}
.footer-top .item p a:hover {color: var(--white);}
.footer-top .item a:hover {color: var(--secondary);}
.footer-top .item {margin-bottom: 20px;}
.footer-top .item:last-child{margin-bottom: 0;}
.footer-top .item img {width: 25px;height: 25px;}
.footer-top .item p a {color: var(--secondary);text-decoration: underline;}
.footer-bottom {padding-bottom: 20px;}
.footer-bottom p {font-size: 14px;color: var(--white);display: inline-block;margin-bottom: 0;line-height: 16px;}
.footer-bottom p + p {border-left: 1px solid var(--white);padding-left: 25px;margin-left: 25px;}
.footer-bottom a {color: var(--white);text-decoration: none;font-size: 14px}
.footer-bottom a + a{margin-left: 26px;}
.footer-bottom a:hover {color: var(--secondary);}

/*------- Scroll to Top -------*/
.scrollToTop {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 60px;
    border-radius: 55px;
    right: 30px;
    color: #fff;
    transition: all 0.5s;
    background: var(--primary);
    z-index: 9;
    padding: 18px;
    visibility: hidden;
    opacity: 0;
}
.sticky .scrollToTop {
    opacity: 1;
    visibility: visible;
}
.scrollToTop:hover {
    color: #fff;
    background-color: var(--dark);
}


/* Responsive */
@media (max-width: 1399px) {header .nav-item {margin: 0 15px;}.over h1 { margin-bottom: 25px;}}
@media (min-width:992px) and (max-width:1199px){
	 h1 {font-size: 50px;margin-bottom: 70px;}
    header nav > ul > li > a.nav-link {font-size: 14px;}
    header nav > ul > li + li {margin-left: 25px;}
  .btn {
        padding: 0 25px;
        line-height: 38px;
        font-size: 14px;
        min-width: 120px;
    }
 .laadstation .content h2 {font-size: 48px; margin-bottom: 14px;}
.laadstation .content h3 {font-size: 25px;margin-bottom: 20px;}
.footer-logo {margin-bottom: 20px;}
}

@media (max-width: 1024px) {.galerij figure {height: 142px;overflow: hidden;}}

@media (max-width:991px){body {font-size: 14px;}
	 header nav > ul > li > a.nav-link {font-size: 14px;}
    header nav > ul > li + li {margin-left: 24px;}
  .header-logo a { max-width: 150px;}
   .header-main .header_contact_info {margin-bottom: 24px;}
	 .header-main .header_contact_info a {font-size: 15px;padding-right: 20px; margin-right: 20px;}
	 .header-main .social_media {margin-left: 25px;}
    .scrollToTop {
        width: 36px;
        height: 36px;
        bottom: 100px;
        right: 25px;
        padding: 14px;
    }
    .scrollToTop:before {
        transform: skew(-20deg);
    }
    .scrollToTop:hover:before {
        transform: skew(20deg);
    }
   .btn {
        padding: 0 25px;
        line-height: 40px;
        font-size: 16px;
        min-width: 120px;
    }
    section {padding-top: 60px;padding-bottom: 60px;}
    .over p { font-size: 16px; margin-bottom: 14px;}
	
	.over .item {margin-bottom: 25px;}
    .over .item .icon img {width: 42px;}
    .over .item h5 { font-size: 16px;}
	 .cta .content h3 {font-size: 28px; margin-bottom: 30px;line-height: 38px;}
    .cta .img {border: 14px solid var(--white);margin-top: 144px; margin-left: -95px;}
    .cta .content { padding: 40px 60px 60px 20px;}
    .laadstation .content h2 {font-size: 36px;margin-bottom: 4px;}
   	.laadstation {padding: 40px 0;}
    .laadstation .content h3 {font-size: 20px;margin-bottom: 16px;}
    .laadstation .content p { font-size: 16px}
    .laadstation .content a {font-size: 16px; margin-bottom: 16px;}
    .laadstation .content ul li { padding-left: 22px;font-size: 16px;}
    .laadstation .content:after {width: 460px;height: 460px;}
    .laadstation .content {padding-left: 0;padding-right: 10px;}
    .footer-bottom p { font-size: 13px;}
    .footer-bottom a {font-size: 13px;}
    .footer-bottom p + p {padding-left: 8px;margin-left: 8px;}
    .footer-bottom a + a {margin-left: 8px; }
    .footer-top .item p, .footer-top .item a {font-size: 16px;}
    .footer-top .item {margin-bottom: 16px;}
    .footer-top {padding: 40px 0;}
	.intro .tekst p{max-width:100%}
	.intro img{position: relative;margin: -40px auto 0;}
	.intro .tekst .txtwrp {max-width: 100%;}
	.intro .tekst {
  min-height: 200px;
  height: auto;
}
	.galerij figure {
    height: 100px;
    overflow: hidden;
  }
}   

@media (max-width:767px){
section{ padding-top: 50px; padding-bottom: 50px;}
.header-main {align-items: center;}
    header {padding: 10px 0;}
    .header-main .header-logo { padding-top: 0;}
   
	.header_menu_wrp {
        margin-left: auto;
    }
	  nav.header-navbar {
        position: fixed;
        right: 0;
        display: block;
        z-index: 9999;
        background: var(--primary);
        top:180px;
        bottom: 0;
        width: 100%;
        padding: 30px 20px;
        transform: translatex(100%);
        transition: all 0.4s;
        overflow: auto;
        color:#fff;
        margin:0;
    }
	      header nav > ul {
        margin: 10px 0 0;
        display: block;
    }
	    header nav > ul > li > a.nav-link {
        color: #fff;
        font-size: 20px;
        line-height: 40px;
        font-weight: 700;
        display: block;
        align-items: center;
        white-space: nowrap;
        flex-grow: 1;
    }
 

    header nav > ul > li + li {
        margin-left: 0;
        margin-top: 16px;
    }

	 header nav > ul > li > a.nav-link:before {
        bottom: -1px;
    }
  .header-logo a {
        max-width:150px;
    }
    .navbar-toggle{
        display: block;
        position:relative;
        width:40px;
        height:40px;
        margin-left: 20px;
    }
   
    .navbar-toggle span {
        width: 32px;
        height: 2px;
        background: var(--secondary);
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0;
        margin: auto;
        transition:all 0.3s;
    }
    .navbar-toggle span:nth-child(1) {
        top: -16px;
        width: 18px;
    }
    .navbar-toggle span:nth-child(3) {
        bottom: -16px;
        width: 18px;
    }
    .menu-show .navbar-toggle span:nth-child(1) {
        top: 0;
        width: 28px;
        transform:rotate(45deg);
    }
    .menu-show .navbar-toggle span:nth-child(2) {
        width: 0;
    }
    .menu-show .navbar-toggle span:nth-child(3) {
        bottom: 0;
        width: 28px;
        transform:rotate(-45deg);
    }
  
    .menu-show.sticky nav.header-navbar {
        top: 62px;
    }
    .menu-show nav.header-navbar {
        transform: translatex(0%);
    }
  h1 {font-size: 40px;margin-bottom:5px;text-align: center;}
	h2 {font-size:35px}
    .over p {font-size: 15px;margin-bottom: 6px;text-align: center;}
    .over .item { margin-bottom: 20px;}
	.over h1 {margin-bottom:5px;}
	.cta {padding-bottom: 50px;}
    .cta .img {border: 10px solid var(--white);margin-top: 0; margin-left: 0;}
	 .cta .content { padding: 25px 14px;margin: 0;}
     .cta .content h3 {font-size: 24px;margin-bottom: 24px;line-height: 32px;}
	.laadstation { padding:0;}
	.laadstation .content { padding: 20px;}
    .laadstation .content:after { width: 100%;height: auto;}
    .laadstation .content h2 {font-size: 30px;text-align: center; }
    .laadstation .content h3 {font-size: 18px;margin-bottom: 10px;text-align: center;line-height: 20px}
    .laadstation .content ul li {font-size: 15px;}
 	.btn {
        padding: 0 21px;
        line-height: 38px;
        font-size: 15px;
        min-width: 120px;
    }
.galerij figure {height: 95px;overflow: hidden;}
	.intro img {width:60%}
    .footer-top h3 {font-size: 22px; margin-bottom: 22px;}
    .footer-top .item img { width: 22px; height: 22px;}
    .footer-top .item p, .footer-top .item a {font-size: 15px;}
    .footer-top { padding: 30px 0;margin-bottom: 30px;}
    .footer-bottom p {font-size: 15px;text-align: center;margin-bottom: 10px;display: block;}
    .footer-bottom p + p { padding-left: 0; margin-left: 0;border: 0;margin-bottom: 18px;}
}
@media(max-width: 575px) {
.header_contact_info {display: block;text-align: center;margin-bottom:10px}
.header_contact_info a {border-right: none;}
.intro img {width:90%}
.galerij figure {height: auto;overflow: hidden;}
}