/* Join MTPD */


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

body.drive {
    color: var(--bs-body-color);
    background-color: #f5f5f4; 
}

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

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

.drive .container-fluid,
.drive .container-sm,
.drive .container-md,
.drive .container-lg,
.drive .container-xl {
    padding-right: 0;
    padding-left: 0
}

.drive .container {
    max-width: 1140px;
    padding-right: .9375rem;
    padding-left: .9375rem
}

@media (min-width: 1200px) {
    .drive .container {
        padding-right:0;
        padding-left: 0
    }
}
.drive .header {
    background-color: var(--bs-transit-blue);
}


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

.drive .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) {
    .drive .navbar .navbar-brand {
        height:7.3125rem;
        padding-top: calc(var(--bs-spacer) * 2);
        padding-bottom: calc(var(--bs-spacer) * 2)
    }
}

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

@media (min-width: 992px) {
    .drive .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) {
    .drive .navbar .navbar-brand:before {
        background-image:url(/css/metrotransit/img/svg/mt-logo-white.svg);
        width: 19.75rem;
        height: 3.25rem
    }
}

.drive .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) {
    .drive .navbar .navbar-toggler {
        font-size:var(--bs-font-size-base);
        padding-right: calc(var(--bs-spacer) * 1.5)
    }
}

.drive .navbar .navbar-toggler:before {
    content: none
}

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

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

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

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

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

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

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

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

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

.drive .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) {
    .drive .navbar .navbar-nav .nav-link {
        font-size: calc(var(--bs-font-size-base) * 1.5);
        padding: 0 0 calc(var(--bs-spacer) * .25) 0
    }
}

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

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

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

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


.drive .mt-bg-gold {
    min-height: 105px;
    padding-top: 38px;
    padding-bottom: 22px;
    background-image: url(/css/metrotransit/drive/home-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--mt-bg-gold);
}


@media (min-width: 992px) {
    .drive .mt-bg-gold {
        height:183px;
        padding-top: 72px;
        padding-bottom: 31px;
    }
}

.drive .alert-primary a {
    color: #0053a0;
    font-weight: 700;
    text-decoration: underline
}

.drive .alert.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-link-color: var(--bs-primary-text-emphasis)
}

.drive .alert.alert-primary p {
    color: rgb(0, 33, 64);
}

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

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

@media (min-width: 992px) {
    .drive .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) {
    .drive .body-content {
        width: auto;
        padding-top: calc(var(--bs-spacer) * 2);
        padding-bottom: calc(var(--bs-spacer) * 2)
    }
}

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



.drive h1 {
    color: #0053a0;
    letter-spacing: .5rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-size: 2.0000025rem;
    font-size: 2rem;
    /*padding-top: calc(var(--bs-spacer) * 1.14375);*/
    /*padding-bottom: calc(var(--bs-spacer) * 1.14375)*/
}

@media (min-width: 992px) {
    .drive h1 {
        font-size:4.25rem;
        letter-spacing: 0.9rem;
        margin-bottom: 0;
        /*padding-top: calc(var(--bs-spacer) * 1.2005);*/
        /*padding-bottom: calc(var(--bs-spacer) * 1.2005)*/
    }
}

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

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

.drive h3 {
    font-size: 1.1875rem
}

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

.drive h4 {
    font-size: 1.125rem
}

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

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

@media (min-width: 768px) {
    .drive .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) {
    .drive .hero-container {
        background-position:0 0,100% 30%;
        background-size: auto,57%
    }
}

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

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

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

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

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

.drive .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) {
    .drive .hero-image {
        display:none
    }
}

.drive .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) {
    .drive .hero-title {
        font-size:3.4375rem;
        max-width: 20.313rem
    }
}

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

.drive .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) {
    .drive .hero-title:after {
        right:2rem
    }
}

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

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

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

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

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

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

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

.drive .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%)
}



.drive .footer {
    background-color: #ffffff;
    padding: 1rem;
}

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

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

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

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

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

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

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

.drive .footer .logo {
    width: 140px
}

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

.drive h1,
.drive h2,
.drive h3,
.drive h4 {
    font-weight: 700!important;
    margin-bottom: 0
}

.drive h1 {
    font-size: 31px
}

@media (min-width: 992px) {
    .drive h1 {
        font-size:68px
    }
}

.drive h2 {
    font-size: 23px;
    margin-bottom: .5rem
}

@media (min-width: 992px) {
    .drive h2 {
        font-size:32px
    }
}

.drive h3 {
    font-size: 19px;
    margin-bottom: .9375rem
}

@media (min-width: 992px) {
    .drive h3 {
        font-size:28px
    }
}

.drive h4 {
    font-size: 18px
}

@media (min-width: 992px) {
    .drive h4 {
        font-size:23px
    }
}

.drive p.lead {
    font-size: 18px
}

@media (min-width: 992px) {
    .drive p.lead {
        font-size:20px
    }
}

.drive p.small {
    font-size: 14px!important
}

@media (min-width: 992px) {
    .drive p.small {
        font-size:16px!important;
        line-height: 1.3
    }
}

.drive .blockquote {
    color: #fff;
    margin-bottom: 1rem!important;
    text-align: left;
    font-style: normal;
}

.drive .blockquote p {
    font-size: 32px!important
}

@media (min-width: 992px) {
    .drive .blockquote p {
        font-size:42px!important
    }
}

.drive .blockquote-footer {
    text-align: center;
    margin: 0;
    font-size: 16px
}

.drive .blockquote-footer .cite {
    font-style: normal
}

.drive .blockquote {
    margin-bottom: .9375rem;
    font-size: calc(1.28125rem + .375vw)
}

@media (min-width: 1200px) {
    .drive .blockquote {
        font-size:1.5625rem
    }
}

.drive .blockquote>:last-child {
    margin-bottom: 0
}

.drive .blockquote-footer {
    margin-top: -.9375rem;
    margin-bottom: .9375rem;
    font-size: .875em;
    color: #fff
}

.drive .blockquote-footer:before {
    content: "— "
}


.drive .yellow {
    color: #ffd200;
    font-weight: 700
}

.drive .bg-gray-100 {
    /*background-color: #f5f5f4*/
}

.drive .bg-gray-100 {
    /*color: #0097d0*/
}

.drive .bg-gray-100 a {
    font-weight: 700
}

.drive .bg-gray-100 a:hover,
.drive .bg-gray-100 a:focus {
}

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

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

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

.drive .bg-cyan a {
    color: #fff;
    font-weight: 700
}

.drive .bg-cyan a:hover,
.bg-cyan a:focus {
    text-decoration-color: #fff;
}

.drive .bg-yellow {
    background-color: #ffd200!important
}

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

.drive .btn-container {
    display: flex;
    flex-wrap: wrap
}

.drive .btn-container.center {
    justify-content: center
}

.drive .btn {
    /*height: 50px;*/
    line-height: 1.6;
    min-width: 220px
}

@media (min-width: 992px) {
    .drive .btn {
        font-size:calc(1.26875rem + .225vw);
        height: 60px;
        min-width: 270px;
        padding: .672rem 3rem
    }
}

@media (min-width: 992px) and (min-width: 1200px) {
    .drive .btn {
        font-size:1.4375rem
    }
}

.drive .btn-anchor {
    background-color: #fff;
    border: 2px solid #0053a0;
    color: #626462;
    width: 220px!important;
    padding: .5rem 1.616rem;
    position: relative
}

@media (min-width: 992px) {
    .drive .btn-anchor {
        min-width:220px;
        padding-top: .672rem;
        padding-bottom: .672rem
    }
}

.drive .btn-anchor:hover,
.drive .btn-anchor:focus {
    background-color: #dbf4fd;
    border: 2px solid #0097d0;
    color: #0097d0
}

.drive .btn-primary,
.drive .btn-link-primary {
    position: relative;
    background-color: #0053a0;
    color: #fff;
    border: 2px solid #0053a0
}

.drive .btn-primary.has-icon-right:after,
.drive .btn-link-primary.has-icon-right:after {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    top: 50%;
    right: .75rem;
    width: 1.25rem;
    height: 1.25rem
}

.drive .hero .btn-primary.has-icon-right:after,
.drive .hero .btn-link-primary.has-icon-right:after {
    top: 50%;
}

@media (min-width: 992px) {
    .drive .btn-primary.has-icon-right:after,
    .drive .btn-link-primary.has-icon-right:after {
        top: 50%;
        background-size: 1.25rem;
        width: 1.25rem;
        height: 1.25rem
    }

    .drive .hero .btn-primary.has-icon-right:after,
    .drive .hero .btn-link-primary.has-icon-right:after {
        top: 1.8rem
    }
}

.drive .btn-primary:hover,
.drive .btn-primary:focus,
.drive .btn-link-primary:hover,
.drive .btn-link-primary:focus {
    background-color: #002b54;
    border: 2px solid #0053a0;
    color: #fff
}

.drive .hero-bg {
    background-image: url(/css/metrotransit/drive/home-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.drive .hero-bg.primary {
    display: flex;
    align-items: center;
    height: 210px;
}

@media (min-width: 992px) {
    .drive .hero-bg.primary {
        height:365px;
        padding: 1rem .5rem
    }
}

@media (min-width: 1200px) {
    .drive .hero-bg.primary {
        display:flex
    }
}

.drive .hero {
    height: 10rem;
}

@media (min-width: 992px) {
    .drive .hero {
        height: 17.2rem;
    }
}
@media (min-width: 1200px) {
    .drive .landing .hero {
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0;
        padding-left: 0
    }
}

.drive .landing .hero .flex-container {
    margin-bottom: 1rem;
    text-align: center
}

@media (min-width: 1200px) {
    .drive .landing .hero .flex-container {
        display:flex;
        align-items: center;
        margin-bottom: 0
    }
}

.drive .landing .hero .btn-container {
    justify-content: center
}

@media (min-width: 1200px) {
    .landing .hero .btn-container {
        align-items:flex-end;
        height: 152px
    }
}

.drive .landing .hero h1,
.drive .landing .hero .h1 {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem
}

@media (min-width: 1200px) {
    .drive .landing .hero h1,
    .drive .landing .hero .h1 {
        margin-bottom:0;
        text-align: left
    }
}

.drive .landing .hero .hero-text {
    color: #0053a0;
    text-transform: uppercase;
    margin-bottom: 1rem
}

.drive .landing .hero .hero-text .text-top {
    display: block;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: .27rem;
    line-height: 1.2;
    word-spacing: .51rem
}

@media (min-width: 992px) {
    .drive .landing .hero .hero-text .text-top {
        font-size:68px;
        letter-spacing: .6rem;
        line-height: .7;
        margin-left: -.6rem;
        word-spacing: 1rem
    }
}

@media (min-width: 1200px) {
    .drive .landing .hero .hero-text .text-top {
        letter-spacing:.6rem;
        margin-left: -1.25rem
    }
}

.drive .landing .hero .hero-text .text-bottom {
    display: block;
    font-size: 69px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 9px;
    line-height: .8
}

@media (min-width: 992px) {
    .drive .landing .hero .hero-text .text-bottom {
        font-size:150px;
        letter-spacing: 1.4rem;
        line-height: .9;
        margin-left: 8px
    }
}

@media (min-width: 1200px) {
    .drive .landing .hero .hero-text .text-bottom {
        margin-left:-4px;
        line-height: 1
    }
}

.drive .landing .container-custom {
    padding: 1rem;
    width: 100%
}

@media (min-width: 768px) {
    .drive .landing .container-custom {
        padding:2rem 1rem;
        margin: 0 auto;
        width: 540px
    }
}

@media (min-width: 992px) {
    .drive .landing .container-custom {
        padding:3rem 0;
        width: 725px
    }
}

@media (min-width: 1200px) {
    .drive .landing .container-custom {
        margin:0;
        padding-right: 3rem;
        width: 570px
    }
}

@media (min-width: 1200px) {
    .drive .landing .container-custom.left {
        float:right;
        padding-left: 0rem
    }
}

@media (min-width: 1200px) {
    .drive .landing .container-custom.right {
        padding-right:0;
        padding-left: 6rem
    }
}

.drive .landing h2 {
    position: relative
}

@media (min-width: 768px) {
    .drive .landing h2 {
        margin-left:-4rem;
        padding-left: 4rem
    }
}

.drive .landing h2:before {
    content: "";
    display: flex;
    margin: 0 auto 1rem;
    background-size: 30px 30px;
    width: 30px;
    height: 30px
}

@media (min-width: 768px) {
    .drive .landing h2:before {
        position:absolute;
        left: 0
    }
}

@media (min-width: 992px) {
    .drive .landing h2:before {
        background-size:40px 40px;
        width: 40px;
        height: 40px
    }
}

.drive .landing h2.wages-icon:before,
.drive .landing .wages-icon.h2:before {
    background-image: url(/css/metrotransit/drive/wages-gray.svg)
}

.drive .landing h2.support-icon:before,
.drive .landing .support-icon.h2:before {
    background-image: url(/css/metrotransit/drive/support-white.svg)
}

.drive .landing h2.safety-icon:before,
.drive .landing .safety-icon.h2:before {
    background-image: url(/css/metrotransit/drive/safety-white.svg)
}

.drive .landing h2.diversity-icon:before,
.drive .landing .diversity-icon.h2:before {
    background-image: url(/css/metrotransit/drive/diversity-gray.svg)
}

.drive .landing h2.technology-icon:before,
.drive .landing .technology-icon.h2:before {
    background-image: url(/css/metrotransit/drive/technology-white.svg)
}

.drive .landing h2.apply-icon:before,
.drive .landing .apply-icon.h2:before {
    background-image: url(/css/metrotransit/drive/apply-gray.svg)
}

.drive .landing p {
    font-size: 20px;
    line-height: 1.2
}

@media (min-width: 992px) {
    .drive .landing p {
        font-size:23px;
        line-height: 1.5
    }
}

.drive .landing p:last-child {
    margin-bottom: 0
}

.drive .landing .row {
    margin-right: 0!important;
    margin-left: 0!important
}

.drive .landing .row .col-xl-6 {
    padding-right: 0!important;
    padding-left: 0!important
}

.drive .landing .transit-blue-bg {
    padding: 2rem 0
}

@media (min-width: 1200px) {
    .drive .landing .transit-blue-bg {
        height:405px;
        padding: 0
    }
}

.drive .landing .quote-bg {
    background-image: url(/css/metrotransit/drive/background-quotes-y.png);
    background-repeat: no-repeat;
    background-size: 107%;
    background-position: bottom;
    height: 500px;
    padding: 2rem 0
}

@media (min-width: 768px) {
    .drive .landing .quote-bg {
        background-size:57%;
        background-position: center;
        height: 530px
    }
}

@media (min-width: 992px) {
    .drive .landing .quote-bg {
        height:597px;
        background-size: 60%
    }
}

@media (min-width: 1200px) {
    .drive .landing .quote-bg {
        background-image:url(/css/metrotransit/drive/background-quotes-x.png);
        background-position: center right;
        background-size: 100%;
        width: 1140px;
        height: 405px;
        padding: 0
    }
}

.drive .landing .quote-bg .avatar {
    background-image: url(/css/metrotransit/drive/frame-quote-y.png),
    url(/css/metrotransit/drive/operator-quote-sm.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 212px;
    margin: 0 auto;
    margin-bottom: 2rem
}

@media (min-width: 1200px) {
    .drive .landing .quote-bg .avatar {
        display:inline-block;
        background-image: url(/css/metrotransit/drive/frame-quote-x.png),
        url(/css/metrotransit/drive/operator-quote-lg.jpg);
        background-position: left;
        width: 475px;
        height: 405px;
        margin: 0
    }
}

.drive .landing .quote-bg .figure {
    position: relative;
    margin: 0 1rem
}

@media (min-width: 992px) {
    .drive .landing .quote-bg .figure {
        margin:3rem 2rem;
        top: -1rem
    }
}

@media (min-width: 1200px) {
    .drive .landing .quote-bg .figure {
        margin:0!important;
        top: -9rem;
        width: 660px
    }
}

.drive .landing .quote-bg .blockquote {
    text-align: center;
    padding: 0;
}

@media (min-width: 768px) {
    .drive .landing .quote-bg .blockquote {
        margin:0 13.5rem
    }
}

@media (min-width: 992px) {
    .drive .landing .quote-bg .blockquote {
        margin:2rem 14rem
    }
}

@media (min-width: 1200px) {
    .drive .landing .quote-bg .blockquote {
        margin:0 4rem
    }
}


.drive .hero-bg {
    min-height: 105px;
    padding-top: 38px;
    padding-bottom: 22px
}

@media (min-width: 992px) {
    .drive .hero-bg {
        height:183px;
        padding-top: 72px;
        padding-bottom: 31px
    }
}

.drive .flex-container {
    margin-bottom: 1rem
}

@media (min-width: 992px) {
    .drive .flex-container {
        display:flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0
    }
}

.drive .btn-container {
    justify-content: center
}

@media (min-width: 1200px) {
    .drive .btn-container {
        align-items:center
    }
}

.drive h1 {
    color: #0053a0;
    letter-spacing: .5rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1rem
}

@media (min-width: 992px) {
    .drive h1 {
        letter-spacing:.9rem;
        margin-bottom: 0
    }
}

.drive a:hover,
.drive a:active {
}

.drive .section {
    position: relative;
    padding: 1rem 0
}

@media (min-width: 992px) {
    .drive .section {
        padding:3rem 0
    }
}

@media (min-width: 1200px) {
    .drive .section .container {
        min-height:545px
    }
}

.drive .section .container .container-text {
    line-height: 1.3
}

@media (min-width: 1200px) {
    .drive .section .container .container-text {
        width:570px
    }
}

.container-media {
        margin: 1rem auto;
}

@media (min-width: 768px) {
    .drive .section .container .container-media {
        text-align: center
    }

    .drive .section .container .container-media img {
        max-width: 400px
    }
}

@media (min-width: 1200px) {
    .drive .section .container .container-media {
        display:none
    }
}

.drive .background-container {
    background-color: #f5f5f4;
}

@media (max-width: 1200px) {
    .drive .background-container {
        background-image: none!important;
    }
}
@media (min-width: 1200px) {
    .drive .background-container {
        background-color:#f5f5f4;
        background-position: top right;
        background-repeat: no-repeat;
        display: block;
    }

    .drive .background-container.benefits {
        background-image: url(/css/metrotransit/drive/benefits-xl.jpg)
    }

    .drive .background-container.training {
        background-image: url(/css/metrotransit/drive/training-xl.jpg)
    }

    .drive .background-container.diversity-inclusion {
        background-image: url(/css/metrotransit/drive/equity-xl.jpg)
    }

    .drive .background-container.safety-technology {
        background-image: url(/css/metrotransit/drive/safety-xl.jpg)
    }

    .drive .background-container.apply {
        background-image: url(/css/metrotransit/drive/apply-xl.jpg)
    }
}