@font-face{
    font-family:fontello;
    src:url(/fonts/fontello.eot);
    src:url(/fonts/fontello.eot#iefix) format("embedded-opentype"),url(/fonts/fontello.woff2) format("woff2"),url(/fonts/fontello.woff) format("woff"),url(/fonts/fontello.ttf) format("truetype"),url(/fonts/fontello.svg#fontello) format("svg");
    font-weight:400;
    font-style:normal
}
[class*=" icon--"]:before,[class^=icon--]:before{
    font-family:fontello;
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.icon--minus:before{
    content:"\E800"
}
.icon--checkbox:before{
    content:"\E802"
}
.icon--chevron-down:before{
    content:"\E805"
}
.icon--chevron-left:before{
    content:"\E806"
}
.icon--chevron-right:before{
    content:"\E807"
}
.icon--chevron-up:before{
    content:"\E808"
}
.icon--plus:before{
    content:"\E809"
}
.icon--radio:before{
    content:"\E80B"
}
.icon--twitter:before{
    content:"\F099"
}
.icon--facebook:before{
    content:"\F09A"
}
.icon--linkedin:before{
    content:"\F0E1"
}
.icon--instagram:before{
    content:"\F16D"
}
@font-face{
    font-family:MarkPro;
    src:url(/fonts/MarkPro-Bold.eot);
    src:url(/fonts/MarkPro-Bold.eot?#iefix) format("embedded-opentype"),url(/fonts/MarkPro-Bold.woff2) format("woff2"),url(/fonts/MarkPro-Bold.woff) format("woff"),url(/fonts/MarkPro-Bold.ttf) format("truetype"),url(/fonts/MarkPro-Bold.svg#MarkPro-Bold) format("svg");
    font-weight:700;
    font-style:normal;
    font-display:fallback
}
@font-face{
    font-family:MarkPro;
    src:url(/fonts/MarkPro.eot);
    src:url(/fonts/MarkPro.eot?#iefix) format("embedded-opentype"),url(/fonts/MarkPro.woff2) format("woff2"),url(/fonts/MarkPro.woff) format("woff"),url(/fonts/MarkPro.ttf) format("truetype"),url(/fonts/MarkPro.svg#MarkPro) format("svg");
    font-weight:400;
    font-style:normal;
    font-display:fallback
}
@font-face{
    font-family:MarkPro;
    src:url(/fonts/MarkPro-Medium.eot);
    src:url(/fonts/MarkPro-Medium.eot?#iefix) format("embedded-opentype"),url(/fonts/MarkPro-Medium.woff2) format("woff2"),url(/fonts/MarkPro-Medium.woff) format("woff"),url(/fonts/MarkPro-Medium.ttf) format("truetype"),url(/fonts/MarkPro-Medium.svg#MarkPro-Medium) format("svg");
    font-weight:500;
    font-style:normal;
    font-display:fallback
}
@font-face{
    font-family:MarkPro;
    src:url(/fonts/MarkPro-Heavy.eot);
    src:url(/fonts/MarkPro-Heavy.eot?#iefix) format("embedded-opentype"),url(/fonts/MarkPro-Heavy.woff2) format("woff2"),url(/fonts/MarkPro-Heavy.woff) format("woff"),url(/fonts/MarkPro-Heavy.ttf) format("truetype"),url(/fonts/MarkPro-Heavy.svg#MarkPro-Heavy) format("svg");
    font-weight:900;
    font-style:normal;
    font-display:fallback
}

* {
  box-sizing: border-box;
}
html, body {
    width: 100%;
    min-height: 100%;
    background: #fff;
    color: #333;
    font-family: 'MarkPro', sans-serif;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-weight:400;
    letter-spacing: -1px;
}

ul li {
    position: relative;
    font-size: 0.8em;
    line-height: 1.7em;
    margin: 0 0 .8rem;
    padding-left: 2rem;
    letter-spacing: 0;
    list-style: none;
}

ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: .625rem;
    width: 1rem;
    height: .125rem;
    background: #333;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

h1,h2,h3,h4,h5,h6{
    font-weight: 700;
}
h4 {
    margin: 1em auto 2em;
}
h5 {
    margin-top: 2em;
    font-size: 1.3em;
    font-weight: 500;
}
h6 {
    font-size: 1.2em;
}

p {
    font-size: 17px;
}

.highlight {
    color: #522979 !important;
}

.header {
    width: 100%;
    height: 100%;
}
.header .background {
    width: 100%;
    height: 90vh;
    background: url(../images/hero-bg.jpg) 50% 50% no-repeat;
    background-size: cover;
}

.cta {
    padding: 1em 0;
    border-bottom: solid 1px #333;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    display: block;
    transition: all 0.1s;
}
.cta:hover {
    color: #522979;
}
.cta:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/right-arrow.svg) 50% 50% no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: calc(50% - 10px);
    right: 10px;
    transition: all 0.2s
}
.cta:hover::before {
    right: 0;
}

.content {
    background: #fafafa
    color: #333;
}

.content.purple {
    background: #522979;
    color: #fff;
}

.container {
    max-width: 1200px;
    padding: 4em;
}

.column-image {
    height: 200px;
    overflow: hidden;
}
.column-text {
    padding: 2em 1.5em 1em;
    background: #333;
    color: #fff;
    min-height: 250px;
}

.logo {
    width: 25%;
    margin: 0;
    float: left;
}
.logo img {
    width: 75%;
    display: block;
    margin: 0 auto;
}

.section {
    padding: 3em;
    width: 100%;
}

ol li {
    display: block;
    width: 33.33%;
    padding: 0 40px 40px 0;
    float: left;
    min-height: 190px;
}
.featured-icon {
    display: block;
    margin: 0 20px 10px 0;
    border-radius: 100%;
    height: 35px;
    width: 35px;
}
.featured-icon img {
    display: block;
    width: 100%;
    max-width: 80px;
    margin: 0 auto;
}

.footer {
    background: #222;
    color: #fff;
}

.button {
    border: none !important;
    display: block;
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 700;
    height: 65px;
    line-height: 65px;
    min-width: 160px;
    letter-spacing: -0.5px;
    border-radius: 0;
    transition: all 0.2s;
}
.button.medium {
    height: 50px;
    line-height: 50px;
    min-width: 0;
}
.button.small {
    height: 35px;
    line-height: 35px;
    font-size: 13px;
}

.button.yellow {
    background: #f9d359;
    color: #000;
    height: auto;
}
.button.purple {
    background: #522979;
    color: #fff;
    height: auto;
}
.button.purple:hover {
    background: #7842ad;
}
.button.green {
    background: #94A59B;
    color: #fff;
    height: auto;
}
.button.link:hover {
    background: #333;
}

@media (max-width: 1024px) {
    .container {
        padding: 3em;
        max-width: none;
        width: 100%;
    }
    .header .five.columns {
        padding: 2em !important;
    }
    .column-image {
        max-height: 180px;
    }
    .column-text {
        min-height: 260px;
    }
    ol li {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .header .background {
        height: 90vh;
    }
    .header .columns {
        width: 100%;
    }
    .header .row {
        display: flex;
        flex-wrap: wrap;
    }
    .header .seven.columns {
        -webkit-order: 1;
        -ms-order: 1;
        order: 1;
        margin-bottom: 42vh;
    }
    .header .five.columns {
        -webkit-order: 2;
        -ms-order: 2;
        order: 2;
    }
    #howitworks {
        width: 100%;
    }
    #smalllogo {
        display: none !important;
    }
    #largelogo {
        display: block !important;
    }
    .content.purple .columns {
        width: 100%;
        margin: 0;
    }
    .content.purple .columns img {
        width: 55% !important;
    }
    .content.purple .row:first-child {
        padding-bottom: 3em;
        border-bottom: solid 1px rgba(255,255,255,0.2);
    }
    .column-image {
        max-height: 130px;
    }
    #stepbystep .columns {
        width: 100%;
        margin: 0;
    }
    .footer h5 {
        margin-top: 0 !important;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 3em 2em;
    }
    #howitworks h4 {
        margin: 0 0 1em;
    }
    .header .container {
        padding: 0;
    }
    .header .background {
        height: 95vh;
        background-size: 150% auto;
        background-position: 50% 100%;
    }
    .header .seven.columns {
        margin: 0 !important;
        background: #522979;
        padding: 10px;
        height: 50px;
    }
    .header .seven.columns .button {
        padding: 0 !important;
        margin: 0 0 0 20px !important;
        height: auto !important;
        line-height: 30px !important;
    }
    .header .seven.columns .button img {
        margin-right: 5px !important;
        width: 20px !important;
    }
    #largelogo {
        height: 100% !important;
        width: auto !important;
    }
    .header .cta {
        padding-right: 3em;
    }
    .columns {
        display: block;
        float: none;
        width: 100%;
    }
    #corevalue .columns {
        margin-bottom: 2em;
    }
    .column-text {
        min-height: 160px;
    }
    ol li {
        width: 50%;
        margin: 0 0 2em;
        padding: 0 2em 0 0;
        height: auto;
        min-height: 0;
    }
    .logo {
        width: 50%;
    }
    .footer .columns {
        text-align: left !important;
        margin: 0 0 1em;
    }
}