/* ============ Index ==============

------------------------------------------
1. Mega menu
------------------------------------------
2. Margin, Padding.
------------------------------------------
3. Font-size, font-weight, Font Color.
------------------------------------------
4. padding change Bootstrap
------------------------------------------
5. thumnail with overley effect
-----------------------------------------
6. icon boxes
-----------------------------------------
7. testimonial and client
-----------------------------------------
8. social icon effect
----------------------------------------
9. Constructin processing
---------------------------------------
10. get-quote
----------------------------------------
11. Scrolling Parallax background,
    opacity color
----------------------------------------
12.  project-view page and profile
----------------------------------------
13.  shop page
----------------------------------------
14. shop single page image
----------------------------------------
15. Home page box
---------------------------------------
16. about page
--------------------------------------
17. error page coming
--------------------------------------
18. pattern and pattern overlay
-------------------------------------
19. footer big and sub footer
-------------------------------------
20. back to top
-------------------------------------
21. Bootstrap changing
------------------------------------
22. Preload
------------------------------------
23. Heading Title/ Section divider
------------------------------------
24. counter
-----------------------------------
25. buttons
------------------------------------
26. Prograss Bar /charts
------------------------------------
27. FontAwesome icons box /Pricing Box
------------------------------------
28. List Item
-----------------------------------------
29. owl carusel configure
----------------------------------------
32. recent project & porftolo
----------------------------------------
33.  Media Query
----------------------------------------

====================================== */

/* =================================
    Google Fonts changing here
================================= */


/*===================================
                Typhography & font face
========================================*/
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
        url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
        url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    overflow:hidden;
    font-family:'Raleway', serif;
}
html, body {
    overflow-x: hidden;
    width: 100%;
}

h1,h2,h3,
.h1,.h2,.h3{
    line-height: 1.3em;
    letter-spacing: 0.5px;
    color: #24201f;
    margin-bottom: 15px;
    font-weight: 700;
}
h4,h5,h6,
.h4,.h5,.h6{
    line-height: 1.3em;
    letter-spacing: 0.2px;
    color: #24201f;
    margin-bottom: 15px;
    font-weight: 500;
}
h1,.h1{
    font-size: 40px
}
h2,.h2{
    font-size: 30px;
}
h3,.h3{
    font-size: 22px;
}
h4,.h4{
    font-size: 16px;
}
h5,.h5{
    font-size: 14px;
}
h6,.h6{
    font-size: 13px;
}
address{line-height: 24px;}
p{
    margin-bottom: 20px;
}
label{font-weight: normal;}
body .site{
    background: #ffffff;
}
img {
    max-width: 100%;
    height: auto;
}
::-moz-selection {
    background: #ccc;
    text-shadow: none;
}

::selection {
    background: #ccc;
    text-shadow: none;
}
body p, .arrow li{
    color: #666;
}
ol, ul { list-style: none; }
p {
    margin-bottom: 20px;
}

/* ============================
     1.   Piko mega menu
=================================*/
.piko-layout-header:before, .piko-layout-header:after {
    content: " ";
    display: table;
}
.piko-layout-header:after {
    clear: both;
}
.piko-layout-header .piko-topbar:before, .piko-layout-header .piko-topbar:after {
    content: " ";
    display: table;
}
.piko-layout-header .piko-topbar:after {
    clear: both;
}
.piko-layout-header .piko-topbar .piko-top-menu {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.piko-layout-header .piko-topbar .piko-top-menu.piko-pull-left {
    float: left;
}
.piko-layout-header .piko-topbar .piko-top-menu.piko-pull-right {
    float: right;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links {
    float: left;
    display: inline-block;
    height: 55px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li {
    display: inline-block;
}

/*Light top bar*/
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li:last-child {
    /*border-right: 1px solid #fff;*/
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li {
    border-left: 1px solid #000;
    display: inline-block;
    float: left;
    height: 55px;
    line-height: 55px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    width: 44px;
}
/*Dark top bar*/
.piko-layout-header .piko-topbar.dark .piko-top-menu > .piko-icons > li:last-child {
    border-right: 1px solid;
}
.piko-layout-header .piko-topbar.dark .piko-top-menu > .piko-icons > li {
    border-left: 1px solid;
}
.piko-layout-header .piko-topbar.dark .piko-top-menu > .piko-links > li > a:not(.btn),
.piko-layout-header .piko-topbar.dark .piko-top-menu > .piko-links > li > span {
    font-size: 12px;
    padding-right: 5px;
    color: #ffb600;
}
.piko-layout-header .piko-topbar.dark .piko-top-menu > .piko-links > li{
    color: #fff;
}
/*tooltip color*/
.piko-layout-header .piko-topbar .piko-brand .tooltip.bottom .tooltip-inner,
.piko-layout-header .piko-topbar .piko-top-menu .tooltip.bottom .tooltip-inner {
    margin-top: 12px;
    border-radius: 0;
    /*    background-color: #ffb600;*/
}
.piko-layout-header .piko-topbar .piko-brand .tooltip.bottom .tooltip-arrow,
.piko-layout-header .piko-topbar .piko-top-menu .tooltip.bottom .tooltip-arrow {
    margin-top: 12px;
    border-bottom-color: #ffb600;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li > a {
    font-size: 12px;
}
/*social color icon*/
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li > a > i {
    font-size: 16px;
    padding: 6px 6px;
    color: #ccc;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li > span {
    font-size: 10px;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li {
    font-size: 12px;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li > a:active,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li > a:hover,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li > a:focus {
    cursor: pointer;
    text-decoration: none;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li {
    display: inline-block;
    float: left;
    height: 55px;
    line-height: 55px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    padding-left: 10px;
}
/*language*/
.piko-lang{
    margin-left:0;
}
.piko-lang ul> li> a{
    color: #ccc;
}
.piko-lang ul> li> ul> li> a{
    color: #24201f;
}
.piko-lang .white{ color: #fff;}
.piko-lang .dropdown:hover .dropdown-menu {
    display: block;
}
.piko-lang .dropdown-menu {
    border-radius: 0;
    min-width: 160px;
    padding: 0;
    margin: 0;
}
.piko-lang .piko-icons li:first-child{
    border-left: 0px;
}
.piko-lang .dropdown-menu li:first-child{
    border-top: 1px solid #ffb600;
}
/*top menu icon color*/
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn),
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > span {
    font-size: 12px;
    padding-right: 5px;
    color: #666;
}
.piko-layout-header.full-width .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn),
.piko-layout-header.full-width .piko-topbar .piko-top-menu > .piko-links > li > span {
    color: #ccc;
}
/*.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > a:hover i{
    color: #ffb600;
}*/
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn) > i,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > span > i {
    font-size: 14px;
    padding-right: 7px;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):active,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):hover,
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):focus {
    cursor: pointer;
    text-decoration: none;
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-links > li.piko-divider {
    position: relative;
    font-size: 13px;
    top: -1px;
}
.piko-layout-header .piko-navbar:before, .piko-layout-header .piko-navbar:after {
    content: " ";
    display: table;
}
.piko-layout-header .piko-navbar:after {
    clear: both;
}
.piko-layout-header .piko-brand {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    display: inline-block;
}
.piko-layout-header .piko-brand.piko-pull-left {
    float: left;
}
.piko-layout-header .piko-brand.piko-pull-right {
    float: right;
}
.piko-layout-header .piko-brand > .piko-hor-nav-toggler {
    display: none;
}
.piko-layout-header .piko-brand > .piko-search-toggler {
    display: none;
}
.piko-layout-quick-search-shown .piko-layout-header .piko-brand {
    display: none;
}
.piko-layout-header .piko-brand .piko-desktop-logo {
    display: block;
}
.piko-layout-header .piko-brand .piko-desktop-logo-inverse {
    display: none;
}
.piko-layout-header .piko-quick-search {
    display: none;
    padding: 0;
    margin: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    position: relative;
}
.piko-layout-header .piko-quick-search:before, .piko-layout-header .piko-quick-search:after {
    content: " ";
    display: table;
}
.piko-layout-header .piko-quick-search:after {
    clear: both;
}
.piko-layout-quick-search-shown .piko-layout-header .piko-quick-search {
    display: block;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.piko-layout-header .piko-quick-search > .form-control {
    display: block;
    font-size: 22px;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.piko-layout-header .piko-quick-search > .form-control::-ms-clear {
    display: none;
}
.piko-layout-header .piko-quick-search > .form-control:focus, .piko-layout-header .piko-quick-search > .form-control:active {
    box-shadow: none;
}
.piko-layout-header .piko-quick-search > span {
    display: inline-block;
    position: absolute;
    font-size: 36px;
    color: #999;
}
.piko-layout-header .piko-quick-search > span:hover {
    cursor: pointer;
}

@media (min-width: 992px) {
    /* 992px */
    .piko-layout-header.piko-no-border {
        border-bottom: none;
    }
    .piko-layout-header .piko-topbar > .container-fluid {
        padding: 0 50px;
    }
    .piko-layout-header .piko-navbar {
        line-height: 0px;
        background-color: #fff;
    }
    .piko-layout-header .piko-navbar > .container {
        position: relative;
    }
    .piko-layout-header .piko-navbar > .container-fluid {
        position: relative;
        padding: 0 50px;
    }
    .piko-layout-header .piko-brand {
        margin-top: 28px;
    }
    .piko-layout-header .piko-brand .piko-desktop-logo-inverse {
        display: none;
    }
    .piko-layout-header .piko-brand .piko-desktop-logo {
        display: inline-block;
    }
    .piko-layout-header .piko-brand .piko-mobile-logo {
        display: none;
    }
    .piko-layout-header .piko-quick-search > .form-control {
        padding: 10px 0;
        height: 90px;
    }
    .piko-layout-header .piko-quick-search > span {
        top: 45px;
        right: 20px;
    }

    .piko-layout-header-fullscreen.piko-layout-header-static .piko-layout-header,
    .piko-layout-header-fixed .piko-layout-header {
        top: 0;
        position: fixed;
        z-index: 995;
        width: 100%;
    }
    .home-box-wapper.piko-layout-header-fullscreen.piko-layout-header-static .piko-layout-header,
    .home-box-wapper.piko-layout-header-fixed .piko-layout-header {
        width: 1200px;
    }

    .piko-layout-header-fixed .piko-layout-page {
        margin-top: 100px;
    }

    .piko-layout-header-fixed.piko-layout-header-topbar .piko-layout-page {
        margin-top: 144px;
    }

    .piko-layout-header-fullscreen .piko-layout-page,
    .piko-layout-header-fullscreen.piko-layout-header-fixed.piko-layout-header-topbar .piko-layout-page {
        margin-top: 0;
    }

    .piko-page-on-scroll.piko-layout-header-static .piko-layout-header {
        display: none;
    }

    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header {
        height: 65px;
        line-height: 0px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-topbar {
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        display: none;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-brand {
        -webkit-transition: margin 0.2s;
        transition: margin 0.2s;
        margin-top: 15px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-brand .piko-desktop-logo {
        display: none;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-brand .piko-desktop-logo-inverse {
        display: block;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-mega-menu {
        line-height: 0px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-mega-menu .nav.navbar-nav > li > .piko-link {
        -webkit-transition: all 0.35s;
        transition: all 0.35s;
        padding: 23px 15px 21px 15px;
        min-height: 65px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-mega-menu .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        -webkit-transition: all 0.35s;
        transition: all 0.35s;
        padding: 26px 0 24px 15px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-mega-menu .nav.navbar-nav > li > .piko-btn {
        -webkit-transition: all 0.35s;
        transition: all 0.35s;
        margin: 15px 15px 16px 15px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-mega-menu .nav.navbar-nav > li > .piko-btn-icon {
        -webkit-transition: all 0.35s;
        transition: all 0.35s;
        margin: 6px 5px 7px 5px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-quick-search > .form-control {
        font-size: 22px;
        padding: 10px 0;
        height:55px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-quick-search > span {
        font-size: 36px;
        top: 30px;
    }
}
@media (max-width: 991px) {
    /* 991px */
    .piko-layout-header {
        margin: 0;
    }
    .piko-layout-header .piko-topbar {
        margin: 0;
    }
    .piko-layout-header .piko-navbar > .container {
        position: relative;
        padding: 0;
    }
    .piko-layout-header .piko-brand {
        float: none;
        display: block;
        margin: 15px 15px 15px;
    }
    .piko-layout-header .piko-brand .piko-desktop-logo-inverse {
        display: none;
    }
    .piko-layout-header .piko-brand > .piko-hor-nav-toggler {
        display: inline-block;
        background: none;
        border: 0;
        margin: 10px 0 0 0;
        padding: 0;
        float: right;
        outline: none;
    }
    .piko-layout-header .piko-brand > .piko-hor-nav-toggler > .piko-line {
        width: 15px;
        display: block;
        height: 2px;
        padding: 0px;
        margin: 3px 0;
    }
    .piko-layout-header .piko-brand > .piko-hor-nav-toggler > .piko-line:first-child {
        margin-top: 4px;
    }
    .piko-layout-header .piko-brand > .piko-search-toggler {
        display: inline-block;
        background: none;
        border: 0;
        margin: 6px 25px 0 0;
        padding: 0;
        float: right;
        outline: none;
        height: 20px;
        width: 20px;
    }
    .piko-layout-header .piko-brand > .piko-search-toggler > i {
        font-size: 14px;
    }
    .piko-layout-header .piko-brand .piko-desktop-logo {
        display: none;
    }
    .piko-layout-header .piko-quick-search {
        position: relative;
    }
    .piko-layout-header .piko-quick-search > .form-control {
        font-size: 20px;
        padding: 50px 15px 50px 15px;
        height: 65px;
    }
    .piko-layout-header .piko-quick-search > span {
        font-size: 36px;
        right: 18px;
        top: 25px;
    }
    .piko-layout-header .piko-brand.piko-pull-left{
        float: none;
    }
}

/* mobile cart*/
@media (min-width: 992px) and (max-width: 1920px) {
    .mobile.shop-cart {
        display: none !important;
    }
}
@media (min-width: 300px) and (max-width: 991px) {
    .mobile.shop-cart {
        margin-top: 15px;
        left: auto;
        right: 5%;
        min-width: 300px;
        width: 300px;
        position: absolute;
        display: none;
        z-index: 999;
        box-shadow: 0px 3px 6px -3px rgba(0, 0, 0, 0.7);
    }

    .mobile.shop-cart:after {
        bottom: 100%;
        left: 38%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-bottom-color: #ffb600;
        border-width: 8px;
        margin-left: -8px;
    }
    .mobile.shop-cart > li {
        height: 70px;
        border-bottom: 1px solid #f3f3f3;
        padding: 4px 10px 0 20px;
        color: #141414;
        background-color: #fff;
        font-size: 13px;
        color:#666;
    }
    .mobile.shop-cart > li:last-child {
        border-bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 62px;
        padding: 10px 20px;
    }
    .mobile.shop-cart > li:nth-last-child(2) {
        border-bottom: 0;
        height: 40px;
        padding-left: 40px;
        padding: 5px 20px;

    }
    .mobile.shop-cart > li:nth-last-child(2) a{
        font-size: 16px;
    }
    .mobile.shop-cart > li:nth-last-child(2) span {
        margin-left: 20px;
    }
    .mobile.shop-cart > li a.btn-cart{margin-right: 10px;}

    .mobile.shop-cart > li > a {
        padding-top:8px;
        white-space: normal;
        font-size: 15px;
        display: block;
        color: #141414;
    }


    .mobile.shop-cart > li > a:hover {
        background-color: transparent;
        color: #141414;
    }
    .mobile.shop-cart > li > a img{
        float:right;
        width:50px;
        height:50px;
        margin-right: 30px;
    }
    .mobile.shop-cart > li >  span.quantity{
        /*padding:0px 0px 0;*/
    }
    .mobile.shop-cart > li >  span.total{
        float: right;
    }

    .mobile.shop-cart > li > span.product-close{
        float:right;
        padding-right:5px;
        position: relative;
        top:25px;
    }
    .mobile.shop-cart > li > span.product-close > a{
        padding: 4px 3px;
        border: 1px solid #f0f0f0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .mobile.shop-cart > li > span.product-close > a:hover{
        border: 1px solid #ccc;
        color: red;
    }
}
.btn-cart {
    /*color: #ffb600;*/
    padding: 10px 25px;
    background-color: #fff;
    border-radius: 1px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid #ccc;
}

.btn-cart:hover {
    color: #393939;
    border: 1px solid;
}

@media (min-width: 992px) {
    /* 992px */
    .piko-layout-header .piko-navbar .piko-mega-menu {
        line-height: 0px;
        display: inline-block;
        padding: 0;
        margin: 0;
        position: static;

    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-pull-left {
        float: left;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-pull-right {
        float: right;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav {
        line-height: 0px;
        background: none;
        position: static;
        margin: 0;
        padding: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li {
        padding: 0;
        margin: 0;
        float: left;
        position: static;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-menu-type-classic {
        position: relative;
    }
    /*header width*/
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        letter-spacing: 0.05px;
        font-style: normal;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        padding: 41px 15px 35px 15px;
        min-height: 100px;
        font-size: 17px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus {
        background: none;
        color: #222;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        display: inline-block;
        background: none;
        padding: 44px 0 40px 15px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler > .piko-line {
        width: 15px;
        display: block;
        height: 2px;
        padding: 0px;
        margin: 3px 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler > .piko-line:first-child {
        margin-top: 0px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn {
        -webkit-transition: margin 0.2s;
        transition: margin 0.2s;
        margin: 34px 15px 33px 15px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn > i {
        position: relative;
        top: 1px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon {
        background: none;
        outline: none;
        -webkit-transition: margin 0.2s;
        transition: margin 0.2s;
        margin: 24px 5px 18px 5px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:hover {
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon > i {
        position: relative;
        top: 0px;
        font-size: 14px;
        height: 14px;
    }
    .ie .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon > i {
        top: 2px;
    }
    .ie9 .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon > i {
        top: 0px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > .piko-quick-sidebar-toggler,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > .piko-btn-link,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > .piko-link,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > .piko-quick-sidebar-toggler,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > .piko-btn-link,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > .piko-link {
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu {
        width: auto;
        border-radius: 0;
    }
    .container-fluid .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu {
        width: 1170px !important;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-pull-right {
        right: 0;
        left: auto;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-pull-left {
        left: 0;
        right: auto;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu {
        box-shadow: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu > li > h3 {
        letter-spacing: 1px;
        padding-bottom: 15px;
        font-size: 14px;
        margin-left: 25px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu > li > a {
        padding: 8px 25px;
        white-space: normal;
        font-size: 12px;
    }
    /*    shopping cart*/


    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li {
        height: 70px;
        border-bottom: 1px solid #f3f3f3;
        margin: 0 10px;
        color: #666;
        font-size: 13px;
        background-color: #fff;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li:last-child {
        border-bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 62px;
        /*        margin: 0 10px;*/
        margin-left: 20px;
        padding: 10px 0;

    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li:nth-last-child(2) {
        border-bottom: 0;
        height: 40px;
        padding-left: 40px;
        padding: 5px 0;

    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li:nth-last-child(2) a{
        font-size: 16px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li:nth-last-child(2) span {
        margin-left: 20px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li a.btn-cart {
        padding: 8px 25px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > a {
        padding: 8px 0px 8px 15px;
        margin-right:10px;
        white-space: normal;
        font-size: 15px;
        color: #141414;
    }
    /*    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > a:last-child {
            display: inline-block;
        }*/

    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > a:hover {
        background-color: transparent;
        color: #141414;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > a img{
        float:right;
        width:50px;
        height:50px;
        margin-right: 30px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > span.product-close{
        float:right;
        padding-right:5px;
        position: relative;
        top:30px;

    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > span.product-close > a{
        padding: 2px 3px;
        border: 1px solid #f0f0f0;
        font-size: 10px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > span.product-close > a:hover{
        border: 1px solid #ccc;
        color: red;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu.shop-cart > li >  span.quantity{
        padding:8px 15px 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu > li.dropdown-submenu > .dropdown-menu {
        margin-top: -10px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-fullwidth {
        width: 100%;
        left: 0;
        right: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic {
        left: auto;
        right: auto;
        min-width: 235px;
        width: 235px;
    }
    /*size shop cart*/
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic.shop-cart {
        left: auto;
        right: auto;
        min-width: 300px;
        width: 300px;
    }

    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic.piko-pull-right {
        right: 0;
        left: auto;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic .dropdown-menu {
        border-radius: 0;
        min-width: 235px;
        width: 235px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega {
        padding: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu {
        float: none;
        box-shadow: none;
        background: none;
        position: static;
        display: block;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu:before,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu:after {
        content: " ";
        display: table;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu:after {
        clear: both;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .row {
        margin: 0 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .row > div {
        padding: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .row > div:last-child {
        border-right: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .piko-menu-type-inline {
        margin: 10px 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs {
        padding: 20px 40px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li {
        margin: 0 15px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li:first-child {
        margin-left: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li > a {
        margin: 0;
        padding: 7px 0;
        border: 0;
        background: none;
        font-size: 16px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .tab-content {
        padding: 0;
        margin: 0 15px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > li {
        display: table-cell;
        width: 1%;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > li .dropdown-menu.piko-menu-type-inline {
        border-radius: 0;
        margin: 0;
        padding: 15px 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > li > .dropdown-menu {
        float: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > .dropdown-menu {
        display: block;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav .piko-visible-mobile {
        display: none;
    }
    .piko-layout-quick-search-shown .piko-layout-header .piko-navbar .piko-mega-menu {
        display: none;
    }
    .piko-layout-header .piko-navbar .container-fluid > .piko-navbar-wrapper > .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega {
        max-width: 1170px;
        width: 1170px;
        right: 20px;
        left: auto;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu {
        line-height: 0px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 500;

    }
}
@media (max-width: 991px) {

    /* 991px */
    .piko-layout-header .piko-navbar .piko-mega-menu {
        display: inline-block;
        padding: 0;
        margin: 0;
        padding: 0 10px;
        margin-bottom: 20px;
        display: none;
        width: 100%;
        float: none;
        overflow-x: hidden;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-pull-left {
        float: left;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-pull-right {
        float: right;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-shown {
        display: block;
        position: static;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav {
        margin: 0 -15px;
        float: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li {
        display: block;
        float: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        padding: 10px 20px 10px 20px;
        font-size: 15px;
        letter-spacing: 1px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover {
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn {
        margin: 30px 15px 33px 15px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-search-toggler {
        display: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        padding: 10px 20px 10px 20px;
        background: 0;
        border: 0;
        outline: none;
        padding-right: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler > .piko-line {
        width: 15px;
        display: block;
        height: 2px;
        padding: 0px;
        margin: 3px 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler > .piko-line:first-child {
        margin-top: 3px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-open > .dropdown-menu {
        display: block;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-open > .dropdown-menu .dropdown-submenu.piko-open > .dropdown-menu {
        display: block;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-submenu > a:after,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li a.dropdown-toggle:after {
        position: relative;
        float: right;
        display: inline-block;
        font-size: 13px;
        font-family: FontAwesome;
        height: auto;
        margin-top: 2px;
        margin-right: 2px;
        content: "\f105";
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-open.dropdown-submenu > a:after,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-open > a.dropdown-toggle:after,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .piko-open.dropdown-submenu > a:after,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .piko-open > a.dropdown-toggle:after {
        margin-right: 0px;
        content: "\f107";
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu {
        padding-bottom: 0;
        float: none;
        display: none;
        position: static;
        background: none;
        box-shadow: none;
        min-width: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu > li > h3 {
        margin: 0;
        font-size: 15px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li .dropdown-menu > li > a {
        font-size: 14px;
        white-space: normal;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic {
        padding: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic > li > a,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic > .dropdown-submenu > a {
        padding: 10px 20px 10px 40px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic > .dropdown-submenu > .dropdown-menu > li > a {
        padding: 10px 20px 10px 60px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a {
        padding: 10px 20px 10px 80px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a {
        padding: 10px 20px 10px 100px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega {
        padding-top: 0;
        min-width: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu {
        display: block;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu.piko-menu-type-inline {
        margin-left: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu.piko-menu-type-inline > li > h3,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .dropdown-menu.piko-menu-type-inline > li > a {
        padding: 10px 20px 10px 40px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .dropdown-submenu > a {
        padding: 10px 20px 10px 40px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .dropdown-submenu > .dropdown-menu {
        display: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .dropdown-submenu > .dropdown-menu .dropdown-menu > li > h3,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .dropdown-submenu > .dropdown-menu .dropdown-menu > li > a {
        padding: 10px 20px 10px 60px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .dropdown-submenu.piko-open > .dropdown-menu {
        display: block;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav .piko-visible-desktop {
        display: none;
    }
}


/* ============================
=== piko dark moblie header ===
============================ */

@media (max-width: 991px) {
    .piko-layout-header.piko-layout-header-dark-mobile {
        background: #141414;
        border-bottom: 0;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-topbar {
        border-bottom: 1px solid #444;
        background: #24201f;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-hor-nav-toggler {
        margin-top: 5px;
        display: inline-block;
        /*    border: 1px solid rgba(230, 230, 230, 0.4);
            padding: 3px 7px 4px 7px;*/
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-hor-nav-toggler > .piko-line {
        background: #e6e6e6;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-hor-nav-toggler:hover {
        border-color: white;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-hor-nav-toggler:hover > .piko-line {
        background: white;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-search-toggler {
        display: inline-block;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-search-toggler > i {
        color: #e6e6e6;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-brand > .piko-search-toggler:hover > i {
        color: white;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-quick-search > .form-control {
        color: #666;
        padding: 10px 0px 0 10px;
        height: 55px;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-quick-search > .form-control::-moz-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-quick-search > .form-control:-moz-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-darkt-mobile .piko-quick-search > .form-control:-ms-input-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-quick-search > .form-control::-webkit-input-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-dark-mobile .piko-quick-search > span {
        color: #999;
        top: 2px;
        right: 20px;
    }


}

/* ============================
=== piko light moblie header ===
============================ */
@media (max-width: 991px) {
    .piko-layout-header.piko-layout-header-light-mobile {
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-topbar {
        border-bottom: 1px solid #edf4f6;
        background: #24201f;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-hor-nav-toggler {
        margin-top: 5px;
        display: inline-block;
        /*    border: 1px solid #333;
            padding: 3px 7px 4px 7px;*/
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-hor-nav-toggler > .piko-line {
        background: #666;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-hor-nav-toggler:hover {
        border-color: #000;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-hor-nav-toggler:hover > .piko-line {
        background: #333;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-search-toggler {
        display: inline-block;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-search-toggler > i {
        color: #141414;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-search-toggler:hover > i {
        color: #420a1f;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-quick-search > .form-control {
        color: #666;
        padding: 10px 0px 0 10px;
        height: 55px;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-quick-search > .form-control::-moz-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-quick-search > .form-control:-moz-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-quick-search > .form-control:-ms-input-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-quick-search > .form-control::-webkit-input-placeholder {
        color: #ccc;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-quick-search > span {
        color: #999;
        top: 2px;
        right: 20px;
    }
}

/*piko menu header version light 02*/
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-02 {
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
    }
    .piko-layout-header.piko-layout-header-02 .piko-topbar {
        border-bottom: 1px solid #edf4f6;
        background: #f4f4f4;
    }
    .piko-layout-header.piko-layout-header-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon,
    .piko-layout-header.piko-layout-header-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        color: #666;
    }
    .piko-layout-header.piko-layout-header-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:hover,
    .piko-layout-header.piko-layout-header-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:focus,
    .piko-layout-header.piko-layout-header-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
    .piko-layout-header.piko-layout-header-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus {
        color: #666;
    }
}

/*piko menu header version dark 02*/
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-dark-02 {
        /*background: #1b273d;*/
        border-bottom: none;
        box-shadow: 0 8px 6px -6px black;
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-topbar {
        border-bottom: 1px solid #edf4f6;
        background: #f4f4f4;
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        color: #fff;
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:hover,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:focus,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus {
        color: #f4f4f4;
    }
}


/*piko menu header full width version light 04*/
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-04 {
        background: transparent;
        /*box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);*/

    }
    .piko-layout-header.piko-layout-header-04 .piko-topbar {
        border-bottom: 0;
        background: #24201f;
    }
    .piko-layout-header.piko-layout-header-04 .piko-topbar.dark {
        border-bottom: 1px solid;
    }
    .piko-layout-header.piko-layout-header-04 .piko-topbar.border-white {
        border-bottom: 1px solid #f3f3f3;
        background-color: #f3f3f3;
    }
    .piko-layout-header .piko-topbar.border-white .piko-top-menu > .piko-icons > li > a > i{
        color:#666;
    }
    .piko-layout-header .piko-topbar.border-white .piko-top-menu > .piko-icons > li{
        border-left: 1px solid #ddd;
    }

    .piko-layout-header.piko-layout-header-04 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon,
    .piko-layout-header.piko-layout-header-04 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        color: #141414;
    }
    .piko-layout-header.piko-layout-header-04 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:hover,
    .piko-layout-header.piko-layout-header-04 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:focus,
    .piko-layout-header.piko-layout-header-04 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
    .piko-layout-header.piko-layout-header-04 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus {
        color: #24201f;
    }
    /*menu shadow*/
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header.piko-layout-header-04 .piko-navbar{
        background-color: #fff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    }
}
/*piko menu header fullwidth version dark 05*/
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-dark-05 {
        background-color: rgba(27, 39, 61, 0.1);
        background-color: transparent;
        border-bottom: none;
    }
    .piko-layout-header.piko-layout-header-dark-05 .piko-topbar {
        border-bottom: 1px solid #edf4f6;
        background: transparent;
    }
    .piko-layout-header.piko-layout-header-dark-05 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon,
    .piko-layout-header.piko-layout-header-dark-05 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        color: #999;
    }
    .piko-layout-header.piko-layout-header-dark-05 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:hover,
    .piko-layout-header.piko-layout-header-dark-05 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:focus,
    .piko-layout-header.piko-layout-header-dark-05 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
    .piko-layout-header.piko-layout-header-dark-05 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus {
        color: #999;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header.piko-layout-header-dark-05{
        background-color: #141414;
    }
}

/*header dark 02*/
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-dark-02 {
        /*        background: #141414;*/
        border-bottom: none;
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-topbar {
        border-bottom: 1px solid #2c2c2c;
        /*        background: #24201f;*/
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-topbar.dark {
        border-bottom: 0px solid #2c2c2c;
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        color: #fff;
    }
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:hover,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon:focus,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
    .piko-layout-header.piko-layout-header-dark-02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:focus {
        color: #f4f4f4;
    }
}



/*header left light*/
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-03 {
        background: #fff;
        border-bottom: 0;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar {
        border-bottom: 1px solid #edf4f6;
        background: #24201f;
    }
    /*dark verstion*/
    .piko-layout-header.piko-layout-header-03 .piko-topbar.dark {
        border-bottom: 1px solid #141414;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar.two {
        background: #f3f3f3;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn),
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > span,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn),
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > span {
        color: #aeb8c2;
    }
    .piko-layout-header .piko-topbar.black .piko-top-menu > .piko-icons > li > a:not(.btn),
    .piko-layout-header .piko-topbar.black .piko-top-menu > .piko-icons > li > span,
    .piko-layout-header .piko-topbar.black .piko-top-menu > .piko-links > li > a:not(.btn),
    .piko-layout-header .piko-topbar.black .piko-top-menu > .piko-links > li > span {
        color: #666;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn) > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > span > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn) > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > span > i {
        background: none;
        color: #c1ced7;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn):active,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn):hover,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn):focus,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):active,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):hover,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):focus {
        color: #aeb8c2;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn):active > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn):hover > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-icons > li > a:not(.btn):focus > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):active > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):hover > i,
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn):focus > i {
        background: none;
        color: #ffb600;
    }

    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar {
        width: 100%;
        float: none;
        display: block;
        /*    border-bottom: 1px solid #edf4f6;*/
        box-shadow: 0px 1px 2px 0px rgba(179, 179, 179, 0.3);


    }
    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu {
        float: none;
        width: 100%;
        display: block;
    }
    .piko-layout-quick-search-shown .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu {
        display: none;
    }
    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu > .nav.navbar-nav {
        width: 100%;
        display: inline-block;
    }
    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        padding-right: 10px;
    }
    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-search-toggler {
        padding-right: 5px;
    }
    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-search-toggler-wrapper,
    .piko-layout-header.piko-layout-header-03.piko-navbar-fluid .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-quick-sidebar-toggler-wrapper {
        float: right;
    }
}
.piko-layout-header.piko-layout-header-03 .piko-topbar {
    padding: 24px 0;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand {
    float: left;
    margin: 0px;
    padding: 9px 0 0 0;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand.menu {
    padding: 0;
}
.piko-layout-quick-search-shown .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand {
    display: block;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-logo {
    display: inline-block;
    position: relative;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-logo:after {
    top: -2px;
    position: absolute;
    right: -22px;
    content: "";
    width: 1px;
    background: #dfe4e8;
    height: 32px;
    display: inline-block;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand.menu > .piko-logo:after {
    width: 0px;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-icons {
    float: right;
    display: inline-block;
    padding: 0;
    margin: 0 0 0 40px;
    list-style: none;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-icons > li {
    display: inline-block;
    padding: 3px 3px 5px 3px;
}

.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-icons > li > a > i {
    color: #999;
    font-size: 16px;
    padding: 4px;
}
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu {
    float: right;
}
/*font size change top menu*/
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li {
    padding-left: 7px;
    padding-right: 7px;
}
/*.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > a:not(.btn) > i,
.piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu > .piko-links > li > span > i {
}*/


.piko-address {
    min-width: 200px;
    height: 40px;
    font-size: 14px;
    color: #f3f3f3;
    padding-right: 10px;
    display: inline-block;
    margin-top: 5px;
    font-weight: 700;
    white-space: nowrap;
}

.piko-address span{
    font-size: 13px;
    color: #ccc;
    font-weight: 600;
}
.piko-address  i{
    width: 40px;
    height: 40px;
    float:left;
    line-height:36px;
    text-align: center;
    font-size:25px;
    /*    color: #ffb600;*/
    margin-right:10px;
    border-right: 1px solid #ccc;
}




/*menu center */
@media (min-width: 992px) {
    .piko-layout-header.piko-layout-header-03 .piko-navbar {
        line-height: 0px;
        box-shadow: 0px 1px 0px 0px rgba(204,204,204,0.3);
    }
    /*  menu header background color*/
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu {
        float: none;
        display: block;
        text-align: center;
        line-height: 0px;
    }
    .piko-layout-quick-search-shown .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu {
        display: none;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav {
        line-height: 0px;
        float: none;
        display: inline-block;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link {
        padding: 25px 25px 22px 25px;
        min-height: 67px;
        color: #141414;
    }
    /*    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover {
            color: #222;
        }*/
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:first-child > .piko-link {
        padding-left: 5px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        padding: 28px 25px 15px 25px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn {
        margin: 18px 25px 7px 25px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon {
        margin: 8px 10px 0px 10px;
        color: #999;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.social {
        margin: 10px 0px 0px 0px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.social:hover {
        color: #ffb600;
    }

    .piko-layout-header.piko-layout-header-03 .piko-quick-search > .form-control {
        line-height: 57px;
        height: 57px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-quick-search > span {
        top: 30px;
        right: 14px;
    }

    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header.piko-layout-header-03 {
        height: 67px;
    }
    .piko-page-on-scroll.piko-layout-header-fixed .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.cart{
        padding-bottom: 8px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.cart i,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.cart i{
        color: #141414;
        font-size: 25px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.cart span,
    .piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-btn-icon.cart span{
        margin: -30px 0 0 -5px;
    }
    .piko-layout-header .piko-navbar .piko-brand > .cart,
    .piko-layout-header .piko-topbar .piko-brand > .cart{
        display: none;
    }
}
@media (max-width: 991px) {

    .piko-layout-header.piko-layout-header-03 .piko-topbar {
        padding: 0;
        border-bottom: 1px solid #f4f4f4;
        /*background-color: #24201f;*/
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar.dark {
        padding: 0;
        border-bottom: 1px solid;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu {
        float: none;
        display: block;
        padding: 0;
        /*text-align: right;*/
        background-color: #24201f;
        padding-bottom: 5px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar.dark .piko-top-menu {
        /*text-align: right;*/
        border-bottom: 1px solid;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu:before, .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu:after {
        content: " ";
        display: table;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu:after {
        clear: both;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu .piko-links {
        float: right;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-top-menu .piko-links > li:last-child {
        padding-right: 0;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand {
        width: 100%;
        display: block;
        float: none;
        margin: 10px 0 20px 0;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand:before, .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand:after {
        content: " ";
        display: table;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand:after {
        clear: both;
    }
    .piko-layout-quick-search-shown .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand {
        display: none;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-logo {
        float: left;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-icons {
        float: left;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-hor-nav-toggler {
        float: right;
        position: relative;
        top: 2px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-hor-nav-toggler > .piko-line {
        background: #aeb8c2;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-hor-nav-toggler:hover {
        border-color: #748596;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-hor-nav-toggler:hover > .piko-line {
        background: #748596;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-search-toggler {
        float: right;
        position: relative;
        top: 8px;
        margin-left: 40px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-search-toggler > i {
        color: #aeb8c2;
    }
    .piko-layout-header .piko-navbar .piko-brand > .cart,
    .piko-layout-header .piko-topbar .piko-brand > .cart{
        float: right;
        position: relative;
        top: 5px;
    }
    .piko-layout-header .piko-navbar .piko-brand > .cart > a i,
    .piko-layout-header .piko-topbar .piko-brand > .cart > a i {
        color: #141414;
        font-size: 25px;
        padding-right: 5px;
    }
    .piko-layout-header .piko-navbar .piko-brand > .cart > a span,
    .piko-layout-header .piko-topbar .piko-brand > .cart > a span{
        margin: -20px 10px 0 -10px;

    }

    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-search-toggler:hover > i {
        color: #748596;
    }
    .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu {
        margin-bottom: 0px;
    }
    .piko-layout-quick-search-shown .piko-layout-header.piko-layout-header-03 .piko-navbar .piko-mega-menu {
        display: none;
    }
    .piko-layout-header.piko-layout-header-03 .piko-quick-search {
        margin-top: 0;
    }

    .piko-layout-header.piko-layout-header-03 .piko-quick-search > .form-control {
        color: #666;
        padding: 0 0 0 10px;
        height: 55px;
        /*    border-bottom: 1px solid #f4f4f4;*/
    }

    .piko-layout-header.piko-layout-header-03 .piko-quick-search > span {
        top: 5px;
        right: 20px;
    }
}
@media (max-width: 480px) {
    /* 991px */
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-hor-nav-toggler {
        top: -2px;
    }
    .piko-layout-header.piko-layout-header-03 .piko-topbar .piko-brand > .piko-search-toggler {
        top: 2px;
    }
}

/* ============================
=== piko dark mega menu ===
============================ */
@media (min-width: 992px) {
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu {
        background: #24201f;
        box-shadow: none;
        border: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu {
        border-radius: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li > h3::after {
        border-bottom: 1px solid #ffb600;
        bottom: -1px;
        content: "";
        display: inline-block;
        left: 0;
        position: absolute;
        width: 70px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li > h3{
        border-bottom: 1px solid #999;
        color: #999;
        margin-bottom: 12px;
        margin-top: 5px;
        position: relative;
    }

    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li > a {
        color: #fff;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li > a:hover, .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li > a:focus {
        background: none;
        color: #ffb600;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li.piko-active > a,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li:hover > a {
        background: #ffb600;
        color: #141414;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic .dropdown-menu {
        background: #2c3137;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .row > div {
        border-right: 1px solid #191717;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs {
        border-bottom: 1px solid #191716;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li > a {
        color: #cbd2d9;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li:hover > a {
        color: #ffffff;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li.active {
        border-bottom: 1px solid #191716;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li.active > a {
        color: #ffffff;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > li .dropdown-menu.piko-menu-type-inline {
        border-right: 1px solid #191717;
    }
}

/* ============================
=== piko dark moblie mega menu ===
============================ */
@media (max-width: 991px) {
    /* 991px */
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile {
        background: #24201f;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li > .piko-link {
        border-bottom: 1px solid #1a1716;
        color: #ebedf2;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li > .piko-link:focus, .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li > .piko-link:hover {
        background: none;
        color: #ebedf2;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li > .piko-quick-sidebar-toggler > .piko-line {
        background-color: white;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li > .piko-quick-sidebar-toggler:hover > .piko-line {
        background-color: #ff6b57;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li.piko-active > .piko-link, .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li:hover > .piko-link {
        color: #ff6b57;
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li > h3 {
        color: #cbd2d9;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li > a {
        border-bottom: 1px solid #1a1716;
        color: #98a2ac;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li > a:focus,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li > a:hover {
        color: #98a2ac;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li.piko-active > a,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li:hover > a {
        background: none;
        color: #ffb600;
    }
}

/* ============================
=== piko light mega menu ===
============================ */
@media (min-width: 992px) {
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu {
        background: #fff;
        box-shadow: 0px 3px 9px -5px rgba(0, 0, 0, 0.25);
        border: 1px solid #f3f3f3;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu {
        border-radius: 0;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li > h3:after {
        border-bottom: 1px solid #999;
        bottom: -1px;
        content: "";
        display: inline-block;
        left: 0;
        position: absolute;
        width: 70px;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li > h3{
        border-bottom: 1px solid #f2f2f2;
        color: #666;
        margin-bottom: 12px;
        margin-top: 5px;
        font-size:13px;
        position: relative;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li > a {
        color: #222;
        background-color: #fff;
    }

    /*shop cart*/
    /*    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu.shop-cart > li > a {
            color: #141414;
            background-color: #fff;
            border-bottom: 1px solid #f3f3f3;
            margin: 0 15px;
        }*/
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li > a:hover,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li > a:focus {
        background: none;
        color: #383e45;
    }
    /*  background color*/
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li.piko-active > a,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu > li:hover > a {
        /*background: #ffb600;*/
        color: #fff;
    }
    /*shop cart*/
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu.shop-cart > li.piko-active > a,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li .dropdown-menu.shop-cart > li:hover > a {
        background: transparent;
        color: #141414;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-classic .dropdown-menu {
        background: #f7f8f9;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > .row > div {
        border-right: 1px solid #f2f2f2;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs {
        border-bottom: 1px solid #f2f2f2;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li > a {
        color: #434b53;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li:hover > a {
        color: #000000;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li.active {
        border-bottom: 1px solid #000000;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega .nav.nav-tabs > li.active > a {
        color: #000000;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light > .nav.navbar-nav > li > .dropdown-menu.piko-menu-type-mega > li .dropdown-menu.piko-menu-type-inline {
        border-right: 1px solid #f9f9f9;
    }
}
/* ============================
=== piko light moblie mega menu ===
============================ */
@media (max-width: 991px) {
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile {
        background: #fff;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li > .piko-link {
        border-bottom: 1px solid #f4f4f4;
        color: #666;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li > .piko-link:focus,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li > .piko-link:hover {
        background: none;
        color: #ebedf2;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li > .piko-quick-sidebar-toggler {
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li > .piko-quick-sidebar-toggler > .piko-line {
        background-color: white;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li > .piko-quick-sidebar-toggler:hover > .piko-line {
        background-color: #fff;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li.piko-active > .piko-link,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li:hover > .piko-link {
        color: #ff6b57;
        background: none;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li .dropdown-menu > li > h3 {
        color: #cbd2d9;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li .dropdown-menu > li > a {
        border-bottom: 1px solid #f9f9f9;
    }
    /*  background color*/
    /*    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li .dropdown-menu > li.piko-active > a,
        .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li .dropdown-menu > li:hover > a {
            background-color: transparent;
            color: #45bf55;
        }*/
}
/* Dropdown submenu for Bootsrap */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 5px;
    left: 100%;
    margin-top: -03px;
    margin-left: 1px;
}
.dropdown-submenu > .dropdown-menu.piko-pull-left {
    left: -100%;
    margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.dropup .dropdown-submenu > .dropdown-menu {
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -2px;
}

.dropdown-menu {
    border: none;
}
.piko-menu-text{
    color:#999;
    line-height: 20px;
}
.piko-menu-text h3{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 10px;
    font-size: 17px;
    letter-spacing: 1px;
}
.piko-menu-text p{
    padding-left: 10px;
}


.piko-menubg-right {
    margin-top:0;
    padding:15px 20px;
    background:url(../../images/logo/menubg.png) bottom right no-repeat;
    display: block;
    text-align: left;
    text-transform: none;
    width: 100%;
    z-index: 111111;
}

/*
.piko-menubg-left {
    margin-top:0;
    padding:15px 20px;
    background:url(../../images/logo/menubg-left.png) bottom right no-repeat;
    background:url(../../images/logo/menubg-left.png) bottom right no-repeat;
    display: block;
    text-align: left;
    text-transform: none;
    width: 100%;
    z-index: 111111;
}
*/
@media (max-width: 991px) {
    .piko-menubg-right {
        background:none;
    }
    .piko-menubg-left {
        background:none;
    }
}

.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler),
.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler),
.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler),
.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler) {
    position: relative;
}

/*menu hover effect*/
@media (min-width: 991px){
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li> a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        /*    background: #ffb600;*/
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.3s, height 0.3s;
        transition: opacity 0.3s, height 0.3s;
    }
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li> a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        /*    background: #ffb600;*/
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.3s, height 0.3s;
        transition: opacity 0.3s, height 0.3s;

    }
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover-2 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after{
        height: 4px;
    }

    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after{
        opacity: 1;
    }
    .piko-page-on-scroll .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-page-on-scroll .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-page-on-scroll .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-page-on-scroll .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before {
        top: 0;
        -webkit-transition: 0.2s;
        transition: 0.2s;
    }
    .piko-page-on-scroll .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-page-on-scroll .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-page-on-scroll .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-page-on-scroll .piko-layout-header.piko-hover02 .piko-navbar .piko-mega-menu > .nav.navbar-nav > li.piko-active > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before {
        bottom: 0;
        -webkit-transition: 0.2s;
        transition: 0.2s;
    }
}

@media (max-width: 991px){
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li> a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):before,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after,
    .piko-layout-header.piko-hover .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > a:not(.btn):not(.piko-btn-icon):not(.piko-quick-sidebar-toggler):after {
        display: none;

    }
}

/*hamburger menu*/
#piko-hamburger, #piko-hamburger2 {
    width: 30px;
    height: 25px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#piko-hamburger span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #ccc;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
#piko-hamburger2 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #141414;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#piko-hamburger span:nth-child(1), #piko-hamburger2 span:nth-child(1) {
    top: 0px;
}

#piko-hamburger span:nth-child(2), #piko-hamburger2 span:nth-child(2) {
    top: 10px;
}

#piko-hamburger span:nth-child(3), #piko-hamburger2 span:nth-child(3) {
    top: 20px;
}

#piko-hamburger.open span:nth-child(1), #piko-hamburger2.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

#piko-hamburger.open span:nth-child(2), #piko-hamburger2.open span:nth-child(2) {
    opacity: 0;
    left: -20px;
}

#piko-hamburger.open span:nth-child(3), #piko-hamburger2.open span:nth-child(3){
    top: 10px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/*joson live search*/
.results {list-style-type: none; padding: 0; padding-left: 30px; padding-right: 30px; background-color:#f4f4f4; line-height: 20px; max-height: 750px; overflow:auto;}
/*.search {border: 1px solid #aaa; border-radius: 3px; font-size: 18px; height: 30px; width: 100%;}*/


/*============================
2   Margin Top, Bottom
============================= */
.margin-o-auto{
    margin: 0 auto;
}
.margin-t0{
    margin-top: 0;
}
.margin-t5{
    margin-top: 5px;
}
.margin-15{
    margin: 15px;
}
.margin-t10 {
    margin-top: 10px;
}
.margin-t15 {
    margin-top: 15px;
}
.margin-t20 {
    margin-top: 20px;
}
.margin-t25 {
    margin-top: 25px;
}
.margin-t30 {
    margin-top: 30px;
}
.margin-t40 {
    margin-top: 40px;
}
.margin-t50 {
    margin-top: 50px;
}
.margin-t60 {
    margin-top: 60px;
}
.margin-t73 {
    margin-top: 73px;
}
.margin-t70 {
    margin-top: 75px;
}
.margin-t80 {
    margin-top: 80px;
}
.margin-t100 {
    margin-top: 100px;
}
/*widthout top menu*/
.margin-t101 {
    margin-top: 100px;
}
.margin-t120 {
    margin-top: 120px;
}
.margin-t150 {
    margin-top: 145px;
}
.margin-b5{
    margin-bottom: 5px;
}
.margin-b10 {
    margin-bottom: 10px;
}
.margin-b15 {
    margin-bottom: 15px;
}
.margin-b20 {
    margin-bottom: 20px;
}
.margin-b25 {
    margin-bottom: 25px;
}
.margin-b30 {
    margin-bottom: 30px;
}
.margin-b40 {
    margin-bottom: 40px;
}
.margin-b50 {
    margin-bottom: 50px;
}
.margin-b60 {
    margin-bottom: 60px;
}
.margin-b80 {
    margin-bottom: 80px;
}
.margin-b100 {
    margin-bottom: 100px;
}
.margin-b120 {
    margin-bottom: 120px;
}
.margin-b150 {
    margin-bottom: 150px;
}

/* =======================
2.1    Margin-right
====================== */
.margin-r10 {
    margin-right: 10px;
}
.margin-r15 {
    margin-right: 15px;
}
.margin-r40 {
    margin-right: 40px;
}
.margin-40 {
    margin-left: 40px;
}
margin-left-10 {
    margin-left: 10px;
}

/* =========================
 2.3   Margin Top Bottom
============================ */
.margin-tb50{
    margin: 50px 0;
}
.margin-tb70{
    margin: 70px 0;
}
.margin-tb100{
    margin: 100px 0;
}
.margin-tb15 a{
    margin: 15px 0;
    display: table;
}

/* =========================
2.4   Padding top Bottom
============================ */
.padding-t5 {
    padding-top: 5px;
}
.padding-t10 {
    padding-top: 10px;
}
.padding-t15 {
    padding-top: 15px;
}
.padding-20 {
    padding: 20px;
}
.padding-t20{
    padding-top: 20px;
}
.padding-t25{
    padding-top: 25px;
}
.padding-t30{
    padding-top: 30px;
}
.padding-t40{
    padding-top: 40px;
}
.padding-t50{
    padding-top: 50px;
}
.padding-t60{
    padding-top: 60px;
}
.padding-t70{
    padding-top: 70px;
}
.padding-t100{
    padding-top: 100px;
}
.padding-b10 {
    padding-bottom: 10px;
}
.padding-b30 {
    padding-bottom: 30px;
}
.padding-b50 {
    padding-bottom: 50px;
}
.padding-b70 {
    padding-bottom: 70px;
}
.padding-b100 {
    padding-bottom: 100px;
}
.padding-b150 {
    padding-bottom: 150px;
}

/* ============================
2.5  padding left, right, all
=============================== */
.padding-5 {
    padding: 5px;
}
.padding-10 {
    padding: 10px;
}
.padding-left-10 {
    padding-left: 10px;
}
.padding-right-10 {
    padding-right: 10px;
}
.padding-lr15 {
    padding-left: 15px;
    padding-right: 15px;
}
.padding-tb50{
    padding: 50px 0;
}
.padding-tb25{
    padding: 25px 0;
}
.padding-tb100{
    padding: 100px 0;
}
/*full-width content*/
.margin-tb25{
    margin: 25px 0;
}
.padding-tb70{
    padding: 65px 0 80px;
}
/*for heading*/
.padding-tb75{
    padding: 70px 0 100px;
}
.piko-title4.padding-tb70 h3{
    margin-bottom: 30px;
}
.piko-title4.padding-tb70 p:last-of-type{
    margin-bottom: 30px;
    position: relative;
}


/* =================
3.1 font size
=================== */
.margin-lr8{
    margin: 0 8px 0 7px;
}
/* =================
3.1 font size
=================== */
.font-10 {
    font-size: 10px;
}
.font-11 {
    font-size: 11px;
}
.font-12 {
    font-size: 12px;
}
.font-13 {
    font-size: 13px;
}
.font-14 {
    font-size: 14px;
}
.font-15 {
    font-size: 15px;
}
.font-16 {
    font-size: 16px;
}
.font-17 {
    font-size: 17px;
}
.font-18 {
    font-size: 18px;
}
.font-19 {
    font-size: 19px;
}
.font-20 {
    font-size: 20px;
}
.font-25 {
    font-size: 25px;
}
.font-30 {
    font-size: 30px;
}
.font-35 {
    font-size: 35px;
}
.font-40 {
    font-size: 40px;
}
.font-45 {
    font-size: 45px;
}
.font-50 {
    font-size: 50px;
}
.font-60 {
    font-size: 60px;
}
.font-70 {
    font-size: 70px;
}
.font-75 {
    font-size: 75px;
}
.font-80 {
    font-size: 80px;
}
.font-90 {
    font-size: 90px;
}
.font-100 {
    font-size: 100px;
}
.font-110 {
    font-size: 110px;
}
.font-120 {
    font-size: 120px;
}

/* =================
 3.2   font weight
=================== */
.font-thin {
    font-weight: 300 ;
}
.font-slim {
    font-weight: 400
}
.font-sbold {
    font-weight: 500;
}
.font-bold {
    font-weight: 600;
}
.font-w700 {
    font-weight: 700;
}
.font-w800{
    font-weight: 800;
}
.font-w900{
    font-weight: 900;
}
.font-uppercase {
    text-transform: uppercase;
}
/* =================
 3.3  font color
=================== */
.font-white, .white{color:#ffffff;}
.gray{color: #ccc;}
.gray2{color: #999;}
/*=============================
    3.4 slider title
==============================*/

.slide-title-65{
    font-size:65px ;
    font-weight:900;
    color:#ffffff;
    text-decoration:none;
    background-color:transparent;
    text-shadow:0px 0px 7px rgba(0, 0, 0, 0.25);
    border-width:0px;
    border-color:rgb(0, 0, 0);
    border-style:none;
}
.slide-title-50{
    font-size:50px ;
    font-weight:900;
    color:#ffffff;
    text-decoration:none;
    background-color:transparent;
    text-shadow:0px 0px 7px rgba(0, 0, 0, 0.25);
    border-width:0px;
    border-color:rgb(0, 0, 0);
    border-style:none;
}
.slide-title-40{
    font-size:40px ;
    font-weight:900;
    color:#ffffff;
    text-decoration:none;
    background-color:transparent;
    text-shadow:0px 0px 7px rgba(0, 0, 0, 0.25);
    border-width:0px;
    border-color:rgb(0, 0, 0);
    border-style:none;
}
.slide-title-30{
    font-size:30px ;
    font-weight:700;
    color:#ffffff;
    text-decoration:none;
    background-color:transparent;
    text-shadow:0px 0px 7px rgba(0, 0, 0, 0.25);
    border-width:0px;
    border-color:rgb(0, 0, 0);
    border-style:none;
}
.slide-title-25{
    font-size:25px ;
    font-weight:700;
    color:#ffffff;
    text-decoration:none;
    background-color:transparent;
    text-shadow:0px 0px 7px rgba(0, 0, 0, 0.25);
    border-width:0px;
    border-color:rgb(0, 0, 0);
    border-style:none;
}
.tp-caption span.corner-border {
    display: block;
    width: 200px;
    height: 80px;
}
.tp-caption span.corner-border.left-top {
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}
.tp-caption span.corner-border.left-bottom {
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}
.tp-caption span.corner-border.right-top {
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}
.tp-caption span.corner-border.right-bottom {
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}
.tp-bannertimer {
    display: none;
}
.tp-bullets.preview4 .bullet{
    border-radius: 0;
    border-color: #f3f3f3 !important;
}
.tp-bullets.preview4 .bullet.selected{
    border-color: #999 !important;
}
.tp-bullets.preview4 .bullet:hover{
    border-color: #888 !important;
}
/* ========================
 4. no padding Bootstrap
========================== */

.no-gutter [class*="-6"] {
    padding-left:2px;
    padding-right:2px;
}
.no-gutter1 [class*="-6"] {
    padding-left:0px;
    padding-right:10px;
}

.no-gutter2 [class*="-12"] {
    padding-left:0px;
    padding-right:0px;
}
.no-gutter4 [class*="-12"] {
    padding-left:1px;
    padding-right:1px;
}

.no-gutter4 [class*="-4"] {
    padding-left:2px;
    padding-right:2px;
    margin: 2px 0;
}
.no-gutter4.sm [class*="-4"] {
    padding-left:2px;
    padding-right:2px;
}
.no-gutter5 [class*="-4"] {
    padding-left:0px;
    padding-right:2px;
}
.no-gutter3 [class*="-3"] {
    padding-left:7px;
    padding-right:8px;
}

.no-gutter3-1 [class*="-3"] {
    padding-right: 2px;
    padding-left: 2px;
}

.full-video{
    width: 100%;
    height: 100%;
}
.bg-gray{
    background-color: #fafafa;
}

/* ==============================
5.1   thumnail with overley effect
=================================*/
.piko-thub {
    width: 100%;
    border: 1px solid;
    overflow:hidden;
}
.piko-thub-img, .piko-pop{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.piko-thub:hover .piko-thub-img{
    opacity: 0.4;
    /*background-color: #ffb600;*/
    /*    -webkit-transform: scale3d(1.1,1.1,1);
        transform: scale3d(1.1,1.1,1);*/
}
.piko-thub-img:before, .piko-pop:before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.4);
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.piko-pop > a {
    color: #fff;
    height: 46px;
    left: 50%;
    line-height: 46px;
    margin-left: -23px;
    margin-top: -23px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 150%;
    width: 46px;
    z-index:1;
    border-radius: 3px;
    -webkit-transition:all 0.4s ease 0.2s;
    transition:all 0.4s ease 0.2s;
}
.piko-pop > a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #666;
    opacity: 0.67;
    z-index:-1;
}
.piko-pop > a:hover{
    font-size: 20px;
}
.piko-thub:hover .piko-pop > a{
    top: 50%;
}
.piko-thub h3{
    line-height: 40px;
}
.piko-thub h4{
    text-align: left;
    padding-right: 10px;
    padding-left: 10px;
}
.piko-thub p{
    text-align: left;
    padding-right: 10px;
    padding-left: 10px;
}
.piko-thub .caption p{
    margin-top: 15px;
}
.piko-thub p span{
    color: #999;
    padding-right: 10px;
}
.piko-thub a span{
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* ==========================
5.2 Thumbnail service box index
=========================== */
.service {
    position: relative;
    clear: both;
    margin:0px auto;
    max-width: 100%;
    list-style: none;
}
/* Common style */
.service figure {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.service figure img {
    position: relative;
    display: block;
    /*    min-height: 100%;
        max-width: 100%;*/
    display: table
}
.service figure figcaption {
    margin-top: 3em;
    color: #fff;
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.service figure h5{
    position: relative;
    text-align: center;
    font-size:1.4em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0px 1px #000000;
    -webkit-text-shadow: 0px 1px #000000;
}
.service figure figcaption::before{
    pointer-events: none;
}
.service figure figcaption::after {
    pointer-events: none;
}
.service figure figcaption,
.service figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* =================================
   5.6 thumbnail style (blog)
================================== */

.thumbnail{
    padding-bottom: 20px;
}
.caption p {
    margin-top: 10px;
}
.thumbnail > .caption > a:after,
.thumbnail > .blog > .caption > a:after,
.item > .thumbnail > .caption > a:after{
    font-family: fontAwesome;
    content: "\f105";
    padding-left: 15px;
}
/*.thumbnail > .caption a:hover{
    color: #45bf55;
}*/
.font-uppercase li a span{
    padding-right: 10px;
    padding-bottom: 5px;
}
.blog_date{
    top:10px;
    position: absolute;
    /*background-color: #ffb600;*/
    padding: 5px 10px;
    text-align: center;
    z-index: 111;
}
.blog_date strong{
    color: #fff;
    padding-bottom: 7px;
    border-bottom: 1px solid #fff;
}
.blog_date p{
    margin-top: 10px;
    margin-bottom: 0;
    color: #fff;
}
.archive a:first-child{
    border-top: 1px solid #f3f3f3;
}
.archive a{
    border-bottom: 1px solid #f3f3f3;
    display: block;
    padding: 8px 10px;
}
.archive a:hover{
    color: #1130bb !important;
}
.custom-pagi{

}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    line-height: 24px;
    margin-left: -1px;
    margin-right: 5px;
    color: #222;
    font-size:16px;
    text-transform: uppercase;
    background-color: #f3f3f3;
    border: 0px;
}
.blog-comment{
    margin: 15px 0 50px 0;
}
.blog-comment > .media{
    padding: 20px 0 25px;
    border-bottom: 1px solid #e8e7e7;

}
.blog-comment{
    border-top: 1px solid #e8e7e7;
}
.blog-comment > .media > .media-body >.media{
    padding: 30px 0 0px;
    border-top: 1px solid #f3f3f3;
    margin: 30px 0 0px;
}
.blog-comment .media .media-body h4{
    font-size: 18px;
}
.blog-comment .media .media-body h4 em{
    font-size: 13px;
    color: #999;
}
.blog-comment .media .media-body h4 a{
    float: right;
    font-size: 11px;
    margin-top: -15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-right: 15px;
    color: #777;
}
.blog-comment .media .media-body h4 a:after{
    content: "\f112";
    font-family: fontAwesome;
    padding-left:10px;
}
.blog-comment .media .media-body h4 a:hover{
    color: #45bf55;
}
.blog-right .media .media-left a p{
    background-color: #ffb600;
    position: absolute;
    color:#141414;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 0px;
    padding: 5px 8px;
    margin-top: 25px;
    margin-left: -7px;
}
.media-left {
    min-width: 80px;
}
/* ===================================
   5.7 thumbnail team member
====================================== */

.team1 .box{
    margin: 0px 0 25px;
}
.team1.team-m .box{
    margin:0;
}
.team1 .box a{
    text-decoration: none;
}
.team1 .box figure {
    background: #000;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.team1 .box figure img {
    max-width: 100%;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.team1 .box:hover figure img {
    /*    -webkit-transform: scale(1.0,1.0);
        -ms-transform: scale(1.0,1.0);
        transform: scale(1.0,1.0);*/
    opacity: .8;
    -webkit-transition: all .7s ease-out;
    transition: all .7s ease-out;
}

.team1 .box figure.embed-responsive{
    min-height: 246px;
}


.team1 .box figcaption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 6;
    text-align: center;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.team1 .box:hover figcaption {
    background: rgba(0,0,0,0.3);
}
.team1 .box figcaption i {
    bottom:50%;
    color:#fff;
    font-size:14px;
    left:50%;
    margin-left:-50px;
    opacity:0;
    padding-top:10px;
    position:absolute;
    text-align:center;
    min-width:100px;
    height: 35px;
    border-radius: 3px;
    font-style: normal;

    /*        background-color: #ffb600;*/
    filter:alpha(opacity=0);
    -khtml-opacity:0;
    -moz-opacity:0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.team1 .box:hover figcaption i {
    bottom:10%;
    opacity:1;
    margin-bottom:-50px;
    filter:alpha(opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1
}
.team1 .box .caption h4, .team1 .box .caption h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.team1 .box .caption p{
    color: #666;
    font-size: 14px;
    margin:15px  0;
    text-align: center;
}

.team1 .box:hover figcaption i {
    bottom:30%;
    opacity:1;
    margin-bottom:0px;
    filter:alpha(opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1
}
.team1 .box .title, .team1 .box .title2{
    /*	background: #ffb600;*/
    text-align: center;
    margin: 0;
    padding: 5px;
    position: relative;
    width: 100%;
    height: 40px;
}
.team1 .box .title:after{
    /*	background: #ffb600;*/
    content: "";
    position: absolute;
    top: -20px;
    right: 0;
    height: 100%;
    width: 100%;
    -webkit-transform: skew(0deg, -3deg);
    transform: skew(0deg, -3deg);
}
/*for squre*/
.team1 .box .title.squre:after{
    content: "";
    position: absolute;
    top: -15px;
    right: 0;
    -webkit-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg);
}

.team1 .box .title2:after{
    /*	background: #ffb600;*/
    content: "";
    position: absolute;
    top: -20px;
    right: 0;
    height: 100%;
    width: 100%;
    -webkit-transform: skew(0deg, 3deg);
    transform: skew(0deg, 3deg);
}
.team1 .box .title h2, .team1 .box .title2 h2{
    color: #fff;
    font-size: 18px;
    margin: 0;
    position: inherit;
    z-index: 999;
}
/*service*/
.team1.team2 .box .title h2, .team1.team2 .box .title2 h2{
    font-size: 20px;
    text-transform: uppercase;
}
/*blog*/
.team1.team2.blog-title .box .title h2, .team1.team2.blog-title  .box .title2 h2{
    font-size: 15px;
    text-transform: uppercase;
}
.team1 .box .caption{
    /*border: 1px solid;*/
    cursor: text;
}
.team1 .box .caption h5{
    padding-top: 7px;
    font-weight: 600;
}
.team1 .box .caption h3{
    margin: 0;
    padding: 15px 0;
    text-align: center;
}
.team1 .box .caption h2{
    font-size: 17px;
}
.team1 .box .caption p{
    color: #333;
    margin:0 0 15px 0;
    text-align: justify;
}
.team1 .box .caption a{
    padding:8px 0;
}
.team1 .box > .caption > a:after{
    font-family: fontAwesome;
    content: "\f105";
    padding-left: 15px;
}
/*.team1 .box .caption a:hover{
    color: #ffb600;
}*/

/*padding 0 right*/
.team1.caption-p .box .caption{
    border: 0px;
    cursor: text;
}
.team1.caption-p .box .caption h3{
    padding: 0px 0;
    font-size:20px;
    text-align: left;
}
.team1.caption-p  .box .caption h2{
    margin: 15px 5px 0 0px;
}
.team1.caption-p  .box .caption p{
    padding: 10px 0 0px 0px;
    text-align: left;
}
.team1.caption-p  .box .caption p:last-child{
    padding: 15px 0 0px 10px;
    margin: 15px 0px;
    width: 120px;
    text-align: center;
    padding:8px 0;
    cursor: pointer;
}

/*for team member*/
.team1.team-m .box .caption p{
    color: #666;
    font-size: 15px;
    margin:15px  0;
    padding: 0px 5px 15px 5px;
    text-align: center;
}
.team1.team-m .box figcaption i {
    bottom:-50%;
    font-size:18px;
    left:0;
    right:0;
    margin-left:0px;
    opacity:0;
    padding-top:0px;
    position:absolute;
    text-align:center;
    width:100%;
    height: 50px;
    line-height: 50px;
    border-radius: 0;
}
.team1.team-m .box:hover figcaption i {
    bottom:0%;
    opacity:1;
    margin-bottom:0px;
    filter:alpha(opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1
}
.team1.team-m .box:hover figcaption i a:first-child{
    border-left: 1px solid #222;
}
.team1.team-m .box:hover figcaption i a{
    border-right: 1px solid #222;
    line-height: 50px;
    width: 45px;
    text-align: center;
    color: #fff;
}
.team1.team-m .box figure figcaption a:hover  {
    color: #24201f;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

/* ==========================
6.1  icon boxes
========================== */
.box > .icon-box {
    margin-bottom:20px;
    text-align: center;
    position: relative;
}
.box > .icon-box > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 75px;
    height: 75px;
    font-size: 35px;
    border: 1px solid #fff;
    line-height: 75px;
    border-radius: 50%;
    vertical-align: middle;
    /*box-shadow: 0 0 0 3px #45bf55;*/
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.box > .icon-box > .image:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    /*background: #fff;*/
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
}
.box > .icon-box > .image:before {
    speak: none;
    font-size: 48px;
    line-height: 75px;
    display: block;
    -webkit-font-smootserviceng: antialiased;
}
.box > .icon-box:hover > .image:after {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
    transition: opacity 0.2s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s, -webkit-transform 0.4s;
}
/*.box > .icon-box:hover > .image:hover {
    color: #fff;
}*/
.box > .icon-box > .image > i {
    font-size: 40px;
}
.box > .icon-box:hover > .image > i {
    color: white;
}

.box > .icon-box > .info.white{
    background-color: #fff;
    background: #fff;
}
.box > .icon-box > .info > h4 {
    margin-top: 19px;
    font-weight: 600;
    text-transform:uppercase;
}
.box > .icon-box > .info > p {
    /*color: #666;*/
    text-align: left;
    padding: 0 10px 0;
}
.box > .icon-box > .info {
    margin-top: -24px;
    padding: 20px 0 30px 0;
    border-bottom: 2px solid;
}
.box > .icon-box > .info:hover {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-bottom: 2px solid;
}
/*style2 wrap*/
.box.style2{
    margin-bottom: 40px;
}
.box.style2 > .icon-box {
    margin-bottom: 0;
}
.box.style2 > .icon-box > .image{
    box-shadow: 0 0 0 3px #eee;
}
.box.style2 > .icon-box > .info > h4 {
    margin-top: 30px;
    margin-bottom: 20px;
}
.box.style2 > .icon-box > .info > p {
    text-align: center;
}
.box.style2 > .icon-box > .info {
    text-align: center;
    padding: 20px 0 10px 0;
    border-bottom: none;
}
/* ================================
    7.1 testimonial and client
================================== */
#testimonials {
    display: block;
    width: 100%;
    margin:20px 0 20px;
    padding:70px 0 50px;
}
#testimonials h6 {
    display: block;
    text-align: center;
    margin-bottom: 3px;
    color:#fff;
    font-size: 1em;
}
#testimonials .carousel-wrap {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
#testimonials .carousel-nav {
    display: block;
    width: 50px;
    float:right;
}
#testimonials .carousel-nav img {
    cursor: pointer;
}
.carousel-nav img:active {
    position: relative;
    top: 3px;
}
.carousel-nav .nextbtn {
    float: right;
}
#testimonials .carousel-wrap ul {
    display: block;
    list-style: none;
    position: relative;
}
#testimonials .carousel-wrap ul li {
    display: block;
    float: left;
    position: relative;
    width: 900px;
    margin-right: 80px;
}
#testimonials .carousel-wrap .say {
    margin: 5px 0 0 100px;
    font-size: 1.2em;
    line-height: 1.45em;
    color: #fff;
    font-style: italic;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #4e8db9;
}
#name {
    margin: 0px 0 0 120px;
    font-size: 1em;
    line-height: 1.45em;
    color: #fff;
    font-style: italic;
}
#name  a{
    color: #fff;
}
.img-circle  {
    border:3px solid#fff;
}
.carousel-indicators{bottom: -50px;}

/*  clients logos */
.testimonials p{
    margin-top:0px;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 1px;
    color:#fff;
    width: 100%;
    height: auto;
    padding: 15px;
    position: relative;
    text-shadow: 1px 1px 0 #000000;
    border: 1px solid #ccc;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
}
.testimonials p:after{
    top: 30%;
    left: -15px;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-right-color: #ccc;
    border-width: 15px;
    margin-left: -15px;
}
.testimonials p a{
    color: #fff;
    padding-left: 10px;
}
.testimonials p a:hover{
    color: #ccc;
    text-decoration: underline;
}
/*carusel indicator*/
.carousel-indicators li {
    color: #fff;
}
/* ===================
  7.2  client logo
=======================*/
#clients {
    display: block;
    width:100%;
    background:rgba(240,240,240, .5);
}
.title-bg{
    background:rgba(240,240,240, .5);
    margin-top: 40px;
}
#clients h3{
    padding:20px 0 0;
    display: block;
    text-align: center;
    font-size:1.2em;
    color:#333;
}
#clients img {
    max-height: 50px;
    max-width: 140px;
    vertical-align: middle;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    opacity: 0.3;
    margin-bottom: 30px;
}
#clients img:hover {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: .6;
}

@media (max-width: 640px) {
    .extra-padding{
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
.partner{
    width: 140px;
    height:60px;
    background-color: #f3f3f3;
    overflow: hidden;
    margin: 12px 3px 7px;
}
.partner img {
    position: relative;
    top: 0px;
    -webkit-transition: top .2s ease-in-out;
    transition: top .2s ease-in-out;
}
.partner img:hover {
    top: -60px;
}
/*================================
  7.3  TESTIMONIAL 02 STYLES
===============================  */
.testimonial-01 {
    width: 98%;
    height: auto;
    padding: 0 15px 15px 15px;
    background-color: #fff;
    position: relative;
    /*border: 1px solid #ccc;*/
    font-size:14px;
    min-height: 150px;
}
/*.testimonial-01:after {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #ccc;
    border-width: 15px;
    margin-left: -15px;
}*/
.testimonial-01 .quote{
    width: 40px;
    height: 40px;
    background-color: #fff;
    /*border: 1px solid #ccc;*/
    position: absolute;
    margin-left: -16px;
    line-height: 40px;
    padding: 0 5px 5px 5px;
}
.testimonial-01 p{
    position: relative;
    padding-left: 40px;
}
.testimonial-01-name {
    height: 85px;
    margin-top: 10px;
    margin-left: 60px;
    text-align:left;
    color:#000;
}
.testimonial-01-name p:first-child{
    position: absolute;
    display: inline-block;
}
.testimonial-01-name p:last-child{
    position: relative;
    display: inline-block;
    padding-top: 20px;
    padding-left: 90px;
}
.testimonial-01-name span{
    font-size: 11px;
    color:#999;
}
.testimonial-01-name img {
    max-width:80px;
    border: 2px solid #fff;
}
.carousel-indicators-01 {
    position:static;
    margin-left:0px;
    width:100%;
}
.carousel-indicators  li {

    border: 1px solid #ccc;
    border-radius: 10px;
}
.carousel-indicators .active {
    background-color: #ccc;
}
.testimonial-01-table tr td{
    padding-top: 35px;
    padding-bottom: 35px;
    opacity: 0.7;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.testimonial-01-table tr td:hover{
    opacity: 1;
}
.testimonial-01-table {
    background-color: #fff;
}

/* ================================
  7.5  TESTIMONIAL 03 STYLES
=================================  */

#client.owl-carousel .owl-item img{
    width: 100px;
    margin: 0 auto;
}
.testimonials-03 img{
    position: relative;
    border: 3px solid #ccc;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45);
}
.testimonials-03 img:before{
    content:'ami nai';
    font-family: fontAwesome;
    position: absolute;
    color:red;
}
.testimonials-03 p{
    max-width: 80%;
    font-weight: 600;
    margin: 0 auto;
    font-size: 16px;
    font-style: italic;
    color:#fff;
    height: auto;
    padding-top: 30px;
    margin-top: 20px;
    position: relative;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
}
.testimonials-03 h4{
    color:#fff;
    text-transform:uppercase;
    margin-bottom: 5px;
}
.testimonials-03 a{
    color:#ccc;
}
.testimonials-03 p:after{
    top:-10px;
    border:transparent;
    border-style: solid;
    content: "";
    position: absolute;
    border-width: 15px;
    margin-left: -55px;
}
/* ==========================
    8.1  social icon
===========================*/
.social-wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding:0 0px 0;
}
.social-icon {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 0 2px;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #000;
}
.social-icon.big {
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 20px;
}
.social-icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    box-sizing: content-box;
}
.social-icon:before {
    display: block;
    text-align:center;
    margin-top:8px;
}
/* Effect 1a */
.social-effect-1a .social-icon {
    border: 1px solid #ccc;
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.social-effect-1a.gray .social-icon {
    border: 1px solid #ccc;
}
.social-effect-1a .social-icon:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.2s;
    transition: opacity 0.3s, -webkit-transform 0.2s;
    transition: transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s, -webkit-transform 0.2s;
}
.social-effect-1a .social-icon:hover {
    color: #fff;
}
.social-effect-1a .social-icon:hover:after {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
/* Effect 1b */
.social-effect-1b .social-icon {
    border: 1px solid #ccc;
    color: #ccc;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.social-effect-1b.gray .social-icon{
    border: 1px solid #ccc;
}
.social-effect-1b .social-icon:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    /*	background: #ffb600;*/
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.2s;
    transition: opacity 0.3s, -webkit-transform 0.2s;
    transition: transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s, -webkit-transform 0.2s;
}
.social-effect-1b .social-icon:hover {
    color: #141414;
}

.social-effect-1b .social-icon:after {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}

.social-effect-1b .social-icon:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/*footer icon submenu*/
footer .social-effect-1b .social-icon {
    border: 1px solid #141414;
    color: #141414;
}
footer .social-effect-1b .social-icon:after {
    background: #141414;
}
footer .social-effect-1b .social-icon:hover {
    color: #fff;
}
/* ============================
  9. Constructin processing (core value)
============================= */
.process{
    margin-bottom: 20px;
}
.process img{
    border: 1px solid;
    padding: 5px;
    min-width: 65px;
    height: 65px;
    border-radius: 2px;
}
/*.process .process-icon{
    color: #ffb600;
}*/
.process .process-icon > i{
    border: 1px solid;
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 2px;
    font-size: 45px;
    text-align: center;
}
.margin-bottom{
    margin-bottom: 20px;
}
/*=========================
    10. get-quote
===========================*/

.get-quote{
    /*    background-color: #ffb600;*/
    z-index: 1;
    height: 100px;
    background-repeat: repeat;
    background-image: url(../../images/bg/pattern1.png);
}
.get-quote.opacity{
    background: rgba(255, 182, 0, 0.7);
}
/*.get-quote .layer{
    height: 100px;
    width: 100%;
    background-color: #21c2f8;
    z-index: 2;
    position:absolute;
    margin-left: -17px;
    line-height: 100px;
    border-radius: 0px 20px 20px 0px;
    -moz-border-radius: 0px 20px 20px 0px;
    -webkit-border-radius: 0px 20px 20px 0px;
    background: -webkit-linear-gradient(left,  rgba(255,182,0,0) 0%,rgba(242,145,0,1) 100%);
    background: -webkit-linear-gradient(left, rgba(255,182,0,0) 0%, rgba(242,145,0,1) 100%);
    background: linear-gradient(to right,  rgba(255,182,0,0) 0%,rgba(242,145,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffb600', endColorstr='#f29100',GradientType=1 );

}*/
.get-quote .layer p{
    font-size: 17px;
    color: #fff;
    padding-right: 50px;
    font-weight:600;
    /*position: relative;*/
}
.get-quote a{
    margin: 30px 0 0 10px;
    display: inine-block;
    z-index: 3;
    /*position: relative;*/
}
.get-quote p{
    font-size: 16px;
    color: #fff;
    padding-left: 40px;
    position: relative;
    line-height: 100px;
}
/* ======================================================
  11. Scrolling Parallax background, opacity color
======================================================== */
.fixed-bg{
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
.scroll{
    background-attachment: scroll;
}
.bg-img1{
    background-image: url("../../images/bg/statistics.jpg");
}
.bg-img2{
    background-image: url("../../images/bg/bg2.jpg");
}
.bg-opa-black {
    background-color: rgba(0,0,0, 0.4);
}
.bg-opa-black2 {
    background-color: rgba(0,0,0, 0.7);
}
.bg-opa-black3 {
    background-color: rgba(0,0,0, 0.8);
}

/* ======================================
    12. project-view page and profile
======================================== */
.project-view {
    position: relative;
}
.project-view .top-img {
    width:100%;
    height: auto;
    background: no-repeat center center;
    background-size:cover;
}
.project-view .social-share{
    width: 100%;
    height: 40px;
    background-color: rgba(255,255,255, 0.9);
    position: absolute;
    bottom: 0;
    z-index: 10;
}
/*breadcrumb project view*/
.project-view .social-share ol.breadcrumb{
    margin-left: 375px;
    background-color: transparent;
    margin-top:-8px;
}
.project-view .social-share ol.breadcrumb li a{
    color: #141414;
}
.project-view .social-share ol.breadcrumb li a:hover{
    color: #ffb600;
}
.blog-view .social-share{
    width: 100%;
    height: 40px;
    bottom: 0;
    margin:  0;
}
.blog-view .social-share ul li{
    width: 40px;
    line-height:40px;
    text-align: center;
    border: 1px solid #ccc;
    float: left;
    display: inline-block;
    margin-right: 7px;
}
.project-view .social-share ul li{
    width: 40px;
    line-height:40px;
    text-align: center;
    border-left: 1px solid #fff;
    float: right;
    display: inline-block;
}
.blog-view .social-share ul li:last-child{
    border-right: 1px solid #ccc;
}
.project-view .social-share ul li:first-child{
    border-right: 1px solid #fff;
}
.project-view .social-share ul li a i, .blog-view .social-share ul li a i{
    color: #333;
}
.project-view .social-share ul li:hover i, .blog-view .social-share ul li:hover i{
    color: #fff;
}
.project-view .info{
    width: 100%;
    max-height: 700px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    position: relative;
    margin-top: -150px;
    z-index: 3;
}
.info2{
    position: relative;
    width: 100%;
    max-height: 600px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    position: relative;
    margin-top: 20px;
}
.project-view .left-side ul{
    padding-left: 0;
}
.project-view .left-side > ul{
    margin-bottom: 30px;
}
.project-view .left-side ul li{
    border-bottom: 1px solid #f9f9f9;
    padding: 5px;
    display: block;
    font-size: 13px;
}
.project-view .left-side ul li:last-child{
    border-bottom: none;
}
.project-view .left-side ul li i{
    padding-right: 10px;
    font-size: 14px;
    /*    color: #999;*/
}
.project-view .left-side ul li img{
    width: 40px;
    height: 40px;
}
.project-view .left-side ul li span{
    padding-left: 5px;
}
.info2{
    position: relative;
    width: 100%;
    max-height: 600px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #f9f9f9;
    position: relative;
    margin-top: 20px;
}
.project-view .profile{
    background: #FFF none repeat scroll 0% 0%;
    border: 5px solid #FFF;
    border-radius: 12px;
    box-shadow: 0px 1px 1px rgba(136, 153, 166, 0.15);
    height: 200px;
    position: relative;
    width: 200px;
    overflow: hidden;
}
.project-view .profile img{
    height: 200px;
    width: 200px;
}
/* ======================
    13. shop page
=========================*/
.thumbnail.shop{
    border:1px solid #e4e4e4;
}
.thumbnail.shop img{
    background-color: #f3f3f3;
}
.thumbnail.shop > .caption{
    padding: 0 10px;
}
.piko-thub {
    width: 100%;
    position: relative;
    overflow:hidden;
}
.thumbnail .ribbon-corner {
    position: absolute;
    right: -25px;
    top: 10px;
    width: 100px;
    text-align: center;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    /*background-color: #ffb600;*/
}
.thumbnail .ribbon-corner span {
    font-size: 12px;
    color: #FFF;
    display: block;
    text-transform: uppercase;
    line-height: 20px;
}
.tag {
    position: absolute;
    z-index: 3;
    right:80px;
}
.ribbon span {
    display: block;
    font-size: 16px;
    color: #FFF;
    margin: 0px;
    padding: 0 10px 0 15px;
    white-space: nowrap;
    /*    -webkit-transform:  rotate(-90deg);
    -ms-transform:  rotate(-90deg);
        transform: rotate(-90deg);*/
}
.ribbon {
    position: absolute;
    display: block;
    text-align: center;
    /*background: #ffb600;*/
    padding: 5px 0px;
    min-width: 50px;
    height:30px;
    top: 10px;
}
.ribbon-content{

}
.ribbon-content:before {
    position: absolute;
    /*    bottom: -5px;*/
    top: 3px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 15px 0px 10px 10px;
    border-color: transparent transparent transparent #fff;
    display: block;
    content: "";
}
.quick-view {
    position: absolute;
    display: block;
    text-align: center;
    width: 85px;
    height:25px;
    bottom:100px;
    left: 10px;
    z-index: 100;
    opacity: 0;
    border: 1px solid  #ccc;
    border-radius: 1px;
}
.quick-view:hover a, .quick-view2:hover a{
    color: #fff;
}
.quick-view2 {
    position: absolute;
    display: block;
    text-align: center;
    width: 85px;
    height:25px;
    bottom:0px;
    left: 25px;
    z-index: 100;
    opacity: 0;
    border: 1px solid  #ccc;
    border-radius: 3px;
}
.quick-view a, .quick-view2 a{
    font-size:11px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.piko-thub:hover .quick-view {
    opacity: 1;
    bottom:150px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.piko-thub:hover .quick-view2 {
    opacity: 1;
    bottom:40px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.love-view {
    position: absolute;
    display: block;
    font-size:16px;
    text-align: center;
    width: 20px;
    height:20px;
    top: 15px;
    right: 30px;
    z-index:100;
}
.cart-button{
    line-height: 30px;
    font-size: 12px;
}
.cart-button:hover a{
    color: #24201f;
}
.cart-button strong{
    color: #222;
}
.cart-button strong del{
    color: #999;
}
/*shop-list*/
.shop-list h4{
    padding: 26px 0;
}

/*bootstrap model*/
.modal {
    text-align: center;
}
body {
    padding-right: 0px !important
}
body.mfp-zoom-out-cur {
    margin-left: -8px;
}
.modal-open {
    overflow-y: auto;
}

.shop-quick .modal-dialog .modal-content button{
    padding-top: 10px;
    padding-right: 10px;
}

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.modal-content{
    border-radius: 0;
}
.modal-content h4, .shop-single h4{
    font-size: 25px;
}
.modal-content h4 del, .shop-single h4 del{
    font-size: 22px;
    color: #ccc;
}
.modal-content .social-model ul, .shop-single .social-model ul{
    padding-left: 0;
}
.modal-content .social-model ul li, .shop-single .social-model ul li{
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    background-color: #ccc;
}
.modal-content .social-model ul li a, .shop-single .social-model ul li a{
    color: #fff;
}
/* ==============================
 14. shop single page image
============================== */
.shop-single{
    background-color: #fff;
}
.shop-page{
    line-height: 45px;
}
.shop-page a i{
    color: #ccc;
}
.shop-page small i{
    /*    color: #ffb600;*/
    font-size: 18px;
}
.shop-qty{
    margin-top: 2px;
}
.shop-qty a{
    padding: 10px 13px;
    background-color: #eee;
    color: #777;
}
.shop-qty a:last-child{
    margin-top: 3px;
    padding: 11px 20px 13px;
    /*    background-color: #ffb600;*/
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
}
.shop-qty a:last-child:hover{
    background-color: #393939;
}
.shop-qty  input{
    padding: 3px 12px 7px;
    border: 1px solid #eee;
    font-size: 18px;
    text-align: center;
}
.tags.fa-ul li a{
    margin-right:10px;
    color: #222;
}
.tags.fa-ul li{
    padding-bottom: 5px;
}

.nav-tabs li a:hover{
    /*    background-color: #ffb600;*/
    color: #fff;
}
.rate{
    padding-top: 6px;
    font-size: 20px
}
.rating > span:hover:before {
    content: "\2605";
    position: absolute;
}
.rating {
    font-size:27px;
    unicode-bidi: bidi-override;
    direction: rtl;

}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}
.rating > span {
    display: inline-block;
    position: relative;
    width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color: #ffb600;
}
/*owl carousel*/
#shop .thumbnail{
    border-right: 2px solid #f3f3f3;
}
/*.media .media-body .shop-rate i{
    color:#ffb600;
}*/

.blog_date2{
    top:10px;
    position: absolute;
    padding: 5px 10px;
    text-align: center;
    z-index: 111;
}
.blog_date2 p:first-child{
    height:65px;
    width:90px;
    font-size: 28px;
    color:#fff;
    text-align:center;
    line-height: 20px;
    margin-bottom: 0;
}
.blog_date2 p:last-child{
    height:65px;
    width:90px;
    background-color: #fff;
    padding-top:8px;
    font-size: 28px;
    color:#222;;
    text-align:center;
    line-height: 20px;
}
.blog_date2 p:first-child span{
    font-size: 15px;
    color:#fff;
}
.blog_date2 p:last-child span{
    font-size: 11px;
    color:#222;
}

/* =======================
    15. Home page box
========================= */
.home-box-wapper {
    margin: 0px auto ;
    max-width: 1200px;
    width: 1200px;
    background: #fff;
    box-shadow: 0px 1px 15px -7px rgba(0,0,0,0.64);
    -webkit-transition: all .01s ease-in-out;
    transition: all .01s ease-in-out;
}
/*home page box pattern*/
.home-box1 {
    margin: 0px;
    padding: 0px;
    background: #191716;
    background: #808080 url("../../images/bg/gradient.jpg") repeat-x scroll 0% 0%;
}
.quote-box {
    max-width: 1100px;
}
/* ==============================
    16 about page
================================ */

.banner{
    background: #24201f url(../../images/bg/page-title.png) repeat center center;
}
.page-banner {
    padding: 65px 0px 47px;
    position: relative;
}
.about-page-banner{
    background: transparent url(../../images/banner.jpg) repeat scroll 0% 0% / cover;
}
.page-banner h1 {
    margin: 0px 0px 7px;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
}
.page-banner.white h1 {
    margin: 0px 0px 7px;
    color: #fff;
    font-size: 36px;
    text-shadow: 1px 1px 1px #666;
}
.page-banner .breadcrumb {
    background: none;
    margin: 5px 0px 7px;
    text-align: right;
}
.breadcrumb > li {
    font-weight: 600;
}
.breadcrumb > li + li:before {
    /*    color: #ffb600;*/
    font-family: 'FontAwesome';
    content: "\f101";
    padding: 0 5px;
}
.page-banner .breadcrumb a {
    color: #fff;
}
.breadcrumb > .active {
    color: #aaa8a8;
}
.page-banner.white .breadcrumb a {
    color: #fff;
}
.list-group-item{
    margin-bottom: 2px;
    border: 0;
}
.custom-list .sublink .list-group-item {
    margin-bottom: 2px;
    border: 0px;
}
#sub-menu .list-group .sublink .list-group-item {
    padding-left: 30px;
}
#sub-menu .list-group .list-group-item.drop:after {
    font-family: fontAwesome;
    content: "\f105";
    padding-right: 10px;
    float:right;
}

#sub-menu .custom-list .list-group-item {
    cursor: pointer;
}
.list-group a{
    background-color: #f4f4f4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 83%;
    font-weight: 600;
}
.list-group a:hover, .list-group a:focus, .list-group a:active{
    /*    background-color: #0af;*/
    color: #fff;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}
.media-body p {
    color: #666;
}

.tab-content .media-body a {
    font-size: 14px;
}
.tab-content.tab-widget .media-body p {
    font-size: 11px;
}
.nav-tabs > li > a {
    border-radius: 0px;
}
.thumbnail {
    border-radius: 0px;
}
.media-body ul li{
    margin-top: 15px;
    margin-bottom: 15px;
}
.media-body.nom ul li{
    margin-top: 0px;
    margin-bottom: 0px;
}
.media-body .list-group{
    margin-top: 15px;
}
.media-body .list-group small{
    padding-left: 10px;
}
.download a:hover, .list-group a:focus, .list-group a:active{
    background-color: #f4f4f4;
    color: #999;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}
.internship{
    min-height: 200px;
    padding: 30px;
    /*    background-color: #f4f4f4;*/
}

/* =================================
   17. error page coming
================================== */
/*comming soon coundown*/

.coming-time {
    text-align: center;
}
.coming-time:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

.coming-time-box {
    display: inline-block;
    vertical-align: middle;
    width: 625px;
}
.no404 .error h3{
    font-size: 200px;
}
.no404 .error p{
    color:red;
    font-size: 40px;
    margin: -120px 0 0 100px;
    -webkit-transform:rotate(130deg);
    transform:rotate(130deg);
    position: absolute;
}
.no404 .error p:last-child{
    color:red;
    font-size: 40px;
    margin: -120px 0 0 100px;
    -webkit-transform:rotate(-130deg);
    transform:rotate(-130deg);
    position: absolute;
}
.no404 .text h3{
    font-size: 25px;
}
.no404 .text p{
    font-size: 16px;
}
/* ==================================
    18. pattern and pattern overlay
===================================== */
/*bg pattern*/
.pattern4 {
    background: transparent url("../../images/bg/white.gif") repeat;
    position: relative;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
}
.pattern3 {
    background: transparent url("../../images/bg/wrapper_bg.png") repeat;
    position: relative;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
}
.pattern-strip {
    height: 10px;
}
.pattern-strip2 {
    height: 5px;
}
.pattern-strip > p {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
}
.pattern-strip2 > p {
    padding: .5rem;
    margin: 0 0 0.5rem 0;
}

/*pattern overlay*/
.img-pattern{
    position: relative;
    z-index: 1;
}

.img-pattern:after{
    background: url("../../images/bg/pattern.png") center repeat;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.7;
    z-index: 1;
}
/* ================================
    Dot  overlay pattern
=================================== */
.piko-overlay {
    opacity: .4;
    background: transparent url(overlays/02.png) center center repeat;
}
.vegas-overlay {
    opacity: .2;
}
/* ===========================
  19.  footer big and sub footer
============================== */
.footer2-bg{
    background-color: #24201f;
    color: #ccc;
}
.f-line{
    width: 100px;
    height: 10px;
    background-color: #ffb600;
    position: relative;
    float:left;
}
.f-line2{
    width: 100px;
    height: 10px;
    background-color: #ffb600;
    position: relative;
    float:right;
}
.footer2-bg .media{
    margin-top: 0;
}
.footer2-bg.light{
    background-color: #f0f0f0;
    color: #222;
}
.footer2-box ul li a{
    color: #ccc;
}
.footer2-box ul li a:before{
    font-family: fontAwesome;
    content: "\f105";
    padding-right: 10px;
}
.footer2-box ul li a:hover{
    color: #fff;
}
.light .footer2-box ul li a{
    color: #222;
}
.footer2 {
    position: relative;
    text-decoration: none;
    padding-top: 20px;
    padding-bottom: 20px;
}
.footer2-box {
    position: relative;
    padding-top: 3px;
}
.footer2-box a{
    display:inline-block;
    margin-top:2px;
    margin-bottom:2px;
}
.footer2-box h4 {
    cursor: pointer;
    padding:5px 0;
    margin: 10px 0;
}
.footer2-box p {
    color:#ccc;
    padding: 15px 0;
}

.footer2-box .media a{
    color:#ccc;
    font-weight: 600;
}
/*.footer2-box .media a:hover{
    color:#ffb600;
}*/
.footer2-bg.light .footer2-box .media a{
    color:#666;
}
.footer2-bg.light .footer2-box .media a:hover{
    color:#333;
}
.footer2-box .media p{
    padding-bottom: 0px;
    padding-top: 0px;
    font-size: 11px;
    font-style: italic;
}

.footer2-box ul, .footer2-box ol{
    cursor: pointer;
    padding:5px 0;
}
.footer2-box ul li{
    position:relative;
    padding:7px 0;
}

.footer2-box ul li:hover{
    position:relative;
    padding-left:8px;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}
.footer2-box ol li{
    position:relative;
    padding:5px 0;
    border-bottom: 1px dashed #444;
}




/* ========================
  19.2 sub menu footer
========================= */
footer {
    line-height:70px;
    /*    background-color:#ffb600;*/
    font-weight: 600;
}
footer p{
    color:#141414;
    margin:0;
}
footer a{
    color:#fff;
}
footer .link a{
    color:#141414;
    text-align: right;
    float: right;
    padding-left: 15px;
}
footer .link a:last-first{
    padding-right: 0;
}
footer a:hover, footer .link a:hover{
    color:#fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}
/* ======================
   20. back to top
====================== */

.back-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    position: fixed;
    bottom: 30px;
    right: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    z-index:1000;
    white-space: nowrap;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.back-top.top-is-visible, .back-top.top-fade-out, .back-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.back-top.top-is-visible {
    visibility: visible;
    opacity: 1;
}
.back-top.top-fade-out {
    opacity: .5;
}
.back-top:hover {
    /*background-color: #e0a000;*/
    opacity: 1;
}
.back-top:hover i, .back-top:focus i{
    color: #24201f;
}

/* ================================
    21.  Bootstrap changing
=================================== */
/*carousel control*/
/*bootstrap carosel next and previous*/
.footer2-box .media-left, .footer2-box .media > .pull-left{
    padding-right: 0;
}
/*when modal open owl*/
.modal {
    display: block;
    height:0;
}
.modal.in {
    height:auto;
}

.title .control{
    margin-top:-40px;
    display: inline-block;
    float: right;
    position: relative;
    z-index: 20;
}
.title .control a{
    padding: 8px;
    border: 1px solid;
}
.table th, .table td {
    border-top: none;
}
/*flickr widget*/
.popup-gallery.table > tbody > tr > td {
    padding: 0 5px 6px 0px;
    line-height: 1.42857;
    vertical-align: top;
    border: none;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.popup-gallery.table > tbody > tr > td :hover{
    opacity: .8;
}
.popup-gallery.table > tbody > tr > td > a >img{
    width: 75px;
    height:60px;
}

.piko-form input, .piko-form button, .piko-form textarea, .piko-form select{
    margin: 12px 0px;
}
.form-control:last-child:first-child {
    border-radius: 0;
}
.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
    border-radius: 0;
}
.input-group-addon, .btn{
    border-radius: 0;
}

.input-group .form-control-feedback{
    margin: 7px 85px 0 0;
}
.coming-soon .input-group .form-control-feedback,
.footer2 .input-group .form-control-feedback{
    margin: 14px 85px 0 0;
}
form .form-control-feedback{
    margin: 24px 10px 0 0;
    color:#999;
}
.result{
    padding-top: 15px;
    margin-bottom: 15px;
}
.form-control.piko-coming, #newsletterForm .form-control {
    background-color: transparent;
}
.piko-media .media-body:hover .font16{
    color: #fff;
    background-color: red;
}
.piko-media .font16{
    overflow: hidden;
    display: block;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.media .media-body h6{
    margin-top: 0;
    font-size: 11px;
}
.media .media-body h4{
}
/*.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 0 8px 8px 8px;
}*/
.form-control {
    border: 1px solid #ddd;
    height: 42px;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0) inset;
    -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.form-control:focus {
    outline: 0px none;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.0) inset, 0px 0px 8px rgba(102, 175, 233, 0.0);
}
.thumbnail .caption {
    padding: 0px;
}
.btn{
    padding: 10px 14px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    font-size: 12px;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    font-size: 12px
}
.custom-list .list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.custom-list .list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.list-group-item {
    padding: 15px 15px;

}
/*accordion*/
.panel {
    border: 1px solid transparent;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}
.panel-heading {
    padding: 15px 20px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.panel-group .panel + .panel {
    margin-top: 0;
}
.thumbnail.nocolor .caption h3{
    font-size: 18px;
}
/* =======================
    accordion
======================== */

.panel-info > .panel-heading {
    color: #222;
    /*background-color: #f4f4f4;*/
    border-color: #BCE8F1;
}
.panel-heading {
    cursor: pointer;
}

.panel-group2 .panel-info > .panel-heading {
    color: #222;
    background-color: rgb(250, 250, 250);
    border-color: #fff;
}
.panel-group2 .accordion-toggle:after {
    /* symbol for "opening" panels */
    color: #999;
    font-family:'FontAwesome';
    content:"\f068";
    float: right;
    padding: 4px 5px;
    border: 1px solid #e9e9e9;
    font-size: 10px;
}
.panel-group2 .panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f067";
}
.panel-group3 .panel{
    margin-bottom: 0px;
}
.panel-group3 .panel-info {
    color: #666;
    background-color: #fff;
    border-color: #fff;
}
.panel-group3 .panel-info > .panel-heading {
    color: #666;
    background-color: #fff;
    border-color: #fff;
    border-bottom: 1px solid #ccc;
}
.panel-group3 .panel-info > .panel-heading:hover {
    color: #ffb600;
}
.panel-group3 .accordion-toggle:after {
    /* symbol for "opening" panels */
    /*    color: #999;*/
    font-family:'FontAwesome';
    content:"\f077";
    float: right;
    padding: 4px 5px;
    border: 1px solid #ccc;
    font-size: 10px;
    border-radius: 50%;
}
.panel-group3 .panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f078";
}
/* CSS Method for adding Font Awesome plus Icons */
.accordion-toggle:after {
    /* symbol for "opening" panels */
    /*    color: #0af;*/
    font-family:'FontAwesome';
    content:"\f078";
    float: right;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f077";
}
/*start vacation page*/
.tab-pane{
    margin-top: -16px;
}
.nav-page ul li a i{
    padding-right: 10px;
    color: #ffb600;
}
.media-body.tab-piko ul li {
    margin-top: 15px;
    margin-bottom: 0px;
}
.tab-content{
    border: 1px solid #f3f3f3;
    padding: 30px 20px;
}
.tab-content.widget{
    border: 1px solid #f3f3f3;
    padding: 0;
}

.badge {
    color: #141414;
    border-radius: 2px;
    border: 1px solid #141414;
}
/* ================================
      any div screen middle
=================================== */
.screen-middle {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



/* ======================================
>>>> CSS SHORTCODES STYLE STRUCTURE <<<<
========================================*/

/* ===================
    22. preloader
===================== */
.preloader{
    position:fixed;
    left:0px; top:0px;
    width:100%; height:100%;
    z-index:99999;
    background-color:#ffffff;
    background-position:center center;
    background-repeat:no-repeat;
    background-image:url(../../images/icon/preloader.GIF);}
.preloader p{
    color:#666;
    font-size: 12px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 38px;
    margin-left: -43px;
}

/*----------------------------------------------------
  23. Heading Titles
------------------------------------------------------*/

.piko-title1,.piko-title2, .piko-title3, .piko-title5{
    margin-bottom:20px;
}
.piko-title1 h3{
    font-size: 27px;
    z-index: 1;
    position: relative;
    text-align: left;
    text-transform: uppercase;
}
.piko-title1 .line{
    background: #000;
    border-top: solid 1px #e3e3e3;
    position: absolute;
    height: 1px;
    display: block;
    top: 18px;
    width: 88%;
}
.piko-title1 .text{
    background-color: #fff;
    z-index: 20;
    position: relative;
    text-align: center;
    padding: 0px 18px 0px 0px;
}

.piko-title2 h3{
    font-size: 27px;
    z-index: 1;
    position: relative;
    text-align: left;
}
.piko-title2 .line{
    background: #000;
    border-top: solid 1px #e3e3e3;
    position: absolute;
    height: 1px;
    display: block;
    top: 16px;
    width: 100%;
}
.piko-title2 .line2{
    background: #000;
    border-top: solid 1px #e3e3e3;
    position: absolute;
    height: 1px;
    display: block;
    top: 20px;
    width: 100%;
}
.piko-title2 .text{
    background-color: #FFFFFF;
    z-index: 20;
    position: relative;
    text-align: center;
    padding: 0px 18px 0px 0px;
}

.piko-title3 h3{
    font-size: 23px;
    z-index: 1;
    position: relative;
    text-align: left;
    margin-top:0;
}
.piko-title3 .line{
    background: url(../../images/bg/hcross-lines.jpg) repeat-x left top;
    position: absolute;
    height: 8px;
    display: block;
    top: 14px;
    width: 100%;
}
.piko-title3 .text{
    z-index: 20;
    background-color: white;
    position: relative;
    text-align: center;
    padding: 0px 18px 0px 0px;
}

.piko-title3 .strip{
    z-index: 20;
    position: relative;
    padding-right: 40px;
}

.piko-title3 .strip:after {
    position: absolute;
    content: "";
    right: 0px;
    top: 4px;
    bottom: 0px;
    width: 5px;
    height: 22px;
    background: #ffb600;
    float: right;
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
    z-index: 3;

}
.piko-title3 .strip1:after {
    position: absolute;
    content: "";
    right: 0px;
    top: 4px;
    bottom: 0px;
    width: 10px;
    height: 22px;
    background: #222;
    float: right;
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
    z-index: 2;

}
.piko-title3 .strip3:after {
    position: absolute;
    content: "";
    right: 0px;
    top: 4px;
    bottom: 0px;
    width: 15px;
    height: 22px;
    background: #ffb600;
    float: right;
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
    z-index: 1;
}
.page-wrap .section-title {
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
    border-right: 6px solid;
    float: left;
    padding: 0px 40px 0px 0px;
    margin-right: 40px;
    margin-bottom: 0px;
}
.piko-title4 h3{
    font-size: 23px;
    padding-bottom: 16px;
    margin-bottom:5px;
    z-index: 1;
    position: relative;
    text-align: left;
}
.piko-title4.widget h3{
    font-size: 18px;
    padding-bottom: 16px;
    margin-bottom: 0;
}
.piko-title4.widget h3 strong{
    color: #fff;
}
.piko-title4.nom h3{
    margin-top: 0;

}
.piko-title4.widget{
    margin-bottom: 0;
}
.piko-title4 h3 mark{
    /*    color:#ffb600;*/
    background-color: transparent;
}
.piko-title4 h3 mark.white{
    color:#fff;
    background-color: transparent;
}
.piko-title4 .line{
    /*    background: #ffb600;*/
    position: absolute;
    height: 3px;
    display: block;
    bottom: 0px;
    width: 30px;
}
.piko-title4.widget .line{
    /*    background: #ffb600;*/
    position: absolute;
    height: 2px;
    display: block;
    bottom: 0px;
    width: 30px;
}

.piko-title4 .line-white{
    background: #fff;
    position: absolute;
    height: 3px;
    display: block;
    bottom: 0px;
    width: 30px;
}
.piko-title4 .text{
    z-index: 20;
    position: relative;
    text-align: center;
}

.piko-title5 h3{
    font-size: 27px;
    padding-bottom: 16px;
    z-index: 1;
    position: relative;
    text-align: left;
    margin-bottom: 25px;
}
.piko-title5 h3.nmb {
    margin-bottom: 10px;
}
.piko-title5 h3.big {
    font-size: 43px;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}
.piko-title5 h3.shop {
    font-size: 12px;
    padding-top: 0;
    margin-bottom: 7px;
    line-height: 21px !important;
    text-transform: uppercase;
}
.piko-title5 a {
    font-size: 13px;
}
.piko-title5 .line{
    /*    background: #ffb600;*/
    position: absolute;
    height: 2px;
    display: block;
    bottom: 0px;
    width: 100px;
}
.piko-title5 .line2{
    background: #000;
    border-top: solid 1px #e3e3e3;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 1px;
    width: 100%;
}
.piko-title5 .text{
    z-index: 20;
    position: relative;
    text-align: center;
}

.piko-title6 {
    text-align: center;
}
.piko-title6 em {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    font-style: normal;
}
.piko-title6 hr {
    width: 100px;
    height: 2px;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}
.piko-title6.two hr {
    width: 30px;
    height: 2px;
    margin-bottom: 5px;
}
.piko-title6 h2 mark{
    color: #ffb600;
    background-color: transparent;
}

.piko-title7 {
    text-align: center;
    position: relative;
}
.piko-title7:before {
    content: '';
    width: 100%;
    top: 45px;
    left: 0;
    border-top: 1px solid #d8d8d8;
    position: absolute;
}
.piko-title7.line2:before {
    border-top-style: double;
    border-width: 4px;
}
.piko-title7.noline:before {
    border-top: 0;
}
.piko-title7-icon {
    background: #fff;
    color: #ccc;
    position: relative;
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 15px;
}

.piko-title8 {
    display: inline-block;
    margin: auto;
    position: relative;
    text-align: center;
}
.piko-title8:before, .piko-title8:after {
    content: '';
    width: 200px;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    top: 67px;
    z-index: 99;
}
.piko-title8:before {
    left: 150px;
    z-index: -2;
}
.piko-title8:after {
    right: 150px;
    z-index: -2;
}
.piko-title8 a {
    font-size: 12px;
    color: #ccc;
    text-transform: uppercase;
    padding: 4px 5px;
    border: 1px solid #ccc;
}
.piko-title8 span {
    font-size: 14px;
    text-transform: uppercase;
    padding: 4px 5px;
    border: 1px solid #ccc;
    border-radius: 50%;
}
.piko-title8 .dot2 {
    font-size: 14px;
    text-transform: uppercase;
    padding: 1px 2px;
    border: 1px solid #ccc;
    color: #999;
    border-radius: 50%;
}
.piko-title8 .dot {
    font-size: 10px;
    padding: 1px 2px;
    border: 1px solid #ccc;
    color: #999;
    border-radius: 50%;
}
.piko-title8 .smalldot {
    font-size: 9px;
    padding: 1px 2px;
    border: 1px solid #ccc;
    color: #999;
    border-radius: 50%;
}
.piko-title10 h2{
    font-size: 35px;
    z-index: 1;
    position: relative;
    text-align: center;
}
.piko-title10 .line{
    background: url(../../images/bg/h-line.jpg) no-repeat center top;
    position: absolute;
    height: 1px;
    display: block;
    top: 18px;
    width: 100%;
    margin: 0 auto;
}
.piko-title10 .text{
    background-color: #FFFFFF;
    z-index: 20;
    position: relative;
    text-align: center;
    padding: 0px 25px;
}

.piko-title9  {
    text-align: center;
    margin-bottom:40px;
}
.piko-title9  h2, .piko-title9  h1, .piko-title9  h3{
    margin-top: 0;
    font-size: 25px;
    text-transform: uppercase;
}
.piko-title9 hr {
    border-top: 1px solid #d4d4d4;
    position: relative;
    max-width:200px;
    margin:0 auto;
}
.piko-title9 hr:after {
    position: absolute;
    left: 40%;
    right: 40%;
    top: -2px;
    border-top: 3px solid;
    content: '';
}
.piko-title9 p{
    padding : 10px 0;
    font-size: 16px;
}
.piko-title9 h3 mark{
    /*   color:#ffb600;*/
    background-color:transparent;
}
/* =============================
    22.2. Section divider
============================== */

.piko-divider {
    float: left;
    width: 100%;
    border-bottom: 1px solid #f3f3f3;
}
.piko-divider1, .piko-divider2, .piko-divider3, .piko-divider4, .piko-divider5, .piko-divider12 {
    margin: 100px 0;
    line-height: 0.5;
    text-align: center;
}
.piko-divider1 span, .piko-divider2 span, .piko-divider3 span, .piko-divider4 span, .piko-divider5 span, .piko-divider12 span {
    display: inline-block;
    position: relative;
}
.piko-divider1 span:before, .piko-divider2 span:before, .piko-divider3 span:before, .piko-divider4 span:before, .piko-divider5 span:before,
.piko-divider1 span:after, .piko-divider2 span:after, .piko-divider3 span:after, .piko-divider4 span:after, .piko-divider5 span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 1px solid #e1e1e1;
    top: 12px;
    width: 580px;
}
.piko-divider12 span:before,
.piko-divider12 span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    top: 12px;
    width: 580px;
}
.piko-divider3 span:before, .piko-divider5 span:before, .piko-divider12 span:before {
    right: 100%;
}
.piko-divider3 span:after, .piko-divider5 span:after, .piko-divider12 span:after {
    left: 100%;
}
.piko-divider1 span:before, .piko-divider2 span:before, .piko-divider4 span:before {
    right: 100%;
    margin-right: 10px;
}
.piko-divider1 span:after, .piko-divider2 span:after, .piko-divider4 span:after{
    left: 100%;
    margin-left: 10px;
}
.piko-divider3 i {
    color: #fff;
    width: 27px;
    height: 27px;
    border-radius: 100%;
    background-color: #e1e1e1;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
}
.piko-divider2 i:nth-of-type(1), .piko-divider12 i:nth-of-type(1) {
    color: #e1e1e1;
    padding: 0 1px;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
    font-size: 9px;
}
.piko-divider1 i, .piko-divider2 i:nth-of-type(2), .piko-divider12 i:nth-of-type(2) {
    color: #e1e1e1;
    padding: 0 1px;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
}
.piko-divider2 i:nth-of-type(3), .piko-divider12 i:nth-of-type(3) {
    color: #e1e1e1;
    font-size: 9px;
    padding: 0 1px;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
}
.piko-divider4 i {
    color: #e1e1e1;
    font-size: 20px;
    width: 27px;
    height: 27px;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
}
.piko-divider5 i {
    color: #e1e1e1;
    width: 27px;
    height: 27px;
    border-radius: 100%;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
    font-size: 18px;
    border: 1px solid #e1e1e1;
}
.piko-divider1.two, .piko-divider2.two, .piko-divider3.two, .piko-divider4.two, .piko-divider5.two,  .piko-divider7.two, .piko-divider8.two, .piko-divider12.two{
    margin: 50px 0;
}
.piko-divider1.three, .piko-divider2.three, .piko-divider3.three, .piko-divider4.three, .piko-divider5.three,  .piko-divider7.three, .piko-divider8.three, .piko-divider12.three{
    margin: 25px 0;
}

.piko-divider1.nom, .piko-divider2.nom, .piko-divider3.nom, .piko-divider4.nom, .piko-divider5.nom,  .piko-divider7.nom, .piko-divider8.nom, .piko-divider12.nom{
    margin: 0 0;
}
.piko-divider6 {
    float: left;
    width: 100%;
    padding-top: 100px;
    margin-bottom: 100px;
    background: url(../../images/bg/shadow3.png) repeat-x left bottom;
    text-align: center;
}
.piko-divider7 {
    float: left;
    width: 100%;
    margin: 100px 0;
    border-bottom: 1px dashed;
}
.piko-divider7.two {
    border-bottom: 1px dashed;
    border-color: #e8e8e8;
}
.piko-divider8 {
    float: left;
    width: 100%;
    margin: 100px 0;
    border-bottom: 1px dotted #d9d9d9;
}
.piko-divider9 {
    float: left;
    width: 100%;
    padding-top: 100px;
    margin-bottom: 100px;
    background: url(../../images/bg/shadow2.png) no-repeat center bottom;
    text-align: center;
}
.piko-divider9.pm1 {
    padding-top: 55px;
    margin-bottom: 45px;
}
.piko-divider9.pm2 {
    padding-top: 15px;
    margin-bottom: 105px;
}
.piko-divider10 {
    float: left;
    width: 100%;
    padding-top: 100px;
    margin-bottom: 100px;
    background: url(../../images/bg/hcross-lines.jpg) repeat-x left bottom;
    text-align: center;
}
.piko-divider11  {
    text-align: center;
    width:100%;
    padding-top: 100px;
    margin-bottom: 100px;
}
.piko-divider11 hr {
    border-top: 1px solid #e1e1e1;
    position: relative;
    width:100%;
}
.piko-divider11 hr:after {
    position: absolute;
    left: 42%;
    right: 42%;
    top: -2px;
    border-top: 3px solid;
    content: '';
}
/* ===========================
    24. counter
=========================== */
.counter1 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
}
.counter1 span {
    font-size:25px;
}
.counter1 h5 {
    color: #ccc;
    margin: 5px;
}
.counter1.widget > div{
    float: left;
    display: inline-block;
    margin-right: 20px;
    text-align: center;
    vertical-align: middle;
}
.counter1.widget div + div{
    line-height: 30px;
}
.counter1.widget span {
    font-size:18px;
}

/* ================================
   . counter graphis icon
================================== */
.block, .block2{
    display: inline-block;
    margin: 0 20px 20px;
}
.count-icon-box{
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 50%;
    line-height: 100px;
    height: 100px;
    width: 100px;
}
.count-box{
    border: 1px solid #f3f3f3;
    line-height: 40px;
    height: 40px;
    width: 120px;
    text-align: center;
    padding-bottom: 45px;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 600;
}
.count-box h2 {
    margin: 2px;
    /*    color: #ffb600;*/
}

.count-text{
    text-align: center;
    text-transform: uppercase;
    margin-top: 5px;
}
.block2 .count-box, .block2 .count-text{
    color: #fff;
}
/* ===========================
    25. buttons
=========================== */
.btn-s1 {
    color: #fff;
    padding: 8px 25px;
    border: none;
    /*background-color: #ffb600;*/
    /*border-radius: 3px;*/
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-s1:hover{
    color: #fff;
    background-color: #24201f;
}

.btn-s1.gray {
    color: #fff;
    background-color: #393939;
}
.btn-s1.gray:hover {
    color: #fff;
}
.btn-xs3 {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
    position: relative;
    /*    background-color: #ffb600;*/
    white-space: nowrap;
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.btn-xs3 span {
    position: absolute;
    left: 0;
    width: 30px;
    /*    background-color: #8db737;*/
    border-right: 1px solid  rgba(0,0,0,0.15);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn-xs3{
    color: #fff;
}
.btn-xs3:hover{
    color: #24201f;
}
.btn-xs3 span i {
    color: #fff;
    font-size: 14px;
}
.btn-xs3:hover span, .btn-s3.active span {
    color: #fff;
    background-color: #393939;
    border-right: 1px solid #222;
}
.btn-s3 {
    display: inline-block;
    height: 41px;
    line-height: 41px;
    padding-right: 20px;
    padding-left: 58px;
    position: relative;
    /*background-color: #ffb600;*/
    color: #fff;
    border-radius: 2px;
    white-space: nowrap;
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.btn-s3 span {
    position: absolute;
    left: 0;
    width: 41px;
    /*    background-color: #8db737;*/
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 1px solid  rgba(0,0,0,0.15);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn-s3:hover {
    color: #fff;
}
.btn-s3 span i {
    color: #fff;
    font-size: 18px;
    margin-left: 12px;
}
.btn-s3:hover span, .btn-s3.active span {
    color: #fff;
    background-color: #393939;
    border-right: 1px solid #181818;
}
.btn-s3.gray {
    background-color: #636363;
}
.btn-s3.gray span {
    background-color: #454545;
}
.btn-s3.gray:hover {
    color: #fff;
}
.btn-s3.gray span i {
    color: #fff;
    font-size: 18px;
    margin-left: 12px;
}
.btn-s3.gray:hover span, .btn-s3.gray.active span {
    color: #fff;
    background-color: #393939;
    border-right: 1px solid #181818;
}
.btn-s2 {
    color: #fff;
    padding: 10px 25px;
    /*background-color: #ffb600;*/
    border-radius: 20px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-bottom: 1px solid #393939;
    white-space: nowrap;
}
.btn-s2:hover {
    color: #fff;
    background-color: #393939;
}
.btn-s2.nob {
    padding: 10px 30px;
    border-bottom: 0px solid #393939;
}
.btn-s4 {
    color: #fff;
    padding: 10px 25px;
    /*background-color: #ffb600;*/
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-bottom: 3px solid #393939;
    white-space: nowrap;
}
.btn-s4:hover {
    color: #fff;
    background-color: #393939;
    border-bottom: 0px solid #454545;
}
.btn-s5 {
    /*color: #ffb600;*/
    padding: 10px 25px;
    background-color: #fff;
    border-radius: 1px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 2px solid;
}
.btn-s5 i, .btn-s4 i{
    padding-right: 6px;
}
.btn-s5:hover {
    color: #393939;
    border: 2px solid #393939;
}
.btn-s5.gray {
    color: #ccc;
    background: none;
    border: 1px solid #ccc;
}
.btn-s5.gray2 {
    color: #ccc;
    background: #141414;
    border: 1px solid #141414;
    padding: 8px 10px;
}
.btn-s5.gray2:hover {
    color: #fff ;
    border: 1px solid;
}
.btn-s5.gray3 {
    color: #222;
    background: #f3f3f3;
    border: 1px solid #f9f9f9;
    padding: 8px 10px;
}
.btn-s5.gray3:hover {
    color: #fff ;
    border: 1px solid ;
}
.btn-s5.gray:hover {
    color: #fff;
    /*background-color: #ffb600;*/
    border: 1px solid;
}
.btn-s5.orange {
    color: #fff;
    border: 1px solid;
}
.btn-s5.orange:hover {
    color: #222;
    background-color: #fff;
    border: 1px solid;
}
.btn-s5.light {
    color: #fff;
    background: none;
    border: 1px solid #fff;
}
.btn-s5.light:hover {
    color: #666;
    background-color: #fff;
    border: 1px solid #999;
}

.btn-s5.light2 {
    color: #fff;
    background: none;
    border: 1px solid #fff;
    padding: 8px 18px;
}
.btn-s5.light2:hover {
    color: #141414;
    background-color: #fff;
}
.btn-s5.light3 {
    color: #fff;
    background: none;
    border: 1px solid #fff;
    padding: 2px 10px;
}

@media (max-width: 991px) {
    .btn-s5 {
        padding: 8px 8px;
        border: 2px solid;
    }
    .btn-s5.light2 {
        padding: 8px 8px;
    }

    .btn-m5.gray {
        padding: 8px 10px;
        background-color: #fff;
    }
}

/* ============================
     25.2 medium buttons
============================= */
.btn-m1 {
    color: #fff;
    padding: 14px 35px;
    /*background-color: #ffb600;*/
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-m1:hover {
    color: #fff;
    background-color: #393939;
}
.btn-m1.white {
    color: #fff;
    padding: 14px 35px;
    border: 2px solid #fff;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
}
.btn-m1.white:hover {
    color: #272727;
    background-color: #fff;
}
.btn-m1.white.active {
    color: #272727;
    background-color: #fff;
}
.btn-m3 {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    padding-right: 30px;
    padding-left: 68px;
    position: relative;
    /*background-color: #ffb600;*/
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.btn-m3 span {
    position: absolute;
    left: 0;
    width: 48px;
    background-color: #8db737;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 1px solid  rgba(0,0,0,0.15);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn-m3:hover {
    color: #fff;
}
.btn-m3 span i {
    color: #fff;
    font-size: 18px;
    margin-left: 16px;
}
.btn-m3:hover span, .btn-m3.active span {
    color: #fff;
    background-color: #393939;
    border-right: 1px solid #181818;
}

.btn-m2 {
    color: #fff;
    padding: 14px 35px;
    /*background-color: #ffb600;*/
    border-radius: 30px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-bottom: 1px solid #393939;
    white-space: nowrap;
}
.btn-m2:hover {
    color: #fff;
    background-color: #393939;
}

.btn-m4 {
    color: #fff;
    padding: 14px 35px;
    /*    background-color: #ffb600;*/
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-bottom: 3px solid #393939;
    white-space: nowrap;
}
.btn-m4:hover {
    color: #fff;
    background-color: #393939;
    border-bottom: 0px solid #454545;
}
.btn-m5 {
    /*color: #ffb600;*/
    padding: 12px 35px;
    background-color: #fff;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 2px solid;
}
.btn-m5:hover {
    color: #393939;
    border: 2px solid #393939;
}
.btn-m5.gray {
    padding: 12px 35px;
    background-color: #fff;
    border-radius: 1px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 2px solid #fff;
    color: #141414;
}
.btn-m5.gray.ms {
    padding: 7px 10px;
    border-radius: 0px;
}
.btn-m5 i, .btn-m4 i{
    padding-right: 6px;
}
.btn-m5.gray:hover {
    color: #fff;
    /*    background-color: #ffb600;*/
    border: 2px solid;
}
/* =======================
    25.4 button effect
======================== */

/* Bounce To Bottom */
.btn-bounce-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.btn-bounce-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-bounce-bottom:hover, .btn-bounce-bottom:focus, .btn-bounce-bottom:active {
    color: white;
}
.btn-bounce-bottom:hover:before, .btn-bounce-bottom:focus:before, .btn-bounce-bottom:active:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/*bounce to top*/
.btn-bounce-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.btn-bounce-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-bounce-top:hover, .btn-bounce-top:focus, .btn-bounce-top:active {
    color: white;
}
.btn-bounce-top:hover:before, .btn-bounce-top:focus:before, .btn-bounce-top:active:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


.btn-s6 {
    color: #ccc;
    padding: 8px 16px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #ccc;
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btn-s6.social {
    padding: 7px 15px;
    border-radius: 0;
}
.btn-s6.service {
    padding: 7px 15px;
    border-radius: 0;
}
.btn-s6 i{
    padding-right: 6px;
}
.btn-s6.social i{
    padding-right: 0px;
}
.btn-s6.service i{
    padding-right: 0px;
}
.btn-m6 {
    color: #24201f;
    padding: 12px 35px;
    border-radius: 2px;
    white-space: nowrap;
    border: 1px solid #ccc;
}
.btn-m6:hover{
    color: #fff;
}
.btn-m6 i{
    padding-right: 6px;
}

.btn-lg6 {
    padding: 16px 45px;
    border-radius: 2px;
    border: 2px solid;
}
.btn-lg6 i{
    padding-right: 6px;
}

/* ===========================
    26.2. charts
============================= */
.charts > div{
    float: left;
    display: inline-block;
    margin: 10px;
    text-align: center;
    padding-top: 10px;
}
.charts p{
    text-align: center;
    margin-top: 10px;
    color: #666;
}
.charts-pie > div{
    float: left;
    display: inline-block;
}
.charts-pie #canvas-holder{
    margin-top: 40px;
    margin-left: 40px;
}
.charts-pie  h3{
    font-size: 20px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}
.charts-pie  p{
    font-size: 12px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
.charts-pie-body .content{
    margin-top: 20px;
    margin-left: 20px;
    font-size: 12px;
    line-height: 10px;
    text-align: left;
    color: #666;
}

.charts-pie-body .content p:nth-of-type(1) i{
    padding-right:10px;
    color: #a6c3a0;
}
.charts-pie-body .content p:nth-of-type(2) i{
    padding-right:10px;
    color: #40C5E6;
}
.charts-pie-body .content p:nth-of-type(3) i{
    padding-right:10px;
    color: #D6EEF0;
}
.charts-pie-body .content p:nth-of-type(4) i{
    padding-right:10px;
    color: #D0E9CC;
}
.charts-pie-body .content p:nth-of-type(5) i{
    padding-right:10px;
    color: #F8F4A0;
}
.charts-pie-body .content p:nth-of-type(6) i{
    padding-right:10px;
    color: #9ACDF0;
}
.charts-pie-body .content p:nth-of-type(7) i{
    padding-right:10px;
    color: #F6A6C9;
}
.charts-pie-body .content p:nth-of-type(8) i{
    padding-right:10px;
    color: #B69FCD;
}
.charts-pie-body .content p:nth-of-type(9) i{
    padding-right:10px;
    color: #FDCFA2;
}
.charts-pie-body .content p:nth-of-type(10) i{
    padding-right:10px;
    color: #5473B6;
}
.charts-pie-body .content p:nth-of-type(11) i{
    padding-right:10px;
    color: #56C4C5;
}
.charts-pie-body .content p:nth-of-type(12) i{
    padding-right:10px;
    color: #9ECB3C;
}
.charts-pie-body .content p:nth-of-type(13) i{
    padding-right:10px;
    color: #70AADC;
}
.charts-pie-body .content p:nth-of-type(14) i{
    padding-right:10px;
    color: #EC514C;
}
.charts-pie-body .content p:nth-of-type(15) i{
    padding-right:10px;
    color: #F9F499;
}
.charts-pie-body .content p:nth-of-type(16) i{
    padding-right:10px;
    color: #5EBC66;
}
.charts-pie-body .content p:nth-of-type(17) i{
    padding-right:10px;
    color: #5F3E9A;
}
.charts-pie-body .content p:nth-of-type(18) i{
    padding-right:10px;
    color: #FBB05C;
}
.charts-pie-body .content p:nth-of-type(19) i{
    padding-right:10px;
    color: #8E6466;
}

/* ============================
    27. FontAwesome icons box
============================== */

.font5 {
    /*color: #ffb600;*/
    font-size: 45px;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    border: 1px solid;
    margin-bottom: 12px;
}
.font17 {
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 27px;
    line-height: 50px;
    border: 1px solid #ddd;
    text-align: center;
}
.font17.orange{
    color:#222;
    border-radius: 2px;
    border : 1px solid;
}
.font17.orange:hover{
    color:#fff;
}
/* =================================
    27.2. Pricing Box
================================ */

/*pricing box style 03*/
.pricing-box3 {
    border:1px solid #EFEFEF;
    text-align:center;
    -webkit-transition: background-color .4s linear, color .4s linear;
    transition: background-color .4s linear, color .4s linear;
}
div.price2 {
    line-height:120px;
    font-size:24px;
    color:#666;
    margin:0 auto;
    text-align:center;
    /*background-color: #f4f4f4;*/
}
div.price2 p{
    margin: 0;
}
.pricing-box3 h4 {
    font-size:20px;
    /*    background-color: #ffb600;*/
    margin: 0;
    padding: 10px;
    border-left: 15px solid #24201f;
    border-right: 15px solid #24201f;

}

.pricing-box3:hover div.price,
.pricing-box3:hover h4,
.pricing-box3:hover .btn-s1{
    color:#fff;
    border-color:#545454;
}
.pricing-box3 hr {margin-top: 0px; border-color:#fff;}
.pricing {list-style:none; padding:0; margin:0}
.pricing li {
    font-size: 14px;
    line-height: 40px;
    margin: 0 auto;
    padding: 0;
    text-align: center;

    border-bottom: 1px dotted #f3f3f3;
}

/* ===========================
    28. List Item
=========================== */

.piko-li{
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding-left: 0;
}
.piko-li li{
    padding: 5px;
    display: inline-block;
    font-size: 11px;

}
.piko-li li i{
    padding-right: 10px;
    font-size: 14px;
    color: #999;
}

/*arrow list*/
ul{
    padding-left:0;
}
ul.arrow li{
    list-style: outside none none;
    padding-bottom: 7px;
    padding-left: 20px;
    padding-top: 7px;
    position: relative;
    border-bottom: 1px dashed #CCC;
}
ul.arrow.no-border li{
    border-bottom: 0;
}
ul.arrow li:last-child{
    border-bottom: 0;
}
ul.arrow li:before {
    font-family: 'FontAwesome';
    speak: none;
    display: inline-block;
    content: '\f105';
    left: 0px;
    position: absolute;
    top: 5px;
    -webkit-font-smoothing: antialiased;
}

/*list iteam*/
ul.circle, ol.circle{list-style-type: circle;}
ul.square, ol.square{list-style-type: square;}
ul.disc, ol.disc{list-style-type: disc;}
ul.roman, ol.roman{list-style-type: upper-roman;}
ul.lower-alpha, ol.lower-alpha{list-style-type: lower-alpha;}
ul.decimal, ol.decimal{ list-style-type:decimal;}

@media (min-width: 992px) and (max-width: 1199px) {
    .piko-title5 h3.big {
        font-size: 37px;
    }
    .piko-title1 .line{
        width: 85%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .piko-divider1, .piko-divider2, .piko-divider3, .piko-divider4, .piko-divider5, .piko-divider12 {
        margin: 50px 0;
    }
    .piko-divider7{
        margin: 50px 0;
    }
    .piko-title1 .line{
        width: 80%;
    }
    .piko-title5 h3 {
        font-size: 22px;
    }

}
@media (max-width: 480px) {
    .piko-divider1, .piko-divider2, .piko-divider3, .piko-divider4, .piko-divider5, .piko-divider12 {
        margin: 30px 0;
    }
    .piko-divider7{
        margin: 50px 0;
    }
    .piko-title5 h3.big {
        font-size: 30px;
    }
    .counter7 {
        margin-bottom: 50px;
    }
    .piko-title3 h3{
        font-size: 20px;
    }
}

/* ===========================
    29. owl carusel v1.3.3
=========================== */
.owl-carousel .owl-nav > div{
    position: absolute;
    font-size: 18px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.owl-carousel:hover .owl-nav > div{
    opacity: 1;
    filter: alpha(opacity=100);
}
.owl-carousel .owl-nav > div.owl-prev{
    left: -30px;
}
.owl-carousel .owl-nav > div.owl-next{
    right: -30px;
}
.owl-carousel:hover .owl-nav > div.owl-prev{
    left:10px;
}
.owl-carousel:hover .owl-nav > div.owl-next{
    right: 10px;
}
.navdiv_bottom .owl-carousel .owl-nav > div{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    top: 100%;
}
.navdiv_top .owl-carousel .owl-nav > div{
    /*    -webkit-transform: translateY(-20%);
        -ms-transform: translateY(-20%);
        -o-transform: translateY(-20%);
        transform: translateY(-20%);*/
    top: -45px;
    opacity:1;
}
.navdiv_top .owl-carousel .owl-nav > div.owl-prev{
    left: inherit;
    right: 50px;
}
.navdiv_top .owl-carousel .owl-nav > div.owl-next{
    right: 20px;
}

/*product slide*/
.product-catigories .owl-carousel .owl-nav > div,
.feature-product-slide .owl-carousel .owl-nav > div{
    padding: 6px 14px;
    color:#fff;
    background: #45bf55;
}
.owl-nav-center .owl-carousel:hover .owl-nav > div.owl-prev,
.product-catigories .owl-carousel:hover .owl-nav > div.owl-prev,
.feature-product-slide .owl-carousel:hover .owl-nav > div.owl-prev{
    left:0;
}
.owl-nav-center .owl-carousel:hover .owl-nav > div.owl-next,
.product-catigories .owl-carousel:hover .owl-nav > div.owl-next,
.feature-product-slide .owl-carousel:hover .owl-nav > div.owl-next{
    right: -1px;
}
.product-catigories .owl-carousel .owl-nav > div:hover,
.feature-product-slide .owl-carousel .owl-nav > div:hover{
    color: #24201f;
}
/*post slide shortcode*/
.owl-nav-center.owl-carousel:hover .owl-nav > div{
    padding: 7px 2px 1px;
    border: 1px solid #d6d6d6;
    background: #e6e6e6;
    color: #24201f;
}
.category-product-slide.owl-carousel .owl-nav > div:hover,
.owl-nav-center.owl-carousel .owl-nav > div:hover{
    background-color: #45bf55;
    border: 1px solid #45bf55;
    color:#fff;
}
/*owl nav show outer*/
.owl-nav-show-hover.owl-carousel .owl-nav > div,
.owl-nav-show-inner.owl-carousel .owl-nav > div,
.owl-nav-show.owl-carousel .owl-nav > div{
    padding: 7px 10px;
    background: #e6e6e6;
    color: #24201f;
}
.owl-nav-show-hover.owl-carousel .owl-nav > div:hover,
.owl-nav-show-inner.owl-carousel .owl-nav > div:hover,
.owl-nav-show.owl-carousel .owl-nav > div:hover{
    background-color: #45bf55;
    color:#fff;
}
.owl-nav-show-hover.owl-carousel:hover .owl-nav > div.owl-prev,
.owl-nav-show.owl-carousel:hover .owl-nav > div.owl-prev{
    left:0;
}
.owl-nav-show-hover.owl-carousel:hover .owl-nav > div.owl-next,
.owl-nav-show.owl-carousel:hover .owl-nav > div.owl-next{
    right: -1px;
}
.owl-nav-show-inner.owl-carousel .owl-nav > div{
    opacity: 1;
}
/*owl nav show inner*/
.owl-nav-show-inner.owl-carousel .owl-nav > div.owl-prev{
    left: 0px;
}
.owl-nav-show-inner.owl-carousel .owl-nav > div.owl-next{
    right: -1px;
}
.owl-nav-show-inner.owl-carousel:hover .owl-nav > div.owl-prev{
    left:0;
}
.owl-nav-show-inner.owl-carousel:hover .owl-nav > div.owl-next{
    right: -1px;
}
/*owl pagination*/
.owl-carousel .owl-dots .owl-dot{
    width: 10px;
    height: 10px;
    border:1px solid #24201f;
    background-color: #fafafa;
    display: inline-block;
    opacity: 0.3;
    filter: alpha(opacity=20);
    margin: 0 5px;
}
.owl-carousel .owl-dots .owl-dot.active{
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #24201f;
}
#client.owl-carousel .owl-dots .owl-dot.active{
    background-color: #ccc;
}
.owl-dots{
    margin:15px 0;
    text-align:center;
}
/*bootrap tabs fix*/
.tab-content.slide{
    margin-bottom:45px;
}
.slide.tab-content > .tab-pane {
    display: block;
    height:0;
}
.slide.tab-content > .active {
    height:auto;
}
/* ===========================================
    switcher custom color and header setting
===================================================*/

.switcher{
    top: 31%;
    position: fixed;
    left:0;
    z-index: 999;
}
.switcher-hide{
    margin-left: -200px;
    -webkit-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.switcher .box{
    width: 240px;
    position: relative;
}
.switcher .box .click-box{
    width:40px;
    height:40px;
    background-color: #45bf55;
    position: absolute;
    top:0;
    right:0;
    line-height: 40px;
    border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
}
.switcher .box .click-box i{
    color:#141414;
    padding: 0 10px;
    font-size: 20px;
}
.switcher .box .content{
    top:0;
    left:0;
    width: 200px;
    padding:15px;
    min-height: 100px;
    position: absolute;
    border:1px solid #ccc;
    background-color: #fff;
    box-shadow: -1px 1px 3px 0px rgba(0,0,0,0.51);

}
.switcher .box .content .layout li{
    margin-top: 25px;
    text-align: center;
}
.switcher .box .content .layout li a{
    padding: 5px 10px;
    border: 1px solid #ccc;
}
.switcher .box .content .layout li a:hover{
    background-color: #f3f3f3;
}

/* ----------------------------------
      20. recent project & porftolo
------------------------------------- */
.recent-project {
    position: relative;
    overflow: hidden;
}
.recent-project:before,
.recent-project:after {
    content: "";
    display: table;
}

.recent-project:after {
    clear: both;
}

.recent-project figure {
    background: #fff;
    width: 100%;
}
.recent-project figure img {
    width:100%;
    display: initial;
    opacity: 1;
    -webkit-transition: opacity 0.35s ease;
    transition: opacity 0.35s ease;
}
.recent-project .title {
    position: absolute;
    left: 0;
    top: 50%;
    color: #fff;
    width: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.recent-project:hover .title {
    top: 30%;
    opacity: 1;
    visibility: visible;
}
.recent-project .title h4 {
    color:#fff;
    text-transform: uppercase;
}
/*.recent-project .title h4 span {
    font-weight: 600;
}*/
.recent-project .title hr {
    margin: 0 auto;
    width: 30px;
    height: 4px;
    border:0;
    /*background-color: #ffb600;*/
}
.recent-project figure .project-link{
    position: absolute;
    left: 0px;
    bottom: -50%;
    width: 100%;
    padding: 16px 30px;
    line-height: 18px;
    text-transform: capitalize;
    /*background: #ffb600;*/
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.recent-project figure .project-link a{
    color: #141414;
    display:block;
}
.recent-project figure .project-link:hover a{ color: #fff;}
.recent-project figure .project-link a i{
    float: right;
}

.recent-project figure:hover .project-link {
    bottom: 0px;
    opacity: 1;
    visibility: visible;
}
/*project button*/
.recent-project figure .project-btn{
    position: absolute;
    left: 0;
    bottom: -50%;
    width: 100%;
    text-align: center;
    text-transform: capitalize;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
.recent-project figure .project-btn a{
    color: #fff;
}
.recent-project figure .project-btn a:hover{
    color: #ffb600;
}


.recent-project figure:hover .project-btn {
    margin-bottom: -40px;
    bottom: 50%;
    opacity: 1;
    visibility: visible;
}

/*overlay effect for all section*/

.recent-project figure:hover .overlay {
    opacity: 1;
    visibility: visible;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

/*project style2*/
.testimonial-wrap,
.service-shortcode,
.post-shortcode,
.portfolio-shortcode {
    padding-bottom:45px;
}
.feature-project {
    overflow:hidden;
}
.feature-project .box {
    overflow:hidden;
    float:left;
    position:relative;
    padding:0;
    margin:0;
    background:#24201F
}
.feature-project .box img {
    width:100%;
    position:relative;
    opacity:1;
    display:block;
}
.feature-project figure figcaption::before,.feature-project figure figcaption::after {
    pointer-events:none
}
.feature-project figure figcaption,.feature-project figure a {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%
}
.feature-project figure a {
    text-indent:-999em;
    overflow:hidden;
    display:block;
    z-index:1
}
.feature-project figure figcaption {
    padding:0;
    color:#fff;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}

.feature-project .box .overlay2 {
    bottom:0;
    width:100%;
    position:absolute;
    padding:12px 8px;
    background:#24201F;
    overflow:hidden;
    -webkit-transition:-webkit-transform .35s;
    transition: -webkit-transform .35s;
    transition: transform .35s;
    transition:transform .35s, -webkit-transform .35s;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.feature-project .box:nth-child(even) .overlay2 {
    background:#0d0d0d;
}
.feature-project .box .overlay2 h4,.feature-project .box .overlay2 p {
    margin:0;
    text-align:center;
    line-height:1
}
.feature-project .box .overlay2 h4 {
    text-transform: uppercase;
    letter-spacing:0;
    margin:0 0 4px 0;
    color:#fff;
    font-weight: 600;
}
.feature-project .box .overlay2 p {
    font-size: 12px;
    font-weight: 500;
    color: #ccc;
}
.feature-project .box .overlay2 p span{
    padding:0 8px 0 3px;
}
.box-text {
    margin:6% 4%;
    opacity:0;
    -webkit-transition:opacity .2s,-webkit-transform .35s;
    transition: opacity .2s,-webkit-transform .35s;
    transition: opacity .2s,transform .35s;
    transition:opacity .2s,transform .35s,-webkit-transform .35s;
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    padding:0;
    border-top:1px solid #000;
    border-bottom:1px solid #2d2d2d;
    color:#fff
}
.feature-project .box .box-text p {
    text-align:center;
    color:#fff;
    border-top:1px solid #2d2d2d;
    border-bottom:1px solid #000;
    padding:6% 4%;
    margin:0
}
.feature-project .box:hover img {
    opacity:0
}

.feature-project .box:hover .box-text {
    opacity:1;
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0)
}
.feature-project .box:hover .overlay2 {
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    background:transparent
}
/*feature project*/
.owl-padding-less .feature-project .box{
    background: rgba(0, 0, 0, 0.9);
}
.owl-padding-less .feature-project .box .overlay2 {background: rgba(0, 0, 0, 0.6);}
.owl-padding-less .feature-project .box:hover img {
    opacity:0.2
}
.owl-padding-less .feature-project .box .box-text p,
.owl-padding-less .box-text{border:none}


/* ===============================
            Portfolio filter
==================================== */
.filters-container{
    margin-bottom: 15px;
}

.filters-container:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

#filter{
    margin: 0px 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#filter>li{
    display: block;
    cursor: pointer;
    color: #141414;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    padding: 11px 15px;
    line-height: 30px;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 700;
}

#filter>li i{
    margin-right:7px;
}

#filter>li.selected{
    position: relative;
    /*color:#ffb600;*/
}
#filter>li.selected:before{
    content: '';
    width: 30px;
    bottom: -2px;
    border-top: 3px solid;
    position: absolute;
}
/*===========================
    32.3    map contact
============================*/
.contact{
    padding: 80px 0;
}
.map-contact-wrap{
    position: relative;;
}

.map-contact-wrap #map_contact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#map_contact{
    height: 600px;
}
.map-contact-wrap .contact .container{
    position: relative;
    z-index: 3;
}
.map-contact-wrap .contact-box{
    padding: 40px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    box-shadow: 2px 2px 5px #aaaaaa;
    -webkit-box-shadow: 2px 2px 5px #aaaaaa;
    -moz-box-shadow: 2px 2px 5px #aaaaaa;
    -o-box-shadow: 2px 2px 5px #aaaaaa;
}
.map-contact-wrap .contact-box h1 {
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 15px;
    margin-bottom: 0px;
    text-transform: uppercase;
}
.coming-soon .text-center h4,
.coming-soon .text-center h2{
    color: #ccc;
}


/* ================================
    33.  Media Query
=================================== */

@media (min-width: 1200px) and (max-width: 1280px) {
    .hidden-mac{
        display: none;
    }
    .margin-b40{
        margin-top: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .padding-t20-media{
        padding-top: 20px;
    }
    .padding-l20-media{
        padding-left: 20px;
    }
    .padding-b20-media{
        padding-bottom: 5px;
    }
    .padding-b20-media.ex{
        padding-bottom: 40px;
    }
    .margin-t73{
        margin-top: 73px;
    }
    .team1 .box figure.embed-responsive{
        min-height: 205px;
    }
    footer {
        line-height:50px;
        padding: 10px 0;
    }
    .get-quote .layer p{
        font-size: 15px;
        padding-left: 20px;
        line-height: 20px;
        padding-top: 27px;
    }
    .page-banner h1 {
        font-size: 28px;
    }
    .page-banner .breadcrumb {
        margin-top: -5px;
        text-shadow: 1px 1px 1px #666;
    }
    .coming-time-box {
        width: 450px;
    }
    .margin-b40 {
        margin-bottom: 20px;
    }
    .home-box-wapper.piko-layout-header-fullscreen.piko-layout-header-static .piko-layout-header,
    .home-box-wapper.piko-layout-header-fixed .piko-layout-header {
        width: 100%;
    }
    .home-box-wapper {
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .project-view .social-share ol.breadcrumb{
        margin-left: 315px;
    }

}
@media (min-width: 992px){
    .owl-nav-show.owl-carousel .owl-nav > div{
        opacity: 1;
    }
}
@media (max-width: 991px){
    .margin-t70,
    .forcefullwidth_wrapper_tp_banner{
        margin: 0 !important;
    }
    .contact{
        padding: 0 0 1px;
    }
    .map-contact-wrap .contact-box{
        box-shadow: inherit;
    }
}
/* Styles */
@media (min-width: 768px) and (max-width: 991px) {
    .home-box-wapper {
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .accordion-toggle:after {
        content:"";
    }
    .panel-heading.collapsed .accordion-toggle:after {
        content:"";
    }
    .get-quote .layer p{
        font-size: 17px;
        padding-left: 20px;
        line-height: 20px;
        padding-top: 30px;
    }
    .margin-t150 {
        margin-top: 0px;
    }
    .margin-t101 {
        margin-top: 0;
    }
    .margin-t73{
        margin-top: 0px;
    }
    .padding-t20-media{
        padding-top: 20px;
    }
    .padding-t20-media-icon{
        padding-top: 20px;
    }
    .padding-l20-media{
        padding-left: 20px;
    }
    .padding-b20-media{
        padding-bottom: 30px;
    }
    footer {
        line-height:40px;
        padding: 15px 0 10px;
    }
    .row.full{
        padding-right: 15px;
        padding-left: 15px;
    }
    .no-gutter4.sm [class*="-4"] {
        padding-left:2px;
        padding-right:2px;
    }
    .margin-t0{
        margin-top: 20px;
    }
    .home-box-wapper.piko-layout-header-fullscreen.piko-layout-header-static .piko-layout-header,
    .home-box-wapper.piko-layout-header-fixed .piko-layout-header {
        width: 100%;
    }

    .no404 .error p{
        margin: -100px 0 0 150px;
    }
    .no404 .error p:last-child{
        margin: -100px 0 0 150px;
    }
    .mobile.shop-cart:after {
        left: 70%;
    }
    .testimonials-03 p{
        max-width: 100%;
    }
    .project-view .social-share ol.breadcrumb{
        margin-left: 235px;
    }
    .coming-time-box{
        margin-left: 200px;
    }
}

@media (max-width: 767px) {
    .page-banner h1 {
        text-align: center;
    }
    .testimonials-03 p{
        max-width: 100%;
    }
    footer p{
        text-align: center;
    }
    footer .link {
        float: none;
        text-align:center;
    }
    footer .link a{
        float: none;
        text-align:center;
    }
    .padding-tb100{
        padding: 50px 0;
    }
    .accordion-toggle:after {
        content:"";
    }
    .panel-heading.collapsed .accordion-toggle:after {
        content:"";
    }
    .margin-t150 {
        margin-top: 0px;
    }
    .margin-t101 {
        margin-top: 0;
    }
    .margin-t73{
        margin-top: 0;
    }
    .padding-b20-media{
        padding-bottom: 20px;
    }
    .padding-t20-media-icon{
        padding-top: 20px;
    }
    .margin-b15-media{
        margin-bottom: 15px;
    }
    footer {
        line-height:30px;
        padding: 15px 0 10px;
    }
    .social-wrap {
        float:none;
        display: block;
    }
    .screen-middle {
        position:inherit;
        top: inherit;
        left: inherit;
        -webkit-transform:none;
        transform:none;
        overflow-y:hidden;
        overflow-x: hidden;
        padding: 35px 0;
    }
    .padding-t100{
        padding:50px 0;
    }
    .margin-t120 {
        margin-top: 50px;
    }
    .padding-t70 {
        padding-top: 50px;
    }
    .padding-t70 .padding-tb50.text-left{
        padding:0;
        margin-top: 0;
    }
    .padding-b100 {
        padding-bottom: 50px;
    }
    .padding-tb75{
        padding: 50px 0 30px;
    }
    .team1 .padding-tb50{
        padding: 50px 0 30px;
    }

    .piko-hr-title {
        width: 100%;
    }
    .padding-t40{
        padding-top: 0px;
    }
    .row.full{
        padding-right: 15px;
        padding-left: 15px;
    }
    .page-banner h1 {
        font-size: 30px;
    }
    .page-banner .breadcrumb.pull-right {
        float:none !important;
        text-align: center;
    }
    .margin-t0{
        margin-top: 20px;
    }
    .no404 .error h3{
        font-size: 150px;
    }
    .no404 .error p{
        font-size: 30px;
        margin: -100px 0 0 40px;
        -webkit-transform:rotate(150deg);
        transform:rotate(150deg);
    }
    .no404 .error p:last-child{
        font-size: 30px;
        margin: -100px 0 0 40px;
        -webkit-transform:rotate(-150deg);
        transform:rotate(-150deg);
    }
    .mobile.shop-cart:after {
        left: 65%;
    }
    .home-box-wapper {
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .home-box-wapper-dark {
        box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.2);
        width: 100%;
    }
    .project-view .top-img {
        height: 300px;
    }
    .project-view .info{
        margin: 0;
    }
    .blog-view{
        margin-bottom: 40px;
    }
    .blog-comment .media .media-body h4 a {
        /*float: left;*/
        margin: 10px 0;
        padding-right: 20px;
    }
    .blog-comment .media .media-body  p {
        padding-top:20px;
    }
    .shop-page {
        margin-top: 20px;
    }
    .modal-lg {
        max-width:90%;
        margin-right:15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #filter{
        display: block;
    }
    .project-view .social-share ol.breadcrumb{
        margin-left: 0px;
        line-height: 40px;
    }
    .block, .block2{
        display: inline-block;
        margin-left: 20px;
        margin-bottom: 40px;
    }
    .block:last-child, .block2:last-child{
        margin-bottom: 0;
    }
    .counter3.small .one i {
        font-size: 48px;
        padding-bottom: 20px;
        padding-right: 25px;
        padding-top:25px;
        padding-left:25px;
    }
    .map-contact-wrap .contact-box {
        padding: 40px 15px;
    }
}

@media (max-width: 480px) {
    .margin-t150 {
        margin-top: 0px;
    }
    .get-quote .layer p{
        font-size: 14px;
        line-height: 20px;
        padding-top: 15px;
    }
    .coming-time-box {
        width: 380px;
    }
    .padding-tb25-media{
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 10px;
    }
    .no-gutter3 [class*="-3"], .no-gutter5 [class*="-4"],
    .no-gutter4 [class*="-4"], .no-gutter4 [class*="-12"], .no-gutter2 [class*="-12"],
    .no-gutter1 [class*="-6"]{
        padding-right: 15px;
        padding-left: 15px;
    }
    .piko-lang .dropdown-menu{
        left: inherit;
        right:0;
    }
}
/*new portfolio style*/

.feature-project {
    overflow:hidden;
    /*margin:0 -4px*/
}
.feature-project .box {
    overflow:hidden;
    float:left;
    position:relative;
    padding:0;
    margin:0;
    background:#191919
}
.feature-project .box img {
    width:100%;
    position:relative;
    opacity:1;
    display:block;
}
.feature-project figure figcaption::before,.feature-project figure figcaption::after {
    pointer-events:none
}
.feature-project figure figcaption,.feature-project figure a {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%
}
.feature-project figure a {
    text-indent:-999em;
    overflow:hidden;
    display:block;
    z-index:1
}
.feature-project figure figcaption {
    padding:0;
    color:#fff;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}

.feature-project .box .overlay2 {
    bottom:0;
    width:100%;
    position:absolute;
    padding:12px 8px;
    background:#090909;
    overflow:hidden;
    -webkit-transition: -webkit-transform .35s;
    transition: -webkit-transform .35s;
    transition: transform .35s;
    transition:transform .35s, -webkit-transform .35s;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.feature-project .box:nth-child(even) .overlay2 {
    background:#0d0d0d;
}
.feature-project .box .overlay2 h4,.feature-project .box .overlay2 h5 {
    font-size:15px;
    margin:0;
    color:#fff;
    text-transform:uppercase;
    text-align:center;
    line-height:1
}
.feature-project .box .overlay2 h4 {
    letter-spacing:0;
    margin:0 0 4px 0
}
.feature-project .box .overlay2 h5 {
    font-size:10px;
    margin:0;
    color:#ffb600;
}
.feature-project .box .overlay2 h5 span{
    padding:0 10px 0 5px;
}
.box-text {
    margin:6% 4%;
    opacity:0;
    -webkit-transition: opacity .2s,-webkit-transform .35s;
    transition: opacity .2s,-webkit-transform .35s;
    transition: opacity .2s,transform .35s;
    transition:opacity .2s,transform .35s,-webkit-transform .35s;
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    padding:0;
    border-top:1px solid #000;
    border-bottom:1px solid #2d2d2d;
    color:#fff
}
.feature-project .box .box-text p {
    text-align:center;
    color:#fff;
    border-top:1px solid #2d2d2d;
    border-bottom:1px solid #000;
    padding:6% 4%;
    margin:0
}
.feature-project .box:hover img {
    opacity:0
}

.feature-project .box:hover .box-text {
    opacity:1;
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0)
}
.feature-project .box:hover .overlay2 {
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    background:transparent;
}






.titolo-libro {
  color: #009ee0;
  font-weight: 400;
  font-family: inherit;
  font-size: 33px;
	line-height: 33px;
  margin-bottom: 15px !important;
}

.sottotitolo-libro {
  color: #333;
  font-weight: 400;
  font-family: inherit;
  font-size: 23px;
  margin-bottom: 15px !important;
}

.separatore {
	border: 1px solid #f3f3f3;
	margin: 0px 0px 20px 0px;
}
	
	.bottone-link {
		background-color: #009ee0;
		border-radius: 10px;
		color: #fff;
		padding: 10px;
	}
	
		.bottone-link:hover {
		background-color: transparent;
		border-radius: 10px;
		color: #009ee0;
		padding: 10px;
			border: 1px solid #009ee0;
	}


	.bottone-bianco-link {
		background-color: #fff;
		border-radius: 9999px;
		color: #333;
		padding: 10px;
		border: 1px solid #333;
	}
	
		.bottone-bianco-link:hover {
		background-color: #e2e1e3;
		color: #333;
		padding: 10px;
		border: 1px solid #333;
	}