/* ========================================================================== */
/* == SINGLE WONING TEMPLATE - Woning */
/* ========================================================================== */

body.single-realworks_wonen {
    background-color: white;
    --woning-hero-bgcolor: #132639;
}

/* -------------------------------------------------------------------------- */
/* -- PAGE TITLE HEADER */
/* -------------------------------------------------------------------------- */
.title-bar {
    background-color: var(--woning-hero-bgcolor);
}
.title-bar h1 {
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em !important;
    color: white !important;
    margin: 0;
    padding: 18px 0;
}
@media (max-width: 569px) {
    .title-bar h1.h3 {
        font-size: 18px !important;
        padding: 14px 0;
    }
}

/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- MEDIA CONTAINER */
/* -------------------------------------------------------------------------- */
.woning-hero {
    background-color: var(--woning-hero-bgcolor);
    padding-bottom: 52px;
}

/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- MEDIA GRID */
/* -------------------------------------------------------------------------- */
/* -- Media Grid - GRID LAYOUT */
.woning-mediagrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 18px;
}
.woning-mediagrid .hoofdfoto {grid-column: span 4; grid-row: span 4; }
.woning-mediagrid .grid-span-2 {grid-column: span 2; grid-row: span 2; }

/* -- Media Grid - IMAGES */
.woning-mediagrid .woning-foto { position: relative; }
.woning-mediagrid img {	object-fit: cover; width: 100%; height: 100%; float: left; max-width: 100%; aspect-ratio: 3 / 2;}

/* -- Media Grid - LAST IMAGE SHOWING +MORE */
.woning-mediagrid .foto-3 {
    background-color: hsl(210 50% 5%);
}
.woning-mediagrid .foto-3.hover-fade-img:not(:hover) img {
    opacity: 0.5;
}

/* -- Media Grid - HOVER IMAGE */
/* -- override hover img opacity from wonen.css */
.woning-mediagrid .on-hover:hover .hover-fade-img img,
.woning-mediagrid .on-hover:hover.hover-fade-img img { opacity: 0.35; }

/* -- show counter of additional images available */
.woning-mediagrid .woning-fotos-counter {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    color: #fff;
    font-size: 40px; font-weight: 500;
    text-shadow: 0 2px 2px rgb(0 0 0 / 30%);
}

/* -- Overlay NIEUW */
.woning-mediagrid .overlay-nieuw {
    position: absolute; top: 16px;
    margin: 0; padding: 0 50px;
    border-radius: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0;
    background-color: #FF4705;
    background: linear-gradient(to right, red, orange); border-color: white;
    color: white;
    font-size: 30px; font-weight: 500;
    text-align: center; text-transform: uppercase;
}
@media (max-width: 569px) {
    .woning-mediagrid .overlay-nieuw {
        font-size: 24px;
    }
}
/* -- Make the lightbox anchor link cover the entire image */
.woning-mediagrid .woning-foto .lightbox-link,
.woning-fotos .grid-item .lightbox-link,
.woning-plattegronden .grid-item .lightbox-link {
    position: absolute; top: 0; right: 0;
    width: 100%; height: 100%;
    pointer-events: auto;
}
/* -- Don't show the lightbox links in mediagrid  */
.woning-mediagrid .lightbox-preload {display: none;}



/* -- MEDIA GRID - RESPONSIVE BREAKPOINTS */
/* -- Mediagrid - Breakpoint smaller than 480px */
@media screen and (max-width: 480px) {
    .woning-mediagrid .hoofdfoto {
        grid-column: span 2; grid-row: span 2;
    }
    .woning-mediagrid .grid-span-2 {
        grid-column: unset;
        grid-row: unset;
    }
}

/* -- Mediagrid - Breakpoint smaller than 569px */
@media screen and (max-width: 569px) {
    .woning-hero {
        padding-bottom: 20px;
    }
    .woning-mediagrid {
        border-width: 2px;
        grid-template-columns: auto;
        grid-template-rows: auto;
        gap: 12px;
    }
    .woning-mediagrid .nieuw-overlay { font-size: 24px}
}

/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- Sections */
/* -------------------------------------------------------------------------- */
/* -- Container - article.woningpresentatie */
article.woning-presentatie {
    padding-bottom: 3rem;
}
.woning-presentatie section {
    margin-bottom: 3rem;
}
.woning-presentatie section h2 {
    margin: 0 0 8px 0;
    font-family: 'Rubik';
    font-weight: 500;
    color: #19334d; /* HSL(210 50% 20%) */
}

/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- Layout Kolommen */
/* -------------------------------------------------------------------------- */
.woning-main {
    display: flex;
    column-gap: 2rem;
}
.column-main {
    width: 67%;
}
.column-sidebar {
    width: 33%;
    max-width: 360px;
    margin-left: auto;
    padding: 0 1rem;
    text-align: center;
}
.column-clearfix:after { content: ""; clear: both; display: table; }



/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- VERKOOPSTATUS WITHIN HERO SECTION*/
/* -------------------------------------------------------------------------- */
.woning-hero .woning-verkoopstatus {
    padding: 2rem 0 0;
}
.woning-hero .woning-verkoopstatus p {
    display: inline-block;
    line-height: 48px;
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    margin-right: 12px;
    text-transform: uppercase;
    color: hsl(216 70% 22%);
}
.woning-hero .woning-verkoopstatus p.vraagprijs {
    border-radius: 4px;
    color: white;
    padding: 0 16px;
    text-transform: lowercase;
    background-color: var(--clr-accent);
}
.woning-hero .woning-verkoopstatus p.vraagprijs.bijna-verkocht { background-color: var(--clr-accent); }
.woning-hero .woning-verkoopstatus p.vraagprijs.verkocht { text-decoration: line-through; background-color: var(--clr-accent); }

.woning-hero .woning-verkoopstatus p.verkoopstatus  { color: #fff; }
.woning-hero .woning-verkoopstatus p.verkoopstatus.verkocht { color: var(--clr-accent); }
.woning-verkoopstatus p.verkoopstatus.nieuw { background-color: var(--clr-accent); }

@media screen and (max-width: 569px ) {
    /* -- reduce heading sizes on mobile */
    .woning-hero .woning-verkoopstatus {padding-top: 20px;}
    .woning-hero .woning-verkoopstatus p { font-size: 20px; line-height: 36px;}
}


/* -------------------------------------------------------------------------- */
/* -- Single -- HOOFDKENMERKEN */
/* -------------------------------------------------------------------------- */
.woning-hoofdkenmerken {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1px;
    row-gap: 1px;
    align-items: stretch;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
    margin-bottom: 4rem;
}
.woning-hoofdkenmerken .kenmerk-item {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 9px 16px;
    background-color: hsl(var(--hue-primary) 50% 94%);
    color: #333;
}
.woning-hoofdkenmerken .kenmerk-item strong {font-weight: 500;}
.woning-hoofdkenmerken .kenmerk-item .icon:before {
    font-size: 20px;
}


@media screen and (max-width: 1247px ) {
    /* -- make hoofdkenmerken as wide as the page (counter limit-width) */
    .woning-hoofdkenmerken {margin-left: -1.5rem; margin-right: -1.5rem; border-radius: 0; }
}
@media screen and (max-width: 959px ) {
    /* -- reduce margin between hoofdkenmerken and woning-header */
    .woning-hoofdkenmerken {margin-bottom: 3rem; }
}
@media screen and (max-width: 480px ) {
    /* -- make hoofdkenmerken as wide as the page (counter limit-width) */
    .woning-hoofdkenmerken {margin-left: -1rem; margin-right: -1rem; }
}


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- HEADER */
/* -------------------------------------------------------------------------- */
.woning-header {
    position: relative;
    margin-bottom: 4rem;
}
.woning-header p {
    display: block;
    margin: 0;
    font-size: 28px;
    line-height: 28px;
    font-weight: 300;
    color: hsl(210 70% 20%);
    text-transform: uppercase;
}
.woning-header p.adres {
    font-weight: 600;
}
.woning-header p.vraagprijs,
.woning-header p.verkoopstatus {
    display: inline-block;
    line-height: 1.25;
    margin-top: 16px;
    font-size: 24px;
    font-weight: 500;;
}
.woning-header p.vraagprijs {
    font-family: "Kanit";
    background-color: var(--clr-accent);
    border-radius: 6px;
    color: white;
    padding: 4px 12px;
    text-transform: unset;
}
.woning-header p.vraagprijs.verkocht {
    background-color: var(--clr-accent);
    text-decoration: line-through;
}
.woning-header p.verkoopstatus {
    margin-left: 12px;
    text-transform: uppercase;
}

@media screen and (max-width: 569px ) {
    .woning-header {margin-bottom: 2rem;}
    /* -- reduce heading sizes on mobile */
    .woning-header p { font-size: 24px;}
    .woning-header p.vraagprijs,
    .woning-header p.verkoopstatus {font-size: 18px; margin: 16px 0;}

    .woning-header p.vraagprijs  {
        margin-right: 8px;
    }
}


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- OMSCHRIJVING */
/* -------------------------------------------------------------------------- */
/* -- paragraph text size and color */
.woning-omschrijving, .woning-omschrijving p {
    line-height: 1.6rem;
    font-weight: 300;
    color: #666;
}
/* -- make the first paragraph stand out */
.woning-omschrijving-content p:first-of-type {
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: -0.35px;
    color: #444;
    margin-top: 12px;
}

/* -- language-switcher omschrijving */
.language-toggle { display: inline-block; }

.switch-NL, .switch-EN {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: 400;
    background-color: #eaeaea;
    color: #555;
}
.switch-NL {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.switch-EN {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.switch-NL.active, .switch-EN.active {
    background-color: white;
    color: var(--clr-accent);
    font-weight: 600;
}
.switch-NL:hover, .switch-EN:hover {
    color: white;
    background-color: var(--clr-accent);
}


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- KENMERKEN */
/* -------------------------------------------------------------------------- */

/* -- KENMERKEN - HEADINGS */
.woning-presentatie .woning-kenmerken h3 {
    margin-bottom: 6px;
    color: #555;
    font-size: 16px;
    font-weight: 500;
}
/* -- KENMERKEN - TABEL (DESCRIPTION LIST) */
.woning-kenmerken dl {
    margin: 0 0 1.5rem 0;
    border-bottom: 0px solid #eee;
}
.woning-kenmerken dl:after {
    clear: both; display: table; content: "";
}
.woning-kenmerken dt,
.woning-kenmerken dd {
    float: left;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0;
    font-size: 14px;
    border-top: 1px solid #eee;
}
.woning-kenmerken dt {
    width: 35%;
    clear: left;
    font-weight: 300;
    word-break: break-all;
    word-wrap: break-word;
    overflow-x: hidden;
    color: #666 !important;
}
.woning-kenmerken dd {
    width: 65%;
    color: hsl(210 30% 40%);
    font-weight: 400;
}
/* -- add color-banded rows to table */
.woning-kenmerken.rows-banded dt:nth-child(4n + 1),
.woning-kenmerken.rows-banded dd:nth-child(4n + 2) {
    background-color: #f9fcff;
}


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- FOTO GRID */
/* -------------------------------------------------------------------------- */
.grid-container { display: grid; grid-gap: 1rem; }

/* -- define number of grid COLUMNS using classes */
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }   /* 1/3 column 33% */
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }   /* 1/4 column 25% */

/* -- span grid columns and rows */
.grid-span-2 { grid-column: span 2; grid-row: span 2; }
.grid-span-3 { grid-column: span 3; grid-row: span 3; }
.grid-span-4 { grid-column: span 4; grid-row: span 4; }
.grid-container .hoofdfoto { grid-column: span 4; grid-row: span 4; }

/* -- format grid items */
.grid-item { position: relative; overflow: hidden; }

/* -- images in grid items */
.grid-container img { object-fit: cover; width: 100%; height: 100%; }

/* -- forced aspect ratio for woning fotos in grid */
.woning-fotos .grid-item img { aspect-ratio: 3 /2; }
/* .grid-container .contain img { object-fit: contain; } */


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- PLATTEGRONDEN */
/* -------------------------------------------------------------------------- */
.woning-plattegronden .grid-item img {
    /* -- forced aspect ratio for plattegronden in grid */
    aspect-ratio: 2 / 3;
    /* -- add border */
    border: 1px solid #aaa;
    /* object-fit: contain; */
}

/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- LOCATIE  */
/* -------------------------------------------------------------------------- */
.woning-google-maps {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    height: 400px;
    max-height: 75vh;
}
/* -- GOOGLE MAPS - Info Window (single woning page) */
#google-map .gm-style-iw .address .gm-info-verkoopprijs,
#google-map .gm-style-iw .address .gm-info-verkoopstatus,
#google-map .gm-style-iw .address .bekijk.btn {
    display: none;
}
#google-map .gm-style-iw .address {
    margin-top: 4px;
    max-height: 28px;
    overflow: hidden;
}


/* -------------------------------------------------------------------------- */
/* -- Single -- INLINE ENERGIELABEL */
/* -------------------------------------------------------------------------- */
.inline-energielabel {
    display: inline-block;
    position: relative; top: -2px;
    vertical-align: middle;
    margin-left: 0.5rem;
    padding: 0 5px 0 6px;
    line-height: 20px;
    font-family: Kanit, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-size: 14px; font-weight: 600;
}
/* -- triangular shape pointing right, right to label */
.inline-energielabel:after {
    display: block;
    position: absolute; bottom: 0; right: -8px;
    content: '';
    border-left: 8px solid #333;
    border-top: 10px solid transparent !important;
    border-bottom: 10px solid transparent !important;
}
/* -- triangular right shape (:after) colors per energielabel */
.inline-energielabel.energielabel-A:after {border-left-color: rgb(50,146,56); }
.inline-energielabel[class*="energielabel-A"]:after {border-left-color: rgb(50,146,56); }
.inline-energielabel.energielabel-B:after {border-left-color: rgb(96,172,45); }
.inline-energielabel.energielabel-C:after {border-left-color: rgb(197,208,8); }
.inline-energielabel.energielabel-D:after {border-left-color: rgb(247,243,14); }
.inline-energielabel.energielabel-E:after {border-left-color: rgb(236,190,19); }
.inline-energielabel.energielabel-F:after {border-left-color: rgb(222,100,31); }
.inline-energielabel.energielabel-G:after {border-left-color: rgb(216,0,31); }
.inline-energielabel.energielabel-onbekend:after {border-left-color: #333; }


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- CONTACT / JOUW MAKELAAR */
/* -------------------------------------------------------------------------- */
.woning-contact {
    /* -- flexbox column layout */
    display: flex;
    width: 100%;
    background-color: #d41138;
    background-color: var(--clr-accent);
}
.jouw-makelaar-cta {
    padding: 1.5rem;
    vertical-align: top;
    /* -- flexbox column width */
    width: 75%;
}
.jouw-makelaar-foto {
    /* -- flexbox column width */
    width: 25%;
    line-height: 0;
}
.jouw-makelaar-foto img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* -- header banner */
.jouw-makelaar-cta-header {
    font-size: 32px;
    font-family: 'Kanit';
    color: white;
    text-wrap: balance;
}
.jouw-makelaar-cta p { margin-bottom: 2rem; }

/* -- makelaar naam en NVM logo */
.jouw-makelaar-cta-naam {
    font-size: 1.1rem; padding-top: 1.5rem; color: white;
}
.jouw-makelaar-cta-naam .makelaar-naam {
    font-weight: 600;
    text-shadow: 0 2px 2px rgb(0 0 0 / 0.5);
}
.jouw-makelaar-cta .logo-nvm {
    float: left;
    width: 32px;
    margin-top: 6px;
    margin-right: 20px;
}

@media screen and (max-width: 569px) {
    .woning-contact {display: block;}
    .jouw-makelaar-cta {width: 100%; }
    .jouw-makelaar-foto {display: none;}
    .jouw-makelaar-cta-header {font-size: 28px;}
}

/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- SHARE LINKS */
/* -------------------------------------------------------------------------- */
.woning-share a { transition: none; color: #19334D; text-align: center;}
.woning-share .fa {
    display: inline-block;
    font-size: 24px;
    padding: 0.4px;
    margin-right: 4px;
    height: 36px; width: 36px; line-height: 36px;
    border-radius: 4px;
}
.woning-share a:hover .fa { color: white; background-color: var(--clr-accent); }


/* -------------------------------------------------------------------------- */
/* -- Woning (single) -- SIDEBAR */
/* -------------------------------------------------------------------------- */

.woning-presentatie section.sidebar-makelaar {
    margin-bottom: 2rem;
    padding: 0 !important;
    text-align: left;
    background-color: hsl(var(--hue-primary) 50% 94%);
    color: #19334D;
    border: 1px solid #ccc;
    box-shadow: 8px 8px 20px -12px rgb(0, 0, 0, 0.5);
}
.sidebar-makelaar-foto {
    line-height: 0;
    max-height: 280px;
    overflow: hidden;
}
.sidebar-makelaar-nvm-banner {
    background-color: #19334D;
    color: white;
    padding: 1rem 1.5rem;
}
.sidebar-makelaar-contact { padding: 1rem 1.5rem; text-align: left;}
.sidebar-makelaar-contact a {
    color: #227b8f;
    color: #19334D;
}
.sidebar-makelaar-contact a:hover {
    color: white !important;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    background-color: #19334D;
}
.sidebar-makelaar .logo-nvm { max-height: 30px !important; float: right; }
.sidebar-makelaar .nvm-makelaar { font-weight: 600; font-size: 20px; }
.sidebar-makelaar-contact .makelaar-naam { font-size: 28px; line-height: 1.1; font-weight: 500; margin-bottom: 16px; color: hsl(var(--clr-primary) 50% 25%); }
.sidebar-makelaar-contact .makelaar-contactinfo { margin-bottom: 8px; font-size: 16px; font-weight: 400; }
.sidebar-makelaar-contact .makelaar-contactinfo i { display: inline-block; width: 2rem; }

.woning-sidebar .woning-share {
    text-align: center;
    padding: 1rem 0;
}
.woning-sidebar .deel-deze-woning {
    color: #19334D;
    font-size: 18px; font-weight: 500;
    padding-bottom: 16px;
}


/* -------------------------------------------------------------------------- */
/* -- Single -- AANBOD GERELATEERD */
/* -------------------------------------------------------------------------- */
/* -- Section background and shadow */
.woning-aanbod-gerelateerd {
    background-color: #132639;
    padding: 36px 0;
}
.woning-aanbod-gerelateerd h2 {
    padding-bottom: 28px;
}
/* -- Woning Card - Remove border on Woning Card */
.woning-aanbod-gerelateerd .woning-card {border: none !important;}

/* -- Button Gehele Woningaanbod */
.woning-aanbod-gerelateerd .woning-aanbod-button {
    line-height: 36px;
    display: inline-block;
    margin-top: 32px;
    padding: 0 4rem;
    font-weight: 500;
    border-radius: 10em;
    border: 1px solid transparent;
    background-color: var(--clr-accent);
    color: white;
}
.woning-aanbod-gerelateerd .woning-aanbod-button:hover {
    box-shadow: 0 20px 20px -8px rgb(0 0 0 / .6);
    border-color: var(--clr-accent);
    background-color: hsl(var(--hue-accent), 70%, 98%);
    color: var(--clr-accent);
}

/* -------------------------------------------------------------------------- */
/* -- Single -- MAKELAARSDIENSTEN */
/* -------------------------------------------------------------------------- */
.woning-makelaarsdiensten {
    padding: 1rem 0 0 0;
    background-color: white;
}
.woning-makelaarsdiensten a { color: var(--clr-accent); }
.woning-makelaarsdiensten .section-title h2 { padding-top: 2rem; padding-bottom: 0rem; margin-top: 0; }
.wrapper-makelaarsdiensten {
    padding-top: 2rem; padding-bottom: 2rem;
    gap: 3rem;
    columns: 3;
}
@media screen and (max-width: 759px) {
    .wrapper-makelaarsdiensten {
        gap: 2rem;
        columns: 2;
    }
}
@media screen and (max-width: 569px) {
    .wrapper-makelaarsdiensten {
        columns: 1;
    }
}
.wrapper-makelaarsdiensten p {max-width: 80ch; }
.wrapper-makelaarsdiensten p:first-of-type {margin-block-start: 0em;}


/* ========================================================================== */
/* == UTILITY -- TOGGLE */
/* ========================================================================== */
.toggle { position: relative; overflow: hidden; padding-bottom: 3rem; }
.toggle-closed {
    max-height: 320px;
}
.woning-fotos .toggle-closed {
    max-height: 580px;
}
.toggle-opened { max-height: unset; }
.toggle-fade {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6rem;
    background-color: white; /* fallback */
    background: linear-gradient(to top, white 2rem, transparent);
}
.toggle-opened .toggle-fade { display: none;}
.toggle-button {
    display: inline-block;
    position: absolute;
    bottom: 8px;
    line-height: 32px;
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    color: var(--clr-accent);
    text-align: center;
}
.toggle-icon:before {
    position: relative;
    font-family: 'uncodeicon';
    font-size: 16px;
    margin-right: 8px;
    vertical-align: bottom;
}
/* -- icon als toggle gesloten */
.toggle-closed .toggle-icon:before{ content: "\f107"; /* angle down */ }

/* -- icon als toggle geopend */
.toggle-opened .toggle-icon:before{ content: "\f106"; /* angle up */ }


/* ========================================================================== */
/* == SINGLE - Responsive styles */
/* ========================================================================== */

@media (max-width: 1247px) {
    /* -- limit width container - set margins */
    .single-realworks_wonen .limit-width:not(footer *):not(.row-menu) {
        margin-left: 1.5rem;
        margin-right: 1.5rem;}
}
@media (max-width: 959px) {
    /* -- mobile menu - left and right margins */
    .single-realworks_wonen .menu-container .logo-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    /* -- remove sidebar layout */
    .column-main,
    .column-sidebar {
        max-width: unset; width: 100%;
        min-width: unset; width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    .column-sidebar {margin-top: 1.5rem; }
    .woning-openhuis {margin-bottom: 0; }
}
@media (max-width: 480px) {
    /* -- limit width container - set margins */
    .single-realworks_wonen .limit-width:not(footer *):not(.row-menu) {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}
@media (min-width: 960px) {
    /* -- desktop menu - left and right margins */
    .menu-wrapper .row-menu .row-menu-inner {padding-left: 1.5rem;}
}
@media (min-width: 1200px) {
    /* -- desktop menu - left and right margins */
    .menu-wrapper .row-menu {margin-left: 0;}
}
@media (min-width: 1248px) {
    /* -- desktop menu left and right margins */
    .menu-wrapper .row-menu {margin-left: auto;}
    .menu-wrapper .row-menu .row-menu-inner {padding-left: 0; padding-right: 0;}
    /* -- limit width container - set margins */
    .single-realworks_wonen .main-wrapper .limit-width {
        padding-left: 36px; padding-right: 36px;
    }
    .single-realworks_wonen .menu-container .logo-container {padding-left: 0 !important; padding-right: 0 !important;}
}


/* ========================================================================== */
/* == LIGHTBOX - FANCYBOX ADJUSTMENTS */
/* ========================================================================== */
body .fancybox__container {
    z-index: 2010;
    --fancybox-color: #fff;
    --fancybox-accent-color: var(--clr-accent);
    --fancybox-bg: #0f263d;
    --fancybox-opacity: 0.97;
    --carousel-button-color: #fff;
    --carousel-button-border-radius: 0.25rem;
    --carousel-button-shadow: none;
    --fancybox-toolbar-text-shadow: none;
    --carousel-button-svg-filter: none;
    --carousel-button-svg-stroke-width: 2;
}
.fancybox__counter { font-size: 14px !important; }
.fancybox__toolbar {background: none !important; }

/* -- Custom buttons in FancyBox toolbar */
.fancybox__gallery-tabs {
    padding: 0 3px;
    line-height: var(--carousel-button-height, 48px);
    text-align: center;
    font-size: 15px;
}
.fancybox__gallery-tabs span {
    border: 1px solid transparent;
    padding: 0.25rem 0.75rem;
    font-weight: 300;
    cursor: pointer;
    text-shadow: none;
}
.fancybox__gallery-tabs span:hover {
    border: 1px solid var(--clr-accent);
    background-color: var(--clr-accent);
    color: white;
}
.fancybox__gallery-tabs span.active {border: 1px solid var(--clr-accent);}
.fancybox__gallery-tabs .icon:before {padding-right: 0;}

/* -- Smaller Margins for PDF Lightbox */
.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content {
    height: 100% !important;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    border-width: 3px !important;}


/* ========================================================================== */
/* == SINGLE - PRINT styles */
/* ========================================================================== */
@media print {
    .woning-presentatie {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .column-main, .column-sidebar {
        max-width: unset; width: 100%;
        min-width: unset; width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    /* -- remove toggle-closed views */
    .toggle-closed,
    .toggle-opened {
        max-height: unset !important;
        transition: none;
        padding-bottom: 0;
    }
    .toggle-fade,
    .toggle-closed .toggle-fade,
    .toggle-opened .toggle-fade {
        display: none !important;
        background: none;
    }
    /* -- woning beschrijving breedte ivm leesbaarheid */
    .woning-omschrijving { max-width: 60rem; }
    /* -- section bottom margin */
    .woning-presentatie section { padding-bottom: 0;}
    /* -- fotos witte achtergrondkleur */
    .woning-foto {background-color: white !important;}
}