/*--------------------------------------------------------------------------------------
Theme Name: MASSIVE
Theme URI: http://quomodosoft.com
Author URI: http://quomodosoft.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Apps Landing HTML5 template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: OCREATES
Version: 1.0
----------------------------------------------------------------------------------------
    1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
    3. WELCOME TEXT AREA
    3. ABOUT AREA
    4. SERVICE TOP AREA
    5. APP AREA
    6. VIDEO AREA
    7. WORK AREA
    8. SCREENSHOT AREA
    9. DOWNLOAD AREA
    10. TEAM AREA
    11. INFO AREA
    12. TESTMONIAL AREA
    13. PRICE AERA
    14. BLOG AREA
    15. CONTACT AREA
    16. FOOTER AREA
    17. SCROLL TO TOP AREA
    18. HOME TWO
        18.1 HOME TWO VIDEO PROMO
        18.2 HOME TWO VIDEO AREA
        18.3 HOME TWO SUBSCRIBER AREA
        18.4 HOME TWO FOOTER AREA
    19. STYLE TWO TEAM AREA
    20. TEAM STYLE THREE
    21. TESTMONIAL STYLE THREE
    22. FAQS AREA
    22. BLOG PAGES
----------------------------------------------------------------------------------------*/

/*--------------------
    1. BASE CSS
----------------------*/

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a:focus,
a:hover {
    outline: 0 solid;
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button:focus {
    outline: 0;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #292929;
    font-weight: inherit;
    margin: 0 0 15px;
    line-height: 1.4em;
}

/*h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }*/

html,
body {
    height: 100%
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande";
    font-size: 14px;
    line-height: 1.6em;
    font-weight: 400;
    color: #6f6f6f;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: 0;
}

/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/*--------------------
    CONTENT POSITION
---------------------*/

.fix {
    overflow: hidden;
}

.relative {
    position: relative;
    overflow: hidden;
}

.absulute {
    position: absolute;
}

.v-center {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    z-index: 9;
}

.h-center {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.h-center-reverse {
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.content-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: flex;
}

.flex-v-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.social-bookmark li {
    display: inline;
}

.social-bookmark li a {
    display: inline-block;
    margin: 0 2px;
    text-align: center;
}

.inline li {
    display: inline;
}

.inline-block li {
    display: inline-block;
    padding: 5px 15px;
}

.inline-block {
    display: inline-block;
}

/*-----------------------
    SECTION TITLE
------------------------*/

.area-title,
.section-title {
    margin-bottom: 50px;
    position: relative;
}

.area-title h2 {
    color: #1a264a;
    line-height: 1;
    margin-bottom: 45px;
    padding-bottom: 35px;
    position: relative;
}

.icon-and-border {
    display: none;
}

.area-title h2::after {
    border-bottom: 2px dashed #1a264a;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 50%;
}

.runIntervalOrange {
    color: #FF6117;
}
.runIntervalLightBlue {
    color: #55B0FF;
}


/*------------------------
    READ MORE BUTTON
--------------------------*/

.read-more {
    background: #ffffff none repeat scroll 0 0;
    border: 2px solid;
    border-radius: 5px;
    color: #55B0FF;
    display: inline-block;
    font-weight: 700;
    margin-top: 10px;
    padding: 10px 29px;
    text-transform: uppercase;
}

.read-more:hover {
    background: #55B0FF none repeat scroll 0 0;
    border-color: #55B0FF;
    color: #fff;
}

/*--------------------
    PADDING
---------------------*/

.no-padding {
    padding: 0;
}

.padding-20 {
    padding: 20px;
}

.padding-30 {
    padding: 30px;
}

.padding-50 {
    padding: 50px;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.section-padding {
    padding: 80px 0;
}

.padding-100-70 {
    padding-top: 80px;
    padding-bottom: 70px;
}

.padding-100-50 {
    padding-top: 80px;
    padding-bottom: 50px;
}

.padding-100-40 {
    padding-top: 80px;
    padding-bottom: 40px;
}

.padding-100-30 {
    padding-top: 80px;
    padding-bottom: 30px;
}

.padding-50-50 {
    padding: 50px 0;
}

.padding-150-150 {
    padding: 150px 0;
}

/*--------------------
    MARGIN
---------------------*/

.no-margin {
    margin: 0;
}

.mt100 {
    margin-top: 100px;
}

.mt70 {
    margin-top: 70px;
}

.mt50 {
    margin-top: 50px;
}

.mt30 {
    margin-top: 30px;
}

.mt20 {
    margin-top: 20px;
}

.mb100 {
    margin-bottom: 100px;
}

.mb70 {
    margin-bottom: 70px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb0 {
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) {
    /*----------------------------------
        MEDIUM LAYOUT: 1280px
    -----------------------------------*/
    .lg-mb0 {
        margin-bottom: 0px;
    }
    .lg-mb20 {
        margin-bottom: 20px;
    }
    .lg-mb30 {
        margin-bottom: 30px;
    }
    .lg-mb40 {
        margin-bottom: 40px;
    }
    .lg-mb50 {
        margin-bottom: 50px;
    }
    .lg-mb70 {
        margin-bottom: 70px;
    }
    .lg-mb100 {
        margin-bottom: 100px;
    }
    /*----------------*/
    .lg-mt0 {
        margin-top: 0px;
    }
    .lg-mt20 {
        margin-top: 20px;
    }
    .lg-mt30 {
        margin-top: 30px;
    }
    .lg-mt40 {
        margin-top: 40px;
    }
    .lg-mt50 {
        margin-top: 50px;
    }
    .lg-mt70 {
        margin-top: 70px;
    }
    .lg-mt100 {
        margin-top: 100px;
    }
    /*----------------*/
    .lg-padding20 {
        padding: 20px;
    }
    .lg-padding30 {
        padding: 30px;
    }
    .lg-padding40 {
        padding: 40px;
    }
    .lg-padding50 {
        padding: 50px;
    }
    .lg-padding70 {
        padding: 70px;
    }
    .lg-padding100 {
        padding: 100px;
    }
    /*--------------------
        FONT
    ----------------------*/
    .lg-center {
        text-align: center;
    }
    .lg-font h1 {
        font-size: 32px;
    }
    .lg-font h2 {
        font-size: 26px;
    }
    .lg-font h3 {
        font-size: 24px;
    }
    .lg-font h4 {
        font-size: 18px;
    }
    .lg-font h5 {
        font-size: 16px;
    }
    .lg-font h6 {
        font-size: 14px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    /*----------------------------------
        MEDIUM LAYOUT: 1280px
    -----------------------------------*/
    .md-mb0 {
        margin-bottom: 0px;
    }
    .md-mb20 {
        margin-bottom: 20px;
    }
    .md-mb30 {
        margin-bottom: 30px;
    }
    .md-mb40 {
        margin-bottom: 40px;
    }
    .md-mb50 {
        margin-bottom: 50px;
    }
    .md-mb70 {
        margin-bottom: 70px;
    }
    .md-mb100 {
        margin-bottom: 100px;
    }
    /*----------------*/
    .md-mt0 {
        margin-top: 0px;
    }
    .md-mt20 {
        margin-top: 20px;
    }
    .md-mt30 {
        margin-top: 30px;
    }
    .md-mt40 {
        margin-top: 40px;
    }
    .md-mt50 {
        margin-top: 50px;
    }
    .md-mt70 {
        margin-top: 70px;
    }
    .md-mt100 {
        margin-top: 100px;
    }
    /*----------------*/
    .md-padding20 {
        padding: 20px;
    }
    .md-padding30 {
        padding: 30px;
    }
    .md-padding40 {
        padding: 40px;
    }
    .md-padding50 {
        padding: 50px;
    }
    .md-padding70 {
        padding: 70px;
    }
    .md-padding100 {
        padding: 100px;
    }
    /*--------------------
        FONT
    ----------------------*/
    .md-center {
        text-align: center;
    }
    .md-font h1 {
        font-size: 28px;
    }
    .md-font h2 {
        font-size: 24px;
    }
    .md-font h3 {
        font-size: 20px;
    }
    .md-font h4 {
        font-size: 16px;
    }
    .md-font h5 {
        font-size: 14px;
    }
    .md-font h6 {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /*----------------------------------
        TABLET LAYOUT: 768px
    -----------------------------------*/
    .sm-mb0 {
        margin-bottom: 0px;
    }
    .sm-mb20 {
        margin-bottom: 20px;
    }
    .sm-mb30 {
        margin-bottom: 30px;
    }
    .sm-mb40 {
        margin-bottom: 40px;
    }
    .sm-mb50 {
        margin-bottom: 50px;
    }
    .sm-mb70 {
        margin-bottom: 70px;
    }
    .sm-mb100 {
        margin-bottom: 100px;
    }
    /*----------------*/
    .sm-mt0 {
        margin-top: 0px;
    }
    .sm-mt20 {
        margin-top: 20px;
    }
    .sm-mt30 {
        margin-top: 30px;
    }
    .sm-mt40 {
        margin-top: 40px;
    }
    .sm-mt50 {
        margin-top: 50px;
    }
    .sm-mt70 {
        margin-top: 70px;
    }
    .sm-mt100 {
        margin-top: 100px;
    }
    /*----------------*/
    .sm-padding20 {
        padding: 20px;
    }
    .sm-padding30 {
        padding: 30px;
    }
    .sm-padding40 {
        padding: 40px;
    }
    .sm-padding50 {
        padding: 50px;
    }
    .sm-padding70 {
        padding: 70px;
    }
    .sm-padding100 {
        padding: 100px;
    }
    /*--------------------
        FONT
    ----------------------*/
    .sm-center {
        text-align: center;
    }
    .sm-font h1 {
        font-size: 28px;
    }
    .sm-font h2 {
        font-size: 24px;
    }
    .sm-font h3 {
        font-size: 20px;
    }
    .sm-font h4 {
        font-size: 16px;
    }
    .sm-font h5 {
        font-size: 14px;
    }
    .sm-font h6 {
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    /*----------------------------------
        MOBILE LAYOUT: 320px
    -----------------------------------*/
    .xs-mb0 {
        margin-bottom: 0px;
    }
    .xs-mb20 {
        margin-bottom: 20px;
    }
    .xs-mb30 {
        margin-bottom: 30px;
    }
    .xs-mb40 {
        margin-bottom: 40px;
    }
    .xs-mb50 {
        margin-bottom: 50px;
    }
    .xs-mb70 {
        margin-bottom: 70px;
    }
    .xs-mb100 {
        margin-bottom: 100px;
    }
    /*----------------*/
    .xs-mt0 {
        margin-top: 0px;
    }
    .xs-mt20 {
        margin-top: 20px;
    }
    .xs-mt30 {
        margin-top: 30px;
    }
    .xs-mt40 {
        margin-top: 40px;
    }
    .xs-mt50 {
        margin-top: 50px;
    }
    .xs-mt70 {
        margin-top: 70px;
    }
    .xs-mt100 {
        margin-top: 100px;
    }
    /*----------------*/
    .xs-padding20 {
        padding: 20px;
    }
    .xs-padding30 {
        padding: 30px;
    }
    .xs-padding40 {
        padding: 40px;
    }
    .xs-padding50 {
        padding: 50px;
    }
    .xs-padding70 {
        padding: 70px;
    }
    .xs-padding100 {
        padding: 100px;
    }
    /*--------------------
        FONT
    ----------------------*/
    .xs-center {
        text-align: center;
    }
    .xs-font h1 {
        font-size: 26px;
    }
    .xs-font h2 {
        font-size: 22px;
    }
    .xs-font h3 {
        font-size: 18px;
    }
    .xs-font h4 {
        font-size: 14px;
    }
    .xs-font h5 {
        font-size: 12px;
    }
    .xs-font h6 {
        font-size: 10px;
    }

}

/*--------------------
    WIDTH
---------------------*/

.width100,
.width100 img {
    width: 100%;
}

/*----------------------
    ALIGN
-----------------------*/

.left,
.right,
.center {
    position: relative;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

/*-----------------------
    COLOR
------------------------*/

.white,
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white a,
.white small {
    color: #ffffff;
}

/*--------------------
    BACKGROUND
---------------------*/

.green-bg {
    background: #f6fafb;
}

.bg-light-gray {
    background-color: #f7f7f7;
}

/*-------------------*/

.gray-bg {
    background: #f5f4f4;
}

.sky-gray-bg {
    background: #e5eff6;
}

.blue-bg {
    background: #55B0FF;
}

.dark-blue-bg {
    background: #1291CA;
}

.dark-bg {
    background: rgba(0, 0, 0, .85);
    color: #ffffff;
}

.deep-dark-bg {
    background: rgba(0, 0, 0, .9);
    color: #ffffff;
}

.area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.area-bg::after,
.area-bg::before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.area-bg::before {
    background: #001131 none repeat scroll 0 0;
}

/*-----------------------
    SHADOW & BORDER
------------------------*/

.shadow {
    -webkit-box-shadow: 0 0 3px #dddddd;
    box-shadow: 0 0 3px #dddddd;
}

.shadow10 {
    -webkit-box-shadow: 0 0 10px #dddddd;
    box-shadow: 0 0 3px #dddddd;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.shadow10:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.border {
    border: 1px solid #dddddd;
}

.border-left {
    border-left: 1px solid #dddddd;
}

.border-right {
    border-right: 1px solid #dddddd;
}

.border-bottom {
    border-bottom: 1px solid #dddddd;
}

.border-top {
    border-top: 1px solid #dddddd;
}

.border-righ-bottom {
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.border-xs {
    border: 1px solid #dddddd;
}

.b-radious-10 {
    border-radius: 10px;
}

.b-radious-20 {
    border-radius: 20px;
}

.b-radious-50 {
    border-radius: 50px;
}

/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.welcome-text-area {
    height: 100%;
    overflow: hidden;
    padding-top: 100px;
    width: 100%;
}
.welcome-text-area-coming {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.welcome-text-area-coming p {
    margin-bottom: 22px;
}

.top-area .area-bg {
    background: rgba(0, 0, 0, 0) url("img/promo/promo-bg.jpg") no-repeat scroll center center / cover;
}

.top-area .area-bg::after {
    display: none;
}

/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

.mainmenu-area {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 9999;
}

.navbar-header {
    margin-top: 14px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
}

.navbar-brand > img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-brand > img {
    max-width: 80%;
}

/*ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}*/

ul#nav {
    float: none;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.stellarnav.dark {
    background: rgba(0, 0, 0, 0);
}

.navbar-header {
    position: relative;
    z-index: 9999;
}

.navbar-appstore {
    margin-top: 29px;
    margin-left: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
    z-index: 9999;
}
.navbar-appstore img {
    height: 40px;
}

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 40px 5px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul#nav li a:hover,
ul#nav li.active a {
    color: #55B0FF;
}

.is-sticky ul#nav li a {
    padding: 20px 5px;
}


.is-sticky .navbar-header {
    margin-top: -2px;
}

.is-sticky .navbar-appstore {
    margin-top: 9px;
}

.is-sticky .mainmenu-area {
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 99999;
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);

}

.menu-toggle.full {
    border: 1px solid;
    height: 40px;
    letter-spacing: 2px;
    padding-top: 11px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 20px;
    width: 110px;
    z-index: 9999;
}

.is-sticky .menu-toggle.full {
    top: 8px;
}

ul#nav li ul a,
.is-sticky ul#nav li ul a {
    border-bottom: 1px solid #1a1a1a;
    padding: 10px;
    padding-left: 15px;
}


/*----------------------------
    3. WELCOME TEXT AREA
------------------------------*/

.welcome-area {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 18px;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.welcome-mockup img {
    width: 75%;
}


.welcome-text h4 {
    font-size: 20px;
}

.welcome-text h1 {
    font-size: 40px;
    margin-bottom: 30px;
}

.app-icon {
    height: 173px
}

.store-button {
    padding-top: 50px;
}

.store-button a {
    border: 0 none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 15px;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}
.store-button .store-logo {
    height: 61px;
    padding-left: 20px;
}

.sign-up:hover {
    background: #ffffff none repeat scroll 0 0;
    border-color: #ffffff;
    color: #1aabec;
}


/*--------------------------------
    4. SERVICE TOP AREA
---------------------------------*/

.qs-box {
    position: relative;
    min-height: 190px;
}

.qs-box-icon i {
    margin-bottom: 20px;
    border: 2px solid #55B0FF;
    border-radius: 50%;
    color: #292929;
    font-size: 30px;
    height: 60px;
    padding-top: 12px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.qs-box:hover .qs-box-icon i {
    background: #55B0FF;
    /*background-image: -webkit-gradient(linear, right top, left top, from(#55B0FF), to(#001131));
    background-image: linear-gradient(to left, #55B0FF, #001131);*/
    border-color: #55B0FF;
}

.qs-box-icon img {
    width: 50px;
}

.features-top-area .qs-box h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
}

.qs-box.pos-icon-left {
    padding-left: 80px;
    text-align: left;
}

.qs-box.pos-icon-left .qs-box-icon {
    left: 0;
    position: absolute;
    top: 0;
}

.qs-box.pos-icon-right {
    padding-right: 80px;
    text-align: right;
}

.qs-box.pos-icon-right .qs-box-icon {
    right: 0;
    position: absolute;
    top: 0;
}

/*--------------------------------
    8. SCREENSHOT AREA
---------------------------------*/

.screenshot-area .single-screenshot {
    margin: 40px 0 50px;
}

.screenshot-area .owl-carousel .owl-item img {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}

.screenshot-area .owl-carousel .owl-controls {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}

/*--------------------------------
    9. DOWNLOAD AREA
---------------------------------*/

.download-area .area-bg::after {
    background: rgba(0, 0, 0, 0) url("img/mockups/hand-mockup.png") no-repeat scroll center 106% / auto 80%;
}

.download-area.section-padding {
    padding: 200px 0;
}

.download-button {
    border: 1px solid;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 20px;
    padding: 0 0 10px 30px;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    width: 210px;
}

.download-button i {
    font-size: 30px;
    left: 14px;
    position: absolute;
    top: 16px;
    width: 0;
}

.download-button span {
    display: block;
    font-size: 26px;
    line-height: 1;
}


.download-button:hover {
    background: #fff none repeat scroll 0 0;
    border-color: #fff;
    color: #55B0FF;
}



/*---------------------------------
    11. INFO AREA
----------------------------------*/

.info-area .read-more {
    margin-top: 30px;
}

.author-designation {
    margin-bottom: 30px;
}

.author-designation h4 {
    margin-bottom: 5px;
}

.testmonial-author-details {
    font-style: italic;
}



/*--------------------------------
    14. BLOG AREA
----------------------------------*/

.single-blog {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-blog:hover {
    -webkit-box-shadow: 0 0 20px #ddd;
    box-shadow: 0 0 20px #ddd;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.blog-details h4 a {
    color: #292929;
}

.single-blog a:hover {
    color: #55B0FF;
}

.blog-details h4 a:hover {
    color: #55B0FF;
}

.blog-meta {
    margin-bottom: 20px;
}

.blog-meta a {
    color: #6f6f6f;
    margin-right: 15px;
}

.blog-meta i {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.blog-details a.readmore {
    display: inline-block;
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 15px;
    color: #55B0FF
}

.blog-details a.readmore:hover {
    text-decoration: underline;
}

/*---------------------------------
    15. CONTACT AREA
----------------------------------*/

.contact-area .area-bg::before {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    width: 50%;
}

.contact-area .area-bg::after {
    background: rgba(0, 0, 0, 0) url("img/mockups/map-mockup.png") no-repeat scroll left 4% center / auto 39%;
}

.contact-area h2 {
    margin-bottom: 30px;
}

.contact-form input,
.contact-form textarea {
    border-radius: 0;
    margin-bottom: 20px;
    min-height: 50px;
    padding: 10px;
}

.contact-form button {
    background: #55B0FF none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    letter-spacing: 1px;
    padding: 15px 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form button:hover {
    background: #292929 none repeat scroll 0 0;
    color: #ffffff;
}


.subscriber-form {
    background: #fff none repeat scroll 0 0;
    border: 1px solid;
    border-radius: 50px;
    font-size: 18px;
    height: 70px;
    margin-bottom: 50px;
    position: relative;
    text-transform: capitalize;
}

.subscriber-form input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    color: black;
    height: 100%;
    left: 0;
    letter-spacing: 1px;
    padding: 10px 11% 10px 30px;
    position: absolute;
    top: 0;
    width: 80%;
}

.subscriber-form button {
    background: #2abaef none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    height: 100%;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 30%;
}

.subscriber-form button:hover {
    background: #55B0FF none repeat scroll 0 0;
}

label.mt10 {
    bottom: -62px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

label.mt10.valid {
    bottom: 18px;
    color: #2abaef;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

/*---------------------------------
    16. FOOTER AREA
----------------------------------*/

.footer-area .area-bg::before {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
}

.footer-social-bookmark .social-bookmark li a {
    border-radius: 5px;
    font-size: 20px;
    margin: 0 5px;
    text-align: center;
}
.footer-social-bookmark .social-bookmark li a img {
    height: 50px;
    margin-right: 10px;
}
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-copyright {
    padding: 30px 0 15px;
}

.footer-copyright a:hover {
    color: #55B0FF;
}

/*---------------------------------
    17. SCROLL TO TOP AREA
----------------------------------*/

.scrolltotop {
    background: #ffffff none repeat scroll 0 0;
    bottom: 20px;
    color: #333;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 8px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 9;
}

.scrolltotop:hover {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    color: #ffffff;
}

/*---------------------------------
    18. HOME THREE
-----------------------------------*/

.top-area .area-bg::before {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
}

.features-top-area .area-title h2 {
    margin-bottom: 30px;
    padding: 0;
}

.area-title h2 {
    margin-bottom: 30px;
    padding: 0;
}

.area-title h2::after {
    display: none;
}

.intro-area .area-bg::after {
    background: #001131 none repeat scroll 0 0;
    opacity: 0.9;
}

.intro-area .area-bg::after {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    opacity: 0.9;
}

.intro-area .area-bg::before {
    background: rgba(0, 0, 0, 0) url("img/intro-bg.png") repeat scroll center center / cover;
}


/*--------------------------------
    HOME FEATURES ICON STYLE
---------------------------------*/


.home-three .contact-form button {
    background: transparent none repeat scroll 0 0;
    border: 2px solid;
    border-radius: 50px;
    color: #001131;

}

.home-three .contact-form button:hover {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    color: #fff;
    border-color: #001131;
}

/*---------------------------
    22. FAQS AREA
---------------------------*/

.faqs-content .area-bg::before {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
}

.faqs-content img {
    display: block;
    margin: 0 auto;
    width: 50%;
}

.panel-group {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
    -webkit-box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);
    margin-bottom: 0;
    padding: 30px;
}

#accordion .panel {
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0 0 15px 10px;
}

#accordion .panel-heading {
    border-radius: 30px;
    padding: 0;
}

#accordion .panel-title a {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    border: 1px solid transparent;
    border-radius: 30px;
    color: #fff;
    display: block;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 20px 12px 50px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#accordion .panel-title a.collapsed {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #333;
}

#accordion .panel-title a::after,
#accordion .panel-title a.collapsed::after {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    border: 1px solid transparent;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
    color: #fff;
    content: "";
    font-family: fontawesome;
    font-size: 25px;
    height: 55px;
    left: -20px;
    line-height: 55px;
    position: absolute;
    text-align: center;
    top: -5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 55px;
}

#accordion .panel-title a.collapsed::after {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #333;
    content: "";
}

#accordion .panel-body {
    background: transparent none repeat scroll 0 0;
    border-top: medium none;
    padding: 20px 25px 10px 9px;
    position: relative;
}

#accordion .panel-body p {
    border-left: 1px dashed #dddddd;
    padding-left: 25px;
}

/*-----------------------------
    22. BLOG PAGES
-------------------------------*/

.top-area.single-page {
    height: 400px;
}

.page-barner-area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding-top: 80px;
    text-align: center;
}

.page-barner-area .area-bg {
    background: rgba(0, 0, 0, 0) url("img/blog/blog-page-bg.jpg") no-repeat scroll center center / cover;
}

.single-page .page-barner-area .area-bg::before {
    opacity: 0.8;
}

.page-location li {
    margin: 0 5px;
}

.single-page .single-blog h3 a {
    color: #292929;
}

.single-page .single-blog a:hover {
    color: #001131;
}

.single-page .single-blog:hover {
    -webkit-transform: inherit;
    transform: inherit;
}

/*-----------------------
    SEDEBAR WIDGETS
------------------------*/

.single-widget {
    overflow: hidden;
}

.single-widget h3 {
    font-size: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    position: relative;
}

.single-widget h3::after {
    background: rgba(0, 0, 0, 0) url("img/widgets-line.png") no-repeat scroll left bottom;
    bottom: 0;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    width: 100px;
}

.single-widget a {
    border-color: #ddd;
    color: #676767;
}

.single-widget a:hover {
    border-color: #001131;
    color: #001131;
}

/*-----------------------
    ABOUT WIDGET
------------------------*/

.single-widget.about-widget img {
    border-radius: 9px;
    margin-bottom: 20px;
}

/*-----------------------
    RECENT POST WIDGET
-------------------------*/

.single-widget.post-widget li {
    margin-bottom: 20px;
}

.single-widget.post-widget li:last-child {
    margin-bottom: 0;
}

.single-widget.post-widget li img {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
}

.post-widget .post-meta a {
    color: #676767;
    margin-right: 10px;
}

.post-widget .post-meta a:hover {
    color: #001131;
}

/*------------------------
    TAG WIDGET
--------------------------*/

.tagcloud a {
    border: 1px solid #ddd;
    color: #676767;
    display: inline-block;
    margin: 5px 3px;
    padding: 10px 20px;
}

.tagcloud a:hover {
    border-color: #001131;
    color: #001131;
}

/*-----------------------
    WIDGET CATEGORIES
------------------------*/

.single-widget.categories li {
    display: block;
    position: relative;
}

.single-widget.categories li::before {
    background: #676767 none repeat scroll 0 0;
    content: "";
    display: inline-block;
    height: 2px;
    left: 0;
    position: relative;
    top: -3px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 10px;
}

.single-widget.categories li a {
    color: #676767;
    display: inline-block;
    padding: 10px;
}

.single-widget.categories li:hover::before {
    background: #001131 none repeat scroll 0 0;
    width: 20px;
}

.single-widget.categories li a:hover {
    color: #001131;
}

/*-----------------------
    TWITTER WIDGET
------------------------*/

.single-widget.twitter-feed li {
    margin-bottom: 20px;
}

.single-widget.twitter-feed li:last-child {
    margin-bottom: 0;
}

/*------------------------
    SUBSCRIBER WIDGET
-------------------------*/

.widget-subscriber-form input,
.widget-subscriber-form button {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    color: #282828;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding: 10px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.widget-subscriber-form {
    background: #001131;
    background-image: -webkit-gradient(linear, right top, left top, from(#000010), to(#001131));
    background-image: linear-gradient(to left, #000010, #001131);
    padding: 20px;
}

.widget-subscriber-form button {
    margin-bottom: 0;
}

.widget-subscriber-form button:hover {
    background: #282828;
    color: #fff;
}

/*------------------------
    INSTAFEED WIDGET
--------------------------*/

.single-widget.instafeed li {
    float: left;
    width: 33.33%;
}