﻿img.header-logo {
    width: auto;
    max-height: 7.7rem;
}

.menu-toggle-container {
    margin: auto;
}

.logo-mainnav-search {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.usa-nav {
    font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1.01rem;
    line-height: 1;
}

.usa-nav__primary > .usa-nav__primary-item > a {
    color: #000;
}

    .usa-nav__primary > .usa-nav__primary-item > a span {
        font-size: 1.125rem;
    }

.usa-nav__primary > .usa-nav__primary-item {
    font-size: 1.125rem;
}

#main-nav-id {
    margin: auto;
}


.usa-nav__close {
    text-decoration: underline;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 400;
    margin: 0;
    padding: 0;
    height: 3rem;
    width: 3rem;
    background-image: none;
    color: currentColor;
    flex: none;
    float: right;
    margin: -.75rem -1rem 1rem auto;
    text-align: center;
}

.usa-nav .usa-accordion {
    font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1.01rem;
    line-height: 1;
}

.usa-nav__primary > .usa-nav__primary-item {
    font-size: 1.125rem;
    line-height: 1;
}


.usa-nav__submenu {
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    top: 55px;
}

[type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
/*

#main-nav-id .usa-accordion__button.usa-nav__link[aria-expanded="true"]:hover {
    color: #000;
    background-color: #fff;
}
#main-nav-id .usa-accordion__button.usa-nav__link[aria-expanded="true"] {
    color: #000;
    background-color: #fff;
}

*/
.usa-nav__primary button[aria-expanded="true"] {
    color: #fff;
}

.usa-nav__primary button {
    font-size: 1.125rem !important;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    text-align: left;
    position: relative;
    color: #565c65;
    font-weight: 400;
    line-height: 1.2;
    padding: .75rem 1rem;
    text-decoration: none;
}

[hidden] {
    display: none;
}

.usa-nav__link:hover::after, .usa-nav__primary-item > .usa-current:hover::after {
    background-color: #000;
}


.usa-footer {
    font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1.01rem;
    line-height: 1.6;
    overflow: hidden;
}

.usa-footer__primary-section, footer {
    background-color: #000;
}

.usa-footer__return-to-top a, .usa-footer__return-to-top a:hover, .usa-footer__return-to-top a:visited, footer {
    color: #fff;
}

footer {
    border-top-width: .625rem;
    border-style: solid;
    border-color: #d8d8d8;
    margin-top: -35px;
}


.usa-footer > .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.usa-footer__return-to-top {
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
    line-height: 1;
}

    .usa-footer__return-to-top a, .usa-footer__return-to-top a:hover, .usa-footer__return-to-top a:visited, footer {
        color: #fff;
    }

    .usa-footer__return-to-top a, .usa-link {
        text-decoration: underline;
    }

.usa-footer__primary-content {
    line-height: 1.2;
}

.marin-footer__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.marin-footer__col1 {
    width: 35%;
}

.marin-footer__col2 {
    width: 23%;
    margin: 0 14px 0 20px;
}

.marin-footer__col3 {
    margin-top: 1.3rem;
    width: 28%;
}

.marin-footer__col2 h2 {
    font-size: 1.4rem;
    color: #fff;
}

.arcc-connect-icon {
    display: inline-block;
    background-color: #fff;
    color: #000;
    border-radius: 16px;
    padding: 0 5px;
    margin-right: 15px;
}

footer a {
    color: #fff;
}

    footer a:hover {
        text-decoration: none;
    }

.marin-footer__col3 a {
    color: #e5b53b;
}

.fa-instagram-square:before, .fa-square-instagram:before, .fa-linkedin-in:before {
    padding: 0 1px;
}

.fa-x-twitter:before, .fa-facebook-f:before {
    padding-right: 1px;
}

.usa-nav__primary > .usa-nav__primary-item > a {
    line-height: 1;
    padding: 1rem;
    display: block;
    font-weight: 700;
    text-decoration: none;
}

    .usa-nav__primary > .usa-nav__primary-item > a:hover {
        text-decoration: underline;
    }

@media (min-width: 64em) {
    .usa-nav__primary {
        display: flex;
        width: auto;
    }

        .usa-nav__primary .usa-accordion__button span {
            margin-right: 0;
        }

    .usa-nav__submenu .usa-nav__submenu-item a {
        color: #fff;
        line-height: 1.3;
        display: block;
        padding: .5rem;
    }

        .usa-nav__submenu .usa-nav__submenu-item a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .usa-nav__primary button {
        line-height: 1;
        padding: 1rem;
        font-size: .89rem;
        font-weight: 700;
    }


    #main-nav-id .usa-nav__primary button[aria-expanded="false"] span::after {
        background-image: url(https://www.hr.marincounty.gov/themes/custom/marin_county/img/usa-icons/expand_more.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1rem 1rem;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        content: "";
        vertical-align: middle;
        margin-left: auto;
    }
  

    #main-nav-id .usa-nav__primary button[aria-expanded="true"] span::after {
        background-image: url(https://www.marincounty.gov/themes/custom/marin_county/img/usa-icons-bg/expand_less--white.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1rem 1rem;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        content: "";
        vertical-align: middle;
        margin-left: auto;
        background-color: transparent;
        color: #fff;
    }

    #main-nav-id .usa-nav__primary button[aria-expanded="true"]:hover span::after {
        background-image: url(https://www.hr.marincounty.gov/themes/custom/marin_county/img/usa-icons/expand_less.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1rem 1rem;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        content: "";
        vertical-align: middle;
        margin-left: auto;
        background-color: transparent;
        color: #fff;
    }

    #main-nav-id .usa-accordion__button[aria-expanded="true"] {
        background-image: none;
    }

    .usa-nav__primary button:hover, .usa-nav__primary > .usa-nav__primary-item > a:hover {
        color: #0773c5;
    }


    .usa-nav__link:hover::after, .usa-nav__primary-item > .usa-current::after {
        background-color: #005ea2;
        border-radius: 0;
        content: "";
        display: block;
        position: absolute;
        height: .25rem;
        left: 1rem;
        right: 1rem;
        bottom: -.25rem;
    }

    .usa-nav__link:hover::after, .usa-nav__primary-item > .usa-current:hover::after {
        background-color: #000;
    }

    .usa-nav__primary button[aria-expanded="true"]:hover span::after {
        background-color: transparent;
    }

    .usa-nav__primary > .usa-nav__primary-item {
        line-height: 1;
        position: relative;
    }



    .usa-nav__submenu {
        margin-bottom: 0;
        margin-top: 0;
        list-style-type: none;
        padding-left: 0;
        width: 15rem;
        position: absolute;
        top: 55px;
        z-index: 400;
    }

        .usa-nav__submenu .usa-nav__submenu-item a, .usa-nav__submenu .usa-nav__submenu-item a:hover {
            color: #000;
        }


        .usa-nav__submenu .usa-nav__submenu-item a, usa-nav__primary-item link a {
            text-decoration: none;
            line-height: 1.3;
            display: block;
            padding: .5rem;
        }

    .usa-nav__primary > .usa-nav__primary-item > a:hover {
        color: #0777cf;
        text-decoration: underline
    }

    .usa-nav__primary button:hover {
        color: #005ea2;
        background-color: transparent;
        text-decoration: none;
    }

    .usa-nav__primary button[aria-expanded="true"] {
        color: #fff;
        background-color: #073e69;
    }

        .usa-nav__primary button[aria-expanded="true"]:hover {
            color: #000;
            background-color: white;
        }

    .usa-nav__primary > .usa-nav__primary-item > a:hover::after {
        display: none
    }

    .arcc-footer_logo {
        width: 40%;
    }
}

@media (min-width: 30em) {
    .usa-footer__primary-content {
        border: 0;
    }
}

@media only screen and (max-width: 1169px) {
    @media (max-width: 1023px) {

        #main-nav-id {
            vertical-align: middle;
            margin: auto;
            height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }

        #main-nav-id {
            position: absolute;
            top: 101%;
            left: 0;
            display: none;
            height: auto;
            width: 33%;
            background-color: white;
            z-index: 0;
            border-top: solid 1px gray;
        }
        
            #main-nav-id .usa-accordion__button[aria-expanded="false"]:hover {
                background-image: url(https://www.marincounty.gov/themes/custom/marin_county/img/usa-icons-bg/add--white.svg), linear-gradient(transparent, transparent);
                background-repeat: no-repeat;
            }

            #main-nav-id .usa-accordion__button[aria-expanded="false"] {
                background-image: url(https://arcc.marincounty.gov/themes/custom/marin_county/img/usa-icons/add.svg);
                background-repeat: no-repeat;
            }

            #main-nav-id .usa-accordion__button[aria-expanded="true"], #main-nav-id .usa-accordion__button[aria-expanded="true"]:hover {
                background-image: url(https://www.marincounty.gov/themes/custom/marin_county/img/usa-icons-bg/remove--white.svg);
            }

            #main-nav-id nav > ul > li a {
                padding: .75rem 1rem;
            }

        .usa-nav__submenu {
            background-color: #fff;
        }

            .usa-nav__submenu li a {
                font-size: 0.8em;
                color: #565c65;
                text-decoration: none;
            }

                .usa-nav__submenu li a:hover {
                    text-decoration: underline;
                }

            .usa-nav__submenu li {
                font-size: 1.1em;
            }


        #site-logo-mobile img.header-logo {
            max-height: 4.12rem;
        }

        .menu-toggle-container {
            margin-top: 0.5rem;
        }

        .logo-mainnav-search {
            height: 100%;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }
    }

    @media only screen and (max-width: 960px) {
        #main-nav-id {
            width: 50%;
        }

        .marin-footer__wrapper {
            flex-direction: column;
        }

        .marin-footer__col1, .marin-footer__col2, .marin-footer__col3, input.marin-footer__email-signup {
            width: auto;
            margin: 0;
        }
    }

    @media only screen and (max-width: 460px) {
        #main-nav-id {
            width: 75%;
        }
    }
