/*font-family: 'Raleway', sans-serif;
font-family: 'Quicksand', sans-serif;*/
html,
body {
    height: 100%;
}
body {
    background:none;
    font-family: 'Lato', sans-serif;
    padding-top: 0px;
}
.ul-center{
    display:table; margin:0 auto;
}
.container {
    max-width:1200px
}

.shell { max-width: 1200px; padding: 0 15px; margin: auto; }
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding-bottom: 70px; color: #fff; text-align: center; transition: .3s; }
.header .shell {
    position: relative;
    padding-top: 20px;
}
.header .hello-bar {
    background-color: #da552f;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 30px;
}
.header .hello-bar a {
    text-decoration: none;
    background: black;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 20px;
}
.header .hello-bar a:hover {
    text-decoration: none;
}
.header .nav a:hover { border-color: #008BE7; color: #008BE7; }
.header .nav .btn:hover { background-color: #008BE7; color: #ffffff; }
.header-callout {
    float:left;
    color: #fff;
    font-size: 14px;
    line-height:21px;
    font-weight:100;
    text-transform: uppercase;
    padding: 10px 0px;
}
.header-callout a { text-decoration: none; text-transform: uppercase;color: #fff; }
.header-callout a img {margin-top:-3px; margin-right:7px; }
.top-nav { float:right; text-transform: uppercase; }
.top-nav ul { list-style: none outside none; }
.top-nav li {
    float: left;
    color: #fff;
    font-size: 14px;
    line-height:21px;
    font-weight:100;
    text-transform: uppercase;
    padding: 10px 10px;
}
.top-nav li a{
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 5px;
}
.top-nav li a:hover{
    color: #008BE7;
}
.top-nav li a.last{
    padding: 10px 15px;
    color: #008BE7;
    border: 1px solid #008BE7;
    border-radius: 2px;
    background: white;
    font-weight: 400;
}
.top-nav li a.last:hover{
    color: #fff;
    border: 1px solid #008BE7;
    background:#008BE7;
}
.page-is-scrolled .header { padding-bottom: 20px; background: #fff; color: #575757; box-shadow: 0 1px 5px rgba(0,0,0, .2); }
.page-is-scrolled .header-callout a{
    color: #575757;
}    
.page-is-scrolled .top-nav li a{
    /*color: #575757;*/
    color: #008BE7;
}
.page-is-scrolled .top-nav li a:hover{
    color: #008BE7;
}
.page-is-scrolled .top-nav li a.last{
    /*border: 1px solid #575757;*/
}
.page-is-scrolled .top-nav li a.last:hover{
    border: 1px solid #008BE7; color:#fff;
}
.top-banner {
    height: 100%;
    background: url('../img/header-bg.jpg') no-repeat center top;
    background-size: cover!important;
    padding: 80px 0px 40px;
    padding: 0px;
}

.top-banner .display-table {
    display: table;
    height: 100%;
    width: 100%;
}
.top-banner .display-table > .vertical-align {
    display: table-cell;
    height: 100%;
    width: 100%;
}
.top-banner .display-table > .vertical-align.bottom {
    vertical-align: bottom;
}
.top-banner .introduction{
    padding: 70px 0px 70px 0px;
    padding: 0px 0px 100px;
    width:100%; margin:0 auto;
    text-align:center;
}
.top-banner .introduction .heading {
    font-size: 30px;
    line-height:42px;
    color: #fff;
    margin: 85px 0px 0px;
    margin: 0px;
    letter-spacing:1.5px;
    font-family: 'Varela', sans-serif;
}
.top-banner .introduction .text {
    font-size: 19px;
    line-height:32px;
    color: #fff;
    margin: 25px 0px 20px 0px;
    letter-spacing:1px;
}
.top-banner .introduction .watch-video {
    text-align:center;
    margin: 60px 20px 23px 0;
    margin: 60px 20px 0px 0px;
    padding: 10px 0px;
}
.top-banner .introduction .watch-video a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    padding: 10px 25px 10px 65px;
    margin:40px 0 0 0px;
    border:1px solid #fff;
    border-radius:25px;
    background: url('../img/icons/arrow.png') no-repeat left 30px center;
}
.top-banner .introduction .watch-video a:hover {
    border: 1px solid #008BE7;
    background: #008BE7 url('../img/icons/arrow.png') no-repeat left 30px center;
}

.top-banner .introduction .watch-video a:hover {
    /*background-color: #0a65ae;*/
}

.how-it-works {
    padding: 140px 0px;font-family: 'Varela', sans-serif;color: #636466;
}

.how-it-works .heading {
    font-size: 30px;
    color:#26272d;
    line-height:30px;
    padding: 10px 20px 15px;
    text-align:center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.how-it-works .box {width:100%; padding:80px 0 0;}
.how-it-works .box1 {
    width:32%; float:left;
}
.how-it-works .box2 {
    width:30%; float:left;margin:0 3%;
}
.how-it-works .box3 {
    width:32%; float:left;
}
.how-it-works .title {
    font-size: 16px;
    line-height:30px;
    color: #26272d;
    padding: 40px 20px 15px;
    text-align:center;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.how-it-works .text {
    font-size: 15px;
    line-height:25px;
    padding: 15px 20px 10px;
    text-align:center;
    letter-spacing: .4px;
}

.watch-the-video {
    padding: 50px 0px;font-family: 'Varela', sans-serif;color: #1f4746;
}
.watch-the-video .heading {
    font-size: 30px;
    line-height:40px;
    color: #26272d;
    padding: 10px 20px 15px;
    text-align:center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.watch-the-video .title {
    font-size: 16px;
    line-height:30px;
    color: #1f4746;
    font-weight: 600;
    padding: 10px 20px 15px;
    text-align:center;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.watch-the-video .text {
    font-size: 15px;
    line-height:25px;
    color: #282828;
    padding: 15px 20px 10px;
    text-align:left;
    letter-spacing: .4px;
    font-weight:200;
}
.video-tab-content {
    position: relative;
    text-align: center;
}
.video-tab-content a.play-button {
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 80px;
    line-height: 100px;
    margin-top: -50px;
    z-index: 1;
}
.video-tab-content a.play-button:hover {
    color: #008BE7;
}

.testimonials {
    padding: 80px 0px;font-family: 'Varela', sans-serif;color: #636466; width:85%; margin:0 auto;
}
.testimonials .stars img{
    padding:5px; float:left;
}
.testimonials .text {
    font-size: 15px;
    line-height:22px;
    color: #282828;
    padding: 25px 10px 10px;
    text-align:justify;
    letter-spacing: .4px;
}
.testimonials .text img:nth-child(1){
    float:left; margin-top: -10px;
}
.testimonials .text img:nth-child(2){
    float:right; margin-top: -10px;
}
.testimonials .name {
    font-size: 18px;
    line-height:26px;
    color: #1087e7;
    padding: 25px 20px 10px;
    float: right;
    letter-spacing: .4px;
}
.footer {
    padding: 50px 0px 0;
    color:#888;
    text-align:left;
    font-size:13px;
    border-top:2px solid #e1e1e1;
}
.footer span{
    color:#404040;
}
.footer ul{
    margin-left:15px; padding-left:0;
}
.footer ul li{
    list-style-type:none;padding:0px 0 8px;
}
.footer ul li a{
    color:#888;
    font-weight:100;
    text-decoration:none;
}
.footer ul li:nth-child(3) a span{
    color:#fff;
    font-size:10px;
    text-decoration:none;
    background-color:#fda800;
    border-radius:4px;
    padding: 3px 6px;
}

.footer ul li a:hover{
    color:#404040;
    text-decoration:none;
}
.footer .logo{
    width:18%; float:left; margin-right:2%;
}
.footer .about{
    width:19%; float:left; margin-right:2%; margin-left:2%;
}
.footer .support{
    width:19%; float:left; margin-right:2%; margin-left:2%;
}
.footer .social{
    width:32%; float:left; margin-left:2%;
}
.footer .head {
    font-size:13px;
    color:#404040;
    padding-bottom:10px;
}
.footer  .head.available-head {
    font-size:13px;
    margin-top: 40px; 
}
.footer .social-links a+a {
    margin-left: 15px;
}
.footer  .interested{
    padding:40px 0 20px;
}
.footer .subscribe-body { position: relative; }
.footer .subscribe-field { width: 100%; height: 39px; padding: 0 40px 0 15px; border: 0; border-radius: 3px; background: #e6e6e6; }
.footer .subscribe-btn { position: absolute; top: 0; right: 0; height: 39px; width: 39px; border: 0; background: transparent; }

.footer #success{
    color:#888;
    text-align:left;
    padding:10px;
    margin:10px 0;
    font-size:12px;
}
.bottom-footer {
    border-top: #d8d8d8 1px solid;
    padding: 20px 0px; 
    color: #a29797;
    font-size:12px;
    text-align:center;
    line-height: 40px;
    font-style: italic;
}
.bottom-footer img{
    padding: 0px 10px; 
}
.logo1 { position: absolute; top: 0; left: 15px;  }
.logo1 i { transition: .3s opacity; }
.logo1 .show-if-scrolled { position: absolute; top: 0; left: 0; opacity: 0;  }
.logo-image-blue { background-image: url(../img/sprite.png); background-position: -139px 0; width: 143px; height: 45px;  vertical-align: middle; font-size: 0; }
.logo-image-dark { background-image: url(../img/sprite.png); background-position: -139px -36px; width: 143px; height: 45px;  vertical-align: middle; font-size: 0; }
.logo1 { background-image: url(../img/sprite.png); background-position: -139px -135px; width: 143px; height: 43px;  vertical-align: middle; font-size: 0; }
.page-is-scrolled .logo1 .show-if-scrolled { opacity: 1; }
.page-is-scrolled .logo1 .hide-if-scrolled { opacity: 0; }
/* Large desktop */
@media (min-width: 1200px) { 

}
@media (min-width: 1280px) { 

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-image-blue { background-image: url(../img/sprite@2x.png); background-position: -137px 0; background-size: 280px 124px; width: 143px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; }
    .logo-image-dark { background-image: url(../img/sprite@2x.png); background-position: -137px -34px; background-size: 280px 124px; width: 143px; height: 45px; display: inline-block; vertical-align: middle; font-size: 0; }
    .logo1 { background-image: url(../img/sprite@2x.png); background-position: -137px -81px; background-size: 280px 124px; width: 143px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    /*Home page */
    body{
        padding: 0px 0px 0px;
    }
    .header { padding-bottom: 10px; }
    .logo1 { float: left; position: relative; left: auto; }
    .header-callout { display: none; }
    .top-nav {
        padding: 20px 0px 0;
    }
    .top-nav li {
        float: left;
        font-size: 13px;
        padding: 10px 5px;
    }
    .top-nav li a{
        font-size: 13px;
        padding: 10px 5px;
    }
    .top-nav li a.last{
        padding: 10px 10px;
    }
    .top-banner {
        background: url('../img/header-bg-mob.jpg') no-repeat center top;
        background-size: cover!important;
        padding: 30px 0px;
    }

    .top-banner .introduction{
        padding: 80px 0px 20px 0px;
        margin-top:20px;
    }
    .top-banner .introduction .heading {
        font-size: 24px; line-height:32px; margin: 35px 0px 10px 0px;
    }
    .top-banner .introduction .text {
        font-size: 16px; line-height:23px; margin: 10px 0px 20px 0px;
    }
    .top-banner .introduction .get-started {
        margin: 20px 0;padding: 10px 0px;
    }
    .top-banner .introduction img {
        padding-top: 15px; float:none;
    }
    .top-banner .introduction .watch-video {
        margin: 30px 20px 20px 0;padding: 10px 0px;text-align:center;
    }
    .top-banner .introduction .watch-video a {
        font-size: 15px;
        padding: 10px 15px 10px 45px;
        margin:20px 0 0 0px;
        border-radius:20px;
        background: url('../img/icons/arrow.png') no-repeat left 20px center;
    }
    .how-it-works {
        padding: 30px 0px;
    }

    .how-it-works .heading {
        font-size: 20px;
        padding: 10px 20px 15px;
    }
    .how-it-works .box {width:100%; padding:20px 0 0;}
    .how-it-works .box1 {
        width:100%; float:none;
    }
    .how-it-works .box2 {
        width:100%; float:none;margin:0 0%;
    }
    .how-it-works .box3 {
        width:100%; float:none;
    }
    .how-it-works .title {
        font-size: 14px;
        line-height:25px;
        padding: 10px 20px 5px;
    }
    .how-it-works .text {
        font-size: 13px;
        line-height:22px;
        padding:0 10px 30px;
    }
    .watch-the-video {
        padding: 20px 0px;
    }
    .watch-the-video .heading {
        font-size: 20px;
        padding: 10px 20px 15px;
    }
    .watch-the-video .title {
        font-size: 14px;
        line-height:25px;
        padding: 10px 20px 5px;
    }
    .watch-the-video .text {
        font-size: 13px;
        line-height:22px;
        padding:0 10px 30px;
    }
    .testimonials {
        padding: 30px 0px;width:90%; margin:0 auto;
    }
    .testimonials .stars img{
        padding:5px; float:left; width:30px;
    }
    .testimonials .text {
        font-size: 13px;
        padding: 25px 10px 10px;
    }
    .testimonials .name {
        font-size: 15px;
        line-height:21px;
        padding: 15px 10px 10px;
    }
    .footer {
        padding: 30px 0px 0;
    }
    .footer .logo{
        width:100%; float:none; margin-right:0%; text-align:center; margin-bottom:20px; display:inline-block;
    }
    .footer .logo img{
        float:left;
    }
    .footer .about{
        width:100%; float:none; margin-right:0%; margin-left:0%;
    }
    .footer .support{
        width:100%; float:none; margin-right:0%; margin-left:0%;
    }
    .footer .social{
        width:100%; float:none; margin-right:0%; margin-left:0%;
    }
    .footer .head {
        color:#4b4b4b; padding-bottom:10px; padding-top:15px
    }
    .footer ul{
        padding-top:15px
    }
    .footer ul li{
        list-style-type:none;
    }
    .footer  .head.available-head {
        margin-top: 20px; 
    }
    .footer .social-links a {
        margin: 0px 25px 0px 0px;
    }
    .footer .social-links  {
        margin: 10px 0;
    }
    .footer  .interested{
        padding:10px 0 10px;
    }
    .footer  .interested input[type="text"] {
        color: #909090;
        height: 35px;
        padding: 8px;
        background:#e6e6e6 url('../img/icons/arrow-right.png') no-repeat right 6px center;
        border-right: 10px solid transparent;
        border:0; width:100%;
        margin-bottom: 30px;
    }

    .bottom-footer {
        border-top: #dfdfdf 1px solid;
        padding: 20px 0px; 
        color: #b9b9b9;
        text-align:center;
    }


}


/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */

/* Portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 2) {
    .top-banner {
        padding: 30px 0px;
    }
    .top-banner .introduction {
        padding: 50px 0px 50px 0px;
    }
    .top-banner .introduction .try-now {
        text-align:center!important;
    }
    .top-banner .introduction .try-now a {
        text-align:center;
    }
    .top-banner .introduction .heading {
        margin: 0px 0px 10px 0px;
    }
}
/* Landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2) {
    .top-banner {
        padding: 30px 0px;
    }
    .top-banner .introduction {
        padding: 50px 0px 0px 0px;
    }
    .top-banner .introduction .try-now {
        text-align:center!important;
    }
    .top-banner .introduction .try-now a {
        text-align:center;
    }
    .top-banner .introduction .heading {
        margin: 20px 0px 10px 0px;
    }
}

.credits { padding: 20px 0; border-top: 1px solid #d8d8d8; font-size: 12px; color: #b9b9b9; text-align: center; }