/*
 * Theme name: Catsand
 * Version: 1.1.1
 *
 *
 * 
 *
 * Author: Catsand
 */

p strong{
	color:#101010;
	font-weight: 800 !important;
}

#het_project .grid__col__middle .project__content img{
	object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 81% 0%;
    transform: scale(1.65);
    transform: scale(1.65) translateY(-4%);
}
#het_project .gx-0 div:nth-child(3) img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(1.7) translate(10%, -11%);	
} 

.architect__grid .img__grid img{
	object-position: 68%;
}
.lifetime__section .gx-0 > div:nth-child(1) img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 102%;
    transform: scale(2.5) translateY(-22%);	
}



.legal-consent-container .hs-form-booleancheckbox-display span p{
	font-size: 14px !important;
	line-height: 1.1em !important;
}
@media screen and (min-width: 980px){
	.hs-submit{
		display: flex;
	}
	.ion-contact{
		color: #e2e0df !important;
		max-width: 400px;
		align-self: flex-end;
		text-align: right;
		margin-left: auto
	}
		.ion-contact a{
		color: #e2e0df !important;
	}
	.submitted-message{
		color: #e2e0df !important;
	}
}


@media screen and (max-width: 980px){
	.ion-contact{
		padding-top: 12px;
		color: #232b1d !important;
	}
		.submitted-message{
		color: #232b1d !important;
	}
}


.page-id-43008 .scroll__down,
.page-id-44556 .scroll__down,
.page-id-44368 .scroll__down,
.page-id-44440 .scroll__down{
	opacity: 0 !important;
}

.page-id-43008 .hdr__links.contact-btn{
	opacity: 0 !important;	
}




.page-id-43008 section.hero__section.head-herosection .caption{
	    bottom: 45%;
    transform: translateY(50%);
}

.hero__video video{width: 100%;}

.project-link.page-42875, .project-link.page-42879, .project-link.page-42877{
	padding-top: 48px;
}

.onlybuttons-1, .onlybuttons-1 .project__content.aboutvideoSection{
	margin-top: 0px !important;
	padding-top: 0px !important;
}

.removepadding-1{
		padding-bottom: 0px !important;
}

#ons-aanbod.lifetime__section #img3{
	object-position: 66%;	
}

@media screen and (max-width: 980px){
.page-id-42877 .full-video-section .img-after-content h2{
	padding-bottom: 50px;
	padding-top: 40px;
}
	#afgestemd .link__btn{
		margin-top: 35px;
	}
}

@media (min-width: 768px) and (max-width: 980px){
	.lifetime__section{
		padding-top: 150px !important;
	}
}



#afgestemd{
	padding-bottom: 0px !important;
}

.otgs-development-site-front-end{
	display: none !important;
}

.page-id-43008 .title{
	padding-left: 64px !important;
	padding-right: 64px !important;
}

.page-id-43008 .contact__form__mobile{
 	display: none !important;
}

.custom-language-switcher{
/*	display: none !important;*/
}

.page-id-43008 .hdr__links.contact-btn,
.page-id-44368 .hdr__links.contact-btn,
.page-id-44556 .hdr__links.contact-btn,
.page-id-44440 .hdr__links.contact-btn{
display: none !important;	
}


#hubspotcontactformmob .hs-input.hs-fieldtype-intl-phone select,
#hubspotcontactformmobfr .hs-input.hs-fieldtype-intl-phone select,
#hubspotcontactformmoben .hs-input.hs-fieldtype-intl-phone select,
#hubspotcontactformmobde .hs-input.hs-fieldtype-intl-phone select{
	color:#000;
}

#hubspotcontactformmob .hs-form-booleancheckbox a,
#hubspotcontactformmobfr .hs-form-booleancheckbox a,
#hubspotcontactformmoben .hs-form-booleancheckbox a,
#hubspotcontactformmobde .hs-form-booleancheckbox a{
	color:#000 !important;
}

body .hs-form fieldset .hs-form-field.hs_request_for_appointment{
	padding-bottom: 0px !important;
}

.hs_request_for_appointment .input{
	max-width: 135px;
}

.hs_request_for_appointment .input input{
	vertical-align: middle;
	margin-right: 8px;
}

.modal__cont .block__ttl{
	    margin: 0 0 3rem;
}
.hs-phone .hs-fieldtype-intl-phone{width: 100% !important;}
.hs-phone select{    max-width: 166px !important;}
.hs-form fieldset.form-columns-1 select.hs-input{width: 100% !important;}

.link__btn {
    display: inline-flex !important;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 24px;
    max-width: 100%;
    width: auto;
    text-align: left;
    white-space: normal;
}

.link__btn > span {
    display: inline;
    white-space: normal;
}

.link__btn .icon {
    flex: 0 0 auto;
    display: flex;
}
@media screen and (max-width: 980px){

}
 

select {border-radius: 0px !important;}
select {
  background-color: #1e1e2e;
  color: #e0e0f0;
  color-scheme: light;   /* ← tells Edge to render the popup dark */
}

select option {
  background-color: #fff !important;
  color: #000 !important;
}
.js-wpml-ls-item-toggle.wpml-ls-item-toggle{
	max-width: 52px;
	 background-color: transparent !important;
}
.wpml-ls-sub-menu, .wpml-ls-current-language, .catsand-lang-switcher{
	max-width: 52px;
}

 .wpml-ls-current-language{
	 border-bottom: 1px solid #e2e0df;
	    padding: 0px 0px !important;
	 margin-right: 16px !important;
	 
}

.catsand-lang-switcher:hover .wpml-ls-current-language a{
	 color:#e2e0df !important;	
}

 .wpml-ls-current-language:hover, .wpml-ls-current-language a:hover{
	 color:#e2e0df !important;
}

.wpml-ls-sub-menu li a{
	padding: 6px 10px !important;
	font-size: 12px !important;
}

.wpml-ls-legacy-dropdown a span{
	font-size: 14.5px !important;
}

.wpml-ls-current-language .js-wpml-ls-item-toggle{
	padding-right: 0px !important;
	padding-left: 0px !important;
}


.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
    border: 0.20em solid transparent !important;
    border-top: .25em solid !important;
	    right: 0px !important;
	    top: calc(50% - 0.1em) !important;
}

.wpml-ls-legacy-dropdown a {
    display: block;
    text-decoration: none;
    color: #e2e0df;
    border: none;
    background-color: #252B1E !important;
    padding: 0px 10px;
    line-height: 1;
}
@media screen and (max-width: 980px){
	.catsand-lang-switcher{display:none;}
}

.header.header-with-bg  .wpml-ls-current-language{
	 border-bottom: 1px solid #232B1D;
}
.header.header-with-bg .catsand-lang-switcher:hover .wpml-ls-current-language a{
	 color:#232B1D !important;	
}

.header.header-with-bg .wpml-ls-current-language a span{
	 color: #232B1D;
}

.header.header-with-bg .wpml-ls-sub-menu li a span{
	 color: #e2e0df;
}

.header.header-with-bg .js-wpml-ls-item-toggle.wpml-ls-item-toggle {
    color: #232B1D !important;
}

.menu__open .header.header-with-bg .js-wpml-ls-item-toggle.wpml-ls-item-toggle {
    color: #e2e0df !important;
}

.menu__open .header.header-with-bg .wpml-ls-current-language a span{
	 color: #e2e0df;
}

.menu__open .header.header-with-bg  .wpml-ls-current-language{
	 border-bottom: 1px solid #e2e0df !important;
}

.menu__open .header.header-with-bg .wpml-ls-current-language a span{
	 color: #e2e0df;
}
.wpml-ls-sub-menu{padding-top: 4px !important;}
.wpml-ls-sub-menu li a:hover span {
    text-decoration: underline;
}

#contact_scn{
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;	
}

.page-42881-oonwood.architect__section{
	margin-top: 0px !important;
	padding-top: 0px !important;
}

.padding-top-small{
	padding-top: 40px !important;
}

body .no-space-bottom{
		padding-bottom: 0px !important;
}

body .architect__section.no-space-bottom:before{
	content: unset;
	display: none !important;
}

.beleving .cmn__section.project__section{
	padding-top: 0px !important;
	margin-top: 0px;
}
.beleving .cmn__section .block__ttl__secondary{
	margin-bottom: 0px !important;
}

.beleving .cmn__section .contact-title-desc {
    margin: 0 auto 0rem !important;
}


.beleving .cmn__section.project__section .block__ttl__hdng{
	padding-top: 40px;
	 margin-bottom: 50px !important;
}

.beleving .footer__btm {
    margin: 30px 0 0;
}

.beleving .waargron-section .brand-img{
	margin-top:-10px;
	padding-bottom: 20px;
	margin-bottom: 6rem;
}

.beleving .oonwood-arc-section{
	margin-top: 12rem !important;
}

.env__section.page-id-42877envscn{
	padding-top: 0px !important;
}
@media screen and (min-width: 992px){
	.beleving .floating__button{
		display: none !important;
	}	
}


body .floating__button{
	top: 50vh !important;
	transform: translateY(-50%) !important;
}
@media screen and (min-width: 980px){
#interieur{
	margin-bottom: 12rem !important;
}	
}

.beleving .floating__button2{display: none !important;}


/* =========================================================
   HEADER POSITION
========================================================= */

/* Pagina's met fullscreen hero: main-container heeft GEEN header-with-bg */
body .main-container:not(.header-with-bg) #header.header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 19999 !important;
}

/* Pagina's zonder fullscreen hero: main-container HEEFT header-with-bg */
body .main-container.header-with-bg #header.header {
    position: sticky !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000000 !important;
}

/* Ook bij scrollen sticky houden, niet wisselen naar fixed */
body .main-container.header-with-bg #header.header.is-scrolled {
    position: sticky !important;
}


/* =========================================================
   HEADER BASE
========================================================= */

body #header.header {
    padding: 4rem 0;
    transition: padding 0.35s ease, background-color 0.35s ease;
    overflow: visible;
}

body #header.header.is-scrolled {
    padding: 1.5rem 0;
}


/* =========================================================
   HEADER BACKGROUND / AFTER
   Alleen nog voor pagina's zonder header-with-bg
========================================================= */

body .main-container:not(.header-with-bg) #header.header::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: transparent;
    opacity: 1;
    transition: opacity 0.35s ease, background-color 0.35s ease;
}

/* Nav altijd boven de header-after */
body #header.header nav {
    position: relative;
    z-index: 1;
}

/* Alleen bij fullscreen hero-pagina's mag de after verdwijnen on scroll */
body .main-container:not(.header-with-bg) #header.header.is-scrolled::after {
    background: transparent;
    opacity: 0;
}

/* Geen grote after meer op de header wanneer main-container header-with-bg heeft */
body .main-container.header-with-bg #header.header::after {
    content: none !important;
}


/* =========================================================
   MAIN-CONTAINER BACKGROUND / GRADIENT
   Dit vervangt de vroegere .header-with-bg::after
========================================================= */

body .main-container.header-with-bg {
    position: relative;
    overflow: visible;
}

/* Gradient achter alle content/foto's */
body .main-container.header-with-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 520px;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: linear-gradient(
        0deg,
        #E2E0DF 0%,
        rgba(248, 248, 247, 0) 100%
    );
    mix-blend-mode: multiply;
}

/* Alle directe children boven de gradient plaatsen, behalve de header zelf */
body .main-container.header-with-bg > *:not(#header) {
    position: relative;
    z-index: 1;
}

/* Header blijft boven alles */
body .main-container.header-with-bg #header.header {
    z-index: 10000000 !important;
}


/* =========================================================
   LOGO / CTA / LANGUAGE SWITCH FADE OUT ON SCROLL
========================================================= */

body #header.header .navbar-brand,
body #header.header .contact-btn,
body #header.header .catsand-lang-switcher {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0s;
}

body #header.header.is-scrolled .navbar-brand,
body #header.header.is-scrolled .contact-btn,
body #header.header.is-scrolled .catsand-lang-switcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0.35s;
}


/* =========================================================
   MENU BUTTON
========================================================= */

body #header.header .menutxt {
    position: relative;
    transition: color 0.25s ease;
}

/* Enkel de underline van de menu button volgt de menu kleur */
body #header.header .menutxt::after {
    background-color: currentColor !important;
    transition: background-color 0.25s ease;
}

/* Menu licht boven foto/donkere visual */
body #header.header.header-light .menutxt {
    color: #E2E0DF !important;
}

/* Menu zwart boven gewone content */
body #header.header.header-dark .menutxt {
    color: #232B1D !important;
}


/* =========================================================
   CTA / HDR LINKS
   Niet kleuren met header-light/header-dark
========================================================= */

body #header.header .hdr__links {
    position: relative;
}

/* Laat de standaard CTA underline bestaan */
body #header.header .hdr__links::after {
    transition: background-color 0.25s ease;
}


/* =========================================================
   MENU OPEN STATE
   Wanneer menu open is, wint deze styling altijd
========================================================= */

/* Menu tekst + underline altijd bleke kleur wanneer menu open is */
body.menu__open #header.header .menutxt {
    color: #E2E0DF !important;
}

body.menu__open #header.header .menutxt::after {
    background-color: #E2E0DF !important;
}

/* Header mag terug groter worden wanneer menu open is */
body.menu__open #header.header {
    padding: 4rem 0;
}

/* Logo en CTA opnieuw zichtbaar maken, ongeacht scrollpositie */
body.menu__open #header.header .navbar-brand,
body.menu__open #header.header .contact-btn,
body.menu__open #header.header .catsand-lang-switcher{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   WORDPRESS ADMIN BAR FIX
   Alleen zichtbaar wanneer je ingelogd bent
========================================================= */

body.admin-bar .main-container:not(.header-with-bg) #header.header,
body.admin-bar .main-container.header-with-bg #header.header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .main-container:not(.header-with-bg) #header.header,
    body.admin-bar .main-container.header-with-bg #header.header {
        top: 46px;
    }
}
@media (min-width: 782px) {
	.offer__section .grid__col:first-child .img__grid,
	.lifetime__section .grid__col:first-child .img__grid{
		margin-left: 0px !important
	}
	
	.offer__section .grid__col:last-child .img__grid,
	.lifetime__section  .grid__col:last-child .img__grid{
		margin-right: 0px !important
	}	
}

/* =========================================================
   FLOATING BUTTONS
========================================================= */

/* Mobile menu button standaard verbergen op desktop */
.floating__button--mobile {
    display: none;
}

/* Tweede Experience Hub button standaard verbergen op desktop */
.floating__button2 {
    display: none;
}


/* =========================================================
   MOBILE < 992px
========================================================= */

@media (max-width: 991.98px) {

    /* Desktop Experience Hub button verbergen op mobiel */
    .floating__button--desktop {
        display: none !important;
    }

    /* Mobile menu button tonen */
    .floating__button--mobile {
        display: flex !important;
        border: none;
        cursor: pointer;
    }

    /* Experience Hub onderaan tonen */
    /*.floating__button2 {
        position: fixed;
        bottom: 0;
        left: 50%;
		transform: translateX(-50%);
        width: auto;
        min-width: 220px;
        height: 45px;
        z-index: 9999;
        padding: 0 1.5rem;
        background: #E2E0DF;
        color: #232B1D;
        cursor: pointer;
        font-size: 14.5px;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-decoration: underline;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        backface-visibility: hidden;
        transition: all .5s ease;
    }*/
	.floating__button2 {
    position: fixed;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);

    width: max-content;
    max-width: calc(100vw - 2rem);
    height: 45px;

    z-index: 9999;
    padding: 0 1.5rem;
    background: #E2E0DF;
    color: #232B1D;
    cursor: pointer;
    font-size: 14.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    opacity: 1;
    visibility: visible;
    backface-visibility: hidden;
    transition: all .5s ease;

    white-space: nowrap;
    box-sizing: border-box;
}

.floating__button2 span {
    white-space: nowrap;
}

    .floating__button2 span {
        color: inherit;
    }
}
.floating__button{
	text-decoration: none !important;
}
.floating__button span:after{
	content: "";
	position: absolute;
 width: 1px;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: #000;
}


.floating__button2{
	text-decoration: none !important;
}
.floating__button2 span{position: relative;}
.floating__button2 span:after{
	content: "";
	position: absolute;
 width: 100%;
	height: 1px;
	right: 0px;
	bottom: -2px;
	background-color: #000;
}

/* =========================================================
   DESKTOP >= 992px
========================================================= */

@media (min-width: 992px) {

    .floating__button--desktop {
        display: flex;
    }

    .floating__button--mobile,
    .floating__button2 {
        display: none !important;
    }
}