@charset "UTF-8";

/* dev staging live site banner */

#devtestsite {
    height: 17px;
    font-size: 10px;
    color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    padding: 1px 4px;
    background-color: #000000;
    transition: background-color 100ms;
    transition: color 300ms;
}

    #devtestsite.localhost {
        display: block;
        background-color: #423bad;
        color: #fff;
    }

    #devtestsite.devsite {
        display: block;
        background-color: darkorange;
        color: #fff;
    }

    #devtestsite.stagingsite {
        display: block;
        background-color: darkred;
        color: #fff;
    }

    #devtestsite.livesite {
        display: block;
        background-color: #2ab777;
        color: #fff;
    }

    #devtestsite.localhost:before {
        content: "YOU ARE ON LOCALHOST";
    }

    #devtestsite.devsite:before {
        content: "YOU ARE ON THE DEV SITE";
    }

    #devtestsite.stagingsite:before {
        content: "YOU ARE ON THE STAGING SITE";
    }

    #devtestsite.livesite:before {
        content: "YOU ARE ON THE LIVE SITE";
    }

/*##############################
  Languages (Karen) Font styles
##############################*/
@font-face {
    font-family: "karen";
    src: url("/fonts/karen/knu_1.eot");
    src: url("/fonts/karen/knu_1.woff") format("woff"), url("/fonts/karen/knu_1.ttf") format("truetype"), url("/fonts/karen/knu_1.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

.karen-lang {
    font-family: "karen", sans-serif;
}

/* link checking */

.umb-block-list a[href*="safelinks.protection.outlook.com"],
.umb-rte a[href*="safelinks.protection.outlook.com"],
.umb-block-list a[href*="/metrotransit.org"],
.umb-rte a[href*="/metrotransit.org"],
.umb-block-list a[href*=".metrotransit.org"]:not(a[href*="store.metrotransit.org"]),
.umb-rte a[href*=".metrotransit.org"]:not(a[href*="store.metrotransit.org"]) {
    background-color: yellow;
}

main a[href="#"] {
    background-color: lightpink;
}

.footer a[href="#"] {
    border: 1px solid yellow;
}

/* Utilities */

body {
    overflow-x: hidden;
}

    body.gray-bg-100 {
        background-color: var(--bs-light);
    }

.full-width {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Skip to content link */

a.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    transition: top 1s ease-out;
}

    a.skip-to-content:focus {
        background-color: #ed1b2e;
        color: #fff;
        left: 4px;
        padding: 1rem;
        text-decoration: underline;
        top: 4px;
        transition: top 0.1s ease-in;
        z-index: 10;
    }

/* Nav bar */

/* Nav bar - mobile trip tools */
#header .navbar .trip-tools {
    display: flex;
    flex-direction: row;
    margin-right: .5rem
}

@media (min-width: 375px) {
    #header .navbar .trip-tools {
        margin-left: auto
    }
}

@media (min-width: 1200px) {
    #header .navbar .trip-tools {
        display: none
    }
}

#header .navbar .trip-tools a {
    padding: 1rem .5rem;
    position: relative;
    width: 2.5rem;
    height: 3rem;
}

@media (min-width: 375px) {
    #header .navbar .trip-tools a {
        padding: 1.5rem;
        width: 3rem;
    }
}

/* Nav Bar - utilities */
@media (min-width: 1200px) {
    #header .navbar .utilities {
        border-left: 2px solid #e3e3e0;
        margin-right: 0;
        /*padding-left: 1rem;*/
    }
}

#header .navbar .search-dropdown-menu {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    width: 20rem;
}

#header #searchQuery {
    border-radius: 0;
    border: none;
}

#header #siteSearchBtn {
    border: 0;
    height: 3.625rem;
    margin-left: 0.25rem;
}

    #header #siteSearchBtn::before {
        background-image: url("metrotransit/img/svg/search-gray.svg");
    }

#header .navbar .navbar-nav.mobile-menu {
    background-color: #0097d0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: .5rem;
    white-space: nowrap;
    position: relative;
}

    #header .navbar .navbar-nav.mobile-menu .nav-item {
        border-bottom: none;
    }

        #header .navbar .navbar-nav.mobile-menu .nav-item .nav-link {
            height: 3rem;
        }

    #header .navbar .navbar-nav.mobile-menu .dropdown-menu {
        position: absolute;
        right: 3rem;
        left: auto;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: #f5f5f4;
        border: none;
        box-shadow: 0 3px 6px #8a8b8a99;
    }

    #header .navbar .navbar-nav.mobile-menu .dropdown-header {
        font-size: 1rem;
    }

/* Home Page section */

.vue-homeTabs {
    margin-bottom: 2rem;
}

    .vue-homeTabs .home-bg {
        background-image: url("/css/metrotransit/img/home-bg.jpg");
        background-position: 90%;
        background-size: cover;
        background-repeat: no-repeat;
    }

        .vue-homeTabs .home-bg::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(98, 100, 98, 0.5);
        }

/*.vue-homeTabs {
    height: unset;
    padding: 0;
}

    .vue-homeTabs::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 152px;
        background-color: rgba(98, 100, 98, 0.5);
    }

@media (min-width: 992px) {
    .vue-homeTabs::before {
        height: 100%;
    }
}

@media (min-width: 992px) {
    .vue-homeTabs {
        background-image: url("/css/metrotransit/img/home-bg.jpg");
        padding: 3rem 0;
        position: relative;
        width: 100vw;
    }
}

@media only screen and (min-width: 992px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 192dpi), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
    .vue-homeTabs .background-element {
        background-image: url("/css/metrotransit/img/home-bg2x.jpg");
    }
}*/


/* Primary Hero Section	*/
.hero {
    background-size: cover;
    background-position: 90%;
    background-repeat: no-repeat;
    height: 10rem;
}

@media (min-width: 768px) {
    .hero {
        height: 18rem;
    }
}

@media (min-width: 992px) {
    .hero {
        height: 17.2rem;
    }
}

@media (min-width: 1200px) {
    .hero {
        height: 20rem;
    }
}

.primary .page-title {
    position: relative;
    width: 100%;
    height: 160px;
}

@media (min-width: 768px) {
    .primary .page-title {
        height: 240px;
    }
}

@media (min-width: 992px) {
    .primary .page-title {
        height: 275px;
    }
}

@media (min-width: 1200px) {
    .primary .page-title {
        height: 320px;
    }
}

.primary h1 {
    position: absolute;
    bottom: 15px;
    left: 0;
    background-color: #fff;
    color: var(--bs-heading-color); /*#8a8b8a;*/
    opacity: 0.9;
    margin-bottom: 0;
    padding: 1rem;
    width: auto;
}

@media (min-width: 992px) {
    .primary h1 {
        bottom: 45px;
        padding: 1.125rem;
    }
}

/* Secondary banner */

.secondary {
    background-image: url("metrotransit/img/home-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .secondary .background-element {
        background-image: url("metrotransit/img/home-bg2x.jpg");
    }
}

@media (min-width: 1200px) {
    .secondary {
        background-image: unset;
        background-color: #0053a0;
    }
}

.secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 83, 160, 0.68);
    width: 100%;
    height: 100%;
}

.secondary .page-title {
    position: relative;
}

    .secondary .page-title h1 {
        color: #fff;
        margin-bottom: 0;
        padding: 3.125rem 0 0.75rem 0;
    }

@media (min-width: 768px) {
    .secondary .page-title h1 {
        padding-top: 6rem;
        padding-bottom: 1.5rem;
    }
}

.secondary .page-title .route-number {
    color: #ffd200;
    text-transform: uppercase;
}

/* body content for narrower pages */

@media (min-width: 992px) {
    .body-content {
        width: 752px;
        margin: 0 auto;
    }
}

/* section spacing */

.section {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    .section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.section.has-submenu {
    padding-top: 0;
}

/* secondary nav submenu */

.secondary-nav {
    margin-top: 1rem;
    padding-bottom: 2rem;
}

    .secondary-nav .nav .nav-item {
        color: #626462;
    }

        .secondary-nav .nav .nav-item:first-child a {
            padding-left: 0;
        }

@media (min-width: 992px) {
    .secondary-nav {
        padding-bottom: 4rem;
    }

        .secondary-nav .nav .nav-item {
        }
}

.secondary-nav .nav .nav-item a:hover {
    border-bottom: none;
}

.secondary-nav .nav .nav-item a.active span,
.secondary-nav .nav .nav-item a span:hover,
.secondary-nav .nav .nav-item a span:focus {
    color: #626462;
    border-left: 2px solid #0097d0;
    border-bottom: none;
}

@media (min-width: 992px) {
    .secondary-nav .nav .nav-item a.active span,
    .secondary-nav .nav .nav-item a span:hover,
    .secondary-nav .nav .nav-item a span:focus {
        border-bottom: 2px solid #0097d0;
        border-left: none;
    }
}

/* main */


/* footer */

.footer {
    background-color: #0053a0;
    padding: 30px 0
}

@media (min-width: 992px) {
    .footer {
        padding: 60px 0
    }
}

.footer h4 {
    color: #e3e3e0;
    text-transform: uppercase;
    font-size: 1.25rem;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0
}

    .footer ul li a {
        display: inline-block;
        color: #fff;
        font-weight: 700;
        padding: .5rem 0 0;
        text-decoration-color: transparent;
        font-size: 1rem;
    }

        .footer ul li a:hover, .footer ul li a:focus {
            text-decoration-color: #ffffff;
        }

.footer .col {
    margin-bottom: 10px;
    padding-bottom: 10px
}

    .footer .col:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0
    }

@media (min-width: 992px) {
    .footer .col {
        margin-bottom: 30px
    }
}

.footer .copyright {
    color: #fff;
    font-size: .9rem;
    text-align: center;
    margin-top: 2rem;
}

    .footer .copyright a {
        color: #fff;
        text-decoration-color: #ffffff;
        font-weight: 700;
    }

        .footer .copyright a:hover, .footer .copyright a:focus {
            text-decoration-color: #ffffff;
        }

.footer .social-media {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    max-width: 345px;
    margin-bottom: 30px;
}

    .footer .social-media a {
        color: #ffffff;
    }

@media (min-width: 992px) {
    .footer .social-media {
        max-width: 420px;
        margin-bottom: 45px
    }
}

.footer .social-media .icon:before {
    display: block;
    content: "";
    background-size: 37px;
    background-repeat: no-repeat;
    width: 37px;
    height: 37px
}

@media (min-width: 992px) {
    .footer .social-media .icon:before {
        background-size: 50px;
        width: 50px;
        height: 50px
    }
}

.footer .social-media .icon.twitter:before {
    background-image: url("data:image/svg+xml,%3csvg%20id='d.icon.s'%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3e%3cg%20id='m.icon.footer.twitter'%3e%3cg%20id='Ellipse_86'%20data-name='Ellipse%2086'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%3e%3ccircle%20cx='20'%20cy='20'%20r='20'%20stroke='none'/%3e%3ccircle%20cx='20'%20cy='20'%20r='19'%20fill='none'/%3e%3c/g%3e%3c/g%3e%3cpath%20id='X-Logo--Streamline-Ultimate'%20d='M18.135.248a.792.792,0,0,1,.04,1.119L11.733,8.275l7.11,9.437a.792.792,0,0,1-.633,1.268H13.873a.792.792,0,0,1-.633-.315l-5-6.64-6.25,6.7a.792.792,0,0,1-1.158-1.08L7.27,10.741.16,1.3A.792.792,0,0,1,.792.036H5.13a.792.792,0,0,1,.632.315l5,6.64,6.249-6.7a.792.792,0,0,1,1.119-.04ZM10.1,8.738a.79.79,0,0,1-.062-.082l-5.3-7.038H2.379L14.267,17.4h2.355Z'%20transform='translate(10.499%2010.492)'%20fill='%23ffffff'%20fill-rule='evenodd'/%3e%3c/svg%3e")
}

.footer .social-media .icon.facebook:before {
    background-image: url("data:image/svg+xml,%3c!--%20Generated%20by%20IcoMoon.io%20--%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3ctitle%3efacebook-gray%3c/title%3e%3cpath%20fill='%23ffffff'%20d='M8.533%2011.867h-1.2c-0.2%200-0.367-0.167-0.367-0.367v-2.767h-0.7c-0.2%200-0.367-0.167-0.367-0.367v-1.2c0-0.2%200.167-0.367%200.367-0.367h0.7v-0.6c-0.033-0.533%200.167-1.067%200.533-1.433s0.9-0.567%201.433-0.533h0.933c0.2%200%200.367%200.167%200.367%200.367v1.067c0%200.2-0.167%200.367-0.367%200.367h-0.633c-0.2%200-0.233%200.033-0.267%200.067s-0.033%200.067-0.033%200.233v0.467h0.867c0.067%200%200.133%200%200.2%200.033%200.133%200.067%200.2%200.2%200.2%200.333v1.2c0%200.2-0.167%200.367-0.367%200.367h-0.867v2.767c-0.067%200.2-0.233%200.367-0.433%200.367%200%200%200%200%200%200zM7.4%2011.4h1.067v-2.9c0-0.133%200.1-0.233%200.233-0.233h1v-1.033h-1c-0.133%200-0.233-0.1-0.233-0.233v-0.667c0-0.2%200.033-0.367%200.133-0.533%200.167-0.133%200.367-0.233%200.6-0.2h0.567v-0.933h-0.867c-0.933%200-1.5%200.6-1.5%201.533v0.8c0%200.133-0.1%200.233-0.233%200.233h-0.833v1.033h0.833c0.133%200%200.233%200.1%200.233%200.233v2.9zM9.833%204.667v0z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M8%2016c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208zM8%200.667c-4.033%200-7.333%203.3-7.333%207.333s3.3%207.333%207.333%207.333%207.333-3.3%207.333-7.333-3.3-7.333-7.333-7.333z'%3e%3c/path%3e%3c/svg%3e")
}

.footer .social-media .icon.youtube:before {
    background-image: url("data:image/svg+xml,%3c!--%20Generated%20by%20IcoMoon.io%20--%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3ctitle%3eyoutube-gray%3c/title%3e%3cpath%20fill='%23ffffff'%20d='M9.269%207.998l-1.7-0.933c-0.167-0.067-0.333-0.033-0.433%200.133-0.033%200.033-0.033%200.1-0.033%200.133v1.833c0%200.167%200.133%200.3%200.3%200.3%200.067%200%200.1%200%200.133-0.033l1.7-0.9c0.167-0.067%200.2-0.267%200.133-0.433%200-0.033-0.067-0.067-0.1-0.1v0zM7.569%208.965v-1.4l1.267%200.7-1.267%200.7z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M11.869%206.798v0c-0.033-0.333-0.133-0.633-0.333-0.9-0.233-0.233-0.5-0.367-0.833-0.4h-0.033c-1.033-0.067-2.567-0.067-2.6-0.067v0c0%200-1.533%200-2.567%200.1v0h-0.033c-0.333%200-0.633%200.167-0.833%200.4-0.2%200.267-0.3%200.567-0.333%200.867v0c0%200.033-0.067%200.633-0.067%201.267v0.567c0%200.6%200.067%201.233%200.067%201.267v0c0.033%200.333%200.133%200.633%200.333%200.867%200.233%200.233%200.533%200.367%200.867%200.367%200.033%200%200.067%200%200.067%200h0.033c0.6%200.067%202.433%200.067%202.5%200.1v0c0%200%201.533%200%202.567-0.1v0h0.033c0.3-0.033%200.6-0.167%200.8-0.4%200.2-0.267%200.3-0.567%200.333-0.867v0c0-0.033%200.067-0.633%200.067-1.267v-0.533c0.033-0.633-0.033-1.233-0.033-1.267zM11.469%208.632c0%200.567-0.033%201.167-0.067%201.2-0.033%200.233-0.1%200.433-0.233%200.633-0.133%200.167-0.333%200.233-0.533%200.233h-0.033c-0.967%200.067-2.467%200.067-2.533%200.067s-1.9-0.033-2.467-0.067c-0.033%200-0.067%200-0.1%200-0.2%200-0.433-0.1-0.567-0.233v0c-0.133-0.2-0.2-0.4-0.2-0.633%200-0.033-0.067-0.633-0.067-1.2v-0.567c0-0.567%200.033-1.167%200.067-1.2%200.033-0.233%200.1-0.433%200.233-0.633%200.133-0.167%200.333-0.233%200.533-0.267h0.033c1-0.067%202.5-0.067%202.533-0.067s1.533%200%202.533%200.067h0.033c0.2%200%200.4%200.1%200.567%200.233v0c0.133%200.2%200.2%200.4%200.2%200.633%200%200.033%200.067%200.633%200.067%201.2v0.6z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M8%2016c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208zM8%200.667c-4.033%200-7.333%203.3-7.333%207.333s3.3%207.333%207.333%207.333%207.333-3.3%207.333-7.333-3.3-7.333-7.333-7.333z'%3e%3c/path%3e%3c/svg%3e")
}

.footer .social-media .icon.instagram:before {
    background-image: url("data:image/svg+xml,%3c!--%20Generated%20by%20IcoMoon.io%20--%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3ctitle%3einstagram-gray%3c/title%3e%3cpath%20fill='%23ffffff'%20d='M9.829%204.216h-3.467c-1.133%200-2.033%200.9-2.033%202.033v3.467c0%201.133%200.9%202.033%202.033%202.033h3.467c1.133%200%202.033-0.9%202.033-2.033v-3.467c0-1.133-0.9-2.033-2.033-2.033zM11.429%209.716c0%200.9-0.7%201.6-1.6%201.6h-3.467c-0.9%200-1.6-0.7-1.6-1.6v-3.467c0-0.9%200.7-1.6%201.6-1.6%200%200%200%200%200%200h3.467c0.9%200%201.6%200.7%201.6%201.6v3.467z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M8.096%205.916c-1.133%200-2.067%200.933-2.067%202.067s0.933%202.067%202.067%202.067c1.133%200%202.067-0.933%202.067-2.067s-0.933-2.067-2.067-2.067zM8.096%209.616c-0.9%200-1.633-0.733-1.633-1.633s0.733-1.633%201.633-1.633%201.633%200.733%201.633%201.633c0%200.9-0.733%201.633-1.633%201.633v0z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M10.196%205.183c-0.333%200-0.6%200.267-0.6%200.6s0.267%200.6%200.6%200.6%200.6-0.267%200.6-0.6c0.033-0.333-0.233-0.6-0.6-0.6zM10.196%205.983c-0.1%200-0.167-0.067-0.167-0.167s0.067-0.167%200.167-0.167%200.167%200.067%200.167%200.167c0%200.067-0.067%200.167-0.167%200.167z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M8%2016c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208zM8%200.667c-4.033%200-7.333%203.3-7.333%207.333s3.3%207.333%207.333%207.333%207.333-3.3%207.333-7.333-3.3-7.333-7.333-7.333z'%3e%3c/path%3e%3c/svg%3e")
}

.footer .social-media .icon.linkedin:before {
    background-image: url("data:image/svg+xml,%3c!--%20Generated%20by%20IcoMoon.io%20--%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3ctitle%3elinkedin-gray%3c/title%3e%3cpath%20fill='%23ffffff'%20d='M6.894%205.832h-1.267c-0.133%200-0.267%200.1-0.267%200.267%200%200%200%200%200%200v4.767c0%200.133%200.1%200.267%200.267%200.267h1.267c0.133%200%200.267-0.1%200.267-0.267v-4.767c0-0.167-0.133-0.267-0.267-0.267zM6.694%2010.665h-0.9v-4.4h0.9v4.4z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M6.261%203.599c-0.5%200-0.9%200.4-0.9%200.9s0.4%200.9%200.9%200.9%200.9-0.4%200.9-0.9v0c0-0.5-0.4-0.9-0.9-0.9zM6.261%204.965c-0.267%200-0.467-0.2-0.467-0.467s0.2-0.467%200.467-0.467c0.267%200%200.467%200.2%200.467%200.467%200%200%200%200%200%200%200%200.267-0.2%200.467-0.467%200.467z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M11.261%206.399c-0.3-0.267-0.7-0.4-1.1-0.367-0.233%200-0.5%200.067-0.7%200.167v-0.133c0-0.133-0.1-0.233-0.233-0.233v0h-1.3c-0.133%200-0.233%200.1-0.233%200.233v0%204.8c0%200.133%200.1%200.233%200.233%200.233v0h1.3c0.133%200%200.233-0.1%200.233-0.233v-2.867c0-0.233%200.2-0.433%200.433-0.467%200.233%200%200.467%200.2%200.467%200.433%200%200%200%200%200%200v2.867c0%200.133%200.1%200.2%200.2%200.2h1.267c0.133%200%200.2-0.1%200.2-0.2v-2.8c0.033-0.6-0.267-1.233-0.767-1.633zM11.628%2010.665h-0.8v-2.633c0-0.5-0.4-0.9-0.9-0.9s-0.9%200.4-0.9%200.9v2.633h-0.9v-4.4h0.9v0.333c0%200.133%200.1%200.233%200.233%200.233%200.067%200%200.1-0.033%200.133-0.067%200.233-0.2%200.5-0.3%200.8-0.3s0.567%200.1%200.8%200.267c0.4%200.333%200.667%200.867%200.633%201.4v2.533z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M8%2016c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208zM8%200.667c-4.033%200-7.333%203.3-7.333%207.333s3.3%207.333%207.333%207.333%207.333-3.3%207.333-7.333-3.3-7.333-7.333-7.333z'%3e%3c/path%3e%3c/svg%3e")
}

.footer .social-media .icon.flickr:before {
    background-image: url("data:image/svg+xml,%3c!--%20Generated%20by%20IcoMoon.io%20--%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3ctitle%3eflickr-gray%3c/title%3e%3cpath%20fill='%23ffffff'%20d='M6.004%206.389c-0.933%200-1.7%200.767-1.7%201.7s0.767%201.7%201.7%201.7%201.7-0.767%201.7-1.7-0.767-1.7-1.7-1.7c0%200%200%200%200%200zM6.004%209.189c-0.6%200-1.1-0.5-1.1-1.1s0.5-1.1%201.1-1.1%201.1%200.5%201.1%201.1c0%200.6-0.5%201.1-1.1%201.1z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M10.104%206.389c-0.933%200-1.7%200.767-1.7%201.7s0.767%201.7%201.7%201.7%201.7-0.767%201.7-1.7-0.767-1.7-1.7-1.7v0zM10.104%209.189c-0.6%200-1.1-0.5-1.1-1.1s0.5-1.1%201.1-1.1c0.6%200%201.1%200.5%201.1%201.1%200%200%200%200%200%200%200.033%200.6-0.467%201.1-1.1%201.1z'%3e%3c/path%3e%3cpath%20fill='%23ffffff'%20d='M8%2016c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208zM8%200.667c-4.033%200-7.333%203.3-7.333%207.333s3.3%207.333%207.333%207.333%207.333-3.3%207.333-7.333-3.3-7.333-7.333-7.333z'%3e%3c/path%3e%3c/svg%3e")
}


/* auto-resize YouTube iframes by wrapping in these classes */

.video-wrapper-16x9 {
    height: 0px;
    padding-bottom: 56.25%; /* 9/16 */
    margin-bottom: 25px;
    position: relative;
}

.video-wrapper-4x3 {
    height: 0px;
    padding-bottom: 75%; /* 3/4 */
    margin-bottom: 25px;
    position: relative;
}

    .video-wrapper-16x9 iframe, .video-wrapper-4x3 iframe {
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
    }

/* image thumbnails with fixed ratio */

.img-thumbnail-square {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
}

/* Search Results */

.search-sort {
    margin-bottom: 1rem;
}

    .search-sort .btn {
        padding: 0.1rem 0.5rem;
        font-size: 1.125rem;
    }

.search-results {
    overflow: hidden;
}

.search-results-total {
    font-weight: bold;
    margin-bottom: 1rem;
}

.search_result {
    /*margin-bottom: 1rem;*/
}

.search-result-link {
    font-weight: bold;
    font-size: 1.3rem;
}

.search-result-long-ago {
    font-style: italic;
}

.search-result-summary {
    padding: 0.5rem 0;
}


/* News Revamp */

.news-card-deck {
}

main .news-card-deck a {
    color: #62645E;
}

    main .news-card-deck a:hover {
        border-bottom: none;
        color: #0053a0;
    }

main .news-card-deck .card-title {
    font-size: 1.125rem;
    font-weight: 700;
}

@media (min-width: 992px) {
    main .news-card-deck .card-title {
        font-size: 1.4375rem;
        margin-left: 0.5rem;
    }
}

/* don't show text decoration for stretched links in cards or articles */
a.stretched-link {
    text-decoration: none;
}

.article-row {
    padding: 24px 48px; /* may need to adjust padding if removing row shading */
}

    /* remove rule to disable row shading */
    .article-row:nth-child(even) {
        background: #f5f5f4;
    }

.article-card {
    display: flex;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.1875rem 0.375rem rgba(138, 139, 138, 0.6);
    position: relative;
}

.article-image {
    flex: 0 0 35%;
    width: 35%;
    object-fit: cover;
    border-radius: 0.5rem 0 0 0.5rem;
}

.article-content {
    padding: 1rem 1.5rem;
    flex-grow: 1;
}

.article-info {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.article-date {
    font-weight: normal;
    font-style: italic;
}

.article-chevron {
    width: 16px;
    margin-right: 16px;
}

@media (max-width: 420px) {
    .article-row {
        padding: 1rem 0 0.5rem;
    }

        .article-row:nth-child(even) {
            background: none;
        }

    .article-card {
        flex-wrap: wrap;
    }

    .article-image {
        width: 100%;
        min-width: 100%;
        border-radius: 8px 8px 0 0;
    }

    .article-content {
        padding: 16px;
        padding-right: 16px;
        flex: 1 1 200px;
    }

    .article-chevron {
        width: 16px;
        margin-right: 8px;
    }
}

/* Block spacing */

.space-above-small {
    margin-top: 0.67rem;
}

.space-below-small {
    margin-bottom: 0.67rem;
}

.space-above-medium {
    margin-top: 1rem;
}

.space-below-medium {
    margin-bottom: 1rem;
}

.space-above-large {
    margin-top: 1.5rem;
}

.space-below-large {
    margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .space-above-small {
        margin-top: 1rem;
    }

    .space-below-small {
        margin-bottom: 1rem;
    }

    .space-above-medium {
        margin-top: 2rem;
    }

    .space-below-medium {
        margin-bottom: 2rem;
    }

    .space-above-large {
        margin-top: 3rem;
    }

    .space-below-large {
        margin-bottom: 3rem;
    }
}

/* block backgrounds */

.block-bg {
    padding: 0.75rem 1.25rem;
}

    .block-bg p:last-child {
        margin-bottom: 0;
    }

.block-bg-blue {
    background-color: #0053a0;
    color: #fff;
}

.block-bg-cyan {
    background-color: #0097d0;
    color: #fff
}

.block-bg-gray {
    background-color: #f5f5f4;
}

/* background colors */

.blue-bg {
    background-color: #047db5;
    color: #fff;
}

.transit-blue-bg {
    background-color: #0053a0;
    color: #fff;
}

.cyan-bg {
    background-color: #0097d0;
    color: #fff;
}

.green-bg {
    background-color: #008244;
    color: #fff;
}

.line-green-bg {
    background-color: #a5cf4c;
}

.orange-bg {
    background-color: #f68b1f;
    color: #fff;
}

.red-bg {
    background-color: #ed1b2e;
    color: #fff;
}

.teal-bg {
    background-color: #dbf4fd;
}

.yellow-bg {
    background-color: #ffd200;
}

.white-bg {
    background-color: #fff;
}


/* blogs */

.blog-tags {
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 5;
}

a.badge {
    text-decoration: none;
}

.blog-tags a.badge:hover,
.blog-tags a.badge:focus {
    outline: 1px solid #000000;
}

.blog-posted {
    margin-bottom: 1rem;
}

.blog-subtitle {
    margin-bottom: 1rem;
    font-weight: bold;
}

.blog-pagination {
    margin: 1rem 0;
    text-align: center;
}

.great-people-post {
    margin: 2rem 0;
}

.great-people-image {
    margin-bottom: 1rem;
}

.riders-almanac-image {
    margin: 1rem 0;
}

blockquote {
    padding: 1rem 3rem;
    font-style: italic;
}

/* modals */

@media (min-width: 992px) {
    .modal-dialog-downshifted {
        margin-top: 8rem;
    }
}

/* sitewide alerts */

.sitewide-alerts .alert {
    --bs-alert-border-radius: 0;
}

/* Campaign Banner */

.campaign {
    background-image: none;
    margin-bottom: 0;
}

    .campaign .container {
        padding-top: 3rem;
        padding-bottom: 3rem;
        min-height: 10rem;
    }

@media (min-width: 992px) {
    .campaign {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 60%;
        min-height: 21rem;
        margin-bottom: 0;
    }
}

#fares .card,
#fares .card .card-header {
    border-radius: 0;
}

    #fares .card .card-header {
        height: 165px;
        padding: 1.625rem 1.25rem;
    }

#fares .card-body {
    padding-top: 1rem;
}

#fares .gray-bg-100 {
    background-color: #f5f5f4;
}

#fares .btn-container {
    justify-content: center;
}

#fares .popover-position {
    position: absolute;
    right: 2rem;
    top: 1.75rem;
}

#fares .popover-body {
    font-size: 1rem;
}

/* accordion tables */

.table-scroll-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.accordion-body:has(table.accordion-table) {
    padding: 0;
}

table.accordion-table {
    border-collapse: collapse;
    /*table-layout: fixed;*/
    width: 100%;
    margin-bottom: 0
}

    table.accordion-table td {
        vertical-align: middle;
        padding: 0.657rem 0.5rem;
        height: 60px;
    }

    table.accordion-table tr {
        border-color: #e3e3e0
    }

    table.accordion-table caption {
        background-color: #f5f5f4;
        border-top: 1px solid #e3e3e0;
        border-bottom: 2px solid #e3e3e0;
        caption-side: top;
        font-size: 18px;
        height: 50px;
        padding: 0.657rem 0.5rem;
    }

    table.accordion-table .has-icon-left {
        font-weight: bold;
        padding-left: 1.75rem;
        text-wrap: nowrap;
    }

        table.accordion-table .has-icon-left::before {
            width: 1.25rem;
            height: 1.25rem;
        }

@media (min-width: 992px) {
    table.accordion-table caption {
        font-size: 23px;
        height: 60px;
    }

    table.accordion-table .has-icon-left {
        padding-left: 2.75rem;
    }

        table.accordion-table .has-icon-left::before {
            width: 2.25rem;
            height: 2.25rem;
        }
}