@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700");
.red{
    color:#DE5842
}
.green{
    color:#007bff
}
.yellow{
    color:#FCD059
}
.orange{
    color:#F5A623
}
.action-color{
    color:#56AEF1
}
.red{
    color:#DE5842
}
.green{
    color:#007bff
}
.yellow{
    color:#FCD059
}
.orange{
    color:#F5A623
}
.action-color{
    color:#56AEF1
}
.noselect{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.sr-only{
    position:absolute !important;
    clip:rect(1px 1px 1px 1px);
    clip:rect(1px, 1px, 1px, 1px)
}
body.pages .hero{
    width:100%
}
body.pages .hero .container.hero__content{
    text-align:center;
    padding-top:3rem;
    padding-bottom:3rem;
    margin-bottom:3rem
}
body.pages .hero .container.hero__content h1{
    line-height:5rem;
    font-size:2.3076923077rem;
    margin-bottom:-0.7384715385rem;
    padding-top:1.7384715385rem;
    font-size:2.3076923077rem;
    font-weight:700;
    color:#2f363d
}
@media screen and (min-width: 35.5em){
    body.pages .hero .container.hero__content h1{
        font-size:2.8571428571rem;
        margin-bottom:-0.5571528571rem;
        padding-top:1.5571528571rem
    }
}
@media screen and (min-width: 48em){
    body.pages .hero .container.hero__content h1{
        font-size:4rem;
        margin-bottom:-0.18001rem;
        padding-top:1.18001rem
    }
}
@media screen and (min-width: 64em){
    body.pages .hero .container.hero__content h1{
        font-size:4rem;
        margin-bottom:-0.18001rem;
        padding-top:1.18001rem
    }
}
@media screen and (min-width: 90em){
    body.pages .hero .container.hero__content h1{
        font-size:4rem;
        margin-bottom:-0.18001rem;
        padding-top:1.18001rem
    }
}
@media screen and (min-width: 35.5em){
    body.pages .hero .container.hero__content h1{
        font-size:2.8571428571rem
    }
}
@media screen and (min-width: 48em){
    body.pages .hero .container.hero__content h1{
        font-size:4rem
    }
}
@media screen and (min-width: 64em){
    body.pages .hero .container.hero__content h1{
        font-size:4rem
    }
}
@media screen and (min-width: 90em){
    body.pages .hero .container.hero__content h1{
        font-size:4rem
    }
}
body.pages .hero .container.hero__content p{
    line-height:2rem;
    font-size:1.2307692308rem;
    margin-bottom:1.4061438462rem;
    padding-top:0.5938561538rem;
    font-family:"Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-weight:300;
    white-space:pre-line
}
@media screen and (min-width: 35.5em){
    body.pages .hero .container.hero__content p{
        font-size:1.2857142857rem;
        margin-bottom:1.4242757143rem;
        padding-top:0.5757242857rem
    }
}
@media screen and (min-width: 48em){
    body.pages .hero .container.hero__content p{
        font-size:1.4285714286rem;
        margin-bottom:1.4714185714rem;
        padding-top:0.5285814286rem
    }
}
@media screen and (min-width: 64em){
    body.pages .hero .container.hero__content p{
        font-size:1.5714285714rem;
        margin-bottom:1.5185614286rem;
        padding-top:0.4814385714rem
    }
}
@media screen and (min-width: 90em){
    body.pages .hero .container.hero__content p{
        font-size:1.5714285714rem;
        margin-bottom:1.5185614286rem;
        padding-top:0.4814385714rem
    }
}
body.pages .hero .container.hero__content p span.nowrap{
    display:block
}
@media screen and (min-width: 35.5em){
    body.pages .hero .container.hero__content p span.nowrap{
        display:inline
    }
}
body.pages .hero .container.hero__content .cta .cta__demo{
    color:#2f363d
}
body.pages .hero .container.hero__content .cta .button{
    font-weight:400;
    padding:1rem 2rem
}
body.pages .hero.hero--small .container.hero__content{
    padding-top:0;
    padding-bottom:0
}
body.pages .hero.hero--small .container.hero__content h1{
    line-height:3rem;
    font-size:1.8461538462rem;
    margin-bottom:-0.8907792308rem;
    padding-top:0.8907792308rem;
    font-size:1.8461538462rem;
    padding:0 0 1rem;
    margin:0
}
@media screen and (min-width: 35.5em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2rem;
        margin-bottom:-0.84001rem;
        padding-top:0.84001rem
    }
}
@media screen and (min-width: 48em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2.1428571429rem;
        margin-bottom:-0.7928671429rem;
        padding-top:0.7928671429rem
    }
}
@media screen and (min-width: 64em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2.2857142857rem;
        margin-bottom:-0.7457242857rem;
        padding-top:0.7457242857rem
    }
}
@media screen and (min-width: 90em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2.2857142857rem;
        margin-bottom:-0.7457242857rem;
        padding-top:0.7457242857rem
    }
}
@media screen and (min-width: 35.5em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2rem
    }
}
@media screen and (min-width: 48em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2.1428571429rem
    }
}
@media screen and (min-width: 64em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2.2857142857rem
    }
}
@media screen and (min-width: 90em){
    body.pages .hero.hero--small .container.hero__content h1{
        font-size:2.2857142857rem
    }
}
body.pages .hero.hero--small .container.hero__content p{
    font-size:1.0769230769rem;
    padding:0;
    margin:0;
    line-height:2rem
}
@media screen and (min-width: 35.5em){
    body.pages .hero.hero--small .container.hero__content p{
        font-size:1rem
    }
}
@media screen and (min-width: 48em){
    body.pages .hero.hero--small .container.hero__content p{
        font-size:1.0714285714rem
    }
}
@media screen and (min-width: 64em){
    body.pages .hero.hero--small .container.hero__content p{
        font-size:1.1428571429rem
    }
}
@media screen and (min-width: 90em){
    body.pages .hero.hero--small .container.hero__content p{
        font-size:1.1428571429rem
    }
}
body.pages#home .demo,body.pages#home .advantages,body.pages#home .pricing,body.pages#home .features{
    margin-bottom:3rem
}
@media screen and (min-width: 48em){
    body.pages#home .demo,body.pages#home .advantages,body.pages#home .pricing,body.pages#home .features{
        margin-bottom:8rem
    }
}
body.pages#home .demo{
    text-align:center
}
body.pages#home .demo img#demo{
    /* -webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,0.43); */
    /* box-shadow:0 1px 3px 0 rgba(0,0,0,0.43); */
    box-shadow: 0px 0px 60px #a8d2ff;
    border-radius:8px
}
body.pages#home .features .feature{
    margin-bottom:4rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
body.pages#home .features .feature p{
    line-height:2rem;
    font-size:1.3846153846rem;
    margin-bottom:1.2069130769rem;
    padding-top:0.5430869231rem;
    font-size:1.3846153846rem;
    margin-top:0
}
body.pages#home .features .feature img,body.pages#home .features .feature .feature__text{
    -webkit-box-flex:0;
    -ms-flex:0 auto;
    flex:0 auto
}
body.pages#home .features .feature img{
    margin-right:2rem
}
body.pages#home .features .feature:nth-child(2n){
    text-align:right
}
body.pages#home .features .feature:nth-child(2n) img{
    -webkit-box-ordinal-group:3;
    -ms-flex-order:2;
    order:2;
    margin-left:2rem;
    margin-right:0
}
body.pages#home .advantages,body.pages#home .tech-stacks{
    text-align:center
}
body.pages#home .advantages p,body.pages#home .tech-stacks p{
    line-height:2rem;
    font-size:1.3846153846rem;
    margin-bottom:1.2069130769rem;
    padding-top:0.5430869231rem;
    font-size:1.3846153846rem;
    margin-top:0
}
body.pages#home .advantages li,body.pages#home .tech-stacks li{
    line-height:2rem;
    font-size:1.3846153846rem;
    margin-bottom:-0.0430869231rem;
    padding-top:0.5430869231rem;
    font-size:1.3846153846rem
}
body.pages#home .advantages h3,body.pages#home .tech-stacks h3{
    margin-bottom:0;
    padding-bottom:0
}
body.pages#home .advantages ul,body.pages#home .tech-stacks ul{
    list-style:none;
    margin-top:0;
    margin-left:0;
    padding-left:0
}
body.pages#home .advantages ul li,body.pages#home .tech-stacks ul li{
    margin-left:0
}
@media screen and (min-width: 48em){
    body.pages#home .advantages,body.pages#home .tech-stacks{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex
    }
    body.pages#home .advantages>*,body.pages#home .tech-stacks>*{
        -webkit-box-flex:1;
        -ms-flex:1 33%;
        flex:1 33%;
        margin-right:1rem
    }
    body.pages#home .advantages>*:last-child,body.pages#home .tech-stacks>*:last-child{
        margin-right:0
    }
}
body.pages.pages{
    margin-top:6rem
}
body.pages .container{
    margin-left:auto;
    margin-right:auto;
    position:relative;
    padding-left:1rem;
    padding-right:1rem
}
@media screen and (min-width: 64em){
    body.pages .container{
        max-width:78.5714285714rem
    }
}
@media screen and (min-width: 90em){
    body.pages .container{
        max-width:92.8571428571rem
    }
}
body.pages .container--small{
    max-width:38.4615384615rem;
    margin-left:auto;
    margin-right:auto
}
body.pages .container--medium{
    margin-left:auto;
    margin-right:auto;
    max-width:50rem
}
@media screen and (min-width: 64em){
    body.pages .container--medium{
        max-width:57.1428571429rem
    }
}
@media screen and (min-width: 90em){
    body.pages .container--medium{
        max-width:78.5714285714rem
    }
}
body.pages main .container article header{
    border-bottom:1px dotted #ddd
}
body.pages.help{
    background-color:white
}
body.pages .embed-container{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    max-width:100%
}
body.pages .embed-container iframe,body.pages .embed-container object,body.pages .embed-container embed{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
@media screen and (min-width: 48em){
    body.pages .row{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex
    }
    body.pages .row .col{
        -webkit-box-flex:1;
        -ms-flex:1 auto;
        flex:1 auto;
        margin-right:2rem
    }
    body.pages .row .col:last-child{
        margin-right:0
    }
    body.pages .row .col--one-third{
        -webkit-box-flex:0;
        -ms-flex:0 0 30%;
        flex:0 0 30%;
        max-width:320px
    }
}
body.pages header#metabar{
    background:white
}
body.pages header#metabar.metabar--fixed{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1
}
body.pages header#metabar.metabar--shadow{
    background:white;
    -webkit-transition:all 150ms ease;
    transition:all 150ms ease;
    -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.1);
    box-shadow:0 1px 5px rgba(0,0,0,0.1)
}
@media screen and (min-width: 48em){
    body.pages header#metabar .container .brand{
        -webkit-box-flex:0;
        -ms-flex:0 0 360px;
        flex:0 0 360px
    }
    body.pages header#metabar .container .brand img{
        float:left
    }
    body.pages header#metabar .container nav ul{
        padding-left:0
    }
    body.pages header#metabar .container nav ul li:first-child a{
        padding-left:0
    }
}
body.pages nav#sidenav h4{
    font-weight:300
}
body.pages nav#sidenav ul{
    list-style:none;
    margin-top:0;
    margin-left:0;
    padding-left:0
}
body.pages nav#sidenav ul li{
    margin-left:0;
    padding-left:0
}
body.pages nav#sidenav ul li.current{
    font-weight:bold
}
@media screen and (min-width: 48em){
    body.pages nav#sidenav{
        min-width:220px;
        max-width:360px
    }
}
body.pages .typed-cursor{
    opacity:1;
    -webkit-animation:blink 0.7s infinite;
    animation:blink 0.7s infinite
}
@keyframes blink{
    0%{
        opacity:1
    }
    50%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@-webkit-keyframes blink{
    0%{
        opacity:1
    }
    50%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

.serif {
    font-family:"Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.fs2 {
    font-size: 1.2em;
}