html {
  scrollbar-gutter: stable;
}
#smooth-content {
	float: left;
	display: flex; justify-content: center; flex-wrap: wrap; max-width: 100%;
}
#smooth-content #mainsection{
	max-width: 1920px;
}
.logo{
	max-width: 40vw; padding: 35px 15px 15px 15px
}
.navbar-toggle{
	top: 40px;
}
.footer-logo{
	padding: 15px 0px; justify-content: flex-start;
}
.footer-logo img, .footer-logo svg{
	height: 60px;
}
.page-block.dark{
	background: #ffffff;
}
#pageBlock1.dark{
	z-index: 1
}

.pagetop.actionblock{
	position: fixed; top: 0px; left: 0px; width: 100%; padding: 5px 30px 5px 30px; background: var(--basecolorMedium); text-align: center; z-index: 10000001
}
.pagetop.actionblock .row{
	justify-content: center
}
.pagetop.actionblock p{
	margin: 0px; padding: 0px; font-size: 0.8em;
}
.pagetop.actionblock p a{
	color: var(--textcolorSecondair);
}

.footer-credits{
	font-size: 1em;
}
.footer .het-logo{
	width: 200px; margin: 10px; position: relative;
}
.footer #svg2{
	width: 100%; max-width: 150px; margin: 15px 0px; position: relative; height: auto;
}

.page-block.gallery.slider .grapCarousel a.link-image,
.page-block.gallery.slideshow .carousel .carousel-item a{
	pointer-events: none!important;
}
.carousel-indicators li{
	height: 10px;
}
.gm-style .gm-style-iw-d{
	overflow: hidden;
	padding-right: 45px;
	padding-bottom: 5px;
}


#locatie-en-omgeving---informatieblok-2.page-block.gallery.slider .slideLeft, #locatie-en-omgeving---informatieblok-2.page-block.gallery.slider .slideRight,
#locatie-en-omgeving---algemeen.page-block.gallery.slider .slideLeft,
#locatie-en-omgeving---algemeen.page-block.gallery.slider .slideRight{
	display: block; width: 40px; margin: 0px;
}
.page-block.gallery.slider.right .slideLeft{
	right: 40px;
}
.page-block-link{
    margin-top: 30px;
}

@media(max-width:768px){
	.container, .container-sm{
		max-width: none;
	}
}
@media(min-width:768px){
	.logo{
		max-width: 300px;
	}
	.menu-default #extraMenu, .menu-centered #extraMenu{
		top: 40px;
	}
	.menu-default .mainmenu #extraMenu .navbar-nav, .menu-centered .mainmenu #extraMenu .navbar-nav{
		padding-right: 15px;
	}
	#header.menu-centered #extraMenu .headAddress{
		left: 300px; top: -18px;
	}
	.pagetop.actionblock{
		left: auto; width: auto; right: 0px; padding: 10px 30px 10px 45px; background: none; text-align: right; height: 100px; background: none;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	#theBody.shrink .pagetop.actionblock{
		top: -30px;
	}
	.pagetop.actionblock .row{
		justify-content: flex-end
	}
	.pagetop.actionblock p{
		text-align: right; line-height: 20px; font-size: 14px;
    }
	.pagetop.actionblock p a{
		position: absolute; top: auto; bottom: 15px; left: auto; right: 15px; text-transform: uppercase;
		background: var(--specialcolor);
		color: var(--basecolor);
		padding: 0px 10px; height: 50px;
        font-size: 12px;
        line-height: 50px;
        margin: 0px 0px 0px 0px; 
        white-space: nowrap; border-radius: 25px; text-decoration: none; padding: 0px 20px; letter-spacing: 0.2em;
    }
	
	#extraMenu{
		display: none!important;
	}
}
@media(min-width:991px){
	#header.menu-default, #header.menu-centered{
		height: 165px;
	}
	#header.menu-centered .logo {
        padding: 15px 30px 15px 30px;
        height: 130px;
    }
	.pagetop.actionblock{
		padding: 10px 45px 10px 45px;
	}
	.pagetop.actionblock p a{
		right: 30px;
	}
	.menu-default #mainsection, .menu-centered #mainsection{
		margin-top: 165px;
	}
	.logo{
		max-width: 400px;
	}
	.menu-centered .mainmenu .navbar-nav{
		margin-top: 120px;
	}
	.menu-default #extraMenu, .menu-centered #extraMenu{
		top: -30px;
	}
	.menu-default .mainmenu #extraMenu .navbar-nav, .menu-centered .mainmenu #extraMenu .navbar-nav{
		padding-right: 30px;
	}
	#header.menu-centered #extraMenu .headAddress{
		left: 370px; top: 71px;
	}
	.footer{
		padding-top: 45px;
	}
	.footer-logo{
		padding: 5px 15px; justify-content: flex-start;
	}
	.footer-logo img, .footer-logo svg{
		height: 40px;
	}
	.page-block.cloud .page-block-caption .page-block-module .block-listing{
		gap: 60px;
	}
	.footer-socials.social-icons h2{
		text-align: right;
	}
	.footer-menu, .footer-socials.social-icons{
		justify-content: flex-end;
	}
}
@media(min-width:1280px){
	.footer-logo{
		padding-left: 0px;
	}
	.footer .container {
        grid-template-columns: repeat(4, 1fr);
    }
	.footer-menu.footer-menu-1{
		padding-left: 33.33%;
	}
	.footer-menu.footer-menu-2{
		padding-left: 33.33%;
	}
}
@media(min-width:1440px){
	.pagetop.actionblock{
		right: 30px;
	}
	#header.menu-default, #header.menu-centered{
		height: 170px; padding: 0px 30px;
	}
	.menu-default #mainsection, .menu-centered #mainsection{
		margin-top: 180px;
	}
	.logo{
		max-width: 530px;
	}
	#header.menu-centered #extraMenu .headAddress{
		left: 450px;
	}
	.menu-default .mainmenu #extraMenu .navbar-nav, .menu-centered .mainmenu #extraMenu .navbar-nav{
		padding-right: 60px;
	}
	
	.page-block, #pageBlock1{
	}
	
}
@media(min-width:1920px){
	#header.menu-default, #header.menu-centered{
		padding-left: calc(50% - 930px);
		padding-right: calc(50% - 930px);
	}
	#theBody.contact #pageBlock1.page-block .page-block-caption{
		padding-left: 0px;
		padding-right: 0px;
	}
	.pagetop.actionblock{
		right: calc(50% - 930px);
	}
}
@media(min-width:768px){
	.page-block.quote.left .page-block-caption{
		width: 50%; margin-left: 50%; padding-left: 0px;
	}
	.page-block.quote.right .page-block-caption{
		width: 50%; padding-right: 0px;
	}
	#theBody.contact #pageBlock1, #theBody.contact #terugbel.page-block{
		width: 100%;
	}
}
@media(min-width:991px){
	.page-block.quote {
        padding: 90px 60px;
    }
	.page-block.quote .page-block-caption .page-block-txt p {
		max-width: 820px; margin-bottom: 15px;
    }
	.page-block.quote.center .page-block-caption .page-block-txt {
		display: flex; justify-content: center;
    }
}


.page-block{
	margin-bottom: 60px;
}
#pageBlock0{
	margin-bottom: 30px;
}
.scrolldown{
	display: none;
}
.page-block.cloud{
	margin-bottom: 15px;
}

#homeANI{
	display: none; overflow: visible;
}
#quotie{
	overflow: visible;
}
#theBody.home #homeANI{
	display: flex; align-content: flex-end; align-items: flex-end;
	position: absolute; top: 0px; left: 0px; width: 50%;
	height: 100%;
	z-index: 101;
	padding: 30px; padding-bottom: 180px!important; justify-content: flex-end;
	pointer-events: none;
}
.page-block.gallery.slideshow .page-block-caption{
	display: flex!important; align-content: flex-start; align-items: flex-start;
	background: none!important;
	/*background: url("../img/frame/slideshowhover.png")!important; width: 60%;
	background-position: center right!important;	 background-size: cover!important;*/
    padding-top: calc(10% + 0px);
}
.page-block.slideshow .page-block-caption .page-block-ttl{
	display: none;
}
.page-block.gallery.slideshow .page-block-caption .page-block-txt p{
	font-size: 2em; text-transform: uppercase;
    font-variation-settings: "wght" 400; line-height: 1.3em; letter-spacing: 0.1em;
}
.page-block.slideshow .page-block-caption	 .page-block-link{
	display: none;
}
.page-block.cta-sticker{
	pointer-events: none;
}

.page-block.cta-sticker .page-block-caption{
	border-bottom-left-radius: 20px; padding: 15px 30px;
}


.page-block.cta-sticker .page-block-ttl h2{
	text-transform: uppercase; color: var(--textcolor)
}

.page-block-image{
	z-index: 1;
}
.page-block-caption{
	z-index: 2;
}
.default.page-block .page-block-page_image{
	z-index: 0;
}

.page-block.map, .page-block.map-pois{
	padding: 0px;
}
#project---informatie .page-block-caption{
	max-width: 1140px;
}


.page-block.gallery.slideshow::before, #pageBlock0::before,
.page-block.gallery.slideshow::after, #pageBlock0::after{
    position: absolute; top: 50px; width: 120px; height: 10px; background: var(--basecolor); content: ''; display: block; left: 0px;
    z-index: 12;
	max-width: 120px;
}

#theBody.fullyLoaded .page-block.gallery.slideshow::before,
#theBody.fullyLoaded #pageBlock0::before,
#theBody.fullyLoaded .page-block.gallery.slideshow::after,
#theBody.fullyLoaded #pageBlock0::after
{
	animation-name: fadeInWidth;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

.page-block.gallery.slideshow::after, #pageBlock0::after{
    top: auto; bottom: 10%; left: auto; right: 0px;
    bottom: 50px;
}

.page-block.gallery.slideshow::after{
    bottom: 140px;
}



#theBody.finance #pageBlock0 .page-block-page_image::after{
	position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; content: '';
	background: url("../img/frame/logo-hypotheekshop.svg")!important; 
	background-position: center center!important; background-size: 200px!important;
	background-repeat: no-repeat!important;
	opacity: 0;
}
#theBody.finance.fullyLoaded #pageBlock0 .page-block-page_image::after {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

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


@media(min-width:768px){
.page-block.gallery.slideshow .page-block-caption{
	width: 50%;
}
}
@media(min-width:991px){
.page-block.gallery.slideshow .page-block-caption .page-block-txt p{
	font-size: 3em;
}
}


@media (max-width: 767px) {
	
	.page-block.gallery.slideshow .carousel .carousel-inner{		
		height: 70vh;
	}
	.page-block.gallery.slideshow .carousel .carousel-item img{
		object-fit: cover;
	}
	.page-block.gallery.slideshow .page-block-caption{
		position: absolute; height: 70vh; width: 100%; padding: 100px 30px 30px 30px; z-index: 11;
	}
	.___page-block.gallery.slideshow .page-block-module::after{
		position: absolute; top: 0px; left: 0px; width: 100% ; height: 100%; background: rgba(76,102,65,0.95); content: ''; display: block; z-index: 10;
	}
	.page-block.gallery.slideshow .page-block-caption .page-block-txt p{
		color: var(--basecolor); font-size: 1.3em;
	}
	
    .page-block.cta-sticker {
        padding: 15px 15px;
    }
	#theBody.home #homeANI{
		width: 100%;
	}
	.page-block.default.with_block_image .page-block-caption-content .page-block-ttl{
		display: block;
	}
	
	.page-block.default.with_block_image .page-block-caption-head{
		display: none;
	}
	
	
	
}
@media(min-width:768px){

	.page-block{
		margin-bottom: 120px;
	}
	.page-block.cta-sticker{
		max-width: 25%;
		height: calc(960/1920 * (100vw - 30px));
		aspect-ratio: auto;
		border-radius: 0%;
		border: 0px solid #000000;
		align-content: flex-start;
		align-items: flex-start;
		position: absolute;
		top: 0px;
		right: 15px;
		background: none;
	}
	.page-block.cta-sticker .page-block-caption{
		background: var(--basecolorLight);
	}
	.page-block.gallery.slideshow .carousel .carousel-item{
		background: #ffffff; 
		height: calc(960/1920 * (100vw - 30px));
	}
	.page-block.gallery.slideshow .carousel .carousel-item img{
		object-fit: cover;
	}
	#theBody.home #homeANI{
        width: 40%; position: absolute; display: flex; left: 60%; top: 0px; height: 100%; justify-content: flex-start; align-items: center; align-content: center; padding-bottom: 90px!important;
        
	}
	#theBody.home #homeANI svg{
        width: 160px; height: auto;
        
	}
}
@media(min-width:991px){
	#pageBlock0{
		margin-bottom: 60px;
	}
	.page-block.cta-sticker{
		right: 30px;
		height: calc(960/1920 * (100vw - 60px));
	}
	.page-block.gallery.slideshow .carousel .carousel-item{
		height: calc(960/1920 * (100vw - 60px));
	}
	#theBody.home #homeANI svg{
        width: 200px; height: auto;
        
	}
	.page-block.gallery.slideshow::before, #pageBlock0::before,
	.page-block.gallery.slideshow::after, #pageBlock0::after{
		width: 0%;
	}
	
	#theBody.fullyLoaded .page-block.gallery.slideshow::before,
	#theBody.fullyLoaded #pageBlock0::before,
	#theBody.fullyLoaded .page-block.gallery.slideshow::after,
	#theBody.fullyLoaded #pageBlock0::after
	{
		width: 200px;
		animation-name: fadeInWidth;
		animation-iteration-count: 1;
		animation-timing-function: ease-in;
		animation-duration: 2s;
		left: 30px;
	}
	#theBody.fullyLoaded .page-block.gallery.slideshow::after,
	#theBody.fullyLoaded #pageBlock0::after
	{
		left: auto; right: 30px;
	}

	#map2, #map3{
		height: 650px;
	}
}

@media(min-width:1280px){
.page-block.gallery.slideshow::before, #pageBlock0::before,
.page-block.gallery.slideshow::after, #pageBlock0::after{
	max-width: 200px;
}
}

@keyframes fadeInWidth {
	0% {
	width: 0%;
	}
	100% {
	width: 200px;
	}
}

@media(min-width:1440px){
	.page-block.cta-sticker{
		right: 60px;
		height: calc(960/1920 * (100vw - 120px));
	}
	.page-block.gallery.slideshow .carousel .carousel-item{
		height: calc(960/1920 * (100vw - 120px));
	}
	#theBody.fullyLoaded .page-block.gallery.slideshow::before,
	#theBody.fullyLoaded #pageBlock0::before,
	#theBody.fullyLoaded .page-block.gallery.slideshow::after,
	#theBody.fullyLoaded #pageBlock0::after
	{
		left: 60px; margin-top: 60px;
	}
	#theBody.fullyLoaded .page-block.gallery.slideshow::after,
	#theBody.fullyLoaded #pageBlock0::after
	{
		left: auto; right: 60px; margin-top: 0px; margin-bottom: 60px;
	}
}

@media(min-width:1920px){
	/*.page-block.gallery.slideshow{
		padding: 0px;
	}*/
	.page-block.gallery.slideshow .carousel .carousel-item{
		height: 900px;
	}
	.page-block.cta-sticker{
		height: 900px;
	}
}

#theBody.home #pageBlock1.page-block .page-block-image::after,
#locatie-en-omgeving---informatieblok-1.page-block .page-block-page_image::after,
#theBody.home #pageBlock1.page-block .page-block-image::after,
#theBody.home #pageBlock1.page-block .page-block-image::after{
	position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; content: '';
	background: url("../img/frame/print.png")!important; 
	background-position: center right!important; background-size: contain!important;
	background-repeat: no-repeat!important;
}

#locatie-en-omgeving---informatieblok-1.page-block .page-block-page_image::after{
	background-position: center left!important;
}



.page-block.with_page_image .page-block-image, .page-block.with_block_image.light .page-block-image, .page-block.with_block_image.medium .page-block-image{
	padding-bottom: 0px;
	padding-top: 0px;
}
@media(min-width:768px){
	.page-block.with_block_image.left .page-block-image{
		padding-left: 0px; align-content: flex-start;
	}
	.page-block.with_block_image.right .page-block-image{
		padding-right: 0px; align-content: flex-start;
	}
	.page-block.with_block_image.left .page-block-image img{
		min-height: 70%; width: 100%; object-fit: cover;
	}
	#theBody.aanmelden .page-block.with_block_image.left .page-block-image img{
		/*min-height: 0;*/
	}
}
@media(min-width:1280px){
	
	
	
	.page-block.with_block_image.left .page-block-image{
	}
	#pageBlock1.page-block .page-block-image::after{
	}
}

@media(min-width:1920px){
	#pageBlock1.page-block.center{
		padding-left: calc(50% - 960px);
        padding-right: calc(50% - 960px);
	}
	.page-block.with_block_image.left .page-block-image{
	}
	#pageBlock1.page-block .page-block-image::after{
	}
	#theBody.aanmelden .page-block.with_block_image.left .page-block-caption{
		padding: 60px; 
	}
}

.mailons2{
	display: none;
}
.page-block-txt p a.btn-primary{
	margin-bottom: 10px;
}
#financieel-advies .page-block-txt p{
	max-width: 410px; float: right; width: 100%;
}
#pageBlock1 .page-block-txt p a.btn-primary{
	margin-right: 15px;
}
#financieel-advies .page-block-txt p a.btn-primary{
	margin-left: 15px;
}

#theBody.contact .page-block-txt p a.btn-primary{
	width: 280px; margin-bottom: 0px;
}
#theBody.contact .page-block-txt p svg{
	margin: 30px 0px 15px;
}
@media(min-width:768px){
	.mailons1{
		display: none;
	}
	.mailons2{
		display: block;
	}
	#theBody.contact .page-block-txt p a.btn-primary{
		width: 380px; font-size: 12px!important;
	}
}

#de-makelaar.page-block.default .page-block-ttl h2::after{
	display: none;
}

@media(min-width:1280px){
	#de-makelaar{
		justify-content: center;
	}
	#de-makelaar .page-block-caption{
		max-width: 1100px;
	}
}

.footer,
.page-block.light{
}
.page-block.medium.cta{
}

.footerAddress h2, .footer-menu h2, .footer-socials h2{
	margin: 0px 0px 15px 0px;
}
#tagMenuToggle,
#tagMenu,
#smartListingNews,
.backnav,
.news-credits.no-writer .news-date{
	display: none;
}

#theBody.nieuws.detail_mode #pageBlock2.page-block{
	max-width: 1280px;
}
#theBody.nieuws.detail_mode #pageBlock0 .page-block-page_image{
	margin-bottom: 90px;
}


.fancyslide_carousel { --hoverGrow: 52%; --hoverShrink: 48%; --split: 50; }

  .fancyslide_carousel{
    position: relative;
    width: 100%;
    height: clamp(420px, 62vh, 960px);
    margin: 0 auto; margin-bottom: 90px;
    /*overflow: hidden;*/ background: var(--textcolor)
  }

  .fancyslide_stage{ display:flex; width:100%; height:100%; }

  .fancyslide_pane{
    position:relative; flex:0 0 50%; overflow:hidden;
    transition:all .55s ease;  isolation:isolate;
  }
  .fancyslide_pane::after{
    /*content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(transparent, rgba(0,0,0,.15));
    mix-blend-mode:multiply; opacity:.5;*/
  }
  .fancyslide_pane img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    will-change:transform,opacity; transition:transform .25s ease;
  }
	#fancyslide_leftPane img{
		object-position: center right;
	}
	#fancyslide_rightPane img{
		object-position: center center;
	}
  /* Hover width behavior */
  .fancyslide_carousel.fancyslide_hover-left  .fancyslide_left  { flex-basis:var(--hoverGrow);  }
  .fancyslide_carousel.fancyslide_hover-left  .fancyslide_right { flex-basis:var(--hoverShrink); opacity: 1; }
  .fancyslide_carousel.fancyslide_hover-right .fancyslide_right { flex-basis:var(--hoverGrow);  }
  .fancyslide_carousel.fancyslide_hover-right .fancyslide_left  { flex-basis:var(--hoverShrink); opacity: 1;}

  /* Symmetric zoom on hovered side */
  .fancyslide_carousel.fancyslide_hover-left  .fancyslide_left  img { transform:scale(1.02); }
  .fancyslide_carousel.fancyslide_hover-left  .fancyslide_right img { transform:scale(1.00); }
  .fancyslide_carousel.fancyslide_hover-right .fancyslide_right img { transform:scale(1.02); }
  .fancyslide_carousel.fancyslide_hover-right .fancyslide_left  img { transform:scale(1.00); }

  /* Center square that tracks the split (50% -> 60% / 40%) */
  .fancyslide_split-indicator{
    position:absolute; top:50%; left:calc(var(--split) * 1%);
    transform:translate(-50%,-50%);
    width:160px; height:160px; 
    z-index:6; pointer-events:none; transition:left .75s ease-in-out, transform .25s ease;
  }	
	#theBody.fullyLoaded #fancyslide_leftPane::after,
	#theBody.fullyLoaded #fancyslide_rightPane::after{
		position: absolute;
		top: 50%;
		max-width: 60px;
		width: 200px;
		height: 10px;
		background: var(--basecolor);
		content: '';
		display: block;
		left: 0%;
		z-index: 120; margin-top: 80px;
		animation-name: fadeInWidth;
		animation-iteration-count: 1;
		animation-timing-function: ease-in;
		animation-duration: 2s;
		transition:max-width .75s ease-in-out, transform .25s ease;
	}
	#theBody.fullyLoaded #fancyslide_leftPane::after{
		left: auto;
		right: 0px;
	}

	@media(min-width:1280px){
		#theBody.fullyLoaded #fancyslide_leftPane::after,
		#theBody.fullyLoaded #fancyslide_rightPane::after{
			max-width: 100px;
		}
	}

  #theBody.fullyLoaded .fancyslide_carousel.fancyslide_hover-right #fancyslide_leftPane::after{ 
		max-width: 0px;
   }
  #theBody.fullyLoaded .fancyslide_carousel.fancyslide_hover-left #fancyslide_leftPane::after{ 
		max-width: 120px;
   }
  #theBody.fullyLoaded .fancyslide_carousel.fancyslide_hover-left #fancyslide_rightPane::after{ 
		max-width: 0px;
   }
  #theBody.fullyLoaded .fancyslide_carousel.fancyslide_hover-right #fancyslide_rightPane::after{ 
		max-width: 120px;
   }

	@media(min-width:1280px){
		#theBody.fullyLoaded .fancyslide_carousel.fancyslide_hover-right #fancyslide_rightPane::after{ 
			max-width: 200px;
		}
		#theBody.fullyLoaded .fancyslide_carousel.fancyslide_hover-left #fancyslide_leftPane::after{ 
			max-width: 200px;
		}
	}
  .fancyslide_split-indicator svg{
	  object-fit: contain; width: 100%; height: 100%;
  }	

  /* Nav */
  .fancyslide_nav{
    position:absolute; top:50%; translate:0 -50%;
    width:44px; height:44px; border:0; border-radius:999px;
    background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center;
    cursor:pointer; backdrop-filter:blur(6px); transition:transform .15s ease, background .2s ease; z-index:7;
	  
	  display: none;
  }
  .fancyslide_nav:hover{ background:rgba(0,0,0,.6); transform:translateY(-50%) scale(1.04); }
  .fancyslide_nav:active{ transform:translateY(-50%) scale(.98); }
  .fancyslide_prev{ left:12px; } .fancyslide_next{ right:12px; }
  .fancyslide_nav svg{ width:20px; height:20px; }

  /* Dots */
  .fancyslide_dots{
    position:absolute; left:0px; bottom:-30px; width: 100%;
    gap:0px; z-index:7; padding:0px 0px; border-radius:0px;
    background:rgba(0,0,0,0); gap: 5px;
	  /*display: grid;
	  grid-template-columns:repeat(4, 1fr)*/
	  display: flex;
  }
  .fancyslide_dot{
    width:25%;  height:10px; border-radius:0px; background:#DAC1C4;
    border:0; padding:0; cursor:pointer; transition:all .4s ease; opacity:.5; outline: none!important;
	  
  }
  .fancyslide_dot.fancyslide_active{ width:50%; background:#DAC1C4; opacity:1; 
	  }

  @media (hover:none){ .fancyslide_pane{ transition:none; } }



#theBody.home #pageBlock1{

}

@media(max-width:767px){   
#theBody.home #pageBlock1 .page-block-image{
    display: none;
}     
}
@media(min-width:991px){   
#theBody.home #pageBlock1 .page-block-caption{
    padding-bottom: 0px;
}     
#theBody.home #pageBlock1 .page-block-image{
    margin-bottom: 45px;
}     
}

.page-block.gallery.autoslider{
    max-width: none; padding-top: 25px;
}
#autoSLider{
    display: flex; flex-direction: row; gap: 30px;
}
#autoSLider img{
    height: clamp(280px, 40vh, 500px);; width: auto; max-height: 700px;
}
.page-block.gallery.autoslider .page-block-caption{
	z-index: 1; order: 3;
    column-gap: 15px;  padding-top: 0px; margin: 0px;
}
.page-block.gallery.autoslider .page-block-caption .page-block-ttl,
.page-block.gallery.autoslider .page-block-caption .page-block-txt{
    display: none;
}
.page-block.autoslider .page-block-caption .page-block-ttl{
}
.page-block.gallery.autoslider .page-block-module {
    display: flex;
    justify-content: flex-start; 
    padding: 0px;
}

@media(min-width:500px) {
	.page-block.gallery.autoslider .page-block-caption{
	}
	.page-block.autoslider .page-block-caption .page-block-ttl{
	}
}
@media(min-width:900px) {
	.page-block.gallery.autoslider .page-block-caption{
		column-gap: 30px;
	}
	.page-block.autoslider .page-block-caption .page-block-ttl{
	}
}
@media(min-width:1600px) {
    .page-block.gallery.autoslider .page-block-caption{
    }
}
.page-block.gallery.autoslider .image-container{
	position: relative; padding-top: 30px;
}
.page-block.gallery.autoslider .image-container .image-ttl{
	position: absolute; top: 0px; left: 0px;
	padding: 15px 0px 15px 0px; width: 100%;
}
.page-block.gallery.autoslider .image-container .image-ttl h2{
	padding: 0px; margin: 0px; font-size: 10px; text-transform: uppercase;
    font-variation-settings: "wght" 300; letter-spacing: 0.1em; text-align: center;
}

@media(min-width:960px) {
	
#autoSLider img{
    height: clamp(280px, 40vh, 500px);; width: auto; max-height: 700px;
}
.page-block.gallery.autoslider .image-container{
	position: relative; padding-bottom: 45px; padding-top: 0px;
}
.page-block.gallery.autoslider .image-container .image-ttl{
	position: absolute; bottom:0px; left: 0px; top: auto;
	padding: 30px 0px 30px 0px;
}
    
.page-block.gallery.autoslider .image-container .image-ttl h2{
    font-size: 12px;
    }
}


#theBody.aanmelden #pageBlock1{
    margin-bottom: 0px; padding-bottom: 0px;
}
#theBody.aanmelden #pageBlock1 .page-block-image{
    order: -1;
}

#theBody.aanmelden #nieuwsbrief-aanmelden{
    padding: 45px 15px 45px 30px!important;
}
#theBody.aanmelden #nieuwsbrief-aanmelden .page-block-caption{
    display: none;
}
#theBody.aanmelden #nieuwsbrief-aanmelden .alert-success{
    background: none; border: 0px solid; padding: 0px; margin: 0px;
}
#theBody.aanmelden #nieuwsbrief-aanmelden .alert-success .page-block-caption{
    display: block; padding-top: 0px; padding-bottom: 0px; margin: 0px;
}
.fancy-form-item{
    border: 0px;
}
@media(min-width:600px) {
#theBody.aanmelden #nieuwsbrief-aanmelden{
    padding: 45px 15px 45px 45px!important;
}
}
@media(min-width:768px) {
#theBody.aanmelden #nieuwsbrief-aanmelden{
    margin-left: 50%; width: 50%;
}
}
@media(min-width:1080px) {
    #cta---naar-het-project .page-block-caption{
        padding-left: 15%; padding-right: 15%;
    }
}



















:root {
  --bg: #ffffff;
  --card-bg: #ffffff;
  --accent: #93A28D;
  --accent-soft: rgba(64, 84, 49, 0.08);
  --text: #000000;
  --muted: #93A28D;
  --available: #405431;
  --option: #E28350;   /* nieuw: onder optie */
  --taken: #c62828;
  --border-soft: #d8cfc7;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
}
* {
  box-sizing: border-box;
}

#theBody.woningzoeker .page-block-name h1{margin: 0px; padding: 0px;}


#woningsearch{
	display: none;
}
#header{
	position: absolute;
}

    .app {
      /*min-height: 	100vh;*/
      display: flex;
      flex-direction: column;
		width: 100%;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 5vw;
      border-bottom: 1px solid var(--border-soft);
      background: #ffffffee;
      backdrop-filter: blur(8px);
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .brand {
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-content: center;
      align-items: center;
      gap: 15px;
    }
    .brand object{
      width: 100%;
      height: auto;
      max-height: 45px;
      border-radius: 0;
      position: relative;
      z-index: 1;
    }

    .titel {
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-content: center;
      align-items: center;
      gap: 15px;
    }

    .breadcrumbs {
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .breadcrumbs .crumb.current {
      color: var(--accent);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0px;
      gap: 0.75rem;
    }

    .svg-stage {
      width: 100%;
      max-width: 1440px;
      max-width: none;
      margin: 0 auto;
      background: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-radius: 0;
      overflow: hidden;
    }

    object#mainSvg {
      width: 100%;
      height: auto;
      max-height: min(72vh, 780px);
	  max-height: none;
      border-radius: 0;
      background: none;
      position: relative;
      z-index: 1;
    }

    /* Filter bar */

    .filter-bar {
      width: 100%;
      max-width: 1440px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.75rem;
    }

    .filter-bar-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .view-select-wrapper {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    .view-select {
      border-radius: 0;
      border: 1px solid var(--border-soft);
      background: #ffffff;
      padding: 0.35rem 0.75rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 1.5rem;
    }

    .filter-bar-right {
      display: flex;
      gap: 0.5rem;
    }

    .filter-btn {
      border-radius: 0;
      border: 1px solid var(--border-soft);
      background: #ffffff;
      padding: 0.35rem 0.75rem;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-size: 0.7rem;
      transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
        transform 0.1s ease;
    }

    .filter-btn:hover {
      border-color: var(--accent);
      color: #000000;
      transform: translateY(-1px);
    }

    .filter-btn.is-active {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    /* -------- Popup overlay -------- */

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      z-index: 58000000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .overlay.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .unit-popup {
      max-width: 800px;
      width: 100%;
      max-height: 90vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 15px;
      background: var(--card-bg);
      border-radius: 0;
      padding: 1.5rem 1.75rem;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: scroll;
      border: 1px solid var(--border-soft);
    }

    @media (max-width: 900px) {
      .unit-popup {
        grid-template-columns: minmax(0, 1fr);
        max-height: 100vh;
      }
    }

    .unit-popup-left,
    .unit-popup-right {
      position: relative;
      z-index: 1;
    }
    .unit-popup-left{
      padding-left: 15px;
	  align-items: center;
	align-content: center;
	display: flex;
	flex-wrap: wrap;
	}
    .unit-popup-right {
      padding: 0px;
    }
    .unit-title {
      margin: 0.75rem 0 0.4rem;
      font-size: 1.8rem;
      font-weight: normal;
		    
		color: var(--accent);
		width: 100%;
			
    }

    .unit-subtitle {
      margin: 0;
      font-size: 0.9rem;
      color: var(--muted);
		display: none;
		width: 100%;
    }

    .unit-grid {
      margin-top: 1.25rem;
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0.9rem 1.25rem;
      font-size: 0.86rem;
		width: 100%;
    }

    .unit-grid-label {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.7rem;
      color: var(--muted);
      margin-bottom: 0.2rem;
    }

    .unit-grid-value {
      font-weight: 500;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.25rem 0.7rem;
      border-radius: 0;
      border: 1px solid transparent;
      background: #f7f7f7;
      margin-bottom: 0.5rem;
    }

    .status-pill span.dot {
      width: 6px;
      height: 6px;
      border-radius: 0;
    }

    .status-available {
      color: var(--available);
      border-color: rgba(27, 155, 75, 0.4);
      background: rgba(27, 155, 75, 0.06);
    }

    .status-available span.dot {
      background: var(--available);
    }

    .status-taken {
      color: var(--taken);
      border-color: rgba(198, 40, 40, 0.4);
      background: rgba(198, 40, 40, 0.06);
    }

    .status-taken span.dot {
      background: var(--taken);
    }

    .status-option {
      color: var(--option);
      border-color: rgba(255, 152, 0, 0.4);
      background: rgba(255, 152, 0, 0.06);
    }

    .status-option span.dot {
      background: var(--option);
    }

    /* Preview small in right column */

    .unit-preview {
      border-radius: 0px;
      border: 1px solid var(--border-soft);
      padding: 0.35rem;
      background: #fafafa;
      margin-bottom: 0.75rem;
        padding: 15px;
    }

    .unit-preview img {
      width: 100%;
      height: auto;
      object-fit: contain; object-position: center center;
      display: block;
      border-radius: 0;
    }

#popupPreviewImage{
}


    .unit-previewtext {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--textcolor);
      max-height: 5.5rem;
      overflow: hidden;
    }

    .unit-previewtext p{
		margin: 0px; padding: 0px;
    }

    .unit-previewtext h3 {
      margin: 0.25rem 0;
      font-size: 0.86rem;
      font-weight: 500;
      color: #000;
    }

    .unit-previewtext .projectName {
      display: none; /* fallback als de span tóch zou meekomen */
    }

    /* Floorplan inside left column */

    .floorplan-header {
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
        display: none;
    }

    .floorplan-badge {
      font-size: 0.72rem;
      padding: 0.15rem 0 0.15rem 0.6rem;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      background: none;
      color: var(--muted);
    }

    .floorplan-wrapper {
      border-radius: 0;
      padding: 0px;
      position: relative;
      overflow: hidden;
      max-height: 55vh;
    }

    object#floorplanSvg {
      width: 100%;
      height: auto;
      max-height: 50vh;
      display: block;
      border-radius: 0;
    }

    /* CTA column */

    .cta-stack {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0rem; padding-top: 0px; width: 100%; max-width: 360px;
    }

    .cta-btn {
      border-radius: 888px;
      padding: 0.65rem 0.9rem;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: 1px solid var(--accent);
      background: #ffffff;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
        transform 0.1s ease;
      text-decoration: none!important;
      color: var(--accent);
    }

    .cta-btn span.label {
      flex: 1;
    }

    .cta-btn span.chevron {
      font-size: 0.9rem;
      color: var(--muted);
    }

    .cta-btn.primary {
      background: var(--specialcolor);
      border-color: var(--specialcolor);
      color: #ffffff;
    }

    .cta-btn.primary span.chevron {
      color: #fff;
    }

    .cta-btn.subtle {
      background: #fafafa;
    }

    .cta-btn:hover {
      /*transform: translateY(-1px);*/
      /*box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);*/
      color: var(--specialcolor);
      border: 1px solid var(--specialcolor);
    }
    .cta-btn.primary:hover{
      background: var(--textcolor);
      border-color: var(--textcolor);
      color: #ffffff;
    }

    .close-btn {
      position: absolute;
      top: 30px;
      right: 10px;
      z-index: 2;
      background: #ffffff;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      color: var(--specialcolor);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
	  border: 0px solid var(--border-soft);
	  outline: none!important;
      /*transition: background 0.15s ease, transform 0.15s ease,
        box-shadow 0.15s ease;*/
    }

    .close-btn:hover {
      /*background: #f2f2f2;
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);*/
    }

    .overlay-click-catcher {
      position: fixed;
      inset: 0;
      z-index: 0;
    }

    .unit-tooltip {
      position: absolute;
      z-index: 58000001; /* hoger dan overlay-bg, lager dan popup zelf */
      pointer-events: none;
      background: var(--textcolor);
      color: var(--bg);
      border-radius: 0px;
      border: 0px solid var(--border-soft);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
      padding: 0.75rem 0.9rem;
      font-size: 0.75rem;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }

    .unit-tooltip.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .unit-tooltip .tooltip-title {
      font-weight: 600;
      margin-bottom: 0.0rem;
      font-size: 1.2rem; line-height: 1em;
      color: var(--specialcolor);
    }

    .unit-tooltip .tooltip-title span {
      font-size: 0.9rem;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-row {
      line-height: 1.3;
      color: var(--bg);
      font-size: 0.9rem;
    }
    .unit-tooltip .tooltip-row p {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .unit-tooltip .tooltip-status {
      margin-top: 0.2rem;
    }

    /* Kleur status tekst in tooltip */
    .unit-tooltip .tooltip-status--available {
      background: var(--basecolorMedium); padding: 4px 0px; text-align: center;
      color: var(--textcolor);
    }

    .unit-tooltip .tooltip-status--option {
      background: var(--option); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-status--taken {
      background: var(--taken); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

	/* ---------- Legend panel ---------- */

	.legend-panel {
	  width: 100%;
	  max-width: 1440px;
	  margin: 1.5rem auto 0;
		display: none;
	}

	.legend-panel-inner {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0px;
	  align-items: flex-start;
	}

	.legend-types-block {
	  display: flex; justify-content: flex-start; padding: 30px; padding-bottom: 0px;
		flex-wrap: wrap;
	}

	.legend-status-block {
	   display: flex; justify-content: flex-start; padding: 0px 30px 30px 30px; 
		flex-wrap: wrap;
	}

    @media (min-width: 768px) {
	.legend-panel-inner {
	  gap: 1.25rem;
	}
	
	.legend-types-block {
	  flex: 2 1 260px; padding-bottom: 30px;
	}

	.legend-status-block {
	  flex: 1 1 220px;
	}
	}

	.legend-heading {
	  margin: 0 0 0.5rem;
	  font-size: 0.8rem;
	  text-transform: uppercase;
	  letter-spacing: 0.12em;
		min-width: 100%; text-align: left;
	}

    @media (min-width: 960px) {
		
	.legend-status-block {
		justify-content: flex-end;
	}
		
	.legend-status-block .legend-heading{
		text-align: right;
	}
	}

    @media (min-width: 960px) {
		.cta-stack{
			flex-direction: column; gap: 15px; margin-top: 15px;
		}
		.cta-btn{
			width: 100%;
		}
	}
	/* grid met kaarten per type */
	.legend-types {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	  gap: 0.65rem; width: auto;
	  display: flex;
	  gap: 0.65rem; flex-wrap: wrap;
	}

	.legend-type-card {
	  width: 140px;
	  text-align: left;
	  border: 1px solid var(--border-soft);
	  border-radius: 0;
	  background: #fafafa;
	  padding: 0.6rem 0.7rem;
	  cursor: pointer;
	  display: flex;
	  flex-direction: column;
	  gap: 0.35rem;
	  font-size: 0.78rem;
	  transition: background 0.15s ease, border-color 0.15s ease,
		transform 0.1s ease, box-shadow 0.15s ease;
	}

	.legend-type-card:hover {
	  border-color: var(--accent);
	  background: #ffffff;
	  transform: translateY(-1px);
	  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	}

	.legend-type-card.is-active {
	  border-color: var(--accent);
	  background: var(--accent-soft);
	}

	.legend-type-header {
	  display: flex;
	  /*justify-content: space-between;*/
	  align-items: baseline;
	  gap: 0.35rem; flex-wrap: nowrap;
	}

	.legend-type-name {
	  font-weight: 600; white-space: nowrap;
	}

	.legend-type-total {
	  font-size: 0.7rem; white-space: nowrap;
	  /*color: var(--muted);*/
	}

	.legend-type-status-row {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.25rem 0.4rem;
		
		display: none;
	}

	.legend-pill {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.2rem;
	  padding: 0.1rem 0.45rem;
	  border-radius: 0px;
	  border: 1px solid transparent;
	  font-size: 0.7rem;
	  background: #ffffff;
	}

	.legend-pill .dot {
	  width: 7px;
	  height: 7px;
	  border-radius: 0px;
	}

	/* kleuren in legend */
	.legend-pill.status-available {
	  border-color: rgba(27, 155, 75, 0.25);
	  color: var(--available);
	}

	.legend-pill.status-available .dot {
	  background: var(--available);
	}

	.legend-pill.status-option {
	  border-color: rgba(243, 156, 18, 0.25);
	  color: var(--option);
	}

	.legend-pill.status-option .dot {
	  background: var(--option);
	}

	.legend-pill.status-sold {
	  border-color: rgba(198, 40, 40, 0.25);
	  color: var(--taken);
	}

	.legend-pill.status-sold .dot {
	  background: var(--taken);
	}

	.status-toggle-bar {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.4rem;
	  margin-top: 0.35rem;
	}

	.status-toggle {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.3rem;
	  padding: 0.3rem 0.65rem;
	  border-radius: 0px;
	  border: 1px solid var(--border-soft);
	  background: #fafafa;
	  font-size: 0.72rem;
	  text-transform: uppercase;
	  letter-spacing: 0.08em;
	  color: var(--muted);
	  cursor: pointer;
	  transition: background 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, transform 0.1s ease;
		outline: none!important;
	}

	.status-toggle .dot {
	  width: 7px;
	  height: 7px;
	  border-radius: 0px;
	}

	/* basis kleuren */
	.status-toggle.status-available .dot {
	  background: var(--available);
	}

	.status-toggle.status-option .dot {
	  background: var(--option);
	}

	.status-toggle.status-sold .dot {
	  background: var(--taken);
	}

	/* active state */
	.status-toggle.is-active.status-available {
	  border-color: rgba(27, 155, 75, 0.5);
	  background: rgba(27, 155, 75, 0.06);
	  color: var(--available);
	}

	.status-toggle.is-active.status-option {
	  border-color: rgba(243, 156, 18, 0.5);
	  background: rgba(243, 156, 18, 0.06);
	  color: var(--option);
	}

	.status-toggle.is-active.status-sold {
	  border-color: rgba(198, 40, 40, 0.5);
	  background: rgba(198, 40, 40, 0.06);
	  color: var(--taken);
	}

	.status-toggle:hover {
	  transform: translateY(-1px);
	}


.preview-download-btn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
    transform 0.1s ease, box-shadow 0.15s ease;
}

.preview-download-btn::after {
  content: "↓";
  font-size: 0.85rem;
  margin-left: 0.4rem;
  color: var(--muted);
}

.preview-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}


#aanbod---woningen{
	background: var(--basecolorMedium);
}
#aanbod---woningen .page-block-caption{
	justify-content: center;
}

.bwnr_row{
	background: none!important;
}
#woningenList{
	max-width: 1440px;
}


.bwnr-spec.beschikbaar{
	padding: 5px 0px 5px 0px; margin-top: 5px;
}

.bwnr-spec.onder_optie{
	background: var(--option); color:  var(--bg);
	padding: 5px 5px 5px 5px; margin-top: 5px; width: auto;
}
.bwnr-spec.verkocht{
	background: var(--taken); color:  var(--bg);
	padding: 5px 5px 5px 5px; margin-top: 5px; width: auto;
}

.bwnr_row .bwnr-spec .btn-primary:hover::before{
	color: var(--specialcolor);
}


.bwnr-spec.beschikbaar,
.bwnr-spec.onder_optie,
.bwnr-spec.verkocht{
	display: none;
}


.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 250px;
}
.bwnr_row .bwnr-spec:nth-of-type(4){
	width: 250px; padding-left: 0px; text-align: left;
}

@media (min-width: 640px) {
.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 165px;
}
}
@media (min-width: 1280px) {
.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 195px;
}
}



/* preview image + zoom button */
.preview-image-wrap{
  position: relative;
}

.preview-zoom-btn{
  position: absolute;
  top: 10px;
  right: 0px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border: 0px solid var(--border-soft);
	outline: none!important;
  border-radius: 0;
  cursor: pointer;
  z-index: 2;
}

.preview-zoom-btn:hover{
  background: #fff;
}

.preview-zoom-btn:disabled{
  opacity: .35;
  cursor: default;
}

/* Lightbox */
.img-lightbox{
  position: fixed;
  inset: 0;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 59000000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.img-lightbox.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.img-lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  display: block;
}

.img-lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-size: 26px;
}




.scrolltop{
	display: none;
}



/* =========================
   INLINE PANEL MODE
   (unitOverlay is NO longer a modal)
   ========================= */

.overlay.as-panel {
  position: relative;
  inset: auto;
  background: transparent;
  padding: 0;
  z-index: 1;

  /* it must take space in the layout */
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  /* we animate height with GSAP */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* hide the full-screen click-catcher (it blocks clicks if visible) */
.overlay.as-panel .overlay-click-catcher {
  display: none !important;
}

/* make the “popup” look like a normal block under the SVG */
.overlay.as-panel .unit-popup {
  max-width: 1280px;
  width: 100%;
  max-height: none;     /* let page scroll instead */
  overflow: visible;    /* no internal scroll unless you want it */
      box-shadow: none;
      position: relative;
      border: 0px solid var(--border-soft);
	padding: 30px 0px;
}

.overlay.as-panel .unit-popup .unit-preview{
	border: 0px solid var(--border-soft);
    background: var(--bg); padding-bottom: 0px; margin-bottom: 0px;
}


.overlay.as-panel .unit-popup .cta-stack{
	padding: 15px 0px;
}


.unit-popup-bottom{
  grid-column: 1 / -1; /* over beide kolommen */
  margin-top: 0.75rem;
}

.unit-popup-bottom.is-hidden{
  display:none;
}

.unit-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
		padding: 0px 15px;
}

.unit-gallery img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border:0px solid var(--border-soft);
}


@media (min-width: 900px) {
	.overlay.as-panel .unit-popup {
		padding: 50px 0px;
	}
    .unit-popup-right {
      padding-right: 15px;
    }
    .unit-preview {
        padding: 0px;
    }
	.unit-gallery{
		padding: 0px 15px;
	}
}