@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: #19191a;
  --secondary: #000000;
}
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-weight:300;
	font-size: 16px;
	color: var(--primary);
	line-height: 24px;
}
h1{ font-family: "baskerville-poster-pt", serif; 
 color: var(--secondary);
  font-weight: 400;
	text-align: center;
}
.inhoud h1{font-family: "baskerville-poster-pt", serif; 
	font-weight: 400;
  font-size: 52px;
  line-height: 55px;
  color: var(--secondary);margin-top:50px;margin-bottom:50px}
h2{font-family: "baskerville-poster-pt", serif; 
	font-weight: 400;
 color: var(--secondary);
  font-size: 48px;
  line-height: 58px;
  }
h3 {font-family: "baskerville-poster-pt", serif; 
 color: var(--secondary);
  font-size: 35px;
  line-height: 45px;
  margin-bottom: 10px;font-weight: 400;}
h4{ font-family: "baskerville-poster-pt", serif; font-size: 24px;color: var(--primary);}
h5{ font-size: 24px;line-height: 34px;font-weight: 600;color: var(--primary);}
h6{}
p{font-size: 16px;line-height: 28px;color: var(--primary);font-family: "Noto Sans", sans-serif; 
	font-weight:300; }
a, a:hover, a:focus, a:focus, a:active{ text-decoration:underline;color:var(--secondary);}
p a{color:var(--secondary);}
p a:hover, p a:active, p a:visited{color:var(--secondary)}
.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; 
	font-weight:300; }
.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:#121515;}
#webspice { text-align: center;}
#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 {
  min-width: 290px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  padding: 18px 20px;
  border-radius: 0px;
  color: #384140;
  background: transparent;
  border: 2px solid #e6e7e7;
  transition: .2s ease-in;
}
.btn:hover,
.btn:active,
.btn:focus,
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
  color: #fff;
  background-color: var(--primary);
  border: 2px solid var(--primary);
  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-bottom:1px solid #19191a;
	border-top:none;
	border-left: none;
	border-right:none;
	border-radius:0px;
	color:var(--secondary);
	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;
}
header.index{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: transparent;
  padding: 30px 30px;
}
header.pag {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding: 15px 30px;
}
header.index.sticky-header{
  padding: 15px 30px;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
header.index:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
  z-index: -1;
}
header.index.sticky-header:before {opacity: 1;}
.navbar-expand-xxl .navbar-collapse{justify-content: center;}
header .navbar {padding: 0;}
header .navbar-brand{padding: 0px;margin: 0px;}
header .navbar-brand img{width: 210px;}
header.index .navbar-brand img.logo2{display: none;}
header.index.sticky-header .navbar-brand img.logo2{
  display: block;
  width: 150px;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
header.index.sticky-header .navbar-brand img.logo1{
  display: none;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
header .nav-item{margin: 0 25px;}
header .nav-link{
  padding: 0px !important;
  font-size: 16px;
  font-weight: 400;
font-family: "Noto Sans", sans-serif;
}

header.index .nav-link{color: #ffffff;}
header.index .nav-link:hover,header.index .nav-link:focus{color: #6fd5d8;text-decoration: underline;}
header.index.sticky-header .nav-link{
  color: var(--secondary);
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
header.index.sticky-header .nav-link:hover{color: #168c8f;}
header.pag .nav-link.active{color: #168c8f;}
.navbar-expand-xxl .navbar-collapse{justify-content: center}
.navbar-social ul{display: flex;gap: 25px;}
.navbar-social li a{
  font-size: 20px;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
header.index .navbar-social li a{color: #fff;}
header.index.navbar-social li a:hover{color: #fff;}
header.index.sticky-header .navbar-social li a{
  color: var(--secondary);
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
/*index*/
.hero {
  position: relative;
  min-height: 95vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.30) 50%,
      rgba(0, 0, 0, 0.15) 100%
    );
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 160px 0 130px;
  text-align: center;
}
.hero__eyebrow {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.hero__title {
  margin: 0;
  font-size: clamp(32px, 11vw, 50px);
  line-height: 0.95;
  font-weight: 400;
  color: #fff;
}
.hero__features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 20px;
  margin: 42px 0 32px;
	align-items: center
}
.hero__feature {text-align: center;display: flex;align-items: center;gap: 8px;font-size: 1.1rem;letter-spacing: 1px;}

.separator {width: 1px;height: 22px;background: rgba(255,255,255,0.8);}
.hero__location {
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.btn-outline-light {padding: 12px 28px;border-width: 1px;letter-spacing: 2px;font-size: 12px;text-transform: uppercase;transition: all 0.3s ease;color:#ffffff;}
.btn-outline-light:hover {background-color: white;color: black;border-width:1px}
 .modal-content {
      border-radius: 0;
    }

    .modal-header {
      border-bottom: none;
    }

    .modal-title {
      font-family: "baskerville-poster-pt", serif; 
    }

/* Hero scroll behouden */
.hero-scroll {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  padding-bottom: 41px;
  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{padding: 110px 0;}
.intro-content{padding-left: 125px;}
.intro-content h2{margin-bottom: 60px;}
.intro-content .btn {margin-top: 40px;margin-left: 80px;}
.woning > .row{margin-bottom: 100px;}
.woning > .row:last-child{margin-bottom: 0px;}
.woning > .row:nth-child(2n){flex-direction: row-reverse;}
.woning > .row:nth-child(2n) .intro-content{padding-right: 100px;}
.woning > .row:nth-child(2n) .intro-content .btn{margin-left: 40px;}
.galerij {padding-top: 0px;padding-bottom: 110px;margin:0 30px}
.galerij .gallery-item{ position:relative;width:100%;aspect-ratio: 4 / 3;overflow:hidden;background:#fff;}
.galerij .gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease;}
.galerij .gallery-item:hover img{transform:scale(1.1);}
.ligging{padding-bottom: 110px; padding-top: 15px;text-align: center}
iframe.map {height: 600px;width: 100%;display: block;}
.ligging p{font-size: 20px;line-height: 30px;color: var(--secondary);margin-bottom: 0px;text-align: center;padding-top:25px}
.ligging .logo2{max-width:200px}
.cta {height: calc(100vh - 341px);position: relative;}
.cta-img{height: 100%;}
.cta-img img{width: 100%;height: 100%;object-fit: cover;}
.cta-content{
  position: absolute;
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 905px;
  background-color: #ffffff;
  text-align: center;
  padding: 65px 40px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.4);
}
.cta-content h3{font-size: 48px;line-height: 55px;font-weight: 500;margin-bottom: 50px;}
.cta-btn{display: flex;gap: 30px;justify-content: center;}
/*anderepagina's*/
.fancybox__container{background:transparent!important}
.fancybox--light {background: #fff;color: #6a6969;}
.fancybox--light .f-spinner{color: rgba(0, 0, 0, 0.1);}
.fancybox--light .fancybox__backdrop{background-color:rgba(255, 255, 255, 0.9)!important}
.fancybox--light .fancybox__toolbar .f-button,
.fancybox--light .fancybox__nav .f-button {width: 50px;height: 50px;border-radius: 0;color: #000;background: #fff;text-shadow: none;}
.fancybox--light .fancybox__toolbar .f-button:hover,.fancybox--light .fancybox__nav .f-button:hover{color: #000;background:#eee;}
.fancybox--light .fancybox__toolbar .f-button:active,
 .fancybox--light .fancybox__nav .f-button:active{background:#eee;}
 .fancybox--light .fancybox__toolbar .f-button svg,.fancybox--light .fancybox__nav .f-button svg{width: 20px;height: 20px;filter: none;}
.fancybox--light .fancybox__toolbar .f-button svg:disabled,.fancybox--light .fancybox__nav .f-button svg:disabled{opacity: 0.2;}
.fancybox--light .fancybox__nav .f-button svg {stroke-width: 2.25;}
.fancybox__toolbar {color:#000000!important}
.fancybox__container,
.fancybox__container *,
.fancybox__backdrop,
.fancybox__carousel,
.fancybox__slide,
.fancybox__content,
.fancybox__image,
.f-panzoom,
.f-panzoom__content {
  transition: none !important;
}
.fancybox__image,
.f-panzoom__content {
  transform-origin: center center !important;
}
.cta2 {height: 350px;position:relative}
.abWrapper .abMenuList li{list-style: none}
.va-section-row {
  align-items: stretch;
}

.va-section-row > .va-col {
  display: flex;
  flex-direction: column;
 justify-content: start;
  padding-top: 50px;
}

.va-carousel {
  width: 100%;
}

.va-carousel .carousel-inner {
  overflow: hidden;
  background: #f5f1eb;
}

.va-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.va-carousel .carousel-indicators.va-carousel-thumbs {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  justify-content: initial;
  margin: 14px 0 0 0;
  padding: 0;
}

.va-carousel .carousel-indicators.va-carousel-thumbs [data-bs-target] {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;

  border: 2px solid transparent;
  background: transparent;
  text-indent: 0;
  overflow: hidden;
  opacity: .55;
  cursor: pointer;

  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}

.va-carousel .carousel-indicators.va-carousel-thumbs [data-bs-target] img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.va-carousel .carousel-indicators.va-carousel-thumbs .active,
.va-carousel .carousel-indicators.va-carousel-thumbs [data-bs-target]:hover {
  opacity: 1;
  border-color: currentColor;
}

.va-carousel .carousel-indicators.va-carousel-thumbs [data-bs-target]:hover {
  transform: translateY(-2px);
}
@media (max-width: 991.98px) {
  .va-section-row {
    row-gap: 30px;
  }

  .va-section-row > .va-col {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .va-carousel-thumbs {
    gap: 7px;
  }
}


.va-mail-cta {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
}

.va-mail-cta a {
  text-decoration: none;
}


/**----Footer Css----**/
footer{background: #222c2b;padding-top: 140px;}
.footer-top{width: 100%;display: flex;justify-content: space-between;align-items: center;}
.footer-logo img{ width: 190px;}
.footer-info ul{display: flex;gap: 100px;margin-bottom: 0px}
.footer-info li{font-size: 16px;line-height: 24px;color: #ffffff;font-weight: 400;}
.footer-info li a{color: #ffffff;text-decoration: none}
.footer-info li a:hover{color: #6fd5d8;text-decoration: underline;}
.footer-social ul {display: flex;gap: 25px;padding-left:0}
.footer-social li a {color: #fff;font-size: 20px;}
.footer-social li a:hover {color: #6fd5d8;}
footer hr{border-color: #919695;opacity: 1;margin: 50px 25px 20px 25px;}
.footer-links{padding-bottom: 40px;}
.footer-links ul{display: flex;gap: 20px;padding-left:0}
.footer-links li a{font-size: 14px;line-height: 24px;color: #ffffff;font-weight: 400;text-decoration: none;}
.footer-links li a:hover{color: #6fd5d8;text-decoration: underline;}
/*------- Scroll to Top -------*/
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  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: 13px;
  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: 1440px) {
header .nav-item {margin: 0 15px;}
header{padding: 30px 20px;}
}
@media (max-width: 1399px) {
	header .navbar-toggler {
	    color: #fff;
	    opacity: 1;
	    border: 0;
	    border-radius: 0;
	    padding: 0;
	    font-size: 30px;
	    position: absolute;
	    right: 100px;
	}
	header.sticky-header .navbar-toggler, header.pag .navbar-toggler{color: var(--secondary);}
	header .navbar-toggler:focus{box-shadow: none;}
	header .navbar-toggler:focus-visible {outline: none;}
	header .navbar-collapse {
	    width: 100%;
	    position: absolute;
	    top: 60px;
	    background: #fff;
	    z-index: 9;
	    padding: 20px;
	    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1);
	}
	header.sticky-header .navbar-collapse{top: 55px;}
	header.index .nav-link{color: var(--secondary);}
	header .nav-link{color: var(--secondary);}
	header .nav-item { margin: 0 0 15px 0;}
	header .nav-item:last-child{margin-bottom: 0px;}
}
@media (max-width: 1199px) {
	.intro-content {padding-left: 30px;}
	.intro-card > .row:nth-child(2n) .intro-content {padding-right: 60px;}
	.footer-info ul {gap: 40px}
	footer hr{margin: 50px 12px 20px 12px;}
	.cta-content{padding: 50px 40px;}
	
}

@media (max-width: 1024px) {
.footer-top {justify-content: center;flex-wrap: wrap;gap: 30px;}
.footer-info {width: 100%;}
.footer-info ul {justify-content: center;}
.cta {height: calc(100vh - 490px);}
.footer-links ul {justify-content: center;}	

}

@media(max-width: 991px) {
header.sticky-header { padding: 15px 20px;}
.intro-content {padding-left: 0;margin-top: 40px;}
.intro-content .btn {margin-top: 20px;margin-left: 0;}
.intro-content h2 {margin-bottom: 40px;}
.woning > .row:nth-child(2n) .intro-content {padding-right: 0;}
.woning > .row:nth-child(2n) .intro-content .btn {margin-left: 0;}
.ligging {padding-top: 0;margin-bottom: 30px;}
	.cta{height:500px}
.cta-content{min-width: 90%;}
.cta-content h3 {
	    font-size: 35px;
	    line-height: 45px;
	    margin-bottom: 30px;
	}
	
	
}
@media(max-width: 768px) {
header .navbar-brand img {width: 130px;}
header.sticky-header .navbar-brand img.logo2 {width: 110px;}
header .navbar-toggler{right: 80px;}
.navbar-social ul { gap: 20px;}
header {padding: 15px 12px;}
header.sticky-header {padding: 15px 12px;}
.navbar-social li a {font-size: 18px;}
header .navbar-collapse {top: 60px;}
header.sticky-header .navbar-collapse {top:55px;}
.intro { padding: 90px 0;}
.intro-content {margin-top: 30px;}
.intro-content h2 {margin-bottom: 25px;font-size: 35px;line-height: 45px;}
.btn {min-width: 240px;font-size: 15px;padding: 15px 10px;}
.woning > .row {margin-bottom: 80px;}
.ligging p {font-size: 18px;line-height: 25px;}
.ligging{margin-bottom: 20px;}
.ligging {padding-bottom: 90px;}
.cta {height: 530px;}
.cta-content {padding: 30px 15px;}
.cta-content h3 { font-size: 28px;line-height: 38px;margin-bottom: 20px;}
.cta-btn {gap: 15px;}
footer {padding-top: 130px;}
.footer-logo {font-size: 30px;line-height: 30px;}
footer hr {margin: 30px 12px 20px 12px;}
.footer-links ul {flex-wrap: wrap;gap: 15px;}
.footer-links {padding-bottom: 30px;}
.cta-content {min-width: auto;width: 90%;}
.cta-btn { gap: 20px;flex-wrap: wrap;}
.footer-info ul {flex-wrap: wrap;gap: 10px 35px;}
.bannerlogo ,.bannerlogo_font{max-width: 200px;}
#return-to-top {
	    bottom: 10px;
	    right: 10px;
	    width: 45px;
	    height: 45px;
	}
	#return-to-top i {
	    left: 15px;
	    top: 9px;
	    font-size: 17px;
	}
.hero {
    min-height: 100vh;
  }

  .hero__content {
    padding: 130px 0 120px;
  }

  .hero__eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .hero__features {
    gap: 18px 24px;
    margin: 34px 0 28px;
  }

  .hero__feature {
    min-width: 72px;
  }

  .hero__feature strong {
    font-size: 28px;
  }

  .hero__feature span {
    font-size: 11px;
  }

  .hero__location {
    font-size: 12px;
    letter-spacing: 0.13em;
  }

  .hero__btn {
    max-width: 90%;
    padding: 13px 22px;
  }
}
@media(max-width: 575px) {

}
@media(max-width: 320px) {
header .navbar-toggler {right: 67px;}
.navbar-social ul {gap: 15px;}
}
/*------- Image Animation Style Start -------*/
.scroll-animation {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.scroll-animation.show {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}