@font-face {
    font-family: SystemS;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/SystemS-Regular-Web.woff2"), url("../fonts/SystemS-Regular-Web.woff") format("woff")
}

@font-face {
    font-family: SystemSMedium;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/SystemS-Medium-Web.woff2") format("woff2"), url("../fonts/SystemS-Medium-Web.woff") format("woff")
}

@font-face {
    font-family: SystemSSemibold;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/SystemS-Semibold-Web.woff2") format("woff2"), url("../fonts/SystemS-Semibold-Web.woff") format("woff")
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden], template {
    display: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    display: block
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%
}

*, :after, :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.anchor, a {
    color: #6a84ff;
    text-decoration: underline;
    cursor: pointer
}

.anchor.secondary-link, a.secondary-link {
    color: #818198
}

.anchor:active, .anchor:focus, .anchor:hover, a:active, a:focus, a:hover {
    text-decoration: none
}

svg {
    display: block
}

body {
    color: #818198;
    font-family: SystemS, sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.1px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent
}

h1, h2, h3 {
    color: #3a3a47;
    font-family: SystemSMedium, sans-serif;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 16px
}

.is-dark h1, .is-dark h2, .is-dark h3 {
    color: #fff
}

h1 {
    font-size: 32px;
    line-height: 40px
}

h2 {
    font-size: 24px;
    line-height: 30px
}

.fz-lg, h3 {
    font-size: 16px;
    line-height: 24px
}

p {
    margin-bottom: 20px
}

.fz-md {
    font-size: 15px;
    line-height: 24px
}

@media (min-width: 1100px) {
    h1 {
        font-size: 38px;
        line-height: 50px
    }

    h2 {
        font-size: 28px;
        line-height: 38px
    }

    .fz-lg, h3 {
        font-size: 20px;
        line-height: 30px
    }

    .fz-md {
        font-size: 18px;
        line-height: 28px
    }
}

.l-container, .l-container-sm {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 580px
}

.landing {
    background: #f9f9fb
}

.body-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    background: #fff;
    -webkit-box-shadow: 0 0 8px rgba(58, 58, 71, .05);
    box-shadow: 0 0 8px rgba(58, 58, 71, .05)
}

@media (min-width: 480px) {
    .l-container, .l-container-sm {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media (min-width: 768px) {
    .l-container {
        max-width: 1104px
    }

    .l-container-sm {
        max-width: 920px
    }
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    line-height: 0
}

.header-wrapper {
    border-bottom: 1px solid rgba(77, 88, 148, .3)
}

.header-wrapper:after {
    clear: both;
    content: "";
    display: table
}

.header-brand {
    float: left
}

.header-brand a, .header-brand svg {
    display: block
}

.header-brand a {
    padding: 22px 0
}

.header-links {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none
}

.header-links li {
    display: inline-block;
    padding: 27px 0
}

.header-links li + li {
    margin-left: 32px
}

.header-links li.header-signin a {
    color: #fff
}

.header-links a {
    font-family: SystemSSemibold, sans-serif;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    text-decoration: none
}

.header-links a:hover {
    text-decoration: underline
}

#hero, .hero-container {
    position: relative
}

#hero {
    overflow: hidden
}

.hero-container {
    padding-top: 72px;
    padding-bottom: 64px
}

.hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 680px;
    overflow: hidden;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    background-color: #192041;
    background: linear-gradient(55deg, #202036 25%, #162570)
}

.hero-cta {
    text-align: center
}

.hero-demo {
    position: relative
}

.hero-pattern {
    position: absolute;
    top: -94px;
    left: calc(50% - 316px);
    -webkit-transform: rotate(-321deg);
    transform: rotate(-321deg);
    mix-blend-mode: lighten;
    pointer-events: none
}

.hero-pattern circle {
    -webkit-transition: opacity .7s linear;
    transition: opacity .7s linear
}

.fading-out .hero-pattern circle {
    opacity: .4
}

.is-ie .hero-pattern {
    display: none
}

#cta-headline {
    margin-top: 40px
}

@media (max-width: 767px) {
    .hero-cta {
        padding-bottom: 48px
    }

    .hero-demo-wrapper {
        max-width: 320px;
        margin: 0 auto
    }
}

@media (min-width: 768px) {
    .hero-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-top: 160px;
        padding-bottom: 80px
    }

    .hero-bg {
        max-height: 600px
    }

    .hero-cta {
        text-align: left;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 64px
    }

    .hero-demo {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 320px;
        flex: 0 0 320px
    }
}

@media (min-width: 1100px) {
    .hero-cta {
        margin-right: 80px
    }

    #cta-subline span {
        display: block
    }
}

#features {
    padding-bottom: 48px;
    overflow: hidden
}

.features-section {
    margin-bottom: 48px
}

.features-section .feature-desc, .features-section .feature-image {
    text-align: center
}

.features-section .feature-desc p {
    color: #73738d
}

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

.features-section .feature-desc li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.features-section .feature-desc li:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 16px 16px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8cGF0aCBkPSJNMTQuMyAyLjNMNSAxMS42IDEuNyA4LjNjLS40LS40LTEtLjQtMS40IDAtLjQuNC0uNCAxIDAgMS40bDQgNGMuMi4yLjQuMy43LjNzLjUtLjEuNy0uM2wxMC0xMGMuNC0uNC40LTEgMC0xLjQtLjQtLjQtMS0uNC0xLjQgMHoiIGZpbGw9IiM0M2RiOTAiLz48L3N2Zz4=)
}

.features-section .feature-image img {
    width: 312px;
    height: 297px
}

.demo-link a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: SystemSSemibold, sans-serif;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    text-decoration: none
}

.demo-link a:hover {
    text-decoration: underline
}

.demo-link-icon {
    margin-left: 6px
}

.left-reveal, .right-reveal, .top-reveal {
    visibility: hidden;
    opacity: 0
}

.is-fully-loaded .left-reveal, .is-fully-loaded .right-reveal, .is-fully-loaded .top-reveal {
    visibility: visible;
    opacity: 1
}

@media (max-width: 767px) {
    .demo-link, .feature-desc li {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .demo-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media (min-width: 768px) {
    #features {
        padding-bottom: 80px
    }

    .features-section {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 348px;
        margin-bottom: 24px
    }

    .features-section .feature-desc, .features-section .feature-image {
        text-align: left
    }

    .features-section .feature-image {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 400px;
        flex: 0 0 400px
    }

    .features-section .feature-image img {
        position: absolute;
        top: -24px;
        left: -48px;
        width: 416px;
        height: 396px
    }

    .features-section .feature-desc {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .features-section.features-section-inverted .feature-image {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .features-section.features-section-inverted .feature-image img {
        left: auto;
        right: -48px
    }
}

@media (min-width: 1100px) {
    .feature-desc li {
        font-size: 16px
    }
}

.site-footer {
    background: linear-gradient(45deg, #202036 25%, #162570)
}

.footer-top {
    padding-top: 48px;
    padding-bottom: 48px
}

.footer-top p a {
    color: #818198
}

.footer-top p a:hover {
    color: #b9b9c6
}

.footer-bottom {
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 13px;
    border-top: 1px solid rgba(77, 88, 148, .3)
}

.footer-copyright a {
    font-family: SystemSMedium, sans-serif
}

.footer-links {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-links, .footer-links li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.footer-links li {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.footer-links li + li:before {
    content: "";
    display: block;
    margin: 0 16px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: rgba(129, 129, 152, .5)
}

.footer-links a {
    color: #818198
}

.footer-links a:hover {
    color: #b9b9c6
}

@media (max-width: 767px) {
    .footer-copyright {
        text-align: center;
        margin: 8px 0 24px
    }
}

@media (min-width: 768px) {
    .footer-bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .footer-links-container {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

@media (min-width: 1100px) {
    .footer-top {
        padding-top: 64px;
        padding-bottom: 64px
    }
}

.hero-demo-container {
    position: relative;
    z-index: 10
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translate3d(0, 7px, 0);
        transform: translate3d(0, 7px, 0)
    }
    65% {
        -webkit-transform: translate3d(0, -7px, 0);
        transform: translate3d(0, -7px, 0)
    }
    to {
        -webkit-transform: translate3d(0, 7px, 0);
        transform: translate3d(0, 7px, 0)
    }
}

@keyframes floating {
    0% {
        -webkit-transform: translate3d(0, 7px, 0);
        transform: translate3d(0, 7px, 0)
    }
    65% {
        -webkit-transform: translate3d(0, -7px, 0);
        transform: translate3d(0, -7px, 0)
    }
    to {
        -webkit-transform: translate3d(0, 7px, 0);
        transform: translate3d(0, 7px, 0)
    }
}

.pcard {
    font-family: SystemS, sans-serif;
    width: 320px;
    position: relative;
    z-index: 10;
    background-color: #fff;
    -webkit-box-shadow: 0 0 55px rgba(0, 0, 0, .07);
    box-shadow: 0 0 55px rgba(0, 0, 0, .07);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.is-fully-loaded .pcard.is-on {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: fade-in-h;
    animation-name: fade-in-h;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@media (min-width: 768px) {
    .is-fully-loaded .pcard.is-on {
        -webkit-animation-name: fade-in-v;
        animation-name: fade-in-v
    }
}

.is-fully-loaded .pcard.fade-out {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-animation-name: fade-out-h;
    animation-name: fade-out-h;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@media (min-width: 768px) {
    .is-fully-loaded .pcard.fade-out {
        -webkit-animation-name: fade-out-v;
        animation-name: fade-out-v
    }
}

.pcard p {
    font-size: 13px;
    margin: 0 0 8px
}

@-webkit-keyframes fade-in-h {
    0% {
        display: none;
        opacity: 0
    }
    1% {
        display: block;
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }
    40% {
        opacity: 0
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fade-in-h {
    0% {
        display: none;
        opacity: 0
    }
    1% {
        display: block;
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }
    40% {
        opacity: 0
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fade-out-h {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    40% {
        opacity: 1
    }
    99% {
        display: block;
        opacity: 0;
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    to {
        display: none
    }
}

@keyframes fade-out-h {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    40% {
        opacity: 1
    }
    99% {
        display: block;
        opacity: 0;
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    to {
        display: none
    }
}

@-webkit-keyframes fade-in-v {
    0% {
        display: none;
        opacity: 0
    }
    1% {
        display: block;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    40% {
        opacity: 0
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fade-in-v {
    0% {
        display: none;
        opacity: 0
    }
    1% {
        display: block;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    40% {
        opacity: 0
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fade-out-v {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    40% {
        opacity: 1
    }
    99% {
        display: block;
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    to {
        display: none
    }
}

@keyframes fade-out-v {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    40% {
        opacity: 1
    }
    99% {
        display: block;
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    to {
        display: none
    }
}

.pcard-h-placeholder, .pcard-p-placeholder {
    height: 6px;
    width: 100%;
    display: inline-block;
    float: left;
    margin-bottom: 12px
}

.pcard-h-placeholder:last-child, .pcard-p-placeholder:last-child {
    margin-bottom: 0
}

.pcard {
    border-radius: 2px
}

.pcard-body, .pcard-footer, .pcard-header {
    padding: 24px
}

.pcard-body:after, .pcard-footer:after, .pcard-header:after {
    clear: both;
    content: "";
    display: table
}

.pcard-header {
    position: relative;
    padding-bottom: 0;
    background: #fff;
    border-radius: 2px 2px 0 0
}

.pcard-header-inner:after {
    clear: both;
    content: "";
    display: table
}

.pcard-holder {
    width: calc(100% - 60px);
    float: left
}

.pcard-avatar {
    position: relative
}

.pcard-avatar:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -8px;
    width: 88px;
    height: 88px;
    background-size: 88px 88px;
    opacity: .25
}

/*#pcard-1 .pcard-avatar:before {*/
    /*background-image: url("/landing/images/face-01-blur.png")*/
/*}*/

/*#pcard-2 .pcard-avatar:before {*/
    /*background-image: url("/landing/images/face-02-blur.png")*/
/*}*/

.pcard-avatar img {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 2px;
    float: left;
    margin-right: 16px
}

.pcard-holder-name {
    font-family: SystemSMedium, sans-serif;
    font-size: 17px;
    line-height: 26px;
    color: #3a3a47;
    margin-top: 12px
}

.pcard-holder-profession {
    font-style: italic
}

.pcard-price {
    font-family: SystemSMedium, sans-serif;
    float: right;
    text-align: right;
    width: 60px;
    color: #26c577;
    font-size: 14px;
    line-height: 20px;
    margin-top: 16px
}

.pcard-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e3e3e9
}

.pcard-desc:after {
    clear: both;
    content: "";
    display: table
}

.pcard-desc svg {
    margin-right: 8px
}

.pcard-form-field {
    position: relative;
    cursor: pointer;
    height: 40px;
    border: 1px solid #e3e3e9;
    margin-bottom: 12px;
    padding: 11px 16px 11px 48px
}

.pcard-form-field.is-active {
    border: 1px solid rgba(106, 132, 255, .8)
}

.pcard-form-field svg {
    position: absolute;
    top: calc(50% - 8px);
    left: 16px
}

.pcard-form-field .field-content-wrapper {
    font-family: SystemS, sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #3a3a47;
    letter-spacing: .5px
}

.pcard-form-field .field-content-strings {
    display: none
}

.pcard-form-field .placeholder-content {
    color: #818198
}

.typed-cursor {
    opacity: 1;
    -webkit-animation: typedjsBlink .7s infinite;
    animation: typedjsBlink .7s infinite
}

@-webkit-keyframes typedjsBlink {
    50% {
        opacity: 0
    }
}

@keyframes typedjsBlink {
    50% {
        opacity: 0
    }
}

.typed-fade-out {
    opacity: 0;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    -webkit-animation: 0;
    animation: 0
}

.pcard-form-row:after {
    clear: both;
    content: "";
    display: table
}

.pcard-form-card-cvc, .pcard-form-card-exp {
    float: left;
    width: calc(50% - 6px);
    margin-bottom: 0
}

.pcard-form-card-exp {
    float: left
}

.pcard-form-card-cvc {
    float: right
}

.pcard-footer {
    padding-top: 0;
    padding-bottom: 32px
}

.pcard-form-submit {
    position: relative;
    width: 100%;
    font-family: SystemSSemibold, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #fff
}

.pcard-form-submit-box {
    font-family: SystemSMedium, sans-serif;
    line-height: 24px;
    height: 40px;
    background-color: #516fff;
    background-image: -webkit-gradient(linear, left bottom, right top, from(#516fff), to(#6a84ff));
    background-image: linear-gradient(to top right, #516fff, #6a84ff);
    border-radius: 2px;
    margin: 0 auto
}

.pcard-form-submit-box, .pcard-form-submit-text {
    width: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.pcard-form-submit-text {
    letter-spacing: .2px;
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
    pointer-events: none
}

.has-submitted .pcard-form-submit-box, .is-submitting .pcard-form-submit-box {
    -webkit-animation: push-button .25s ease;
    animation: push-button .25s ease
}

.has-submitted .pcard-form-submit-text, .is-submitting .pcard-form-submit-text {
    opacity: 0
}

@-webkit-keyframes push-button {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes push-button {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes submit-animation {
    0% {
        width: 100%
    }
    to {
        width: 50px
    }
}

@keyframes submit-animation {
    0% {
        width: 100%
    }
    to {
        width: 50px
    }
}

@-webkit-keyframes spinner-rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spinner-rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.pcard-form-submit svg {
    position: absolute;
    top: 0;
    left: calc(50% - 20px);
    pointer-events: none;
    opacity: 0
}

.pcard-form-submit svg.progress-circle {
    -webkit-animation: spinner-rotation .6s linear infinite;
    animation: spinner-rotation .6s linear infinite;
    -webkit-transform-origin: 50%;
    transform-origin: 50%
}

.is-submitting .pcard-form-submit svg.progress-circle {
    opacity: 1;
    -webkit-transition: opacity .1s linear .3s;
    transition: opacity .1s linear .3s
}

.has-submitted .pcard-form-field {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.has-submitted .pcard-form-field, .has-submitted .pcard-form-submit {
    opacity: 0;
    -webkit-transition: opacity .2s, -webkit-transform .2s ease;
    transition: opacity .2s, -webkit-transform .2s ease;
    transition: transform .2s ease, opacity .2s;
    transition: transform .2s ease, opacity .2s, -webkit-transform .2s ease
}

.has-submitted .pcard-form-submit {
    -webkit-transform: scale(.5);
    transform: scale(.5)
}

.pcard-form {
    position: relative
}

.pcard-form-thanks {
    position: absolute;
    top: 60px;
    width: 100%;
    text-align: center
}

.pcard-form-thanks .thanks-title {
    font-family: SystemSMedium, sans-serif;
    color: #3a3a47;
    font-size: 15px;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .4s, -webkit-transform .4s ease;
    transition: opacity .4s, -webkit-transform .4s ease;
    transition: transform .4s ease, opacity .4s;
    transition: transform .4s ease, opacity .4s, -webkit-transform .4s ease
}

.pcard-form-thanks .pcard-p-placeholder {
    max-width: 200px;
    margin: 0 auto;
    float: none
}

.pcard-form-thanks .success-badge {
    height: 48px;
    width: 48px;
    margin: 0 auto 12px
}

.has-submitted .pcard-form-thanks .success-badge .checkmark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #26c577;
    stroke-miterlimit: 10;
    margin: 10% auto;
    -webkit-box-shadow: inset 0 0 0 #26c577;
    box-shadow: inset 0 0 0 #26c577;
    -webkit-animation: check-fill .4s ease-in-out .4s forwards, check-scale .3s ease-in-out .9s both;
    animation: check-fill .4s ease-in-out .4s forwards, check-scale .3s ease-in-out .9s both
}

.has-submitted .pcard-form-thanks .success-badge .checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #26c577;
    fill: none;
    -webkit-animation: check-circle-stroke .6s cubic-bezier(.65, 0, .45, 1) forwards;
    animation: check-circle-stroke .6s cubic-bezier(.65, 0, .45, 1) forwards
}

.has-submitted .pcard-form-thanks .success-badge .checkmark-check {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    -webkit-animation: check-check-stroke .3s cubic-bezier(.65, 0, .45, 1) .8s forwards;
    animation: check-check-stroke .3s cubic-bezier(.65, 0, .45, 1) .8s forwards
}

.is-edge .has-submitted .pcard-form-thanks .success-badge .checkmark-check, .is-ie .has-submitted .pcard-form-thanks .success-badge .checkmark-check {
    stroke-dashoffset: 0
}

.has-submitted .thanks-title {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

@-webkit-keyframes check-check-stroke {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes check-check-stroke {
    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes check-circle-stroke {
    to {
        stroke-dashoffset: 0;
        stroke: rgba(38, 197, 119, 0)
    }
}

@keyframes check-circle-stroke {
    to {
        stroke-dashoffset: 0;
        stroke: rgba(38, 197, 119, 0)
    }
}

@-webkit-keyframes check-scale {
    0%, to {
        -webkit-transform: none;
        transform: none
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes check-scale {
    0%, to {
        -webkit-transform: none;
        transform: none
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1)
    }
}

@-webkit-keyframes check-fill {
    to {
        -webkit-box-shadow: inset 0 0 0 30px rgba(38, 197, 119, .3);
        box-shadow: inset 0 0 0 30px rgba(38, 197, 119, .3)
    }
}

@keyframes check-fill {
    to {
        -webkit-box-shadow: inset 0 0 0 30px rgba(38, 197, 119, .3);
        box-shadow: inset 0 0 0 30px rgba(38, 197, 119, .3)
    }
}

.button, button {
    font-family: SystemSSemibold, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
    background-color: #516fff;
    background-image: -webkit-gradient(linear, left bottom, right top, from(#516fff), to(#6a84ff));
    background-image: linear-gradient(to top right, #516fff, #6a84ff);
    -webkit-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    padding: 0 32px;
    border: 0 none;
    border-radius: 2px;
    display: inline-block;
    font-size: 13px;
    height: 48px;
    line-height: 48px
}

.button:active, .button:hover, button:active, button:hover {
    background-color: #5673ff;
    background-image: -webkit-gradient(linear, left bottom, right top, from(#5b77ff), to(#6f88ff));
    background-image: linear-gradient(to top right, #5b77ff, #6f88ff)
}

.button:focus, button:focus {
    outline: 1px dotted hsla(0, 0%, 100%, .6);
    outline-offset: -4px
}

@media (min-width: 1100px) {
    .button, button {
        font-size: 14px
    }
}

.tooltip {
    position: relative
}

.tooltip-link {
    text-decoration: underline
}

.tooltip-link:hover + .tooltip-message {
    display: block
}

.tooltip-message {
    display: none;
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    margin-left: -125px;
    z-index: 1000;
    padding: 8px;
    border-radius: 2px;
    width: 250px;
    background-color: #3a3a47;
    color: #e3e3e9;
    font-size: 14px;
    line-height: 20px
}

.tooltip-message:before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
    margin-bottom: -16px;
    border: 8px solid transparent;
    border-top-color: #3a3a47;
    background: transparent;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px)
}

.clearfix:after {
    clear: both;
    content: "";
    display: table
}

.hide-text {
    overflow: hidden;
    padding: 0;
    text-indent: 101%;
    white-space: nowrap
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.float-left {
    float: left
}

.float-right {
    float: right
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ctxt {
    text-align: center
}

.uptxt {
    text-transform: uppercase
}

.trtxt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.bdt {
    border-top: 1px solid #e3e3e9
}

.bdb {
    border-bottom: 1px solid #e3e3e9
}

.m0 {
    margin: 0
}

.mt0 {
    margin-top: 0
}

.mb0 {
    margin-bottom: 0
}

.mb12 {
    margin-bottom: 12px
}

.mb16 {
    margin-bottom: 16px
}

.mt24 {
    margin-top: 24px
}

.mb24 {
    margin-bottom: 24px
}

.mb32 {
    margin-bottom: 32px
}

.fade-on-load {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .8s ease .3s;
    transition: all .8s ease .3s
}

.is-fully-loaded .fade-on-load {
    visibility: visible;
    opacity: 1
}