@keyframes fadeInDialogBackdrop {
    from {
        opacity: 0;
    }

    to {
        opacity: .8;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #eceff1;
}

section {
    background-color: #fff;
}

img {
    max-width: 100%;
    vertical-align: middle;
    animation: 3000ms ease 0s normal forwards 1 fadeIn;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

header {
    background: #fff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
}

a {
    color: #333;
}

body.has-mobile-menu {
    overflow: hidden;
}

    body.has-mobile-menu .content-header-mobile-menu svg {
        fill: #2196f3;
    }

    body.has-mobile-menu header nav {
        animation: 300ms ease 0s normal forwards 1 fadeIn;
        display: block;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: #fff;
        display: flex;
        flex-direction: column;
        padding: 24px;
        align-items: center;
        justify-content: center;
    }

        body.has-mobile-menu header nav a {
            margin: 0 0 24px 0;
            font-size: 24px;
        }

        body.has-mobile-menu header nav .content-header-sign-up {
            border-radius: 50px;
        }

header nav a {
    text-decoration: none;
    margin-left: 48px;
    font-size: 18px;
    transition: background 300ms ease, color 300ms ease;
}

    header nav a:hover {
        color: #2196f3;
    }

footer {
    background: #eceff1;
    padding: 48px 0;
    text-align: center;
}

.content-header {
    max-width: 1200px;
    margin: 0 auto;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .content-header .content-header-sign-up {
        border: 1px solid #2196f3;
        padding: 4px 16px;
        border-radius: 20px;
    }

        .content-header .content-header-sign-up:hover {
            background: #2196f3;
            color: #fff;
        }

    .content-header .content-header-mobile-menu {
        display: none;
        cursor: pointer;
    }

        .content-header .content-header-mobile-menu svg {
            fill: #333;
            transition: fill 300ms ease;
        }

        .content-header .content-header-mobile-menu:hover svg {
            fill: #2196f3;
        }

.content-main {
    text-align: center;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
}

.content-main-image {
    width: 100%;
    background-image: url('https://identity.flow-e.com/images/header-image-1920.jpg');
    height: 1000px;
    animation: 3000ms ease 0s normal forwards 1 fadeIn;
}

.content-main .content-main-header {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 16px;
}

.content-main .content-main-sub-header {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 24px;
}

.content-main .content-main-button {
    height: 50px;
    line-height: 50px;
    padding: 0 24px;
    border-radius: 25px;
    outline: none;
    transition: background 300ms ease;
    cursor: pointer;
    border: 0;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    width: 200px;
}

    .content-main .content-main-button.content-main-button-green {
        background: #4caf50;
    }

        .content-main .content-main-button.content-main-button-green:hover {
            background: #388e3c;
        }

    .content-main .content-main-button.content-main-button-blue {
        background: #2196f3;
        margin-left: 24px;
    }

        .content-main .content-main-button.content-main-button-blue:hover {
            background: #1976d2;
        }

.content-title {
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 16px;
}

.content-description {
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
}

.content-grey {
    background: #eceff1;
}

.content-summary {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 334px;
}

    .content-summary .content-description {
        font-size: 24px;
        line-height: 32px;
    }

.content-relative {
    position: relative;
}

.content-blocks {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 442px;
}

    .content-blocks .content-block {
        padding: 0 35px;
        align-self: center;
        flex: 1;
    }

        .content-blocks .content-block .content-block-icon {
            margin-bottom: 24px;
        }

.content-feature {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 540px;
}

    .content-feature .content-feature-summary {
        width: 480px;
    }

        .content-feature .content-feature-summary .content-feature-icon {
            margin-bottom: 16px;
        }

        .content-feature .content-feature-summary .content-feature-icon-plus {
            font-size: 24px;
            margin: 0 16px;
            position: relative;
            top: -3px;
        }

    .content-feature .content-feature-image {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .content-feature.is-right .content-feature-summary {
        margin-left: auto;
    }

    .content-feature.is-right .content-feature-image {
        left: 0;
    }

.content-dark {
    background: #263238;
    color: #fff;
}

.content-testimonials {
    height: 540px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .content-testimonials .content-description {
        margin-bottom: 24px;
    }

    .content-testimonials .content-testimonial-author {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .content-testimonials .content-testimonial-author .testimonial-author-picture {
            width: 72px;
            height: 72px;
            border-radius: 100%;
            margin-right: 16px;
        }

        .content-testimonials .content-testimonial-author .testimonial-author-name {
            text-align: left;
            font-size: 18px;
        }

.pricing {
    text-align: center;
    height: 625px;
    padding: 78px 0;
}

    .pricing .pricing-plans {
        display: flex;
        justify-content: center;
    }

        .pricing .pricing-plans .pricing-plan {
            width: 340px;
            border: solid 1px #eceff1;
            margin: 24px 16px 0 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

    .pricing .pricing-plan .pricing-plan-border {
        height: 8px;
        width: 100%;
    }

    .pricing .pricing-plan.pricing-plan-master .pricing-plan-border {
        background: #4caf50;
    }

    .pricing .pricing-plan.pricing-plan-hero .pricing-plan-border {
        background: #2196f3;
    }

    .pricing .pricing-plan .pricing-plan-name {
        font-size: 24px;
        font-weight: 400;
        height: 50px;
        line-height: 50px;
        width: 100%;
        font-weight: 600;
    }

    .pricing .pricing-plan.pricing-plan-master .pricing-plan-name {
        color: #4caf50;
        background: rgba(76,175,80,.2);
    }

    .pricing .pricing-plan.pricing-plan-hero .pricing-plan-name {
        color: #2196f3;
        background: rgba(33,150,243,.2);
    }

    .pricing .pricing-plan .pricing-plan-price {
        font-weight: 400;
        height: 72px;
        line-height: 72px;
        width: 100%;
        font-weight: 600;
    }

    .pricing .pricing-plan.pricing-plan-master .pricing-plan-price {
        color: #4caf50;
        font-size: 24px;
    }

        .pricing .pricing-plan.pricing-plan-master .pricing-plan-price .pricing-plan-price-amount {
            font-size: 48px;
        }

    .pricing .pricing-plan.pricing-plan-hero .pricing-plan-price {
        color: #2196f3;
        font-size: 40px;
    }

    .pricing .pricing-plan .pricing-plan-separator {
        height: 1px;
        background: #eceff1;
        width: 100%;
    }

    .pricing .pricing-plan .pricing-plan-description {
        padding: 16px 16px 8px 16px;
        text-align: left;
        line-height: 1.43;
        flex: 1;
    }

    .pricing .pricing-plan .pricing-plan-features {
        list-style-type: none;
        text-align: left;
        margin: 0;
        padding: 0 16px;
        line-height: 1.71;
        width: calc(100% - 32px);
    }

        .pricing .pricing-plan .pricing-plan-features svg {
            vertical-align: middle;
            margin-right: 8px;
        }

    .pricing .pricing-plan .pricing-plan-button {
        font-size: 14px;
        margin: 24px 0 16px 0;
        height: 36px;
        line-height: 36px;
        width: 144px;
        border-radius: 18px;
        outline: none;
        border: 0;
        color: #fff;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
        padding: 0;
        transition: background 300ms ease;
    }

    .pricing .pricing-plan.pricing-plan-master .pricing-plan-button {
        background: #4caf50;
    }

        .pricing .pricing-plan.pricing-plan-master .pricing-plan-button:hover {
            background: #388e3c;
        }

    .pricing .pricing-plan.pricing-plan-hero .pricing-plan-button {
        background: #2196f3;
    }

        .pricing .pricing-plan.pricing-plan-hero .pricing-plan-button:hover {
            background: #1976d2;
        }

.content-footer {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
}

    .content-footer .content-footer-register {
        margin: 16px 0;
        line-height: 1.56;
    }

    .content-footer .content-footer-trademark {
        margin-bottom: 16px;
    }

    .content-footer .content-footer-links .content-footer-link {
        text-decoration: none;
        color: #333;
        transition: color 300ms ease;
        margin: 0 12px;
    }

        .content-footer .content-footer-links .content-footer-link:hover {
            color: #2196f3;
        }

    .content-footer .content-footer-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
    }

    .content-footer .content-footer-socials .content-footer-social {
        margin: 0 8px;
    }

    .content-footer .content-footer-socials .content-footer-social:first-child svg {
        padding: 3px;
        background: #2196f3;
        border-radius: 100%;
    }

.privacy,
.terms {
    max-width: 800px;
    margin: 78px auto;
}

    .privacy .privacy-header,
    .terms .terms-header {
        text-align: center;
    }

        .privacy .privacy-header .privacy-header-title,
        .terms .terms-header .terms-header-title {
            font-size: 30px;
            margin-bottom: 16px;
        }

        .privacy .privacy-header .privacy-header-description,
        .terms .terms-header .terms-header-description {
            font-size: 24px;
            margin-bottom: 78px;
        }

    .privacy .privacy-content,
    .terms .terms-content {
        font-size: 18px;
    }

        .privacy .privacy-content .privacy-content-header,
        .terms .terms-content .terms-content-header {
            font-weight: 600;
            margin: 48px 0 8px 0;
        }

.dialog-backdrop {
    animation: 800ms ease 0s normal forwards 1 fadeInDialogBackdrop;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: 1;
}

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 500px;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.dialog-container {
    height: 100%;
}

.dialog-close {
    position: fixed;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 2;
}

    .dialog-close svg {
        fill: #fff;
        padding: 18px;
        width: 24px;
        height: 24px;
    }

.mobile-menu {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
}

@media only screen and (max-width: 1440px) {
    .content-feature .content-feature-image {
        width: 750px;
    }
}

@media only screen and (max-width: 1366px) {
    .content-main-image {
        background-image: url('https://identity.flow-e.com/images/header-image-1366.jpg');
        height: 711px;
    }

    .content-header,
    .content-blocks,
    .content-feature {
        max-width: initial;
        padding: 0 48px;
    }

    .content-feature {
        height: 500px;
    }

        .content-feature .content-feature-image {
            width: 700px;
        }
}

@media only screen and (max-width: 1024px) {
    .content-main-image {
        background-image: url('https://identity.flow-e.com/images/header-image-1024.jpg');
        height: 533px;
    }

    .content-blocks {
        flex-direction: column;
        height: initial;
        padding: 78px 0;
    }

        .content-blocks .content-block {
            margin-bottom: 48px;
            padding: 0;
            width: 480px;
        }

            .content-blocks .content-block:last-child {
                margin-bottom: 0;
            }

    .content-feature .content-feature-summary {
        margin: 0 auto;
        text-align: center;
    }

    .content-feature .content-feature-image {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .content-main-image {
        background-image: url('https://identity.flow-e.com/images/header-image-768-resp-ipad.jpg');
        height: 1620px;
    }

    header {
        position: static;
    }

    footer {
        padding: 48px;
    }

    header nav {
        display: none;
    }

    .content-main {
        padding: 48px;
    }

        .content-main .content-main-button.content-main-button-blue {
            margin: 24px 0 0;
        }

    .content-header {
        max-width: initial;
        padding: 0 24px;
    }

        .content-header .content-header-mobile-menu {
            display: block;
        }

    .pricing {
        height: initial;
        padding: 48px;
    }

        .pricing .pricing-plans {
            flex-direction: column;
            align-items: center;
        }

            .pricing .pricing-plans .pricing-plan {
                width: 100%;
                margin: 24px 24px 0;
            }

    .content-testimonials {
        height: initial;
        padding: 48px;
    }

    .content-feature {
        height: initial;
        padding: 48px;
        width: initial;
        margin: 0;
    }

    .content-blocks {
        padding: 48px;
    }

        .content-blocks .content-block {
            width: initial;
        }

    .content-testimonials .content-testimonial-author {
        flex-direction: column;
    }

        .content-testimonials .content-testimonial-author .testimonial-author-picture {
            margin: 0 0 16px 0;
        }

        .content-testimonials .content-testimonial-author .testimonial-author-name {
            text-align: center;
        }

    .content-summary {
        height: initial;
        padding: 48px;
    }

        .content-summary .content-description {
            font-size: 18px;
            line-height: 28px;
        }

    .terms,
    .privacy {
        max-width: initial;
        padding: 48px;
        margin: 0;
    }

    .content-footer .content-footer-links {
        display: flex;
        flex-direction: column;
    }


        .content-footer .content-footer-links .content-footer-link {
            margin: 0 0 24px 0;
        }

            .content-footer .content-footer-links .content-footer-link:last-child {
                margin: 0;
            }
}

@media only screen and (max-width: 480px) {
    .content-main-image {
        background-image: url('https://identity.flow-e.com/images/flow-header-image-mu-480-resp.jpg');
        height: 853px;
    }

    .content-main {
        top: 0;
    }
}