Header and Footer Css ======================================= html
.hold {
    padding-top: 0px !important;
}

html {
    font-size: 1rem !important;
}

    html.modernizr-sizes.modernizr-supports.modernizr-srcset.modernizr-serviceworker.modernizr-touchevents {
        font-size: 1rem;
    }

:root {
    /* Colors */
    --navy: #122C6C;
    --navy-dark: #001448;
    --blue-light: #506EFA;
    --green: #184113;
    --red: #660333;
    --gold: #D49829;
    --gold-dark: #B8852B;
    --gold-10: #FBF5EA;
    --gold-40: #F2E0BF;
    --white: #FFF;
    --black: #000;
    /* Typography */
    --display-font: "grand-central", serif;
    --primary-font: "special-gothic", sans-serif;
    --secondary-font: "special-gothic-semicondensed", sans-serif;
}

/* 
 * Header & Navigation 
 */
header {
    width: 100%;
    /* font-size: 1rem !IMPORTANT; */
    .container-header {
        align-content: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: none;
        padding: 0;
        position: relative;

        a.header-logo {
            display: block;
            margin: 1.375rem 1.25rem;
            text-decoration: none;

            svg {
                height: auto;
                width: 12.3125rem;
            }
        }

        button.menu-icon {
            background-color: transparent;
            border: 0;
            cursor: pointer;
            margin: 1.375rem 1.25rem;
            padding: 0;

            div {
                background-color: var(--navy);
                height: 0.25rem;
                margin-bottom: 0.375rem;
                transition-duration: .2s;
                width: 2rem;

                &:last-of-type {
                    margin: 0;
                }
            }

            &[aria-expanded="true"] {
                div:first-of-type {
                    transform: rotate(45deg) translate(7px, 7px);
                }

                div:nth-of-type(2) {
                    opacity: 0;
                }

                div:last-of-type {
                    transform: rotate(-45deg) translate(7px, -7px);
                }
            }
        }

        #site-navigation {
            display: none;
            font-family: var(--secondary-font);
            font-size: 1.125rem;
            font-weight: bold;
            line-height: 1.44;
            text-transform: uppercase;
            width: 100%;



            &.expanded {
                display: block;
            }

            nav {

                ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    li.menu-item {

                        a.menu-item {
                            color: var(--navy);
                            display: inline-block;
                            text-decoration: none;

                            &:hover,
                            &:focus {
                                color: var(--gold);
                                text-decoration: underline;
                            }
                        }
                    }
                }

                &.primary-nav {

                    ul#primary-navigation {
                        padding: 0 1.25rem 1.375rem;

                        li.menu-item {
                            border-bottom: 1px solid var(--navy);

                            a.menu-item {
                                padding: 0.6875rem 0;
                            }

                            &:nth-last-of-type(-n+2) {
                                border: 0;
                            }

                            &:last-of-type {
                                margin-top: 0.5625rem;

                                a.menu-item {
                                    background-color: var(--blue-light);
                                    color: var(--white);
                                    padding: 0.625rem 0.875rem;

                                    &:hover,
                                    &:focus {
                                        background-color: var(--navy);
                                    }
                                }
                            }
                        }
                    }
                }

                &.secondary-nav {
                    background-color: var(--navy);

                    ul#secondary-navigation {

                        li.menu-item {

                            button.menu-item {
                                align-content: center;
                                background-color: transparent;
                                border: 0;
                                border-bottom: 1px solid var(--white);
                                color: var(--white);
                                cursor: pointer;
                                display: flex;
                                font-family: var(--secondary-font);
                                font-size: 1.125rem;
                                font-weight: 700;
                                justify-content: space-between;
                                letter-spacing: 2%;
                                line-height: 1.55;
                                margin: 0 1.25rem;
                                padding: 1rem 0;
                                text-transform: uppercase;
                                width: calc(100% - 2.5rem);

                                svg {
                                    stroke: var(--white);
                                    transition-duration: .2s;
                                }

                                &:hover,
                                &:focus {
                                    color: var(--gold);

                                    svg {
                                        stroke: var(--gold);
                                    }
                                }

                                &[aria-expanded="true"] {
                                    svg {
                                        transform: rotate(45deg);
                                    }
                                }
                            }

                            ul.sub-menu {
                                background-color: var(--navy-dark);
                                display: none;
                                transition: opacity 0.5s ease, max-height 0.5s ease, display 0.5s;
                                transition-behavior: allow-discrete;
                                transition-duration: .2s;

                                &.expanded {
                                    display: block;
                                }

                                li.menu-item {

                                    a.menu-item {
                                        color: var(--white);
                                        font-family: var(--primary-font);
                                        font-weight: 400;
                                        letter-spacing: 2%;
                                        line-height: 1.11;
                                        padding: 1rem 1.25rem;
                                        text-transform: none;

                                        &:hover,
                                        &:focus {
                                            color: var(--gold);
                                        }
                                    }
                                }
                            }

                            &:last-of-type {
                                button.menu-item {
                                    border: 0;
                                }
                            }
                        }
                    }
                }

                &.social-nav {
                    background-color: var(--gold-dark);
                    padding: 1.375rem 1.25rem;

                    ul#social-navigation {
                        align-content: center;
                        display: flex;
                        justify-content: space-between;

                        li.menu-item {
                            display: block;
                            height: 2.1875rem;

                            button.search-toggle {
                                background-color: transparent;
                                border: 0;
                                cursor: pointer;

                                svg {
                                    stroke: var(--white);

                                    &:hover,
                                    &:focus {
                                        stroke: var(--black);
                                    }
                                }
                            }

                            a.menu-item {
                                display: block;

                                svg {
                                    display: block;
                                    fill: var(--white);

                                    &:hover,
                                    &:focus {
                                        fill: var(--black);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@starting-style {
    header {
        .container-header {
            #site-navigation {
                nav {
                    &.secondary-nav {
                        ul#secondary-navigation {
                            li.menu-item {
                                ul.sub-menu {
                                    opacity: 0;
                                    max-height: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 900px) and (max-width: 1340px) {
    header {
        .container-header {
            #site-navigation {
                nav {
                    &.secondary-nav {
                        ul#secondary-navigation {
                            li.menu-item {
                                &:first-of-type {
                                    ul.sub-menu {
                                        left: 6.5rem;
                                    }
                                }

                                &:last-of-type {
                                    ul.sub-menu {
                                        left: -2px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 900px) {
    header {

        .container-header {

            a.header-logo {

                svg {
                    width: 18.5625rem;
                }
            }

            button.menu-icon {
                display: none;

                div {

                    &:last-of-type {
                    }
                }
            }

            #site-navigation {
                display: block;
                width: calc(100% - 21.0625rem);

                nav {

                    ul {

                        li.menu-item {

                            a.menu-item {
                            }
                        }
                    }

                    &.primary-nav {

                        ul#primary-navigation {
                            align-content: center;
                            display: flex;
                            gap: 2.25rem;
                            justify-content: flex-end;
                            padding: 3.375rem 1.25rem 1rem;

                            li.menu-item {
                                border: 0;

                                &:last-of-type {
                                    margin: 0;
                                }

                                a.menu-item {
                                    /* font-size: 1rem !important; */
                                }
                            }
                        }
                    }

                    &.secondary-nav {
                        border-bottom: 1px solid var(--white);
                        left: -21.0625rem;
                        position: relative;
                        width: calc(100% + 21.0625rem);

                        ul#secondary-navigation {
                            align-content: center;
                            display: flex;
                            justify-content: space-between;
                            margin: 0 auto;
                            max-width: 75rem;
                            padding: 0 1rem;

                            li.menu-item {
                                position: relative;

                                button.menu-item {
                                    border: 0;
                                    font-size: 1rem;
                                    margin: 0;
                                    width: 100%;

                                    &:hover,
                                    &:focus {
                                    }

                                    svg {
                                        display: none;
                                    }
                                }

                                ul.sub-menu {
                                    display: none;
                                    left: 50%;
                                    position: absolute;
                                    text-align: center;
                                    top: 3.625rem;
                                    transform: translateX(-50%);
                                    width: 14.75rem;
                                    z-index: 100;

                                    li.menu-item {

                                        a.menu-item {
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &.social-nav {
                        border-bottom-left-radius: 0.625rem;
                        border-bottom-right-radius: 0.625rem;
                        padding: 0.5rem 0.875rem;
                        position: absolute;
                        right: 1.25rem;
                        top: 0;

                        ul#social-navigation {
                            gap: 0.875rem;

                            button.search-toggle {

                                svg {
                                    height: auto;
                                    width: 1.5rem;
                                }
                            }

                            li.menu-item {
                                height: 1.5rem;

                                a.menu-item {

                                    svg {
                                        height: auto;
                                        width: 1.5rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 
 * Footer
 */
footer {
    background-color: var(--navy);
    color: var(--white);
    padding: 2.8125rem 0 3.75rem;

    .container-footer {
        padding: 0 1.25rem;

        .logo {
            margin-bottom: 2.625rem;
            text-align: center;

            svg.logo-alt {
                height: auto;
                width: 17.4375rem;
            }
        }

        .contact {
            padding: 1.75rem 0 1.5rem;
            position: relative;

            &::before,
            &::after {
                background-color: var(--blue-light);
                content: "";
                display: block;
                height: 1px;
                left: 0;
                position: absolute;
                width: 100%;
            }

            &::before {
                top: 0;
            }

            &::after {
                top: 4px;
            }

            p {
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.62;
                margin: 0 0 1.875rem;

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }

        nav#footer-nav {
            display: flex;
            flex-wrap: wrap;
            padding-top: 2.375rem;
            position: relative;

            &::before,
            &::after {
                background-color: var(--blue-light);
                content: "";
                display: block;
                height: 1px;
                left: 0;
                position: absolute;
                width: 100%;
            }

            &::before {
                top: 0;
            }

            &::after {
                top: 4px;
            }

            a.donate {
                display: block;
                font-size: 1.125rem;
                font-weight: 700;
                line-height: 1.11;
                margin-bottom: 2rem;
                text-align: center;
                width: 100%;
            }

            ul {
                flex: 1;
                list-style: none;
                margin: 0;
                padding: 0;

                li {
                    margin: 0 0 2.25rem;

                    a {
                        color: var(--white);
                        font-family: var(--secondary-font);
                        font-size: 1.125rem;
                        font-weight: 700;
                        line-height: 1.11;
                        text-decoration: none;
                        text-transform: uppercase;

                        &:hover,
                        &:focus {
                            color: var(--gold);
                        }

                        &.donate {

                            &:hover,
                            &:focus {
                                color: var(--white);
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 900px) {
    footer {


        .container-footer {
            display: flex;
            margin: 0 auto;
            max-width: 87.375rem;
            padding: 0 4.625rem;
            width: 100%;

            .logo {
                margin-bottom: 0;
                padding-right: 9.5%;
                width: 37%;

                svg.logo-alt {
                    width: 100%;
                }
            }

            .contact {
                padding: 0 2.375rem;
                width: 29%;

                &::before,
                &::after {
                    height: 100%;
                    top: 0;
                    width: 1px;
                }

                &::before {
                    left: -4px;
                }

                &::after {
                    left: 0;
                }

                p {


                    &:last-of-type {
                    }
                }
            }

            nav#footer-nav {
                flex-wrap: nowrap;
                padding: 0;
                width: 34%;

                &::before,
                &::after {
                    display: none;
                }

                a.donate {
                    display: inline-block;
                    margin: 0;
                    width: auto;
                }

                ul {
                    padding: 0 2.375rem;
                    position: relative;

                    &::before,
                    &::after {
                        background-color: var(--blue-light);
                        content: "";
                        display: block;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        width: 1px;
                    }

                    &::before {
                        left: -4px;
                    }

                    &::after {
                        left: 0;
                    }

                    &:last-of-type {
                        padding-right: 0;
                    }

                    li {
                        margin-bottom: 1.5rem;

                        &:last-of-type {
                            margin-bottom: 0;
                        }

                        a {


                            &:hover,
                            &:focus {
                            }

                            &.donate {
                                margin-bottom: 0.875rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 900px) {
    .mobile {
        display: none !important;
    }

    .desktop {
        display: initial !important;
    }
}

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


[class^="btn-"] {
    align-items: center;
    color: var(--white);
    display: inline-flex;
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 600;
    gap: 0.25rem;
    letter-spacing: 1%;
    line-height: 1.375;
    padding: 0.75rem 0.75rem;
    text-decoration: none;
    text-transform: uppercase;
    transition-duration: .2s;

    svg {
        display: none;
        transition-behavior: allow-discrete;
        transition-duration: .2s;
    }

    &:hover,
    &:focus {

        svg {
            display: block;
        }
    }
}

@starting-style {
    [class^="btn-"] {
        svg {
            opacity: 0;
        }
    }
}

.btn-white {
    background-color: var(--white);
    color: var(--navy);

    &:hover,
    &:focus {
        background-color: var(--gold);
        color: var(--white);
    }
}

.btn-gold {
    background-color: var(--gold);
    color: var(--white);

    &:hover,
    &:focus {
        background-color: var(--gold-dark);
    }
}

.btn-blue {
    background-color: var(--blue-light);

    &:hover,
    &:focus {
        background-color: var(--navy);
    }
}

.btn-navy {
    background-color: var(--navy);

    &:hover,
    &:focus {
        background-color: var(--blue-light);
    }
}

.btn-navy-alt {
    background-color: var(--navy);

    &:hover,
    &:focus {
        background-color: var(--white);
        color: var(--navy);

        svg {
            path {
                stroke: var(--navy);
            }
        }
    }
}

.desktop {
    display: none !important;
}

@media screen and (min-width: 900px) {
    .mobile {
        display: none !important;
    }

    .desktop {
        display: initial !important;
    }
}