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

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li,
mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead,
time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

html {
    font-size: 62.5%
}

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

audio[controls], canvas, video {
    display: inline-block;
    * display: inline;
    * zoom: 1
}

body {
    line-height: 1;
    background: #f0f0f0
}

ol, ul {
    list-style: none;
    margin-bottom: 2em;
    line-height: 170%
}

ol {
    list-style: decimal
}

ul {
    list-style: square
}

.content-block ul {
    margin: 0
}

.content-block ul li {
    font-family: Roboto slab, serif;
    font-size: 24px;
    font-weight: 300;
    color: #316e64;
    line-height: 125%;
    width: 90%;
    margin: 0 auto;
    padding: 20px 0 20px 65px;
    list-style-type: none;
    background: url("/img/icn_checkmark@2x.png");
    background-size: 38px;
    background-repeat: no-repeat;
    background-position: 0
}

ol.clean, ul.clean {
    font-family: Roboto, sans-serif;
    list-style: none;
    margin-bottom: 0;
    margin-left: 0
}

blockquote, q {
    quotes: none;
    width: 130%;
    margin-left: -15%;
    margin-top: 2em;
    margin-bottom: 2.25em;
    font-size: 130%;
    font-style: italic;
    text-align: center
}

blockquote:after, blockquote:before, q:after, q:before {
    content: "";
    content: none
}

::selection {
    background: #d4e1ea;
    text-shadow: none
}

.image-source-link {
    color: #98c3d1
}

.mfp-with-zoom.mfp-bg, .mfp-with-zoom .mfp-container {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: .8
}

.mfp-with-zoom.mfp-removing.mfp-bg, .mfp-with-zoom.mfp-removing .mfp-container {
    opacity: 0
}

body {
    font-weight: 400;
    background: #fff
}

footer {
    padding: 20px 0;
    text-align: center;
    float: left;
    width: 100%;
    background: #222;
    margin-top: 80px
}

footer .top-nav ul {
    list-style: none;
    margin: 0 0 20px
}

footer .top-nav ul li {
    display: inline-block;
    padding: 0 10px
}

footer .top-nav ul li a {
    font-size: 15px;
    color: #666
}

#header-container {
    display: table;
    height: 90vh;
    width: 100%;
    margin: 0;
    position: relative
}

#header-container.large-background {
    background: url("/img/herosecond-min.jpg");
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.colorfill {
    height: 90vh;
    width: 100%;
    background: rgba(0, 0, 0, .3);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

#header-container .wrap {
    max-width: 1144px;
    height: 100%
}

#alert-container {
    background: #20596c;
    text-align: center;
    color: #fff;
    font-size: 16px;
    height: 78px;
    line-height: 78px
}

.site-logo {
    height: 30px;
    margin-top: 20px;
    margin-bottom: 5px
}

.content-block.green {
    background: #f5f5f5
}

.register-button {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    background: #e03955;
    color: #fff !important;
    height: 60px;
    line-height: 60px;
    border-bottom: 0;
    padding: 0 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px
}

#subscription-plans {
    margin: 0 0 40px
}

#subscription-plans ul {
    margin: 0
}

#subscription-plans ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0;
    padding: 35px;
    width: 250px;
    background: #fff;
    color: #999;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px
}

#subscription-plans span {
    display: block
}

#subscription-plans li.special {
    background: #22c3a9;
    padding: 50px;
    width: 295px;
    color: #fff
}

#subscription-plans .price {
    font-family: Roboto slab, serif;
    font-size: 42px;
    height: 90px;
    line-height: 95px;
    color: #20596c
}

#subscription-plans .special .price {
    font-size: 64px;
    height: 130px;
    line-height: 140px;
    color: #fff
}

#subscription-plans .period {
    font-family: Roboto slab, serif;
    font-size: 18px;
    text-transform: none;
    margin-bottom: 35px;
    font-weight: 400;
    line-height: 140%
}

#subscription-plans .period .small {
    font-size: 16px
}

#subscription-plans .button {
    display: block;
    margin: 0 auto;
    width: auto;
    background: #20596c;
    height: 50px;
    line-height: 50px;
    padding: 0 50px;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px
}

body {
    font-family: Roboto, serif
}

b, strong {
    font-weight: 700
}

em, i {
    font-style: italic
}

a, a:active, a:visited {
    color: #00d66e;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all ease .25s;
    -ms-transition: all ease .25s;
    transition: all .25s ease;
    border-bottom: 1px solid;
    border-bottom-color: transparent
}

#alert-container a, #alert-container a:active, #alert-container a:visited {
    color: #fff
}

a:hover, body {
    color: #333
}

body {
    font-size: 20px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4
}

footer .copy {
    font-weight: 400;
    color: #fff;
    font-size: 12px
}

footer .copy a {
    color: #fff;
    font-weight: 700;
    text-transform: inherit;
    font-size: 12px;
    letter-spacing: 0
}

footer .copy span {
    color: red
}

h1, h2, h3, h4 {
    font-family: Roboto Slab, serif;
    font-weight: 300
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #000
}

p {
    font-size: 14px;
    color: #777;
    margin-bottom: 30px
}

.vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 0 1px 3px #000
}

#header-container h1 {
    font-size: 56px;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    font-family: Roboto Slab, serif;
    font-weight: 300
}

#header-container p {
    font-family: Roboto slab, serif;
    color: #fff;
    font-size: 26px;
    font-weight: 400;
    line-height: 39px
}

#header-container a {
    color: #fff
}

.two-columns .feature {
    border: 0
}

.feature h2 {
    margin-bottom: 10px;
    text-align: left
}

.feature p {
    font-size: 16px;
    line-height: 23px
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.content-block.green h1 {
    color: #20586d;
    padding-top: 80px
}

.content-block.green {
    color: #007165;
    display: inline-block;
    width: 100%
}

.content-block.white h1 {
    color: #20586d;
    padding-top: 80px
}

.content-block.white {
    color: #fff;
    display: inline-block;
    width: 100%
}

.sign-in {
    margin: 10px 0;
    display: inline-block
}

.popup {
    background: #fff;
    padding: 30px 40px;
    text-align: left;
    max-width: 360px;
    width: 90%;
    position: relative
}

.popup, .popup form {
    margin: 0 auto
}

.popup div {
    margin-bottom: 12px
}

.popup label {
    margin-right: 2%;
    text-align: right;
    display: inline-block;
    font-size: 16px;
    display: none
}

input[type=checkbox] {
    line-height: 16px;
    vertical-align: middle
}

.popup h3 {
    font-size: 32px;
    margin-bottom: 20px
}

.popup label.error {
    display: block;
    width: 100%;
    text-align: right
}

.popup button.ladda-button {
    width: 100%
}

.popup input[type=email], .popup input[type=password], .popup input[type=text] {
    width: 100%;
    padding: 0 10px;
    font-size: 18px;
    line-height: 23px;
    height: 40px;
    border: 0;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin: 5px 0
}

.popup input[type=email]:focus, .popup input[type=password]:focus,
.popup input[type=text]:focus {
    border-color: #2faefc
}

@media only screen and (max-width:1023px) {
    .wrap {
        width: 90%;
        margin: 0 auto
    }

    .content-block .half {
        float: left;
        width: 100%
    }

    .feature {
        width: 100%;
        text-align: left;
        margin: 0 auto;
        margin-bottom: 40px
    }

    .feature-icon {
        width: 39px;
        height: auto;
        margin-left: -50px;
        float: left;
        margin-top: 5px
    }

    #alert-container {
        padding: 10px 0;
        height: auto;
        line-height: inherit
    }

    #header-container p {
        font-family: Roboto slab;
        font-weight: 300;
        font-size: 18px;
        line-height: 140%
    }

    h1 {
        font-size: 32px;
        margin-bottom: 40px;
        padding-top: 80px
    }

    img.devices {
        width: 100%;
        height: auto;
        margin-bottom: 50px
    }

    .content-block .half ul li {
        border-bottom: 1px solid #a1d6cd
    }

    .two-columns img.screen {
        width: 250px;
        height: auto;
        display: block;
        margin: 0 auto
    }
}

@media only screen and (min-width:1024px) {
    .wrap {
        max-width: 900px;
        width: 90%;
        margin: 0 auto
    }

    .content-block .half {
        float: left;
        width: 48%;
        margin-left: 2%
    }

    .content-block .half:first-child {
        margin-left: 0;
        margin-right: 1%
    }

    .feature {
        text-align: left;
        margin: 0 auto;
        margin-bottom: 40px;
        margin-left: 0
    }

    .feature-icon {
        width: 79px;
        height: auto;
        margin-left: -110px;
        float: left;
        margin-top: 5px
    }

    img.devices {
        width: 372px;
        margin: 0 auto;
        display: block
    }

    #header-container p {
        width: 865px;
        margin: 0 auto 30px
    }

    .content-block ul li {
        border-bottom: 1px solid #a1d6cd
    }

    .content-block ul li:last-child {
        border-bottom: 0
    }

    .two-columns img.screen {
        width: 250px;
        height: auto;
        display: block;
        margin: 0 auto
    }

    .content-block.first {
        padding-top: 80px;
        display: inline-block;
        width: 100%
    }
}

.two-columns {
    float: left;
    width: 50%;
    margin-bottom: 50px
}

.main_h {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    padding-top: .5em;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    opacity: 1;
    padding: 0 30px;
    margin: 0 auto
}

.sticky {
    background: #222;
    opacity: .8;
    top: 0
}

.open-nav {
    max-height: 400px !important;
    background: #222;
    opacity: .9
}

.open-nav .mobile-toggle {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg)
}

.open-nav .mobile-toggle .menu-text {
    display: none
}

.mobile-toggle {
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 25px;
    width: 30px;
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    transition: all .1s ease-in
}

nav {
    width: 100%
}

nav ul {
    list-style: none;
    overflow: hidden;
    margin-bottom: 22px;
    text-align: center
}

nav ul li {
    display: inline-block;
    line-height: 1.5;
    width: 100%;
    padding: 8px 0;
    margin: 0
}

nav ul a {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #fff !important;
    background-color: none !important;
    text-shadow: 0 1px 1px #333 !important
}

nav ul a:hover {
    font-weight: 600
}

nav ul li.login, nav ul li.signup {
    list-style: none;
    display: block;
    background: #928f8f;
    color: #57c5b3;
    margin: 0 auto;
    border: 1px solid;
    max-width: 25%
}

nav ul li.login {
    margin-top: 10px
}

.main_h {
    max-height: 70px
}

.mobile-toggle {
    display: block
}

.mobile-toggle span {
    width: 22px;
    height: 2px;
    margin-bottom: 7px;
    border-radius: 1000px;
    background: #fff;
    display: block
}

.sign-up {
    margin-right: 10px
}

.log-in, .sign-up {
    background: hsla(0, 0%, 52%, .56);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 16px;
    padding: 10px 20px;
    margin-bottom: 20px;
    border: 1px solid;
    font-family: Avenir, Helvetica neue, Helvetica, sans-serif;
    letter-spacing: 1px
}

.log-in {
    margin-left: 10px;
    color: #57c5b3
}

.log-in:hover, .sign-up:hover {
    border-color: #57c5b3
}

.writers-info {
    text-align: center;
    background: #f5f5f5;
    color: #777 !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    margin: 0
}

.join-button {
    color: #4e4d4d !important
}

.signup-tagline {
    text-align: center
}

.signup-tagline .signup {
    background: #928f8f;
    padding: 10px;
    border: 1px solid;
    border-color: #00d66e
}

.menu-text, .signup-tagline .signup {
    color: #fff;
    text-transform: uppercase
}

.menu-text {
    float: right;
    font-weight: 600;
    margin: 2px 40px 0 0
}

.fa {
    color: #fff;
    margin: 10px
}

footer .copy p {
    margin-bottom: 0
}

@media only screen and (max-width:766px) {
    nav ul li.signup {
        color: #57c5b3
    }

    nav ul li.login, nav ul li.signup {
        list-style: none;
        background: #928f8f;
        margin-bottom: 10px;
        border: 1px solid;
        max-width: 50%
    }

    nav ul li.login {
        color: #f5f5f5 !important
    }

    .two-columns {
        float: left;
        width: 100%;
        margin-bottom: 50px
    }

    #header-container h1 {
        font-size: 36px !important
    }

    #subscription-plans li.special, #subscription-plans ul li {
        width: 32%;
        font-size: 70%;
        padding: 25px
    }

    #subscription-plans .button {
        padding: 0
    }
}

@media only screen and (max-width:480px) {
    #header-container h1 {
        font-size: 28px !important
    }

    h1 {
        font-size: 22px
    }

    .feature h2 {
        font-size: 18px !important
    }

    #subscription-plans li.special, #subscription-plans ul li {
        display: block;
        margin: 0 auto;
        width: 80%
    }
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li,
mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead,
time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

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

audio[controls], canvas, video {
    display: inline-block;
    * display: inline;
    * zoom: 1
}

[contenteditable], input, textarea {
    -webkit-user-select: text;
    user-select: text
}

body {
    line-height: 1;
    background-color: #f0f1ef
}

ol, ul {
    list-style: none;
    margin-bottom: 2em;
    line-height: 170%;
    margin-left: 1.5em
}

ol {
    list-style: decimal
}

ul {
    list-style: square
}

ol.clean, ul.clean {
    list-style: none;
    margin-bottom: 0;
    margin-left: 0
}

blockquote, q {
    quotes: none;
    width: 90%;
    margin: 2em 5% 2.25em;
    font-size: 130%;
    font-style: italic;
    text-align: center;
    line-height: 130%
}

blockquote span, q span {
    display: block;
    margin-top: 10px;
    font-size: 80%
}

blockquote:after, blockquote:before, q:after, q:before {
    content: "";
    content: none
}

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

::selection {
    background: #d4e1ea;
    text-shadow: none
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word
}

.lbr {
    line-height: 3px
}

* {
    -webkit-tap-highlight-color: transparent
}

button, input[type=email], input[type=password], input[type=submit],
input[type=text], textarea {
    -webkit-appearance: none;
    border: 0
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    color: #999;
    font-size: 16px;
    display: block;
    cursor: text
}

.editor [contenteditable=true]:empty:before {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-style: italic;
    text-align: center;
    width: 75%
}

/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2014 Hakim El Hattab, http://hakim.se
 */
.ladda-button {
    position: relative
}

.ladda-button .ladda-spinner {
    position: absolute;
    z-index: 2;
    display: inline-block;
    width: 32px;
    height: 32px;
    top: 50%;
    margin-top: 0;
    opacity: 0;
    pointer-events: none
}

.ladda-button .ladda-label {
    position: relative;
    z-index: 3
}

.ladda-button .ladda-progress {
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .1s linear !important;
    -moz-transition: .1s linear all !important;
    -ms-transition: .1s linear all !important;
    -o-transition: .1s linear all !important;
    transition: all .1s linear !important
}

.ladda-button[data-loading] .ladda-progress {
    opacity: 1;
    visibility: visible
}

.ladda-button, .ladda-button .ladda-label, .ladda-button .ladda-spinner {
    -webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1.275) !important;
    -moz-transition: .3s cubic-bezier(.175, .885, .32, 1.275) all !important;
    -ms-transition: .3s cubic-bezier(.175, .885, .32, 1.275) all !important;
    -o-transition: .3s cubic-bezier(.175, .885, .32, 1.275) all !important;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275) !important
}

.ladda-button[data-style=zoom-in], .ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-in] .ladda-spinner, .ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-label, .ladda-button[data-style=zoom-out] .ladda-spinner {
    -webkit-transition: all .3s ease !important;
    -moz-transition: .3s ease all !important;
    -ms-transition: .3s ease all !important;
    -o-transition: .3s ease all !important;
    transition: all .3s ease !important
}

.ladda-button[data-style=expand-right] .ladda-spinner {
    right: -6px
}

.ladda-button[data-style=expand-right][data-size=s] .ladda-spinner,
.ladda-button[data-style=expand-right][data-size=xs] .ladda-spinner {
    right: -12px
}

.ladda-button[data-style=expand-right][data-loading] {
    padding-right: 56px
}

.ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
    opacity: 1
}

.ladda-button[data-style=expand-right][data-loading][data-size=s],
.ladda-button[data-style=expand-right][data-loading][data-size=xs] {
    padding-right: 40px
}

.ladda-button[data-style=expand-left] .ladda-spinner {
    left: 26px
}

.ladda-button[data-style=expand-left][data-size=s] .ladda-spinner,
.ladda-button[data-style=expand-left][data-size=xs] .ladda-spinner {
    left: 4px
}

.ladda-button[data-style=expand-left][data-loading] {
    padding-left: 56px
}

.ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
    opacity: 1
}

.ladda-button[data-style=expand-left][data-loading][data-size=s],
.ladda-button[data-style=expand-left][data-loading][data-size=xs] {
    padding-left: 40px
}

.ladda-button[data-style=expand-up] {
    overflow: hidden
}

.ladda-button[data-style=expand-up] .ladda-spinner {
    top: -32px;
    left: 50%;
    margin-left: 0
}

.ladda-button[data-style=expand-up][data-loading] {
    padding-top: 54px
}

.ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
    opacity: 1;
    top: 26px;
    margin-top: 0
}

.ladda-button[data-style=expand-up][data-loading][data-size=s],
.ladda-button[data-style=expand-up][data-loading][data-size=xs] {
    padding-top: 32px
}

.ladda-button[data-style=expand-up][data-loading][data-size=s] .ladda-spinner,
.ladda-button[data-style=expand-up][data-loading][data-size=xs] .ladda-spinner {
    top: 4px
}

.ladda-button[data-style=expand-down] {
    overflow: hidden
}

.ladda-button[data-style=expand-down] .ladda-spinner {
    top: 62px;
    left: 50%;
    margin-left: 0
}

.ladda-button[data-style=expand-down][data-size=s] .ladda-spinner,
.ladda-button[data-style=expand-down][data-size=xs] .ladda-spinner {
    top: 40px
}

.ladda-button[data-style=expand-down][data-loading] {
    padding-bottom: 54px
}

.ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
    opacity: 1
}

.ladda-button[data-style=expand-down][data-loading][data-size=s],
.ladda-button[data-style=expand-down][data-loading][data-size=xs] {
    padding-bottom: 32px
}

.ladda-button[data-style=slide-left] {
    overflow: hidden
}

.ladda-button[data-style=slide-left] .ladda-label {
    position: relative
}

.ladda-button[data-style=slide-left] .ladda-spinner {
    left: 100%;
    margin-left: 0
}

.ladda-button[data-style=slide-left][data-loading] .ladda-label {
    opacity: 0;
    left: -100%
}

.ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
    opacity: 1;
    left: 50%
}

.ladda-button[data-style=slide-right] {
    overflow: hidden
}

.ladda-button[data-style=slide-right] .ladda-label {
    position: relative
}

.ladda-button[data-style=slide-right] .ladda-spinner {
    right: 100%;
    margin-left: 0;
    left: 16px
}

.ladda-button[data-style=slide-right][data-loading] .ladda-label {
    opacity: 0;
    left: 100%
}

.ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
    opacity: 1;
    left: 50%
}

.ladda-button[data-style=slide-up] {
    overflow: hidden
}

.ladda-button[data-style=slide-up] .ladda-label {
    position: relative
}

.ladda-button[data-style=slide-up] .ladda-spinner {
    left: 50%;
    margin-left: 0;
    margin-top: 1em
}

.ladda-button[data-style=slide-up][data-loading] .ladda-label {
    opacity: 0;
    top: -1em
}

.ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
    opacity: 1;
    margin-top: 0
}

.ladda-button[data-style=slide-down] {
    overflow: hidden
}

.ladda-button[data-style=slide-down] .ladda-label {
    position: relative
}

.ladda-button[data-style=slide-down] .ladda-spinner {
    left: 50%;
    margin-left: 0;
    margin-top: -2em
}

.ladda-button[data-style=slide-down][data-loading] .ladda-label {
    opacity: 0;
    top: 1em
}

.ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
    opacity: 1;
    margin-top: 0
}

.ladda-button[data-style=zoom-out] {
    overflow: hidden
}

.ladda-button[data-style=zoom-out] .ladda-spinner {
    left: 50%;
    margin-left: 32px;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5)
}

.ladda-button[data-style=zoom-out] .ladda-label {
    position: relative;
    display: inline-block
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
    opacity: 0;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5)
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
    opacity: 1;
    margin-left: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

.ladda-button[data-style=zoom-in] {
    overflow: hidden
}

.ladda-button[data-style=zoom-in] .ladda-spinner {
    left: 50%;
    margin-left: -16px;
    -webkit-transform: scale(.2);
    -moz-transform: scale(.2);
    -ms-transform: scale(.2);
    -o-transform: scale(.2);
    transform: scale(.2)
}

.ladda-button[data-style=zoom-in] .ladda-label {
    position: relative;
    display: inline-block
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
    opacity: 0;
    -webkit-transform: scale(2.2);
    -moz-transform: scale(2.2);
    -ms-transform: scale(2.2);
    -o-transform: scale(2.2);
    transform: scale(2.2)
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
    opacity: 1;
    margin-left: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

.ladda-button[data-style=contract] {
    overflow: hidden;
    width: 100px
}

.ladda-button[data-style=contract] .ladda-spinner {
    left: 50%;
    margin-left: 0
}

.ladda-button[data-style=contract][data-loading] {
    border-radius: 50%;
    width: 52px
}

.ladda-button[data-style=contract][data-loading] .ladda-label {
    opacity: 0
}

.ladda-button[data-style=contract][data-loading] .ladda-spinner {
    opacity: 1
}

.ladda-button[data-style=contract-overlay] {
    overflow: hidden;
    width: 100px;
    box-shadow: 0 0 0 2000px transparent
}

.ladda-button[data-style=contract-overlay] .ladda-spinner {
    left: 50%;
    margin-left: 0
}

.ladda-button[data-style=contract-overlay][data-loading] {
    border-radius: 50%;
    width: 52px;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, .8)
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
    opacity: 0
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
    opacity: 1
}

.ladda-button {
    background: #666;
    border: 0;
    padding: 14px 18px;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    border-radius: 2px;
    border: 1px solid transparent;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent
}

.ladda-button:hover {
    border-color: rgba(0, 0, 0, .07);
    background-color: #888
}

.ladda-button[data-color=green] {
    background: #2aca76
}

.ladda-button[data-color=green]:hover {
    background-color: #38d683
}

.ladda-button[data-color=blue] {
    background: #53b5e6
}

.ladda-button[data-color=blue]:hover {
    background-color: #69bfe9
}

.ladda-button[data-color=red] {
    background: #ea8557
}

.ladda-button[data-color=red]:hover {
    background-color: #ed956e
}

.ladda-button[data-color=purple] {
    background: #9973c2
}

.ladda-button[data-color=purple]:hover {
    background-color: #a685ca
}

.ladda-button[data-color=mint] {
    background: #16a085
}

.ladda-button[data-color=mint]:hover {
    background-color: #19b698
}

.ladda-button[data-loading], .ladda-button[disabled] {
    border-color: rgba(0, 0, 0, .07);
    cursor: default;
    background-color: #999
}

.ladda-button[data-loading]:hover, .ladda-button[disabled]:hover {
    cursor: default;
    background-color: #999
}

.ladda-button[data-size=xs] {
    padding: 4px 8px
}

.ladda-button[data-size=xs] .ladda-label {
    font-size: .7em
}

.ladda-button[data-size=s] {
    padding: 6px 10px
}

.ladda-button[data-size=s] .ladda-label {
    font-size: .9em
}

.ladda-button[data-size=l] .ladda-label {
    font-size: 1.2em
}

.ladda-button[data-size=xl] .ladda-label {
    font-size: 1.5em
}

#main {
    margin: 0 auto;
    position: relative;
    width: 100%
}

.info {
    width: 90%;
    margin: 15px 0;
    padding: 10px 20px
}

.loader {
    width: 26px;
    height: 40px;
    background-color: #fff;
    border: 3px solid #333;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out
}

.progress-card-under .loader {
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 12.5px);
    top: -23px
}

.loading {
    position: relative;
    padding-right: 40px !important
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }

    to {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }

    to {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

#content, footer, header {
    float: left;
    width: 100%
}

#content {
    background: transparent;
    margin: 30px 0;
}

header {
    height: 50px;
    line-height: 50px;
    background: #fff
}

footer {
    line-height: 60px;
    background: transparent
}

#logo {
    height: 50px;
    width: 22.5px;
    background: url(./assets/images/blankpage_logo.png);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    vertical-align: middle
}

section {
    margin: 30px 0;
    float: left;
    width: 100%
}

.content-block {
    background: #fff;
    margin: 0;
    padding: 30px 0
}

.white-content-block {
    margin: 1em 0;
    display: block
}

.white-content-block, .white-content-inline {
    background: #fff;
    padding: 3em 2em;
    border: 1px solid #ddd
}

.white-content-inline {
    margin: 1em;
    display: inline-block
}

.white-content-inline.third {
    width: 30%;
    margin-right: 1%;
    margin-left: 1%
}

.white-content-inline.half {
    width: 48%;
    margin-right: 1%;
    margin-left: 1%
}

.white-content-block.link {
    padding: 1em 2em
}

section.green {
    color: #007165;
    background: #d9eeea !important;
    margin: 0;
    padding: 30px 0
}

section.green h1:not(.section-header) {
    line-height: 1.4em;
    color: #20586d;
    font-family: Roboto Slab, serif;
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 1em;
    padding-top: 0
}

.blog table {
    width: 100%
}

.blog table td:first-child {
    width: 80%
}

#stories {
    float: left;
    width: 100%
}

.wrapper, .wrapper-wide {
    width: 85%;
    max-width: 528px;
    margin: 0 auto
}

nav.top-nav {
    position: fixed;
    top: -200px;
    left: 0;
    right: 0;
    background: #1d1d20;
    padding: 20px;
    height: 200px
}

nav.top-nav ul {
    margin: 0;
    list-style: none
}

nav.top-nav li {
    margin-bottom: 5px;
    text-align: right
}

nav.top-nav a:active, nav.top-nav a:link, nav.top-nav a:visited {
    text-decoration: none;
    color: #b3b3b3;
    font-family: Droid Sans Mono;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px
}

#main, nav.top-nav {
    -webkit-transition: all .3s cubic-bezier(.8, 0, 0, 1);
    -moz-transition: all .3s cubic-bezier(.8, 0, 0, 1);
    -o-transition: all .3s cubic-bezier(.8, 0, 0, 1);
    -ms-transition: all .3s cubic-bezier(.8, 0, 0, 1);
    transition: all .3s cubic-bezier(.8, 0, 0, 1)
}

#main.menu {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    transform: translateY(200px)
}

header .menu-button {
    float: right;
    height: 50px;
    line-height: 50px;
    font-family: Droid Sans Mono;
    letter-spacing: 2px;
    cursor: pointer
}

header .menu-button .menu-header-burger {
    width: 18px;
    height: 11px;
    display: inline-block
}

ul.pieces, ul.story {
    margin: 0
}

section .story div {
    width: 190px;
    min-height: 230px;
    position: relative;
    background: #fff;
    border: 1px solid #dcdcdc;
    text-align: center;
    transition: all .15s ease;
    -webkit-transition: all .15s ease
}

section .story div.nano {
    background-image: url(./assets/images/nano_logo.png);
    background-size: 25% 25%;
    background-position: center 40px;
    background-repeat: no-repeat
}

#storyHeader .nano {
    background-image: url(./assets/images/nano_logo.png);
    background-size: auto 30px;
    background-position: 20px;
    background-repeat: no-repeat
}

section .story div:hover {
    border-color: #aaa
}

section .story h2 {
    margin-bottom: 1em;
    font-size: 20px;
    letter-spacing: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 10px;
    word-wrap: break-word
}

section.story p {
    text-align: left;
    margin-bottom: 2em
}

section.story .features {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: right
}

article.story span.delete {
    display: block;
    position: absolute;
    right: -10px;
    top: -10px;
    height: 25px;
    width: 25px;
    cursor: pointer;
    background: #eb6366;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    text-align: center;
    line-height: 25px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    opacity: 0
}

article.story:hover span.delete {
    opacity: 1
}

.piece {
    list-style: none;
    position: relative;
    z-index: 400
}

.piece .piece-content {
    display: block;
    padding: 0;
    margin-bottom: 5px;
    z-index: 500;
    padding: 10px 10px 10px 45px
}

.piece .features, .piece .piece-content {
    width: 100%;
    background: #fff;
    border-radius: 5px
}

.piece .features {
    text-align: right;
    padding: 0;
    line-height: 12px;
    right: 0;
    padding-bottom: 2px;
    padding-left: 45px
}

.handle, .piece .features {
    position: absolute;
    bottom: 0;
    left: 0
}

.handle {
    background: #ddd;
    background-image: url(./assets/images/icon-reorder.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
    width: 45px;
    cursor: move;
    top: 0;
    border-radius: 5px 0 0 5px;
    z-index: 600
}

li.sortable-placeholder {
    height: 100px;
    margin-bottom: 15px;
    border: 1px dotted #999;
    border-radius: 5px;
    width: 100%;
    list-style: none;
    list-style-type: none
}

li.piece .piece-stats, li.piece h2 {
    margin-bottom: .25em;
    font-family: Roboto, sans-serif;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0
}

li.piece .piece-stats {
    float: right;
    margin-right: 0
}

li.piece h2 {
    width: 50%;
    text-align: left;
    margin-left: 10px
}

.c3-tooltip {
    display: block;
    background: #fff;
    font-family: Roboto sans, sans-serif
}

.c3-tooltip td, .c3-tooltip th, .c3-tooltip tr {
    border: 0;
    line-height: 18px;
    height: 18px;
    font-size: 14px
}

li.piece h2 a {
    color: #999
}

li.piece h2 a:hover {
    color: #555
}

li.piece .outline {
    line-height: 140%;
    text-align: left;
    color: #666;
    cursor: text;
    z-index: 900;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    border: 0;
    resize: none;
    padding: 5px 0;
    outline: none
}

.common, li.piece .outline {
    width: 80%;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    background: #fff;
    padding: 0 0 0 10px;
    border-radius: 5px 5px 0 0
}

li.piece .outline:focus {
    color: #333
}

#scratchpad {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -230px;
    height: 100%;
    width: 230px;
    background: #222;
    padding: 30px 15px;
    -webkit-transition: -webkit-transform .2s cubic-bezier(.2, .3, .25, .9);
    -moz-transition: -webkit-transform .2s cubic-bezier(.2, .3, .25, .9);
    -ms-transition: -webkit-transform .2s cubic-bezier(.2, .3, .25, .9);
    transition: -webkit-transform .2s cubic-bezier(.2, .3, .25, .9);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0)
}

#scratchpad.open {
    -webkit-transform: translate3d(230px, 0, 0);
    -moz-transform: translate3d(230px, 0, 0);
    -o-transform: translate3d(230px, 0, 0);
    transform: translate3d(230px, 0, 0)
}

#scratchpad .outline {
    height: 100%
}

[contenteditable=true]:focus {
    border: 0;
    outline: 0
}

#events {
    height: 200px
}

#events .domain {
    fill: none;
    stroke: #ddd;
    stroke-width: 1
}

#events line {
    stroke: #ddd
}

#events .c3-ygrid-line line {
    stroke-dasharray: 5, 5;
    stroke: #888
}

#events .c3-ygrid-line text {
    fill: #333
}

#events .c3-lines-words {
    fill: transparent
}

#events rect {
    fill: #999;
    transition: fill .15s ease;
    -webkit-transition: fill .15s ease;
    -ms-transition: fill ease .15s;
    -moz-transition: fill ease .15s
}

#events rect:hover {
    fill: #777
}

.payment-logo {
    width: 62.5px;
    height: auto;
    vertical-align: middle
}

footer .footer-columns-container {
    float: left;
    width: 100%;
    margin: 60px 0 40px
}

footer .footer-columns {
    width: 32%;
    float: left;
    line-height: 150%;
    text-align: left;
    margin: 0
}

footer .footer-columns h4 {
    margin: 15px 0 5px
}

footer .footer-columns a {
    font-family: Roboto, sans-serif;
    color: #333
}

footer div.copy {
    font-weight: 400;
    font-family: Roboto, sans-serif;
    color: #555;
    font-size: 12px;
    text-align: center;
    width: 100%;
    margin-top: 20px
}

footer div.copy a {
    color: #333;
    font-weight: 700
}

footer div.copy span {
    color: red
}

.tutorial {
    width: 80%;
    margin: 40px auto 0
}

#next .body, #next .outline, #previous .body, #previous .outline {
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s
}

#previous {
    margin: 20px 0 15px
}

#next {
    margin-top: 150px;
    margin-bottom: 30px
}

#next .body, #next .outline, #previous .body, #previous .outline {
    opacity: 0
}

#next:hover .body, #next:hover .outline, #previous:hover .body, #previous:hover .outline {
    opacity: 1
}

#stories .inspiration {
    display: none;
    text-align: center;
    overflow: hidden
}

#stories .inspiration h3 {
    border-bottom: 1px solid #aaa;
    width: 30%;
    margin: 0 35% 30px;
    font-family: "Droid serif", serif;
    height: 12px;
    font-weight: 300;
    color: #555;
    font-size: 18px;
    letter-spacing: 0
}

#stories .inspiration h3 span {
    background: #fff;
    display: inline-block;
    padding: 0 15px
}

#stories .inspiration h3 span a {
    color: #555
}

#stories .inspiration h1 {
    margin-bottom: 15px
}

#stories .inspiration h1 a {
    color: #555
}

#stories .inspiration h1 a:hover, #stories .inspiration h3 a:hover {
    color: #333
}

#stories .body {
    width: 50%;
    margin: 0 auto
}

#stories .inspiration img {
    width: 100%;
    height: auto
}

span.plan {
    width: 33%;
    text-align: center;
    display: block;
    float: left;
    padding: 20px 0
}

span.plan input {
    margin: 10px auto;
    display: block;
    width: 15px
}

.card-logo {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0
}

.card-logo.stripe {
    width: 119px;
    height: 26px;
    background-image: url(./assets/images/stripe.png)
}

.card-logo.visa {
    background-image: url(./assets/images/visa.png)
}

.card-logo.mastercard, .card-logo.visa {
    width: 45px;
    height: 30px;
    background-size: 45px 30px
}

.card-logo.mastercard {
    background-image: url(./assets/images/mastercard.png)
}

.card-logo.amex {
    width: 45px;
    height: 30px;
    background-image: url(./assets/images/amex.png);
    background-size: 45px 30px
}

#subscription-plans div {
    margin: 5px 0
}

.vertical button.sign-up {
    color: #fff
}

.signup.button {
    color: #fff;
    font-family: Roboto slab, serif;
    font-size: 20px;
    font-weight: 400;
    width: 90%;
    margin: 20px auto;
    height: 45px;
    border: 0
}

#wordcounter .donut {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-bottom: 2px;
    -webkit-transform: translateZ(0);
    transform: rotate(-91deg)
}

#wordcounter .donut:hover circle {
    stroke-width: 19px
}

.progressIndicator {
    position: relative
}

.progressIndicator #effect {
    display: block;
    width: 240px;
    height: 110px;
    cursor: pointer;
    position: absolute;
    top: -13px;
    left: -70px;
    z-index: 200
}

.progressIndicator.win .progressBarContent, .progressIndicator.win .progressBarContent span {
    color: #fff
}

.progressIndicator.win circle#base {
    fill: #56b48d
}

.progressIndicator circle {
    transition: stroke-dashoffset .2s ease
}

.progressBar {
    position: absolute;
    top: -5px;
    left: 0;
    transform: rotate(-90deg);
    z-index: 300
}

.progressBarContent {
    position: absolute;
    top: 30px;
    left: 0;
    width: 90px;
    overflow: hidden;
    line-height: 1;
    font-size: 7px;
    text-align: center;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    transition: transform .5s;
    backface-visibility: hidden;
    z-index: 400
}

.progressBarContent.back, .progressIndicator.win .progressBarContent {
    transform: rotateY(180deg)
}

.progressIndicator.win .progressBarContent.back {
    transform: rotateY(0deg);
    height: 80px;
    top: 0
}

.progressBarContent span {
    display: block;
    margin-bottom: 1px;
    font-size: 15px;
    font-weight: 600;
    color: #222
}

.progressIndicator.win .progressBarContent span {
    font-size: 55px;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.progressBarContent svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    fill: #fff
}

.progressContent {
    position: absolute;
    top: 30px;
    left: 95px;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 300;
    text-transform: lowercase;
    letter-spacing: 0;
    z-index: 400
}

.progressContent span {
    font-weight: 600
}

.trial-container {
    width: 100%;
    margin: 0 auto 1em
}

.trial-headline {
    font-family: Roboto, sans-serif;
    font-size: 13px;
    margin-bottom: 10px;
    display: block
}

progress[value] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    width: 100%;
    height: 13px;
    border-radius: 3px;
    position: relative;
    border-radius: 20px;
    vertical-align: middle
}

progress::-webkit-progress-bar {
    background: #f0f1ef;
    border-radius: 20px;
    overflow: hidden;
    border: 0 solid #aaa;
    padding: 0;
    box-shadow: 0 0 0 #aaa;
    background: #fff;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s
}

@-webkit-keyframes move {
    0% {
        background-position: 0 0, 0 0, 0 0
    }

    to {
        background-position: -100px 0, 0 0, 0 0
    }
}

@keyframes move {
    0% {
        background-position: 0 0, 0 0, 0 0
    }

    to {
        background-position: -100px 0, 0 0, 0 0
    }
}

progress::-webkit-progress-value {
    border-radius: 20px;
    -webkit-animation: move 5s linear infinite;
    animation: move 5s linear infinite;
    background: -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 66%, transparent 0), -webkit-linear-gradient(left, #2aca76, #2aca76);
    background-size: 25px 14px, 100% 100%, 100% 100%
}

.appsumo .logo-container {
    font-size: 75px;
    font-family: Roboto, sans-serif;
    vertical-align: middle;
    text-align: center;
    margin: 30px 0
}

.appsumo .logo {
    display: inline-block;
    vertical-align: middle;
    height: 150px;
    width: auto;
    text-align: center
}

.appsumo .bp.logo {
    height: 140px;
    margin: 5px 30px
}

body {
    font-size: 16px;
    color: #222;
    -webkit-font-smoothing: antialiased
}

body, h1, h2, h3, h4 {
    font-family: Droid Serif, Georgia, Cambria, Times New Roman, Times, serif
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -1px;
    color: #444
}

h1 {
    text-align: center
}

a, a:active {
    color: #2aca76;
    text-decoration: none
}

a:visited {
    color: #27be70
}

a:hover {
    text-decoration: underline
}

.success {
    color: #2aca76 !important;
    fill: #2aca76 !important
}

h1 a, h2 a, h3 a, h4 a {
    color: #333
}

h1 a, h1 a:hover, h2 a, h2 a:hover, h3 a, h3 a:hover, h4 a, h4 a:hover {
    text-decoration: none
}

h1 {
    font-size: 225%
}

h1, h2 {
    margin-bottom: 1em
}

h2 {
    font-size: 180%
}

h3 {
    font-size: 150%
}

h3, h4 {
    margin-bottom: 1em
}

h4 {
    font-size: 110%
}

p {
    line-height: 140%;
    margin-bottom: 1em
}

b, strong {
    font-weight: 700
}

em, i {
    font-style: italic
}

.article .post-title h1, .blog .post-title h1 {
    margin-top: 1em;
    margin-bottom: .5em
}

.blog h2 {
    font-size: 150%
}

.article .post-meta, .blog .post-meta {
    margin: 0 0 2em;
    text-align: center;
    color: #555;
    font-family: Roboto, sans-serif;
    font-size: 14px
}

.blog .post-content {
    margin-bottom: 1em
}

.article .post-header-image, .blog .post-header-image {
    width: 100%
}

.article .post-content h1, .article .post-content h2, .article .post-content h3,
.article .post-content h4, .blog .post-content h1, .blog .post-content h2,
.blog .post-content h3, .blog .post-content h4 {
    line-height: 120%;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px
}

.article .post-content p, .blog .post-content p {
    max-width: 650px;
    margin: 0 auto 1.5em;
    line-height: 160%
}

.article .post-content li, .blog .post-content li {
    max-width: 600px;
    margin: 0 auto 1em
}

.blog .post-content img {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block
}

.article .post-meta span, .blog .post-meta span {
    color: #333
}

.article table tbody, .blog table tbody {
    font-family: Roboto, sans-serif
}

.blog table td:last-child {
    text-align: right;
    color: #555
}

.blog table thead h3 {
    margin-bottom: .25em
}

.article table tbody td, .blog table tbody td {
    padding: .5em 0
}

.feature {
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px
}

.feature a:active, .feature a:link, .feature a:visited {
    text-decoration: none;
    color: inherit
}

#storyHeader .title {
    color: #555;
    font-family: Droid Serif, Georgia, Cambria, Times New Roman, Times, serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 120%;
    margin-bottom: 20px;
    margin-top: 40px;
    display: inline-block
}

#storyHeader .title:after {
    display: inline-block;
    width: 20px;
    height: 20px;
    content: " ";
    background-image: url(./assets/images/icon-edit.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50% 50%
}

#events text, h1.section-header {
    font-size: 12px;
    font-family: Roboto;
    border-bottom: 1px solid #aaa;
    padding-bottom: 5px;
    padding-top: 0 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    fill: #555;
    font-weight: 400;
    text-align: left
}

.section-header a {
    color: #aaa;
    font-weight: 400;
    cursor: pointer
}

.section-header a:hover {
    color: #333
}

.section-body {
    font-family: Roboto, sans-serif
}

.section-body p {
    color: #666
}

.section-body em {
    color: #333
}

#events .bar {
    z-index: 600
}

#events .bar-label {
    font-size: 24px;
    font-family: Roboto, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #eee;
    fill: #eee;
    font-weight: 800
}

.setting.goal {
    font-size: 46px;
    text-align: center;
    color: #444;
    margin-bottom: 15px;
    display: block;
    background-color: #fff;
    line-height: 120%
}

.settings-section .radio {
    width: 25%;
    float: left;
    padding: 0 0 25px;
    text-align: center
}

.settings-section .country {
    width: 50%;
    float: left
}

.message {
    display: none
}

.sans {
    font-family: Roboto, sans-serif
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.thin {
    font-family: Roboto, sans-serif;
    font-weight: 300
}

.error {
    color: red !important
}

input.error {
    border-color: red !important
}

.success {
    color: #00d66e
}

.tutorial {
    font-family: Roboto, sans-serif;
    color: #555
}

.tutorial .goal {
    background: #fff;
    color: #333;
    padding: 0 5px
}

.tutorial h1 {
    font-size: 36px !important;
    margin: 20px 0 10px !important;
    text-align: center
}

.stats-block, .tutorial h1 {
    font-family: Roboto, sans-serif;
    color: #555
}

.stats-block {
    font-size: 14px
}

.stats-block .data {
    color: #333;
    font-weight: 600
}

.stats-block a.external {
    color: #53b5e6;
    font-weight: 600
}

#next, #previous {
    font-family: Roboto, sans-seriff;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #999
}

#next a, #previous a {
    color: #999
}

#next .title, #previous .title {
    text-transform: uppercase
}

#next .button {
    font-size: 13px
}

#next .title, #previous .title {
    text-align: center
}

#scratchpad {
    font-family: Droid sans mono;
    font-size: 13px;
    color: #fff;
    line-height: 140%;
    z-index: 500
}

#scratchpad h2 {
    font-family: Roboto, sans-serif;
    text-transform: lowercase;
    font-size: 16px;
    font-weight: 300;
    color: #777;
    margin-bottom: 7px;
    text-align: center
}

#editor-meta {
    padding: 0;
    line-height: 25px;
    width: 100%
}

section.subscription {
    color: #777;
    font-size: 14px
}

.content-block ul li {
    font-family: Roboto slab, serif;
    font-size: 24px;
    font-weight: 300;
    color: #316e64;
    line-height: 125%;
    width: 90%;
    margin: 0 auto;
    padding: 20px 0 20px 65px;
    list-style-type: none;
    background: url(./assets/images/icn_checkmark@2x.png);
    background-size: 38px;
    background-repeat: no-repeat;
    background-position: 0
}

#subscription-plans {
    margin: 0 0 40px
}

#subscription-plans ul {
    margin: 0
}

#subscription-plans ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0;
    padding: 30px;
    width: 230px;
    background: #fff;
    color: #999;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px
}

#subscription-plans span {
    display: block
}

#subscription-plans ul {
    font-size: 0
}

#subscription-plans li.special {
    background: #22c3a9;
    padding: 50px 40px;
    width: 275px;
    color: #fff
}

#subscription-plans .price {
    font-family: Roboto slab, serif;
    font-size: 42px;
    height: 90px;
    line-height: 95px;
    color: #20596c
}

#subscription-plans .special .price {
    font-size: 64px;
    height: 130px;
    line-height: 140px;
    color: #fff
}

#subscription-plans .period {
    font-family: Roboto slab, serif;
    font-size: 22px;
    text-transform: none;
    margin-bottom: 35px;
    font-weight: 400
}

#subscription-plans .button {
    display: block;
    margin: 0 auto;
    width: auto;
    background: #20596c;
    height: 50px;
    line-height: 50px;
    padding: 0 50px;
    color: #fff;
    border: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px
}

.white-content-block.link a {
    font-family: Roboto, sans-serif;
    width: 100%;
    display: inline-block
}

.white-content-block.link a span {
    color: #999;
    display: inline-block;
    float: right
}

.button {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 0;
    color: #fff !important;
    font-family: Roboto, sans-serif !important;
    height: 2em;
    line-height: 2em;
    background: #56b48d;
    box-shadow: 0 2px 0 #408669;
    cursor: pointer;
    display: inline-block;
    outline: none;
    padding: 0 2em;
    margin: 0;
    position: relative;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -ms-transition: all ease .2s;
    -moz-transition: all ease .2s
}

.button:hover {
    box-shadow: 0 1px 0 #408669;
    top: 1px;
    text-decoration: none
}

.button:active {
    box-shadow: inset 0 0 2px #408669;
    text-decoration: none
}

.button.blue {
    background: #569bb4;
    box-shadow: 0 2px 0 #407486;
    top: 0
}

.button.blue:hover {
    box-shadow: 0 1px 0 #407486;
    top: 1px
}

.button.blue:active {
    box-shadow: inset 0 0 2px #407486;
    top: 3px
}

.button.red {
    background: #eb6366;
    box-shadow: 0 2px 0 #b04a4c;
    top: 0
}

.button.red:hover {
    box-shadow: 0 1px 0 #b04a4c;
    top: 1px
}

.button.red:active {
    box-shadow: inset 0 0 2px #b04a4c;
    top: 3px
}

.fullwidth {
    width: 100%
}

.right {
    float: right
}

.button.export {
    border: 1px solid #53b5e6;
    color: #53b5e6;
    float: right;
    margin-left: 10px
}

.button.export:active {
    background: #53b5e6;
    color: #fff
}

.button.cancel-plan {
    border: 1px solid #999;
    color: #999
}

.button .spinner {
    display: inline-block;
    transform: translate(20px, 14px);
    height: 19px;
    width: 10px !important
}

.ladda-button {
    padding: 0 inherit
}

.outline-button {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid #56b48d;
    color: #56b48d !important;
    font-family: Roboto, sans-serif !important;
    height: 2em;
    line-height: 2em;
    background: transparent;
    box-shadow: 0 2px 0 rgba(64, 134, 105, .3);
    cursor: pointer;
    display: inline-block;
    outline: none;
    padding: 0 1em;
    margin: 0;
    position: relative;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px
}

.outline-button:hover {
    box-shadow: 0 1px 0 rgba(64, 134, 105, .5);
    top: 1px;
    text-decoration: none
}

li.piece .features {
    text-align: right;
    padding: 0;
    line-height: 12px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding-right: 10px;
    z-index: 500
}

li.piece .features .delete {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(./assets/images/icon-delete.png);
    background-repeat: no-repeat;
    background-size: 19px;
    background-position: 50% 50%;
    cursor: pointer;
    vertical-align: middle;
    z-index: 600
}

li.piece .feature.button {
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 5px;
    border: 1px solid #aaa;
    z-index: 600
}

li.piece .feature.button:hover {
    border: 1px solid #555
}

li.piece .feature.button:active {
    margin-top: 5px;
    margin-bottom: 0;
    margin-left: 5px;
    background: #333
}

li.piece .feature.button.delete:active {
    background: #f25c66
}

section.editor {
    padding: 30px 60px 60px;
    margin-top: 15px;
    margin-bottom: 0;
    background: #fff;
    border: 1px solid #ddd
}

section.editor .section-header {
    margin-bottom: 30px;
    border-bottom: 0
}

section.editor h1 {
    width: 70%;
    margin: 0 auto 1em;
    text-align: center;
    border-bottom: 1px dashed #e8e8e8
}

section.editor p {
    color: #333
}

.story-title-container {
    margin-top: 10px;
    float: left;
    width: 100%;
    font-family: Roboto, sans-serif
}

#editor-meta {
    display: inline-block;
    color: #777;
    font-size: 11px;
    font-family: Roboto, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase
}

#editor-meta #saved, #editor-meta #wordcounter {
    float: right;
    margin-left: 10px;
    transition: color .8s ease;
    -webkit-transition: color .8s ease;
    -moz-transition: color ease .8s;
    -ms-transition: color ease .8s
}

.editor.right {
    margin-top: 22px;
    text-align: right
}

.section-body fieldgroup {
    padding: 15px 0;
    display: block
}

.section-body label {
    font-weight: 600;
    display: block;
    margin-bottom: 10px
}

.section-body input {
    margin-left: 10px;
    margin-right: 5px
}

.settings-section h5 {
    font-weight: 600;
    display: block;
    margin-bottom: 10px
}

.settings-section label {
    margin-bottom: 5px;
    font-size: 11px;
    color: #777
}

.settings-section input[type=text] {
    width: 100%;
    margin: 0 auto 10px;
    padding: 5px 10px;
    font-size: 14px;
    color: #555;
    line-height: 150%;
    border: 1px solid #aaa
}

.flash {
    background: #d95e40;
    color: #fff;
    float: left;
    display: block
}

span.subscription {
    text-align: center;
    border-color: #53b5e6;
    color: #53b5e6
}

span.subscription span {
    display: inline-block;
    width: 100%;
    line-height: 180%;
    font-size: 20px
}

@media only screen and (max-width:950px) {
    section {
        margin: 15px 0
    }

    section.story article {
        width: 100%;
        position: relative
    }

    section.story article .delete {
        display: none
    }

    section .story div {
        width: 90%;
        min-height: 50px;
        display: block;
        position: relative;
        margin: 20px auto;
        padding: 20px 5px
    }

    section .story div.nano {
        background-image: url(./assets/images/nano_logo.png);
        background-size: auto 30px;
        background-position: 20px;
        background-repeat: no-repeat
    }

    .article section, .article table, .blog section:not(.green), .blog table {
        width: 90%;
        margin: 0 5%
    }

    .handle {
        display: none
    }

    .piece .piece-content {
        padding: 10px
    }

    li.piece .features .delete {
        position: absolute;
        left: 15px;
        top: 5px
    }

    .toolbar .button {
        width: 100%
    }

    .editor.right .outline-button, .toolbar {
        margin: 10px 0 30px
    }

    ul.pieces {
        margin-top: 10px
    }

    .stats-block {
        line-height: 140%
    }

    #storyHeader .title {
        color: #555;
        font-family: Droid Serif, Georgia, Cambria, Times New Roman, Times, serif;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 120%;
        margin-bottom: 0
    }

    section.editor {
        padding: 15px
    }

    section.editor h1 {
        font-size: 32px;
        margin: 0 0 20px;
        width: 100%
    }

    #editor {
        line-height: 140%;
        font-size: 18px;
        min-height: 50vh
    }

    .editor.right {
        margin-top: 100px;
        text-align: center
    }

    .editor.right .outline-button {
        width: 100%
    }

    #next {
        padding-bottom: 50px
    }

    #next .body, #next .outline, #previous .body, #previous .outline {
        display: none
    }
}

@media only screen and (min-width:950px) {
    #storiesMenu {
        float: left;
        margin-left: 10px;
        position: relative;
        z-index: 800;
        padding-right: 20px
    }

    #storiesMenu ul {
        margin: 0;
        list-style-type: none
    }

    #storiesMenu li {
        line-height: 50px;
        cursor: pointer;
        background: #fff;
        font-size: 12px;
        font-family: Roboto slab, serif;
        padding: 0 10px
    }

    #storiesMenu li:hover {
        font-weight: 600
    }

    .wrapper {
        max-width: 840px
    }

    .wrapper, .wrapper-wide {
        width: 90%;
        padding: 0 30px;
        clear: both;
        margin: 0 auto
    }

    .wrapper-wide {
        max-width: 960px
    }

    #editor {
        font-size: 20px;
        line-height: 140%;
        min-height: 50vh
    }

    article.story {
        margin: 15px 15px 0 0
    }

    article.story:nth-child(3n + 3) {
        margin: 15px 0 0
    }

    div.toolbar {
        display: block;
        width: 100%;
        margin-bottom: 20px
    }

    .toolbar {
        text-align: center;
        margin-top: 100px
    }

    section .story div {
        width: 250px;
        min-height: 350px
    }

    section.story article {
        float: left;
        position: relative
    }

    section .story div {
        display: inline-block
    }

    div.full-page-form {
        text-align: center;
        margin: 0 auto;
        width: 50%
    }

    .half {
        width: 50%
    }

    .half-left {
        width: 50%;
        margin-right: 50%
    }

    .half-right {
        width: 50%;
        margin-left: 50%
    }

    .half-center {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%
    }

    .inline-half {
        width: 48%;
        margin-right: 2%;
        float: left
    }

    .stats-block {
        float: left;
        margin-right: 20px
    }

    blockquote, q {
        width: 130%;
        margin-left: -15%
    }

    img.screen {
        width: 200px;
        height: auto;
        display: inline-block;
        margin: 20px 10px
    }
}

.header-menu {
    position: relative;
    z-index: 900
}

.header-menu-content {
    z-index: 950
}

#logotype {
    height: 50px;
    width: 102px;
    background: url(./assets/images/blankpage-logo.png);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    vertical-align: middle
}

.menu-list {
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
    line-height: 100%
}

.menu-list-item {
    display: inline-block;
    height: 50px;
    position: relative;
    margin-left: 20px;
    vertical-align: top
}

.header-menu .menu-header-burger {
    padding: 10px;
    cursor: pointer
}

.menu-list-item .button {
    margin-top: 8px
}

.menu-text {
    font-family: Roboto, sans-serif;
    font-size: 13px;
    color: #555
}

.menu-svg {
    height: 25px;
    width: 25px;
    vertical-align: middle;
    fill: #333;
    cursor: pointer
}

.menu-svg-help {
    height: 21px;
    z-index: 500
}

.open-menu .menu-svg-help {
    z-index: 850
}

.vertical-center {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .9);
    height: 0;
    z-index: 100;
    opacity: 0;
    transition: opacity .3s ease
}

#main.open-menu, .menu-overlay {
    overflow: hidden
}

.open-menu .menu-overlay {
    z-index: 800;
    opacity: 1;
    bottom: 0;
    height: 100%
}

.menu-overlay ul {
    margin: 70px 0 0;
    list-style: none;
    text-align: right;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.menu-overlay .spacer {
    height: 20px
}

.menu-overlay a, .menu-overlay a:active {
    color: #eee;
    font-size: 22px;
    font-weight: 300;
    line-height: 150%;
    text-decoration: none;
    transition: all .25s ease;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0)
}

.menu-overlay a:hover {
    color: #fff;
    margin-right: 5px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .75)
}

.header-menu .menu-header-burger .menu-header-burger-patty {
    width: 24px;
    height: 3px;
    margin-bottom: 3px;
    background-color: #333;
    -webkit-transition: all .25s ease 0ms;
    -moz-transition: all .25s 0ms ease;
    transition: all .25s ease 0ms;
    border-radius: 3px;
    cursor: pointer
}

.open-menu .header-menu .menu-header-burger .patty-1 {
    -webkit-transform: rotate(45deg) translateX(4px) translateY(-4px);
    -moz-transform: rotate(45deg) translateX(4px) translateY(-4px);
    -ms-transform: rotate(45deg) translateX(4px) translateY(-4px);
    -o-transform: rotate(45deg) translateX(4px) translateY(-4px);
    transform: rotate(45deg) translateX(4px) translateY(-4px);
    width: 22px;
}

.open-menu .header-menu .menu-header-burger .patty-2 {
    opacity: 0;
}

.open-menu .header-menu .menu-header-burger .patty-3 {
    -webkit-transform: rotate(-45deg) translateX(5px) translateY(5px);
    -moz-transform: rotate(-45deg) translateX(5px) translateY(5px);
    -ms-transform: rotate(-45deg) translateX(5px) translateY(5px);
    -o-transform: rotate(-45deg) translateX(5px) translateY(5px);
    transform: rotate(-45deg) translateX(5px) translateY(5px);
    width: 22px;
}

.notification:before {
    content: "1";
    color: #fff;
    display: block;
    position: absolute;
    font-size: 11px;
    font-family: Roboto;
    height: 14px;
    width: 10px;
    padding: 0 2px;
    top: 8px;
    right: -8px;
    border-radius: 3px;
    z-index: 800;
    background: #eb6366
}

@media only screen and (max-width:800px) {
    #logotype {
        height: 50px;
        width: 22.5px;
        background: url(./assets/images/blankpage_logo.png);
        background-position: 0;
        background-repeat: no-repeat;
        background-size: auto 25px;
        float: left;
        vertical-align: middle
    }
}

form {
    width: 70%;
    margin: 30px auto
}

fieldset {
    border-bottom: 1px solid #aaa;
    padding: 0;
    margin-bottom: 15px
}

input[type=email], input[type=password], input[type=text], textarea {
    border: 1px solid #aaa;
    display: block;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    padding: 0 10px;
    margin-bottom: 15px;
    width: 100%
}

label {
    color: #333;
    display: block;
    font-size: 16px;
    margin-bottom: 5px
}

.form-meta {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 30px
}

.resetlink, .terms-link {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    padding-right: 20px;
    width: 100%
}

.settings-section form {
    width: 100%;
    margin: 0
}

.signup-prices {
    margin: 30px 0
}

.signup-prices ul {
    list-style: none;
    margin: 0 50px
}

.signup-prices .price {
    font-size: 16px;
    display: inline-block;
    margin-left: 10px;
    font-family: Roboto, sans-serif
}

.editor.right .saving-state {
    line-height: 32px;
    padding-right: 10px;
    font-size: 13px;
    font-family: Roboto;
    font-weight: 300;
    color: #555
}

.progress-card-container {
    display: none
}

.open .progress-card-container {
    background: rgba(0, 0, 0, .5);
    bottom: 0;
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 400
}

.progress-card-inner-container {
    background-image: linear-gradient(-180deg, #99db8f, #56b48d);
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .5);
    left: 50%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px
}

.progress-card-upper-container {
    color: #fff;
    border-radius: 10px 10px 0 0;
    width: 100%;
    text-align: center
}

.progress-card-under-container {
    background: #fff;
    border-radius: 0 0 10px 10px;
    width: 100%
}

.progress-card-upper-container .date {
    font-family: Roboto;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0;
    padding-top: 28px
}

.progress-card-upper-container .word-count {
    font-family: Roboto, sans-serif;
    font-weight: 100;
    font-size: 100px;
    letter-spacing: 0;
    padding: 20px
}

.progress-card-upper-container .streak, .progress-card-upper-container .streak-trigger {
    font-family: Roboto;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 120%;
    padding-bottom: 20px
}

.progress-card-upper-container .share svg {
    width: 25px;
    fill: #fff
}

.progress-card-under-container .progress-card-chart {
    background: #fff;
    border-radius: 0 0 10px 10px;
    margin-top: 70px;
    min-height: 30px;
    position: relative
}

.progress-card-under-container .progress-card-chart svg {
    margin-top: -60px
}

.progress-card-under-container .progress-card-chart.c3 line, .progress-card-under-container .progress-card-chart.c3 path {
    stroke: #fff
}

.progress-card-under-container .progress-card-chart .c3-area {
    opacity: 1 !important
}

.progress-card-inner-container .c3-xgrid-focus line {
    display: none
}

.progress-card-inner-container #tooltip {
    background: #222;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 300;
    height: 40px;
    padding: 5px;
    position: relative;
    text-align: center;
    width: 100px;
    z-index: 900
}

.progress-card-inner-container #tooltip .words {
    font-size: 14px;
    font-weight: 400
}

.progress-card-inner-container #tooltip .triangle {
    width: 0;
    height: 0;
    position: absolute;
    top: 40px;
    left: 45px;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #222 transparent transparent
}

.premium-plans ul {
    font-size: 0;
    margin: 0
}

.premium-plans ul li {
    list-style-type: none;
    display: block;
    margin: 0 auto;
    padding: 30px;
    width: 80%;
    background: #fff;
    color: #999;
    font-weight: 300;
    font-size: 16px;
    font-family: Roboto, sans-serif;
    text-align: center;
    box-sizing: border-box
}

.premium-plans ul li.special {
    background: #333;
    color: #fff;
    border-radius: 5px
}

.premium-plans .price {
    font-size: 60px;
    line-height: 140%
}

.premium-plans .intro, .premium-plans .period {
    font-size: 20px;
    line-height: 150%
}

.premium-plans .paddle_button {
    margin: 15px 0;
    width: 100%;
    font-size: 20px
}

@media only screen and (min-width:950px) {
    .premium-plans ul li {
        display: inline-block;
        width: 33%;
        margin: 0
    }
}

.section-green, .section-green h2, .section-green p {
    background: #56b48d;
    color: #fff
}

.section-white, .section-white h2, .section-white p {
    background: #fff;
    color: #222
}

.section-red, .section-red h2, .section-red p {
    background: #eb6366;
    color: #fff
}

.section-blue, .section-blue h2, .section-blue p {
    background: #569bb4;
    color: #fff
}

.section-gray, .section-gray h2, .section-gray p {
    background: #555;
    color: #fff
}

.landing ol, .landing p, .landing ul {
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 150%;
    font-weight: 300
}

.landing h1, .landing h2, .landing h3, .landing h4 {
    letter-spacing: -1px;
    font-weight: 700;
    font-family: Droid Serif, serif;
    line-height: 120%
}

.landing h1 {
    font-size: 48px;
    margin-bottom: 15px
}

.landing h2 {
    font-size: 38px;
    margin-bottom: 12px
}

.landing h3 {
    font-size: 28px;
    margin-bottom: 10px
}

.landing .text-center h2 {
    margin-bottom: 50px
}

section {
    margin: 60px 0;
    float: left;
    width: 100%
}

section.no-margin-section {
    padding: 70px 0 50px;
    margin: 0;
    position: relative;
    z-index: 1
}

section.section-hero {
    padding: 100px 0 60px;
    margin: 0;
    position: relative;
    z-index: 1
}

section.slope-left-after, section.slope-left-before, section.slope-right-after,
section.slope-right-before {
    padding-bottom: 20px;
    z-index: 2
}

.slope-right-after:after {
    bottom: 0;
    transform: skewY(-1.5deg);
    transform-origin: 100%
}

.slope-right-after:after, .slope-right-before:before {
    background: inherit;
    content: "";
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1
}

.slope-right-before:before {
    top: 0;
    transform: skewY(-1.5deg);
    transform-origin: 0
}

.slope-left-after:after {
    bottom: 0;
    transform: skewY(1.5deg);
    transform-origin: 0
}

.slope-left-after:after, .slope-left-before:before {
    background: inherit;
    content: "";
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1
}

.slope-left-before:before {
    top: 0;
    transform: skewY(1.5deg);
    transform-origin: 100%
}

.columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    line-height: 140%
}

.reference-card {
    padding: 10px 0;
    display: inline-block;
    line-height: 150%;
    font-size: 18px
}

.reference-card .body {
    display: block
}

.reference-card .body:before {
    content: "\201C";
    font-size: 25px;
    font-weight: 700;
    margin-right: 3px
}

.reference-card .body:after {
    content: "\201D";
    font-size: 25px;
    font-weight: 700;
    margin-left: 3px
}

.reference-card .name {
    font-size: 16px;
    font-family: Roboto;
    color: #555
}

.reference-card .name:before {
    content: "\2014";
    padding-right: 5px
}

.mfp-with-zoom.mfp-bg, .mfp-with-zoom .mfp-container {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: .8
}

.mfp-with-zoom.mfp-removing.mfp-bg, .mfp-with-zoom.mfp-removing .mfp-container {
    opacity: 0
}

.mfp-bg {
    z-index: 1042;
    overflow: hidden;
    background: #0b0b0b;
    opacity: .8;
    filter: alpha(opacity=80)
}

.mfp-bg, .mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed
}

.mfp-wrap {
    z-index: 1043;
    outline: none !important;
    -webkit-backface-visibility: hidden
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.mfp-container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045
}

.mfp-ajax-holder .mfp-content, .mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-arrow, .mfp-close, .mfp-counter, .mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none !important
}

.mfp-preloader {
    color: #ccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 1044
}

.mfp-preloader a {
    color: #ccc
}

.mfp-preloader a:hover {
    color: #fff
}

.mfp-s-error .mfp-content, .mfp-s-ready .mfp-preloader {
    display: none
}

button.mfp-arrow, button.mfp-close {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    padding: 0;
    z-index: 1046
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: .65;
    padding: 0 0 18px 10px;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace
}

.mfp-close:focus, .mfp-close:hover {
    opacity: 1
}

.mfp-close:active {
    top: 1px
}

.mfp-close-btn-in .mfp-close {
    color: #333
}

.mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    font-size: 12px;
    line-height: 18px
}

.mfp-arrow {
    position: absolute;
    opacity: .65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.mfp-arrow:active {
    margin-top: -54px
}

.mfp-arrow:focus, .mfp-arrow:hover {
    opacity: 1
}

.mfp-arrow .mfp-a, .mfp-arrow .mfp-b, .mfp-arrow:after, .mfp-arrow:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent
}

.mfp-arrow .mfp-a, .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px
}

.mfp-arrow .mfp-b, .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px
}

.mfp-arrow-left {
    left: 0
}

.mfp-arrow-left .mfp-a, .mfp-arrow-left:after {
    border-right: 17px solid #fff;
    margin-left: 31px
}

.mfp-arrow-left .mfp-b, .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f
}

.mfp-arrow-right {
    right: 0
}

.mfp-arrow-right .mfp-a, .mfp-arrow-right:after {
    border-left: 17px solid #fff;
    margin-left: 39px
}

.mfp-arrow-right .mfp-b, .mfp-arrow-right:before {
    border-left: 27px solid #3f3f3f
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mfp-iframe-holder .mfp-close {
    top: -40px
}

img.mfp-img {
    max-width: 100%;
    line-height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0;
    margin: 0 auto
}

.mfp-figure:after, img.mfp-img {
    width: auto;
    height: auto;
    display: block
}

.mfp-figure:after {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    right: 0;
    z-index: -1
}

.mfp-figure {
    line-height: 0
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

@media screen and (max-height:300px), screen and (max-width:800px) and (orientation:landscape) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, .6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        text-align: center;
        padding: 0
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }
}

@media (max-width:900px) {
    .mfp-arrow {
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px
    }
}

.mfp-ie7 .mfp-img {
    padding: 0
}

.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px
}

.mfp-ie7 .mfp-container {
    padding: 0
}

.mfp-ie7 .mfp-content {
    padding-top: 44px
}

.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0
}

.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8)
}

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    opacity: 0
}

.my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out
}

.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: .8
}

.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0
}

.my-mfp-slide-bottom .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    transform: translateY(-20px) perspective(600px) rotateX(10deg)
}

.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    -moz-transform: translateY(0) perspective(600px) rotateX(0);
    -ms-transform: translateY(0) perspective(600px) rotateX(0);
    -o-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0)
}

.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
    opacity: 0;
    -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    transform: translateY(-10px) perspective(600px) rotateX(10deg)
}

.my-mfp-slide-bottom.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out
}

.my-mfp-slide-bottom.mfp-ready.mfp-bg {
    opacity: .8
}

.my-mfp-slide-bottom.mfp-removing.mfp-bg {
    opacity: 0
}

.mfp-move-from-top {
    .mfp-content {
        vertical-align: top
    }

    .mfp-with-anim {
        transform: translateY(-100px)
    }

    &.mfp-bg, .mfp-with-anim {
        opacity: 0;
        transition: all .2s
    }

    &.mfp-ready {
        .mfp-with-anim {
            opacity: 1;
            transform: translateY(0)
        }

        &.mfp-bg {
            opacity: .8
        }
}

    &.mfp-removing {
        .mfp-with-anim {
            transform: translateY(-50px);
            opacity: 0
        }

        &.mfp-bg {
            opacity: 0
        }
}
}

.c3 svg {
    font: 10px sans-serif;
    -webkit-tap-highlight-color: transparent
}

.c3 line, .c3 path {
    fill: none;
    stroke: #000
}

.c3 text {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.c3-bars path, .c3-event-rect, .c3-legend-item-tile, .c3-xgrid-focus,
.c3-ygrid {
    shape-rendering: crispEdges
}

.c3-chart-arc path {
    stroke: #fff
}

.c3-chart-arc text {
    fill: #fff;
    font-size: 13px
}

.c3-grid line {
    stroke: #aaa
}

.c3-grid text {
    fill: #aaa
}

.c3-xgrid, .c3-ygrid {
    stroke-dasharray: 3 3
}

.c3-text.c3-empty {
    fill: gray;
    font-size: 2em
}

.c3-line {
    stroke-width: 1px
}

.c3-circle._expanded_ {
    stroke-width: 1px;
    stroke: #fff
}

.c3-selected-circle {
    fill: #fff;
    stroke-width: 2px
}

.c3-bar {
    stroke-width: 0
}

.c3-bar._expanded_ {
    fill-opacity: .75
}

.c3-target.c3-focused {
    opacity: 1
}

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
    stroke-width: 2px
}

.c3-target.c3-defocused {
    opacity: .3 !important
}

.c3-region {
    fill: #4682b4;
    fill-opacity: .1
}

.c3-brush .extent {
    fill-opacity: .1
}

.c3-legend-item {
    font-size: 12px
}

.c3-legend-item-hidden {
    opacity: .15
}

.c3-legend-background {
    opacity: .75;
    fill: #fff;
    stroke: #d3d3d3;
    stroke-width: 1
}

.c3-title {
    font: 14px sans-serif
}

.c3-tooltip-container {
    z-index: 10
}

.c3-tooltip {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    empty-cells: show;
    -webkit-box-shadow: 7px 7px 12px -9px #777;
    -moz-box-shadow: 7px 7px 12px -9px #777;
    box-shadow: 7px 7px 12px -9px #777;
    opacity: .9
}

.c3-tooltip tr {
    border: 1px solid #ccc
}

.c3-tooltip th {
    background-color: #aaa;
    font-size: 14px;
    padding: 2px 5px;
    text-align: left;
    color: #fff
}

.c3-tooltip td {
    font-size: 13px;
    padding: 3px 6px;
    background-color: #fff;
    border-left: 1px dotted #999
}

.c3-tooltip td > span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px
}

.c3-tooltip td.value {
    text-align: right
}

.c3-area {
    stroke-width: 0;
    opacity: .2
}

.c3-chart-arcs-title {
    dominant-baseline: middle;
    font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
    fill: #e0e0e0;
    stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
    fill: #000;
    font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max, .c3-chart-arcs .c3-chart-arcs-gauge-min {
    fill: #777
}

.c3-chart-arc .c3-gauge-value {
    fill: #000
}

/*# sourceMappingURL=main-59107d2fa5890437007c.css.map*/