.globalNav .colorize {
    color: #fff
}

.globalNav .colorize.active, .globalNav .colorize:hover {
    color: hsla(0, 0%, 100%, .5)
}

html#relay {
    background: #fff
}

html#relay body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

html#relay .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
    clear: both
}

#main-content > section.main {
    padding-top: 80px
}

@media screen and (max-width: 479px) {
    #main-content > section.main {
        padding-top: 40px
    }
}

#main-content > section > .content {
    position: relative;
    max-width: 952px;
    margin: 0 auto
}

@media screen and (max-width: 1012px) {
    #main-content > section > .content {
        max-width: 748px
    }
}

#main-content > section header {
    position: relative;
    padding: 0 124px 35px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    text-align: center
}

@media screen and (max-width: 479px) {
    #main-content > section header {
        padding: 0 0 35px
    }
}

#main-content > section header.icon:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 62px;
    height: 62px;
    margin-bottom: 25px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    background-size: 100% 100%
}

#main-content > section header h2 {
    margin-top: 0;
    margin-bottom: 11px;
    font-weight: 400
}

#main-content > section header p {
    color: #939da3
}

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

ul.features li {
    margin-bottom: 35px;
    padding-left: 65px;
    background-position: 0 3px;
    background-repeat: no-repeat
}

ul.features li h3 {
    margin-top: 0;
    margin-bottom: 6px
}

@media screen and (max-width: 479px) {
    ul.features li h3 {
        font-size: 1.2em
    }
}

header#main-header.transparent div.inner-col {
    border-bottom-style: none
}

section.hero {
    position: relative;
    overflow: hidden;
    background: #5f357d;
    background: -webkit-radial-gradient(circle farthest-corner at right bottom, #202c3c 0, #0d3965 28%, #1f5184 52%, #477ab2 79%, #a7c7ee 100%);
    background: radial-gradient(circle farthest-corner at right bottom, #202c3c 0, #0d3965 28%, #1f5184 52%, #477ab2 79%, #a7c7ee 100%);
    margin-left: -10px;
    margin-right: -10px
}

@media screen and (max-width: 479px) {
    section.hero {
        padding-bottom: 30px
    }
}

section.hero.visible .hub > *, section.hero.visible canvas {
    opacity: 1;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none
}

section.hero.visible .hub > * {
    -webkit-transform: none;
    transform: none
}

section.hero canvas {
    display: block;
    position: absolute;
    width: 100%;
    height: calc(100% + 10px);
    top: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    -moz-filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    -o-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    -webkit-transition: opacity .5s ease-in-out 1s;
    transition: opacity .5s ease-in-out 1s
}

section.hero .button {
    font-weight: 500;
    border-style: none;
    margin-right: 15px
}

section.hero .button span {
    height: 40px;
    line-height: 40px
}

section.hero .button.primary {
    color: #202c3c;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .25);
    background: #fff;
    background: -webkit-linear-gradient(270deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .75));
    background: linear-gradient(-180deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .75));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12), inset 0 1px 0 0 hsla(0, 0%, 100%, .35)
}

section.hero .button.primary:active {
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    -webkit-filter: alpha(opacity=75);
    -moz-filter: alpha(opacity=75);
    -ms-filter: alpha(opacity=75);
    -o-filter: alpha(opacity=75);
    filter: alpha(opacity=75)
}

section.hero .button.secondary {
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .35);
    color: #fff
}

section.hero .cta.mobile {
    position: relative;
    display: none;
    text-align: center;
    width: 100%
}

@media screen and (max-width: 479px) {
    section.hero .cta.mobile {
        display: block
    }
}

section.hero .cta.mobile .button {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px
}

section.hero .content section.copy {
    max-width: 410px;
    padding-top: 220px;
    padding-bottom: 220px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

@media screen and (max-width: 1012px) {
    section.hero .content section.copy {
        max-width: 390px;
        margin-left: 20px
    }
}

@media screen and (max-width: 479px) {
    section.hero .content section.copy {
        max-width: 100%;
        margin-left: 0;
        padding: 40px 10px 30px;
        text-align: center
    }
}

section.hero .content section.copy h1 {
    color: #fff;
    font-size: 4.4em;
    font-weight: 400;
    margin-top: -10px;
    margin-bottom: .25em;
    margin-left: -.07em
}

@media screen and (max-width: 1012px) {
    section.hero .content section.copy h1 {
        font-size: 4.2em
    }
}

@media screen and (max-width: 479px) {
    section.hero .content section.copy h1 {
        font-size: 3em;
        margin-top: 30px
    }
}

section.hero .content section.copy p {
    margin-top: 0.6em;
    margin-bottom: 1.8em;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 1.5em;
}

@media screen and (max-width: 1012px) {
    section.hero .content section.copy p {
        font-size: 1.8em
    }
}

@media screen and (max-width: 479px) {
    section.hero .content section.copy p {
        font-size: 1.3em
    }
}

@media screen and (max-width: 479px) {
    section.hero .content section.copy .cta {
        display: none
    }
}

section.hero .hub {
    position: absolute;
    width: 334px;
    height: 386px;
    top: 50%;
    margin-top: -183px;
    left: 50%;
    margin-left: 107px
}

@media screen and (max-width: 479px) {
    section.hero .hub {
        position: relative;
        width: 234px;
        height: 270px;
        margin-left: -117px;
        margin-top: 0;
        margin-bottom: 75px
    }
}

section.hero .hub > * {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    -moz-filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    -o-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    -webkit-transform: scale(.01);
    transform: scale(.01);
    -webkit-transition: -webkit-transform 1.2s cubic-bezier(.155, 1.105, .295, 1.12), opacity 1.2s ease-out;
    transition: transform 1.2s cubic-bezier(.155, 1.105, .295, 1.12), opacity 1.2s ease-out
}

section.hero .hub > * img.gradient, section.hero .hub > :after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

section.hero .hub > :after {
    content: ""
}

section.hero .hub .merchant {
    position: absolute;
    width: 98px;
    height: 98px;
    top: 50%;
    margin-top: -49px;
    left: 50%;
    margin-left: -49px;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;

    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .09)
}

section.hero .hub .merchant img.gradient {
    border-radius: 50%
}

section.hero .hub .merchant:after {
    background-image: url(/images/home/cp-circle-home.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .merchant:after {
        background-image: url(/images/home/cp-circle-home@2x.png);
        background-size: 100% 100%
    }
}

section.hero .hub .channel {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .12)
}

section.hero .hub .channel img.gradient {
    border-radius: 16px
}

section.hero .hub .channel.intDRN {
    top: -32px;
    left: 50%;
    margin-left: -32px;
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

section.hero .hub .channel.intDRN:after {
    background-image: url(/images/home/drn-square.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .channel.intDRN:after {
        background-image: url(/images/home/drn-square@2x.png);
        background-size: 100% 100%
    }
}

section.hero .hub .channel.intRDN {
    top: 25%;
    margin-top: -32px;
    left: -32px;
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

section.hero .hub .channel.intRDN:after {
    background-image: url(/images/home/rdn-square.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .channel.intRDN:after {
        background-image: url(/images/home/rdn-square@2x.png);
        background-size: 100% 100%
    }
}

section.hero .hub .channel.intRMP {
    top: 25%;
    margin-top: -32px;
    right: -32px;
    -webkit-transition-delay: .7s;
    transition-delay: .7s
}

section.hero .hub .channel.intRMP:after {
    background-image: url(/images/home/rmp-square.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .channel.intRMP:after {
        background-image: url(/images/home/rmp-square@2x.png);
        background-size: 100% 100%
    }
}

section.hero .hub .channel.intMRS {
    top: 75%;
    margin-top: -32px;
    left: -32px;
    -webkit-transition-delay: 1.0s;
    transition-delay: 1.0s
}

section.hero .hub .channel.intMRS:after {
    background-image: url(/images/home/mrs-square.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .channel.intMRS:after {
        background-image: url(/images/home/mrs-square@2x.png);
        background-size: 100% 100%
    }
}

section.hero .hub .channel.intMBSI {
    top: 75%;
    margin-top: -32px;
    right: -32px;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s
}

section.hero .hub .channel.intMBSI:after {
    background-image: url(/images/home/mbsi-square.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .channel.intMBSI:after {
        background-image: url(/images/home/mbsi-square@2x.png);
        background-size: 100% 100%
    }
}

section.hero .hub .channel.more {
    bottom: -32px;
    left: 50%;
    margin-left: -32px;
    -webkit-transition-delay: .9s;
    transition-delay: 0.9s
}

section.hero .hub .channel.more:after {
    background-image: url(/images/home/people-square.png)
}

@media (min--moz-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx),(min-resolution: 138dpi), all and (-webkit-min-device-pixel-ratio: 1.5) {
    section.hero .hub .channel.more:after {
        background-image: url(/images/home/people-square@2x.png);
        background-size: 100% 100%
    }
}