@charset "utf-8";
/* CSS Document -  WEBSPICE - Sofie Vandenberghe -  www.webspice.be*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root { --primary: #333333;
  --secondary: #e0d5ba;}
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-optical-sizing: auto;
	font-size: 16px;
  color: var(--primary);
  font-family: "Open Sans", sans-serif;
  font-style: normal;
background-color: #ffffff
}
h1, h2, h3, h4{  font-family: "Lora", sans-serif;}
h1{ color: var(--primary);font-size: 42px;line-height: 52px;font-weight: 400;text-align: center}
h2{color: var(--primary);font-size: 42px;line-height: 52px;font-weight: 400;text-align: center}
h2:after, h1:after {content: url("../fotomateriaal/star-line.webp");display: block;text-align: center;margin: 0 auto 30px;}
.inhoud h2{font-size:34px;line-height: 45px;color: var(--primary); margin-bottom: 20px;margin-top:20px;text-align: left}
.inhoud h2:after{content:none}
h3{font-size: 26px;font-weight: 500;line-height: 55px;color: var(--primary); margin-bottom: 10px; font-family: "Open Sans", sans-serif;}
h4{font-size: 24px;color: var(--primary);}
h5{ont-size: 24px;line-height:34px;font-weight: 600;color: var(--primary);}
p{font-size: 16px;}
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: 0px;}
.inhoud ul li{margin:5px;list-style: disc;font-family: "Noto Sans", sans-serif;}
.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:#2f2d2d;}
#webspice { text-align: right;}
#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;
	  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
  padding: 18px 30px;
  border-radius: 30px;
    color: var(--primary);
  transition: 0.2s ease-in;
   background: transparent;
  border: 1px solid var(--primary);
}
.btn:hover,.btn:active,.btn:focus,.btn-check:checked + .btn,.btn.active,.btn:first-child:active,:not(.btn-check) + .btn:active {color:#ffffff;background: var(--primary);border-color: var(--primary);box-shadow: none;}
.btn-secondary, .btn-secondary:visited{background: var(--secondary);border: 1px solid var(--secondary);}
.btn-secondary:hover,.btn-secondary:active,.btn-secondary:focus{background: var(--secondary);border-color: var(--secondary);color:var(--primary)}
.form-floating label, select.form-select {color:#959494}
.form-control, .form-control-file, .form-select{font-weight: normal;border-radius:0.8rem;margin:10px 0;}
.form-control:focus, .form-select:focus{color: var(--secundary);background-color: #fff;border-color:var(--primary);outline: 0;box-shadow: none;}
.submit {color:#ffffff;background-color:var(--primary)}
.submit:hover{color:var(--primary);background-color:#ffffff}
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {background-color: transparent}
.form-select{height: calc(3.5rem + calc(var(--bs-border-width) * 2));min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));line-height: 1.25;}
label.input-group-text{height: 38px; margin-top: 10px;}
/*******/

section {padding: 70px 0;}
header { background: var(--primary);padding: 8px 0;}
.navbar {padding: 0 0 18px;}
.navbar > .container {align-items: end;}
.navbar-expand-xl .navbar-collapse {justify-content: right;}
.navbar-brand {padding: 0px;margin: 0px;}
.nav-item { margin: 0 25px 8px;}
.nav-link {padding: 0px !important;font-size: 16px;color: #fff;}
.nav-link:hover,.nav-link:focus{color: var(--secondary);text-decoration: none}
.navbar-nav .nav-link.active{color: var(--secondary);text-decoration: none}
.navbar-ml {margin-left: 30px;}
.navbar-ml .navbar-nav {display: flex;align-items: center;}
.navbar-ml .nav-item {margin: 0 10px;}
.navbar-ml .nav-item i {color: #fff;font-size: 24px;}
.navbar-ml .nav-item i:hover{color: var(--secondary);}
.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;}
.main-nav .navbar-nav {justify-content: space-between;flex: 1;}
.main-nav.navbar {padding: 14px 0 8px 0;}
.main-nav {border-top: 1px solid var(--secondary);}
.main-nav .nav-link {font-weight: 600;font-size: 18px;}
.main-nav .nav-item {margin-bottom: 0;}
.main-nav .nav-item:first-child {margin-left: 0;}
.main-nav .nav-item:last-child {margin-right: 0;}
/*index*/
.hero {height: 100%;padding: 0;}
.hero-video {height: 100%;max-height: 780px;width: 100%;overflow: hidden;position: relative;}
.hero-video::after {position: absolute;left: 0;top: 0;bottom: 0;right: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.2);content: '';display: block;}
.content-overlay {position: absolute;z-index: 1;transform: translate(-50%, -50%);text-align: center;top: 50%;left: 50%;width: 100%}
.hero h1 {font-size: 60px;font-weight: 700;line-height: 60px;margin-bottom: 20px;color:#ffffff}
.hero video {z-index: 0;width: 100%;height: 100%;object-fit: cover;}
/**Scroll-down Link **/
.hero-scroll{position: absolute;z-index: 1;bottom: 0;left: 50%;padding-bottom: 41px;-webkit-transform: translateX(-50%);transform: translateX(-50%);font-size: 14px;line-height: 24px;text-transform: uppercase;
 color: #f9f8f8;font-weight: 400;cursor: pointer;}
.link__line {transform-origin: left bottom;transform: rotate(90deg);position: absolute;top: 25px;left: 50%;width: 76px;height: 2px;background: #919695;
  overflow: hidden;z-index: 1;display: block;}
.link__line:after {content: '';display: block;position: absolute;top: 0;left: 0;width: 38px;height: 2px;background: #f9f8f8;}
.hero-scroll:hover .link__line:after {animation: animation-line 1.5s forwards;}
@keyframes animation-line {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
.intro p {font-size: 20px;text-align: center;max-width: 1000px;margin: 0 auto;}
.collecties {position: relative;}
.collecties:before {position: absolute;content: "";display: block;height: 700px;width: 700px;background: url("../fotomateriaal/ventura-bg.webp");background-repeat: no-repeat;
  background-position: center right -240px;background-size: 720px;right: 0;top: -150px;}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 25px;
}
.grid-item {position: relative;overflow: hidden;-webkit-transition: 0.4s ease;transition: 0.4s ease;}
.grid-item:hover img {-webkit-transform: translate3d(0, 0, 0) scale(1.12);opacity: 0.8;transform: translate3d(0, 0, 0) scale(1.12);}
.grid-item:hover .overlay {background-color: var(--primary);color: #fff;}
.grid-item img {width: 100%;height: 100%;display: block;}
.overlay {position: absolute;bottom: 0;width: 100%;background-color: rgba(0, 0, 0, 0.5);color: var(--secondary);text-align: center;padding: 15px 0;font-size: 20px;
  text-transform: uppercase;}
.overlay span {display: inline-block;margin-left: 8px;}
/* Adjust grid structure for 5 items */
.grid-item:nth-child(1) {grid-column: 1 / 2;grid-row: 1 / 3;}
.grid-item:nth-child(2),
.grid-item:nth-child(3),
.grid-item:nth-child(4),
.grid-item:nth-child(5) {
  grid-column: auto;
  grid-row: auto;
}
.showrooms, .cta {background: #fcfaf3;}
.sub-text {margin-bottom: 40px;}
.sub-text p {font-size: 20px;text-align: center;}
.showrooms .card {background: transparent;border: 0 none;-webkit-transition: 0.4s ease;transition: 0.4s ease;}
.showrooms .card img{height: auto;}
.showrooms .card:hover {-webkit-transform: scale(1.05);transform: scale(1.05);}
.showrooms .card .card-body {padding: 20px 0 10px;position: relative;}
.showrooms .card .card-body span {position: absolute;left: 0;}
.showrooms .card .card-body .card-text {padding-left: 25px;}
.showrooms a{text-decoration: none}
.section-btn {
  margin-top: 40px;
  text-align: center;
}

/*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/pag-bg.webp");}
.inhoud {margin-top:50px}
.cta{margin-top:50px}
.cta h2 {text-align: center}
.cta h2:after{content:none}
.list-group-item{border:none;padding-bottom:0;padding-top:0}
iframe.map {height: 300px;display: block;width:100%;margin-bottom: 10px;}
.inhoud.showrooms{background:#ffffff}
/**----Footer Css----**/
footer {background: var(--primary);padding: 70px 0 150px;}
.footer-top {width: 100%;display: flex;justify-content: space-between;align-items: end;}
footer .col {flex: inherit;}
.footer-logo {margin-bottom: 20px;}
.footer-social ul {display: flex;gap: 25px;}
.footer-social li a {color: #fff;font-size: 28px;}
.footer-social li a:hover,footer .col p a:hover {color: var(--secondary);}
footer .col p {line-height: 24px;color: #ffffff;margin-bottom: 10px;}
footer .col p a {color: #fff;text-decoration: none;}
.main-address {margin: 0 -20px 20px;}
.main-address h3 {
  color: #fff;
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 20px;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
}
.address {position: relative;margin-bottom: 10px;}
.address:before {content: "";background: url(../fotomateriaal/star.webp);position: absolute;display: block;left: -22px;background-size: 13px;width: 13px;height: 18px;background-repeat: no-repeat;background-position: center 2px;}
#policy {padding: 10px 0;color: #e8e8e8}
#policy a {color: #e8e8e8;font-size: 14px;text-decoration: none;text-transform: uppercase;font-weight: 600;}
/*------- Animation Style Start -------*/
.scroll-animation {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.2s ease, transform 1s ease;
}
.scroll-animation.show{
  opacity: 1;
  transform: translateY(0);
}
.fade-in{
  opacity: 0;
  transition: opacity 5s ease;
}
.fade-in.show{
  opacity: 1;
}
/*------- Scroll to Top Style Start -------*/
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary);
  width: 50px;
  height: 50px;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 12px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#return-to-top:hover {background: var(--secondary);}
#return-to-top:hover i {color: #fff;top: 5px;}

/* Responsive */
@media (max-width: 1199px) {
h2{font-size: 45px;line-height: 55px;}
.container{max-width: 100%;}
header{padding: 15px;height: 78px;}
.navbar-brand img { width: 100px;}
.navbar > .container {align-items: center;}
.navbar-toggler {
	     color: #fff;
	    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: 77px;
	    background: #fff;
	   background: var(--primary);
    z-index: 9;
    padding: 15px 15px;

	}
.main-nav {border: 0 none;}
.main-nav .nav-item,.nav-item {margin: 0 0 5px 0;}
.main-nav .navbar-collapse {padding-bottom: 0px;}
.main-nav.navbar .nav-link{color: #fff;}
.navbar .nav-link {color: var(--secondary);font-size: 16px;font-weight: 500;}
 .nav-item:last-child { margin-bottom: 0px;}
.navbar-ml {position: relative;right: 45px;}
.navbar-ml .nav-link, .navbar-nav .nav-link.show {color: #fff;}
.main-nav .navbar-collapse {top: 0;}
.navbar-collapse {top: 210px;left: 0;transition: 0s ease;}
 .navbar-nav .dropdown-menu {position: absolute;top: 25px;min-width: auto;}
.navbar-ml .navbar-nav {flex-direction: inherit;}
}

@media (max-width: 991px) {
.navbar-ml .nav-item i {font-size: 18px;}
  .overlay {font-size: 14px;padding: 8px 5px;}
  footer {padding: 50px 0;}
  footer .main-address {margin: 0 auto 30px;}
  .footer-top {display: inline-block;}
  footer .col {margin-bottom: 30px;}
  footer .address {margin-left: 20px;}
  footer .col:nth-child(1) { width: 100%;display: block;}
  footer .col {width: 100%;max-width: 170px;display: inline-block;}
}

@media (max-width: 767px) {
h2 {font-size: 30px;line-height: 40px;margin-bottom: 20px;}
header {padding: 15px 0;}
.navbar-ml .nav-item {margin: 0 5px;}
.navbar-brand {font-size: 22px;line-height: 22px;}
.navbar-toggler {right: 15px;}
 .hero h1 {font-size: 30px;line-height: 38px;}
  .hero video {height: 400px;}
  section {padding: 50px 0;}
.collecties::before{height: 350px;width: 350px;background-size: 350px;background-position: center right -100px;top: -60px;}
.grid-container {grid-template-columns: 1fr;}
  .showrooms .card {display: block;}
  .showrooms .mb-4 {margin: 0 auto;max-width: 400px;}
  .section-btn {margin-top: 15px;}
  footer {padding: 50px 0;}
  footer .footer-top {display: block;}
  footer .col {display: block;max-width: 100%;}
  footer .col:last-child { margin-bottom: 0;}
}