/*Pro - BankProducts*/
#support-bank-products .hero-area {
    padding: 0 0 5vh;
    margin-top: 50px;
    background: #f2f5f7
}

@media screen and (max-width: 767px) {
    #support-bank-products .hero-area .hero-content h4 {
        line-height: 1.3em
    }
}

@media screen and (min-width: 768px) {
    #support-bank-products .hero-area {
        margin-top: 74px;
        height: 500px
    }
}

#support-bank-products .hero-area .hero-content h1 {
    font-size: 3em
}

    #support-bank-products .hero-area .hero-content h1:not(.no-gutter-top) {
        padding-top: 5vh
    }

#support-bank-products .hero-area .hero-content h3 {
    font-size: 1.3em;
    line-height: 1.6em;
    font-weight: 400
}

#support-bank-products .hero-area h4 {
    margin: 2em auto 3em
}

#support-bank-products .bank-products {
    margin: 108px auto
}

#support-bank-products .why-bank-products {
    padding: 10vh 0;
    background-image: linear-gradient(to left,rgba(46,137,108,.75) 0,rgba(0,103,154,.75) 100%),url(/cmscontent/tspro/svgs/pro-hash-repeating-bknd.svg)
}

    #support-bank-products .why-bank-products h2 {
        color: #fff;
        font-weight: 700;
        text-align: center
    }

    #support-bank-products .why-bank-products .cards-wrapper .cards {
        background-color: #fff;
        margin: .5em auto
    }

@media screen and (min-width: 769px) {
    #support-bank-products .why-bank-products .cards-wrapper {
        display: flex
    }

        #support-bank-products .why-bank-products .cards-wrapper .cards {
            margin: .5em 2em;
            width: 50%;
            position: relative
        }

            #support-bank-products .why-bank-products .cards-wrapper .cards .card-footer {
                position: absolute;
                bottom: -3em
            }
}

#support-bank-products .why-bank-products .cards-wrapper .cards .card-inner {
    padding: 2em
}

    #support-bank-products .why-bank-products .cards-wrapper .cards .card-inner h3 {
        font-weight: 700;
        font-size: 1.75em
    }

#support-bank-products .why-bank-products .cards-wrapper .cards .card-footer {
    background-color: #f2f5f7;
    width: 100%;
    text-align: center;
    display: block;
    padding: 1em
}

/*Static Content Block*/
#support-bank-products .get-started {
    background-color: #f2f5f7;
    padding: 10vh 0
}

    #support-bank-products .get-started h2 {
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px
    }

    #support-bank-products .get-started ul.stepper {
        counter-reset: section
    }

        #support-bank-products .get-started ul.stepper.horizontal {
            position: relative;
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
            overflow: hidden
        }

            #support-bank-products .get-started ul.stepper.horizontal:first-child {
                margin-top: -20px
            }

            #support-bank-products .get-started ul.stepper.horizontal::before {
                content: '';
                background-color: transparent;
                width: 100%;
                min-height: 84px;
                position: absolute;
                left: 0
            }

@media screen and (min-width: 768px) {
    #support-bank-products .get-started ul.stepper.horizontal {
        display: flex;
        justify-content: space-between
    }
}

#support-bank-products .get-started ul.stepper.horizontal .step {
    width: 100%;
    align-items: center;
    list-style-type: none
}

#support-bank-products .get-started ul.stepper.horizontal .step {
}

    #support-bank-products .get-started ul.stepper.horizontal .step .step-title {
        content: " ";
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex-shrink: 0;
        height: 2.5em;
        width: 2.5em;
        background-color: #f2f5f7;
        border-radius: 50%;
        text-align: center;
        line-height: 2.5em;
        font-weight: 700;
        border: 2px solid #11881B;
        font-size: 1.5em;
        margin: 0 auto;
        position: relative;
        float: left
    }

    #support-bank-products .get-started ul.stepper.horizontal .step .step-title {
    }

        #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-1:after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 2px;
            background-color: #11881b;
            margin: 100% -26% 0;
            position: absolute;
            left: 26%;
            top: 51%;
            float: left;
            transform: rotate(90deg)
        }

        #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-2:before {
            content: '';
            display: inline-block;
            width: 100%;
            height: 2px;
            background-color: #11881b;
            margin: 100% -26% 0;
            position: absolute;
            left: -225%;
            top: 51%;
            transform: rotate(90deg)
        }

        #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-2:after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 2px;
            background-color: #11881b;
            margin: 100% -26% 0;
            position: absolute;
            left: 26%;
            top: 51%;
            transform: rotate(90deg)
        }

@media screen and (min-width: 768px) {
    #support-bank-products .get-started ul.stepper.horizontal .step .step-title {
        float: none;
        font-size: 3em
    }
}

@media screen and (min-width: 768px) {
    #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-1:after {
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }

    #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-2:before {
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }

    #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-2:after {
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }

    #support-bank-products .get-started ul.stepper.horizontal .step .step-title.step-title-3:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: #11881b;
        position: absolute;
        right: 26%;
        top: 51%;
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }
}

#support-bank-products .get-started ul.stepper.horizontal .step .step-content {
    display: block;
    margin: .95em 0 0 1em;
    float: left;
    width: calc(100% - 8em)
}

@media screen and (min-width: 768px) {
    #support-bank-products .get-started ul.stepper.horizontal .step .step-content {
        float: none;
        text-align: center;
        width: auto
    }
}

#support-bank-products .get-started ul.stepper.horizontal .step .step-content h3 {
    font-weight: 700;
    margin-bottom: .25em
}

#support-bank-products .get-started ul.stepper.horizontal .step.active .step-title::before,
#support-bank-products .get-started ul.stepper.horizontal .step.done .step-title::before,
#support-bank-products .get-started ul.stepper:not(.horizontal) .step.active::before,
#support-bank-products .get-started ul.stepper:not(.horizontal) .step.done::before {
    background-color: #2196f3
}

#support-bank-products .bank-products-wrapper h2 {
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px
}

#support-bank-products .bank-products-wrapper p.next-text {
    text-align: center;
    margin-bottom: 4vh
}

#support-bank-products .bank-products-wrapper .bank-products-ind-wrapper {
    margin-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -.5rem;
    margin-left: -.5rem
}

    #support-bank-products .bank-products-wrapper .bank-products-ind-wrapper .bank-products-ind {
        padding: 2em;
        flex-grow: 1;
        flex-basis: 50%;
        box-shadow: 0 0 2px rgba(0,0,0,.25);
        text-align: center
    }

        #support-bank-products .bank-products-wrapper .bank-products-ind-wrapper .bank-products-ind img {
            max-width: 159px;
            height: 74px;
            margin-bottom: 2em
        }

        #support-bank-products .bank-products-wrapper .bank-products-ind-wrapper .bank-products-ind .bank-content ul {
            list-style: none;
            padding: 0;
            margin: 0
        }

            #support-bank-products .bank-products-wrapper .bank-products-ind-wrapper .bank-products-ind .bank-content ul li:first-of-type {
                margin-bottom: .5em
            }

            #support-bank-products .bank-products-wrapper .bank-products-ind-wrapper .bank-products-ind .bank-content ul li:last-of-type {
                margin-bottom: 1em
            }

@media (min-width: 992px) {
    #support-bank-products .bank-products-wrapper .bank-products-ind-wrapper .bank-products-ind {
        flex-basis: 25%
    }
}

#support-bank-products .tax-preparer-guide {
    display: flex;
    justify-content: center;
    align-items: center
}

    #support-bank-products .tax-preparer-guide > div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 15vh auto
    }

    #support-bank-products .tax-preparer-guide h2 {
        font-weight: 700
    }

@media only screen and (max-width: 767px) {
    #support-bank-products .hero-content > .row > div:first-child {
        height: 550px
    }

        #support-bank-products .hero-content > .row > div:first-child > div:last-child {
            display: flex;
            justify-content: center
        }

            #support-bank-products .hero-content > .row > div:first-child > div:last-child > div {
                width: 90% !important;
                font-size: 18px
            }

    #support-bank-products .hero-content br, #support-bank-products .hero-content > .row > div:nth-child(2) {
        display: none
    }

    #support-bank-products .tax-preparer-guide > .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100px;
        margin-bottom: 100px
    }

    #support-bank-products .tax-preparer-guide--img {
        order: 2
    }

    #support-bank-products .tax-preparer-guide--content {
        order: 1
    }

    #support-bank-products .tax-preparer-guide > .container > div:first-of-type > .btn {
        display: none
    }

    #support-bank-products .tax-preparer-guide-cta {
        display: block !important;
        font-size: 18px;
        margin-top: 2vh;
        margin-bottom: 5vh;
        order: 3
    }
}

#support-bank-products .hero-action-container {
    margin: 24px auto
}

    #support-bank-products .hero-action-container img {
        padding: 0 8px
    }

    #support-bank-products .hero-action-container a {
        padding: 4px 8px;
        color: #000;
        white-space: nowrap;
        display: inline-block
    }

#support-bank-products .hero-area .hero-content h1:not(.no-gutter-top) {
    padding-top: 5vh
}

@media screen and (max-width: 1199px) {
    #support-bank-products .hero-area .hero-image img {
        height: auto !important; /* stop skewing the img */
    }
}

/* PrepPaid page */
/* someone used the bank-products page to build the /preppaid page - these are the overrides */

#support-bank-products.preppaid .hero-area .hero-content h1:not(.no-gutter-top) {
    padding-top: 8vh
}

#support-bank-products.preppaid .phone-wrapper {
    display: none !important;
}

@media screen and (max-width: 767px) {
    /* no breadcrumbs so pull it up */
    #support-bank-products.preppaid .hero-area {
        margin-top: 50px !important;
    }
}

/*PreppaidWhoBlock*/
@media screen and (min-width: 992px) {
    #pp-who #pp-who-content {
        margin-top: 22px;
    }
}

@media screen and (max-width: 991px) {
    #pp-who #pp-who-logo {
        margin-top: 22px;
    }
}

/*SignUpPrepPaid - Static Content Block*/
#support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-3:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #11881b;
    margin: 100% -26% 0;
    position: absolute;
    left: -225%;
    top: 51%;
    transform: rotate(0)
}

#support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-3:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #11881b;
    margin: 100% -26% 0;
    position: absolute;
    left: 26%;
    top: 51%;
    transform: rotate(0)
}

@media screen and (min-width: 768px) {
    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-3:before {
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }

    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-3:after {
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }

    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-4:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: #11881b;
        position: absolute;
        right: 26%;
        top: 51%;
        float: none;
        margin: 0 100%;
        transform: rotate(0)
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title {
        font-size: 1.5em;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title {
        font-size: 2.8em;
    }
}

@media screen and (max-width: 767px) {
    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-3:before {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: #11881b;
        margin: 100% -26% 0;
        position: absolute;
        left: -225%;
        top: 51%;
        transform: rotate(90deg)
    }

    #support-bank-products.preppaid #pp-who-get-started.get-started ul.stepper.horizontal .step .step-title.step-title-3:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: #11881b;
        margin: 100% -26% 0;
        position: absolute;
        left: 26%;
        top: 51%;
        transform: rotate(90deg)
    }
}

/*PreppaidImageBlock*/
.preppaid-container {
    max-width: 1200px;
    margin: 3em auto;
    width: 100%;
    color: #333740
}

    .preppaid-container .video-sections {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap
    }

        .preppaid-container .video-sections .video-section {
            width: 360px;
        }

            .preppaid-container .video-sections .video-section .btn {
                margin: 0 auto;
                max-width: 185px;
                display: block;
            }

            .preppaid-container .video-sections .video-section p {
                opacity: 1;
                color: rgba(0,0,0,1);
                font-size: 20px;
                font-weight: 400;
                font-style: normal;
                letter-spacing: -0.01px;
                text-align: center;
                line-height: 32px;
            }

@media (min-width:950px) {
    .preppaid-container .video-sections .video-section .video-section-img {
        max-width: 100%;
    }

    .preppaid-container .video-sections .video-section p {
        margin-top: 24px;
        margin-bottom: 24px;
        min-height: 100px;
        width: 330px;
        margin-left: 20px;
    }
}

@media (min-width:768px) and (max-width:900px) {
    .preppaid-container .video-sections .video-section .video-section-img {
        max-width: 100%;
        height: 167.66px;
        margin-left: 4px;
    }

    .preppaid-container .video-sections .video-section {
        width: 30%
    }

        .preppaid-container .video-sections .video-section p {
            margin-top: 24px;
            margin-bottom: 24px;
            min-height: 75px;
            width: 229px;
        }
}

@media (min-width:350px) and (max-width:760px) {
    .preppaid-container .video-sections .video-section .video-section-img {
        height: 264px;
        margin-left: 2px;
    }

    .preppaid-container .video-sections .video-section p {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .preppaid-container .video-sections .video-section .btn {
        margin-bottom: 88px !important;
    }
}