:root {

    /*   --vh: calc(1vh - 0.05px);
   */
    /*    --radius: 20px;*/

    --headingfont:"Bricolage Grotesque", sans-serif;

    --masthead-height: 178px;
    --wrapper-max:1440px;

    --radius: 24px;
    --radius2: 20px;
    --bg:#E8E8E8;

    --black: #000000;
    --caw-black: #000000;

    --yellow: #F0DB10;
    --yellow-lighter: #FDED9A;
    --yellow-lightest: #FFF6CD;

    --green-lightest:#D0EDD8;
    --green-lighter:#9FDBB3;
    --green: #1EB46A;
    --green-darker: #1E5736;
    --green-darkest: #162D1E;
    --green-event: #21844F;


    --blue-lightest:#C8D0E4;
    --blue-lighter:#91A3C9;
    --blue:#035193;
    --blue-darker: #152A48;
    --blue-darkest: #111926;
    --blue-news: #133D6C;

    --shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    --shadow_hover:  rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;


    --focus: 0 0 0 4px var(--yellow);

    --border-radius:12px;

    --unit:8px;
    --gap:32px;

    --gutter:32px;
    --gutter_big:64px;

    --padding:24px;

    --padding_big:64px;

    --headshot-size: 80px;
    --headshot-margin:24px;

    --wrapper-margin:48px;

    --overflow: calc(100% + 2px);
    --transform_centre: translate(-50%,-50%);

    --grid-third:calc((((100% - (var(--gutter) * 11)) / 12) * 4 ) + (var(--gutter) * 3));
    --grid-twothirds:calc((((100% - (var(--gutter) * 11)) / 12) * 8 ) + (var(--gutter) * 7));
    --grid-quarter: calc((((100% - (var(--gutter) * 11)) / 12) * 3 ) + (var(--gutter) * 2));
    --grid-half: calc(50% - (var(--gutter) / 2));
    --grid-sixth: calc((((100% - (var(--gutter) * 11)) / 12) * 2 ) + var(--gutter));


    --cards_third: calc(((100% - var(--gutter)) / 3) - (var(--gutter) * (2 / 3)));
    /*--cards_twothirds: calc(((100% - var(--gutter)) * (2 / 3)) - (var(--gutter) * (2 / 3)));*/
    /*--cards_twothirds: calc(((100% - (var(--gutter) * 2)) * (2 / 3)) - (var(--gutter) * (2 / 3)));*/
    --cards_twothirds: calc((var(--cards_third) * 2) + var(--gutter));
    --cards_half: calc((((100% - var(--gutter)) / 2)) - (var(--gutter)));

    /* --h1_size: 64px;*/
    --h1_size: 56px;
    --bodytext_size: 22px;

    --grad_down: linear-gradient(
            hsl(0, 0%, 0%) 0%,
            hsla(0, 0%, 0%, 0.738) 19%,
            hsla(0, 0%, 0%, 0.541) 34%,
            hsla(0, 0%, 0%, 0.382) 47%,
            hsla(0, 0%, 0%, 0.278) 56.5%,
            hsla(0, 0%, 0%, 0.194) 65%,
            hsla(0, 0%, 0%, 0.126) 73%,
            hsla(0, 0%, 0%, 0.075) 80.2%,
            hsla(0, 0%, 0%, 0.042) 86.1%,
            hsla(0, 0%, 0%, 0.021) 91%,
            hsla(0, 0%, 0%, 0.008) 95.2%,
            hsla(0, 0%, 0%, 0.002) 98.2%,
            hsla(0, 0%, 0%, 0) 100%
    );

    --shadow:  0px 8px 16px 0px rgba(167, 141, 252, 0.20), 0px 0px 16px 0px rgba(0, 0, 0, 0.12);

    --cta-arrow: 0;

}

@media all and (max-width: 1499.98px) {
    :root {
        --wrapper-margin:48px;
    }
}

@media all and (max-width: 1199.98px) {
    :root {
        --wrapper-margin:48px;
        --gutter_big:32px;
        --padding_big:32px;
        --h1_size: 48px;

    }
}

@media all and (max-width: 1023.98px) {
    :root {


        --masthead-height: 80px;

        --headshot-size: 64px;
        --headshot-margin: 16px;

        --bodytext_size: 18px;

    }

}
@media all and (max-width: 899.98px) {
    :root {
        --wrapper-margin:32px;

        --h1_size: 40px;



    }

}


@media all and (max-width: 599.98px) {
    :root {
        --wrapper-margin:16px;

        --gap:24px;
        --gutter:24px;
        --gutter_big:24px;

        --padding:24px;
        --padding_big:24px;

        --radius: 20px;
        --radius2: 16px;

        --h1_size:32px;


    }
}