/**

* Template Name: eBusiness - v2.1.1

* Template URL: https://bootstrapmade.com/ebusiness-bootstrap-corporate-template/

* Author: BootstrapMade.com

* License: https://bootstrapmade.com/license/

*/



@charset "UTF-8";

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

# General

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




.floatleft {

    float: left;

}



.floatright {

    float: right;

}



.alignleft {

    float: left;

    margin-right: 15px;

    margin-bottom: 15px;

}



.alignright {

    float: right;

    margin-left: 15px;

    margin-bottom: 15px;

}



.aligncenter {

    display: block;

    margin: 0 auto 15px;

}



a:focus {

    outline: 0px solid;

}



img {

    max-width: 100%;

    height: auto;

}



.fix {

    overflow: hidden;

}



p {

    margin: 0 0 15px;

    color: #444;

}



h1, h2, h3, h4, h5, h6 {

    margin: 0 0 15px;

    color: #444;

    font-weight: 500;

}



h1 {

    font-size: 48px;

    line-height: 50px;

}



h2 {

    font-size: 38px;

    line-height: 40px;

}



h3 {

    font-size: 30px;

    line-height: 32px;

}



h4 {

    font-size: 24px;

    line-height: 26px;

}



h5 {

    font-size: 20px;

    line-height: 22px;

}



h6 {

    font-size: 16px;

    line-height: 20px;

}



a {

    transition: all 0.3s ease 0s;

    text-decoration: none;

}



    a:hover {

        color: #3498db;

        text-decoration: none;

    }



    a:active, a:hover {

        outline: 0 none;

    }



body {

    background: #fff none repeat scroll 0 0;

    color: #444;

    font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",Roboto,Arial,sans-serif;

    font-size: 14px;

    text-align: left;

    overflow-x: hidden;

    line-height: 22px;

}



/* Back to top button */

.back-to-top {

    position: fixed;

    display: none;

    background: #3498db;

    color: #fff;

    padding: 6px 12px 9px 12px;

    font-size: 16px;

    border-radius: 2px;

    right: 15px;

    bottom: 15px;

    transition: background 0.5s;

}



@media (max-width: 768px) {

    .back-to-top {

        bottom: 15px;

    }

}



.back-to-top:focus {

    background: #3498db;

    color: #fff;

    outline: none;

}



.back-to-top:hover {

    background: #3cd6ed;

    color: #fff;

}



.clear {

    clear: both;

}



ul {

    list-style: outside none none;

    margin: 0;

    padding: 0;

}



input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] {

    -moz-appearance: none;

    box-shadow: none !important;

}



div#preloader {

    position: fixed;

    left: 0;

    top: 0;

    z-index: 99999;

    width: 100%;

    height: 100%;

    overflow: visible;

    background: #fff url("../images/preloader.gif") no-repeat center center;

}



::-moz-selection {

    background: #3498db;

    text-shadow: none;

    color: #fff;

}



::selection {

    background: #3498db;

    text-shadow: none;

    color: #fff;

}



.area-padding {

    padding: 35px 0px 35px;

}



.area-padding-2 {

    padding: 70px 0px 50px;

}



.padding-2 {

    padding-bottom: 90px;

}



.section-headline h2 {

    display: inline-block;

    font-size: 25px;

    font-weight: 600;

    margin-bottom: 40px;

    position: relative;

    /*text-transform: capitalize;*/

    font-family: "PingFang SC","Microsoft YaHei" !important;

}





    .section-headline h2::before {

        content: '';

        position: absolute;

        display: block;

        width: 120px;

        height: 1px;

        background: #ddd;

        bottom: -9px;

        left: calc(50% - 60px);

    }



    .section-headline h2::after {

        content: '';

        position: absolute;

        display: block;

        width: 40px;

        height: 3px;

        background: #3498db;

        bottom: -10px;

        left: calc(50% - 20px);

    }



.sec-head {

    display: inline-block;

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 0;

    padding: 0 0 10px;

    text-transform: uppercase;

    transition: all 0.4s ease 0s;

}



.section-bg {

    background-color: #f3f5fa;

}



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

# Header

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

#header {

    height: 80px;

    transition: all 0.5s;

    z-index: 997;

    transition: all 0.5s;

    padding: 20px 0;

    background: rgba(0, 0, 0, 0.5);

}



    #header.header-scrolled {

        background: rgba(0, 0, 0, 0.8);

        height: 60px;

        padding: 10px 0;

    }



    #header .logo h1 {

        font-size: 36px;

        margin: 0;

        padding: 0;

        line-height: 1;

        font-weight: bold;

    }



        #header .logo h1 span {

            color: #3498db;

        }



        #header .logo h1 a, #header .logo h1 a:hover {

            color: #fff;

            text-decoration: none;

        }



    #header .logo img {

        padding: 0;

        margin: 0;

        max-height: 40px;

    }







@media (max-width: 768px) {

    #header {

        height: 60px;

        padding: 10px 0;

        background: rgba(0, 0, 0, 0.8);

    }



        #header .logo h1 {

            font-size: 28px;

            padding: 4px 0;

        }

}







@media (min-width: 1025px) {

    .header-bg {

        background-attachment: fixed;

    }

}



.home-overly {

    background: rgba(0, 0, 0, 0.5);

    height: 100%;

    position: absolute;

    width: 100%;

}



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

# Nav

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

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

# Navigation Menu

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

/* Desktop Navigation */

.nav-menu, .nav-menu * {

    margin: 0;

    padding: 0;

    list-style: none;

}



    .nav-menu > ul > li {

        position: relative;

        white-space: nowrap;

        float: left;

    }



    .nav-menu a {

        display: block;

        position: relative;

        color: #fafefe;

        padding: 8px 15px 12px 15px;

        transition: 0.3s;

        font-size: 15px;

    }



        .nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {

            color: #3498db;

            text-decoration: none;

        }



    .nav-menu .drop-down ul {

        display: block;

        position: absolute;

        left: 0;

        top: calc(100% - 30px);

        z-index: 99;

        opacity: 0;

        visibility: hidden;

        padding: 10px 0;

        background: #fff;

        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

        transition: ease all 0.3s;

    }



    .nav-menu .drop-down:hover > ul {

        opacity: 1;

        top: 100%;

        visibility: visible;

    }



    .nav-menu .drop-down li {

        min-width: 120px;

        position: relative;

    }



    .nav-menu .drop-down ul a {

        padding: 10px 20px;

        font-size: 14px;

        font-weight: 500;

        text-transform: none;

        color: #000000;

    }



        .nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {

            color: #3498db;

        }



    .nav-menu .drop-down > a:after {

        content: "\ea99";

        font-family: IcoFont;

        padding-left: 5px;

    }



    .nav-menu .drop-down .drop-down ul {

        top: 0;

        left: calc(100% - 30px);

    }



    .nav-menu .drop-down .drop-down:hover > ul {

        opacity: 1;

        top: 0;

        left: 100%;

    }



    .nav-menu .drop-down .drop-down > a {

        padding-right: 35px;

    }



        .nav-menu .drop-down .drop-down > a:after {

            content: "\eaa0";

            font-family: IcoFont;

            position: absolute;

            right: 15px;

        }



@media (max-width: 1366px) {

    .nav-menu .drop-down .drop-down ul {

        left: -90%;

    }



    .nav-menu .drop-down .drop-down:hover > ul {

        left: -100%;

    }



    .nav-menu .drop-down .drop-down > a:after {

        content: "\ea9d";

    }

}



/* Mobile Navigation */

.mobile-nav-toggle {

    position: fixed;

    right: 15px;

    top: 15px;

    z-index: 9998;

    border: 0;

    background: none;

    font-size: 24px;

    transition: all 0.4s;

    outline: none !important;

    line-height: 1;

    cursor: pointer;

    text-align: right;

}



    .mobile-nav-toggle i {

        color: #fff;

    }



.mobile-nav {

    position: fixed;

    top: 55px;

    right: 15px;

    bottom: 15px;

    left: 15px;

    z-index: 9999;

    overflow-y: auto;

    background: #fff;

    transition: ease-in-out 0.2s;

    opacity: 0;

    visibility: hidden;

    border-radius: 10px;

    padding: 10px 0;

}



    .mobile-nav * {

        margin: 0;

        padding: 0;

        list-style: none;

    }



    .mobile-nav a {

        display: block;

        position: relative;

        color: #0d2529;

        padding: 10px 20px;

        font-weight: 500;

        outline: none;

    }



        .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {

            color: #3498db;

            text-decoration: none;

        }



    .mobile-nav .drop-down > a:after {

        content: "\ea99";

        font-family: IcoFont;

        padding-left: 10px;

        position: absolute;

        right: 15px;

    }



    .mobile-nav .active.drop-down > a:after {

        content: "\eaa1";

    }



    .mobile-nav .drop-down > a {

        padding-right: 35px;

    }



    .mobile-nav .drop-down ul {

        display: none;

        overflow: hidden;

    }



    .mobile-nav .drop-down li {

        padding-left: 20px;

    }



.mobile-nav-overly {

    width: 100%;

    height: 100%;

    z-index: 9997;

    top: 0;

    left: 0;

    position: fixed;

    background: rgba(1, 2, 2, 0.6);

    overflow: hidden;

    display: none;

    transition: ease-in-out 0.2s;

}



.mobile-nav-active {

    overflow: hidden;

}



    .mobile-nav-active .mobile-nav {

        opacity: 1;

        visibility: visible;

    }



    .mobile-nav-active .mobile-nav-toggle i {

        color: #fff;

    }





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

# Slider

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

.slider-area {

    color: #fff;

    position: relative;

    text-align: center;

}



.slider-content {

    padding: 180px 60px;

}



.nivo-caption::after {

    background: #444 none repeat scroll 0 0;

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.5;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: -1;

}



.layer-1-2 {

    margin: 20px 0;

}



.layer-1-1 h2 {

    color: #fff;

    font-size: 32px;

    font-weight: 700;

}



.layer-1-2 h1 {

    color: #fff;

    font-size: 50px;

    font-weight: 700;

    line-height: 60px;

}



.layer-1-3 {

    margin: 50px 0 0;

}



    .layer-1-3 a.ready-btn {

        border: 1px solid #fff;

        border-radius: 30px;

        color: #fff;

        cursor: pointer;

        display: inline-block;

        font-size: 17px;

        font-weight: 600;

        margin-top: 30px;

        padding: 10px 20px;

        text-align: center;

        text-transform: uppercase;

        transition: all 0.4s ease 0s;

        z-index: 222;

    }



        .layer-1-3 a.ready-btn:hover {

            color: #fff;

            background: #3498db;

            border: 1px solid #3498db;

            text-decoration: none;

        }



.ready-btn.right-btn {

    margin-right: 15px;

    background: #3498db;

    border: 1px solid #3498db !important;

}



    .ready-btn.right-btn:hover {

        background: transparent !important;

        border: 1px solid #fff !important;

    }



.nivo-controlNav {

    bottom: 0;

    left: 0;

    position: absolute;

    right: 0;

    z-index: 8;

}



.nivo-directionNav {

    display: block;

}



.nivo-controlNav a {

    background: transparent none repeat scroll 0 0;

    border: 2px solid #fff;

    box-shadow: none;

    display: inline-block;

    font-size: 0;

    height: 2px;

    margin: 5px 3px;

    opacity: 1;

    text-align: center;

    text-indent: inherit;

    vertical-align: top;

    width: 20px;

}



    .nivo-controlNav a:hover, .nivo-controlNav a.active {

        background: #fff none repeat scroll 0 0;

        border-color: #3498db;

        -moz-transform: rotate(180deg);

        -webkit-transform: rotate(180deg);

        -o-transform: rotate(180deg);

        -ms-transform: rotate(180deg);

    }



/* Normal desktop :992px. */

@media (min-width: 1400px) and (max-width: 1920px) {

    .slider-content {

        padding: 340px 0;

    }



    .inner-bar {

        padding: 160px 0px 80px;

    }

}



/* Normal desktop :992px. */

@media (min-width: 992px) and (max-width: 1169px) {

    .slider-content {

        padding: 144px 0;

    }



    .inner-bar {

        padding: 100px 0px 80px;

    }

}



/* Tablet desktop :768px. */

@media (min-width: 768px) and (max-width: 991px) {

    .slider-content {

        padding: 93px 0;

    }



    .inner-bar {

        padding: 93px 0px;

    }



    .layer-1-2 h1 {

        font-size: 22px;

        line-height: 24px;

    }



    .layer-1-3 a.ready-btn {

        font-size: 14px;

        margin-top: 20px;

        padding: 10px 20px;

    }

}



@media (max-width: 767px) {

    .nivo-directionNav {

        display: none;

    }



    .slider-content {

        padding: 46px 0px;

    }



    .inner-bar {

        padding: 46px 0px;

    }



    .layer-1-2 {

        margin: 10px 0;

    }



    .layer-1-1 h2 {

        font-size: 14px;

        line-height: 16px;

    }



    .layer-1-2 h1 {

        font-size: 14px;

        line-height: 16px;

    }



    .layer-1-3 a.ready-btn {

        font-size: 12px;

        margin-top: 10px;

        padding: 8px 10px;

    }



    .layer-1-3 {

        margin: 10px 0 0;

    }



    .nivo-controlNav {

        bottom: -8px;

    }

}



@media only screen and (min-width: 480px) and (max-width: 767px) {

    .slider-content {

        padding: 70px 0px;

    }



    .layer-1-1 h2, .layer-1-2 h1 {

        font-size: 24px;

        line-height: 30px;

    }

}



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

preview-1

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

.preview-1 .nivoSlider {

    position: relative;

    background: url(../images/loading.gif) no-repeat 50% 50%;

}



    .preview-1 .nivoSlider img {

        position: absolute;

        top: 0px;

        left: 0px;

        display: none;

    }



    .preview-1 .nivoSlider a {

        border: 0;

        display: block;

    }



.preview-1 .nivo-controlNav {

    text-align: center;

    padding: 20px 0;

}



    .preview-1 .nivo-controlNav a {

        display: inline-block;

        width: 22px;

        height: 22px;

        background: url(../images/bullets.png) no-repeat;

        text-indent: -9999px;

        border: 0;

        margin: 0 2px;

    }



        .preview-1 .nivo-controlNav a.active {

            background-position: 0 -22px;

        }



.preview-1 .nivo-directionNav a {

    display: block;

    width: 30px;

    height: 30px;

    background: url(../images/arrows.png) no-repeat;

    text-indent: -9999px;

    border: 0;

    opacity: 0;

    transition: all 200ms ease-in-out;

}



.preview-1:hover .nivo-directionNav a {

    opacity: 1;

}



.nivo-prevNav {

    left: 15px;

}



.nivo-nextNav {

    right: 15px;

}



.preview-1 a.nivo-nextNav {

    background-position: -30px 0;

}



.preview-1 .nivo-caption {

    font-family: Helvetica, Arial, sans-serif;

}



    .preview-1 .nivo-caption a {

        color: #fff;

        border-bottom: 1px dotted #fff;

    }



        .preview-1 .nivo-caption a:hover {

            color: #fff;

        }



.preview-1 .nivo-controlNav.nivo-thumbs-enabled {

    width: 100%;

}



    .preview-1 .nivo-controlNav.nivo-thumbs-enabled a {

        width: auto;

        height: auto;

        background: none;

        margin-bottom: 5px;

    }



    .preview-1 .nivo-controlNav.nivo-thumbs-enabled img {

        display: block;

        width: 120px;

        height: auto;

    }



.preview-1 .nivo-controlNav {

    position: relative;

    z-index: 99999;

    bottom: 68px;

}



    .preview-1 .nivo-controlNav a {

        border: 5px solid #fff;

        display: inline-block;

        height: 18px;

        margin: 0 5px;

        text-indent: -9999px;

        width: 18px;

        line-height: 8px;

        background: #3c3c3c;

        cursor: pointer;

        position: relative;

        z-index: 9;

        border-radius: 100%;

        opacity: 0;

        z-index: -999;

    }



.preview-1:hover .nivo-controlNav a {

    opacity: 1;

    z-index: 999999;

}



.preview-1 .nivo-controlNav a:hover, .preview-1 .nivo-controlNav a.active {

    background: #000;

    cursor: pointer;

}



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

preview-2

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

.preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-prevNav {

    left: 50px;

}



.preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-nextNav {

    right: 50px;

}



.preview-2 .nivoSlider .nivo-directionNav a.nivo-prevNav {

    font-size: 0;

}



.preview-2 .nivoSlider .nivo-directionNav a.nivo-nextNav {

    font-size: 0;

}



.preview-2 .nivo-directionNav a.nivo-prevNav::before {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    color: #ffffff;

    content: "";

    cursor: pointer;

    font: 300 50px/50px FontAwesome;

    position: absolute;

    text-align: center;

    top: 50%;

    transition: all 300ms ease-in 0s;

    z-index: 9;

    font-weight: 100;

    left: 0px;

    width: 50px;

    border: 1px solid #fff;

    border-radius: 50%;

    font-size: 30px;

}



.preview-2 .nivo-directionNav a.nivo-nextNav:hover:before, .preview-2 .nivo-directionNav a.nivo-prevNav:hover:before {

    border-color: #3498db;

    color: #fff;

    background: #3498db;

}



.preview-2 .nivo-directionNav a.nivo-nextNav::before {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    border: 1px solid #fff;

    border-radius: 50%;

    color: #ffffff;

    content: "";

    cursor: pointer;

    font: 100 30px/50px FontAwesome;

    height: 50px;

    position: absolute;

    right: 0px;

    text-align: center;

    top: 50%;

    transition: all 300ms ease-in 0s;

    width: 50px;

    z-index: 9;

    font-size: 30px;

}



.niceties.preview-2 {

    position: relative;

    height: 100%;

}



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

# About

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

.about-area {

    background-color: #f9f9f9;

}



.single-well > a {

    display: block;

}



.single-well ul li {

    color: #444;

    display: block;

    padding: 5px 0;

}



    .single-well ul li i {

        color: #3498db;

        padding-right: 10px;

        font-size: 12px;

    }



.single-well p {

    color: #444;

}



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

# Services

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

.services .icon-box {

    padding: 30px;

    position: relative;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);

    transition: all 0.3s ease-in-out;

    border-radius: 8px;

    z-index: 1;

}



    .services .icon-box::before {

        content: '';

        position: absolute;

        background: #e1f0fa;

        right: -60px;

        top: -40px;

        width: 100px;

        height: 100px;

        border-radius: 50px;

        transition: all 0.3s;

        z-index: -1;

    }



    .services .icon-box:hover::before {

        background: #3498db;

        right: 0;

        top: 0;

        width: 100%;

        height: 100%;

        border-radius: 0px;

    }



.services .icon {

    margin: 0 auto 20px auto;

    padding-top: 10px;

    display: inline-block;

    text-align: center;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    background: #3498db;

    transition: all 0.3s ease-in-out;

}



    .services .icon i {

        font-size: 36px;

        line-height: 1;

        color: #fff;

    }



.services .title {

    font-weight: 700;

    margin-bottom: 15px;

    font-size: 18px;

}



    .services .title a {

        color: #111;

    }



.services .description {

    font-size: 15px;

    line-height: 28px;

    margin-bottom: 0;

}



    .services .description .highlight {

        color: red;

    }



.services .icon-box:hover .title a, .services .icon-box:hover .description {

    color: #fff;

}



.services .icon-box:hover .icon {

    background: #fff;

}



    .services .icon-box:hover .icon i {

        color: #3498db;

    }



.services .icon-box:hover .description .highlight {

    color: #fff;

}





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

# Counts

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

.counts {

    background-size: cover;

    padding: 30px 0 10px 0;

    position: relative;

}



    .counts::before {

        content: "";

        position: absolute;

        background: rgba(0, 0, 0, 0.7);

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

    }



    .counts .title {

        position: relative;

        color: #fff;

        margin-bottom: 30px;

    }



        .counts .title h3 {

            font-size: 36px;

            font-weight: 700;

        }



    .counts .counters span {

        font-size: 48px;

        color: #3498db;

    }



        .counts .counters span.unit {

            font-size: 12px;

            color: #fff;

        }



    .counts .counters p {

        padding: 0;

        margin: 5px 0 15px 0;

        font-size: 14px;

        color: #fff;

    }





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

# Clients

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

.clients .clients-wrap {

    border-top: 1px solid #eee;

    border-left: 1px solid #eee;

}



.clients .client-logo {

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-right: 1px solid #eee;

    border-bottom: 1px solid #eee;

    overflow: hidden;

    background: #fff;

    height: 140px;

}



    .clients .client-logo img {

        height: 50%;

        -webkit-filter: grayscale(100%);

        filter: grayscale(100%);

        transition: 0.3s;

    }



    .clients .client-logo:hover img {

        -webkit-filter: none;

        filter: none;

        transform: scale(1.2);

    }



.clients img {

    transition: all 0.4s ease-in-out;

}



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

# Why Choose US

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

.choose .icon-box {

    box-shadow: 0px 0 20px 0 rgba(0, 0, 0, 0.1);

    padding: 40px 30px;

    margin-bottom:20px;

    transition: all ease-in-out 0.4s;

    background: #fff;

    width: 100%;

    min-height:200px;

}



.choose .icon-box i {

    float: left;

    color: #3498db;

    font-size: 40px;

}



.choose .icon-box h4 {

    margin-left: 70px;

    font-weight: 700;

    margin-bottom: 15px;

    font-size: 18px;

}



    .choose .icon-box h4 a {

        color: #354144;

        transition: 0.3s;

    }



.choose .icon-box:hover h4 a {

    color: #3498db;

}



.choose .icon-box p {

    margin-left: 70px;

    line-height: 24px;

    font-size: 14px;

}



.product .icon-box {

    margin-bottom: 20px;

    padding: 30px 0px 30px 50px;

    border-radius: 6px;

    background: #fff;

}



.product .icon-box i {

    float: left;

    color: #3498db;

    font-size: 25px;

}



.product .icon-box h4 {

    font-weight: 700;

    font-size: 25px;

}



    .product .icon-box .desc {

        color: #5e5e5e;

        font-size: 14px;

        line-height: 25px;

        margin-bottom: 15px;

    }



    .product .icon-box p {

        line-height: 25px;

        font-size: 14px;

    }



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

# soluation

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

.header-bg.soluation {

    background: url(../images/top-bar.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}



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

# product entry

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

.header-bg.product-entry {

    background: url(../images/entry-top-bar.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}



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

# query

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

.header-bg.query {

    background: url(../images/top-bar.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}



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

# about

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

.header-bg.about {

    background: url(../images/top-bar.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}





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

# query

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

.header-bg.contact {

    background: url(../images/top-bar.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}



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

# query

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

.header-bg.user {

    background: url(../images/top-bar.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

}



.breadcrumb {

    background-color: #fff;

}



    .breadcrumb > li + li:before {

        color: #CCCCCC;

        content: "/ ";

        padding: 0 5px;

    }



/* Portfolio Section

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

#portfolio #portfolio-flters {

    padding: 0;

    margin: 0 auto 25px auto;

    list-style: none;

    text-align: center;

    border-radius: 50px;

}



    #portfolio #portfolio-flters li {

        cursor: pointer;

        display: inline-block;

        padding: 12px 18px 14px 18px;

        font-size: 14px;

        font-weight: 500;

        line-height: 1;

        color: #666666;

        margin: 0 5px 10px 5px;

        transition: all ease-in-out 0.3s;

        background: white;

        border-radius: 4px;

    }



        #portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active {

            color: #fff;

            background: #3498db;

        }



        #portfolio #portfolio-flters li:last-child {

            margin-right: 0;

        }



#portfolio .portfolio-item {

    margin-bottom: 30px;

    overflow: hidden;

}



    #portfolio .portfolio-item img {

        position: relative;

        top: 0;

        transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);

    }



    #portfolio .portfolio-item .portfolio-info {

        opacity: 0;

        position: absolute;

        left: 15px;

        right: 15px;

        bottom: -50px;

        z-index: 3;

        transition: all ease-in-out 0.3s;

        background: #3498db;

        padding: 15px 20px;

    }



        #portfolio .portfolio-item .portfolio-info h4 {

            font-size: 18px;

            color: #fff;

            font-weight: 600;

        }



        #portfolio .portfolio-item .portfolio-info p {

            color: #fff;

            font-size: 14px;

            margin-bottom: 0;

        }



        #portfolio .portfolio-item .portfolio-info .preview-link, #portfolio .portfolio-item .portfolio-info .details-link {

            position: absolute;

            right: 50px;

            font-size: 24px;

            top: calc(50% - 18px);

            color: white;

            transition: ease-in-out 0.3s;

        }



            #portfolio .portfolio-item .portfolio-info .preview-link:hover, #portfolio .portfolio-item .portfolio-info .details-link:hover {

                color: #a4ebd4;

            }



        #portfolio .portfolio-item .portfolio-info .details-link {

            right: 15px;

        }



    #portfolio .portfolio-item:hover img {

        top: -30px;

    }



    #portfolio .portfolio-item:hover .portfolio-info {

        opacity: 1;

        bottom: 0;

    }



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

# Portfolio Details

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

.portfolio-details {

    padding-top: 30px;

}



    .portfolio-details .portfolio-details-container {

        position: relative;

    }



    .portfolio-details .portfolio-details-carousel {

        position: relative;

        z-index: 1;

    }



        .portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots {

            margin-top: 5px;

            text-align: left;

        }



        .portfolio-details .portfolio-details-carousel .owl-dot {

            display: inline-block;

            margin: 0 10px 0 0;

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background-color: #ddd !important;

        }



            .portfolio-details .portfolio-details-carousel .owl-dot.active {

                background-color: #2dc997 !important;

            }



    .portfolio-details .portfolio-info {

        padding: 30px;

        position: absolute;

        right: 0;

        bottom: -70px;

        background: #fff;

        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

        z-index: 2;

    }



        .portfolio-details .portfolio-info h3 {

            font-size: 22px;

            font-weight: 700;

            margin-bottom: 20px;

            padding-bottom: 20px;

            border-bottom: 1px solid #eee;

        }



        .portfolio-details .portfolio-info ul {

            list-style: none;

            padding: 0;

            font-size: 15px;

        }



            .portfolio-details .portfolio-info ul li + li {

                margin-top: 10px;

            }



    .portfolio-details .portfolio-description {

        padding-top: 50px;

    }



        .portfolio-details .portfolio-description h2 {

            width: 50%;

            font-size: 26px;

            font-weight: 700;

            margin-bottom: 20px;

        }



        .portfolio-details .portfolio-description p {

            padding: 0 0 0 0;

        }



@media (max-width: 768px) {

    .portfolio-details .portfolio-description h2 {

        width: 100%;

    }



    .portfolio-details .portfolio-info {

        position: static;

        margin-top: 30px;

    }

}





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

# Team

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

.team-member {

    background: rgba(0, 0, 0, 0.65) none repeat scroll 0 0;

    display: block;

    margin-right: -15px;

    padding: 10px;

    position: relative;

    overflow: hidden;

}



    .team-member::before {

        background: rgba(0, 0, 0, 0) url("../images/team01.jpg") repeat scroll 0 0;

        content: "";

        display: block;

        height: 100%;

        left: 0;

        margin-right: -15px;

        padding: 10px;

        position: absolute;

        top: 0;

        width: 100%;

        z-index: -1;

        background-repeat: no-repeat;

        background-size: cover;

        background-position: top center;

        transition: 5s;

        transform: scale(1);

    }



    .team-member:hover.team-member::before {

        transform: scale(1.2);

    }



.single-team-member {

    border: 1px solid #ddd;

}



.team-left-text h4 {

    color: #fff;

    font-size: 30px;

    font-weight: 700;

    text-transform: uppercase;

}



.team-left-text p {

    color: #fff;

    font-size: 17px;

    line-height: 26px;

}



.email-news {

    display: block;

    margin: 30px 0;

    overflow: hidden;

    text-align: center;

    width: 100%;

}



    .email-news .email_button input {

        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

        border: 1px solid #fff;

        color: #fff;

        float: left;

        font-size: 13px;

        padding: 8px;

        width: 81%;

    }



    .email-news .email_button > button {

        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

        border: 1px solid #fff;

        color: #fff;

        float: left;

        font-size: 16px;

        padding: 8px 12px;

        text-align: center;

    }



        .email-news .email_button > button:hover {

            background: #3EC1D5;

            border: 1px solid #fff;

            color: #fff;

        }



.team-left-icon ul li {

    display: inline-block;

}



    .team-left-icon ul li a:hover {

        color: #3EC1D5;

        background: #fff;

        border: 2px solid #fff;

    }



    .team-left-icon ul li a {

        border: 2px solid #fff;

        color: #fff;

        display: block;

        font-size: 16px;

        height: 40px;

        line-height: 37px;

        margin: 0 3px;

        width: 40px;

    }



.team-member-carousel .single-team-member {

    overflow: hidden;

    width: 100%;

}



.single-team-member:hover .team-img a:after {

    opacity: 1;

}



.single-team-member:hover .team-social-icon {

    top: 45%;

    opacity: 1;

}



.team-img {

    position: relative;

}



    .team-img > a {

        display: block;

    }



.team-social-icon {

    opacity: 0;

    position: absolute;

    top: 30%;

    transition: 1.3s;

}



.team-content {

    padding: 10px 0px;

    background-color: #fff;

}



    .team-content > h4, .team-content > p {

        color: #444;

        margin-bottom: 5px;

    }



    .team-content.head-team p {

        margin-bottom: 0;

    }



.team-left-icon.text-center {

    margin-bottom: 20px;

}



.head-team h4 {

    display: inline-block;

    font-size: 25px;

    font-weight: 600;

    padding-bottom: 10px;

    text-transform: uppercase;

}









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

# Review

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

.reviews-area {

    background: url(../images/bg1.jpg);

    overflow: hidden;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top center;

    background-attachment: fixed;

    width: 100%;

    height: auto;

    position: relative;

}



.work-left-text {

    background: #3498db none repeat scroll 0 0;

}



.work-right-text {

    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;

}



    .work-right-text h2 {

        color: #fff;

        text-transform: uppercase;

        font-size: 24px;

    }



    .work-right-text h5 {

        color: #fff;

        font-size: 18px;

        font-weight: 700;

        line-height: 34px;

        text-transform: uppercase;

    }



    .work-right-text .sus-btn {

        margin-left: 0;

        margin-top: 20px;

    }



.single-awesome-4 {

    display: block;

    float: left;

    overflow: hidden;

    width: 33.33%;

}



    .single-awesome-4 .add-actions {

        padding: 10px 20px;

    }



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

# Portfolio

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

.pst-content {

    padding-left: 10px;

}



.project-menu {

    margin-bottom: 40px;

    text-align: center;

}



    .project-menu li {

        display: inline-block;

    }



        .project-menu li a {

            background: #fff none repeat scroll 0 0;

            border: 1px solid #444;

            border-radius: 20px;

            color: #444;

            cursor: pointer;

            display: inline-block;

            font-size: 14px;

            font-weight: 500;

            margin: 0 4px;

            padding: 6px 15px;

            text-transform: capitalize;

            transition: all 0.3s ease 0s;

        }



            .project-menu li a.active, .project-menu li a:hover {

                border-color: #3498db;

                background: #3498db;

                color: #fff;

                text-decoration: none;

            }



.single-awesome-portfolio {

    float: left;

    overflow: hidden;

    padding: 15px;

    width: 25%;

    position: relative;

}



.single-awesome-project {

    overflow: hidden;

    margin-bottom: 30px;

}



.first-item {

    margin-bottom: 30px;

}



.awesome-img {

    display: block;

    width: 100%;

    height: 100%;

    position: relative;

}



    .awesome-img > a {

        display: block;

        position: relative;

    }



.single-awesome-project:hover .awesome-img > a::after {

    opacity: 1;

}



.single-awesome-project:hover .add-actions {

    opacity: 1;

    bottom: 0;

}



.awesome-img > a::after {

    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;

    content: "";

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    opacity: 0;

    transition: 0.4s;

}



.add-actions {

    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;

    bottom: 30px;

    display: block;

    height: 100%;

    left: 0;

    opacity: 0;

    overflow: hidden;

    padding: 10px 15px;

    position: absolute;

    transition: all 0.4s ease 0s;

    width: 100%;

}



.project-dec {

    display: block;

    height: 100%;

    width: 100%;

}



    .project-dec a {

        display: block;

        height: 100%;

        width: 100%;

    }



    .project-dec h4 {

        margin-bottom: 5px;

    }



        .project-dec h4:hover {

            color: #fff;

        }



    .project-dec h4 {

        color: #ddd;

        font-size: 24px;

        margin-top: -45px;

        padding-top: 50%;

        text-decoration: none;

        text-transform: uppercase;

        font-weight: 800;

    }



    .project-dec span {

        color: #ddd;

        font-size: 13px;

    }



.project-action-btn {

    display: block;

    height: 100%;

    text-align: center;

    transition: all 1s ease 0s;

    width: 100%;

}



    .project-action-btn li {

        display: block;

        height: 100%;

        width: 100%;

    }



        .project-action-btn li a {

            display: block;

            height: 100%;

            width: 100%;

        }



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

# Pricing

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

.pricing-area {

}



.pri_table_list {

    border: 1px solid #ccc;

    text-align: center;

    transition: all 0.4s ease 0s;

    background: #fff;

}



    .pri_table_list h3 span {

        font-size: 16px;

    }



    .pri_table_list ol li {

        border-bottom: 1px solid #ccc;

        color: #666;

        padding: 12px 15px;

        position: relative;

        text-align: left;

    }



    .pri_table_list li.check.cross::after {

        content: "\f00d";

        font-family: fontawesome;

        font-size: 14px;

        position: absolute;

        right: 50px;

        top: 12px;

        color: indianred;

    }



    .pri_table_list li.check::after {

        content: "\f00c";

        font-family: fontawesome;

        font-size: 14px;

        position: absolute;

        right: 50px;

        top: 12px;

        color: #3498db;

    }



    .pri_table_list button {

        background: #444 none repeat scroll 0 0;

        border: 1px solid #444;

        color: #fff;

        margin-bottom: 25px;

        padding: 10px 35px;

        text-transform: uppercase;

        transition: all 0.4s ease 0s;

        border-radius: 30px;

    }



    .pri_table_list > h3 {

        color: #333;

        font-size: 24px;

        font-weight: 700;

        line-height: 25px;

        padding: 30px 0 20px;

        text-transform: uppercase;

        transition: all 0.4s ease 0s;

    }



    .pri_table_list ol {

        list-style: outside none none;

        margin: 0;

        padding: 0 0 25px;

    }



    .pri_table_list.active {

        transition: all 0.4s ease 0s;

        position: relative;

        overflow: hidden;

    }



.saleon {

    background: #3498db none repeat scroll 0 0;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    left: -26px;

    padding: 2px 25px;

    position: absolute;

    text-transform: uppercase;

    top: 16px;

    transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

}



.pri_table_list > button:hover {

    background-color: #fff;

    border: 1px solid #333;

    color: #333;

}



.active > h3 {

    color: #333;

    transition: all 0.4s ease 0s;

}



.active > button {

    background: #3498db none repeat scroll 0 0;

    border: 1px solid #3498db;

    color: #fff;

    transition: 0.4s;

}



    .active > button:hover {

        background: #333 none repeat scroll 0 0;

        border: 1px solid #333;

        color: #fff;

        transition: 0.4s;

    }



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

# Testimonials

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

.testimonials-area {

    background: rgba(0, 0, 0, 0) url("../images/slider1.jpg") no-repeat fixed center top/cover;

    height: auto;

    width: 100%;

}



.testi-inner {

    position: relative;

    width: 100%;

    height: auto;

    z-index: 1;

}



.testi-overly {

    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: -1;

}



.quate {

    border: 1px dotted #fff;

    border-radius: 50%;

    color: #fff;

    display: inline-block;

    font-size: 24px;

    height: 70px;

    line-height: 70px;

    width: 70px;

}



    .quate:hover {

        color: #fff;

    }



.testi-img img {

    border: 1px dotted rgba(0, 0, 0, 0.05);

    border-radius: 2px;

    height: 80px;

    margin: 0 auto;

    padding: 5px;

    transition: background 0.6s ease-out 0s;

    width: 80px !important;

}



.testi-text p {

    color: #fff;

    font-size: 16px;

    line-height: 1.5em;

    margin: 20px 0;

    letter-spacing: 1px;

}



.testi-text h6 {

    color: #fff;

    font-size: 20px;

}



.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span {

    background: #fff none repeat scroll 0 0;

    display: inline-block;

    height: 8px;

    width: 8px;

    transition: 0.4s;

    border-radius: 50%;

}



.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots {

    bottom: -30px;

    display: block;

    left: 50%;

    margin-left: -20px;

    position: absolute;

}



.testimonial-content {

    margin-bottom: 15px;

}



.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot {

    display: inline-block;

    margin: 0 3px;

}



    .testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span {

        background: #3498db;

    }



.testimonial-carousel .owl-nav,

.testimonial-carousel .owl-dots {

    margin-top: 5px;

    text-align: center;

}



.testimonial-carousel .owl-dot {

    display: inline-block;

    margin: 0 5px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #ddd !important;

}



    .testimonial-carousel .owl-dot.active {

        background-color: #3498db !important;

    }



.testi-text.text-center > h6 {

    color: #fff;

    font-size: 20px;

    font-weight: 700;

    text-transform: uppercase;

}



.guest-rev {

    color: #ddd;

    font-size: 16px;

}



    .guest-rev > a {

        color: #3498db;

        font-size: 14px;

    }



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

# Contact

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

.contact-area {

    height: auto;

    width: 100%;

}



.contact-content {

    padding: 100px;

    background: #000 none repeat scroll 0 0;

}



.contact-content-right {

    padding: 100px;

}



.single-icon i {

    font-size: 24px;

    width: 50px;

    height: 50px;

    border: 1px solid #444;

    line-height: 46px;

    border-radius: 50%;

    margin-bottom: 20px;

}



.single-icon p {

    font-size: 16px;

    line-height: 30px;

}



.contact-icon {

    margin-bottom: 40px;

}



#google-map {

    height: 370px;

    margin-bottom: 20px;

}



.php-email-form .validate {

    display: none;

    color: red;

    margin: 0;

    font-weight: 400;

    font-size: 13px;

}



.php-email-form .error-message {

    display: none;

    text-align: center;

    padding: 15px;

    font-weight: 600;

}



.php-email-form .sent-message {

    display: none;

    color: #fff;

    background: #18d26e;

    text-align: center;

    padding: 15px;

    font-weight: 600;

}



.php-email-form .loading {

    display: none;

    background: #fff;

    text-align: center;

    padding: 15px;

}



    .php-email-form .loading:before {

        content: "";

        display: inline-block;

        border-radius: 50%;

        width: 24px;

        height: 24px;

        margin: 0 10px -6px 0;

        border: 3px solid #18d26e;

        border-top-color: #eee;

        -webkit-animation: animate-loading 1s linear infinite;

        animation: animate-loading 1s linear infinite;

    }



.php-email-form input, .php-email-form textarea {

    border-radius: 0;

    box-shadow: none;

    font-size: 14px;

}



    .php-email-form input::focus, .php-email-form textarea::focus {

        background-color: #3ec1d5;

    }



.php-email-form input {

    padding: 20px 15px;

}



.php-email-form textarea {

    padding: 12px 15px;

}



.php-email-form button[type="submit"] {

    background: #3498db;

    border: none;

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    margin-top: 8px;

    padding: 12px 30px;

    text-transform: uppercase;

    transition: all 0.3s ease 0s;

    border-radius: 30px;

}



    .php-email-form button[type="submit"]:hover {

        background: #5faee3;

    }









@-webkit-keyframes animate-loading {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



@keyframes animate-loading {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



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

# User/Reg

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

.user-reg .info {

    border-top: 3px solid #3498db;

    border-bottom: 3px solid #3498db;

    padding: 30px;

    background: #fff;

    width: 100%;

    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);

}



    .user-reg .info i {

        font-size: 20px;

        color: #3498db;

        float: left;

        width: 44px;

        height: 44px;

        background: #e7f5fb;

        display: flex;

        justify-content: center;

        align-items: center;

        border-radius: 50px;

        transition: all 0.3s ease-in-out;

    }



    .user-reg .info h4 {

        padding: 0 0 0 60px;

        font-size: 22px;

        font-weight: 600;

        margin-bottom: 5px;

        color: #37517e;

    }



    .user-reg .info p {

        padding: 0 0 10px 60px;

        margin-bottom: 20px;

        font-size: 14px;

        color: #6182ba;

    }



    .user-reg .info .email p {

        padding-top: 5px;

    }



    .user-reg .info .social-links {

        padding-left: 60px;

    }



        .user-reg .info .social-links a {

            font-size: 18px;

            display: inline-block;

            background: #333;

            color: #fff;

            line-height: 1;

            padding: 8px 0;

            border-radius: 50%;

            text-align: center;

            width: 36px;

            height: 36px;

            transition: 0.3s;

            margin-right: 10px;

        }



            .user-reg .info .social-links a:hover {

                background: #3498db;

                color: #fff;

            }



    .user-reg .info .email:hover i, .user-reg .info .address:hover i, .user-reg .info .phone:hover i {

        background: #3498db;

        color: #fff;

    }



.user-reg .php-email-form {

    width: 100%;

    border-top: 3px solid #3498db;

    border-bottom: 3px solid #3498db;

    padding: 30px;

    background: #fff;

    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);

}



    .user-reg .php-email-form .form-group {

        padding-bottom: 8px;

    }



    .user-reg .php-email-form .validate {

        display: none;

        color: red;

        margin: 0 0 15px 0;

        font-weight: 400;

        font-size: 13px;

    }



    .user-reg .php-email-form .error-message {

        display: none;

        text-align: left;

        padding: 15px;

        font-weight: 600;

    }



        .user-reg .php-email-form .error-message br + br {

            margin-top: 25px;

        }



    .user-reg .php-email-form .sent-message {

        display: none;

        color: #fff;

        text-align: center;

        padding: 15px;

        font-weight: 600;

    }



    .user-reg .php-email-form .loading {

        display: none;

        background: #fff;

        text-align: center;

        padding: 15px;

    }



        .user-reg .php-email-form .loading:before {

            content: "";

            display: inline-block;

            border-radius: 50%;

            width: 24px;

            height: 24px;

            margin: 0 10px -6px 0;

            border: 3px solid #18d26e;

            border-top-color: #eee;

            -webkit-animation: animate-loading 1s linear infinite;

            animation: animate-loading 1s linear infinite;

        }



    .user-reg .php-email-form input, .contact .php-email-form textarea {

        border-radius: 0;

        box-shadow: none;

        font-size: 14px;

        border-radius: 4px;

    }



        .user-reg .php-email-form input:focus, .contact .php-email-form textarea:focus {

            border-color: #3498db;

        }



    .user-reg .php-email-form input {

        height: 44px;

    }



    .user-reg .php-email-form textarea {

        padding: 10px 12px;

    }



    .user-reg .php-email-form button[type="submit"] {

        background: #3498db;

        border: 0;

        padding: 12px 34px;

        color: #fff;

        transition: 0.4s;

        border-radius: 50px;

    }



        .user-reg .php-email-form button[type="submit"]:hover {

            background: #209dd8;

        }



@-webkit-keyframes animate-loading {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



@keyframes animate-loading {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}





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

# Blog

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

.blog-area {

    height: auto;

    width: 100%;

}



.blog-text h4 a {

    color: #444;

    text-decoration: none;

}



.blog-text h4 {

    color: #444;

    margin-bottom: 15px;

}



.blog-btn {

    border-bottom: 1px dotted #444;

    color: #444;

    text-decoration: none;

}



.blog-btn {

    border-bottom: 1px dotted #444;

    color: #444;

    display: inline-block;

    padding: 0 1px 5px 0;

    position: relative;

    text-decoration: none;

}



.blog-btn {

    position: relative;

}



    .blog-btn::after {

        content: "\f178";

        font-family: fontawesome;

        position: absolute;

        right: -20px;

        top: 1px;

        transition: all 0.3s ease 0s;

    }



    .blog-btn:hover::after {

        right: -30px;

    }



    .blog-btn:hover {

        color: #333;

        text-decoration: none;

    }



.blog_meta span.date_type i {

    margin-left: 5px;

}



.blog-meta span.comments-type {

    margin-left: 5px;

}



.blog-meta span i {

    padding-right: 10px;

}



.blog-content .blog-meta {

    border-bottom: 1px dotted #333;

}



.blog-meta {

    border-bottom: 1px dotted #fff;

    padding: 10px 0;

}



    .comments-type > a, .date-type, .blog-meta span.comments-type {

        color: #333;

        letter-spacing: 1px;

        margin-right: 5px;

    }



    .blog-meta .comments-type i {

        padding-right: 0 !important;

    }



.blog-content-right .comments-type > a, .blog-content-right .date-type, .blog-content-right .blog-meta span.comments-type, .blog-content-right .blog-text p {

    color: #fff;

    letter-spacing: 1px;

}



.single-blog .ready-btn {

    border: 1px solid #444;

    border-radius: 30px;

    color: #444;

    cursor: pointer;

    display: inline-block;

    font-size: 15px;

    font-weight: 500;

    margin-top: 10px;

    padding: 10px 20px;

    text-align: center;

    text-transform: uppercase;

    transition: all 0.4s ease 0s;

}



    .single-blog .ready-btn:hover {

        border: 1px solid #3498db;

        color: #fff;

    }



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

# Blog page

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

.page-area {

    position: relative;

}



.blog-page .banner-box {

    margin-bottom: 40px;

}



.search-option input {

    border: medium none;

    padding: 6px 15px;

    width: 80%;

}



.search-option {

    border: 1px solid #ccc;

    height: 42px;

    margin-bottom: 30px;

}



    .search-option button {

        background: transparent none repeat scroll 0 0;

        border: medium none;

        font-size: 20px;

        padding: 8px 23px;

    }



        .search-option button:hover {

            color: #3498db;

        }



.left-blog h4 {

    border-bottom: 1px solid #ddd;

    color: #444;

    font-size: 17px;

    font-weight: 500;

    margin-bottom: 0;

    padding: 15px 10px;

    text-transform: uppercase;

}



.left-blog {

    background: #f9f9f9 none repeat scroll 0 0;

    margin-bottom: 30px;

    overflow: hidden;

    padding-bottom: 20px;

}



    .left-blog li {

        border-bottom: 1px solid #ddd;

        display: block;

    }



    .left-blog ul li a {

        color: #444;

        display: block;

        font-size: 14px;

        padding: 10px;

        text-transform: capitalize;

    }



.recent-single-post {

    border-bottom: 1px solid #ddd;

    display: block;

    overflow: hidden;

    padding: 15px 10px;

}



.ready-btn {

    border: 1px solid #fff;

    border-radius: 30px;

    color: #fff;

    cursor: pointer;

    display: inline-block;

    font-size: 17px;

    font-weight: 600;

    margin-top: 30px;

    padding: 12px 40px;

    text-align: center;

    text-transform: uppercase;

    transition: all 0.4s ease 0s;

    z-index: 222;

}



    .ready-btn:hover {

        color: #fff;

        background: #3498db;

        border: 1px solid #3498db;

        text-decoration: none;

    }



.post-img {

    display: inline-block;

    float: left;

    padding: 0 5px;

    width: 35%;

}



.pst-content {

    display: inline-block;

    float: left;

    width: 65%;

}



    .pst-content p a:hover, .left-blog ul li a:hover {

        color: #3498db;

    }



.blog-page .single-blog {

    margin-bottom: 40px;

}



.pst-content p a {

    color: #444;

    font-size: 15px;

}



.header-bottom h1, .header-bottom h2 {

    color: #fff;

}



.blog-tags {

    padding: 1px 0;

}



.left-blog li:last-child {

    border-bottom: 0;

}



.popular-tag.left-blog ul li a:hover {

    color: #fff;

}



.popular-tag.left-side-tags.left-blog ul {

    padding: 0 10px;

}



.blog-1 .banner-box {

    margin-bottom: 30px;

}



.left-tags .left-side-tags ul li {

    border-bottom: 0;

}



    .left-tags .left-side-tags ul li a {

        padding: 3px 10px;

        width: auto;

    }



.left-side-tags h4 {

    margin-bottom: 15px;

}



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

# Blog Details

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

.post-information h2 {

    color: #363636;

    font-size: 22px;

    text-transform: uppercase;

}



.post-information {

    padding: 20px 0;

}



    .post-information .entry-meta span a {

        color: #444;

        display: inline-block;

        padding: 10px 0;

    }



.entry-meta span a:hover {

    color: #3498db;

}



.post-information .entry-meta {

    border-bottom: 1px solid #ccc;

    margin: 20px 0;

}



    .post-information .entry-meta span i {

        padding: 0 10px;

    }



.entry-content > p {

    color: #444;

}



.entry-meta > span {

    color: #444;

}



.entry-content blockquote {

    background: #fff none repeat scroll 0 0;

    border-left: 5px solid #3498db;

    font-size: 17.5px;

    font-style: italic;

    margin: 0 0 20px 40px;

    padding: 22px 20px;

}



.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {

    background-color: #3498db;

    border-color: #3498db;

    color: #fff;

    cursor: default;

    z-index: 3;

}



.social-sharing {

    background: #fff none repeat scroll 0 0;

    border: 1px solid #ccc;

    display: block;

    margin: 30px 0;

}



    .social-sharing > h3 {

        display: inline-block;

        font-size: 18px;

        margin: 0;

        padding: 20px 10px;

    }



.sharing-icon {

    display: inline-block;

    float: right;

    padding: 13px 10px;

}



    .sharing-icon a {

        border: 1px solid #444;

        color: #444;

        display: block;

        float: left;

        font-size: 18px;

        height: 34px;

        line-height: 30px;

        margin-left: 10px;

        text-align: center;

        width: 34px;

    }



        .sharing-icon a:hover {

            color: #3498db;

            border: 1px solid #3498db;

        }



.single-blog .author-avatar {

    float: left;

    margin-right: 10px;

}



.single-blog .author-description h2 {

    font-size: 18px;

    margin: 0;

    padding: 0 0 5px;

}



.author-info {

    background: #fff none repeat scroll 0 0;

    float: left;

    margin: 30px 0;

    padding: 15px;

    width: 100%;

}



.single-post-comments {

    margin-bottom: 60px;

    max-width: 650px;

}



.comments-heading h3, h3.comment-reply-title {

    border-bottom: 1px solid #e8e8e9;

    color: #444;

    font-size: 18px;

    margin: 0 0 20px;

    padding: 0 0 5px;

    text-transform: uppercase;

}



.comments-list ul li {

    margin-bottom: 25px;

}



.comments-list-img {

    float: left;

    margin-right: 15px;

}



.comments-content-wrap {

    color: #42414f;

    font-size: 12px;

    line-height: 1;

    margin: 0 0 15px 80px;

    padding: 10px;

    position: relative;

}



.author-avatar {

    display: inline-block;

    float: left;

    width: 10%;

}



.author-description h2 {

    color: #777;

    font-size: 20px;

    text-transform: uppercase;

}



    .author-description h2 a {

        color: #000;

    }



.comments-content-wrap span b {

    margin-right: 5px;

}



span.post-time {

    margin-right: 5px;

}



.comments-content-wrap p {

    color: #909295;

    line-height: 18px;

    margin-bottom: 5px;

    margin-top: 15px;

}



li.threaded-comments {

    margin-left: 50px;

}



.comment-respond {

    margin-top: 60px;

}



span.email-notes {

    color: #42414f;

    display: block;

    font-size: 12px;

    margin-bottom: 10px;

}



.comment-respond p {

    color: #444;

    margin-bottom: 5px;

}



.comment-respond input[type=text], .comment-respond input[type=email] {

    border: 1px solid #e5e5e5;

    border-radius: 0;

    height: 32px;

    margin-bottom: 15px;

    padding: 0 0 0 10px;

    width: 100%;

}



.comment-respond textarea#message-box {

    border: 1px solid #e5e5e5;

    border-radius: 0;

    max-width: 100%;

    padding: 10px;

    height: 130px;

    width: 100%;

}



.comment-respond input[type="submit"] {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    border: 1px solid #3498db;

    border-radius: 20px;

    box-shadow: none;

    color: #444;

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    height: 40px;

    line-height: 14px;

    margin-top: 20px;

    padding: 10px 15px;

    text-shadow: none;

    text-transform: uppercase;

    transition: all 0.3s ease 0s;

    white-space: nowrap;

}



.comments-content-wrap span a {

    color: #000;

}



    .comments-content-wrap span a:hover {

        color: #3498db;

    }



.comment-respond input[type=submit]:hover {

    border: 1px solid #3498db;

    color: #fff;

    background: #3498db;

}



.single-blog .blog-pagination {

    border-top: 1px solid #e5e5e5;

    margin: 0;

    padding-top: 30px;

}

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

# Footer

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

#footer {

    background: #1f2627;

    padding: 0 0 30px 0;

    color: #fff;

    font-size: 14px;

}



    #footer .footer-top {

        background: #2a3336;

        border-bottom: 1px solid #354144;

        padding: 60px 0 30px 0;

    }



        #footer .footer-top .footer-info {

            margin-bottom: 30px;

        }



            #footer .footer-top .footer-info h3 {

                font-size: 24px;

                margin: 0 0 20px 0;

                padding: 2px 0 2px 0;

                line-height: 1;

                font-weight: 700;

            }



            #footer .footer-top .footer-info p {

                font-size: 14px;

                line-height: 24px;

                margin-bottom: 0;

                color: #fff;

            }



        #footer .footer-top .social-links a {

            font-size: 18px;

            display: inline-block;

            background: #354144;

            color: #fff;

            line-height: 1;

            padding: 8px 0;

            margin-right: 4px;

            border-radius: 5px;

            text-align: center;

            width: 36px;

            height: 36px;

            transition: 0.3s;

        }



            #footer .footer-top .social-links a:hover {

                background: #3498db;

                color: #fff;

                text-decoration: none;

            }



        #footer .footer-top h4 {

            font-size: 16px;

            font-weight: 600;

            color: #fff;

            position: relative;

            padding-bottom: 12px;

        }



        #footer .footer-top .footer-links {

            margin-bottom: 30px;

        }



            #footer .footer-top .footer-links ul {

                list-style: none;

                padding: 0;

                margin: 0;

            }



                #footer .footer-top .footer-links ul i {

                    padding-right: 2px;

                    color: #40dcfe;

                    font-size: 12px;

                    line-height: 1;

                }



                #footer .footer-top .footer-links ul li {

                    padding: 10px 0;

                    display: flex;

                    align-items: center;

                }



                    #footer .footer-top .footer-links ul li:first-child {

                        padding-top: 0;

                    }



                #footer .footer-top .footer-links ul a {

                    color: #fff;

                    transition: 0.3s;

                    display: inline-block;

                    line-height: 1;

                }



                    #footer .footer-top .footer-links ul a:hover {

                        color: #27d8fe;

                    }





    #footer .copyright {

        text-align: center;

        padding-top: 20px;

    }





        #footer .copyright a {

            color: #fff;

        }



    #footer .credits {

        padding-top: 10px;

        text-align: center;

        color: #fff;

    }



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

# Responsive

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

@media (min-width: 1920px) {

    .work-right-text {

        padding: 150px 150px;

    }

}



/* Normal desktop :992px. */

@media (min-width: 992px) and (max-width: 1169px) {

    .slider-content {

        padding: 146px 0;

    }



    .work-right-text {

        padding: 40px 0;

    }



        .work-right-text h2 {

            font-size: 18px;

            line-height: 28px;

        }

}



/* Tablet desktop :768px. */

@media (min-width: 768px) and (max-width: 991px) {

    .layer-1-1 h2 {

        font-size: 24px;

    }



    .layer-1-2 h1 {

        font-size: 31px;

        line-height: 38px;

        padding: 0px 30px;

    }



    .tab-menu ul.nav li a {

        padding: 10px 16px;

    }



    .suscribe-input input {

        width: 60%;

    }



    .suscribe-input button {

        width: 40%;

    }



    .team-content.text-center > h4 {

        font-size: 20px;

    }



    .sus-btn {

        margin-left: 0;

    }



    .suscribe-text h3 {

        font-size: 16px;

        padding-right: 20px;

    }



    .work-right-text h5 {

        font-size: 14px;

        line-height: 22px;

    }



    .work-right-text {

        padding: 36px 0;

    }



        .work-right-text h2 {

            font-size: 14px;

            line-height: 22px;

        }



        .work-right-text .ready-btn {

            font-size: 13px;

            padding: 7px 20px;

            margin-top: 5px;

        }



    .single-awesome-portfolio {

        width: 33.33%;

    }



    .widget-product a img {

        display: block;

        float: none;

        width: 100%;

    }



    .widget-product .product-info {

        display: block;

        float: none;

        padding-left: 0;

        width: 100%;

        margin-top: 20px;

    }



    .map-column {

        margin-left: 0;

        padding-right: 40px;

    }



    .post-information .entry-meta {

        font-size: 13px;

        padding: 5px 0;

    }



        .post-information .entry-meta span a {

            padding: 4px 0;

        }



    .service-pic {

        margin-bottom: 30px;

        text-align: center;

    }



    .single-add-itms {

        width: 50%;

    }



    .left-sidebar-title > h4 {

        font-size: 18px;

    }



    .contact-form {

        margin-top: 0px;

    }



    .search-option input {

        width: 67%;

    }

}



/* small mobile :320px. */

@media (max-width: 767px) {

    .slider-area {

        margin-top: 60px;

    }



    .slider-content {

        padding: 80px 0;

    }



        .slider-content h2 {

            font-size: 18px !important;

            line-height: 24px !important;

        }



        .slider-content h1 {

            font-size: 20px !important;

            line-height: 26px !important;

        }



    .layer-1-3 a.ready-btn {

        padding: 8px 15px;

    }



    .section-headline h2 {

        font-size: 30px;

    }



    .well-middle .single-well {

        margin-top: 30px;

    }



    .single-skill {

        margin-bottom: 40px;

    }



    .tab-menu {

        margin-top: 30px;

    }



        .tab-menu ul.nav li a {

            padding: 8px 6px;

        }



    .wellcome-text {

        margin: 0px;

        padding: 70px 0px;

    }



    .subs-feilds {

        width: 100%;

    }



    .suscribe-input input {

        width: 60%;

    }



    .suscribe-input button {

        font-size: 15px;

        padding: 14px 10px;

        width: 40%;

    }



    .section-headline h3 {

        font-size: 25px;

    }



    .well-text > h2 {

        font-size: 18px;

    }



    .well-text p {

        display: none;

    }



    .single-team-member {

        margin-bottom: 30px;

    }



    .service-right {

        width: 100%;

    }



    .service-images:hover .overly-text {

        display: none;

    }



    .portfolio-area {

        padding-top: 0px;

    }



    .project-menu li a {

        padding: 8px 12px;

        margin: 10px 4px;

    }



    .pri_table_list {

        margin-bottom: 30px;

    }



    .single-awesome-project, .portfolio-2 .single-awesome-project {

        width: 100%;

        float: none;

    }



    .single-blog {

        margin-bottom: 30px;

    }



    .sus-btn {

        margin-left: 0;

        margin-top: 30px;

    }



    .contact-form {

        margin-top: 30px;

    }



    .head-team h5 {

        font-size: 22px;

    }



    .footer-content {

        margin-bottom: 30px;

    }



    .header-bottom h1 {

        font-size: 30px;

        margin-bottom: 0;

    }



    .page-area .slider-content {

        padding: 500px 0;

    }



    .search-option input {

        width: 74%;

    }



    .header-bottom h2 {

        font-size: 20px;

        margin-bottom: 0;

    }



    li.threaded-comments {

        margin-left: 0;

    }

}



/* Large Mobile :480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .submitbtn {

        float: none;

        width: 99.8%;

    }



    .icons-bottom ul li a {

        height: 40px;

        line-height: 37px;

        width: 40px;

    }



    .blog-post-dlc ul li {

        padding-left: 20px;

        padding-right: 20px;

    }



    .awesome-portfolio-content .portfolio-2 {

        width: 50%;

    }



    .gallary-details .single-awesome-portfolio {

        width: 50%;

    }



    .tab-menu ul.nav li a {

        padding: 8px 20px;

    }

}



@media (max-width: 575px) {

    .slider-content {

        padding: 0;

    }

}





.online {

    height: 80px;

    width: 80px;

    position: fixed;

    bottom: 160px;

    z-index: 999;

    right: 0px;

}



    .online .apply {

        background-color: #3498db;

        line-height: 80px;

        color: #fff;

        text-align: center;

    }



        .online .apply a {

            color: #fff;

        }



    .online .wx {

        background-color: #3498db;

        height: 80px;

        color: #fff;

        text-align: center;

        border-bottom: 1px solid #ddd;

        padding-top: 20px;

    }



        .online .wx a {

            color: #fff;

        }



.qr_code {

    height: 120px;

    width: 120px;

    position: fixed;

    bottom: 160px;

    z-index: 999;

    right: 80px;

    display: none;

}



    .qr_code img {

        height: 120px;

        width: 120px;

    }