@font-face {
    font-family: "icon-font";
    src: url('fonts/icon-font.eot');
    src: url('fonts/icon-font.eot?#iefix') format('eot'), url('fonts/icon-font.woff') format('woff'), url('fonts/icon-font.ttf') format('truetype'), url('fonts/icon-font.svg#icon-font') format('svg');
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(.6rem);
        -ms-transform: translateY(.6rem);
        transform: translateY(.6rem)
    }
}

/*** Colors ***************************************/
:root {
    --saNav__pro-cyan: #009FE3;
    --saNav__blue-grey: #254A5D;
    --saNav__yellow: #F1BE48;
    --saNav__dark-grey: #21343D;
    --saNav__light-grey: #5B7380;
    --saNav__silver: #C3D0D6;
    --saNav__white: #FFFFFF;
    --saNav__light-pro-cyan: #45BBE6;
    --saNav__crimson: #da2e4e;
    --saNav__orange: #e35205;
    --saNav__slate: #94a7b0;
}
/*** End Colors ************************************/

.saNav__bar {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "logo mCert mCoach mCommunity mResources mAbout mCTA mLogin mNotification";
    grid-gap: 0px 15px;
    border-bottom: 1px solid var(--saNav__silver);
    background-color: var(--saNav__white);
    z-index: 999;
    position: fixed;
    top: 0px;
    min-height: 5.2rem;
    width: 100vw;
    font-family: ClearSans;
}

/*grid area definitions*/
.saNav__left {
    grid-area: logo;
}

#sa__nav_menu_Certification {
    grid-area: mCert;
}

#sa__nav_menu_Coaching {
    grid-area: mCoach;
}

#sa__nav_menu_Community {
    grid-area: mCommunity;
}

#sa__nav_menu_Resources {
    grid-area: mResources;
}

#sa__nav_menu_About {
    grid-area: mAbout;
}

#sa__nav_menu_CTA {
    grid-area: mCTA;
}

#sa__nav_menu_Login {
    grid-area: mLogin;
}

#sa__nav_menu_Notification {
    grid-area: mNotification
}

#sa__nav_menu_Mobile {
    grid-area: mMobile;
}
/*End Grid area definitions*/

.sa__nav_ham {
    display: none;
    background-image: url("../Images/icons/menu.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    height: 30px;
    margin-top: 10px;
    width: 100%;
}

.sa__nav_ham_close {
    background-image: url("../Images/icons/circled-x.png");
}

.saNav__mobileIcon {
    background-image: url("../Images/icons/right-chevron.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px; /* Resize the background image to cover the entire container */
    object-fit: contain;
    height: 24px;
    width: 24px;
    margin-left: 4px;
    display: none;
}

.saNav__ReturnLink {
    display: none;
}

.saNav__ScrollIndicator {
    display: none;
}

.saNav__ReturnIcon {
    background-image: url("../Images/icons/left-arrow.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px; /* Resize the background image to cover the entire container */
    object-fit: contain;
    height: 24px;
    width: 24px;
    margin-right: 4px;
    float: left;
}

.saNav__footer {
    background-color: var(--saNav__dark-grey);
    color: var(--saNav__silver);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1.6rem;
    padding: 1rem 3.6rem 6rem 3.6rem;
    justify-items: center;
}

.saNav__articleCaption {
    margin: 0px 2.4rem;
    color: var(--saNav__white);
    font-size: 1.5rem;
    letter-spacing: 2.0px;
    font-weight: 500;
    line-height: 1.1;
}

.saNav__footerLogoImg {
    background-image: url("../Images/Logos/SAI_Primary_Logo_W.png?06162022");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26rem; /* Resize the background image to cover the entire container */
    object-fit: contain;
    height: 6rem;
}

.saNav__footerMsg {
    font-size: 1.3rem;
    text-align: center;
}

.saNav__footerSocial {
    background-image: url("../Images/socialMediaIcons.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: 300px; /* Resize the background image to cover the entire container */
    height: 60px;
    width: 53px;
    margin-left: auto;
    margin-right: auto;
}

.saNav__footerSocialGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.saNav__footerSocialFB {
    background-position: -8px 0px;
}

.saNav__footerSocialLinked {
    background-position: -100px 0px;
}

.saNav__footerSocialTwitter {
    background-position: -53px 0px;
}

.saNav__footerSocialLabel:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.saNav__footer__copy {
    text-align: center;
    font-size: 1.3rem;
}

.saNav__footer__copy__link {
    font-weight: normal;
    color: var(--saNav__white);
}

.saNav__logo {
    background-image: url("../Images/Logos/SAI_Primary_Logo_K.png?06162022");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28rem;
    height: 4rem;
    width: 30rem;
    margin-top: 5px;
}

.saNav__mobileMenu::before {
    font-family: "icon-font";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    vertical-align: top;
    content: "\E003";
    font-size: 2.5rem;
    color: #000;
}

.saNav__offerings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 4fr;
    grid-gap: 1.6rem;
    place-items: center;
    min-height: 6rem;
}

.saNav__offerings--LoggedIn {
    grid-gap: 2.6rem;
}

.saNav__loginContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;
    place-items: center;
}

.saNav__notification {
    height: 30px;
    width: 30px;
    background-image: url("../Images/notifications/SA_global_icon_notifications_default_alert_40x40.png"); /* The image used */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 30px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

    .saNav__notification:hover {
        background-image: url("../Images/notifications/SA_global_icon_notifications_hover_alert_40x40.png"); /* The image used */
        cursor: pointer;
    }

.saNav__notification__container {
}

.saNav__ctas {
    display: inline-flex;
    grid-gap: 1rem;
}

.saNav__bar__link {
    text-decoration: none;
    color: var(--saNav__blue-grey);
}

.saNav__primaryButton {
    background: var(--saNav__pro-cyan) !important;
    border: 1px solid var(--saNav__pro-cyan) !important;
    border-radius: 4px !important;
    color: var(--saNav__white) !important;
    text-decoration: none;
    letter-spacing: 1.1px;
    min-width: 14rem;
    font-weight: 600;
    padding: .75rem !important;
    align-self: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin-top: 0px !important;
}

    .saNav__primaryButton:hover {
        background: var(--saNav__light-pro-cyan) !important;
        border: 1px solid var(--saNav__light-pro-cyan) !important;
        color: var(--saNav__white);
        text-decoration: none;
    }

.saNav__secondaryButton {
    background: var(--saNav__white);
    color: var(--saNav__blue-grey);
    border: 1px solid var(--saNav__blue-grey);
    border-radius: 4px;
    min-width: 14rem;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-decoration: none;
    padding: .75rem;
    cursor: pointer;
    align-self: center;
    justify-content: center;
    text-align: center;
}

    .saNav__secondaryButton:hover {
        background: var(--saNav__blue-grey);
        color: var(--saNav__white);
        border: 1px solid var(--saNav__blue-grey);
        border-radius: 4px;
        font-weight: 600;
        letter-spacing: 1.1px;
    }

.saNav__dropdown {
    padding: 1.6rem 0 1.6rem 0;
    text-align: center;
    min-height: 4rem;
    max-height: 36rem;
    cursor: pointer;
}

.saNav__dropbtn {
    font-weight: bold;
    color: inherit;
    text-decoration: none;
    user-select: none;
}

.saNav__links {
    list-style-type: none;
    text-align: left;
    padding: 0px;
    margin-bottom: 1rem;
    margin-left: 0 !important;
}

.saNav__header__link, .saNav__footer__link {
    font-size: 1.5rem;
    line-height: 1.42857143;
}

    .saNav__header__link, .saNav__header__link a, .saNav__footer__link a {
        font-weight: normal;
    }

        .saNav__header__link, .saNav__header__link a {
            color: var(--saNav__blue-grey)
        }

    .saNav__footer__link a {
        color: var(--saNav__white)
    }

        .saNav__footer__link a:visited {
            color: var(--saNav__white)
        }

    .saNav__header__link:hover, .saNav__header__link:hover a, .saNav__footer__link:hover a, .saNav__footer__copy__link:hover a,
    .saNav__header__link:focus, .saNav__header__link:focus a, .saNav__footer__link:focus a, .saNav__footer__copy__link:focus a {
        color: var(--saNav__pro-cyan);
        text-decoration: none !important;
    }

.saNav__links__heading, .saNav__largeSection__heading, .saNav__footer__headingLink {
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    font-weight: 500;
    line-height: 1.1;
}

.saNav__links__heading, .saNav__largeSection__heading {
    color: var(--saNav__light-grey);
}

.saNav__footer__headingLink {
    color: var(--saNav__white);
}

    .saNav__footer__headingLink:hover {
        color: var(--saNav__pro-cyan);
    }

.saNav__dropbtn:hover::after {
    visibility: visible;
    transform: scaleX(1);
}

.saNav__dropdownContent {
    display: grid;
    position: absolute;
    width: 100%;
    left: 0;
    background-color: var(--saNav__white);
    z-index: 999;
    top: 6.2rem;
    transition: all 0.25s ease-in-out;
}

.saNav__dropdown--hover:hover .saNav__dropdownContent {
    transition-delay: 0.25s;
    visibility: visible;
    opacity: 1;
}

.saNav__dropdownContent--visible {
    transition-delay: 0.25s;
    visibility: visible;
    opacity: 1;
}

.saNav__dropdownContent--hidden {
    transition-delay: 0.25s;
    visibility: hidden;
    opacity: 0;
}

.saNav__modal {
    display: none;
    position: absolute;
    top: -1rem;
    width: 100vw;
    height: 105vh;
    opacity: .75;
    background-color: #000;
    z-index: 996;
}

.saNav__container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.saNav__dropdownContent .saNav__container {
    z-index: 999;
    position: absolute;
    float: left;
    background-color: var(--saNav__white);
    top: -1rem;
    width: 100vw;
    border-bottom: 1px solid #ddd;
}

.saNav__mobileMenu {
    display: none;
}

    .saNav__mobileMenu::before {
        font-family: "icon-font";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-decoration: none;
        text-transform: none;
        vertical-align: central;
        content: "\E003";
        font-size: 4.5rem;
        color: #000;
    }

.saNav__grid {
    display: grid;
    grid-gap: 3.6rem;
    padding: 3.6rem;
    justify-items: start;
    align-items: center;
}

.saNav__grid--1and2 {
    grid-template-columns: 1fr 7fr 1px 2fr 1fr;
    overflow: auto;
}

.saNav__grid--3and1 {
    grid-template-columns: 1fr 1fr 1fr 1px 1fr;
}

.saNav__grid--3and2 {
    grid-template-columns: 1fr 1fr 1fr 1px 1fr 1fr;
}

.saNav__section {
    width: 24rem;
    height: auto;
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--saNav__blue-grey);
}

.saNav__section--thin {
    width: 20rem;
}

.saNav__section:hover {
    text-decoration: none;
    color: var(--saNav__pro-cyan);
}

.saNav__section__image {
    opacity: 1;
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    width: auto;
    height: 10rem;
    margin-bottom: 1.2rem;
}

.saNav__section:hover img {
    opacity: .7;
    cursor: pointer;
    animation-name: bounce;
    -moz-animation-name: bounce;
}

.saNav__section__header {
    color: inherit;
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.1;
}

.saNav__section__description {
    color: inherit;
    font-weight: normal;
}

.saNav__largeSection {
    color: var(--saNav__blue-grey);
    align-content: center;
    text-align: left;
    background-color: #fff;
    border: 1px solid var(--saNav__silver);
    border-radius: 4px;
    padding: 0px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
}

    .saNav__largeSection:hover {
        box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
        color: var(--saNav__pro-cyan);
    }

.saNav__cardInfo {
    align-self: center;
    height: 30rem;
}

.saNav__divider {
    background-color: var(--saNav__silver);
    width: 1px;
    height: 100%;
}

.saNav__cardInfo {
    padding: 1.6rem;
    align-content: center;
    display: flex;
    flex-direction: column;
    height: 24rem;
}

    .saNav__cardInfo p {
        max-height: 100px;
        overflow: hidden;
    }

.saNav__cardImage {
    min-height: 16rem;
    height: 100%;
    object-fit: cover;
}

.saNav__imageBanner {
    background: var(--saNav__blue-grey);
    bottom: .01rem;
    position: absolute;
    width: 100%;
    color: var(--saNav__white);
    padding: .6rem 1.6rem;
}

.saNav__loginLink {
    flex-grow: 1;
}

/*****Notification*/
.saNav__notification {
    font-family: ClearSans;
}

.saNav__notification__a {
    color: var(--saNav__light-pro-cyan);
}

    .saNav__notification__a:hover {
        color: var(--saNav__yellow) !important;
    }

.saNav__notification__h2 {
    color: var(--saNav__yellow);
    font-size: 1.8rem;
    /*font-weight: 600;*/
}

.saNav__notification__h4 {
    margin-bottom: 10px;
    font-size: 2.2rem;
    color: var(--saNav__white);
    font-weight: bold;
}

.saNav__notification__date {
    color: var(--saNav__light-pro-cyan);
    font-size: 1rem;
}

.saNav__notification__msg {
    font-size: 1.4rem;
    padding-bottom: 10px;
}

.saNav__notification__sep {
    border-bottom: 1px solid var(--saNav__slate);
}
/*****************/

@media (max-width:1360px) {
    .saNav__offerings--LoggedIn {
        grid-gap: 1.2rem;
    }
}

@media (max-width:1290px) {
    .saNav__bar {
        /*grid-template-columns: 1fr 4fr .25rem;*/
        grid-gap: .75rem;
    }

    .saNav__logo {
        background-size: 26rem;
        width: 25rem;
    }

    .saNav__offerings {
        font-size: 1.4rem;
        grid-gap: 1rem;
    }

    .saNav__offerings--LoggedIn {
        grid-gap: .8rem;
    }

    .saNav__loginContainer {
        grid-template-columns: 1fr;
        grid-gap: 5px;
    }

    .saNav__primaryButton, .saNav__secondaryButton {
        min-width: 12rem;
        font-size: 1.2rem;
    }

    .saNav__grid {
        display: grid;
        grid-gap: 1.6rem;
        padding: 1.6rem;
        justify-items: start;
        align-items: center;
    }

    .saNav__grid--1and2 {
        grid-template-columns: 1fr 7fr 1px 2fr 1fr;
        overflow: auto;
    }

    .saNav__grid--3and1 {
        grid-template-columns: 1fr 1fr 1fr 1px 1fr;
    }

    .saNav__grid--3and2 {
        grid-template-columns: 1fr 1fr 1fr 1px 1fr 1fr;
    }
}

@media (max-width:1080px) {
    .saNav__bar {
        grid-gap: .5rem;
    }

    .saNav__logo {
        background-size: 22rem;
        width: 20rem;
    }
}

@media (max-width:1008px) {
    .saNav__bar {
        grid-gap: .5rem;
    }

    .saNav__logo {
        background-size: 20rem;
        width: 19rem;
    }

    .saNav__offerings {
        font-size: 1.3rem;
        grid-gap: .5rem;
    }

    .saNav__offerings--LoggedIn {
        grid-gap: .5rem;
    }

    .saNav__dropdown {
        padding: 1.6rem .75rem;
        text-align: left;
    }

    .saNav__grid--3and1 p {
        font-size: 1.3rem;
    }

    .saNav__links {
        font-size: 1.2rem;
    }

    .saNav__section {
        width: 20rem;
    }

    .saNav__section__image {
        height: 8rem;
    }

    .saNav__primaryButton, .saNav__secondaryButton {
        min-width: 9rem;
        font-size: 1.2rem;
    }

    .saNav__loginLink {
        flex-grow: 1;
        min-width: 6rem;
    }
}

@media (min-width: 993px) {
    .saNav__container {
        width: 1170px;
    }
}

@media (max-width:820px) {
    .saNav__dropbtn {
        transition: all 0.75s ease-in-out .25s;
        margin-left: 15px;
    }

    .saNav__dropbtn_hide {
        transition: all 0.1s ease-in-out 0s;
        visibility: hidden;
        opacity: 0;
        width: 0px;
        height: 0px;
        overflow: hidden;
    }

    .saNav__mobileIcon {
        display: revert;
    }

    .saNav__ReturnLink {
        display: revert;
    }

    .saNav__ScrollIndicator {
        background-image: url("../Images/icons/down-chevron.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px 30px;
        height: 30px;
        width: 30px;
        display: revert;
        position: relative;
        float: right;
        top: 250px;
        font-size: 2rem;
        color: red;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .saNav__ScrollIndicator--hide {
        transition: all 0.5s ease-in-out .5s;
        visibility: hidden;
        opacity: 0;
    }

    .box {
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    .bounce-5 {
        animation-name: bounce-5;
        animation-timing-function: ease;
    }

    @keyframes bounce-5 {
        0% {
            transform: scale(1,1) translateY(0);
        }

        10% {
            transform: scale(1.1,.9) translateY(0);
        }

        30% {
            transform: scale(.9,1.1) translateY(-100px);
        }

        50% {
            transform: scale(1,1) translateY(0);
        }

        57% {
            transform: scale(1,1) translateY(-7px);
        }

        64% {
            transform: scale(1,1) translateY(0);
        }

        100% {
            transform: scale(1,1) translateY(0);
        }
    }

    .saNav__offerings--LoggedIn {
        grid-gap: .8rem;
    }

    .saNav__logo {
        background-size: 23rem;
        width: 23rem;
        margin-top: 5px;
    }

    .saNav__offerings {
        font-size: 1.2rem;
    }

    .saNav__header__link, .saNav__footer__link {
        padding: 0.6rem 0;
        font-size: 1.8rem;
        text-align: left;
    }

    .sa__nav_ham {
        display: block;
    }

    .saNav__bar {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr;
        grid-template-areas: "logo mNotification mMobile" "mCTA mLogin mLogin" "mCert mCert mCert" "mCoach mCoach mCoach" "mCommunity mCommunity mCommunity" "mResources mResources mResources" "mAbout mAbout mAbout";
        grid-template-rows: auto;
        place-items: normal;
        grid-gap: .5rem;
        border-bottom: 1px solid var(--saNav__silver);
        width: 100vw;
        z-index: 999;
    }

    .navBar__closed {
        grid-template-areas: "logo mNotification mMobile";
        height: 5.2rem;
        overflow: hidden;
    }

    .navBar__open {
        grid-template-areas: "logo mNotification mMobile" "mCTA mLogin mLogin" "mCert mCert mCert" "mCoach mCoach mCoach" "mCommunity mCommunity mCommunity" "mResources mResources mResources" "mAbout mAbout mAbout";
        height: 80vh;
        overflow: hidden;
        grid-template-rows: 50px 60px 60px 60px 60px 60px 60px;
    }

    .navBar__open_loggedIn {
        grid-template-areas: "logo mNotification mMobile" "mCTA mCTA . " "mLogin mLogin mLogin" "mCert mCert mCert" "mCoach mCoach mCoach" "mCommunity mCommunity mCommunity" "mResources mResources mResources" "mAbout mAbout mAbout";
        height: 80vh;
        overflow: hidden;
        grid-template-rows: 50px 60px 60px 60px 60px 60px 60px 60px;
    }

    .navBar__open_cert {
        grid-template-rows: 50px 60px 99% 0px 0px 0px 0px;
    }

    .navBar__open_coach {
        grid-template-rows: 50px 60px 0px 99% 0px 0px 0px;
    }

    .navBar__open_comm {
        grid-template-rows: 50px 60px 0px 0px 99% 0px 0px;
    }

    .navBar__open_res {
        grid-template-rows: 50px 60px 0px 0px 0px 99% 0px;
    }

    .navBar__open_about {
        grid-template-rows: 50px 60px 0px 0px 0px 0px 99%;
    }

    .navBar__LoggedIn_user {
        grid-template-rows: 50px 60px 99% 0px 0px 0px 0px 0px;
    }

    .navBar__LoggedIn_cert {
        grid-template-rows: 50px 60px 0px 99% 0px 0px 0px 0px;
    }

    .navBar__LoggedIn_coach {
        grid-template-rows: 50px 60px 0px 0px 99% 0px 0px 0px;
    }

    .navBar__LoggedIn_comm {
        grid-template-rows: 50px 60px 0px 0px 0px 99% 0px 0px;
    }

    .navBar__LoggedIn_res {
        grid-template-rows: 50px 50px 0px 0px 0px 0px 99% 0px;
    }

    .navBar__LoggedIn_about {
        grid-template-rows: 50px 60px 0px 0px 0px 0px 0px 99%;
    }

    .saNav__footer {
        display: block;
    }

    .saNav__alogo {
        float: left;
    }

    .saNav__mobileMenu {
        display: block;
        float: right;
        margin-right: 1.6rem;
        text-decoration: none;
    }

    .saNav__offerings {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 150px;
        grid-row-gap: 0px;
        align-items: center;
        text-align: left;
        font-size: 2.2rem;
        width: 100vw;
        position: absolute;
        background-color: var(--saNav__white);
        top: 6rem;
        z-index: 999;
        height: 90vh;
        overflow-y: scroll;
        border-bottom: 1px solid var(--saNav__silver);
    }

    .saNav__dropdown {
        border: 1px solid #eee;
        font-size: 2rem;
        max-height: none;
        transition: all 0.25s ease-in-out .2s;
        overflow: hidden;
    }

    .saNav__dropdown_hidden {
        transition: all 0.1s ease-in-out 0s;
        visibility: hidden;
        opacity: 0;
        height: 0px;
        width: 0px;
        border: none;
        overflow: hidden;
    }

    .saNav__dropdown, .saNav__ctas {
        display: none;
        height: 100%;
        width: 100%;
        padding: 15px 0px 15px 0px;
    }

    .saNav__ctas {
        grid-template-columns: 1fr 5fr 1fr;
    }

    .saNav__loginContainer {
        grid-template-columns: 1fr;
        place-items: revert;
    }

    .saNav__ctas, .saNav__loginContainer {
        padding: 15px 0px 15px 0px;
    }

    .saNav__dropdown:hover .saNav__dropdownContent {
        transition-delay: unset;
        visibility: unset;
        opacity: unset;
    }

    .saNav__dropdownContent {
        position: relative;
        top: 0px;
        background-color: transparent;
        visibility: visible;
        opacity: 0;
        width: 0px;
        overflow: hidden;
        height: 0px;
        transition: all 0.1s ease-in-out 0s;
    }

    .saNav__dropdownContent_show {
        visibility: visible;
        opacity: 1;
        width: 100%;
        height: 100%;
        transition: all 1s ease-in-out 0s;
    }

    .saNav__grid--1and2,
    .saNav__grid--3and1,
    .saNav__grid--3and2 {
        grid-template-columns: 1fr;
        padding: .25rem 0 .25rem 2.9rem;
        grid-gap: .5rem;
    }

    .saNav__dropdownContent .saNav__container {
        width: 100vw;
        position: relative;
        float: none;
        border: none;
        background-color: transparent;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        top: 0px;
    }

    .saNav__section {
        display: block;
        text-decoration: none;
        color: var(--saNav__blue-grey);
        text-align: center;
        width: auto;
    }

    .saNav__section__description, .saNav__section__image {
        display: none;
    }

    .saNav__section__header {
        font-size: 2rem;
        text-align: left;
        font-weight: bold;
    }

    .saNav__ctas, .saNav__loginContainer a {
        float: left;
    }

    .saNav__divider {
        display: none;
    }

    .saNav__links {
        padding: .6rem 0;
        font-size: 1.8rem;
        text-align: left;
    }

    .saNav__mobileSubmenu {
        overflow-x: hidden;
    }

    .saNav__notification__container {
        float: left;
        margin: 0px 15px 0px 0px;
    }

    .saNav__largeSection {
        grid-template-columns: 1fr;
    }

        .saNav__largeSection section {
            display: none;
        }

    .saNav__cardInfo {
        height: 12rem;
    }
}

@media (max-width:820px) and (orientation:landscape) {
    .saNav__bar {
        grid-gap: 0px;
    }

    .saNav__logo {
        margin-top: 1px;
    }

    .saNav__dropdown {
        padding: 5px 0px;
    }

    .saNav__dropbtn {
        font-size: 1.9rem;
    }

    .saNav__ScrollIndicator {
        top: 150px;
    }

    .saNav__grid--1and2,
    .saNav__grid--3and1,
    .saNav__grid--3and2 {
        padding: .1rem 0 .1rem 2.9rem;
        grid-gap: 10px;
    }

    .saNav__section__header {
        font-size: 1.8rem;
        margin-top: 5px;
        margin-bottom: 5px;
        line-height: .9;
    }

    .saNav__links {
        padding: 0px;
    }

    .navBar__open {
        height: 100vh;
        grid-template-rows: 40px 40px 40px 40px 40px 40px 40px;
    }

    .navBar__open_loggedIn {
        height: 100vh;
        grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px;
    }

    .navBar__open_cert {
        grid-template-rows: 40px 40px 220px 0px 0px 0px 0px;
    }

    .navBar__open_coach {
        grid-template-rows: 40px 40px 0px 220px 0px 0px 0px;
    }

    .navBar__open_comm {
        grid-template-rows: 40px 40px 0px 0px 220px 0px 0px;
    }

    .navBar__open_res {
        grid-template-rows: 40px 40px 0px 0px 0px 220px 0px;
    }

    .navBar__open_about {
        grid-template-rows: 40px 40px 0px 0px 0px 0px 220px;
    }

    .navBar__LoggedIn_user {
        grid-template-rows: 40px 40px 220px 0px 0px 0px 0px 0px;
    }

    .navBar__LoggedIn_cert {
        grid-template-rows: 40px 40px 0px 220px 0px 0px 0px 0px;
    }

    .navBar__LoggedIn_coach {
        grid-template-rows: 40px 40px 0px 0px 220px 0px 0px 0px;
    }

    .navBar__LoggedIn_comm {
        grid-template-rows: 40px 40px 0px 0px 0px 220px 0px 0px;
    }

    .navBar__LoggedIn_res {
        grid-template-rows: 40px 40px 0px 0px 0px 0px 220px 0px;
    }

    .navBar__LoggedIn_about {
        grid-template-rows: 40px 40px 0px 0px 0px 0px 0px 220px;
    }

    .saNav__ctas {
        padding: 0px;
    }
}