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 5px 15px; z-index: 10;
}
.logo svg{
    width: auto; height: 100%;
}
.navbar-toggle{
	top: 45px;
}
.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
}
.footerAddress p a{
    text-decoration: none;
}
.footerAddress p a:hover{
    text-decoration: underline;
}


.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: 1em;
}
.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---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;
	}
	#header.menu-default #theMain .navbar-nav li a{
		font-size: 2em; line-height: 1.3em; background: none!important;
	}
	#extraMenu{
		position: relative; background: none;
	}
	.menu-default .mainmenu #extraMenu .navbar-nav li, .menu-centered .mainmenu #extraMenu .navbar-nav li{
		justify-content: flex-start; padding-left: 15px;
	}
	.menu-default .mainmenu #extraMenu .navbar-nav li a, .menu-centered .mainmenu #extraMenu .navbar-nav li a{
		width: auto; padding: 0px 20px; font-size: 1.2em;
	}
}
@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: 15px 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{
		text-transform: uppercase;
		background: var(--specialcolor);
		color: var(--basecolor);
		 height: 50px;
        font-size: 12px;
        line-height: 50px;
        margin: 0px 0px 0px 5px; 
        white-space: nowrap; border-radius: 25px; text-decoration: none; padding: 19px 20px; letter-spacing: 0.2em;
    }
	
	#extraMenu{
		display: none!important;
	}
}
@media(min-width:991px){
	#header.menu-default, #header.menu-centered{
		height: 115px;
	}
	#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: 115px;
	}
	.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;
	}
		.pagetop.actionblock p a{
        position: absolute; top: 40px; padding: 0px 20px;
    }

}
@media(min-width:1280px){
	#header.menu-default, #header.menu-centered{
		height: 145px;
	}
	.menu-default #mainsection, .menu-centered #mainsection{
		margin-top: 145px;
	}
	.footer-logo{
		padding-left: 0px;
	}
	.footer .container {
        grid-template-columns: repeat(5, 1fr);
    }
	.footer-contact.footer-menu{
		grid-column: span 2;
	}
	.footer-logo img, .footer-logo svg{
		height: 80px;
	}
	
	.footer-menu.footer-menu-1{
		padding-left: 15px;
	}
	.footer-menu.footer-menu-2{
		padding-left: 33.33%;
	}
}
@media(min-width:1440px){
	.pagetop.actionblock{
		right: 30px; top: 10px;
	}
    .pagetop.actionblock p{
        font-size: 1em;
    }
	#header.menu-default, #header.menu-centered{
		height: 170px; padding: 0px 30px;
	}
	.menu-default #mainsection, .menu-centered #mainsection{
		margin-top: 160px;
	}
	.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: 90px!important; justify-content: flex-end;
	pointer-events: none;
}
#theBody.home #homeANI svg{
	width: 100%; max-width: 200px; height: auto;
}
.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: 45px;
}
.page-block.slideshow .page-block-caption .page-block-ttl{
	display: none;
}
.page-block.gallery.slideshow .page-block-caption .page-block-txt p{
	font-size: 3em; line-height: 1.1em;
}

	.page-block.gallery.slideshow .page-block-module::after{
		position: absolute; top: 0px; left: 0px; width: 100% ; height: 100%; background: rgba(255,255,255,0.75); content: ''; display: block; z-index: 10;
		
		background: #ffffff;
background: linear-gradient(180deg, rgba(00, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
		
	}

.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{
	color: var(--basecolor)
}

.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;
	
	
	display: none!important;
}

#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(min-width:1280px){
.page-block.gallery.slideshow .page-block-caption{
	display: flex; align-content: center; align-items: center;
}
.page-block.gallery.slideshow .page-block-caption .page-block-txt p{
	font-size: 5em;
}
}


@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: 30px 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(255,255,255,0.75); content: ''; display: block; z-index: 10;
		
		background: #ffffff;
background: linear-gradient(180deg, rgba(00, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
		
	}
	.page-block.gallery.slideshow .page-block-caption .page-block-txt p{
		color: var(--basecolor); font-size: 2.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;
		right: 0px;
		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-end; align-items: flex-end; align-content: flex-end; 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;
		right: 0px;
		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;
}
	#theBody.home #homeANI svg{
        max-width: 280px; width: 280px;
        
	}
}

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

@media(min-width:1440px){
	.page-block.cta-sticker{
		right: 60px;
		right: 0px;
		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.aanbod .page-block-image a,
#theBody.aanbod .page-block-gal_image a{
	pointer-events: none;
}

.page-block-gal_image{
    position: relative; width: 100%;
}
.page-block-gal_image img{
    width: 100%;
}
.page-block-gal_image h4{
    width: 100%; position: absolute; top: auto; bottom: 0px; margin: 0px; padding: 0px; text-align: center;
}
@media(min-width:768px){

    .page-block-gal_image{
        width: 140%; margin-left: -40%;
        width: 100%; margin-left: 0%;
    }
    .page-block-gal_image h4{
        text-align: center;
    }
    .page-block.right .page-block-gal_image{
        width: 140%; margin-left: 0%; margin-right: -40%;
        width: 100%; margin-left: 0%; margin-right: 0%;
    }
    .page-block.right .page-block-gal_image h4{
        text-align: center;
    }
}

#theBody #pageBlock1.page-block::after,
#financieel-advies.page-block::after,
#locatie-en-omgeving---algemeen.page-block::after,
#locatie-en-omgeving---omgeving.page-block::after,
#locatie-en-omgeving---informatieblok-2.page-block::after{
	position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; content: 'Hof'; font-family: headfont; font-size: 40vw; display: flex; justify-content: flex-end; align-items: flex-end; align-content: flex-end; margin-top: 20vw;
	color: var(--basecolorMedium); mix-blend-mode: multiply; opacity: 0.3;
	padding: 60px;
    pointer-events: none!important;
}
#theBody.aanbod #pageBlock1.page-block::after,
#theBody.nieuws	 #pageBlock1.page-block::after{
	display: none;
}
#theBody.contact #pageBlock1.page-block::after{
	content: 'Hof Merwede';
	display: none;
}
#financieel-advies.page-block::after,
#locatie-en-omgeving---algemeen.page-block::after,
#locatie-en-omgeving---omgeving.page-block::after,
#locatie-en-omgeving---informatieblok-2.page-block::after{
	content: 'Merwede'; font-size: 24vw; justify-content: flex-start; 
}

.block.news{
	pointer-events: none;
}
.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:600px){
	#theBody #pageBlock1.page-block::after{
		font-size: 180px; margin-top: 0vw; line-height: 90px
	}
	#financieel-advies.page-block::after,
	#locatie-en-omgeving---algemeen.page-block::after,
	#locatie-en-omgeving---omgeving.page-block::after,
	#locatie-en-omgeving---informatieblok-2.page-block::after{
		font-size: 120px; margin-top: 0vw; line-height: 120px;
	}
	

	#theBody #pageBlock1.page-block,
	#financieel-advies.page-block{
	}
}
@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: 100%; width: 100%; object-fit: cover; height: 100%;
	}
	#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:1280px){
	#theBody #pageBlock1.page-block::after{
		font-size: 400px; margin-top: 0vw; line-height: 130px
	}
	#financieel-advies.page-block::after,
	#locatie-en-omgeving---algemeen.page-block::after,
	#locatie-en-omgeving---omgeving.page-block::after,
	#locatie-en-omgeving---informatieblok-2.page-block::after{
		font-size: 360px; margin-top: 0vw; line-height: 160px;
	}

	#theBody #pageBlock1.page-block,
	#financieel-advies.page-block{
	}
}
@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{
}     
}
@media(min-width:991px){   
#theBody.home #pageBlock1 .page-block-caption{
}     
#theBody.home #pageBlock1 .page-block-image{
}     
}

.page-block.gallery.autoslider{
    max-width: none;
}
#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;
    column-gap: 15px;  padding-bottom: 0px; margin: 0px;
}
.page-block.gallery.autoslider .page-block-caption .page-block-ttl,
.page-block.gallery.autoslider .page-block-caption .page-block-txt{
}
.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; padding-bottom: 60px;
	}
	.page-block.gallery.autoslider .page-block-caption:nth-of-type(3){
		column-gap: 0px; padding-top: 0px;
	}
	.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{
    display: none;
	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;
    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;
    }
}
@media(min-width:1600px) {
	#autoSLider img{
		height: clamp(340px, 60vh, 600px);; width: auto; max-height: 700px;
	}
}


@media(min-width:991px) {
#theBody.contact #pageBlock1 .page-block-txt{
    display: flex; flex-wrap: nowrap; justify-content: center;
}
.makelaar-block{
    max-width: 500px;
}
	
.page-block.projectplanning .page-block-caption .page-block-module .block-listing {
	grid-template-columns: repeat(4, 1fr);
}
.block.projectplanning .block-caption .block-ttl h2 {
	font-size: 1.3em;
}
}

#pageBlock0 .page-block-page_image img{
	transform: translate(0,0)!important;
}

.page-block-page_image .page-block-header-caption{
	background: rgba(255, 255, 255, 0);
	background: linear-gradient(180deg, rgba(00, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%); align-content: flex-start; align-items: flex-start;
}

.page-block-page_image .page-block-header-caption .page-block-image-text{
	width: 60%; min-width: 280px; max-width: 500px;
}
.page-block-page_image .page-block-header-caption .page-block-image-text h2{
	color: var(--basecolor); padding: 0px; margin: 0px 0px 0.2em 0px;
}
.page-block-page_image .page-block-header-caption .page-block-image-text p{
	color: var(--basecolor); font-size: 1.4em; line-height: 1.2em;
}


.page-block-page_image .reveal-mask { display:block; overflow:hidden; }
.page-block-image .reveal-mask { display:block; overflow:hidden; }


@media(max-width:767px) {
	
	#pageBlock0{
		min-height: 50vh;
	}
	
}


@media(min-width:991px) {
	.page-block-page_image .page-block-header-caption{
	background: linear-gradient(90deg, rgba(00, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);  margin: 0px!important;
		width: 100%; padding: 0px 60px;  align-content: center; align-items: center;
	}	
	.page-block-page_image .page-block-header-caption .page-block-image-text h2{
		font-size: 4em; font-family: headfont;
	}
	.page-block-page_image .page-block-header-caption .page-block-image-text p{
		font-size: 1.7em; line-height: 1.2em;
	}
}


@media(min-width:1280px) {
		
	.page-block-page_image .page-block-header-caption{
	background: linear-gradient(90deg, rgba(00, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);  margin: 0px!important;
		padding: 0px 120px;
	}	

.page-block-page_image .page-block-header-caption .page-block-image-text{
	width: 60%; min-width: 280px; max-width: 610px;
}
	.page-block-page_image .page-block-header-caption .page-block-image-text h2{
		font-size: 5em; font-family: headfont;
	}
	.page-block-page_image .page-block-header-caption .page-block-image-text p{
		font-size: 1.9em; line-height: 1.2em;
	}
}


#theBody.aanbod #pageBlock1.page-block{
	margin-bottom: 0px; padding-bottom: 0px;
}
#theBody.aanbod .page-block.gallery.autoslider .page-block-ttl h2{
	margin-bottom: 0px;
	}
#theBody.aanbod .page-block.gallery.autoslider .image-container{
	padding-top: 0px;
}
#theBody.aanbod #pageBlock1.page-block.with_page_image .page-block-caption{
	align-content: flex-start; align-items: flex-start;
}
	#theBody.aanbod .page-block.gallery.autoslider .page-block-caption{
		padding-bottom: 0px; display: none;
	}
@media(min-width:900px) {
	#theBody.aanbod #pageBlock1.page-block{
		max-width: 40%;
		margin-bottom: 60px; 
	}
	#theBody.aanbod #pageBlock1.page-block.with_page_image .page-block-caption{
	align-content: center; align-items: center;
	}
	#theBody.aanbod .page-block.gallery.autoslider{
		max-width: 60%; margin: 0px!important; overflow: hidden;
	}
	#theBody.aanbod .page-block.gallery.autoslider .page-block-caption{
		padding-bottom: 0px; display: none;
	}
	#theBody.aanbod .page-block.gallery.autoslider .image-container{
	align-content: center; align-items: center;
	}
}
@media(min-width:1440px) {
	
	#theBody.aanbod #pageBlock1.page-block.with_page_image .page-block-caption .page-block-txt{
	padding-right: 0px;
	}
}

@media (min-width: 991px) {
    .bwnr_row .bwnr-spec:nth-of-type(2) {
        width: 200px;
        text-align: right;
    }
}


@media (min-width: 768px) {
    #woning---kenmerken .page-block-txt .spec-item .spec-label {
        width: 350px;
    }
}

#object_desc{max-height: none; opacity: 1; margin-top: 30px;}
#object_desc p{margin: 0px; padding: 0px;}


#theBody.aanbod-woning #pageBlock1.page-block,
#theBody.aanbod-woning #woning---kenmerken.page-block,
#theBody.aanbod-woning #woning---impressies.page-block{
    margin-bottom: 45px;
}


#theBody.woning #pageBlock1 .page-block-txt h2 span.spacer{
    opacity: 0.4;
}


    :root {
      --bg: #ffffff;
      --card-bg: #ffffff;
      --accent: #ff6f61; /* accentkleur */
      --accent-soft: rgba(255, 111, 97, 0.08);
      --text: #000000;
      --muted: #777777;
      --available: #1b9b4b;
      --taken: #c62828;
      --border-soft: #e3e3e3;
      --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
    }

    * {
      box-sizing: border-box;
    }


#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: 1.25rem 4vw 2.5rem;
      gap: 0.75rem;
    }

    .svg-stage {
      width: 100%;
      max-width: 1440px;
      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);
      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: 1200px;
      width: 100%;
      max-height: 90vh;
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
      gap: 1.5rem;
      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-title {
      margin: 0.75rem 0 0.4rem;
      font-size: 1.8rem;
      font-weight: normal;
		    font-family: headfont;
		color: var(--accent);
			
    }

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

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

    .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);
    }

    /* Preview small in right column */

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

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

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

    .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: 0.5rem;
    }

    .cta-btn {
      border-radius: 320px;
      padding: 0.65rem 0.9rem;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: 1px solid var(--border-soft);
      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(--text);
    }

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

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

    .cta-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      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);
      border-color: var(--accent);
    }

    .close-btn {
      position: absolute;
      top: 0.0rem;
      right: 0.0rem;
      z-index: 2;
      background: #ffffff;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      color: #000;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
      /*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;
    }