:root {
    /* Main Blue #003DA5 */
    --color1: #003DA5;
    /* Secondary Colors*/
    /*  Pale Blue  */
    --color2: #6DA4D8;
    /*  Light Blue  */ /* mockup used light blue #e1ebf5 */
    --color3: #0072CE;
    /*  Navy */
    --color4: #00205B;
    /*  Grey */
    --color5: #D1D1D1;
    /*  Red  */
    --color6: #CE112D;
    /* Accent Colors*/
    /* Accecent Yellow  */
    --colorA1: #FFB600; /* ex: warning content */
    /* Accecent Forest  */
    --colorA2: #0A5A44; /* ex: success content */
    /* Accecent Aqua  */
    --colorA3: #A0E6E1; /* ex: info content */
    /* Accecent Dark Orange  */
    --colorA4: #DC3400; /* ex: Error content */

    --primary-50: #e5ecf6;

    --fontFam1: 'Rethink Sans', sans-serif;
    --fontFam2: 'Newsreader', serif;
    --fontFam3: 'Open Sans', sans-serif; /* san-serifs are better for reading on screens so not using Newsreader unless for print */
    /
}

/* SHARED */
#page_header--topBar {
    background: var(--color4);
    color: white;
    padding-inline: 1rem;
    padding-block: 3px;
}

    #page_header--topBar a {
        color: var(--color2);
    }



#page_header {
    background-color: var(--color1) !important;
    height: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div#siteLogo { margin-bottom: 0!important;}
#page_header a {
    color: white; font-size: 1.8rem; font-weight: 500;
    font-family: var(--fontFam1);
}
    #page_header a:hover,
    #page_header a:focus {
        color: var(--colorA3);
    }
div#siteLogo .ctiRootImg {
    display: flex;
}
div#siteLogo span {
    line-height: 1.2;
    margin-top: 2px;
    font-size: 17px; }
div#siteLogo a {    
    text-decoration: none;
}
div#siteLogo span span {
    display: block;
}
.ctiRootImg img {
    max-width: 50px; margin: 0 6px 0 10px; 
    max-height: fit-content;
}


.hero {
    margin-bottom: 2rem;
    border-radius: 0 5rem;
    box-shadow: 2px 2px #aaa;
}
.intro-text {
    font-size: 1.5rem;
}

body {
    font-size: 18px; }

#main-body {
    max-width: 1200px;
    margin: 5rem auto;
    padding-inline: 20px;
}


h1 { font-size: 5.5rem;
    line-height: 1;
    font-weight: 900;
    color: var(--color1);
    font-family: var(--fontFam1);
}
h2, h3, h4, h5, h6 {
    color: black;
    font-family: var(--fontFam1);
}
h2 {
    font-size: 4rem;
}

h3 {
    font-size: 3rem;
}
h4 {
    font-size: 2.2rem;
}
p, li, td, th, dd, dt, blockquote {
    font-family: var(--fontFam3);
}


footer {
    background: var(--color4);
    color: white;
    padding: 50px; 20px;
    margin-top: 10rem;
}
.logoFooter {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
footer h3 {
    color: white;
    font-size: 1.5rem;
}
.footer--buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
}
    .footer--buttons .button-outline,
    .footer--buttons .button-solid {
        border-radius: 0 15px;
        border: 2px solid white;
        padding: 10px 40px;
    }
    .footer--buttons .button-outline {
        color: white;
    }
    .footer--buttons .button-solid {
        background: white;
    }
.footer--linkRow {
    text-align: center; 
    margin-block:4rem;
}
.footer--linkRow li {
    list-style: none;
    display: inline-block;
    margin-inline: 10px;
}
    .footer--linkRow a {
        color: white; }
footer .copyright {
   text-align: center; }


.footer-wrapper {
    display: grid;
    max-width: 1200px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 5rem auto 10rem auto;
}
    .footer-wrapper ul {
        padding-left: 0;
    }
    .footer-wrapper li {
        list-style: none;
    }
        .footer-wrapper li a {
            color: var(--color2);
        }
 
input {
    border: 1px solid #888 !important;
}
input,
select {
    width: 100%;
    padding: 7px;
}


body .cta-blue {
    color: #9bc7f3 !important;
    border-color: #235b94;
    background: #004a99;
    font-family: var(--fontFam3);
}
    body .cta-blue:hover,
    body .cta-blue:focus {
        color: #004a99 !important;
        border-color: #235b94;
        background: #9bc7f3;
        font-family: var(--fontFam3);
        text-underline-offset: 3px;
        text-decoration: underline;
    }
.cta-cdm {
    padding: .5em .75em;
    font-style: normal;
    text-align: center;
    display: inline-block;
    margin: .3em .05em;
    border: 3px solid;
    text-decoration: none;
    transition: all .2s ease-in-out;
    position: relative;
}



/* ==3) Footer Social Links
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.socialContainer {
    float: right;
    padding-right: 148px;
}

ul.socialLinks {
    /* position: absolute; */
    padding: 0;
    margin: 3rem 0 0 0;
    z-index: 30;
}

    ul.socialLinks li {
        display: inline;
        list-style-image: none;
        margin: 0 5px 0 0;
        vertical-align: top;
    }

.socialLinks img {
    border-style: none;
}

.socialLinkFB, .socialLinkLinkedIn, .socialLinkTwitter, .socialLinkInstagram, ..socialLinkYoutube {
    display: inline-block;
    width: 30px;
    height: 30px;
}

.socialLinks a {
    padding: 15px;
    overflow: hidden;
    display: inline-block;
}

    .socialLinks a:hover,
    .socialLinks a:focus {
        outline: 1px solid aquamarine;
    }

.socialLinkFB {
    background: transparent url("imgs/socialSprite-04.png") no-repeat scroll 0 0;
}

    .socialLinkFB:hover {
        background-position: 0 -30px;
    }

    .socialLinkFB:active {
        background-position: 0 -60px;
    }

.socialLinkTwitter {
    background: transparent url("imgs/socialSprite-04.png") no-repeat scroll -30px 0;
}

    .socialLinkTwitter:hover {
        background-position: -30px -30px;
    }

    .socialLinkTwitter:active {
        background-position: -30px -60px;
    }

.socialLinkLinkedIn {
    background: transparent url("imgs/socialSprite-04.png") no-repeat scroll -60px 0;
}

    .socialLinkLinkedIn:hover {
        background-position: -60px -30px;
    }

    .socialLinkLinkedIn:active {
        background-position: -60px -60px;
    }

.socialLinkInstagram {
    background: transparent url("imgs/socialSprite-04.png") no-repeat scroll -90px 0;
}

    .socialLinkInstagram:hover {
        background-position: -90px -30px;
    }

    .socialLinkInstagram:active {
        background-position: -90px -60px;
    }

.socialLinkYoutube {
    background: transparent url("imgs/socialSprite-04.png") no-repeat scroll -120px 0;
}

    .socialLinkYoutube:hover {
        background-position: -120px -30px;
    }

    .socialLinkYoutube:active {
        background-position: -120px -60px;
    }









/* Grad Forms */
#form_98e6ed6f-6b4d-43a4-8762-541eeac9e54d form {
    display: flex;
    width: 100%;
    flex-direction: column;
}
#form_98e6ed6f-6b4d-43a4-8762-541eeac9e54d div,
.Ambassador form div {
    max-width: 100% !important;
}
#form_98e6ed6f-6b4d-43a4-8762-541eeac9e54d input {
    display: flex;
    width: 100%;
    flex-direction: column;
}
    #form_98e6ed6f-6b4d-43a4-8762-541eeac9e54d input[type="checkbox"] {
        width: 23px;
        height: 18px;
        float: left;
        margin-top: 3px;
    }


/* Undergrad Forms */
#undergradFormWrapper form {
    gap: 20px;
}


 
@media (max-width: 948px) {
    .grid_3, .grid_4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 49% !important;
    }
}

@media (max-width: 480px) {
    .grid_3, .grid_4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

 
}

 


main img {
    max-width: 100%;
}



/* Grid System via Flex */
[class~="grid"], [class*="grid-"], [class*="grid_"] {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    margin: 0 -0.5rem;
}

[class~="col"], [class*="col-"], [class*="col_"] {
    box-sizing: border-box;
    padding: 0 .5rem 1rem;
    max-width: 100%;
}

.feature.no-title,
.no-title.feature {
    padding-top: 1rem !important;
}


[class~="col"], [class*="col_"] {
    flex: 1 1 1px;
}

[class*="col-"] {
    flex: none;
}

[class~="grid"][class~="col"],
[class~="grid"][class*="col-"],
[class~="grid"][class*="col_"],
[class*="grid-"][class~="col"],
[class*="grid-"][class*="col-"],
[class*="grid-"][class*="col_"],
[class*="grid_"][class~="col"],
[class*="grid_"][class*="col-"],
[class*="grid_"][class*="col_"] {
    margin: 0;
    padding: 0;
}

[class*="grid-"][class*="-noGutter"] {
    margin: 0;
}

    [class*="grid-"][class*="-noGutter"] > [class~="col"],
    [class*="grid-"][class*="-noGutter"] > [class*="col-"] {
        padding: 0;
    }

.grid-noBottomMargin [class*="col"] {
    margin-bottom: 0px !important;
}

[class*="grid-"][class*="-noWrap"] {
    flex-wrap: nowrap;
}

[class*="grid-"][class*="-center"] {
    justify-content: center;
}

[class*="grid-"][class*="-right"] {
    justify-content: flex-end;
    align-self: flex-end;
    margin-left: auto;
}

[class*="grid-"][class*="-top"] {
    align-items: flex-start;
}

[class*="grid-"][class*="-middle"] {
    align-items: center;
}

[class*="grid-"][class*="-bottom"] {
    align-items: flex-end;
}

[class*="grid-"][class*="-reverse"] {
    flex-direction: row-reverse;
}

[class*="grid-"][class*="-column"] {
    flex-direction: column;
}

    [class*="grid-"][class*="-column"] > [class*="col-"] {
        flex-basis: auto;
    }

[class*="grid-"][class*="-column-reverse"] {
    flex-direction: column-reverse;
}

[class*="grid-"][class*="-spaceBetween"] {
    justify-content: space-between;
}

[class*="grid-"][class*="-spaceAround"] {
    justify-content: space-around;
}

[class*="grid-"][class*="-equalHeight"] > [class~="col"],
[class*="grid-"][class*="-equalHeight"] > [class*="col-"],
[class*="grid-"][class*="-equalHeight"] > [class*="col_"] {
    display: flex;
    flex-wrap: wrap;
}

    [class*="grid-"][class*="-equalHeight"] > [class~="col"] > *,
    [class*="grid-"][class*="-equalHeight"] > [class*="col-"] > *,
    [class*="grid-"][class*="-equalHeight"] > [class*="col_"] > * {
        flex: 1 0 100%;
    }

[class*="grid-"][class*="-noBottom"] > [class~="col"],
[class*="grid-"][class*="-noBottom"] > [class*="col-"],
[class*="grid-"][class*="-noBottom"] > [class*="col_"] {
    padding-bottom: 0;
}

[class*="col-"][class*="-top"] {
    align-self: flex-start;
}

[class*="col-"][class*="-middle"] {
    align-self: center;
}

[class*="col-"][class*="-bottom"] {
    align-self: flex-end;
}

[class*="col-"][class*="-first"] {
    order: -1;
}

[class*="col-"][class*="-last"] {
    order: 1;
}

[class*="grid-1"] > [class~="col"], [class*="grid-1"] > [class*="col-"] {
    flex-basis: 100%;
    max-width: 100%;
}

[class*="grid-2"] > [class~="col"], [class*="grid-2"] > [class*="col-"] {
    flex-basis: 50%;
    max-width: 50%;
}

[class*="grid-3"] > [class~="col"], [class*="grid-3"] > [class*="col-"] {
    flex-basis: 33.33333%;
    max-width: 33.33333%;
}

[class*="grid-4"] > [class~="col"], [class*="grid-4"] > [class*="col-"] {
    flex-basis: 25%;
    max-width: 25%;
}

.Ambassador .col-4 + .col_xs-12 {
    width: calc(100% - 34%);
}

.Ambassador form * {
    width: 100%;
}

[class*="grid-5"] > [class~="col"], [class*="grid-5"] > [class*="col-"] {
    flex-basis: 20%;
    max-width: 20%;
}

[class*="grid-6"] > [class~="col"], [class*="grid-6"] > [class*="col-"] {
    flex-basis: 16.66667%;
    max-width: 16.66667%;
}

[class*="grid-7"] > [class~="col"], [class*="grid-7"] > [class*="col-"] {
    flex-basis: 14.28571%;
    max-width: 14.28571%;
}

[class*="grid-8"] > [class~="col"], [class*="grid-8"] > [class*="col-"] {
    flex-basis: 12.5%;
    max-width: 12.5%;
}

[class*="grid-9"] > [class~="col"], [class*="grid-9"] > [class*="col-"] {
    flex-basis: 11.11111%;
    max-width: 11.11111%;
}

[class*="grid-10"] > [class~="col"], [class*="grid-10"] > [class*="col-"] {
    flex-basis: 10%;
    max-width: 10%;
}

[class*="grid-11"] > [class~="col"], [class*="grid-11"] > [class*="col-"] {
    flex-basis: 9.09091%;
    max-width: 9.09091%;
}

[class*="grid-12"] > [class~="col"], [class*="grid-12"] > [class*="col-"] {
    flex-basis: 8.33333%;
    max-width: 8.33333%;
}

@media screen and (max-width:80em) {
    [class*="_lg-1"] > [class~="col"], [class*="_lg-1"] > [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    [class*="_lg-2"] > [class~="col"], [class*="_lg-2"] > [class*="col-"] {
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="_lg-3"] > [class~="col"], [class*="_lg-3"] > [class*="col-"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    [class*="_lg-4"] > [class~="col"], [class*="_lg-4"] > [class*="col-"] {
        flex-basis: 25%;
        max-width: 25%;
        flex-basis: 24.9%;
        max-width: 24.9%;
    }

    [class*="_lg-5"] > [class~="col"], [class*="_lg-5"] > [class*="col-"] {
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="_lg-6"] > [class~="col"], [class*="_lg-6"] > [class*="col-"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    [class*="_lg-7"] > [class~="col"], [class*="_lg-7"] > [class*="col-"] {
        flex-basis: 14.28571%;
        max-width: 14.28571%;
    }

    [class*="_lg-8"] > [class~="col"], [class*="_lg-8"] > [class*="col-"] {
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="_lg-9"] > [class~="col"], [class*="_lg-9"] > [class*="col-"] {
        flex-basis: 11.11111%;
        max-width: 11.11111%;
    }

    [class*="_lg-10"] > [class~="col"], [class*="_lg-10"] > [class*="col-"] {
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="_lg-11"] > [class~="col"], [class*="_lg-11"] > [class*="col-"] {
        flex-basis: 9.09091%;
        max-width: 9.09091%;
    }

    [class*="_lg-12"] > [class~="col"], [class*="_lg-12"] > [class*="col-"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }
}


@media screen and (max-width:64em) {
    [class*="_md-1"] > [class~="col"], [class*="_md-1"] > [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    [class*="_md-2"] > [class~="col"], [class*="_md-2"] > [class*="col-"] {
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="_md-3"] > [class~="col"], [class*="_md-3"] > [class*="col-"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    [class*="_md-4"] > [class~="col"], [class*="_md-4"] > [class*="col-"] {
        flex-basis: 25%;
        max-width: 25%;
        flex-basis: 24.9%;
        max-width: 24.9%;
    }

    [class*="_md-5"] > [class~="col"], [class*="_md-5"] > [class*="col-"] {
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="_md-6"] > [class~="col"], [class*="_md-6"] > [class*="col-"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    [class*="_md-7"] > [class~="col"], [class*="_md-7"] > [class*="col-"] {
        flex-basis: 14.28571%;
        max-width: 14.28571%;
    }

    [class*="_md-8"] > [class~="col"], [class*="_md-8"] > [class*="col-"] {
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="_md-9"] > [class~="col"], [class*="_md-9"] > [class*="col-"] {
        flex-basis: 11.11111%;
        max-width: 11.11111%;
    }

    [class*="_md-10"] > [class~="col"], [class*="_md-10"] > [class*="col-"] {
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="_md-11"] > [class~="col"], [class*="_md-11"] > [class*="col-"] {
        flex-basis: 9.09091%;
        max-width: 9.09091%;
    }

    [class*="_md-12"] > [class~="col"], [class*="_md-12"] > [class*="col-"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .split-panel [class*="col-"] {
        padding-bottom: 0;
    }
}


@media screen and (max-width:48em) {
    [class*="_sm-1"] > [class~="col"], [class*="_sm-1"] > [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    [class*="_sm-2"] > [class~="col"], [class*="_sm-2"] > [class*="col-"] {
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="_sm-3"] > [class~="col"], [class*="_sm-3"] > [class*="col-"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    [class*="_sm-4"] > [class~="col"], [class*="_sm-4"] > [class*="col-"] {
        flex-basis: 25%;
        max-width: 25%;
        flex-basis: 24.9%;
        max-width: 24.9%;
    }

    [class*="_sm-5"] > [class~="col"], [class*="_sm-5"] > [class*="col-"] {
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="_sm-6"] > [class~="col"], [class*="_sm-6"] > [class*="col-"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    [class*="_sm-7"] > [class~="col"], [class*="_sm-7"] > [class*="col-"] {
        flex-basis: 14.28571%;
        max-width: 14.28571%;
    }

    [class*="_sm-8"] > [class~="col"], [class*="_sm-8"] > [class*="col-"] {
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="_sm-9"] > [class~="col"], [class*="_sm-9"] > [class*="col-"] {
        flex-basis: 11.11111%;
        max-width: 11.11111%;
    }

    [class*="_sm-10"] > [class~="col"], [class*="_sm-10"] > [class*="col-"] {
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="_sm-11"] > [class~="col"], [class*="_sm-11"] > [class*="col-"] {
        flex-basis: 9.09091%;
        max-width: 9.09091%;
    }

    [class*="_sm-12"] > [class~="col"], [class*="_sm-12"] > [class*="col-"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }
}


@media screen and (max-width:35.5em) {
    [class*="_xs-1"] > [class~="col"], [class*="_xs-1"] > [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    [class*="_xs-2"] > [class~="col"], [class*="_xs-2"] > [class*="col-"] {
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="_xs-3"] > [class~="col"], [class*="_xs-3"] > [class*="col-"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    [class*="_xs-4"] > [class~="col"], [class*="_xs-4"] > [class*="col-"] {
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*="_xs-5"] > [class~="col"], [class*="_xs-5"] > [class*="col-"] {
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="_xs-6"] > [class~="col"], [class*="_xs-6"] > [class*="col-"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    [class*="_xs-7"] > [class~="col"], [class*="_xs-7"] > [class*="col-"] {
        flex-basis: 14.28571%;
        max-width: 14.28571%;
    }

    [class*="_xs-8"] > [class~="col"], [class*="_xs-8"] > [class*="col-"] {
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="_xs-9"] > [class~="col"], [class*="_xs-9"] > [class*="col-"] {
        flex-basis: 11.11111%;
        max-width: 11.11111%;
    }

    [class*="_xs-10"] > [class~="col"], [class*="_xs-10"] > [class*="col-"] {
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="_xs-11"] > [class~="col"], [class*="_xs-11"] > [class*="col-"] {
        flex-basis: 9.09091%;
        max-width: 9.09091%;
    }

    [class*="_xs-12"] > [class~="col"], [class*="_xs-12"] > [class*="col-"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }
}


[class*='grid'] > [class*="col-1"] {
    flex-basis: 8.33333%;
    max-width: 8.33333%;
}

[class*='grid'] > [class*="col-2"] {
    flex-basis: 16.66667%;
    max-width: 16.66667%;
}

[class*='grid'] > [class*="col-3"] {
    flex-basis: 25%;
    max-width: 25%;
    max-width: calc(25% - 1px);
}

[class*='grid'] > [class*="col-4"] {
    flex-basis: calc(33.33333% - 1px);
    max-width: 33.33333%;
    max-width: calc(33.33333% - 1px);
}

[class*='grid'] > [class*="col-5"] {
    flex-basis: calc(41.66667% - 1px);
    max-width: 41.66667%;
    max-width: calc(41.66667% - 1px);
}

[class*='grid'] > [class*="col-6"] {
    flex-basis: calc(50% - 1px);
    max-width: 50%;
    max-width: calc(50% - 1px);
}

[class*='grid'] > [class*="col-7"] {
    flex-basis: calc(58.33333% - 1px);
    max-width: 58.33333%;
}

[class*='grid'] > [class*="col-8"] {
    flex-basis: calc(66.66667% - 1px);
    max-width: 66.66667%;
}

[class*='grid'] > [class*="col-9"] {
    flex-basis: calc(75% - 1px);
    max-width: 75%;
}

[class*='grid'] > [class*="col-10"] {
    flex-basis: calc(83.33333% - 1px);
    max-width: 83.33333%;
}

[class*='grid'] > [class*="col-11"] {
    flex-basis: calc(91.66667% - 1px);
    max-width: 91.66667%;
}

[class*='grid'] > [class*="col-12"] {
    flex-basis: 100%;
    max-width: 100%;
}

[class*="grid"] > [data-push-left*="off-0"] {
    margin-left: 0;
}

[class*="grid"] > [data-push-left*="off-1"] {
    margin-left: 8.33333%;
}

[class*="grid"] > [data-push-left*="off-2"] {
    margin-left: 16.66667%;
}

[class*="grid"] > [data-push-left*="off-3"] {
    margin-left: 25%;
}

[class*="grid"] > [data-push-left*="off-4"] {
    margin-left: 33.33333%;
}

[class*="grid"] > [data-push-left*="off-5"] {
    margin-left: 41.66667%;
}

[class*="grid"] > [data-push-left*="off-6"] {
    margin-left: 50%;
}

[class*="grid"] > [data-push-left*="off-7"] {
    margin-left: 58.33333%;
}

[class*="grid"] > [data-push-left*="off-8"] {
    margin-left: 66.66667%;
}

[class*="grid"] > [data-push-left*="off-9"] {
    margin-left: 75%;
}

[class*="grid"] > [data-push-left*="off-10"] {
    margin-left: 83.33333%;
}

[class*="grid"] > [data-push-left*="off-11"] {
    margin-left: 91.66667%;
}

[class*="grid"] > [data-push-right*="off-0"] {
    margin-right: 0;
}

[class*="grid"] > [data-push-right*="off-1"] {
    margin-right: 8.33333%;
}

[class*="grid"] > [data-push-right*="off-2"] {
    margin-right: 16.66667%;
}

[class*="grid"] > [data-push-right*="off-3"] {
    margin-right: 25%;
}

[class*="grid"] > [data-push-right*="off-4"] {
    margin-right: 33.33333%;
}

[class*="grid"] > [data-push-right*="off-5"] {
    margin-right: 41.66667%;
}

[class*="grid"] > [data-push-right*="off-6"] {
    margin-right: 50%;
}

[class*="grid"] > [data-push-right*="off-7"] {
    margin-right: 58.33333%;
}

[class*="grid"] > [data-push-right*="off-8"] {
    margin-right: 66.66667%;
}

[class*="grid"] > [data-push-right*="off-9"] {
    margin-right: 75%;
}

[class*="grid"] > [data-push-right*="off-10"] {
    margin-right: 83.33333%;
}

[class*="grid"] > [data-push-right*="off-11"] {
    margin-right: 91.66667%;
}

@media screen and (max-width:80em) {
    [class*='grid'] > [class*="_lg-1"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    [class*='grid'] > [class*="_lg-2"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    [class*='grid'] > [class*="_lg-3"] {
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*='grid'] > [class*="_lg-4"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    [class*='grid'] > [class*="_lg-5"] {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    [class*='grid'] > [class*="_lg-6"] {
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*='grid'] > [class*="_lg-7"] {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    [class*='grid'] > [class*="_lg-8"] {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    [class*='grid'] > [class*="_lg-9"] {
        flex-basis: 75%;
        max-width: 75%;
    }

    [class*='grid'] > [class*="_lg-10"] {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    [class*='grid'] > [class*="_lg-11"] {
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    [class*='grid'] > [class*="_lg-12"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    [class*="grid"] > [data-push-left*="_lg-0"] {
        margin-left: 0;
    }

    [class*="grid"] > [data-push-left*="_lg-1"] {
        margin-left: 8.33333%;
    }

    [class*="grid"] > [data-push-left*="_lg-2"] {
        margin-left: 16.66667%;
    }

    [class*="grid"] > [data-push-left*="_lg-3"] {
        margin-left: 25%;
    }

    [class*="grid"] > [data-push-left*="_lg-4"] {
        margin-left: 33.33333%;
    }

    [class*="grid"] > [data-push-left*="_lg-5"] {
        margin-left: 41.66667%;
    }

    [class*="grid"] > [data-push-left*="_lg-6"] {
        margin-left: 50%;
    }

    [class*="grid"] > [data-push-left*="_lg-7"] {
        margin-left: 58.33333%;
    }

    [class*="grid"] > [data-push-left*="_lg-8"] {
        margin-left: 66.66667%;
    }

    [class*="grid"] > [data-push-left*="_lg-9"] {
        margin-left: 75%;
    }

    [class*="grid"] > [data-push-left*="_lg-10"] {
        margin-left: 83.33333%;
    }

    [class*="grid"] > [data-push-left*="_lg-11"] {
        margin-left: 91.66667%;
    }

    [class*="grid"] > [data-push-right*="_lg-0"] {
        margin-right: 0;
    }

    [class*="grid"] > [data-push-right*="_lg-1"] {
        margin-right: 8.33333%;
    }

    [class*="grid"] > [data-push-right*="_lg-2"] {
        margin-right: 16.66667%;
    }

    [class*="grid"] > [data-push-right*="_lg-3"] {
        margin-right: 25%;
    }

    [class*="grid"] > [data-push-right*="_lg-4"] {
        margin-right: 33.33333%;
    }

    [class*="grid"] > [data-push-right*="_lg-5"] {
        margin-right: 41.66667%;
    }

    [class*="grid"] > [data-push-right*="_lg-6"] {
        margin-right: 50%;
    }

    [class*="grid"] > [data-push-right*="_lg-7"] {
        margin-right: 58.33333%;
    }

    [class*="grid"] > [data-push-right*="_lg-8"] {
        margin-right: 66.66667%;
    }

    [class*="grid"] > [data-push-right*="_lg-9"] {
        margin-right: 75%;
    }

    [class*="grid"] > [data-push-right*="_lg-10"] {
        margin-right: 83.33333%;
    }

    [class*="grid"] > [data-push-right*="_lg-11"] {
        margin-right: 91.66667%;
    }

    [class*='grid'] [class*="_lg-first"] {
        order: -1;
    }

    [class*='grid'] [class*="_lg-last"] {
        order: 1;
    }
}


@media screen and (max-width:64em) {
    .hero {
        margin-bottom: 0rem;
    }
        h1 {
        font-size: 4.5rem;
    }

    h2 {
        font-size: 3.3rem;
        line-height: 1.1;
    }

    h3 {
        font-size: 2.6rem;
    }



    [class*='grid'] > [class*="_md-1"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    [class*='grid'] > [class*="_md-2"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    [class*='grid'] > [class*="_md-3"] {
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*='grid'] > [class*="_md-4"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    [class*='grid'] > [class*="_md-5"] {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    [class*='grid'] > [class*="_md-6"] {
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*='grid'] > [class*="_md-7"] {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    [class*='grid'] > [class*="_md-8"] {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    [class*='grid'] > [class*="_md-9"] {
        flex-basis: 75%;
        max-width: 75%;
    }

    [class*='grid'] > [class*="_md-10"] {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    [class*='grid'] > [class*="_md-11"] {
        flex-basis: 91.66667%;
        max-width: 91.66667%
    }

    [class*='grid'] > [class*="_md-12"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    [class*="grid"] > [data-push-left*="_md-0"] {
        margin-left: 0;
    }

    [class*="grid"] > [data-push-left*="_md-1"] {
        margin-left: 8.33333%;
    }

    [class*="grid"] > [data-push-left*="_md-2"] {
        margin-left: 16.66667%;
    }

    [class*="grid"] > [data-push-left*="_md-3"] {
        margin-left: 25%;
    }

    [class*="grid"] > [data-push-left*="_md-4"] {
        margin-left: 33.33333%;
    }

    [class*="grid"] > [data-push-left*="_md-5"] {
        margin-left: 41.66667%;
    }

    [class*="grid"] > [data-push-left*="_md-6"] {
        margin-left: 50%;
    }

    [class*="grid"] > [data-push-left*="_md-7"] {
        margin-left: 58.33333%;
    }

    [class*="grid"] > [data-push-left*="_md-8"] {
        margin-left: 66.66667%;
    }

    [class*="grid"] > [data-push-left*="_md-9"] {
        margin-left: 75%;
    }

    [class*="grid"] > [data-push-left*="_md-10"] {
        margin-left: 83.33333%;
    }

    [class*="grid"] > [data-push-left*="_md-11"] {
        margin-left: 91.66667%;
    }

    [class*="grid"] > [data-push-right*="_md-0"] {
        margin-right: 0;
    }

    [class*="grid"] > [data-push-right*="_md-1"] {
        margin-right: 8.33333%;
    }

    [class*="grid"] > [data-push-right*="_md-2"] {
        margin-right: 16.66667%;
    }

    [class*="grid"] > [data-push-right*="_md-3"] {
        margin-right: 25%;
    }

    [class*="grid"] > [data-push-right*="_md-4"] {
        margin-right: 33.33333%;
    }

    [class*="grid"] > [data-push-right*="_md-5"] {
        margin-right: 41.66667%;
    }

    [class*="grid"] > [data-push-right*="_md-6"] {
        margin-right: 50%;
    }

    [class*="grid"] > [data-push-right*="_md-7"] {
        margin-right: 58.33333%;
    }

    [class*="grid"] > [data-push-right*="_md-8"] {
        margin-right: 66.66667%;
    }

    [class*="grid"] > [data-push-right*="_md-9"] {
        margin-right: 75%;
    }

    [class*="grid"] > [data-push-right*="_md-10"] {
        margin-right: 83.33333%;
    }

    [class*="grid"] > [data-push-right*="_md-11"] {
        margin-right: 91.66667%;
    }

    [class*='grid'] [class*="_md-first"] {
        order: -1;
    }

    [class*='grid'] [class*="_md-last"] {
        order: 1;
    }
}


/* ~770px min */
@media screen and (min-width:48.1em) {
    .col_lg-8 {
        flex-basis: 66% !important;
    }

    .col_xl-4 {
        flex-basis: calc(34% - 2px) !important;
    }
}

/* ~768px max */
@media screen and (max-width:48em) {
    [class*='grid'] > [class*="_sm-1"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%
    }

    [class*='grid'] > [class*="_sm-2"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%
    }

    [class*='grid'] > [class*="_sm-3"] {
        flex-basis: 25%;
        max-width: 25%
    }

    [class*='grid'] > [class*="_sm-4"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%
    }

    [class*='grid'] > [class*="_sm-5"] {
        flex-basis: 41.66667%;
        max-width: 41.66667%
    }

    [class*='grid'] > [class*="_sm-6"] {
        flex-basis: 50%;
        max-width: 50%
    }

    [class*='grid'] > [class*="_sm-7"] {
        flex-basis: 58.33333%;
        max-width: 58.33333%
    }

    [class*='grid'] > [class*="_sm-8"] {
        flex-basis: 66.66667%;
        max-width: 66.66667%
    }

    [class*='grid'] > [class*="_sm-9"] {
        flex-basis: 75%;
        max-width: 75%
    }

    [class*='grid'] > [class*="_sm-10"] {
        flex-basis: 83.33333%;
        max-width: 83.33333%
    }

    [class*='grid'] > [class*="_sm-11"] {
        flex-basis: 91.66667%;
        max-width: 91.66667%
    }

    [class*='grid'] > [class*="_sm-12"] {
        flex-basis: 100%;
        max-width: 100%
    }

    [class*="grid"] > [data-push-left*="_sm-0"] {
        margin-left: 0;
    }

    [class*="grid"] > [data-push-left*="_sm-1"] {
        margin-left: 8.33333%;
    }

    [class*="grid"] > [data-push-left*="_sm-2"] {
        margin-left: 16.66667%;
    }

    [class*="grid"] > [data-push-left*="_sm-3"] {
        margin-left: 25%;
    }

    [class*="grid"] > [data-push-left*="_sm-4"] {
        margin-left: 33.33333%;
    }

    [class*="grid"] > [data-push-left*="_sm-5"] {
        margin-left: 41.66667%;
    }

    [class*="grid"] > [data-push-left*="_sm-6"] {
        margin-left: 50%;
    }

    [class*="grid"] > [data-push-left*="_sm-7"] {
        margin-left: 58.33333%;
    }

    [class*="grid"] > [data-push-left*="_sm-8"] {
        margin-left: 66.66667%;
    }

    [class*="grid"] > [data-push-left*="_sm-9"] {
        margin-left: 75%;
    }

    [class*="grid"] > [data-push-left*="_sm-10"] {
        margin-left: 83.33333%;
    }

    [class*="grid"] > [data-push-left*="_sm-11"] {
        margin-left: 91.66667%;
    }

    [class*="grid"] > [data-push-right*="_sm-0"] {
        margin-right: 0;
    }

    [class*="grid"] > [data-push-right*="_sm-1"] {
        margin-right: 8.33333%;
    }

    [class*="grid"] > [data-push-right*="_sm-2"] {
        margin-right: 16.66667%;
    }

    [class*="grid"] > [data-push-right*="_sm-3"] {
        margin-right: 25%;
    }

    [class*="grid"] > [data-push-right*="_sm-4"] {
        margin-right: 33.33333%;
    }

    [class*="grid"] > [data-push-right*="_sm-5"] {
        margin-right: 41.66667%;
    }

    [class*="grid"] > [data-push-right*="_sm-6"] {
        margin-right: 50%;
    }

    [class*="grid"] > [data-push-right*="_sm-7"] {
        margin-right: 58.33333%;
    }

    [class*="grid"] > [data-push-right*="_sm-8"] {
        margin-right: 66.66667%;
    }

    [class*="grid"] > [data-push-right*="_sm-9"] {
        margin-right: 75%;
    }

    [class*="grid"] > [data-push-right*="_sm-10"] {
        margin-right: 83.33333%;
    }

    [class*="grid"] > [data-push-right*="_sm-11"] {
        margin-right: 91.66667%;
    }

    [class*='grid'] [class*="_sm-first"] {
        order: -1;
    }

    [class*='grid'] [class*="_sm-last"] {
        order: 1;
    }
}


@media screen and (max-width:35.5em) {

    h1 {
        font-size: 3.8rem;
    }

    .intro-text { 
        font-size: 1.2rem; }

    [class*='grid'] > [class*="_xs-1"] {
        flex-basis: 8.33333%;
        max-width: 8.33333%
    }

    [class*='grid'] > [class*="_xs-2"] {
        flex-basis: 16.66667%;
        max-width: 16.66667%
    }

    [class*='grid'] > [class*="_xs-3"] {
        flex-basis: 25%;
        max-width: 25%
    }

    [class*='grid'] > [class*="_xs-4"] {
        flex-basis: 33.33333%;
        max-width: 33.33333%
    }

    [class*='grid'] > [class*="_xs-5"] {
        flex-basis: 41.66667%;
        max-width: 41.66667%
    }

    [class*='grid'] > [class*="_xs-6"] {
        flex-basis: 50%;
        max-width: 50%
    }

    [class*='grid'] > [class*="_xs-7"] {
        flex-basis: 58.33333%;
        max-width: 58.33333%
    }

    [class*='grid'] > [class*="_xs-8"] {
        flex-basis: 66.66667%;
        max-width: 66.66667%
    }

    [class*='grid'] > [class*="_xs-9"] {
        flex-basis: 75%;
        max-width: 75%
    }

    [class*='grid'] > [class*="_xs-10"] {
        flex-basis: 83.33333%;
        max-width: 83.33333%
    }

    [class*='grid'] > [class*="_xs-11"] {
        flex-basis: 91.66667%;
        max-width: 91.66667%
    }

    [class*='grid'] > [class*="_xs-12"] {
        flex-basis: 100%;
        max-width: 100%
    }

    [class*="grid"] > [data-push-left*="_xs-0"] {
        margin-left: 0
    }

    [class*="grid"] > [data-push-left*="_xs-1"] {
        margin-left: 8.33333%
    }

    [class*="grid"] > [data-push-left*="_xs-2"] {
        margin-left: 16.66667%
    }

    [class*="grid"] > [data-push-left*="_xs-3"] {
        margin-left: 25%
    }

    [class*="grid"] > [data-push-left*="_xs-4"] {
        margin-left: 33.33333%
    }

    [class*="grid"] > [data-push-left*="_xs-5"] {
        margin-left: 41.66667%
    }

    [class*="grid"] > [data-push-left*="_xs-6"] {
        margin-left: 50%
    }

    [class*="grid"] > [data-push-left*="_xs-7"] {
        margin-left: 58.33333%
    }

    [class*="grid"] > [data-push-left*="_xs-8"] {
        margin-left: 66.66667%
    }

    [class*="grid"] > [data-push-left*="_xs-9"] {
        margin-left: 75%
    }

    [class*="grid"] > [data-push-left*="_xs-10"] {
        margin-left: 83.33333%
    }

    [class*="grid"] > [data-push-left*="_xs-11"] {
        margin-left: 91.66667%
    }

    [class*="grid"] > [data-push-right*="_xs-0"] {
        margin-right: 0
    }

    [class*="grid"] > [data-push-right*="_xs-1"] {
        margin-right: 8.33333%
    }

    [class*="grid"] > [data-push-right*="_xs-2"] {
        margin-right: 16.66667%
    }

    [class*="grid"] > [data-push-right*="_xs-3"] {
        margin-right: 25%
    }

    [class*="grid"] > [data-push-right*="_xs-4"] {
        margin-right: 33.33333%
    }

    [class*="grid"] > [data-push-right*="_xs-5"] {
        margin-right: 41.66667%
    }

    [class*="grid"] > [data-push-right*="_xs-6"] {
        margin-right: 50%
    }

    [class*="grid"] > [data-push-right*="_xs-7"] {
        margin-right: 58.33333%
    }

    [class*="grid"] > [data-push-right*="_xs-8"] {
        margin-right: 66.66667%
    }

    [class*="grid"] > [data-push-right*="_xs-9"] {
        margin-right: 75%
    }

    [class*="grid"] > [data-push-right*="_xs-10"] {
        margin-right: 83.33333%
    }

    [class*="grid"] > [data-push-right*="_xs-11"] {
        margin-right: 91.66667%
    }

    [class*='grid'] [class*="_xs-first"] {
        order: -1
    }

    [class*='grid'] [class*="_xs-last"] {
        order: 1
    }
}


[class*="col-"]:not([class*="grid"]):not([class*="col-0"]):not(class="col-thirds"):not(class="col-2-thirds") {
    display: block
}

[class~="grid"][class*="col-"]:not([class*="col-0"]) {
    display: flex
}

[class*="col-"][class*="col-0"] {
    display: none
}


@media screen and (max-width:80em) {
    [class*="grid"] > :not([class*="_lg-0"]) {
        display: block
    }

    [class*="grid"]:not([class*="_lg-0"]) {
        display: flex
    }

    [class*="grid"] > [class*="_lg-0"],
    [class*="grid"][class*="-equalHeight"] > [class*="_lg-0"] {
        display: none
    }
}




@media screen and (max-width:35.5em) {
    [class*="grid"] > :not([class*="_xs-0"]) {
        display: block
    }

    [class*="grid"]:not([class*="_xs-0"]) {
        display: flex
    }

    [class*="grid"] > [class*="_xs-0"],
    [class*="grid"][class*="-equalHeight"] > [class*="_xs-0"] {
        display: none
    }
}






/* MODAL Popup */
/* The modal section is added via JS */

.modal {
    max-width: 80vw;
    max-height: 90vh;
    background-color: #F7F0E8;
    margin: 0 auto;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 5%;
    bottom: 5%;
    z-index: 10;
    border: 1px solid #000;
    box-shadow: 0 .25em .5em #000;
    transition: opacity .5s ease-out, visibility 0s ease-out 1s, transform .5s ease-out .5s;
    backface-visibility: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(.8) translate3d(0,0,0);
    pointer-events: none;
}

    .modal[aria-hidden="false"] {
        position: fixed;
        transition-delay: 0s,0s, 0s;
        opacity: 1;
        visibility: visible;
        transform: scale(1) translate3d(0,0,0);
        pointer-events: auto;
    }




/* Light box properties */

.modal_lightbox {
    text-indent: -200em;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /* places the modal overlay between the main page (0) and the modal dialog (10) */
    z-index: 5;
    cursor: pointer;
    transition: opacity .5s ease-out, visibility 0s ease-out .5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal_lightbox-on {
    transition-delay: 0s, 0s;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    .modal_lightbox-on:hover {
        /* Stolen from trickle.js. Under consideration. SVGs will not work here */
        cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANpJREFUOBGNkz0KAjEQhYPYWXgCKws7LcXWyt7WG4i9jegBvIJ4AvEyXsRCsBDiN0sGkiE/O/A2O9n3viS7rPPeb9ETrVzPwrtHDzR1XF5I6oPWLQaeq5hDXQRw0I6xCuF5HH7Tz7oFuTkhrSyEhza8THaLoQhphpWUg/QOFyA/AFpy5nTbGrIjxvg4AiiGBzYc+rGZH9KPzFy+ZbX4bX9l+VDZr5NQMMbhbtvMxccpQ3JhpTchtXATQviItIpvW0CY7HHm8c9UDRd2chbABt3RQk2tEe8O3dDkD4JQ4iOR7BMpAAAAAElFTkSuQmCC"), pointer;
    }


/* Modal title and description */

.modal_title,
.modal_desc {
    position: absolute;
    top: 5px;
    left: -200em;
    background-color: #fff;
    color: #000;
    text-shadow: 0 0 0 #fff;
    font-size: 20px;
    padding: 0.125em .25em;
    /* Tesco requirement
  font-family: Tesco_W_Rg, sans-serif; */
    margin: 0;
}

    .modal_title:focus,
    .modal_desc:focus {
        left: 5px;
    }

[aria-hidden="false"] .modal_title {
    transition: opacity .5s ease-out 3s;
    opacity: 0;
}

.modal_title,
.modal_title:focus {
    opacity: 1;
    transition: opacity .5s ease-out;
}


/* The iframe */

.modal_iframe {
    transition: opacity .5s ease-out, visibility 0s ease-out 1s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal_iframe-on {
    transition: opacity .8s ease-out, visibility 0s ease-out 0s;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

[aria-hidden="true"] .modal_iframe {
    display: none;
}

[aria-hidden="false"] .modal_iframe {
    display: block;
}


/* The modal pop-ups close button, appears last in the modal, but is moved visually to the top right of the pop-up */

.modal_lnk-close {
    cursor: pointer;
    position: absolute;
    top: -20px;
    right: -20px;
    border: 0 solid;
    border-radius: 50%;
    width: 30px;
    height: 40px;
    background-color: #000;
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .25);
    overflow: hidden;
    transition: background-color .3s ease-out;
    content: 'X' !important;
    color: white !important;
    font-size: 25px;
    display: flex;
    align-items: anchor-center;
    font-family: sans-serif;
    padding-right: 12px;

}
    .modal_lnk-close:after {
        content: 'X';
    }

    .modal_lnk-close:hover,
    .modal_lnk-close:active,
    .modal_lnk-close:focus {
        background-color: #c00;
        outline: 0 solid;
    }

.svg-close {
    pointer-events: none;
    width: 40px;
    height: 40px;
    stroke: #fff;
    stroke-width: 2;
}




/* Modal SVG (Tesco) loading animation version 2 (overlaid on itself and out of phase) */

[class*="svg-loading"] {
    position: absolute;
    width: 80px;
    height: 80px;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    z-index: -1;
    transition: opacity .3s ease-out;
    backface-visibility: hidden;
}

.svg-loading {
    fill: #00539f;
}

.svg-loading2 {
    /* Match to .modal background colour for full effect */
    fill: #F7F0E8;
}


/* While modal is open */

/* Class added to body tag to prevent scroll
   Note the body does not require class "-modal" */
body.-modal-open {
    overflow: hidden;
}


/* Any tags classed with "-modal", when open, get "-modal-open" added */
/* Both of these are equivalent, best practice to use the attribute version which enforces accessibility */

.-modal[aria-hidden="true"] {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.-modal.-modal-open {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}


/* Generic helper style */
.u-margin2 {
    margin: 2rem 0;
}