/*!
README - STYLEGUIDE BRIEFLY

Find the style by media query screen width, using Find or CTRL + F
min-width 601px, min-width: 901px, min-width: 1300px, min-width: 1600px,
max-width: 1599px, max-width: 1299px, max-width: 900px, max-width: 600px

Make this stylesheet still readable and after using this file, dont forget to use beautify after development
Thankyou Whello Developer
*/

/* ==========================================================================
   DESKTOP & LARGE SCREEN (Min-Width)
   ========================================================================== */

/* > MOBILE */
@media all and (min-width: 601px) {
}

/* > TABLET */
@media all and (min-width: 901px) {
}

/* >= DESKTOP & LAPTOP */
@media all and (min-width: 1300px) {
    .admin-bar .has-topbar .video-hero {
        min-height: -webkit-calc(100dvh - 48px);
        min-height: -moz-calc(100dvh - 48px);
        min-height: calc(100dvh - 48px);
    }

    .wh-section.huurders .grid-cards {
        margin-top: 102px;
    }

    .wh-section.onze-impact-in-cijfers .grid-boxs {
        margin-top: 80px;
    }
}

/* >= LARGE DESKTOP */
@media all and (min-width: 1600px) {
}

/* < LARGE DESKTOP */
@media all and (max-width: 1599px) {
}

/* >= DESKTOP & LAPTOP && < LARGE DESKTOP */
@media all and (min-width: 1300px) and (max-width: 1599px) {
}

/* <= LARGE TABLET (Desktop Small / Tablet Landscape) */
@media all and (max-width: 1299px) {
    .wh-section.about-banner .about-banner-content {
        margin-bottom: 32px;
    }

    .wh-section.about-banner figure.about-banner-image,
    .article-header .article-header-image {
        height: auto;
    }

    .video-hero .container:after {
        display: none;
    }

    .wh-section.huurders .content {
        padding-top: 0;
    }

    .wh-section.legal-text h1 {
        margin-bottom: 48px;
    }

    .wh-section.hero-404-thankyou:before {
        display: none;
    }

    .contact-form-container .contact-info-container {
        padding: 24px;
    }

    .contact-form-container .form-container {
        padding: 24px;
    }

    .showcase-logos {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        scrollbar-width: none;
        -webkit-box-pack: start;
        -webkit-justify-content: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        margin: 0 -20px;
        padding: 0 20px;
        gap: 20px;
    }

    .showcase-logos::-webkit-scrollbar {
        display: none;
    }

    .showcase-logos .showcase-logo {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .wh-section.content-media:not(.reverse) .container .content-image,
    .wh-section.content-media.reverse .container .content-image {
        padding-left: 0;
        padding-right: 0;
    }

    .wh-section.huurders:before {
        display: none;
    }

    .hero-banner-aanbod {
        margin-left: -20px;
        margin-right: -20px;
        padding: 0px 20px 48px;
    }

    .hero-banner-aanbod:after {
        display: none;
    }

    .wh-section.aanbod {
        padding-top: 100px;
        padding-bottom: 64px;
    }

    /* Single & Article */
    .article-header .article-header-image {
        margin-top: 48px;
    }

    /* Breadcrumbs */
    .site-breadcrumbs {
        margin-top: 32px;
    }

    /* Section Video Hero */
    .video-hero {
        min-height: -webkit-calc(100dvh + 44px);
        min-height: -moz-calc(100dvh + 44px);
        min-height: calc(100dvh + 44px);
        padding-bottom: 64px;
    }

    .has-topbar .video-hero {
        min-height: -webkit-calc(100dvh + 14px);
        min-height: -moz-calc(100dvh + 14px);
        min-height: calc(100dvh + 14px);
    }
}

/* > MOBILE && <= LARGE TABLET */
@media all and (min-width: 601px) and (max-width: 900px) {
}

/* <= TABLET (Portrait) */
@media all and (max-width: 900px) {
    /* Global Components */
    .wh-section.onze-belangrijkste-impactgebieden .gebieden-cards {
        max-width: 100%;
    }

    .single.single-team .article-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -moz-box-orient: vertical;
        -moz-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .wh-section.impact-en-jaarverslagen-banner .container {
        padding: 24px;
    }
    .single.single-verhalen .article-container {
        margin-top: 48px;
    }

    .gform_wrapper form.mail-banner-aanbod .gfield.gfield--type-email {
        max-width: -webkit-calc(100% - 56px);
        max-width: -moz-calc(100% - 56px);
        max-width: calc(100% - 56px);
    }

    .gform_wrapper
        form.mail-banner-aanbod
        .gform_footer
        .button-link.button-link-primary {
        border: none;
        font-size: 0;
        padding: 0;
    }

    .wh-section.mail-banner .container {
        padding: 24px;
    }

    .wh-section.contact-hero .contact-form-container {
        margin-top: 48px;
    }

    .contact-form-container .contact-info,
    .contact-form-container .form-container {
        width: 100%;
    }

    .contact-form-container .form-container {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        -moz-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .wh-section.content-maps .map-container {
        margin-right: auto;
        max-width: 100%;
    }
    .gebieden-cards {
        gap: 48px;
    }

    .grid-boxs {
        -ms-grid-columns: 1fr 20px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: auto;
        grid-template-rows: auto;
        grid-template-areas: none;
        height: auto;
        gap: 20px;
    }

    .grid-boxs .grid-box {
        grid-area: auto !important;
        min-height: 250px;
    }

    .grid-boxs .grid-box.orange-box {
        padding: 24px;
    }

    .grid-boxs .grid-box.orange-box .big-number {
        font-size: 64px;
    }

    .grid-boxs .grid-box.orange-box h4,
    .grid-boxs .grid-box.orange-box .big-number,
    .grid-boxs .grid-box.orange-box p.description {
        text-align: center;
    }

    .single.single-team .article-container {
        margin-top: 64px;
    }

    .wh-section.documenten-info .accordion-container {
        -ms-grid-columns: (1fr) [1];
        grid-template-columns: repeat(1, 1fr);
    }

    .wh-section.content-media .container {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: "kolom1" "kolom2";
    }

    .wh-section.content-media.reverse .container {
        grid-template-areas: "kolom1" "kolom2";
    }

    .wh-section.jaarverslagen,
    .wh-section.form-type-aanbod,
    .wh-section.ruimte-betekenis,
    .wh-section.wat-we-doen,
    .wh-section.aanbod,
    .wh-section.onderhoud-melden {
        padding: 64px 0px;
    }

    .wh-section.onderhoud-melden .grid-onderhoud {
        -ms-grid-columns: (1fr) [1];
        grid-template-columns: repeat(1, 1fr);
    }

    .archive-listing-wrapper {
        margin-top: 48px;
        margin-bottom: 64px;
    }

    .no-results-listing {
        padding: 24px;
        margin: 64px 0px;
    }

    .archive-listing-wrapper .category-group:not(:first-child) {
        margin-top: 48px;
    }
    .single .wh-section.kemerken-detail,
    .single .wh-section.gallery-carousel {
        margin-top: 64px;
    }

    .single .site-main {
        margin-bottom: 64px;
    }
    .wh-section.archive-filter {
        padding-bottom: 64px;
    }

    .fotografie-container {
        margin-bottom: 64px;
    }

    .fotografie-container .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sticky-bar .sticky-bar-content {
        display: none;
    }

    /* Header Section */
    .header-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -webkit-align-items: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

    .header-section .content {
        max-width: 100%;
    }

    .header-section .button-links {
        margin-left: 0;
        margin-right: auto;
    }

    /* Quotes */
    .quotes-content blockquote {
        font-size: 18px;
    }

    /* Section Video Hero */
    .video-hero:before {
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(19.26%, rgba(0, 0, 0, 0)),
            color-stop(50%, rgba(0, 0, 0, 0.6))
        );
        background: -webkit-linear-gradient(
            top,
            rgba(0, 0, 0, 0) 19.26%,
            rgba(0, 0, 0, 0.6) 50%
        );
        background: -moz-linear-gradient(
            top,
            rgba(0, 0, 0, 0) 19.26%,
            rgba(0, 0, 0, 0.6) 50%
        );
        background: -o-linear-gradient(
            top,
            rgba(0, 0, 0, 0) 19.26%,
            rgba(0, 0, 0, 0.6) 50%
        );
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(19.26%, rgba(0, 0, 0, 0)),
            color-stop(50%, rgba(0, 0, 0, 0.6))
        );
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 19.26%,
            rgba(0, 0, 0, 0.6) 50%
        );
    }

    .video-hero .content {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .video-hero .button-links {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-flow: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    /* Section Content CTA */
    .content-cta .content {
        max-width: 100%;
        text-align: left;
    }

    .content-cta .button-links {
        -webkit-box-pack: start;
        -webkit-justify-content: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
    }

    /* Single Article */
    .single .article-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-flow: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .single .article-container .article-sidebar {
        -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .wh-section.impact-banner .galleries {
        margin-top: 48px;
    }
}

/* <= MOBILE */
@media all and (max-width: 600px) {
    header.article-header {
        --text-4xl: 40px;
    }

    .grid-boxs {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    /* Quotes */
    .quotes-content {
        padding: 40px 24px 24px;
    }

    .quotes-content:before {
        left: 24px;
    }

    .wh-section.form-type-aanbod .quotes-content {
        margin-top: 64px;
    }

    .galleries {
        gap: 8px;
    }

    .galleries .gallery figure {
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
    }
}

@media all and (max-width: 375px) {
    .gform_wrapper form.mail-banner-aanbod {
        margin-bottom: 64px;
    }
}