/* Join MTPD */


.join-mtpd {
    --mt-bg-blue: #0053a0;
    --mt-bg-gold: #ffd200;
    --mt-bg-gray: #f5f5f4
}

.join-mtpd .navbar {
    background-color: var(--bs-transit-blue);
}

.join-mtpd .header {
    background-color: var(--bs-transit-blue);
}

.join-mtpd .microsite-alert-banner {
    padding: 1rem 0;
}

@media (min-width: 992px) {
    .join-mtpd .navbar {
        height:7.5rem
    }
}

.join-mtpd .navbar .navbar-brand {
    margin-left: calc(var(--bs-spacer) * -1);
    padding-top: calc(var(--bs-spacer) * 1.234375);
    padding-bottom: calc(var(--bs-spacer) * 1.234375)
}

@media (min-width: 992px) {
    .join-mtpd .navbar .navbar-brand {
        height:7.3125rem;
        padding-top: calc(var(--bs-spacer) * 2);
        padding-bottom: calc(var(--bs-spacer) * 2)
    }
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .navbar-brand {
        margin-top:0;
        margin-bottom: 0
    }
}

@media (min-width: 992px) {
    .join-mtpd .navbar .navbar-brand:before {
        background-image:url(/css/metrotransit/img/svg/mt-logo-white.svg);
        width: 19.75rem;
        height: 3.25rem
    }
}

@media (min-width: 992px) {
    .join-mtpd .navbar .navbar-brand:before {
        background-image:url(/css/metrotransit/img/svg/mt-logo-white.svg);
        width: 19.75rem;
        height: 3.25rem
    }
}

.join-mtpd .navbar .navbar-toggler {
    border-bottom: 2px solid transparent;
    color: #fff;
    border: none;
    padding-top: calc(var(--bs-spacer) * .5);
    padding-right: calc(var(--bs-spacer) * 1.75);
    padding-bottom: calc(var(--bs-spacer) * .5);
    text-transform: uppercase;
    font-size: var(--bs-font-size-sm)
}

@media (min-width: 992px) {
    .join-mtpd .navbar .navbar-toggler {
        font-size:var(--bs-font-size-base);
        padding-right: calc(var(--bs-spacer) * 1.5)
    }
}

.join-mtpd .navbar .navbar-toggler:before {
    content: none
}

.join-mtpd .navbar .navbar-toggler.has-icon-right:after {
    width: .75rem;
    height: .75rem
}

@media (min-width: 992px) {
    .join-mtpd .navbar .navbar-toggler.has-icon-right:after {
        width:1rem;
        height: 1rem
    }
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .offcanvas {
        margin-top:calc(var(--bs-spacer) * 1)
    }
}

.join-mtpd .navbar .offcanvas-body {
    background-color: var(--bs-transit-blue)
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .offcanvas-body {
        margin-left:auto
    }
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .navbar-nav {
        margin-left:auto
    }
}

.join-mtpd .navbar .navbar-nav .nav-item {
    border-bottom: 1px solid #e3e3e0
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .navbar-nav .nav-item {
        border-bottom:none;
        padding-right: var(--bs-spacer);
        padding-left: var(--bs-spacer)
    }
}

.join-mtpd .navbar .navbar-nav .nav-item:focus-visible {
    outline: none;
    outline-offset: 0
}

.join-mtpd .navbar .navbar-nav .nav-link {
    border-bottom: 2px solid transparent;
    color: #fff;
    opacity: .7;
    padding: calc(var(--bs-spacer) * .5) var(--bs-spacer);
    position: relative
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .navbar-nav .nav-link {
        font-size:var(--bs-font-size-lg);
        padding: 0 0 calc(var(--bs-spacer) * .25) 0
    }
}

.join-mtpd .navbar .navbar-nav .nav-link:hover,
.join-mtpd .navbar .navbar-nav .nav-link:focus,
.join-mtpd .navbar .navbar-nav .nav-link:active,
.join-mtpd .navbar .navbar-nav .nav-link.active {
    border-bottom: 2px solid #0097d0;
    color: #fff;
    opacity: 1
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .navbar-nav .nav-link:hover,
    .join-mtpd .navbar .navbar-nav .nav-link:focus,
    .join-mtpd .navbar .navbar-nav .nav-link:active,
    .join-mtpd .navbar .navbar-nav .nav-link.active {
        background-color:inherit
    }
}

@media (min-width: 992px) {
    .join-mtpd .navbar .navbar-nav .nav-link.active {
        background-color:var(--bs-transit-blue);
        border-bottom: 2px solid #0097d0
    }
}

@media (min-width: 1200px) {
    .join-mtpd .navbar .navbar-nav .nav-link:focus-visible {
        outline:none;
        outline-offset: 0
    }
}


.join-mtpd .body-content {
    padding-bottom: var(--bs-spacer);
    position: relative;
    width: auto;
}

@media (min-width: 992px) {
    .join-mtpd .body-content {
        padding-top:var(--bs-spacer)
    }
}

@media (min-width: 992px) {
    .join-mtpd .body-content {
        display:flex;
        gap: var(--bs-spacer);
        padding-top: calc(var(--bs-spacer) * 2);
        padding-bottom: calc(var(--bs-spacer) * 2)
    }
}


@media (min-width: 992px) {
    .join-mtpd .body-content {
        width: auto;
        padding-top: calc(var(--bs-spacer) * 2);
        padding-bottom: calc(var(--bs-spacer) * 2)
    }
}

.join-mtpd .body-content p + ul
{
    margin-top: calc(var(--bs-spacer) * -1);
}

.mt-bg-gold {
    background-color: var(--mt-bg-gold)
}

.join-mtpd h1 {
    font-size: 2.0000025rem;
    padding-top: calc(var(--bs-spacer) * 1.14375);
    padding-bottom: calc(var(--bs-spacer) * 1.14375)
}

@media (min-width: 992px) {
    .join-mtpd h1 {
        font-size:3rem;
        padding-top: calc(var(--bs-spacer) * 1.2005);
        padding-bottom: calc(var(--bs-spacer) * 1.2005)
    }
}

.join-mtpd h2 {
    font-weight: 400;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .join-mtpd h2 {
        font-size:2rem
    }
}

.join-mtpd h3 {
    font-size: 1.1875rem
}

@media (min-width: 992px) {
    .join-mtpd h3  {
        font-size:1.75rem
    }
}

.join-mtpd h4 {
    font-size: 1.125rem
}

@media (min-width: 992px) {
    .join-mtpd h4 {
        font-size:1.4375rem
    }
}

.join-mtpd .hero-container {
    background-color: #21345e;
}

@media (min-width: 768px) {
    .join-mtpd .hero-container {
        background:linear-gradient(to right,#21345E 0%,#21345E 50%,transparent 50%),url(/css/metrotransit/joinMTPD/mtpd-photo-home.jpg);
        background-repeat: no-repeat,no-repeat;
        background-position: 0 0,100% 10%;
        background-size: auto,60%;
        width: 100vw
    }
}

@media (min-width: 992px) {
    .join-mtpd .hero-container {
        background-position:0 0,100% 30%;
        background-size: auto,57%
    }
}

@media (min-width: 1200px) {
    .join-mtpd .hero-container {
        background-position:0 0,100% 30%;
        background-size: auto,50%
    }
}

.join-mtpd .hero-content {
    background-color: #21345e;
    position: relative;
    padding-top: calc(var(--bs-spacer) * 4);
    padding-bottom: var(--bs-spacer)
}

@media (min-width: 768px) {
    .join-mtpd .hero-content {
        width:50%
    }
}

@media (min-width: 992px) {
    .join-mtpd .hero-content {
        padding-top:calc(var(--bs-spacer) * 5.25);
        padding-bottom: calc(var(--bs-spacer) * 5.25)
    }
}

.join-mtpd .hero-image {
    min-height: 15.1875rem;
    position: relative
}

.join-mtpd .hero-image:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    background-image: url(/css/metrotransit/joinMTPD/mtpd-photo-home.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    min-height: 15.1875rem
}

@media (min-width: 768px) {
    .join-mtpd .hero-image {
        display:none
    }
}

.join-mtpd .hero-title {
    color: var(--bs-transit-gold);
    font-size: 3rem;
    font-weight: var(--bs-font-weight-bold);
    text-transform: uppercase;
    line-height: 1;
    max-width: 18.5rem;
    position: relative
}

@media (min-width: 360px) {
    .join-mtpd .hero-title {
        font-size:3.4375rem;
        max-width: 20.313rem
    }
}

@media (min-width: 992px) {
    .join-mtpd .hero-title {
        font-size:4.625rem;
        max-width: 100%
    }
}

.join-mtpd .hero-title:after {
    content: "";
    position: absolute;
    top: -3rem;
    right: 0;
    background-image: url(/css/metrotransit/joinMTPD/mtpd-patch.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 4.25rem;
    height: 5.1875rem
}

@media (min-width: 992px) {
    .join-mtpd .hero-title:after {
        right:2rem
    }
}

@media (min-width: 1200px) {
    .join-mtpd .hero-title:after {
        top:-4rem;
        right: 7rem;
        width: 6.375rem;
        height: 7.8125rem
    }
}

.join-mtpd .hero-subtitle {
    color: var(--bs-white);
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 400
}

@media (min-width: 360px) {
    .join-mtpd .hero-subtitle {
        font-size:1.625rem
    }
}

@media (min-width: 1200px) {
    .join-mtpd .hero-subtitle {
        font-size:2.25rem
    }
}

.join-mtpd .hero-subtitle span {
    padding-bottom: .125rem
}

@media (min-width: 992px) {
    .join-mtpd .hero-subtitle span {
        padding-bottom:.25rem
    }
}

.join-mtpd .hero-subtitle span+span {
    position: relative;
    margin-left: calc(var(--bs-spacer) * 1.5)
}

.join-mtpd .hero-subtitle span+span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1rem;
    width: .4125rem;
    height: .4125rem;
    background-color: var(--bs-transit-gold);
    border-radius: 50%;
    transform: translateY(-50%)
}



.join-mtpd .footer {
    background-color: #f5f5f4;
    padding: 1rem;
}

@media (min-width: 992px) {
    .join-mtpd .content,
    .join-mtpd .content-img {
        align-items:flex-start;
        gap: 1rem;
        padding-top: 0
    }
}

@media (min-width: 992px) {
    .join-mtpd .content .content-image-wrap,
    .join-mtpd .content .content-copy,
    .join-mtpd .content-img .content-image-wrap,
    .join-mtpd .content-img .content-copy {
        flex:0 0 50%;
        max-width: 50%;
        min-width: 0
    }
}

.join-mtpd .content .content-image-wrap,
.join-mtpd .content-img .content-image-wrap {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: visible;
    width: 100vw
}

@media (min-width: 992px) {
    .join-mtpd .content .content-image-wrap,
    .join-mtpd .content-img .content-image-wrap {
        left:auto;
        margin-left: 0;
        width: 100%;
        margin-top: calc(var(--bs-spacer) * -6)
    }
}

.join-mtpd .content .content-copy,
.join-mtpd .content-img .content-copy {
    padding-top: var(--bs-spacer)
}

@media (min-width: 992px) {
    .join-mtpd .content .content-copy,
    .join-mtpd .content-img .content-copy {
        padding-top:calc(var(--bs-spacer) * 2)
    }
}

@media (min-width: 992px) {
    .join-mtpd .footer {
        padding:3rem
    }
}

.join-mtpd .footer .logo {
    width: 140px
}

@media (min-width: 992px) {
    .join-mtpd .footer .logo {
        width:316px
    }
}