/**
Theme Name: CareersTaxonic
Author: ZoMooij - Ron Mooij
Author URI: https://zomooij.nl
Description: Dit is een Child Theme voor Astra.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: careerstaxonic
Template: astra
*/


:root {
    --accentkleur: #F08100;
    --blauw-donker: #00334A;
    --blauw-lichtst: #F2F7FA;
    --blauw-midden-licht: #EFF4F7;
    --blauw-minder-licht: #F2F7FA;
    --wit: #FFFFFF;
    --tekst-licht: #FFFFFF;
    --tekst-donker: #000000;
    --tekst-schaduw: #00000033;
    --tekst-schaduw-overig: #000000A5;
    --achtergrond: #FFFFFF;
    --grijs-licht: #00000042;
    --focus-accessiblity: var(--accentkleur);
}


/* Gekozen voor Mobile First Styling. */

/*--------------------------------------------------------------
>>> Inhoudsopgave
----------------------------------------------------------------
 1.0 - Huisstijl
 2.0 - Footer
 3.0 - Home
 4.0 - Blok Opdrachtgevers
 5.0 - Wie we zijn
 6.0 - Wat we doen
 7.0 - Linked Data
 8.0 - Pega
 9.0 - Publicaties
 10.0 - Werken bij
 11.0 - Contact
 12.0 - CPT Vacatures
 13.0 - Privacy Beleid
 14.0 - Language switcher / Taalselectie / Polylang
 15.0 - Accessbility / toegankelijkheid
 16.0 - Experimenten


 -------------------------------------------------------------*/


/* Opmaak menu */
#ast-desktop-header .site-navigation ul a {
    text-transform: uppercase;
}
#ast-desktop-header .site-navigation ul a:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}
/* Off Canvas menu (mobiel) */
div.ast-mobile-popup-inner{
    background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%) !important;
    text-transform: uppercase;
}
#ast-hf-mobile-menu{
    background: none !important;
}
#menu-toggle-close{
    border-style: none;
    border-width: 0;
    border-color: var(--blauw-donker);
}

/* Opmaak Hero image, teksten en buttons */
.zm-container-hero-titel {
    display: flex;
    /*align-items: baseline;*/
    /*position: relative;*/
    justify-content: center;
}

.zm-hero-titel {
    /*margin: 0;*/
    position: relative;

    /*font-size: 45px;*/
    color: var(--tekst-licht) !important;
    text-align: center;
    /*line-height: 50px;*/
    /*letter-spacing: 0.45px;*/
    text-shadow: 5px 5px 6px var(--tekst-schaduw);
    opacity: 1;
    margin-bottom: 0 !important;
}

.zm-hero-titel::before, .zm-hero-titel::after {
    content: "";
    position: absolute;
    bottom: 0.25em; /* Pas deze waarde aan als de lijn niet exact is uitgelijnd met de onderkant van de H2-tekst */
    /*left: 0;*/
    /*width: 200px;*/
    /*width: 45vw;*/

    /* Het woord 'Verbindt' is op een mobiel ongeveer 210 pixels breed. Als de width te groot is, verspringt het scherm op mobiel en tablet als je van links naar rechts scrollt. */
    /*width: calc(50vw - 112px);*/
    width: calc((96vw - var(--container-breedte)) / 2);

    height: 3px;
    background-color: var(--tekst-licht);
}

.zm-hero-titel::before{
    left: 0;
    transform: translateX(-101%);
}

.zm-hero-titel::after {
    right: 0;
    transform: translateX(101%);
}


.zm-hero-tekst {
    font-size: 16px;
    color: var(--tekst-licht);
    text-align: center;
    letter-spacing: 0.16px;
    text-shadow: 3px 3px 6px var(--tekst-schaduw);
    opacity: 1;
}
p.zm-hero-tekst {
    margin-bottom: 0px;
}





/* Buttons op home screen naar Pega en Linked Data m*/
.zm-hero-button .uagb-buttons-repeater{
    width: 156px;
    height: 46px;
    /*border-radius: 30px;*/
}

/* Min-height vanwege raar gedrag bij kleine viewports */
@media only screen
and (min-height : 780px) {

    /* De scroll down indicator links onderin het scherm */
    .zm-scroll-down {
        position: absolute !important;
        bottom: -35px;
        left: 0;
        padding-left: 30px;
    }

    .zm-scroll-down p {
        text-transform: uppercase;
    }

    .zm-scroll-down-verticale-lijn {
        margin-top: 0 !important;
        height: 75px;
        border-left: 1px solid var(--accentkleur);
    }

    .zm-scroll-down a:hover,
    .zm-scroll-down a:visited,
    .zm-scroll-down a:focus {
        color: var(--tekst-licht);
        outline: none;
    }
}

/*.zm-scroll-down {*/
/*    align-self: bottom;*/
/*}*/
/*.zm-scroll-down p {*/
/*    text-transform: uppercase;*/
/*}*/

/*.zm-scroll-down-verticale-lijn {*/
/*    margin-top: 0 !important;*/
/*    height: 75px;*/
/*    border-left: 1px solid var(--accentkleur);*/
/*}*/

/* Einde hero sectie */



/* Standaard opmaak veel voorkomende blokken:
    - Tekst links, afbeelding rechts
    - Afbeeldings rechts, tekst links
 */
/*.zm-container-responsive{*/
/*    padding: 10px 20px 10px 20px !important;*/
/*    !*margin: 0;*!*/
/*}*/


/* De oranje lijn links van de kopteksten */
.zm-oranje-lijn {
    position: relative;
    margin-bottom: 16px;
    /*margin: 8px 0 16px 0;*/
}
#vacature-teaser .zm-oranje-lijn {
    margin-bottom: 0px;
}


.zm-oranje-lijn::before {
    content: "";
    position: absolute;
    top: 1.85em; /* Pas deze waarde aan als de lijn niet exact is uitgelijnd met de onderkant van de H2-tekst */
    left: 0;
    /*width: 160px;*/
    width: 40px;
    height: 3px;
    background-color: var(--accentkleur);
    transform: translateX(-103%);
    /*margin-right: 40px;*/
}

.zm-titel-vacature.zm-oranje-lijn::before,
.zm-titel-casus.zm-oranje-lijn::before,
.zm-titel-publicatie.zm-oranje-lijn::before{
    top: 1.9em; /* Pas deze waarde aan als de lijn niet exact is uitgelijnd met de onderkant van de vacature titel*/
}


/*!* Einde oranje lijn aanpassingen voor mobiel *!*/



/*!* Opmaak tekst vlak voor de headings *!*/
.zm-pre-koptekst {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--blauw-donker);
    margin: 0 0 5px 0 !important;
    line-height: 20px;
}
/* Opmaak tekst vlak voor de 'Lees meer' button */
.zm-button-leesmeer,
.wp-block-read-more {
    display: inline-block;
    text-transform: uppercase;
    line-height: 35px;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: var(--blauw-donker);
}
.zm-button-leesmeer img,
.wp-block-read-more img,
.zm-bestuur-leesmeer img{
    margin-left: 6px;
}

/* Opmaak telefoonnummer op "Werken bij" en Vacaturs pagina's */
.zm-taxonic-telefoonnummer {
    color: var(--accentkleur);
}



/* Opmaak voor tablet en groter */
@media only screen
and (min-width: 768px) {

    .zm-hero-tekst {
        font-size: 25px;
        letter-spacing: 0.25px;
    }

    .zm-pre-koptekst {
        font-size: 16px;
        line-height: 20px;
    }

    .zm-titel-vacature.zm-oranje-lijn::before,
    .zm-titel-casus.zm-oranje-lijn::before,
    .zm-titel-publicatie.zm-oranje-lijn::before {
        top: 2.5em;
    }

}

/* Tablet landscape en lagere resoluties tot net onder desktop */
@media only screen
and (min-width: 921px)
and (max-width: 1399px) {

    .zm-container-responsive.zm-afb_links-tekst_rechts {
        flex-direction: column-reverse !important;
    }

    .zm-container-responsive.zm-tekst_links-afb_rechts {
        flex-direction: column !important;
    }

    .zm-container-responsive {
        padding: 10px 20px !important;
        row-gap: 20px;
        column-gap: 20px;
    }

    /*
     * Belangrijk:
     * Als de parent naar column gaat, moeten de directe UAGB child-containers
     * ook weer 100% breed worden. Anders blijven ze op bijvoorbeeld 50% staan,
     * waardoor je veel lelijke witruimte links/rechts krijgt.
     */
    .zm-container-responsive > .wp-block-uagb-container {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    /*
     * Extra vangnet voor blokken die expliciet geforceerd moeten worden.
     */
    .zm-force-tablet-max-width,
    .zm-force-tablet-max-width .wp-block-uagb-container {
        max-width: 100% !important;
        width: 100% !important;
        flex-basis: auto !important;
    }

}

/* Desktop */
@media only screen
and (min-width: 1400px) {

    .zm-container-responsive {
        padding-left: clamp(40px, 10vw, 140px) !important;
        padding-right: clamp(40px, 10vw, 140px) !important;
    }

}


/*!* Opmaak voor tablet en groter *!*/
/*@media only screen*/
/*and (min-width : 768px) {*/

/*    .zm-hero-tekst {*/
/*        font-size: 25px;*/
/*        letter-spacing: 0.25px;*/
/*    }*/

/*    .zm-pre-koptekst {*/
/*        font-size: 16px;*/
/*        line-height: 20px;*/
/*    }*/

/*    !*.zm-hero-titel::before, .zm-hero-titel::after{*!*/
/*    !*    !* Het woord 'Verbindt' is op een tablet ongeveer 280 pixels breed. Als de width te groot is, verspringt het scherm op mobiel en tablet als je van links naar rechts scrollt. *!*!*/
/*    !*    width: calc(50vw - 150px);*!*/
/*    !*}*!*/

/*    !*.zm-oranje-lijn::before {*!*/
/*    !*    transform: translateX(-108%);*!*/
/*    !*}*!*/

/*    !*.zm-container-responsive{*!*/
/*    !*    margin-top: 30px;*!*/
/*    !*}*!*/

/*    .zm-titel-vacature.zm-oranje-lijn::before,*/
/*    .zm-titel-casus.zm-oranje-lijn::before,*/
/*    .zm-titel-publicatie.zm-oranje-lijn::before{*/
/*        top: 2.5em; !* Pas deze waarde aan als de lijn niet exact is uitgelijnd met de onderkant van de vacature titel*!*/
/*    }*/

/*}*/

/*!* rekening houden met Tablet in Landscape stand en lage resolutieschermen. Daarom 1400 px *!*/
/*@media only screen*/
/*and (min-width : 921px)*/
/*and (max-width : 1400px) {*/

/*    !*.zm-container-responsive {*!*/
/*    !*    !*margin-top: 60px;*!*!*/
/*    !*    padding: 10px 20px 10px 20px !important;*!*/
/*    !*}*!*/


/*    .zm-container-responsive.zm-afb_links-tekst_rechts {*/
/*        flex-direction: column-reverse !important;*/
/*    }*/
/*    .zm-container-responsive.zm-tekst_links-afb_rechts {*/
/*        flex-direction: column !important;*/
/*    }*/

/*    .zm-container-responsive {*/
/*        padding: 10px 20px 10px 20px !important;*/
/*        !*padding: 0px !important;*!*/
/*        row-gap: 20px;*/
/*        column-gap: 20px;*/
/*    }*/


/*    !* Corrigeren blokken die op Tablet-Landscape niet 100% breed worden:*/
/*        - Taxonic bestuurders blok en*/
/*        - CPT Vacatures blok "Ben jij"?*/
/*        - Publicaties*/
/*        - Detailscherm medewerker*/
/*     *!*/
/*    !*.wp-block-uagb-container.uagb-block-a0fe6dba,*!*/
/*    .wp-block-uagb-container.uagb-block-d5fd1172,*/
/*    .wp-block-uagb-container.uagb-block-affb0ca6, .wp-block-uagb-container.uagb-block-45b7ae04,*/
/*    .wp-block-uagb-container.uagb-block-611e9cfc, .wp-block-uagb-container.uagb-block-6727d0bc,*/
/*    .wp-block-uagb-container.uagb-block-c24e547b, .wp-block-uagb-container.uagb-block-544d9fef{*/
/*        max-width: 100% !important;*/
/*    }*/

/*    .zm-force-tablet-max-width .wp-block-uagb-container,*/
/*    .zm-force-tablet-max-width{*/
/*        max-width: 100% !important;*/
/*    }*/

/*}*/

/*@media only screen*/
/*and (min-width : 1400px) {*/
/*    .zm-container-responsive {*/
/*        !*margin-top: 60px;*!*/
/*        !*padding: 10px 140px 10px 140px !important;*!*/
/*        padding-left: 140px !important;*/
/*        padding-right: 140px !important;*/
/*    }*/
/*}*/


/* Vanaf ongeveer 1150 klopt de formule voor berekenen niet meer echt. Daarom nieuwe media query */
@media only screen
and (min-width : 1150px) {

    /*.zm-hero-titel::before, .zm-hero-titel::after{*/
    /*    !* Het woord 'Verbindt' is op een tablet ongeveer 400 pixels breed. Als de width te groot is, verspringt het scherm op mobiel en tablet als je van links naar rechts scrollt. *!*/
    /*    width: calc(50vw - 215px);*/
    /*}*/

    .zm-oranje-lijn::before {
        transform: translateX(-108%);
        width: 160px;
    }
}



/* Blockquote Styling (Medewerker pagina)
   Bron: https://codepen.io/cliftwalker/pen/XJaEXY
*/
blockquote{
    font-size: 1.2em;
    width:60%;
    margin:50px auto;
    /*font-family:Open Sans;*/
    font-style:italic;
    color: #555555;
    padding:1.2em 30px 1.2em 75px;
    border-left:8px solid var(--accentkleur);
    line-height:1.6;
    position: relative;
    background:var(--blauw-lichtst);
}

blockquote::before{
    /*font-family:Arial;*/
    content: "\201C";
    font-size:4em;
    position: absolute;
    left: 10px;
    top:-10px;
}

blockquote::after{
    content: '';
}

blockquote span{
    display:block;
    color:var(--accentkleur);
    font-style: normal;
    font-weight: bold;
    margin-top:1em;
}


/*--------------------------------------------------------------
 2.0 - Footer
--------------------------------------------------------------*/
.site-footer{
    /*Blauw-wit verloop in de gehele footer zetten.*/
    background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%);
}

/* opmaak footer teksten */
.site-footer p, .site-footer a {
    color: var(--tekst-licht);
    font-size: 1em;
    line-height: 35px;
    letter-spacing: 0.32px;
}

.site-footer p{
    margin-bottom: 0;
}
.site-footer h2{
    padding-top: 25px;
    line-height: 35px;
    letter-spacing: 0.32px;
    font-size: 20px;
}

/*!*Op mobiel in portrait  stand de bovenste h2 ('Ga naar') geen padding geven*!*/
/*.zm-footer-navigatiemenu h2 {*/
/*    padding-top: 0px;*/
/*}*/

/*.zm-footer-adres h3,*/
/*.zm-footer-contact h3,*/
/*.zm-footer-social h3{*/
/*    padding-top: 25px;*/
/*    line-height: 35px;*/
/*    letter-spacing: 0.32px;*/
/*}*/


/* Taxonic logo links bovenin de footer */
.zm-footer-logo{
    /*width: 300px;*/
    /*height: 147px;*/
    width: 200px;
    height: 100px;
    padding-left: 5px;
    margin-top: 50px;
}

.zm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zm-footer-logo-right {
    width: 100px;
    height: auto;
    /*height: 341px;*/
    padding-right: 50px;
    margin-top: 50px;
}

/*!* Opmaak 2e footer rij  van de Astra footer-bouwer. Omzetten naar grid vanwege de variatie in breedte kolommen. *!*/
/*.ast-builder-grid-row-4-lheavy .ast-builder-grid-row{*/
/*    grid-template-columns: 5fr 1fr 1fr 1fr;*/
/*}*/

/* Dat deel van de footer dat zm-footer-navigatiemenu omvat */
.site-footer-section {
    justify-content: left;
}

/*.zm-footer-navigatiemenu{*/
/*    display: grid;*/
/*    grid-template-columns: 1fr;*/
/*    grid-template-areas: none;*/
/*}*/

/*!* 21-01-2024*/
/*   Ik gebruik nu shortcodes om een meertalige footer te tonen.*/
/*De shortcodes genereren een empty paragraph <p></p> die de layout verstoren. Lukt me niet om dat weg te filteren.*/
/*   Daarom de lege paragraaf maar niet displayen.*/
/* *!*/
/*.ast-builder-html-element > p:empty {*/
/*    display: none;*/
/*}*/


/* Het linkedIn iccon direct achter de tekst 'Volg ons' plaatsen */
/* Let op: MOgelijk niet meer nodig als de 4e footer kolom "Partners" gaat worden */
/*.zm-footer-partners {*/
/*    display: inline-flex;*/
/*    align-items: end;*/
/*    column-gap: 10px;*/
/*}*/

/*!* Wit en zwart omkeren in de footer *!*/
/*.zm-footer-partners .zm-footer-partnerlogo {*/
/*    padding-top: 10px;*/
/*    -webkit-filter: invert(100%);*/
/*    filter:invert(100%)*/
/*}*/

.zm-footer-partners .zm-footer-partnerlogo {
    padding-top: 10px;
}

.zm-footer-partners a:nth-of-type(2) .zm-footer-partnerlogo {
    margin-top: 15px;
}


/* Tablet */
@media only screen
and (min-width : 768px)
/*and (max-width: 1023px){*/
and (max-width: 1340px){

    .zm-footer-logo{
        width: 250px;
        height: auto;
        padding-left: 44px;
    }

    .zm-footer-logo-right {
        width: 160px;
        height: auto;
        padding-right: 50px;
        margin-top: 50px;
    }

    .site-footer .ast-builder-grid-row-container.ast-builder-grid-row-tablet-4-equal .ast-builder-grid-row{
        /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
        column-gap: 10px;
    }

    /*.zm-footer-navigatiemenu{*/
    /*    grid-template-columns: 150px 200px 1fr;*/
    /*    grid-template-areas: "links rechts .";*/
    /*    gap: 50px;*/
    /*}*/

    /*.zm-footer-navigatiemenu-links{*/
    /*    grid-area: links;*/
    /*}*/
    /*.zm-footer-navigatiemenu-rechts{*/
    /*    grid-area: rechts;*/
    /*}*/

    .zm-footer-navigatiemenu h2,
    .zm-footer-adres h2,
    .zm-footer-contact h2,
    .zm-footer-partners h2{
        padding-top: 0px;
        line-height: 35px;
        letter-spacing: 0.32px;
    }
}

@media only screen
/*and (min-width : 1024px) {*/
and (min-width : 1340px) {

    .zm-footer-logo{
        width: 300px;
        height: 147px;
        padding-left: 44px;
    }

    .zm-footer-logo-right {
        width: 160px;
        height: auto;
        padding-right: 50px;
        margin-top: 50px;
    }

    /*!* Opmaak 2e footer rij  van de Astra footer-bouwer. Omzetten naar grid vanwege de variatie in breedte kolommen. *!*/
    /*.ast-builder-grid-row-4-lheavy .ast-builder-grid-row{*/
    /*    grid-template-columns: 3fr 1fr 1fr 1fr;*/
    /*}*/

    /*!* Op desktop voor 'Ga naar'. Footer navigatiemenu over twee kolommen verdelen. Rechts een lege ruimte *!*/
    /*.zm-footer-navigatiemenu{*/
    /*    grid-template-columns: 150px 200px 1fr;*/
    /*    grid-template-areas: "links rechts .";*/
    /*    gap: 50px;*/
    /*}*/

    .zm-footer-navigatiemenu h2,
    .zm-footer-adres h2,
    .zm-footer-contact h2,
    .zm-footer-partners h2{
        padding-top: 0px;
        line-height: 35px;
        letter-spacing: 0.32px;
    }

    /*.zm-footer-navigatiemenu-links{*/
    /*    grid-area: links;*/
    /*}*/
    /*.zm-footer-navigatiemenu-rechts{*/
    /*    grid-area: rechts;*/
    /*    margin-top: 35px;*/
    /*}*/
}

/* Opmaak cookie bar */
#eu-cookie-bar{
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    font-size: 14px !important;
}


/*!*Deze media query omdat anders de "Contact ons" kolom lelijk afbreekt *!*/
/*!* Als deze media query aangaat, veroorzaakt dat allerlei vreemde gevolgen, bv Blok opdrachtgevers dat er vreemd uit ziet.*/
/*   En het blok marktlieder dat de achtergrnd kwijt is.*/
/* *!*/
/*@media only screen*/
/*and (min-width: 1700px){*/

/*    !* Opmaak 2e footer rij  van de Astra footer-bouwer. Omzetten naar grid vanwege de variatie in breedte kolommen. *!*/
/*    .ast-builder-grid-row-4-lheavy .ast-builder-grid-row{*/
/*        grid-template-columns: 5fr 1fr 1fr 1fr;*/
/*    }*/

/*}*/


/*@media only screen*/
/*and (min-width : 1023px)*/
/*and (max-width: 1699px){*/
/*    !* De gehele footer *!*/
/*    .ast-builder-grid-row-4-lheavy .ast-builder-grid-row {*/
/*        grid-template-columns: 10fr 1fr 2fr 1fr;*/
/*    }*/
/*}*/


/*@media only screen*/
/*and (min-width : 1700px) {*/

/*    !* De gehele footer *!*/
/*    .ast-builder-grid-row-4-lheavy .ast-builder-grid-row {*/
/*        grid-template-columns: 5fr 1fr 1fr 1fr;*/
/*    }*/
/*}*/

/*--------------------------------------------------------------
 3.0 - Home
--------------------------------------------------------------*/

/* Blok "Collega aan het woord */
/* Afbeelding binnen de tekst laten zweven, zodat de tekst er links omheen loopt. */
/* Tekstkolom als gewone document-flow gebruiken, zodat de foto kan floaten. */
.zm-verhaalkaart__tekst {
    display: block;
}

/* Spectra zet directe children standaard op 100%; daarom hier expliciet overrulen. */
.zm-verhaalkaart__tekst > figure.wp-block-image.zm-verhaalkaart__foto {
    float: right;
    display: block;
    width: min(36%, 240px) !important;
    min-width: 180px !important;
    max-width: 240px !important;
    margin: 0 0 24px 34px;
    padding: 8px;
    background: #f6f6f6;
    box-sizing: border-box;
}

/* Afbeelding vierkant croppen. */
.zm-verhaalkaart__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 20%;
}

/* Float binnen de tekstkolom netjes afsluiten. */
.zm-verhaalkaart__tekst::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 767px) {
    /* Op mobiel foto boven de tekst tonen. */
    .zm-verhaalkaart__tekst > figure.wp-block-image.zm-verhaalkaart__foto {
        float: none;
        width: min(100%, 230px) !important;
        min-width: 0 !important;
        max-width: 230px !important;
        margin: 0 0 24px;
    }
}


/*Quote */
.zm-quote-medewerker {
    container-type: inline-size;
}

.zm-quote-medewerker .uagb-heading-text,
.zm-quote-medewerker .uagb-heading-text * {
    font-size: clamp(30px, min(7vw, 16.5cqw), 40px) !important;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}



/* Blok "Onderzoek & Business maakt ons de marktleider" */
.zm-blok-taxonic-marktleider {
    background-color: var(--blauw-donker);
}
.zm-blok-taxonic-marktleider p,
.zm-blok-taxonic-marktleider .zm-button-leesmeer {
    color: var(--tekst-licht);
}

/* Breedte van het tekstblok in het blauwe vlak 'Onderzoek & Business maakt ons de marktleider'*/
.wp-block-uagb-container.uagb-is-root-container.zm-blok-taxonic-marktleider-tekstblok{
    width: 100%;
}


@media only screen
and (min-width: 921px)
and (max-width: 1400px) {
    .zm-blok-taxonic-marktleider-tekstblok{
    /*.wp-block-uagb-container.uagb-block-82a6d695 {*/
        width: 50%;
    }
}


/* Vanaf Desktop de afbeelding als achtergrond tonen */
@media only screen
and (min-width: 1400px) {
    .zm-blok-taxonic-marktleider {
        background: url("https://www.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.Blauw_.svg");
        background-size: contain;
        background-repeat: no-repeat;
        min-height: min(70vh, 680px);
        margin-top: -75px !important;
    }

    /* Breedte van het tekstblok in het blauwe vlak 'Onderzoek & Business maakt ons de marktleider'*/
    /*.wp-block-uagb-container.uagb-is-root-container.zm-blok-taxonic-marktleider-tekstblok{*/
    .zm-blok-taxonic-marktleider-tekstblok{
        width: 52% !important;
    }

    .zm-blok-taxonic-marktleider .zm-button-leesmeer {
        text-align: center;
    }


    /* De koptekst en paragraaf tekst schaalbaar maken omdat bij resolutie zo tussen de 1024 en 1400 de inhoud buiten het SVG blok valt */
    .zm-blok-taxonic-marktleider h2 {

        /* https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjEwMjRweCIsIm1heFdpZHRoIjoiMTkyMHB4IiwibWluRm9udFNpemUiOiIxNnB4IiwibWF4Rm9udFNpemUiOiIzNXB4In0%3D */
        font-size: clamp(1rem, -0.3571rem + 2.1205vw, 2.1875rem);

        /*https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjEwMjRweCIsIm1heFdpZHRoIjoiMTkyMHB4IiwibWluRm9udFNpemUiOiIwcHgiLCJtYXhGb250U2l6ZSI6IjgwcHgifQ%3D%3D*/
        /*padding-top: clamp(0rem, -5.7143rem + 8.9286vw, 5rem);*/
        padding-top: clamp(0rem, -7.1429rem + 11.1607vw, 6.25rem);;

        margin-bottom: 0 !important;

    }

    .zm-blok-taxonic-marktleider p {
        /* https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjEwMjRweCIsIm1heFdpZHRoIjoiMTkyMHB4IiwibWluRm9udFNpemUiOiIxMHB4IiwibWF4Rm9udFNpemUiOiIxNnB4In0%3D */
        font-size: clamp(0.625rem, 0.1964rem + 0.6696vw, 1rem) !important;
        margin-bottom: 10px;
    }

}

/* Hover instellen voor Partners Taxonic */
.zm-partners {
    transition: transform 0.2s;
}

.zm-partners:hover {
    transform: translateX(5px);
}

/*--------------------------------------------------------------
 4.0 - Blok Opdrachtgevers
--------------------------------------------------------------*/

.zm-blok-opdrachtgevers {
    background-color: var(--blauw-lichtst);
}

.zm-blok-opdrachtgevers p,
.zm-blok-opdrachtgevers h2{
    margin-bottom: 0px;
}

    /*.zm-random-images {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2, 1fr);*/
/*    grid-template-rows: repeat(3, 1fr);*/
/*    grid-gap: 50px;*/
/*    align-items: center;*/
/*    justify-items: start;*/
/*    max-width: 100%;*/
/*    margin: 0 auto;*/
/*    padding-top: 0;*/
/*}*/

/*.zm-random-images img {*/
/*    max-width: 100%;*/
/*    max-height: 100%;*/
/*    object-fit: contain;*/
/*}*/

/* 2023-11 Caroussel update */
.zm-blok-opdrachtgevers{
    /* Op mobiel en tablet de caroussel pijlen van opdrachtgevers onzichtbaar maken */
    .slick-next, .slick-prev {
        visibility: hidden;
        display: none;
    }
}

/* Opmaak voor tablet en groter */
@media only screen
and (min-width : 768px) {
    /*.zm-blok-opdrachtgevers {*/
    /*    background: url("https://dev.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw.svg");*/
    /*    background-size: cover;*/
    /*    background-repeat: no-repeat;*/
    /*    min-height: 410px;*/
    /*}*/

    /* Op de homepage het bovenste bolletje van het opdrachtgeversblok laten overlappen met de bovenliggende foto */
    /*.page-id-49 .zm-blok-opdrachtgevers{*/
    /*    margin-top: -40px;*/
    /*}*/

    /* Deze CSS werd gebruikt voor het tonen van willekeurige opdrachtgevers. Is nu een carrousel geworden. */
    /*.zm-random-images {*/
    /*    padding-top: 10px;*/
    /*    grid-template-columns: repeat(3, 1fr);*/
    /*    grid-template-rows: repeat(2, 1fr);*/
    /*    grid-gap: 60px;*/
    /*    grid-row-gap: 30px;*/
    /*}*/

}

@media only screen
and (min-width: 1024px) {
    /* Anders schuift zm-blok-opdrachtgevers over de leesmeer knop heen bij smalle schermen */
    .zm-button-leesmeer-extra-margin{
        margin-bottom: 55px;
    }

    .zm-blok-opdrachtgevers{
        /* Alleen op mobiel de caroussel pijlen van opdrachtgevers onzichtbaar maken */
        .slick-next, .slick-prev {
            visibility: visible;
            display: inherit;
            margin-top: -50px;
        }
    }

    .zm-blok-opdrachtgevers {
        background: url("https://www.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw.svg");
        background-size: cover;
        height: 685px;
        background-position: left center;
        /*background-size: contain;*/
        background-repeat: no-repeat;

        /*min-height: 685px;*/
        /* View height berekenen als 685/1080 px. Waarbij 1080 het schermontwerp van Claudia is */
        /*min-height: min(70vh, 685px);*/
    }

    /* 2023-11 Caroussel update */
    .zm-blok-opdrachtgevers{
        background: url("https://www.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw-verlengd.svg");
        height: 485px;
    }

     /*Op de homepage het bovenste bolletje van het opdrachtgeversblok laten overlappen met de bovenliggende foto */
    /*.page-id-1702 .zm-blok-opdrachtgevers{*/
    /*    margin-top: -55px;*/
    /*}*/

    /* Deze CSS werd gebruikt voor het tonen van willekeurige opdrachtgevers. Is nu een carrousel geworden. */
    /*.zm-random-images {*/
    /*    padding-top: calc(63vh/5);*/
    /*    grid-gap: 150px;*/
    /*    grid-row-gap: 30px;*/
    /*}*/
}

/*--------------------------------------------------------------
 5.0 - Wie we zijn
--------------------------------------------------------------*/

.zm-container-taxonic-bestuur h3 {
    /*font-size: 30px;*/
    letter-spacing: 0.9px;
    text-shadow: 3px 3px 6px var(--tekst-schaduw-overig);
    margin-bottom: 0px;
}

.zm-bestuur-leesmeer {
    font-size: 26px;
    color: var(--accentkleur);
    line-height: 25px;
    letter-spacing: 0.84px;
    font-weight: 600;
    filter: drop-shadow(3px 3px 6px #000000A5);
}



.zm-bestuur-leesmeer:hover,
.zm-bestuur-leesmeer:visited{
    color: var(--accentkleur);
}


/* Functie */
.zm-container-taxonic-bestuur p {
    letter-spacing: 0.32px;
    line-height: 25px;
    text-shadow: 3px 3px 6px var(--tekst-schaduw-overig);
    color: var(--wit);
}

/*Voor korte functiebenamingen bij de bestuursleden*/
.zm-container-taxonic-bestuur .zm-grotere-tekst p {
    font-size: 20px;
    letter-spacing: 0.6px;
    line-height: 30px;
}




/* Aanbevelingen */
.zm-container-testimonals{
    background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%);
}
.zm-aanbevelingen-tekst{
    color: var(--tekst-licht) !important;
    width: 90% !important;
}

.zm-container-taxonic-bestuur p {
    padding-bottom: 0px;
    margin-bottom: 0px;
}


/* Gepriegel met de uitlijning van teksten in de te kleine containers */
@media only screen
and (min-width: 768px)
and (max-width: 1024px) {
    .zm-bestuur-leesmeer {
        font-size: 35px;
    }
}


@media only screen
and (min-width: 1024px) {
    .zm-bestuur-leesmeer {
        font-size: 15px;
    }

    .zm-container-taxonic-bestuur h3 {
        padding-bottom: 50px;
    }

    .zm-aanbevelingen-tekst{
        width: 60% !important;
    }
}

@media only screen
and (min-width: 1500px) {
    .zm-bestuur-leesmeer {
        font-size: 18px;
    }
    .zm-container-taxonic-bestuur h3 {
        padding-bottom: 30px;
    }
}


/*@media only screen*/
/*and (min-width: 1800px) {*/
/*    .zm-bestuur-leesmeer {*/
/*        font-size: 20px;*/
/*    }*/
/*    .zm-container-taxonic-bestuur p {*/
/*        padding-bottom: 30px;*/
/*    }*/
/*}*/
@media only screen
and (min-width: 1800px) {
    .zm-bestuur-leesmeer {
        font-size: 20px;
    }

    .zm-container-taxonic-bestuur h3 {
        padding-bottom: 20px !important;
    }
}


@media only screen
and (min-width: 1900px) {
    .zm-bestuur-leesmeer {
        font-size: 24px;
    }
}



/*@media only screen*/
/*and (max-width: 1900px) {*/
/*    .zm-bestuur-leesmeer {*/
/*        font-size: 24px;*/
/*    }*/
/*}*/

/*@media only screen*/
/*and (max-width: 1800px) {*/
/*    .zm-bestuur-leesmeer {*/
/*        font-size: 20px;*/
/*    }*/
/*}*/

/*@media only screen*/
/*and (max-width: 1650px) {*/
/*    .zm-bestuur-leesmeer {*/
/*        font-size: 15px;*/
/*    }*/

/*    .zm-container-taxonic-bestuur p {*/
/*        padding-bottom: 60px;*/
/*    }*/
/*}*/






/*--------------------------------------------------------------
 6.0 - Wat we doen
--------------------------------------------------------------*/

.zm-onze-kennis .zm-button-leesmeer {
    text-align: center;
}

/*--------------------------------------------------------------
 7.0 - Linked Data
--------------------------------------------------------------*/

/*!* Blok "Hoe kun je linked Data inzetten *!*/
.zm-container-inzet-linked-data .uagb-container-inner-blocks-wrap{
    column-gap: 0px !important;
}

.zm-container-inzet-linked-data-links {
        background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%);
}
/*.zm-container-inzet-linked-data-links {*/
/*    background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%);*/
/*    -webkit-mask-image: url("https://dev.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw-rechts.svg#zm_horizontaal_kader");*/
/*    mask-image: url("https://dev.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw-rechts.svg#zm_horizontaal_kader");*/
/*    -webkit-mask-size: contain;*/
/*    mask-size: contain;*/
/*    -webkit-mask-repeat: no-repeat;*/
/*    mask-repeat: no-repeat;*/
/*    -webkit-mask-position: center;*/
/*    mask-position: center;*/
/*}                                                                                                                                                                                                                                                                         Let op: De browserondersteuning voor maskering kan variëren. U kunt de ondersteuning controleren op websites zoals Can I use.*/

/*.zm-container-inzet-linked-data-links {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 150px;*/
/*    !*width: 100%;*!*/
/*    !*height: 100%;*!*/
/*    background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%);*/
/*    mix-blend-mode: screen;*/
/*}*/

.zm-container-inzet-linked-data-links p {
    color: var(--tekst-licht);
    margin: 25px 0 0 0;
}
.zm-container-inzet-linked-data-links ul {
    margin-top: 0;
}
.zm-container-inzet-linked-data-links li {
    color: var(--tekst-licht);
}

.zm-container-inzet-linked-data-rechts {
        background-color: var(--blauw-lichtst);
}

/* Partner TopQuadrant */
.zm-container-topquadrant-logo {
    border-radius: 50%;
}

/* Leer Meer - Taxonic Academy */
/* Breedte van het tekstblok in het blauwe vlak 'Onderzoek & Business maakt ons de marktleider'*/
.wp-block-uagb-container.uagb-is-root-container.zm-container-taxonic-academy{
    width: 100%;
}

.zm-container-taxonic-academy {
    background: radial-gradient(closest-side at 50% 50%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%);
}

.zm-container-taxonic-academy p,
.zm-container-taxonic-academy .zm-button-leesmeer,
.zm-container-taxonic-academy .zm-pre-koptekst {
    color: var(--tekst-licht);
}

/* Cases */
/* Ervoor zorgen dat er geen witruimte tussen de afbeelding en de tekst komt te staan. Het lukte me niet om de gap op een andere manier te verwijderen. */
.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-76eaab69 > .uagb-container-inner-blocks-wrap {
    column-gap: 0px !important;
}
/* Lichtblauwe achtergrond achter de casus. Gaat vooral om de achtergrond van de beschrijving. */
.zm-container-cases .uagb-container-inner-blocks-wrap {
    /*background-color: var(--blauw-midden-licht);*/
}
.zm-groep-casus-beschrijving p{
    margin-top: 0;
}

/* Afbeelding die wordt getoond aan de linkerkant van de cases. Standaard is hier een padding-left van 40px;
 */
.zm-container-cases .wp-block-post-template {
    padding-left: 0px;
}

.zm-container-cases h3 {
    font-size: 20px !important;
}


.zm-cases-list-beschrijving {
    box-shadow: 0px 3px 6px #00000029;
}

/*.zm-cases-list-afbeelding {*/
/*    aspect-ratio: 4/3;*/
/*    width: 400px;*/
/*}*/


@media only screen
and (min-width : 768px) {
    /*.zm-container-inzet-linked-data-balk{*/
    /*    background: url("https://dev.taxonic.com/cms/wp-content/uploads/Balkzijkant.LichtBlauw-rechts.svg") right center;*/
    /*    background-size: contain;*/
    /*    background-repeat: no-repeat;*/
    /*    min-height: 650px;*/
    /*    z-index: -2;*/
    /*}*/
    /*.zm-container-inzet-linked-data {*/
    /*    background: url("https://dev.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw-rechts.svg");*/
    /*    !*background: url("https://dev.taxonic.com/cms/wp-content/uploads/logozijkant.LichtBlauw-rechts.svg") right center;*!*/
    /*    background-size: contain;*/
    /*    background-repeat: no-repeat;*/
    /*    height: 650px;*/
    /*    !*min-height: 650px;*!*/
    /*    !*z-index: -1;*!*/
    /*}*/

    .zm-container-cases h3 {
        font-size: 25px !important;
    }

}


@media only screen
and (min-width: 1024px){
    .zm-container-topquadrant-logo {
        margin-top: 130px;
        border-radius: 50%;
    }

    .zm-container-taxonic-academy-tekstblok{
        width: 52% !important;
    }

    .zm-container-taxonic-academy-tekstblok .zm-pre-koptekst,
    .zm-container-taxonic-academy-tekstblok h2,
    .zm-container-taxonic-academy-tekstblok .zm-button-leesmeer{
        text-align: center;
    }

    .zm-container-cases h3 {
        font-size: 30px !important;
    }
}

@media only screen
and (min-width: 1024px)
and (max-width: 1400px) {
    .zm-container-taxonic-academy-tekstblok{
        width: 100% !important;
    }
}

/*--------------------------------------------------------------
 8.0 - Pega
--------------------------------------------------------------*/

.zm-container-reden-pega{
    background-color: var(--blauw-lichtst);
}
.zm-container-reden-pega p{
    margin-top: 0;
}
.zm-container-reden-pega .zm-pre-koptekst{
    margin-bottom: 0 !important;
}


@media only screen
and (min-width: 1024px) {
    .zm-container-reden-pega {
        /*min-height: 685px;*/
        /* View height berekenen als 685/1080 px. Waarbij 1080 het schermontwerp van Claudia is */
        min-height: min(70vh, 850px);
    }

    .zm-container-reden-pega .zm-pre-koptekst,
    .zm-container-reden-pega h2,
    .zm-container-reden-pega .zm-button-leesmeer{
        text-align: center;
    }
}

@media only screen
and (min-width : 1024px)
and (max-width : 1700px){

    .zm-container-reden-pega {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

/* Opmaak voor grote desktops */
@media only screen
and (min-width : 1700px) {
    .zm-container-reden-pega {
        background: url("https://www.taxonic.com/cms/wp-content/uploads/Balkmetlogozijkant.LichtBlauw.svg");
        background-size: cover;
        /*background-repeat: no-repeat;*/
        /*min-height: 410px;*/
    }
}
/*--------------------------------------------------------------
 9.0 - Publicaties
--------------------------------------------------------------*/

.zm-grid-publicaties .uagb-post__taxonomy {
    color:orange;
    text-transform: uppercase;
}


@media only screen
and (min-width : 1024px){
    .zm-container-nieuws-publicaties {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

}

.zm_container_publicaties_content_after {
    display: flex;
    height: 320px;
    background-color: var(--blauw-lichtst);
}

.zm_container_publicaties_content_after .zm_flex_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: auto;
}

.zm_container_publicaties_content_after .zm_flex_column h2 {
    margin-bottom: 1em;
}

.zm_container_publicaties_content_after .zm_flex_column p {
    margin-bottom: 2em;
}

.zm_publicaties_button {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: var(--accentkleur);
    color: var(--tekst-licht);
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
}

.zm_artikel_download.zm_publicaties_button{
    margin-top: 20px;
    width: fit-content !important;
    /*width: 30% !important;*/
}

.zm_publicaties_button:hover {
    color: var(--accentkleur);
    background-color: var(--tekst-licht);
}


/*.zm-publicatie-categorie,*/
/*.zm-last-modified{*/
/*    display: inline-block;*/
/*    vertical-align: middle;*/
/*}*/
/*.zm-publicatie-categorie {*/
/*    margin-right: 5px; !* Optioneel: voeg wat ruimte toe tussen categorie en datum *!*/
/*}*/

/*.zm-publicatie-categorie_en_datum{*/
/*    display: inline-block;*/
/*}*/

/*--------------------------------------------------------------
 10.0 - Werken bij
--------------------------------------------------------------*/

/*.zm-container-kies-taxonic {*/
/*    background: transparent radial-gradient(closest-side at 50% 82%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%) 0% 0% no-repeat padding-box;*/
/*}*/

.zm-container-kies-taxonic {
    background: transparent radial-gradient(closest-side at 50% 82%, #438396 0%, #2D677C 10%, #1F5269 20%, #16455C 30%, #113D54 40%, #0D384F 50%, #0C354C 60%, #0B344A 70%, #0B334A 80%, #0A334A 90%, #0A334A 100%) 0% 0% no-repeat padding-box;
}

/*.zm-container-kies-taxonic-informatiebox img{*/
/*    width: 60% !important;*/
/*}*/

/*Titel onder de icons in 'Waarom je voor ons kiest'*/
/*.zm-container-kies-taxonic-informatiebox p,*/
.zm-container-kies-taxonic .uagb-ifb-desc{
    color: var(--tekst-licht) !important;
}

.zm-button-leesmeer.zm-centreer{
    text-align: center;
}


.zm-container-ons-team p {
    width: 90% !important;
}

@media only screen
and (min-width: 1024px) {
    .zm-container-ons-team p {
        width: 50% !important;
    }
}
/*--------------------------------------------------------------
 11.0 - Contact
--------------------------------------------------------------*/


.zm-contact-informatiebox{
    line-height: 35px;
}

.zm-contact-informatiebox p::first-line{
    color: var(--accentkleur);
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.4px;
}

/* CF7 Contactformulier */
.zm-cf7-contactformulier input[type="text"],
.zm-cf7-contactformulier input[type="email"],
.zm-cf7-contactformulier input[type="tel"],
.zm-cf7-contactformulier .wpcf7-form-control.wpcf7-file.wpcf7-validates-as-required {
    height: 45px;
    border: none;
    border-radius: 20px;
    margin-bottom: 1.5em;
}

.zm-cf7-contactformulier textarea {
    border: none;
    border-radius: 20px;
    height: 150px;
    width: 100%;
    resize: vertical; /* user can resize vertically, but width is fixed */
    margin-bottom: 1.5em;
}

.zm-cf7-contactformulier input[type="submit"] {
    background-color: var(--accentkleur);
    color: var(--tekst-licht);
    border-radius: 20px;
}

.zm-cf7-contactformulier input[type="submit"]:hover {
    background-color: var(--tekst-licht);
    color: var(--accentkleur);
}

.zm-cf7-contactformulier input.wpcf7-form-control.wpcf7-submit {
    margin-top: 1.5em !important;
}

@media only screen
and (min-width : 768px) {
    /* Verzend button CF7 centreren */
    .zm-cf7-contactformulier input.wpcf7-form-control.wpcf7-submit {
        display: block;
        margin: 0 auto;
    }
}

@media only screen
and (min-width : 1500px){
    .zm-contact-container-responsive{
        padding: 0 350px 0 350px !important;
    }
}


/*--------------------------------------------------------------
 12.0 - CPT Vacatures
 -------------------------------------------------------------*/
/* Opmaak H1 Titels */
.zm-vacature-titel,
.zm-medewerker-titel,
.zm-casus-titel,
.zm-publicatie-titel{
    font-size: 30px;
    letter-spacing: 0.6px;
    line-height: 40px;
}

.zm-vacature-koptekst-typering-sollicitant{
    font-size: 25px;
    color: var(--blauw-donker);
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 16px;
}

.zm-vacature-typering-sollicitant {
    margin-left:30px;
}

.zm-vacature-taxonic-biedt,
.zm-vacature-taxonic-zoekt{
    margin-left:15px;
}

.zm-vacature-typering-sollicitant li::marker {
    content: '✓  ';
    font-size: 1.3em;
    color: var(--accentkleur);
}

/* Opmaak voor tablet en groter */
@media only screen
and (min-width : 768px) {
    .zm-vacature-titel,
    .zm-medewerker-titel,
    .zm-casus-titel,
    .zm-publicatie-titel{
        font-size: 40px;
        letter-spacing: 0.8px;
        line-height: 60px;
    }

    .zm-vacature-taxonic-biedt,
    .zm-vacature-taxonic-zoekt{
        margin-left:25px;
    }

}

/* CF7 Sollicitatieformulier */
.zm-cf7-two-columns {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
}

.zm-inner-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-basis: 100%;
}

.zm-column {
    flex: 1 1 100%;
    padding: 0;
    box-sizing: border-box;
}

.zm-cf7-two-columns input[type="text"],
.zm-cf7-two-columns input[type="email"],
.zm-cf7-two-columns input[type="tel"],
.zm-cf7-two-columns .wpcf7-form-control.wpcf7-file.wpcf7-validates-as-required {
    background-color: var(--blauw-lichtst);
    height: 45px;
    border: none;
    border-radius: 20px;
    margin-bottom: 1.5em;
}

.zm-cf7-two-columns textarea {
    background-color: var(--blauw-lichtst);
    border: none;
    border-radius: 20px;
    height: 150px;
    width: 100%;
    resize: vertical; /* user can resize vertically, but width is fixed */
    margin-bottom: 1.5em;
}

.zm-cf7-two-columns input[type="submit"] {
    background-color: var(--accentkleur);
    color: var(--tekst-licht);
    border-radius: 20px;
}

.zm-cf7-two-columns input[type="submit"]:hover {
    background-color: var(--tekst-licht);
    color: var(--accentkleur);
}

.zm-cf7-two-columns input[type="submit"]{
    margin-top: 1.5em;
}

@media (min-width: 768px) {
    /* Opmaak voor tablet en groter */

    .zm-cf7-two-columns .zm-column {
        flex: 1 1 50%;
        /*padding: 0 10px 0 0;*/
    }

    .zm-inner-flex {
        flex-wrap: nowrap;
    }

    .zm-cf7-two-columns input[type="submit"] {
        display: block;
        margin: 1.5em 39% 0 auto;
    }
}

@media (max-width: 767px) {
    /* Opmaak voor mobiel */
    .zm-cf7-two-columns .zm-column {
        width: 100%;
        padding: 0;
    }

    .zm-inner-flex {
        display: block;
    }
}


/* YouTube blok opmaak  */
.zm-responsive-youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.zm-responsive-youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen
and (min-width: 1024px) {
    .zm-horizontale-lijn {
        /*margin-top: 80px !important;*/
        /*border-style: solid !important;*/
        background-color: var(--accentkleur);
        width: 150px !important;
        color: var(--accentkleur);
    }
}


/*@media (max-width: 991px) {*/
/*    .zm-inner-flex {*/
/*        flex-wrap: wrap;*/
/*    }*/
/*    .zm-column {*/
/*        flex: 1 1 100%;*/
/*        padding-right: 0;*/
/*    }*/
/*}*/



/*!* Placeholder tekst in Chrome, Edge *!*/
/*.zm-cf7-two-columns ::placeholder {*/
/*    color: var(--tekst-donker);*/
/*}*/

/*!* Placeholder tekst in Firefox *!*/
/*.zm-cf7-two-columns ::placeholder,*/
/*.zm-cf7-two-columns input:-moz-placeholder,*/
/*.zm-cf7-two-columns textarea:-moz-placeholder,*/
/*.zm-cf7-two-columns input::-moz-placeholder,*/
/*.zm-cf7-two-columns textarea::-moz-placeholder {*/
/*    color: #000;*/
/*}*/

/*.zm-cf7-two-columns input:-moz-placeholder,*/
/*.zm-cf7-two-columns textarea:-moz-placeholder {*/
/*    opacity: 1;*/
/*}*/

/*.zm-cf7-two-columns input::-moz-placeholder,*/
/*.zm-cf7-two-columns textarea::-moz-placeholder {*/
/*    opacity: 1;*/
/*}*/


/*--------------------------------------------------------------
 13.0 - Privacy Beleid
--------------------------------------------------------------*/
/* De Privacy beleid pagina had last van de transparante header op de andere pagina's
   Geforceerd de header een achtergrond kleur geven.
   De eerste container op die pagina krijgt geen inhoud maar wel een hoogte van 180px op desktop
 */
.page-id-872 #masthead,
.page-id-2357 #masthead{
    background: var(--blauw-donker);
}


/*--------------------------------------------------------------
 14.0 - Language switcher / Taalselectie / Polylang
--------------------------------------------------------------*/

/* Language switcher Polylang */
.lang-item {
    display: inline;
}
.lang-item.current-lang{
    font-weight: 600;
}
.lang-item-first {
    padding-right: 20px;
}
.lang-item a:hover{
    color: var(--wit);
}


/*--------------------------------------------------------------
 15.0 - Accessibility / toegankelijkheid
--------------------------------------------------------------*/

/* Stijl voor focusbare elementen met :focus-visible */
a:focus-visible,
button:focus-visible,
select:focus-visible,
.wpcf7-submit:focus-visible { /* CF7 verzendknop toegevoegd */
    outline: 4px solid var(--focus-accessiblity) !important; /* Duidelijke contrasterende rand */
    outline-offset: 3px; /* Ruimte tussen rand en element */
    box-shadow: 0 0 5px var(--focus-accessiblity) !important; /* Licht gloei-effect voor extra zichtbaarheid */
    /*border-radius: 4px; !* Optioneel: afgeronde hoeken *!*/
}

/* De CF7 invoervelden een minder dikke rand geven omdat die anders door het label heen loopt */
input:focus-visible,
textarea:focus-visible{
    outline: 3px solid var(--focus-accessiblity) !important; /* Duidelijke contrasterende rand */
}


/* Taalkeuzeselector in de header: Alleen bij toetsenbordfocus wordt de taalkeuze wit */
.lang-item a:focus-visible {
    color: var(--wit) !important;
}

/* Zoek-icon: Alleen bij toetsenbordfocus wordt het vergrootglas wit */
.ast-search-menu-icon a:focus-visible .ast-icon {
    color: var(--wit) !important;   /* Voor font-icon */
}

/*!* Houd hover de normale kleur *!*/
/*.ast-search-menu-icon a:hover .ast-icon {*/
/*    color: inherit !important;*/
/*}*/


/*a:focus .lang-item a:hover {*/
/*    color: var(--wit) !important;*/
/*}*/

/*!* Screen reader Hints voor het contactformulier. sr-only is 'Screen reader only'*!*/
/*.sr-only {*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 1px;*/
/*    padding: 0;*/
/*    margin: -1px;*/
/*    overflow: hidden;*/
/*    clip: rect(0, 0, 0, 0);*/
/*    white-space: nowrap;*/
/*    border: 0;*/
/*}*/



@media (min-width: 1024px) {

    /* De Toggle-close van het Off canvas menu blijkt onterecht focusbaar op de desktop met het toetsenbord. Lijkt me een bug*/
    .menu-toggle-close {
        display: none !important; /* Verberg de knop volledig */
    }

}



/*--------------------------------------------------------------
 16.0 - Experimenten
--------------------------------------------------------------*/


/*.zm-link-niet-onderstreept .ast-single-post .entry-content a, .zm-link-niet-onderstreept .ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {*/
/*    text-decoration: none !important;*/
/*}*/

/*.medewerker .ast-post-format-,*/
/*.casus .ast-post-format-,*/
/*.ast-post-format-.single-layout-1 {*/
/*    display: none;*/
/*}*/

.entry-meta {
    display: none;
}

.ast-mobile-popup-content .ast-header-button-1 {
    justify-content:center

}



/*!* Experiment voor een verbeterd opdrachtgevers blok *!*/
/*.zm-flexbox-container {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    background: url('https://dev.taxonic.com/cms/wp-content/uploads/Logozijkant.LichtBlauw.svg');*/
/*    background-position: left center;*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*}*/

/*.zm-rij {*/
/*    background-color: var(--blauw-lichtst);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.zm-kolom {*/
/*    padding: 1em;*/
/*}*/

/*@media (min-width: 768px) {*/
/*    .zm-flexbox-container {*/
/*        flex-direction: row;*/
/*    }*/
/*    .zm-rij {*/
/*        flex-direction: row;*/
/*    }*/
/*}*/