:root {

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

   /* --headingfont: adelle-sans, sans-serif;*/
    --headingfont: 'bliss', sans-serif;

    --masthead-height: 178px;

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

    --hero-blue:#004265;
    --search-blue:#062539;
    --cta-blue:#082E47;

    --btt-blue:#084D66;

    --footer-1:#191526;
    --footer-2:#09070D;

    --black: #1D1D1D;
    --black2: #110E1A;
    --black3: #121212;

    --grey:         #6F6F6F;

    --orange:       #F18665;
    --red:          #FF537B;
    --yai-red:          #e8114b;
    --yellow:       #E1BC1E;
    --teal:         #19AFB5;

    /*--sky:         #B54F9A;*/
    --sky:         #BB5DA2;



    --purple:       #A78DFC;
    --purple2:       #A78CFF;
    --dark-purple:  #110E19;

    --light-purple:  #C0B8D9;
    --off-white:     #FBFAFF;
    --bg-purple:  #E9E6F2;
    --bg-dark-purple:  #1B1626;

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

    --border-radius:12px;
    --unit:8px;
    --gutter:32px;
    --gutter_big:64px;

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

    --wrapper-margin:128px;

    --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: 1499px) {
     :root {
        --wrapper-margin:64px;
    }
}

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

        --h1_size: 48px;

    }
}

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


        --masthead-height: 80px;

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

        --bodytext_size: 18px;

    }

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

        --h1_size: 40px;



    }

}


@media all and (max-width: 599px) {
    :root {
        --wrapper-margin:16px;
        /*--gutter:16px;*/
        --gutter:24px;

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

        --h1_size:32px;


    }
}