@charset "utf-8";
/* CSS Document -  WEBSPICE - Sofie Vandenberghe -  www.webspice.be*/
@font-face {
	font-family: 'Gotham-Book';
	src: url('fonts/Gotham-Book.woff2') format('woff2'),
		url('fonts/Gotham-Book.woff') format('woff'),
		 url('fonts/Gotham-Book.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:"Gotham-Medium";
	src: url('fonts/Gotham-Medium.woff2') format('woff2'),
		url('fonts/Gotham-Medium.woff') format('woff'),
		url('fonts/Gotham-Medium.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
:root {
    --blue:#009fe3;
    --dark: #1d1d1b;
    --white: #ffffff;
}

html {
  scroll-behavior: smooth;
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing:grayscale!important;
-webkit-font-smoothing:antialiased!important
}
body{font-family:"Gotham-Book";color:#3c3c3b;font-size: 16px;overflow-x:hidden; overflow-y:scroll; }
h1{font-family:"Gotham-Medium"; position: relative;color:var(--white);font-size: 3rem;line-height: 1.2;}
h2{font-family:"Gotham-Medium";  margin: 0 0 40px; position: relative;color:var(--dark);font-size: 3rem;line-height: 1.2;}
.inhoud h2{margin-top:30px}
h3 {font-family:"Gotham-Medium"; position: relative;color:var(--dark);font-size: 2rem;line-height: 1.2; margin-top: 30px!important}
h4{ font-size: 24px; margin-top: 0px;;position:relative;padding-bottom:20px;}
h5{font-size:20px; line-height:28px}
h6{font-size:24px; font-weight:normal; margin: 0 0 10px; line-height:30px;}
p{font-size:16px; font-weight:normal; line-height: 28px;margin: 0 0 10px;  }
a{ text-decoration:none; outline:none; transition: ease-in .3s;color:#CFA85A}
a:hover, a:focus, a:focus, a:active{ text-decoration:underline;}
p a{color:var(--blue);}
p a:hover, p a:active, p a:visited{color:var(--blue)}
ul {margin-left: 15px;margin-top: 10px;}
ul li{margin:5px}
.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}
.bgwece{background:#000000;}
#webspice { text-align: right;}
#webspice a {
font-weight:600;
font-size:14px;
color:#BBB8B8;
text-decoration:none;
    padding-top: 5px;padding-bottom:5px;
    }
#webspice a:hover{color:#ffffff}
.bol {
color:#D99F15;
font-size:24px
}
.btn{box-shadow: none !important;text-decoration: none;transition: 0.3s;background: transparent;border:1px solid var(--dark);border-radius:50rem;font-family: 'Gotham-Medium';position:relative;font-size:20px;display:inline-block;padding:1rem;text-transform:uppercase}
.btn:hover, .btn:focus{text-decoration: none;   color: var(--white);
    background-color: var(--blue);
    border-color: var(--blue);}
/*******/
input:focus{ outline:none;}
form{margin-top:5%}
.form-control::placeholder {color:#959494}
.form-control, .form-control-file{font-weight: normal;
	padding: 8px 10px;
    border:1px solid var(--dark);
	border-radius:0px;
	color:var(--dark);
	background-color:transparent;
margin:10px 0;
width:100%}
.form-control:focus {
    color: var(--dark);
    background-color: #fff;
    border-color:var(--dark);
    outline: 0;
    box-shadow: none;
}
.submit{margin-top:8%}
.headerTop {background-color: var(--dark);}
.headerTop a{font-size: 1rem;color: var(--white);}
.headerTop a:first-child { margin-right: 2.188rem;}
.headerTop a:hover,
.headerTop a:focus {color: var(--blue);}
/* nav */
.navbar-brand{margin-right:0}
nav.navbar {padding-top: 1.255rem;padding-bottom: 0.688rem;}
.navbar-toggler-icon {background-image: url(../fotomateriaal/toggle.webp);background-size: 16px auto;}
.navbar-toggler,
.navbar-toggler:focus {
    border: 2px solid #888888;
    border-radius: 3px;
    box-shadow: none;
    padding-left: .5rem;
    padding-right: .5rem;
}
.nav-link {color: var(--dark);font-size: 14px;text-transform:uppercase;margin-left:1rem;padding: 0 !important;white-space: nowrap;font-family: "Gotham-medium";}
.nav-link:hover,
.nav-link:focus,
.nav-link.active {color: var(--blue);}
.dropdown:hover > .dropdown-menu,.dropend:hover > .dropdown-menu {display: block;}
.dropdown-menu {border: none;box-shadow: rgba(0, 0, 51, 0.1) 12px 0px 30px;border-radius: 5px;}
.dropdown-menu a {text-transform: uppercase;line-height: 24px;font-size: 14px;font-family: "Gotham-medium";}
.dropdown-menu a:hover,.dropdown-menu a:focus{background: none;color: var(--blue);}
/*index*/
.bannerContentBox { max-width: 1160px;min-height: 387px;background-color: rgba(255, 255, 255, .7);}
.banner h1 {font-weight: 500;color: var(--blue);margin-bottom: 2.125rem;}
.banner p {color: var(--dark);max-width:900px}
.diensten {padding: 4.188rem 0 8.25rem 0;}
.card:hover {background-color: #f9f8f8;cursor: pointer;}
.card-title {font-size: 2.25rem;font-weight: 500;color: var(--dark);}
.card-footer{background-color: transparent;text-align: center;border: none;}
.blue-hr {border-color: var(--blue) !important;width: 55px;}
.inspectie {height: 485px;background-image: url(../fotomateriaal/Inspectie-bg.webp);background-position: center center;background-size: cover;}
.inspectieTitel,.inspectieLijst li {color: var(--white);font-family:"Gotham-Medium";}
.werk {padding: 150px 0 95px;background-color: #fafafa;}
.werk h2 { color: var(--dark);}
.werkBx {width: 100%;max-width: 1252px;}
.werkBxInner {max-width: 280px;min-height: 165px;background-color: var(--white);box-shadow: var(--box-shadow);color: var(--dark);}
.werkBxNr {width: 90px;height: 90px;background-color: #fafafa;border: 3px solid var(--white);padding: 10px;border-radius: 50%;}
.werkBxNrInner {background-color: var(--blue);font-weight: 500;color: var(--white);font-size: 1.625rem;}
.cta {padding: 5vw 0 5.468vw 0;}
.ctaTitel {font-size: 2.875rem; color: var(--dark);}
.ctaTitel span {color: var(--blue);display: block;}
/*anderepagina's*/
#fotocontent {
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    width: 100%;
    display:flex;
  height: 25vh;
}
.ftbg1 {background-image: url("../fotomateriaal/Inspectie-bg.webp");}
.white-hr {border-color: var(--white) !important;width: 55px;}
.types{padding:5vw;background-color:#fcfcfb; margin-top: 5%;background-image: url("../fotomateriaal/bg-diensten.png");
   background-position:-5% 105%;
    background-repeat: no-repeat;
    background-size:auto;
    background-attachment: scroll;
}
/**----Footer Css----**/
footer{padding: 5.989vw 0;background-color: var(--dark);font-family: "Gotham-Medium"}
footer a, footer li {color: var(--white);}
footer a:hover,footer a:focus { text-decoration: underline !important;color: var(--white);}
#btn-back-to-top:hover {background-position: left bottom;} 
#btn-back-to-top {position: fixed; border-radius:0; border:0; bottom: 20px; right: 20px; display: none; background: url("../fotomateriaal/back-top-btn.webp") no-repeat left top; 	text-indent: -999999px; 		transition: ease-in .3s all; 		z-index: 999999; 	width: 47px; height: 47px; 	}
/* Responsive */
/*@media (min-width:1200px){.nav-link {margin-left:3rem}}*/
@media screen and (max-width: 1399px) {.bannerContentBox {min-height: unset;}.nav-link{margin-left:0.5rem}.card-title{font-size: 2rem;}
	.container{max-width: 1240px;}}
@media screen and (max-width: 1200px) {
.brandLogo {max-width: 200px;}
.banner h1 {margin-bottom: 1.75rem;}
.banner p { font-size: 1.15rem !important;}
.inspectie {height: auto;}
.inspectieTitel,.inspectieLijst li {font-size: 1.25rem !important;}
.card-title {font-size: 30px;}
 .ctaTitel{font-size: 2.25rem;}
 .ctaTitel br {display: none;}
.navbar-toggler {
	    opacity: 1;
	    border: 0;
	    border-radius: 0;
	    padding: 0;
	    font-size: 30px;
	    position: absolute;
	    right: 15px;
	}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler:focus-visible {outline: none;}
.navbar-collapse {
	    width: 100%;
	    left: 0;
	    right: 0;
	    position: absolute;
	    top: 70px;
	    background: #fff;
	    z-index: 9;
	    padding: 20px;
	    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1);

	}
.navbar-nav .dropdown-menu {position: relative;display:block;box-shadow: none;margin-left: 25px;}
.dropdown-menu a {white-space: wrap;}
}
@media screen and (max-width: 992px) {	
.bannerContent {position: unset !important; }
.banner .btn {border-color: var(--dark);}
.inspectie { padding: 48px 0;}
.inspectieInner {padding-top: 48px;}
footer ul {
  flex-direction: column;
}
}
@media screen and (max-width: 768px) {	
 .card {border: none !important;}
}
@media (max-width: 576px){
h1{font-size: 2.3rem;}
h3{font-size: 1.8rem;}
.brandLogo {max-width: 180px;}
.headerTop a {font-size: 14px;}
}