/* ========================================
   Algemene instellingen
   ======================================== */
   
  .top-logo img {
      width: 240px;
      height: 58px;
  }

.overlap-feature {
    --overlap-size: 120px;
    --feature-background: #f9fcf9;

    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    box-sizing: border-box;
    width: 100%;
    padding: 0 4vw;
}

/*
 * Verwijder de extra WPBakery-padding binnen
 * de overlapblokken, zodat alles links uitlijnt.
 */
.overlap-feature.vc_row.wpb_column-gap > .vc_column_container {
    padding: 0 !important;
}

/* ========================================
   Gemeenschappelijke afbeelding
   ======================================== */

.overlap-feature__image {
    position: relative;
    z-index: 2;

    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.overlap-feature__image > .vc_column-inner {
    width: 100%;
    padding: 0 !important;
}

.overlap-feature__image .wpb_single_image,
.overlap-feature__image .vc_figure,
.overlap-feature__image .vc_single_image-wrapper {
    display: block;
    width: 100%;
    margin: 0;
}

.overlap-feature__image img {
    display: block;
    width: 100%;
    height: 680px;
    object-fit: cover;
}

/* ========================================
   Gemeenschappelijk tekstvlak
   ======================================== */

.overlap-feature__content {
    position: relative;
    z-index: 1;

    width: calc(50% + var(--overlap-size)) !important;
    max-width: calc(50% + var(--overlap-size)) !important;
    flex: 0 0 calc(50% + var(--overlap-size)) !important;

    margin:
        0
        0
        0
        calc(-1 * var(--overlap-size)) !important;

    padding: 0 !important;
    background: var(--feature-background);
}

.overlap-feature__content > .vc_column-inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 650px;

    padding:
        100px
        clamp(45px, 6vw, 100px)
        100px
        calc(
            var(--overlap-size) +
            clamp(55px, 6vw, 90px)
        ) !important;
}

.overlap-feature__content >
.vc_column-inner >
.wpb_wrapper {
    width: 100%;
}

.overlap-feature__content h2 {
    margin-top: 0;
    margin-bottom: 28px;
}

.overlap-feature__content .wpb_text_column {
    margin-bottom: 0;
}

.overlap-feature__content p {
    max-width: 680px;
}

.overlap-feature__content p:first-child {
    margin-top: 0;
}

.overlap-feature__content p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Normale variant:
   afbeelding links, tekst rechts

   Row-class:
   overlap-feature
   ======================================== */

.overlap-feature:not(.overlap-feature--side):not(.overlap-feature--stacked)
.overlap-feature__image {
    order: 1 !important;
}

.overlap-feature:not(.overlap-feature--side):not(.overlap-feature--stacked)
.overlap-feature__content {
    order: 2 !important;
}

/* ========================================
   Side-variant:
   tekst links, afbeelding rechts

   Row-classes:
   overlap-feature overlap-feature--side
   ======================================== */

.overlap-feature.overlap-feature--side {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Tekst links */
.overlap-feature--side .overlap-feature__content {
    order: 1 !important;
    position: relative;
    z-index: 1;

    width: calc(50% + var(--overlap-size)) !important;
    max-width: calc(50% + var(--overlap-size)) !important;
    flex: 0 0 calc(50% + var(--overlap-size)) !important;

    margin:
        0
        calc(-1 * var(--overlap-size))
        0
        0 !important;
}

/* Tekstpadding spiegelen */
.overlap-feature--side
.overlap-feature__content > .vc_column-inner {
    padding:
        100px
        calc(
            var(--overlap-size) +
            clamp(55px, 6vw, 90px)
        )
        100px
        clamp(45px, 6vw, 100px) !important;
}

/* Afbeelding rechts */
.overlap-feature--side .overlap-feature__image {
    order: 2 !important;
    position: relative;
    z-index: 2;

    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
}

/* ========================================
   Gestapelde variant:
   afbeelding boven, tekstvlak rechtsonder

   Row-classes:
   overlap-feature overlap-feature--stacked
   ======================================== */

.overlap-feature.overlap-feature--stacked {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Afbeelding 3/4 breed */
.overlap-feature--stacked .overlap-feature__image {
    order: 1 !important;
    position: relative;
    z-index: 1;

    width: 75% !important;
    max-width: 75% !important;
    flex: 0 0 auto !important;

    margin: 0 auto 0 0 !important;
    padding: 0 !important;
}

.overlap-feature--stacked
.overlap-feature__image > .vc_column-inner {
    padding: 0 !important;
}

.overlap-feature--stacked
.overlap-feature__image .wpb_single_image,
.overlap-feature--stacked
.overlap-feature__image .vc_figure,
.overlap-feature--stacked
.overlap-feature__image .vc_single_image-wrapper {
    display: block;
    width: 100%;
    margin: 0;
}

.overlap-feature--stacked .overlap-feature__image img {
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
}

/* Tekstvlak rechtsonder over de afbeelding */
.overlap-feature--stacked .overlap-feature__content {
    order: 2 !important;
    position: relative;
    z-index: 2;

    width: 68% !important;
    max-width: 68% !important;
    flex: 0 0 auto !important;

    margin: -90px 0 0 auto !important;
    padding: 0 !important;

    background: var(--feature-background);
}

.overlap-feature--stacked
.overlap-feature__content > .vc_column-inner {
    box-sizing: border-box;
    display: block;

    width: 100%;
    min-height: 0;

    padding:
        65px
        clamp(45px, 6vw, 100px) !important;
}

.overlap-feature--stacked
.overlap-feature__content >
.vc_column-inner >
.wpb_wrapper {
    display: block !important;
    width: 100%;
}

/* ========================================
   Tablet
   ======================================== */

@media (max-width: 991px) {
    .overlap-feature,
    .overlap-feature.overlap-feature--side,
    .overlap-feature.overlap-feature--stacked {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        padding: 30px 20px;
    }

    /* Op tablet altijd afbeelding boven de tekst */
    .overlap-feature__image,
    .overlap-feature--side .overlap-feature__image,
    .overlap-feature--stacked .overlap-feature__image {
        order: 1 !important;
    }

    .overlap-feature__content,
    .overlap-feature--side .overlap-feature__content,
    .overlap-feature--stacked .overlap-feature__content {
        order: 2 !important;
    }

    .overlap-feature__image,
    .overlap-feature__content,
    .overlap-feature--side .overlap-feature__image,
    .overlap-feature--side .overlap-feature__content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    .overlap-feature__image img {
        width: 100%;
        height: 500px;
        max-height: none;
        object-fit: cover;
    }

    .overlap-feature__content,
    .overlap-feature--side .overlap-feature__content {
        margin: -40px 0 0 !important;
    }

    .overlap-feature__content > .vc_column-inner,
    .overlap-feature--side
    .overlap-feature__content > .vc_column-inner {
        min-height: 0;
        padding: 80px 40px 60px !important;
    }

    /* Gestapelde variant op tablet */
    .overlap-feature--stacked .overlap-feature__image {
        width: 90% !important;
        max-width: 90% !important;
        flex: 0 0 auto !important;

        margin: 0 auto 0 0 !important;
    }

    .overlap-feature--stacked .overlap-feature__image img {
        height: 400px;
    }

    .overlap-feature--stacked .overlap-feature__content {
        width: 85% !important;
        max-width: 85% !important;
        flex: 0 0 auto !important;

        margin: -60px 0 0 auto !important;
    }

    .overlap-feature--stacked
    .overlap-feature__content > .vc_column-inner {
        padding: 50px 40px !important;
    }
}

/* ========================================
   Kleine telefoons
   ======================================== */

@media (max-width: 600px) {
    .overlap-feature,
    .overlap-feature.overlap-feature--side,
    .overlap-feature.overlap-feature--stacked {
        padding: 20px;
    }

    .overlap-feature__image,
    .overlap-feature__content,
    .overlap-feature--side .overlap-feature__image,
    .overlap-feature--side .overlap-feature__content,
    .overlap-feature--stacked .overlap-feature__image,
    .overlap-feature--stacked .overlap-feature__content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    .overlap-feature__image img,
    .overlap-feature--stacked
    .overlap-feature__image img {
        height: 300px;
    }

    .overlap-feature__content,
    .overlap-feature--side .overlap-feature__content,
    .overlap-feature--stacked .overlap-feature__content {
        margin: 0 !important;
    }

    .overlap-feature__content > .vc_column-inner,
    .overlap-feature--side
    .overlap-feature__content > .vc_column-inner,
    .overlap-feature--stacked
    .overlap-feature__content > .vc_column-inner {
        min-height: 0;
        padding: 45px 25px !important;
    }

    .overlap-feature__button {
        width: 68px;
        height: 68px;
    }
}