/* Standaard font-grootte voor grote desktops */
html {
    font-size: 18px;
}

/* Grotere desktops, max-width 1920px */
@media only screen and (max-width: 1920px) {
    html {
        font-size: 18px;
    }

}

@media only screen and (max-width: 1850px) {
    html {
        font-size: 17px;
    }

    section.contact .contact-container {
        gap: 100px;
    }
}

@media only screen and (max-width: 1750px) {
    html {
        font-size: 17px;
    }

    section.contact .contact-container {
        gap: 100px;
    }
}

@media only screen and (max-width: 1700px) {
    html {
        font-size: 17px;
    }

    section.contact .contact-container {
        gap: 100px;
    }

}

/* Desktops en laptops, max-width 1600px */
@media (max-width: 1600px) {
    html {
        font-size: 16px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 125px;
    }

    section.contact .social-btns {
        flex-direction: column;
    }

    section.blisssers .blisssers-images {
        gap: 50px;
        flex-wrap: wrap;
        flex-direction: row;
    }

    section.blisssers .blisssers-images .img-container {
        border-radius: 0 100px 0 100px;
        width: 29%;
    }
}

/* Kleinere laptops, max-width 1440px */
@media (max-width: 1440px) {
    html {
        font-size: 15px;
    }

}

/* Tablets in landschap, max-width 1024px */
@media (max-width: 1366px) {
    html {
        font-size: 14px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 125px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }
}

@media only screen and (max-width: 1250px) {
    html {
        font-size: 14px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 100px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 100px;
    }
}

@media only screen and (max-width: 1150px) {
    html {
        font-size: 14px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 100px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 100px;
    }
}

@media only screen and (max-width: 1100px) {
    html {
        font-size: 14px;
    }

    .intro-content {
        padding-top: 15px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
        left: 100px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 100px;
        min-width: 250px;
    }

    section.contact .big-title {
        font-size: 3em;
    }

    section.contact {
        padding: 200px 14%;
    }
}

img.background.mobile {
    display: none;
}

/* Tablets in landschap, max-width 1024px */
@media (max-width: 1024px) {
    html {
        font-size: 14px;
    }

    .mobile.mask {
        display: block;
    }

    img.background.mobile {
        display: block;
    }

    .desktop.mask {
        display: none;
    }

    section.contact .big-title {
        font-size: 2.5em;
    }

    section.blisssers .blisssers-images .img-container {
        width: calc(50% - 50px);
    }
}

@media (max-width: 960px) {
    section.contact .contact-container {
        flex-direction: column-reverse;
        gap: 100px;
    }

    body.single-medewerker .contact-container {
        flex-direction: column;
        gap: 100px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 150px;
    }

    section.contact .social-btns {
        left: auto;
        right: 40px;
    }

    section.contact .contact-container .wpcf7 input[type="submit"] {
        margin-top: 30px;
        width: 250px;
    }

    section.contact form p {
        margin-bottom: 0;
    }

    section.contact {
        padding: 150px 14%;
    }

    section.contact .contact-container .contact-info {
        gap: 20px;
        width: 100%;
    }
}

/* Tablets in portretmodus, max-width 768px */
@media (max-width: 768px) {
    html {
        font-size: 13px;
    }

}

/* Telefoons in landschapmodus, max-width 576px */
@media (max-width: 576px) {
    html {
        font-size: 13px;
    }


    section.contact .contact-container .contact-info>* {
        padding-left: 125px;
    }

    section.contact .social-btns {
        left: 125px;
    }

    section.contact .big-title {
        padding-left: 0px;
        font-size: 2em;
    }

    section.contact .big-title>* {
        display: none;
    }

    section.contact .big-title span.mobiel {
        display: block;
        color: var(--secondary-color);
    }

    a.menu-btn {
        padding: 11px;
        width: 40px;
        height: 40px;
        gap: 5px;
    }
}

/* Zeer kleine apparaten, max-width 480px */
@media (max-width: 480px) {
    html {
        font-size: 12px;
    }

    .front-page .first_row .content-container {
        position: relative;
    }

    .front-page .first_row {
        margin-top: 0px;
    }

    section.contact .big-title {
        font-size: 1.5em;
    }
}

@media (max-width: 370px) {
    section.contact .contact-container .wpcf7 input[type="submit"] {
        width: 100%;
    }

    section.contact .contact-container .contact-info>* {
        min-width: 0px;
    }
}

@media (max-width: 1366px) {
    section.intro .content-container h1.title {
        width: 100%;
        font-size: 50px;
    }
}

@media (min-width: 1024px) {
    .mobile-menu.active {
        display: none;
    }

    a.menu-btn {
        display: none;
    }
}

@media (max-width: 1024px) {
    section.intro .content-container .search-container {
        max-height: 100%;
        display: flex;
        flex-direction: column;
    }

    section.content .content-container .search-container .dropdowns {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    section.content .dropdown-container {
        width: 100%;
    }

    a.search-work {
        margin-left: auto;
    }

    section.intro .content-container .output-form-container a.item-container {
        width: 90%;
    }

    header nav {
        display: none;
    }

    .sub-header {
        display: none;
    }

    .mobile-menu.active {
        display: block;
    }

    a.menu-btn {
        display: flex;
        right: 15px;
        bottom: 15px;
    }
}

/* typografie */
@media (max-width: 768px) {
    a.search-work {
        margin: 0px;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    section.intro .content-container .search-container {
        width: auto;
        display: inline-block;
        margin: 0px;
        gap: 0px;
        padding: 10px;
    }

    section.intro {
        padding: 0px;
        margin: 0px;
    }

    section.intro .content-container h1.title {
        font-size: 1.6em;
        margin: 0;
    }

    .content-container {
        gap: 30px;
        margin: 0 auto;
    }

}

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

    a.red-btn {
        padding: 10px 15px;
    }

    .tabbed-section .tab-content .img-container.two-img img:first-child {
        border-radius: 40px 0px;
    }

    .tabbed-section .tabs {
        flex-direction: column;
        gap: 10px;
        display: inline-block;
    }

    .tabbed-section .tabs-masc {
        position: static;
    }

    .beloftes-container .content .contact .personen {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        gap: 20px;
    }

    .beloftes-container .content .contact {
        min-width: auto;
        width: 100%;
    }

    .beloftes-container .content ul.beloftes {
        width: 100%;
    }

    .output-form-container {
        min-height: auto;
    }

    .activiteiten a.item-container .red-btn {
        padding: 5px 10px;
        border-radius: 0px 5px 0px 5px;
        right: 15px;
    }

    body .red-btn {
        border-radius: 10px 0px 10px 0px;
        font-size: 16px;
    }

    .AET-Layout .img-container::before {
        background: none;
    }

    .tabs-container a.red-btn {
        margin: 25px 0px 0px 0px;
        display: inline-block;
        width: auto;
        padding: 10px 20px;
    }

    a.rev-radius:hover {
        border-radius: 0px 12px 0px 12px;
        background-color: var(--secondary-color);
        color: #fff;
    }

    footer .menu-footer-container {
        padding: 0 5%;
    }

    footer .second-half {
        padding: 46px 15px;
    }

    section.procedure-container .output-container .output-procedure {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    section.procedure-container .procedure-btns .procedure.active,
    section.procedure-container .procedure-btns .procedure {
        border-radius: 0 15px 0 15px;
    }

    a.item-container .name {
        font-size: 12px;
    }

    .row-1 .first,
    .row-1 .last {
        font-size: 10px;
    }

    a.item-container .link-style::after {
        width: 10px;
        height: 10px;
    }

    section.first_row {
        margin: 300px 0px 0px 0px;
        padding: 0px 0px 100px 0px;
    }

    .front-page section.first_row {
        margin: 200px 0px 0px 0px;
        padding-bottom: 0px;
    }

    .output-form-container a.item-container,
    section.vacatures .content-container .output-form-container a.item-container {
        border-radius: 15px;
    }

    .output-form-container a.load-more {
        width: 100%;
        text-align: center;
    }

    section.intro .content-container .output-form-container a.item-container {
        width: 100%;
        padding: 15px;
    }

    .blissser {
        width: 100%;
    }

    .blisssers-verhalen {
        flex-direction: column;
        margin: 100px 12% 0px 12%;
    }

    .single-medewerker section.contact {
        padding: 0px 5%;
        padding-top: 150px;
    }

    .single-medewerker .contact-form {
        width: 100%;
    }

    section.procedure-container .procedure-btns .procedure svg {
        width: 25px;
    }

    section.procedure-container .procedure-btns .procedure {
        padding: 5px;
    }

    section.xs_inner.procedure-container {
        width: 90%;
        margin: 0px 5% 0px 5%;
        padding: 0px;
    }

    section.vacatures .content-container .output-form-container {
        margin: 0 auto;
    }

    section.vacatures .content-container {
        margin: 0 5%;
    }

    section.intro {
        min-height: auto;
    }

    .latest-blogs .blogs-container {
        flex-direction: column;
    }

    section.intro .content-container h1.title {
        font-size: 20px;
    }

    .xs_inner.verhaal {
        flex-direction: column;
        padding: 0px 0px 100px 0px;
    }

    .verhaal .content {
        width: auto;
    }

    .inner,
    .xs_inner {
        margin: 0 auto;
        width: 80%;
    }

    .verhaal .img-container {
        width: 100%;
        z-index: 10;
        transform: none !important;
    }

    .custom-margin {
        z-index: 10;
        position: relative;
    }

    .popup-content {
        background: var(--background-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: none;
        font-weight: bold;
        padding: 0px 10px;
        border-radius: 12px 0 12px 0;
        margin-top: 50px;
        transition: 0.2s ease-in-out, transform 0.3s ease;
        width: 90%;
    }

    .popup-content .big-title {
        font-size: 2.22em;
        line-height: normal;
        font-weight: bold;
        color: #001226;
        padding: 25px 0px 0px 0px;
        margin-bottom: 0px;
    }

    .big-title {
        padding-left: 0px;
        font-size: 2.33em;
    }

    header a.red-btn.job-alert {
        margin-right: 0px;
    }

    header {
        padding: 0px;
    }

    .tekst-container {
        padding: 25px;
        flex-direction: column;
    }

    .tekst-container .left,
    .tekst-container .right {
        width: 100%;
    }

    .inhoud {
        flex-direction: column;
        padding: 10px;
    }

    .inhoud .left,
    .inhoud .right {
        width: 100%;
        display: inline-block
    }

    section.partners .partners-container {
        flex-direction: column;
        display: flex;
    }

    .partners .tekst-container {
        padding: 25px;
    }

    .output-procedure {
        flex-direction: column;
    }

    section.procedure-container .output-container .output-procedure .content {
        width: 100%;
    }

    section.procedure-container .output-container .output-procedure .img-container {
        width: 100%;
        margin: 0px;
    }

    .inner.beloftes-container {
        padding: 25px;
    }

    .beloftes-container .content {
        flex-direction: column;
    }

    .beloftes li {
        margin: 0px;
    }

    .beloftes-container .titel {
        font-size: 20px;
    }

    .verantwoordelijkheden-container ul {
        flex-direction: column;
        width: 100%;
    }

    .verantwoordelijkheden-container ul li:nth-child(1),
    .verantwoordelijkheden-container ul li:nth-child(4),
    .verantwoordelijkheden-container ul li:nth-child(6) {
        width: 100%;
    }

    section.text-intro .content-container .tekst-container {
        padding: 25px;
        border-radius: 25px;
    }

    .latest-blogs .big-title {
        font-size: 20px;
    }

    .verantwoordelijkheden-container .titel {
        font-size: 20px;
        padding: 0px;
    }

    .verantwoordelijkheden-container.inner {
        padding-top: 50px;
        margin-top: 0px;
    }

    .single-vacature section.first_row {
        margin: 200px 0px 0px 0px;
    }

    section.procedure-container .procedure-btns {
        gap: 15px;
    }

    section.procedure-container .big-title {
        margin-bottom: 25px;
        padding-top: 50px;
        font-size: 2.33em;
    }

    section.veel-gestelde-vragen .titel {
        font-size: 2.3em;
    }

    section.veel-gestelde-vragen ul li {
        padding: 30px 25px 30px 45px;
    }

    section.veel-gestelde-vragen ul {
        margin-top: 15px;
        min-height: auto;
    }

    section.inner {
        padding-top: 100px;
    }

    h1 {
        font-size: 20px;
    }

    h1.title {
        font-size: 20px;
    }

    .beloftes-container .content .contact img {
        border-radius: 50px 0 50px 0;
    }
}

@media (min-width: 1920px) {
    .front-page .content-container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

/* Grotere desktops, max-width 1920px */
@media only screen and (max-width: 1920px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1850px) {
    html {
        font-size: 17px;
    }

    section.contact .contact-container {
        gap: 100px;
    }
}


@media only screen and (max-width: 1750px) {
    html {
        font-size: 17px;
    }

    section.contact .contact-container {
        gap: 100px;
    }
}

@media only screen and (max-width: 1700px) {
    html {
        font-size: 17px;
    }

    section.contact .contact-container {
        gap: 100px;
    }
}

/* Desktops en laptops, max-width 1600px */
@media (max-width: 1600px) {
    html {
        font-size: 16px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 125px;
    }

    section.contact .social-btns {
        flex-direction: column;
    }

    section.blisssers .blisssers-images {
        gap: 50px;
        flex-wrap: wrap;
        flex-direction: row;
    }

    section.blisssers .blisssers-images .img-container {
        border-radius: 0 100px 0 100px;
        width: 29%;
    }
}

/* Kleinere laptops, max-width 1440px */
@media (max-width: 1440px) {
    html {
        font-size: 15px;
    }
}

/* Tablets in landschap, max-width 1024px */
@media (max-width: 1366px) {
    html {
        font-size: 14px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 125px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }
}

@media only screen and (max-width: 1250px) {
    html {
        font-size: 14px;
    }

    .intro .content-container {
        width: 80%;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 100px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 100px;
    }
}

@media only screen and (max-width: 1150px) {
    html {
        font-size: 14px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 100px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }


    section.contact .contact-container .contact-info>* {
        padding-left: 100px;
    }
}

@media only screen and (max-width: 1100px) {
    html {
        font-size: 14px;
    }

    section.contact .contact-container .contact-info .adres {
        padding-bottom: 70px;
    }

    section.contact .social-btns {
        right: 30px;
        left: 100px;
        bottom: 30px;
        flex-direction: row;
        gap: 15px;
    }


    section.contact .contact-container .contact-info>* {
        padding-left: 100px;
        min-width: 250px;
    }

    section.contact .big-title {
        font-size: 3em;
    }

    section.contact {
        padding: 200px 14%;
    }
}

/* Tablets in landschap, max-width 1024px */
@media (max-width: 1024px) {
    html {
        font-size: 14px;
    }

    .mobile.mask {
        border-bottom: 5px solid var(--background-color);
        display: block;
    }

    img.background.mobile {
        display: block;
    }

    .desktop.mask {
        display: none;
    }

    section.contact .big-title {
        font-size: 2.5em;
    }

    section.blisssers .blisssers-images .img-container {
        width: calc(50% - 50px);
    }
}

@media (max-width: 750px) {
    .social-btns {
        display: none !important;
    }
}

@media (max-width: 960px) {
    section.contact .contact-container {
        flex-direction: column-reverse;
        gap: 100px;
    }

    body.single-medewerker .contact-container {
        flex-direction: column;
        gap: 100px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 150px;
    }

    section.contact .social-btns {
        left: auto;
        bottom: -10px;
    }

    section.contact .contact-container .wpcf7 input[type="submit"] {
        margin-top: 30px;
        width: 250px;
    }

    section.contact form p {
        margin-bottom: 0;
    }

    section.contact {
        padding: 150px 14%;
    }

    section.contact .contact-container .contact-info {
        gap: 20px;
        width: 80%;
    }


}

/* Tablets in portretmodus, max-width 768px */
@media (max-width: 768px) {
    html {
        font-size: 13px;
    }
}

/* Telefoons in landschapmodus, max-width 576px */
@media (max-width: 576px) {
    html {
        font-size: 13px;
    }

    section.contact .contact-container .contact-info>* {
        padding-left: 125px;
    }

    section.contact .social-btns {
        left: 125px;
    }

    section.contact .big-title {
        padding-left: 0px;
        font-size: 2em;
    }

    section.contact .big-title>* {
        display: none;
    }

    section.contact .big-title span.mobiel {
        display: block;
        color: var(--secondary-color);
    }

    a.menu-btn {
        padding: 11px;
        width: 40px;
        height: 40px;
        gap: 5px;
    }
}

/* Zeer kleine apparaten, max-width 480px */
@media (max-width: 480px) {
    html {
        font-size: 12px;
    }

    .front-page .first_row .content-container {
        position: relative;
    }

    .front-page .first_row {
        margin-top: 0px;
    }

    section.contact .big-title {
        font-size: 1.5em;
    }
}

@media (max-width: 370px) {
    section.contact .contact-container .wpcf7 input[type="submit"] {
        width: 100%;
    }

    section.contact .contact-container .contact-info>* {
        min-width: 0px;
    }
}

@media (max-width: 1366px) {
    section.intro .content-container h1.title {
        width: 100%;
        font-size: 50px;
    }
}

@media (min-width: 1024px) {
    .mobile-menu.active {
        display: none;
    }

    a.menu-btn {
        display: none;
    }
}

@media (max-width: 1024px) {
    section.intro .content-container .search-container {
        max-height: 100%;
        display: flex;
        flex-direction: column;
    }

    section.content .content-container .search-container .dropdowns {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    section.content .dropdown-container {
        width: 100%;
    }

    a.search-work {
        margin-left: auto;
    }

    section.intro .content-container .output-form-container a.item-container {
        width: 90%;
    }

    header nav {
        display: none;
    }

    .sub-header {
        display: none;
    }

    .mobile-menu.active {
        display: block;
    }

    a.menu-btn {
        display: flex;
    }
}

/* typografie */
@media (max-width: 768px) {
    a.search-work {
        margin: 15px 0px;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    section.intro .content-container .search-container {
        width: auto;
        display: inline-block;
        margin: 0px;
        gap: 0px;
        padding: 10px;
    }

    section.intro {
        padding: 0px;
        margin: 0px;
    }

    section.intro .content-container h1.title {
        font-size: 1.6em;
        margin: 0;
    }

    .content-container {
        gap: 30px;
    }

}

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

    /* blogs */
    .other-items,
    .first-two-items,
    .first-three-items {
        padding: 25px 50px;
    }

    .tabs {
        transform: translateX(0px) !important;
    }

    section.veel-gestelde-vragen.inner {
        width: 100%;
        margin: 0;
        max-width: 100%;
    }

    ul.vragen-en-antwoorden {
        width: 100%;
    }

    section.veel-gestelde-vragen ul li .vraag::before {
        width: 20px;
        height: 20px;
        top: 8px;
        right: 20px;
        padding: 0px;
    }

    section.veel-gestelde-vragen ul li {
        padding: 30px 25px 30px 45px;
    }

    .logo-title svg {
        width: 90%;
        padding: 0px 15px;
    }

    /* form afbeelding rechts */
    .form_afbeelding_recht .flex-container {
        flex-direction: column;
    }

    /* oplossingen blokken */
    .blok {
        width: 100%;
        padding: 10px 15px 50px 15px;
    }

    /* tabbed section */
    .tabbed-section .tab-content .img-container.two-img img:first-child {
        display: none;
    }

    .tabbed-section .tab-content .img-container.two-img img:last-child {
        position: relative;
        width: 100%;
    }

    .tabbed-section .tabs {
        flex-direction: column;
        gap: 10px;
        display: inline-block;
    }

    .tabbed-section .tabs-masc {
        position: static;
        width: 100%;
    }

    .col-md-8 {
        width: 90%;
        margin: 0 auto;
    }

    #sliders.desktop {
        display: none;
    }

    .full-width-white {
        background-color: var(--white);
        border-radius: 0px 0px 20px 20px;
        margin: 0 25px;
        padding: 25px;
        box-shadow: var(--normal-BS);
        position: relative;
        z-index: 8;
    }

    .tabbed-section .tabs-container .tab-content .title {
        margin: 0px 0px 10px 0px;
        font-size: 24px;
    }

    .tabbed-section .tabs-container {
        min-height: 825px;
    }

    .tabbed-section .tab-content .img-container.two-img {
        position: relative;
        top: 0;
    }

    .tabbed-section::before {
        content: none;
    }

    .tabbed-section .tabs-container .tab-content {
        flex-direction: column;
    }

    .blok img {
        margin: 15px auto;
        display: block;
    }

    .blok p {
        margin: 0;
    }

    .oplossingen .blok h5 {
        padding: 0px;
    }

    .mask {
        top: 0px;
    }

    section.first_row {
        margin: 300px 0px 0px 0px;
        padding: 0px 0px 100px 0px;
    }

    .front-page section.first_row {
        margin: 200px 0px 0px 0px;
        padding-bottom: 0px;
    }

    .output-form-container a.item-container,
    section.vacatures .content-container .output-form-container a.item-container {
        border-radius: 15px;
    }

    .output-form-container a.load-more {
        width: 100%;
    }

    section.intro .content-container .output-form-container a.item-container {
        width: 100%;
    }

    .blissser {
        width: 100%;
        margin: auto;
    }

    .blisssers-verhalen {
        flex-direction: column;
        margin: 25px auto;
    }

    .single-medewerker section.contact {
        padding: 0px 5%;
        padding-top: 150px;
    }

    .single-medewerker .contact-form {
        width: 100%;
    }

    section.procedure-container .procedure-btns .procedure svg {
        width: 25px;
    }

    section.procedure-container .procedure-btns .procedure {
        padding: 5px;
        flex-grow: 1;
        width: auto;
    }

    section.xs_inner.procedure-container {
        width: 90%;
        margin: 0px 5% 0px 5%;
        padding: 0px;
    }

    section.vacatures .content-container .output-form-container {
        margin: 0;
    }

    section.vacatures .content-container {
        margin: 0 5%;
    }

    section.intro {
        min-height: auto;
    }

    .latest-blogs .blogs-container {
        flex-direction: column;
    }

    section.intro .content-container h1.title {
        font-size: 30px;
    }

    .xs_inner.verhaal {
        flex-direction: column;
        padding: 0px 0px 0px 0px;
    }

    .verhaal .content {
        width: auto;
    }

    .inner,
    .xs_inner {
        flex-flow: column;
    }

    .verhaal .img-container {
        width: 100%;
        z-index: 10;
        transform: none !important;
    }

    .custom-margin {
        z-index: 10;
        position: relative;
    }

    .popup-container.open .popup-content {
        padding: 20px 10px;
    }

    .popup-content {
        background: var(--background-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: none;
        font-weight: bold;
        padding: 0px 10px;
        border-radius: 12px 0 12px 0;
        margin-top: 50px;
        transition: 0.2s ease-in-out, transform 0.3s ease;
        width: 90%;
    }

    .popup-content .big-title {
        font-size: 2.22em;
        line-height: normal;
        font-weight: bold;
        color: #001226;
        padding: 25px 0px 0px 0px;
        margin-bottom: 0px;
    }

    .big-title {
        padding-left: 0px;
        font-size: 2.33em;
    }

    header a.red-btn.job-alert {
        margin-right: 0px;
    }

    header {
        padding: 0 5%;
    }

    .tekst-container {
        padding: 25px;
        flex-direction: column;
    }

    .tekst-container .left,
    .tekst-container .right {
        width: 100%;
    }

    .inhoud {
        flex-direction: column;
        padding: 25px;
    }

    .inhoud.activiteit {
        padding: 25px;
    }

    .inhoud .left,
    .inhoud .right {
        width: 100%;
        display: inline-block
    }

    section.partners .partners-container {
        flex-direction: column;
        display: flex;
    }

    .partners .tekst-container {
        padding: 25px;
    }

    .output-procedure {
        flex-direction: column;
    }

    section.procedure-container .output-container .output-procedure .content {
        width: 100%;
    }

    section.procedure-container .output-container .output-procedure .img-container {
        width: 100%;
        margin: 0px;
    }

    .inner.beloftes-container {
        padding: 25px;
    }

    .beloftes-container .content {
        flex-direction: column;
    }

    .beloftes li {
        margin: 0px;
    }

    .beloftes-container .content ul li {
        left: 0px;
    }

    .beloftes-container .titel {
        font-size: 2.3em;
    }

    .verantwoordelijkheden-container ul {
        flex-direction: column;
        width: 100%;
    }

    .verantwoordelijkheden-container ul li:nth-child(1),
    .verantwoordelijkheden-container ul li:nth-child(4),
    .verantwoordelijkheden-container ul li:nth-child(6) {
        width: 100%;
    }

    section.text-intro .content-container .tekst-container {
        padding: 25px;
        border-radius: 25px;
    }

    .verantwoordelijkheden-container .titel {
        font-size: 2.3em;
    }

    .verantwoordelijkheden-container {
        margin-top: 50px;
    }

    .single-vacature section.first_row {
        margin: 200px 0px 0px 0px;
    }

    section.procedure-container .procedure-btns {
        gap: 5px;
    }

    section.procedure-container .big-title {
        margin-bottom: 25px;
        padding-top: 50px;
        font-size: 2.33em;
    }

    section.veel-gestelde-vragen .titel {
        font-size: 2.3em;
    }

    section.afbeelding_rechts,
    section.afbeelding_links,
    section.kosten_contact_NAV {
        padding: 50px 0px;
    }

    section.intro section {
        padding: 0px;
    }

    section.intro section.drie_kolommen {
        padding-top: 50px;
    }

    section.intro div.intro-content {
        padding: 0px;
        padding-top: 15px;
    }
}

@media (min-width: 1920px) {
    .front-page .content-container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 968px) {
    .oplossingen .first_row .container-flex {
        width: 100%;
    }

    .oplossingen .first_row .usp-container {
        width: 100%;
    }
}