@charset "utf-8";
/* CSS Document -  WEBSPICE - Sofie Vandenberghe -  www.webspice.be*/


@font-face {
    font-family: "Lato Regular";
    src: url('fonts/lato-regular-webfont.eot');
    src: url('fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/lato-regular-webfont.woff2') format('woff2'),
		url('fonts/lato-regular-webfont.woff') format('woff'),
		url('fonts/lato-regular-webfont.svg#lato-regular-webfont') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lato Black";
	src: url('fonts/Lato Black.eot');
	src: url('fonts/Lato Black.eot?#iefix') format('embedded-opentype'),
		url('fonts/Lato Black.woff2') format('woff2'),
		url('fonts/Lato Black.woff') format('woff'),
		url('fonts/Lato Black.svg#Lato Black') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
html {
  scroll-behavior: smooth;
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing:grayscale!important;
-webkit-font-smoothing:antialiased!important
}
body{
	font-family: "Lato Regular";
	color: #444444;
	font-size: 18px;
	background-color: #ffffff; 
}
h1 { color: #0f6131; font-size: 40px; display: block;font-family: "Lato Black";  }
.inhoud h1{font-size: 46px;}
.inhoud h2{font-size: 36px;font-family: "Lato regular";}

h2 {
	   font-size: 38px;
   color: #0f6131;
    line-height: 48px;
    margin: 0 0 10px;
    font-weight:normal;
	font-family: "Lato Black";
    text-transform: none;
	position:relative;
	padding: 0 0 15px;
}
.inhoud h2{font-size: 36px;font-family: "Lato black";color:#40ae49;margin-top:20px}

h3 {
	font-size: 22px;
	color: #474744;
	margin: 15px 0 5px;
	font-family: "Lato black";
	text-transform: none;
	}
h4{ font-weight:bold; font-size:18px;margin-top:10px;}
h4 a {color:#444444}
h5{font-size:22px;font-weight:normal}
 p{
 font-weight:normal;
line-height: 24px;
margin: 0 0 10px;
	 }
a, a:hover, a:focus, a:focus, a:active{ text-decoration:none; outline:none; transition: ease-in .3s; }
a {text-decoration:none;color:#40ae49;}
p a {text-decoration:none;}
p a:hover, a:hover{cursor:pointer;text-decoration: underline;color:#40ae49}
.inhoud ul {
    margin-left: 30px;
    margin-top: 10px;
    list-style: disc;
}
.inhoud ul li{padding: 5px 0;}
.breadcrumb {background-color:transparent;border-radius:0;justify-content:flex-start;padding-left:0px;}
.breadcrumb-item {font-size:12px}
.bgwece{background:#072612;margin-top:50px}
#webspice { text-align: right;padding-right:10px}
#webspice a {
font-weight:600;
font-size:12px;
color:#999999;
text-decoration:none;
    padding-top: 5px;padding-bottom:5px;
    }

.bol {
color:#D99F15;
font-size:24px
}
.btnwrap{margin-top:50px;text-align: center}
.btn {
box-shadow: none !important;
text-decoration:none;
transition: 0.3s;
color:#fff;
background-color:#40ae49;
border: 1px solid transparent;
padding:10px 25px; text-transform: uppercase; font-size: 24px; font-family:"Lato Black"; margin: 0px 0 0; border-radius: 8px; white-space: normal;
}
.btn:hover, a.btn:hover {
text-decoration:none;
    background-color:#0f6131;
	color:#fff;
}
/*******/
input, textarea {
	font-size: 16px;
	font-weight: normal;
	padding: 10px;
	background-color: #e4e4e4;
	width: 100%;
}
input:focus{ outline:none;}
.form-control::placeholder {color: #959494;}
.form-control, .form-control-file{font-weight: normal;
	padding: 6px 10px;
background-color: #ffffff;
    border:1px solid #959494;
    border-radius:0;
 color: #666666;}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #40ae49;
    outline: 0;
    box-shadow: none;
}
.formelnt{
  position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 15px;
	}
.submit {
    font-family: "Lato Black";
display: block;
line-height: 1.25;
text-align: center;
vertical-align: middle;
text-decoration: none;
text-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-clip: padding-box;
margin-top: 20px;
background:#40ae49 none repeat scroll 0 0;
color: #ffffff!important;
font-size: 20px;
padding: 17px;
margin-left: auto;
margin-right: auto;
border: 1px solid transparent;
border-radius: 8px;
    text-transform:uppercase;
        transition: all 0.5s;
    width: 300px;
height: 64px;
   
}
.submit:hover {background-color: #0f6131;text-decoration:none;color:#fff}
 iframe.map {height:400px; width:100%;display: block;}
.container {max-width: 1200px;}
/**----Top header Css----**/
.header-main {position: relative;transition: all .5s ease-in-out;  background-color: rgba(255,255,255,1);box-shadow: 0 0 30px rgba(7,51,84,0.17) !important;}
.header-main.header-reduce {transition: all .5s ease-in-out; }
.header-main.fixed-top{position:fixed;}
.header-main .navbar-brand img {transition: all .5s ease-in-out;}
.navbar-brand img{max-width:250px}
.header-main.header-reduce .navbar-brand img {transition: all .5s ease-in-out; width: 180px;}
.top_head{ width: 100%;  background: #f3f3f5; }
.top_head ul.call_email{ width: 100%; padding: 5px 0;margin-bottom:5px;text-align: right;  }
.top_head ul.call_email li{ width: auto; display: inline-block; line-height: 40px; padding:0 15px;}
.top_head ul.call_email li a{ color: #444; }
.top_head ul.call_email li.tel a svg, footer ul li.tel a svg{ transform: rotate(90deg); }
ul.call_email li a svg {margin-right:5px;color:#40ae49}
.top_head ul.call_email li a:hover{ color: #0f6131 !important; }
.top_head ul.top{padding: 5px 0;margin-bottom:5px}
.top_head ul.top li{ width: auto; display: inline-block; line-height: 40px; padding:0 15px; border-left: solid 1px #ccc;color: #40ae49; }
.top_head ul.top li:nth-child(1) { padding-left: 0; border-left: none; }
/**----Header Css----**/


/* nav */
.navbar-toggler:focus,
.navbar-toggler:active {outline: 0;}
.navbar-toggler{position:relative}
.navbar-toggler span {
display: block;
background-color: #444;
height: 3px;
width: 35px;
margin-top: 4px;
margin-bottom: 4px;
 -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
transform: rotate(0deg);
position: relative;
 left: 0;
opacity: 1;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
-webkit-transition: transform .35s ease-in-out;
-moz-transition: transform .35s ease-in-out;
 -o-transition: transform .35s ease-in-out;
transition: transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
position: absolute;
 left: 12px;
top: 10px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
 opacity: 0.9;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
height: 12px;
visibility: hidden;
 background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
position: absolute;
left: 12px;
top: 10px;
-webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
opacity: 0.9;
}
.navtop{display:flex;align-content: center}
.navbar-expand-lg .navbar-nav {
  justify-content: space-between;
  width: 100%;
}
li.nav-item { padding:10px; }
.nav-link{color:#444444;padding:0!important;position:relative}
.nav-link:focus, .nav-link:hover , .nav-link:active, .nav-link.active  , li.nav-item.active a  {
    text-decoration: none;
    color:  #40ae49;
}
.dropdown-menu {padding:0;margin:0}
li.nav-item.active a.dropdown-item{color:#444}
li.nav-item.active a.dropdown-item:hover{color:#40ae49}
.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown-item:hover{color:#40ae49}
/*index*/
/**----top_banner Css----**/
.top_banner{padding-top: 60px;background-color: #f6f9f4;
  padding-bottom: 30px;}
/**----Services Css----**/
figure {margin: 0;}
.dst{background: #f6f9f4;}
.diensten{margin:100px 0; position: relative; padding: 50px 50px 100px 50px; display: flex;flex-flow: row wrap; align-items:stretch; justify-content: space-between;border: 1px solid #0f6131;  }
.diensten figure{  position: relative; overflow: hidden;width: 100%;float: left; }
.diensten figure .overlay_area{ width:100%; height: 100%;  padding: 0; box-sizing: border-box} 
.diensten figure .overlay_area {position: absolute; left: 0; top: 0; width: 100%; height:100%;vertical-align: middle; display: flex;  align-items: center;  justify-content: center; transition: ease-in .3s;  }
.diensten figure .overlay_area h3{ width: auto; font-size: 22px; color: #fff; font-family:"Lato Black"; text-transform: uppercase; text-align: center; }
.diensten figure img{ width: 100%; transition: ease-in .3s; }
.diensten figure:hover img{ transform: scale(1.1); }
.diensten figure:hover .overlay_area{ background: rgba(63,165,53,.7 );  }
.diensten .box_01{ flex: 0 0 33.3%; padding: 0 12px;  }
.diensten .box_02{ flex: 0 0 33.3%; padding: 0 12px;  }
.diensten .box_03{ flex: 0 0 33.3%; padding: 0 12px;  }
/*.diensten .box_01 figure:nth-child(1),.diensten .box_02 figure:nth-child(1), .diensten .box_03 figure:nth-child(1){ margin-bottom: 12px;}
.diensten .box_01 figure:nth-child(2),.diensten .box_02 figure:nth-child(2), .diensten .box_03 figure:nth-child(2){ margin-top: 12px; }*/
.diensten .box_01 figure,.diensten .box_02 figure, .diensten .box_03 figure{ margin-top: 12px;margin-bottom: 12px }
/**----about_info Css----**/
.over{padding: 0 50px 100px 50px; text-align: center;margin-top:-180px }
.over figure{ margin-bottom: 40px; }
.over p{ font-size: 20px;  line-height: 32px; }
.over a{ display: inline-block; background: #40ae49; color: #fff; padding:15px 40px; text-transform: uppercase; font-size: 20px; font-family:"Lato Black"; margin: 30px 0 0;  }
.over a:hover{ background: #0f6131;text-decoration: none }
.over ul{ width: 100%;margin:0px;padding:10px ;display: flex;justify-content: space-between;}
.over ul li{ width: 20%; float: left; margin: 20px 0px; background: #fff;  padding: 20px;list-style-type: none;z-index: 999 }
.over ul li figure{ width: 78px; height: 74px; margin:auto }
.over h4{margin-top:20px}
/**----best_online_area Css----**/
.best_online{ padding: 35px 0 100px; text-align: center; }
.best_online h2{font-size: 51px; font-family:"Lato Black"; color: #40ae49; text-transform: uppercase; padding: 0 0 15px; margin: 0 0 20px; line-height: 60px; position: relative;}
.best_online h2 span{ color: #0f6131; font-size: 40px; display: block;  }
.best_online h2::after{ position: absolute; content: ""; width: 75px; height: 7px; border-radius: 3px; background: #0f6131; left: 47%; bottom: 0;  }
.best_online ul{ width: 100%;margin:0px;padding:0px ;display: flex;
    justify-content: center;}
.best_online ul li{ width: 30%; float: left; margin: 20px 5px; border: solid 1px #0f6131; border-radius: 8px; padding: 20px;list-style-type: none; }
.best_online ul li figure{ width: 140px; height: 140px; line-height: 140px; border: solid 1px #0f6131; border-radius: 50%; margin:auto }
.best_online ul li .dtls{ float: left; text-align: center; padding-left: 20px; }
.best_online ul li .dtls h3 a{ font-size: 24px; font-family:"Lato Black"; color: #40ae49; text-transform: uppercase; margin: 0 0 15px; }
.best_online ul li .dtls h3 a:hover{text-decoration: none}
.best_online ul li .dtls p{ font-size: 16px; line-height: 24px; min-height: 75px; }
.best_online ul li .dtls a.bestel{display: inline-block; background: #40ae49; color: #fff; padding:10px 40px; text-transform: uppercase; font-size: 24px; font-family:"Lato Black"; margin: 0px 0 0; border-radius: 8px;}
.best_online ul li .dtls a.bestel:hover{ background: #0f6131;text-decoration: none }
.nieuws{padding:100px 0;text-align:center}
.nieuws h2:after{ position: absolute; content: ""; width: 75px; height: 7px; border-radius: 3px; background: #0f6131; left: 47%; bottom: 0;  }
.nieuws .card-deck{margin-bottom:50px;text-align: left;margin-top:50px}
.review{padding-top:70px; padding-bottom:150px}
.cta-box{padding: 70px;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
vertical-align: top;
width: 100%;
background-image: url("../fotomateriaal/cta.webp");}
.cta-border{border:1px solid #ffffff;padding: 50px;}
.cta-box h2{color:#ffffff}
/**----Gallery Css----**/
.gallery{ padding: 100px 0 0;}
.gallery ul{width:100%; padding:0;margin:0 }
.gallery ul li{ width:25%; float: left; text-align:center;  border-radius:3px; transition:ease-in .3s; background: #fff; position: relative; border:1px solid #fff; border-width: 1px 1px 0px 0;list-style-type: none}
.gallery ul li figure{ width: 100%; float: left; overflow: hidden;margin:0;padding:0  }
.gallery ul li figure img{ width: 100%; transition: ease-in .3s; }
.gallery ul li:hover img{ transform: scale(1.1); }

/* Andere paginas */
.inhoud .diensten{border:none;margin-top:0}
.inhoud .card-deck{margin-top:50px}
.inhoud .card{margin-bottom:12px}
.inhoud .over{margin-top:100px}
.inhoud .over ul li{list-style: none}
.gallery .holder{display: flex;
align-items: center;
justify-content: center;overflow:hidden;margin:10px 0}
.pag-img {text-align: center}
.pag-img img.bottom{
 top: -50px;
  right: -52px;
  position: absolute;
  z-index: 9;}
.pag-img img.top{padding:20px;z-index: 99;
  position: relative;}
#carousel{z-index:99}
#carousel img{margin:auto; padding:0}
.grvet{font-weight:bold;color:#40ae49}
.card{border: 1px solid #40ae49;border-radius:15px;width:100%}
.card-body{padding:1rem;}
.card-title{
	font-size:20px;
	color:#40ae49;
 font-family: "Lato Black";
 text-transform: uppercase
	}
.card-footer {
	background-color:transparent;
	border-top:none
    
}
.card-footer a {
    color: #40ae49;
    font-size: 18px;
    font-family: "Lato Black";
    display: inline-block;
    transition: all 0.5s;
	text-transform: uppercase;
	background-color:#fff;
	border-top:none
    
}
.cta:before { 
  display: block; 
  content: " "; 
  margin-top: -350px; 
  height: 350px; 
  visibility: hidden; 
  pointer-events: none;
}
.time-ul ul li span { width: 100px; margin-right: 5px; float: left; }
.time-ul ul {padding-left:0px}
.time-ul ul li {
    padding: 0 0 5px;
    list-style: none;
}
.ups-box {padding: 70px;background-color: #193910;margin-top: 50px}
.ups{border: 1px solid #ffffff;padding: 50px;text-align: center;}
.ups figure{ margin-bottom: 40px; }
.ups ul{ width: 100%;margin:0px;padding:10px ;display: flex;justify-content: space-between;}
.ups ul li{ width: 20%; float: left; margin:0px; padding: 20px;list-style-type: none;z-index: 999 }
.ups ul li figure{ width: 78px; height: 74px; margin:auto }
.ups h4{margin-top:20px;color:#ffffff}
#accordion .card{border:0px}
#accordion .card-header{background-color:#fff; padding-bottom:0px}
#accordion h5 button {background-color:#fff;text-transform:none;font-family:"Lato Regular";color:#0f6131;font-size:16px;padding-left:0px;border:none}
#accordion h5 button.collapsed:before{display:none;font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107";}
#accordion h5 button:not(.collapsed):before{display:none;font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f106"}
#accordion h5 button svg {margin-right:5px;font-size:24px;padding-top:5px}
.input-group-text{border-radius:0px;border-color:#959494}

/**----Footer Css----**/
footer{width:100%;float:left; background:#063319;padding:50px 0 0 ; color: #fff;}
footer h4{ font-weight:bold; font-size:18px;margin-top:10px;text-transform: uppercase;color:#40ae49}
footer ul{ width: 100%; float: left; margin: 0px 0 10px; padding:0 }
footer ul li{ width: auto; margin: 5px 5px;list-style-type: none;padding: 5px 0;  }
footer ul.nw li{ list-style-type: disc;  }
footer ul li a{color: #fff; text-decoration: underline}
footer ul li a.fb {
  width: 39px;
  height: 39px;
  background: #40ae49;
  color: #fff;
  display: block;
  border-radius: 50%;
  line-height: 39px;
  text-align: center;
  font-size: 20px;
margin-left:20px;
	margin-top:10px
}
footer ul li a.fb:hover {color: #0F6131;}
footer ul li img{ margin-right: 5px; }
footer ul li a:hover{ color: #40ae49;text-decoration:none }
footer hr{border-top: 1px solid #8c8b8b;}
footer a.btnnws {text-transform: uppercase;color: #ffffff;font-family: "Lato Black";}
footer .foot_bot{ width: 100%; float: left; padding:10px 0;text-align: center; background: #3f3e3e; min-height: 45px; }
.scrollup{display:none;position:fixed;bottom:4em;right:50px;width:47px;height:47px;background:url(../fotomateriaal/back-top-btn.png);text-indent:-999999px;transition:ease-in .3s all;z-index:999;}
.scrollup:hover{background-position:left bottom;}
.cook {padding-top: 5px;}
/* Responsive */
@media (min-width: 2000px){#fotocontent {height: 400px;}.gallery .holder{height:207px}}
@media (min-width: 1400px)and (max-width:1999px){#fotocontent {height: 300px;}.gallery .holder{height:207px}}
@media (min-width: 1200px) and (max-width:1399px){#fotocontent {height: 250px;}.gallery .holder{height:207px}}
@media (min-width: 768	px) and (max-width:1199px){#fotocontent {height: 280px;}}
@media only screen and (max-width: 1400px) {
.best_online{ padding: 20px 0;}
	.best_online h2{font-size: 40px;margin:0;line-height: 50px}
}
@media only screen and (max-width: 1200px) {	
nav ul li{ padding: 0 5px; }
.best_online ul li .dtls h3{ font-size: 24px; }
.best_online ul li .dtls p{ font-size: 16px; }
#fotocontent {height: 200px;}
.gallery .holder{height:170px}
}
@media screen and (max-width: 1023px) {
nav ul li{ padding: 0 0 0 20px; }
.best_online ul{ width: 100%;flex-direction:column}
.best_online ul li{ width: 100%; margin: 15px 0; }
.best_online ul li figure{ display: block; float: none; margin: 0 auto; }
.best_online ul li .dtls{ width: 100%; text-align: center; margin: 15px 0; padding: 0; }
.best_online h2{ font-size: 32px; line-height: 40px; }
.best_online h2 span{ font-size: 18px; }
.best_online h2::after{ left: 40%; }
.over ul li, .ups ul li{width:50%}
	footer ul li {display:block}
	footer{padding-left:20px}
#fotocontent {height: 140px;}
.gallery .holder{height:125px}
.ups-box {padding: 35px;}
.pag-img {margin-top: 50px;}
}
@media screen and (max-width: 767px) {	
.top_head ul.top li{ border-left:none;padding-left:0;display:block }
.top_banner .banner_txt h1{ font-size: 22px; line-height: 28px; }
.top_banner .banner_txt{ padding: 20px; }
.top_banner .banner_txt a{ font-size: 18px; padding: 15px 30px; }
.nav_right{  top:115px; min-width: 320px;}
.diensten{ margin: 50px 0 0;  }
.best_online ul li{ width: 100%; margin: 15px 0; }
.best_online ul li figure{ display: block; float: none; margin: 0 auto; }
.best_online ul li .dtls{ width: 100%; text-align: center; margin: 15px 0; padding: 0; }
.best_online h2{ font-size: 32px; line-height: 40px; }
.best_online h2 span{ font-size: 18px; }
.best_online h2::after{ left: 40%; }
.card-deck .card{margin-bottom: 15px}
.gallery ul li{ width: 50%; }
#fotocontent {height: 140px;}
.gallery figure {margin-bottom:10px}
.dropdown-menu{width:90%;border:none}
.gallery .holder{height:125px}
nav.navbar{position: absolute;
z-index: 9999;
display: block;
width: auto!important;
top: 20px;
right: 20px;
background-color: #fff;}	

}
@media(min-width: 577px) and (max-width: 767px){
.diensten .box_01, .diensten .box_02 {flex: 0 0 50%; margin: 15px 0; }
.diensten .box_03{flex: 0 0 100%;display:flex}
.diensten .box_03 figure:nth-child(1),.diensten .box_03 figure:nth-child(2){ flex: 0 0 50%; }
.diensten .box_03 figure:nth-child(1){ padding-right:10px }
.diensten .box_03 figure:nth-child(2){ padding-left:10px;margin-top:0px }
.diensten figure .overlay_area h3{ font-size: 18px; }
.over {padding: 0 10px 100px 10px;margin-top: -100px;}
.gallery .holder{height:170px}
.cta-box {padding: 20px;}
.cta-border {padding: 20px;}
.cta-box h2 {font-size: 30px;line-height: 35px}
}
@media (max-width: 576px){
.navbar-light .navbar-brand img{ max-width: 200px; }
.diensten .box_01, .diensten .box_02, .diensten .box_03{ flex: 0 0 100%; margin: 15px 0; }
.diensten figure .overlay_area h3{ font-size: 18px; }
.over {margin-top: -100px;}
.over ul, .ups ul{ width: 100%;flex-direction:column}
.over ul li, .ups ul li{width:100%}
#fotocontent {height:70px;}
.gallery .holder{height:229px}
.btn{width:100%}
.cta-box {padding: 20px;}
.cta-border {padding: 10px;}
.cta-box h2 {font-size: 30px;line-height: 35px}
}