/* Default styling */
html {
    font-size: 112.5%;
}

body {
    font-family: CircularXXWeb-Regular, sans-serif;
    color: var(--purple-darkest);
    line-height: 1.7;
    /*background-color: var(--white);
    color: var(--grey);
    overflow-x: hidden;
    font-size: 16px;*/
}

.vacaturetekstblok p, .vacaturetekstblok p span, .vacaturetekstblok li, .vacaturetekstblok li span {
    font-family: CircularXXWeb-Regular, sans-serif !important;
    color: var(--purple-darkest) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

strong, b {
    font-family: CircularXXWeb-Bold, sans-serif;
}

p.font-weight-bold {
    font-family: CircularXXWeb-Bold, sans-serif;
}

.fw-black {
    font-family: CircularXXWeb-Black, sans-serif;
}

.form-label {
    font-family: CircularXXWeb-Bold, sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: CircularXXWeb-Bold, sans-serif;
    font-weight: normal;
}

.h1, h1 {
    font-size: 3rem;
    line-height: 1em;
    letter-spacing: normal;
    color: var(--purple-darkest);
    margin-bottom: 50px;
}

.h2, h2 {
    font-size: 2.75rem;
    color: var(--purple-darkest);
    line-height: 1;
}

.doc-vacature h2, .contact-frame h2 {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: -.1em;
    margin-bottom: 0;
}

.contact-frame h2 {
    margin-top: 1em;
    color: var(--white);
}

.h3, h3 {
    font-size: 2.5rem;
    line-height: 1.2em;
    color: var(--purple-darkest);
}

.doc-vacature h3 {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 1em;
    margin-bottom: 0;
}

.vacature-details h2, .vacature-details .h2 {
    font-size: 2.75rem;
    font-family: CircularXXWeb-Black, sans-serif;
    line-height: 1.2;
    word-wrap: break-word;
}

    .h4, h4 {
        color: var(--purple-darkest);
        font-size: 1.25rem;
        line-height: 1;
    }

    .doc-vacature ul {
        padding-left: 1rem;
    }

        .doc-vacature ul li::marker {
            color: var(--green);
        }

    @media (max-width: 991px) {
        html {
            font-size: 100%;
        }

        .h1, h1 {
            font-size: 2.25rem !important;
        }

        .h2, h2 {
            font-size: 2rem !important;
        }

        .vacature-details h2, .vacature-details .h2 {
            font-size: 1.5rem !important;
            font-family: CircularXXWeb-Black, sans-serif;
            line-height: 1.2;
            word-wrap: break-word;
        }

        .h3, h3 {
            font-size: 1.75rem;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        .h1, h1 {
            font-size: 2.75rem !important;
        }

        .h2, h2 {
            font-size: 2.25rem !important;
        }

        .h3, h3 {
            font-size: 2rem !important;
        }
    }

    a {
        text-decoration: none;
    }

        a:hover {
            text-decoration: underline;
        }

    .text-bold {
        font-family: CircularXXWeb-Bold, sans-serif;
    }

    .fw-bold {
        font-family: CircularXXWeb-Bold, sans-serif;
    }

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

    .text-green {
        color: var(--green) !important;
    }

    .text-blue {
        color: var(--purple-darker) !important;
    }



    .fs-7 {
        font-size: 0.9rem;
    }

    @media (max-width: 576px) {
        .fs-7 {
            font-size: 1.0rem;
        }
    }

    .section-header-vacature .header-details {
        font-weight: 700;
    }

    .vacature-details-intro {
        font-size: 1.5rem;
        line-height: 1.6;
    }

    @media (max-width: 991px) {
        .vacature-details-intro {
            font-size: 1.3rem;
        }
    }