@charset "UTF-8";
/* CSS Document */

.wrapper {
    margin: 0 auto;
    max-width: 100%;
    padding: 0 30px;
    transition:padding .3s ease-in-out
}

@media (min-width: 320px) and(max-width: 479px) {
    .wrapper {
        padding:0 30px
    }
}

@media (min-width: 480px) and(max-width: 639px) {
    .wrapper {
        padding:0 30px
    }
}

@media (min-width: 640px) and(max-width: 767px) {
    .wrapper {
        padding:0 30px
    }
}

@media (min-width: 768px) and(max-width: 1024px) {
    .wrapper {
        padding:0 30px
    }
}

@media (min-width: 1025px) and(max-width: 1339px) {
    .wrapper {
        padding:0 30px
    }
}

@media (min-width: 1340px) {
    .wrapper {
        max-width: 1280px;
        padding:0
    }
}

@media (min-width: 1340px) {
    .wrapper--full {
        max-width: 100%;
        padding:0 60px
    }
}



.hero {
    position: relative;
    height: auto;
    margin-bottom: 30px;
    background: #f1f4f8;
    transition: height .3s ease-in-out;
    overflow:hidden
}

@media (min-width: 769px) {
    .hero .wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index:10
    }
}

.hero__content {
    padding: 35px 0;
    color:#000;
}

@media (min-width: 769px) {
    .hero__content {
        padding: 0;
        max-width:600px
    }

    .hero__content[data-color=inverse] {
        color:#fff;
    }

    .hero__content[data-color=inverse] .hero__breadcrumbs {
        color:#fff;
    }

    .hero__content[data-color=inverse] .hero__breadcrumbs a {
        color:#fff;
    }

    .hero__content[data-color=inverse] .hero__breadcrumbs a:before {
        background-image:url(//assets.conduent.com/wp-content/themes/conduent-corporate/components/hero/dist/../../../img/breadrcumb-arrow-right-light.svg)
    }

    .hero__content[data-color=inverse] .hero__breadcrumbs a:after {
        background-image:url(//assets.conduent.com/wp-content/themes/conduent-corporate/components/hero/dist/../../../img/breadrcumb-arrow-right-light.svg)
    }

    .hero__content[data-color=inverse] .hero__breadcrumbs svg path {
        fill:#aaafb9
    }
}

.hero__breadcrumbs {
    color: #000;;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: .2px;
    margin:0 0 15px
}

.hero__breadcrumbs a {
    color: #000;;
    position: relative;
    margin-right:6px
}

.hero__breadcrumbs a:not(.breadcrumb_last) {
    display:none
}

@media (min-width: 769px) {
    .hero__breadcrumbs a:not(.breadcrumb_last) {
        display:inline-block
    }
}

.hero__breadcrumbs a:before {
    content: '';
    display: inline-block;
    background-image: url(//assets.conduent.com/wp-content/themes/conduent-corporate/components/hero/dist/../../../img/breadrcumb-arrow-right.svg);
    width: 6px;
    height: 9px;
    margin-right: 10px;
    transform:rotate(180deg)
}

@media (min-width: 769px) {
    .hero__breadcrumbs a:before {
        display:none
    }
}

.hero__breadcrumbs a:after {
    content: '';
    display: inline-block;
    background-image: url(//assets.conduent.com/wp-content/themes/conduent-corporate/components/hero/dist/../../../img/breadrcumb-arrow-right.svg);
    width: 6px;
    height: 9px;
    margin-left:10px
}

.hero__breadcrumbs a:last-child:after {
    content:none
}

.hero__eyebrow {
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: .57px;
    color:#aaafb9;
}

@media (min-width: 769px) {
    .hero__eyebrow {
        margin: 0 0 14px;
        color:inherit
    }
}

.hero__title {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.19;
    letter-spacing: -.62px;
    color:#000;
}

@media (min-width: 769px) {
    .hero__title {
        margin: 0 0 24px;
        font-size: 46px;
        color:inherit
    }
}

.hero__subline {
    margin: 0 0 20px;
    padding: 0;
    font-size: 16px;
    line-height: 1.4;
    color:#000;
}

@media (min-width: 769px) {
    .hero__subline {
        margin: 0 0 30px;
        font-size: 20px;
        color:inherit
    }
}

.hero__cover {
    position: relative;
    height:300px
}

@media (min-width: 769px) {
    .hero__cover {
        height:auto
    }
}

.hero__cover img, .hero__cover video {
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height:100%
}

.hero__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    z-index:10
}

@media (min-width: 768px) and(max-width: 1024px) {
    .hero__play-btn {
        display:none
    }
}

@media (min-width: 1026px) {
    .hero__play-btn {
        left: 70%;
        width: 90px;
        height:90px
    }
}

@media (min-width: 769px) {
    .hero[data-version=main]:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to left, rgba(241, 244, 248, .1), rgba(241, 244, 248, .52) 28%, #f1f4f8);
        z-index:1
    }

    .hero[data-version=main][data-gradient=blue]:after {
        background-image:linear-gradient(to left, rgba(39, 68, 99, 0), #002855)
    }

    .hero[data-version=main][data-gradient=green]:after {
        background-image:linear-gradient(to left, rgba(0, 131, 123, .1), #00837b)
    }

    .hero[data-version=main][data-gradient=none]:after {
        background-image:none
    }
}

@media (min-width: 769px) {
    .hero[data-version=main] .hero__cover {
        height:535px
    }
}

.hero[data-version=main] .hero__subline {
    font-size:20px
}

@media (min-width: 769px) {
    .hero[data-version=main] .hero__subline {
        font-size:24px
    }
}

@media (min-width: 769px) {
    .hero[data-version=short]:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to left, rgba(241, 244, 248, .1), rgba(241, 244, 248, .52) 28%, #f1f4f8);
        z-index:1
    }

    .hero[data-version=short][data-gradient=blue]:after {
        background-image:linear-gradient(to left, rgba(39, 68, 99, 0), #002855)
    }

    .hero[data-version=short][data-gradient=green]:after {
        background-image:linear-gradient(to left, rgba(0, 131, 123, .1), #00837b)
    }

    .hero[data-version=short][data-gradient=none]:after {
        background-image:none
    }
}

@media (min-width: 769px) {
    .hero[data-version=short] .hero__subline {
        padding:0
    }
}

@media (min-width: 769px) {
    .hero[data-version=short] .hero__cover {
        height:420px
    }
}

@media (min-width: 769px) {
    .hero[data-version=subpage] .hero__bg {
        height: 380px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items:stretch
    }
}

@media (min-width: 769px) {
    .hero[data-version=subpage] .hero__cover {
        position: relative;
        flex:0 1 60%
    }

    .hero[data-version=subpage] .hero__cover:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        bottom: 0;
        width: 124px;
        height: calc(100% + 1px);
        background: url(../img/hero-slashes.svg) 0 0 no-repeat;
        background-size: cover;
        z-index:1
    }
}

@media (min-width: 769px) {
    .hero[data-version=subpage] .hero__content {
        max-width:38%
    }
}

@media (min-width: 1026px) {
    .hero[data-version=subpage] .hero__play-btn {
        left:50%
    }
}

.hero[data-version=basic]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #005a64, rgba(0, 180, 160, 0));
    z-index:1
}

.hero[data-version=basic] .hero__bg {
    background: #00b4a0 url(//assets.conduent.com/wp-content/themes/conduent-corporate/components/hero/dist/../../../img/bg_line-graphic.svg) no-repeat top right;
    background-size:cover
}

@media (min-width: 769px) {
    .hero[data-version=basic] .hero__bg {
        height:380px
    }
}

.hero[data-version=basic] .hero__content {
    position: relative;
    z-index: 2;
    color:#fff;
}

@media (min-width: 769px) {
    .hero[data-version=basic] .hero__content {
        max-width:560px
    }
}

.hero[data-version=basic] .hero__title, .hero[data-version=basic] .hero__subline, .hero[data-version=basic] .hero__eyebrow {
    color: #fff;
}