:root {
    --header-offset: 90px;
    /* section rhythm: hero + usps + price bar read as one group, the content
       sections below are separated at full gap. Each side carries half. */
    --section-gap: 70px;
    --section-gap-tight: 30px;
    --gold: #d7b677;
    --gold-dark: #b99a52;
    /* --gold haalt op --surface maar 1.83:1; deze tint wel 4.53:1 (WCAG AA) */
    --gold-text: #896928;
    --blue: #0057A8;
    --blue-light: #4A90E2;
    --midnight-blue: #283243;
    --black-light: #212121;
    --green: #8bb753;
    --surface: #F6F1E6;
    --surface-line: #e8e2d7;
    --status-saleable: #8bb753;
    --status-sold: #d02f25;
    --status-coming: #1e6dca;
}

/* the preheader is 40px and lives inside the sticky header, so every offset
   measured from it shifts by that much when there is no upcoming infodag */
.page-wraper:has(.preheader) {
    --header-offset: 130px;
}

/* GENERAL*/
p {
    font-size: 1.4rem;
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.beating-heart-anim {
    animation: heartBeat;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

/*h1 {*/
/*    font-family: 'Old Standard TT', serif;*/
/*    color: #d7b677;*/
/*}*/


input#secretHoneypotParamName {
    display: none;
}

.container {
    max-width: 100%;
}

li {
    list-style-position: inside;
}

/*@media only screen and (max-width: 991px) {*/
/*    .page-content {*/
/*        margin-top: 90px;*/
/*    }*/
/*    .page-content #welcome_wrapper {*/
/*        margin-top: -90px;*/
/*    }*/
/*}*/

/* HORIZONTAL SLIDER*/

/*.horizontal-slider .tp-bgimg {*/
/*max-height: 300px !important;*/
/*}*/
/* IMAGE TEXT COMPONENT */
.image_text_title strong {
    color: #CF2027;
}

.image_text_title p {
    font-size: 40px;
    line-height: 46px;
}

/* LOGO SLIDER COMPONENT */
.logo-slider .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-slider .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-slider .owl-carousel .owl-item img {
    max-height: 100px;
}


/* PROJECT VERTICAL */


.projects.project-vertical .page-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.projects.project-vertical .page-row .page-row-right {
    background: white;
}

.cc-banner .cc-message,
.cc-floating .cc-message {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
}

.cc-banner .cc-compliance>.cc-btn,
.cc-floating .cc-compliance>.cc-btn {
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}

@media only screen and (min-width: 992px) {
    .projects.project-vertical .project-vertical-title {
        display: block !important;
        position: absolute;
        z-index: 100;
        right: 0;
        margin-right: 15px;
        background: black;
        border-bottom-left-radius: 5px;
        padding: 10px;
    }

    .projects.project-vertical .project-info .project-info-title {
        display: none;
    }

    .projects.project-vertical .project-vertical-title h1 {
        font-size: 20px;
        color: white;
        padding: 0;
        margin: 0;
    }

    .projects.project-vertical {
        height: 100vh;
        overflow-y: scroll;
        padding: 0;
    }

    .projects.project-vertical .project-vertical-image {
        display: block !important;
    }

    .projects.project-vertical .project-vertical-image-mobile {
        display: none !important;
    }

    .projects.project-vertical .page-row .page-row-left {
        position: fixed;
    }

    .projects.project-vertical .col-md-6.col-sm-12 {
        width: 100% !important;
    }

    .projects.project-vertical .page-row .page-row-right {
        margin-left: auto !important;
    }
}

@media only screen and (max-width: 991px) {

    .projects.project-vertical .project-vertical-image {
        display: none !important;
    }

    .projects.project-vertical .project-vertical-image-mobile {
        display: block !important;
    }
}

.projects.project-vertical .page-row {
    display: flex;
}

.projects.project-vertical .project-info p {
    margin-bottom: 0;
}

.projects.project-vertical .project-vertical-image {
    height: calc(100vh - 90px - 45px);
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* PROJECTS BLOCK COMPONENT */
.project-block>.row {
    display: flex;
    align-items: center;
}

.project-block .project-block-image {
    max-height: 200px;
}

.project-block .project-post {
    display: flex;
    flex-direction: column;
}

.project-block .owl-stage,
.owl-item,
.project-item {
    display: flex;
}

.project-block .project-block-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    justify-content: space-between;
}

.project-block .blog-post {
    margin-bottom: 0px !important;
}

.project-card {
    display: block;
}

.project-card:hover,
.project-card:focus {
    text-decoration: none;
}

.project-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--surface);
}

.project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card:hover .project-card__media img {
    transform: scale(1.05);
}

.project-card__status {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 12px;
    background: rgba(250, 248, 245, 0.94);
    line-height: 1;
}

.project-card__status--saleable,
.project-card__status--sale,
.project-card__status--rent {
    color: var(--status-saleable);
}

.project-card__status--sold {
    color: var(--status-sold);
}

.project-card__status--coming_soon {
    color: var(--status-coming);
}

.project-card__title {
    transition: color 0.3s;
}

.project-card__title:before {
    content: '';
    display: block;
    width: 26px;
    height: 2px;
    margin-bottom: 12px;
    background: var(--gold);
    transition: width 0.4s;
}

.project-card:hover .project-card__title {
    color: var(--gold-text);
}

.project-card:hover .project-card__title:before {
    width: 54px;
}

/* PROJECT USPS */
.project-usps {
    padding: calc(var(--section-gap-tight) / 2) 0 calc(var(--section-gap-tight) / 2);
}

/* on the column itself the border would run through the 15px gutter and meet its
   neighbour as one unbroken line; inside the content box each tile keeps its own */
.project-usps__item:before {
    content: '';
    display: block;
    margin-bottom: 16px;
    border-top: 1px solid var(--black-light);
}

.project-usps__value {
    display: block;
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    /* editors type free text, and a single long word cannot break on its own */
    overflow-wrap: break-word;
}

.project-usps__label {
    display: block;
    margin: 6px 0 0;
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #666;
    overflow-wrap: break-word;
    letter-spacing: 1px;
}

/* editors type these lowercase; capitalize would title-case every word
   ("Elektrische Wagen"), ::first-letter only lifts the first */
.project-usps__value::first-letter,
.project-usps__label::first-letter {
    text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
    .project-usps__value {
        font-size: 2rem;
    }
}

/* PROJECT PRICE BAR */
.project-price-bar {
    padding: calc(var(--section-gap-tight) / 2) 0 calc(var(--section-gap) / 2);
}

.project-price-bar__inner {
    padding: 32px 30px;
    background: var(--surface);
    color: var(--black-light);
}

.project-price-bar__caption {
    display: block;
    margin-bottom: 4px;
    font-size: 1.4rem;
    color: var(--gold-text);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.project-price-bar__amount {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
}

/* margin-right, not margin-left on the sibling: a wrapped button has to start
   flush with the one above it */
.project-price-bar__actions .site-button {
    margin-right: 8px;
    margin-bottom: 8px;
    /* the theme jumps straight from .site-button to .button-lg (20px/35px) */
    padding: 15px 28px;
}

.project-price-bar__actions .site-button:last-child {
    margin-right: 0;
}

.project-price-bar__note {
    margin-left: 6px;
    font-size: 1.4rem;
    color: #666;
}

@media only screen and (min-width: 768px) {
    /* BS3 has no vertical alignment for float columns, so the buttons ride the
       baseline of the amount rather than the top of the column */
    .project-price-bar__actions {
        padding-top: 22px;
        text-align: right;
    }
}

@media only screen and (max-width: 767px) {
    .project-price-bar__amount {
        font-size: 3.6rem;
    }

    .project-price-bar__actions {
        margin-top: 22px;
    }
}

/* PROJECT FORM */
.project-form {
    padding: calc(var(--section-gap) / 2) 0;
}

/* PROJECT MAP */
/* no bottom padding: the map runs flush into the footer, as on the contact page */
.project-map {
    padding: calc(var(--section-gap) / 2) 0 0;
}

/* the shared map component ships the theme's p-t80; the section owns its spacing */
.project-map .section-full,
.project-form .section-full {
    padding-top: 0;
}

/* PROJECT LOTS */
.project-lots-section {
    padding: calc(var(--section-gap) / 2) 0;
}

/* the theme leaves table cells at 12px; the page's body copy is 14px */
.project-lots__table th,
.project-lots__table tbody td {
    font-size: 1.4rem;
}

.project-lots__table tbody td {
    vertical-align: middle;
}

/* trim the theme's site-button (10px 20px, font 14px) to a compact pill
   that sits inside a table cell without dragging the row height up */
.project-lots__status {
    padding: 2px 10px;
    line-height: 1.3;
    cursor: default;
}

/* freeze .site-button.gold and .gold-outline-dark hover swaps — the pill is
   a status label, not a CTA. .muted is already frozen at the variant level.
   Selectors carry 4 classes to beat .site-button.gold:hover (3 classes)
   further down in this file. */
.site-button.gold.project-lots__status:hover,
.site-button.gold.project-lots__status:active,
.site-button.gold.project-lots__status:focus {
    background-color: var(--gold-dark);
    color: #fff;
}

.site-button.gold-outline-dark.project-lots__status:hover,
.site-button.gold-outline-dark.project-lots__status:active,
.site-button.gold-outline-dark.project-lots__status:focus {
    background-color: transparent;
    color: var(--black-light);
    box-shadow: inset 0 0 0 2px var(--gold-dark);
}

.project-lots__status .font-12 {
    font-size: 1rem;
    letter-spacing: 1px;
}

/* PROJECT DOCUMENTS */
.project-documents {
    padding-top: calc(var(--section-gap) / 2);
    padding-bottom: calc(var(--section-gap) / 2);
    /* deep-link target, and the fixed header would cover the heading */
    scroll-margin-top: var(--header-offset);
}

.project-documents__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--surface-line);
}

.project-documents__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
    border-bottom: 1px solid var(--surface-line);
    color: var(--black-light);
}

.project-documents__item:hover,
.project-documents__item:focus {
    background: var(--surface);
    color: var(--black-light);
}

.project-documents__icon {
    flex: 0 0 20px;
    font-size: 2rem;
    color: var(--gold-dark);
}

.project-documents__name {
    flex: 1 1 auto;
    font-size: 1.4rem;
    font-weight: 500;
}

.project-documents__meta {
    flex: 0 0 auto;
    font-size: 1.4rem;
    color: #666;
}

@media only screen and (max-width: 767px) {
    .project-documents__item {
        flex-wrap: wrap;
    }

    .project-documents__meta {
        flex-basis: 100%;
        padding-left: 34px;
    }
}

/* PROJECT INFO BAND */
.project-info-band {
    padding: calc(var(--section-gap) / 2) 0;
}

.project-info-band__aside {
    position: sticky;
    /* --header-offset is the header's exact height, so it alone leaves the card
       flush against it */
    top: calc(var(--header-offset) + 30px);
}

/* stacked under the intro instead of beside it: sticky has nothing to travel
   in, and the column needs its own separation from the text above */
@media only screen and (max-width: 991px) {
    .project-info-band__aside {
        position: static;
        margin-top: 35px;
    }
}

/* PROJECT NEARBY */
.project-nearby {
    padding: 25px 25px 15px;
    background: var(--surface);
}

.project-nearby__title {
    margin: 0 0 20px;
    font-size: 2rem;
    font-weight: 700;
}

.project-nearby__list {
    margin: 0;
}

.project-nearby__item {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 0 0 12px;
}

.project-nearby__value {
    flex: 0 0 60px;
    margin: 0;
    font-size: 1.4rem;
    color: var(--gold-dark);
    font-weight: 500;
}

.project-nearby__label {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
    font-weight: 400;
}

/* PROJECT INFODAY CARD */
.project-infoday {
    margin-bottom: 20px;
    padding: 25px;
    background: var(--surface);
    color: var(--black-light);
}

/* matches .project-nearby__title so the two cards read as one column */
.project-infoday__title {
    margin: 0 0 20px;
    font-size: 2rem;
    font-weight: 700;
}

.project-infoday__date {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
}

.project-infoday__hours {
    margin: 2px 0 0;
    font-size: 1.4rem;
    color: #666;
}

.project-infoday__others {
    margin: 14px 0 0;
    font-size: 1.4rem;
    color: #666;
}

.project-infoday__others a {
    color: var(--gold-text);
}

.project-infoday__link {
    display: inline-block;
    margin-top: 18px;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--black-light);
    border-bottom: 1px solid var(--black-light);
}

.project-infoday__link:hover,
.project-infoday__link:focus {
    color: #000;
    border-bottom-color: #000;
}

.project-infoday__link:focus-visible,
.project-documents__item:focus-visible {
    outline: 2px solid var(--gold-text);
    outline-offset: 3px;
}

/* PROJECT INTRO */

.project-intro__short {
    margin: 0 0 15px;
}

.project-intro__short > *:first-child {
    margin-top: 0;
}

.project-intro__short > *:last-child {
    margin-bottom: 0;
}

.project-intro__short h1 {
    font-size: 3.6rem;
    line-height: 4.2rem;
}

@media only screen and (max-width: 360px) {
    .project-intro__short h1 {
        font-size: 2.6rem;
        line-height: 3.2rem;
    }
}

.project-intro__full > *:last-child {
    margin-bottom: 15px;
}

.project-intro__toggle {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 4px;
    cursor: pointer;
}

.project-intro__toggle:hover,
.project-intro__toggle:focus {
    color: #000;
    text-decoration: underline;
    text-decoration-color: var(--gold);
}

/* BS3 Collapse toggles .collapsed on the trigger; label switches with the state */
.project-intro__toggle .project-intro__toggle-less { display: none; }
.project-intro__toggle:not(.collapsed) .project-intro__toggle-more { display: none; }
.project-intro__toggle:not(.collapsed) .project-intro__toggle-less { display: inline; }

/* PROJECT HERO */
.project-hero {
    padding: 50px 0 calc(var(--section-gap-tight) / 2);
}

.project-hero__titles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--gold);
}

.project-hero__titles-text {
    flex: 1 1 auto;
    max-width: 70%;
}

.project-hero__title {
    margin: 0;
    font-size: 5.6rem;
    line-height: 1.05;
}

.project-hero__subtitle {
    margin: 14px 0 0;
    color: #666;
}

.project-hero__status {
    flex: 0 0 auto;
    padding-left: 22px;
    border-left: 2px solid var(--gold);
}

.project-hero__status-caption {
    display: block;
    margin-bottom: 6px;
    font-size: 1.4rem;
    color: #666;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.project-hero__status-value {
    font-size: 2.4rem;
    line-height: 1;
}

.project-hero__status-value--saleable,
.project-hero__status-value--sale,
.project-hero__status-value--rent {
    color: var(--status-saleable);
}

.project-hero__status-value--sold {
    color: var(--status-sold);
}

.project-hero__status-value--coming_soon {
    color: var(--status-coming);
}

.project-hero__media {
    position: relative;
    margin-top: 30px;
}

.project-hero__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 14px 24px;
    background: var(--gold);
    color: var(--black-light);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* .owl-item is a flex container, so the slide sizes to its content: once a video's
   first frame replaces the poster, a portrait file would shrink the frame to 720px */
.project-hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--black-light);
}

.project-hero__slide img,
.project-hero__video {
    display: block;
    width: 100%;
    height: 100%;
}

.project-hero__slide img {
    object-fit: cover;
}

.project-hero__video {
    object-fit: contain;
}

/* theme paints these as 35px black squares, style.css:8793 */
.project-hero__slider .owl-nav .owl-prev,
.project-hero__slider .owl-nav .owl-next {
    width: 48px;
    height: 48px;
    margin: -24px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(33, 33, 33, 0.8);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 80%, transparent);
    color: #fff;
    font-size: 2rem;
    line-height: 48px;
    transition: background 0.3s;
}

.project-hero__slider .owl-nav .owl-prev {
    left: 20px;
}

.project-hero__slider .owl-nav .owl-next {
    right: 20px;
}

.project-hero__slider .owl-nav .owl-prev:hover,
.project-hero__slider .owl-nav .owl-next:hover,
.project-hero__slider .owl-nav .owl-prev:focus,
.project-hero__slider .owl-nav .owl-next:focus {
    background: rgba(33, 33, 33, 0.95);
    color: #fff;
    opacity: 1;
}

.project-hero__slider .owl-nav .disabled {
    opacity: 0;
    pointer-events: none; /* else the :hover rule above repaints a hidden arrow as active */
}

.project-hero__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.project-hero__thumb {
    position: relative;
    flex: 0 0 135px;
    padding: 0;
    border: 0;
    aspect-ratio: 3 / 2;
    scroll-snap-align: start;
    background: var(--black-light);
    opacity: 0.55;
    transition: opacity 0.3s;
}

.project-hero__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero__thumb:hover,
.project-hero__thumb:focus,
.project-hero__thumb--active {
    opacity: 1;
}

.project-hero__thumb--active {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.project-hero__thumb-play,
.project-hero__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black-light);
}

.project-hero__thumb-play {
    width: 34px;
    height: 34px;
}

.project-hero__play {
    z-index: 2;
    width: 88px;
    height: 88px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
}

/* a border triangle rather than fa-play: the glyph's ink sits off-centre in its
   advance box, so no amount of box centring lands it in the middle of the circle */
.project-hero__thumb-play:before,
.project-hero__play:before {
    content: '';
    display: block;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
}

.project-hero__thumb-play:before {
    border-width: 7px 0 7px 12px;
}

.project-hero__play:before {
    border-width: 18px 0 18px 31px;
}

.project-hero__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.project-hero__play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.project-hero__play--hidden {
    opacity: 0;
    pointer-events: none;
}

/* .main-bar turns position:fixed below 991px; clearance mirrors the
   .rev_slider_wrapper offsets further up, plus the hero's own 30px of air */
@media only screen and (max-width: 991px) {
    .project-hero {
        padding-top: 110px;
    }

    .page-wraper:has(.preheader) .project-hero {
        padding-top: 150px;
    }
}

@media only screen and (max-width: 767px) {
    .project-hero {
        padding-top: 100px;
    }

    .page-wraper:has(.preheader) .project-hero {
        padding-top: 140px;
    }

    .project-hero__title {
        font-size: 3.2rem;
    }

    .project-hero__titles-text {
        max-width: 100%;
    }

    .project-hero__status {
        padding-left: 0;
        border-left: 0;
    }

    /* at phone width the badge covers a third of the frame, so it drops out of the
       overlay and sits above the slider instead */
    .project-hero__badge {
        position: static;
        display: block;
        padding: 10px 14px;
        font-size: 1.1rem;
    }

    .project-hero__play {
        width: 64px;
        height: 64px;
    }

    .project-hero__play:before {
        border-width: 13px 0 13px 22px;
    }

    .project-hero__thumb {
        flex: 0 0 96px;
    }

    /* no room to spare on a phone, so show the whole frame rather than crop it */
    .project-hero__slide img {
        object-fit: contain;
    }

    .project-hero__slider .owl-nav .owl-prev,
    .project-hero__slider .owl-nav .owl-next {
        width: 36px;
        height: 36px;
        margin: -18px 0;
        line-height: 36px;
        font-size: 1.6rem;
    }

    .project-hero__slider .owl-nav .owl-prev {
        left: 10px;
    }

    .project-hero__slider .owl-nav .owl-next {
        right: 10px;
    }
}

.text-grey {
    color: #ababab;
}

.text-muted {
    color: #6e6e6e; /* bootstrap zet #777: 4.48:1 op wit */
}

.pl-0 {
    padding-left: 0;
}

.inline-block {
    display: inline-block;
}

@media screen and (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }
}

.footer-bottom-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.border-t-light-grey {
    border-top: 1px solid #dfdfdf;
}

.border-b-light-grey {
    border-bottom: 1px solid #dfdfdf;
}

.text-blue {
    color: var(--blue);
}

.text-blue-light {
    color: var(--status-coming);
}

.text-green {
    color: var(--status-saleable);
}

.text-red {
    color: var(--status-sold);
}

.text-primary {
    color: var(--gold);
}

.text-gold,
.text-gold:hover,
.text-gold:focus,
.text-gold:active {
    color: var(--gold-text); /* a:hover in dit bestand wint anders met var(--gold) */
}

.bg-gold {
    background-color: var(--gold);
}

.bg-surface {
    background-color: var(--surface);
}

.info-panel {
    background-color: var(--surface);
    color: var(--black-light);
}

.info-panel h2,
.info-panel h5 {
    color: var(--black-light);
}

/* 0.55 houdt zwarte tekst op >=4.5:1, ook boven een volledig zwarte foto */
.banner-scrim {
    background-color: var(--surface);
    opacity: 0.65;
}

.overlay-bx-2 {
    background-color: var(--surface); /* theme vult dit zwart op style.css:10218 */
    color: var(--black-light);
}

.overlay-bx-2 a,
.overlay-bx-2 a:hover,
.overlay-bx-2 a:focus,
.overlay-bx-2 a:active {
    color: var(--black-light);
}

.thumb-placeholder {
    height: 300px;
    background: var(--surface);
}

.some-facts {
    border: 0;
    padding: 0;
}

.some-facts:before,
.some-facts:after {
    content: none;
}

.some-facts :first-child {
    margin-top: 0;
}

.some-facts :last-child {
    margin-bottom: 0;
}

.wt-bnr-inr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    min-height: 500px;
}

.wt-bnr-inr .container {
    display: block;
    height: auto;
}

.wt-bnr-inr-entry {
    display: block;
}

@media only screen and (max-width: 991px) {
    .wt-bnr-inr {
        min-height: 330px;
    }

    .page-wraper:has(.preheader) .wt-bnr-inr {
        height: auto;
        min-height: 500px;
    }
}

@media only screen and (max-width: 991px) {
    .rev_slider_wrapper[data-alias^="herobanner"] {
        margin-top: 80px;
    }

    .page-wraper:has(.preheader) .rev_slider_wrapper[data-alias^="herobanner"] {
        margin-top: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .rev_slider_wrapper[data-alias^="herobanner"] {
        margin-top: 70px;
    }

    .page-wraper:has(.preheader) .rev_slider_wrapper[data-alias^="herobanner"] {
        margin-top: 110px;
    }
}

.preheader a,
.preheader a:hover,
.preheader a:active,
.preheader a:focus {
    color: black;
}

@media only screen and (min-width: 992px) {
    .main-bar>.container {
        padding-top: 10px;
    }
}

.site-search-btn {
    color: var(--gold-text);
}

.social-bx li a,
.login-bx li a {
    color: var(--gold)
}

.site-button.blue {
    background-color: var(--blue);
}

.site-button.blue:hover,
.site-button.blue:active,
.site-button.blue:focus {
    background-color: var(--blue-light);
}

.site-button.gold {
    background-color: var(--gold-dark);
    color: white; /* wit op dit goud is 2.69:1 */
}

.site-button.gold:hover,
.site-button.gold:active,
.site-button.gold:focus {
    background-color: var(--gold);
    color: var(--black-light);
}

/* inset shadow, not a border: the other variants only change colour, and a border
   would make this button 4px taller than the .gold one beside it */
.site-button.gold-outline,
.site-button.gold-outline-dark {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--gold-dark);
}

/* on a dark band */
.site-button.gold-outline,
.site-button.gold-outline:hover,
.site-button.gold-outline:active,
.site-button.gold-outline:focus {
    color: #fff;
}

/* on a light band */
.site-button.gold-outline-dark,
.site-button.gold-outline-dark:hover,
.site-button.gold-outline-dark:active,
.site-button.gold-outline-dark:focus {
    color: var(--black-light);
}

/* only the ring reacts; .site-button:hover would swap both fill and ink
   (style.css:3344) and flip the label to black */
.site-button.gold-outline:hover,
.site-button.gold-outline:active,
.site-button.gold-outline:focus,
.site-button.gold-outline-dark:hover,
.site-button.gold-outline-dark:active,
.site-button.gold-outline-dark:focus {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--gold);
}

.site-button.white {
    color: var(--gold);
    background-color: white;
}

.site-button.white:hover,
.site-button.white:active,
.site-button.white:focus {
    background-color: var(--gold-dark);
}

.site-button.muted,
.site-button.muted:hover,
.site-button.muted:active,
.site-button.muted:focus {
    color: #999;
    background-color: #e5e5e5;
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
    background-color: var(--gold);
}

.contact-one {
    border-color: var(--gold);
}

.header-nav .nav>li.active>a,
.header-nav .nav>li.current-menu-item>a {
    color: var(--gold-text); /* theme zet hier var(--gold): 1.83:1 op --surface */
}

.wt-team-six .wt-team-info:after,
.wt-team-six .wt-team-info:before {
    background-color: var(--gold);
}

button.scroltop {
    background: var(--gold);
}

.footer-light .footer-bottom {
    padding: 20px 0px;
    background-color: var(--surface);
    color: var(--black-light);
}

.footer-bottom-2 {
    padding: 5px 0px;
    background-color: var(--surface);
    color: #6e6e6e;
}

.footer-light .footer-bottom .copyrights-text,
.footer-light .footer-bottom .copyrights-nav li a {
    color: var(--black-light);
}

.footer-light .footer-bottom a,
.footer-light .footer-bottom a:hover,
.footer-light .footer-bottom a:focus,
.footer-light .footer-bottom a:active,
.footer-bottom-2 a,
.footer-bottom-2 a:hover,
.footer-bottom-2 a:focus,
.footer-bottom-2 a:active {
    color: var(--black-light);
}

.footer-light .footer-bottom .copyrights-nav li a:hover,
.footer-light .footer-bottom .copyrights-nav li a:active,
.footer-light .footer-bottom .copyrights-nav li a:focus,
.footer-light .footer-bottom .copyrights-nav li.active a {
    color: var(--gold-text);
}

/*.footer-dark .footer-bottom a {*/
/*    color: var(--gold);*/
/*}*/
a,
p a,
a:active,
a:hover,
a:focus,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--gold-text);
}

.table-condensed>tbody>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>thead>tr>th {
    padding: 10px;
}

.line-amiation:after,
.line-amiation:before {
    background-color: var(--gold)
}

.project-attachment a {
    text-decoration: underline;
}

.modal-header {
    display: flex;
    justify-content: space-between;
}


.modal-header:before,
.modal-header:after {
    content: none;
}

.extra-nav {
    margin-left: 10px;
}

.call-to-action {
    border: 6px solid var(--gold);
    position: relative;
    max-width: 745px;
    margin-right: 200px;
}

.call-to-action-info {
    position: absolute;
    right: -400px;
    top: 60px;
    width: 510px;
}

.project-info-bar {
    position: sticky;
    top: var(--header-offset);
}

.form-success {
    scroll-margin-top: calc(var(--header-offset) + 150px);
}

.brochure-form .form-control,
.contact-one .form-control {
    border: 0px;
    border-bottom: 1px solid #ababab;
}

.form-control {
    color: black;
}

.brochure-form .form-control::-webkit-input-placeholder,
.contact-one .form-control::-webkit-input-placeholder {
    font-size: 12px;
    text-transform: uppercase;
    color: #ababab;
}

.brochure-form .form-control::-ms-input-placeholder,
.contact-one .form-control::-ms-input-placeholder {
    font-size: 12px;
    text-transform: uppercase;
    color: #ababab;
}

.brochure-form .form-control::-moz-placeholder,
.contact-one .form-control::-moz-placeholder {
    font-size: 12px;
    text-transform: uppercase;
    color: #ababab;
}

input[type=checkbox],
input[type=radio] {
    display: none;
}

[name='wf-submit'] {
    display: none;
}

@media only screen and (max-width: 1200px) {
    .call-to-action {
        margin-right: 300px;
        padding-right: 175px;
    }

    .call-to-action-info {
        right: -280px;
        width: 410px;
        top: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .contact-one {
        margin-right: 200px;
    }

    .mirror {
        float: right;
    }
}

@media only screen and (max-width: 991px) {
    .header-nav .nav {
        background: var(--surface);
    }

    .header-nav .nav>li>a {
        color: var(--black-light); /* theme zet hier #777: 4.22:1 op --surface */
    }

    .site-footer {
        padding: 0;
    }

    .overlay-bx-2 {
        opacity: 0.9;
        bottom: 0px;
    }

    .line-amiation:after {
        width: 100%;
        opacity: 1;
        left: -20px;
    }

    .line-amiation:before {
        height: 100%;
        top: -20px;
        opacity: 1;
    }

    .call-to-action {
        margin-right: 100px;
        padding-right: 250px;
    }

    .call-to-action-info {
        right: -100px;
        width: 310px;
    }
}

@media only screen and (max-width: 767px) {
    .contact-info {
        margin-top: 0;
        margin-bottom: 40px;
    }

    .call-to-action {
        margin-right: 0;
        padding: 15px;
    }

    .call-to-action-info {
        right: 0px;
        width: 100%;
        top: 0px;
        position: inherit;
        margin-top: 40px;
    }
}

.some-facts .site-button span {
    font-size: 12px;
    line-height: normal;
}

.main-bar {
    padding-top: 0px;
    border-bottom: 1px solid var(--surface-line); /* scheidt de crème balk van witte pagina-inhoud */
}

.page-wraper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-footer {
    margin-top: auto;
}

.wt-icon-box-wraper .icon-content p {
    word-break: normal;
    overflow-wrap: break-word;
}

@media only screen and (min-width: 992px) {
    .page-not-found-title {
        font-size: 12rem;
        line-height: 1;
    }
}

/* GOOGLE MAP */
/* Iubenda withholds the Maps API until cookies for external content are accepted.
   The map collapses to a spacer rather than to nothing: project pages zero out the
   section's p-t80, so at 0 the block above would sit flush against the footer. */
.google-map--blocked {
    height: 10px;
}