html,body{
    color: #506370;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
}

body,button,input,select,textarea {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto","Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6{
    color: #173950;
    font-weight: 700;
}

h2{
    font-size:1.7rem;
}


.navbar{
    padding-top:15px;
    padding-bottom:10px;
    background: #237FFE;
}
.navbar-item img {
    max-height: 35px;
}

a.navbar-item {
    color: white;
    font-weight:600;
    letter-spacing: .5px;
    position: relative;
    background: transparent !important;
}
a.navbar-item-underlined span{
    border-bottom:2px solid white;
}
a.navbar-item span:first-child{
    opacity: .7;
}
a.navbar-item .nav__note{
    position:absolute;
    background: #1ade28;
    color:white;
    padding:1px 9px;
    font-weight: normal;
    font-size: 12px;
    opacity:1 !important;
    top:-4px;
    right:-9px;
    border-radius: 25px;
}

a.navbar-item:hover span:first-child{
    color:white;
     opacity:1;
}
.navbar-brand a.navbar-item{
    opacity:1;
}

.navbar-burger.burger {
    background: transparent;
    color:white;
}
#nav-menu{
    box-shadow: none;
    background:#237FFE;
}
.section{
    padding: 3rem 0;
}
.section.is-hero{
    color:white;
    background:#237FFE;
    -webkit-mask: url(img/hero-mask.png) top left round;
    mask: url(img/hero-mask.png) top left round;
    padding: 25px;
    padding-bottom: 0;
}
.section.page-hero{
    background:#237FFE;
    color:white;
}
.is-hero h1,.page-hero h1{
    color:white;
    font-weight: 700;
    font-size:2rem;
}
.is-hero p, .page-hero p{
    color:white;
    font-size:20px;
    line-height: 31px;
    opacity:.77;
}
.screenshot-wrapper{
    position: relative;
    width:95%;
    max-width: 650px;
    margin:0 auto;
    margin-top:30px;
}
.screenshot-wrapper img{
    vertical-align: bottom;
    box-shadow:0 0 45px rgba(0,0,0,.38);
    width:100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.interactive__button {
    color:#506370;
    border:none;
    cursor: pointer;
    font-size: 1rem;
    position:absolute;
    top:70px;
    left:-65px;
    padding:15px 25px;
    border-radius: 6px;
    background: white;
    box-shadow: 0 0 23px rgba(0,0,0,.125);
    outline:0;
    transition: all .15s ease-in-out;
}
.interactive__button:hover{
    transform: translateY(-3px);
}

.feature__section img{
    max-width: 475px;
    width:100%;
}

.feature__subtitle{
    text-transform: uppercase;
    letter-spacing: 2.4px;
    padding-bottom: 10px;
    font-size:14px;
    font-weight: normal;
    color:#237FFE;
}

.feature__title{
    padding-bottom: 50px;
}

.feature__section .columns{
    padding-top:15px;
}

.feature__section .container,.example__section .container,.pricing__section .container,footer .container,.faq__section .container{
    width:93%;
    max-width:1000px;
}

.feature__section .column:last-child{
    padding-left:2.3rem;
}
@media all and (max-width: 768px){
    .feature__section .column:last-child{
        padding-left:.75rem;
    }
}

.feature__section p{
    padding:15px 0;
    line-height:32px;
    font-size:16px;
}
.feature__section a{
    font-weight: 600;
    transition: all .12s ease-in-out;
}
.feature__section a i{
    transition: all .12s ease-in-out;
    display: inline-block;
}
.feature__section a:hover i {
    transform: translateX(4px);
}
.feature__section a.link__reverse:hover i{
    transform: translateX(-4px);
}

.feature__section ul {
    padding-bottom: 15px;
}

.feature__section ul li{
    font-size:16px;
    padding:9px;
    padding-left:20px;
    border-radius:4px;
    cursor: pointer;
}

.feature__section ul li:hover{
    box-shadow:0 0 20px rgba(35, 127, 254,.125);
}


.feature__section ul span{
    font-weight: 600;
    color:#173950;
    width:90px;
    display: inline-block;
}
.feature__section ul span i{
    color:#1ade28;
}

.section__divider{
    margin-top:0px;
}

.example__section h2,.pricing__section h2,.faq__section h2{
    margin-bottom: 3rem;
}

.example__card__wrapper{
    display: flex;
    justify-content: space-between;
}

.example__card {
    max-width:310px;
    width:100%;
    border-radius: 6px;
    border:2px solid #DEEAF1;
    transition: all .2s ease-in-out;
    cursor: pointer;
    padding:35px;
}

.example__card:hover{
    border-color: #237FFE;
}

.example__card__image{
    margin-top:30px;
}

.example__card__content p{
    padding:20px 0;
}

.example__card h5{
    color:#237FFE;
    font-size:13px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: .5px;
}

.example__card svg{
    max-width:100%;
    max-height:140px;
}

@media all and (max-width: 900px){
    .example__card__wrapper{
        flex-flow: column;
    }
    .example__card{
        max-width: 100%;
        margin-bottom: 20px;
        padding:20px;
    }
}

.pricing__card__wrapper{
    text-align: center;
}

.pricing__card{
    padding: 1.3rem 2rem;
    border: 1px solid #DEEAF1;
    border-radius: 6px;
    box-shadow:0 0 20px rgba(35, 127, 254,.125);
    text-align: center;
    display: inline-block;
    margin: 17px;
    box-sizing: border-box;
    width:96%;
    max-width: 275px;
    position:relative;
}
.pricing__card--plain{
    border:none;
    box-shadow: none;
}

.pricing__card.off:before{
    content:'Save $41';
    position:absolute;
    top:-15px;
    padding:5px 12px;
    left:50%;
    margin-left:-50px;
    color:white;
    background: #1ade28;
    border-radius: 4px;
}


.pricing__paid{
    background: #237FFE;
    color:white;
}
.pricing__paid h2,.pricing__paid h5{
    color:white !important;
}

.pricing__card h5{
    font-weight: normal;
    font-size:14px;
    text-transform: uppercase;
}

.pricing__card h2{
    font-size:4rem;
    margin: 25px 0;
    color:#237FFE;
    line-height: .95;
}
.pricing__currency,.pricing__frequency{
    font-weight: normal;
    font-size:18px;
    vertical-align: middle;
    display: inline-block;
    padding-right:3px;
}
.pricing__frequency{
    padding-left:5px;
    vertical-align: baseline;
}
.pricing__card a.btn {
    margin-top:25px;
    padding:8px 16px;
    background:#237FFE;
    border-radius: 3px;
    color:white;
    transition: all .2s ease-in-out;
    border:1px solid transparent;
    display:block;
}

.pricing__paid a.btn{
    background:white;
    color:#237FFE;
}

.pricing__card a.btn:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(35, 127, 254,.2);
}

.pricing__paid a.btn:hover{
    box-shadow: 0 4px 8px rgba(255, 255,255,.2);
}

.pricing__card ul li{
    margin:0;
    line-height:32px;
}

.pricing__moneyback{
    font-size:18px;
    margin-top:40px;
    text-align: center;
}

.pricing__moneyback span{
    border-bottom:2px solid #506370;
}

.features__wrapper{
    display: flex;
    flex-flow:wrap;
}

.icon_box{
    width:33.333%;
    padding:15px;
    box-sizing: border-box;
    display: flex;
    margin:0 auto;
}
.icon_box__icon{
    font-size:1.3rem;
    padding-right: 20px;
    line-height: 1;
    color:#237ffe;
}
.icon_box__content .icon_box__title {
    margin:0;
    font-weight: bold;
}
.icon_box__content .icon_box__text {
    margin:0;
}
.icon_box.style--icon_bottom {
    flex-flow:column-reverse;
    text-align: center;
}
.icon_box.style--icon_top {
    flex-flow:column;
    text-align: center;
}
.icon_box.style--icon_top .icon_box__icon{
    padding-right: 0;
    padding-top: 0;
    padding-bottom:10px;
}
.icon_box.style--icon_bottom .icon_box__icon{
    padding-right: 0;
    padding-top:10px;
}

@media all and (max-width:900px) {
    .features__wrapper .icon_box{
        width:50%;
    }
}

@media all and (max-width:768px) {
    .features__wrapper .icon_box{
        width:100%;
    }
}

.faq__section{
    background: #F6F9FD;
}

/* Accordion */

.accordion {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(35, 127, 254,.125);
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    transition: 0.2s;
    font-weight: bold;
    max-width: 750px;
    display: block;
    margin: 0 auto;
}
.accordion.active{
    box-shadow: 0 1px 4px rgba(35, 127, 254,.125);
}
.accordion.active ~ .panel{
    box-shadow: 0 1px 4px rgba(35, 127, 254,.125);
}
.active, .accordion:hover {
    color: #237FFE;
}

.accordion:after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f107';
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\f106";
}

.panel {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position:relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
    margin-top:-2px;
}
.panel__content{
    padding:30px;
}


footer{
    border-top:1px solid #DEEAF1;
    background:#F6F9FC;
    padding-top:5rem;
    padding-bottom:3rem;
}
footer h4{
    margin-bottom:20px;
    color:#506370;
    font-weight: 600;
}

footer ul li{
    margin:0;
    font-size:15px;
    line-height:32px;
}
footer ul li a{
    color:#506370;
}

@media all and (max-width:768px){
    .feature__section div.column{
        text-align: center !important;
    }
    footer .column{
        text-align: center;
    }
}

/* Documentation */

.doc__item{
    display: block;
    padding:20px;
    background: #F6F9FC;
    border-radius: 4px;
    border:1px solid #DEEAF1;
    box-shadow: 0 1px 6px rgba(35, 127, 254,.125);
    margin: 0 auto;
    max-width: 750px;
    margin-top: 30px;
}
.doc__item h2,.doc__item h2 span{
    font-size:1rem;
    transition: all .2s ease-in-out;
}
.doc__item:hover h2{
    color:#237FFE;
}
.doc__item:hover h2 span{
    padding-left: 7px;
}

.page {
    background: #F6F9FC;
    border-radius: 4px;
    border:1px solid #DEEAF1;
    box-shadow: 0 1px 6px rgba(35, 127, 254,.125);
    padding:50px;
    max-width: 1000px;
    margin: 0 auto;
}
.page a{
    transition: all .2s ease-in-out;
    color:#237ffe;
    border-bottom: 2px solid transparent;
}
.page a:hover{
    color:#506370;
}
.page table{
    margin: 20px 0;
}
.page ul,.page ol{
    margin: 20px 0;
    margin-left:30px;
}
.page ol li{
    margin-bottom: 20px;
}
.page ul ul, .page ol ol{
    margin-top:10px;
}
.page ul li,.page ol li img{
    margin: 0;
}
.page ul ul li, .page ol ol li{
    list-style-type: circle;
}
.page figure{
    display: block;
    text-align: center;
    margin:30px 0;
}
.page img{
    border-radius: 6px;
    box-shadow: 0 0 35px rgba(35, 127, 254,.11);
    display: block;
    margin: 0 auto;
    max-width: 700px;
    border:2px solid;
}
.page img.img-medium{
    max-width: 500px;
}
.page h3{
    margin-top:30px;
}
figcaption{
    font-size: 14px;
    padding-top:13px;
    text-align: center;
}
.page p{
    padding:1rem 0;
}
.page .accordion, .page .panel{
    max-width:100%;
}
.page .panel table{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
}

table {
    width:100%;
}

table td,table th {
    padding:10px;
}

table thead th {
    border-bottom: 1px solid #237ffe;
}
table tbody td{
    border-bottom: 1px dotted #DEEAF1;
}
table tbody tr:first-child td{
    padding-top:25px;
}
table tbody tr:last-child td{
    border-bottom: none;
}

code,pre{
    color:#506370;
    background:white;
    border-radius: 4px;
}
.panel code{
    background:#F6F9FC;
}
pre{
    margin:15px 0;
}

a.info_bubble {
    margin-top: 30px;
    display: block;
    background: #092750;
    padding: 40px 15px;
    text-align: center;
    border-radius: 4px;
    color: white;
    font-size: 20px;
}

a.info_bubble i{
    color: #237ffe;
}

a.info_bubble span{
    color: #f6f9fc;
}

/*TIMELINE*/

.timeline {
    border-left: 4px solid rgba(23, 57, 99, 0.35);
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    margin: 50px auto;
    letter-spacing: 0.5px;
    position: relative;
    font-size: 1.03em;
    padding: 50px;
    list-style: none;
    text-align: left;
    font-weight: 100;
    max-width: 700px;
}

.timeline .event {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: 25px;
    margin-bottom: 50px;
    position: relative;
}
.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}
.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}
.timeline .event:before {
    left: -217.5px;
    content: attr(data-date);
    text-align: right;
    font-size: 0.9em;
    min-width: 120px;
}
.timeline .event:after {
    box-shadow: 0 0 0 4px #fea823;
    left: -57.85px;
    background: white;
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
    top: 5px;
}
.timeline .event.released:after{
    box-shadow: 0 0 0 4px #6cde33;
}
.timeline .released ul li,.timeline .upcoming ul li{
    position: relative;
    padding-left:10px;
}
.timeline .released ul li:before,.timeline .upcoming ul li:before{
    content:'\f35a';
    position:absolute;
    top:1px;
    font-family:'Font Awesome\ 5 Free';
    left:-10px;
    color:#6cde33;
}
.timeline .upcoming ul li:before{
    color:#fea823;
}
.timeline p,.timeline ul{
    padding-top:20px;
}
.timeline ul li{
    padding:0;
    margin:16px 0;
}

.timeline ul li span{
    position:relative;
    display: block;
    padding-left:10px;
    padding-right:30px;
}
.timeline ul li span span{
    position: absolute;
    top: -10px;
    right: -27px;
    font-size: 9px;
    padding: 3px 7px;
    background: #eee;
    margin-top: 12px;
    border-radius: 50px;
}

.stats__wrapper{
    display:flex;
    justify-content: space-between;
    width:90%;
    max-width:800px;
    margin: 0 auto;
}

.stats__wrapper .stat{
    padding:25px;
    text-align: center;
    border-radius: 6px;
}
.stat > div:first-child{
    color:#237ffe;
    font-size:36px;
    font-weight: bold;
}

a figure img{
    border-color:#506370 !important;
}
a figure figcaption{
    color: #506370;
}