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

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

1. Margin, Padding.
------------------------------------------
2. Font-size, font-weight, Font Color.
------------------------------------------
3. Titie Header
------------------------------------------
4. border shadow
------------------------------------------
5. Gutter, no padding Bootstrap
-----------------------------------------
6. Thumbnail, hover img zoom
-----------------------------------------
7. icon boxes (vision, certificate,)
-----------------------------------------
8. testimonial and client
----------------------------------------
9. social icon effect
---------------------------------------
10. Constructin processing
----------------------------------------
11. get quote
----------------------------------------
12. Scrolling Parallax background,
    opacity color
----------------------------------------
13.  media box Portfolio
----------------------------------------
14.
----------------------------------------
15. project-view page and profile
---------------------------------------
16. Shop Page
--------------------------------------
17. Blog view, blog signle page
--------------------------------------
18
-------------------------------------
19. Home page boxed
-------------------------------------
20.
-------------------------------------
21. Team members
------------------------------------
22. Timer Coming soon page
------------------------------------
23.Pattern and dot pattern overlay
------------------------------------
24. Footer and sub menu
-----------------------------------
25. Bootstrap Changing
------------------------------------
26. //
------------------------------------
27. cost calculation
------------------------------------
28. media query
------------------------------------

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

/* =================================
            Google Fonts
================================= */

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900);
/*font-family:'Raleway', serif;*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
/*font-family: 'Open Sans', sans-serif;*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
/*font-family: 'Roboto Condensed', sans-serif;*/

body{
    font-family:'Raleway', serif;
    font-weight: 400;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
}
body {
    overflow:hidden;
}
html, body {
    overflow-x: hidden;
    width: 100%;
}
body p, .arrow li{
    color: #666;
}
ol, ul { list-style: none; }



/* =================
===   Piko 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: 44px;
    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 !important;*/
}
.piko-layout-header .piko-topbar .piko-top-menu > .piko-icons > li {
    border-left: 1px solid #fff !important;
    display: inline-block;
    float: left;
    height: 44px;
    line-height: 44px;
    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: #999;
}
.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: 44px;
    line-height: 44px;
    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 .white{ color: #fff;}
.piko-lang .dropdown:hover .dropdown-menu {
    display: block !important;
}
.piko-lang .dropdown-menu {
    border-radius: 0;
    min-width: 160px;
    padding: 0;
    margin: 0;
}
.piko-lang .piko-icons li:first-child{
    border-left: 0px !important;
}
.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: #fff;
}
.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;
    font-weight: 400;
    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: 0 !important;
    }
    .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: 9995;
        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: 57px;
    }
    .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 !important;
        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;
    }
}

/* 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: -webkit-flex;
        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;
        font-weight: 500;
    }
    .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 !important;
    }


    .mobile.shop-cart > li > a:hover {
        background-color: transparent !important;
        color: #141414 !important;
    }
    .mobile.shop-cart > li > a img{
        float:right;
        width:50px;
        height:50px;
    }
    .mobile.shop-cart > li >  span.quantity{
        /*padding:0px 0px 0;*/
    }
    .mobile.shop-cart > li >  span.total{
        float: right;
    }
}
.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 #ffb600;
}

@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: 1px;
        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 !important;
    }
    .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 !important;
        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;
        font-weight: 400;
        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: -webkit-flex;
        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;
        font-weight: 500;
    }
    .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 !important;
    }
    /*    .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 !important;
        color: #141414 !important;
    }
    .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;
    }
    .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 !important;
        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 !important;
    }
    .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: 700;

    }
}
@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 !important;
        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 !important;
        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";
        font-weight: 300;
    }
    .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 !important;
    }
    .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 !important;
    }
}


/* ============================
=== 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: #ffffff;
    }
    .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: #666;
    }
    .piko-layout-header.piko-layout-header-light-mobile .piko-brand > .piko-search-toggler:hover > i {
        color: #333;
    }
    .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: 1px solid #666;
        background: transparent;
    }
    .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-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: #666;
    }
    .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: #222;
    }
    /*menu shadow*/
    .piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header.piko-layout-header-04{
        background-color: #fff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    }
}
.piko-layout-header.piko-layout-header-04 .piko-topbar .piko-top-menu > .piko-icons > li:last-child {
    border-right: 0px solid #FFF;
}
.piko-layout-header.piko-layout-header-04 .piko-topbar .piko-top-menu > .piko-icons > li {
    border-left: 0px solid #FFF;
}



/*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: #fff;
    }
    /*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;
        font-weight: 500;
    }
    .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;
    border:1px solid #ccc;
    font-size: 12px;
    color: #666;
    font-weight:600;
    padding-right: 10px;
    display: inline-block;
    margin-top: 5px;
}

.piko-address span{
    font-size: 10px;
    color: #999;
    font-weight:normal;
}
.piko-address  i{
    width: 40px;
    height: 40px;
    float:left;
    line-height:36px;
    text-align: center;
    font-size:20px;
    /*    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: #666;
    }
    /*    .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-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: #ffb600;
        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;
    }
    .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;*/
        border-bottom: 1px solid #f4f4f4;
    }
    .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: 2px;
        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: #ffb600;
        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: 60px;
        /*    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;
        font-weight: 600;
        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;
        font-weight: 500;
        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: #999;
        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 !important;
            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;
        color: #666;
    }
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li .dropdown-menu > li > a:focus,
    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu-light-mobile > .nav.navbar-nav > li .dropdown-menu > li > a:hover {
        color: #98a2ac;
    }
    /*  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: #ffb600;
    }
}
/* 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;
    font-weight: 600;
    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.html) 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);
    -ms-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);
    -ms-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: #666;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-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);
    -ms-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);
    -ms-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%;}*/


/*============================
1.1   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;
}

/* =======================
 1.2     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;
}

/* =========================
 1.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;
}

/* =========================
1.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;
}

/* ============================
1.5  padding left, right, all
=============================== */
.padding-5 {
    padding: 5px;
}
.padding-10 {
    padding: 10px !important;
}
.padding-left-10 {
    padding-left: 10px;
}
.padding-right-10 {
    padding-right: 10px !important;
}
.padding-lr15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.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;
}
.piko-title4.padding-tb70 h3{
    margin-bottom: 30px;
}
.piko-title4.padding-tb70 p:last-of-type{
    margin-bottom: 30px;
    position: relative;
}

/* =================
2.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;
}

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

/*=================
  titie header
===================*/
.big-title h1{
    font-size: 43px;
    font-weight: bolder;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}
.big-title p{
    font-size: 17px;
    line-height: 25px;
    padding-left: 10px;
}
.m-title h1{
    font-size: 20px;
    font-weight: bolder;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}
.m-title p{
    font-size: 15px;
    line-height: 25px;
    padding-left: 10px;
}

.heading-line {
    width: 80px;
    height: 2px;
    display: inline-block;
    /*    background: #ccc;*/
}
/*.....hr line icon title.....*/
.piko-hr-light {
    background: #ececec;
    border: 0;
    height: 1px;
}

.piko-hr-title {
    /*color: #ffb600;*/
    margin: 30px auto;
    width: 46%;
    text-align: center;
    position: relative;
}
.piko-hr-title:before {
    content: '';
    width: 100%;
    top: 10px;
    left: 0;
    /*    border-top: 1px solid #d8d8d8;*/
    position: absolute; }
.piko-hr-title.piko-hr-title-2line:before {
    border-top-style: double;
    border-width: 4px; }
.piko-hr-title.piko-hr-title-noline:before {
    border-top: 0;
}
.piko-hr-title-icon {
    background: transparent;
    position: relative;
    display: inline-block;
    padding: 0 5px;
}
/*..... hr line btn title.....*/
.piko-hr-title-btn {
    display: inline-block;
    margin: auto;
    position: relative;
    margin-bottom: 10px;
}
.piko-hr-title-btn:before, .piko-hr-title-btn:after {
    content: '';
    width: 530px;
    height: 1px;
    background-color: #ebebeb;
    position: absolute;
    top: 10px;
    margin: 0 10px;
}
.piko-hr-title-btn:before {
    left: 100%; }
.piko-hr-title-btn:after {
    right: 100%;
}
.piko-hr-title-btn a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 5px 2px;
    border: 1px solid #ccc;
}

.piko-title-02  {
    letter-spacing: 1px;
    padding-bottom: 15px;
    border-bottom: 1px solid red;
    position: relative;
}

.piko-title-02 :after{
    border-bottom: 1px solid skyblue;
    bottom: -1px;
    content: "";
    display: inline-block;
    left: 0;
    position: absolute;
    width: 70px;
}
.slide-title-exbig{
    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-big{
    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-medium{
    font-size:40px ;
    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-medium-bg{
    font-size:20px;
    line-height:20px;
    font-weight:900;
    font-family:Raleway;
    color:rgb(255, 255, 255);
    text-decoration:none;
    /*    background-color:#3598DC;*/
    padding:5px 8px;
    text-shadow:none;
    border-width:0px;
    border-color:rgb(0, 0, 0);
    border-style:none;
}
.stab-title1{
    padding: 5px 10px !important;
    background: rgba( 0, 0, 0, .5);
    color: #fff !important;
}
.tp-caption.s-title1 {
    color: #fff;
    text-shadow: none;
    font-size: 34px;
    line-height: 34px;
    font-weight: 300;
    background-color: transparent;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-width: 0px;
    border-color: #000;
    border-style: none;
    font-weight: 500;
}
.tp-caption.greenbox30 {
    line-height:30px;
    text-decoration:none;
    background-color:#222;
    padding:0px 14px;
    border-width:0px;
    border-color:rgb(34, 34, 34);
    border-style:none;
}
.tp-caption.arrowicon {
    line-height:1px;
    border-width:0px;
    border-color:rgb(34, 34, 34);
    border-style:none;
}
.slide-title-small{
    font-size:30px ;
    color:#ffffff;
}
.slide-text{
    font-size:14px !important;
    color:#ffffff;
}
.slide-text2{
    font-size:20px;
    color:#ffffff;
    font-weight: 700;
}
.slide-text p{
    padding: 10px;
    background-color: rgba(128,127, 131, 0.8);
    border-radius: 5px;
    line-height: 25px;
}

/*====================
4. border shadow style
======================*/
.border-1px{
    border: 1px solid #ccc !important;
}
.border-01{
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
    border: 5px solid #FFF !important;
}
.bg-color-gray{
    background-color: #f3f3f3;
}
.bg-color-black{
    background-color: #1c1919;
}
.bg-white{
    background-color: #fff;
}
/*.bg-color-orange{
    background-color: #ffb600;
}*/

/*=================
  bg color opacity
===================*/
/*.bg-opacity-04 {
    background-color: rgba(50, 197, 210, 0.04) !important;
}
.bg-opacity-05 {
    background-color: rgba(50, 197, 210, 0.05) !important;
}*/


/* ========================
 5. 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;
}
.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:0px;
    padding-right:0px;
}
.no-gutter3-1 [class*="-3"] {
    padding-right: 2px;
    padding-left: 2px;
}
/*.container.nop{
    padding-right: 0;
}*/
/*.container.nop-left{
    padding-left: 0;
}*/
/*.container-fluid.nop-left{
    padding-left: 0;
}*/
/*.container-fluid.nop-right{
    padding-right: 0;
}*/

.full-video{
    width: 100%;
    height: 100%;
}
/*owl carusel*/
.margin-owl{
    margin-right: 5px;
}


/* =========================
5.1   thumnail hover img zoom
===========================*/

.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;
    -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 !important;
    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{
    font-weight: 500;
}
.piko-thub a span{
    font-weight: 600;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* ==========================
5.2 Thumbnail service box
=========================== */
.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-weight: 400;
    font-size:1.4em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    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.3 Thumbnail style 3
========================== */
.wedo {
    clear: both;
    margin:0px auto;
    max-width: 100%;
    list-style: none;
    float: left;
    /*    border: 5px solid;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    /*    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
        -moz-box-shadow: 1px 1px 2px #e6e6e6;
        box-shadow: 1px 1px 2px #e6e6e6;*/
    cursor: default;
}
.wedo button {
    position: relative;
    padding: 5px;
    margin: -10px 0 0 0;
}
.wedo-effect img {
    width: 100%;
    height:auto;
    position:  relative;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.wedo-effect .wedo-content {
    min-height: 100%;
    max-width: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background: rgba(73, 170, 238, 0.6);
    -webkit-transform: translateX(-650px);
    -ms-transform: translateX(-650px);
    transform: translateX(-650px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.wedo-effect h2 {
    position: relative;
    font-size: 1.3em;
    padding: 10px;
    margin: 0px 0 0 0;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0px 1px 0px 1px rgba(0,0,0,0.87);
}
.wedo-effect p {
    font-style: italic;
    font-size: .9em;
    position: relative;
    padding: 60px 20px 20px;
    text-align: left;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    color: #333;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.wedo-effect:hover .wedo-content {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}
.wedo-effect:hover img {
    opacity: 0.4;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}
.wedo-effect:hover p {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.wedo-effect button:hover {
    color: #fff;
}

/* ===================================
5.4 Thumbnail style 4 future project
===================================== */
.future {
    position: relative;
    list-style: none;
}
/* Common style */
.future figure {
    position: relative;
    overflow: hidden;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
}
.future figure img {
    position: relative;
    display: block;
    max-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}
.future figure figcaption {
    padding: .7em;
    font-family:'Raleway', serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.future figure figcaption::before,
.future figure figcaption::after {
    pointer-events: none;
}
.future figure figcaption,
.future figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.future figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}
.future figure h2 {
    font-weight: 300;
    font-size: 1.4em;
}

.future figure h2 span {
    font-weight: 800;
}
.future figure h2,
.future figure p {
    margin: 0;
}
.future figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
/* ========================
    5.5 project effect
========================= */
figure.project {
    background: #2f3238;
}
figure.project img {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
figure.project figcaption {
    text-align: left;
}
figure.project h2 {
    position: relative;
    padding: 0.5em 0;
}
figure.project p {
    display: inline-block;
    margin: 0 0 0.25em;
    padding: 0.4em 1em;
    background: rgba(255,255,255,0.9);
    color: #2f3238;
    text-transform: none;
    font-weight: 500;
    font-size: 75%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-650px,0,0);
    -ms-transform: translate3d(-650px,0,0);
    transform: translate3d(-650px,0,0);
}
figure.project p:first-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
figure.project p:last-child {
    background-color: #5BDDED;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
figure.project p:nth-of-type(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
figure.project p:nth-of-type(3) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
figure.project:hover p:first-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
figure.project:hover p:last-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
figure.effect-julia:hover p:nth-of-type(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
figure.project:hover p:nth-of-type(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
figure.project:hover img {
    opacity: 0.4;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}
figure.project:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* arrow read more button link */
.arrow-right {
    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;
    padding-right: 1.5em;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}
.arrow-right:before {
    content: "\f138";
    position: absolute;
    right: 0em;
    font-family: FontAwesome;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.arrow-right:hover:before, .arrow-right:focus:before, .arrow-right:active:before {
    -webkit-transform: translateX(4px);
    -ms-transform: translateX(4px);
    transform: translateX(4px);
}

/* =================================
   5.6 thumbnail style (blog)
================================== */
.thumbnail{
    padding: 0;
    border: 0px;
}
.thumbnail.margin{
    margin-bottom: 5px;
    border-radius: 0;
}
.thumbnail.margin.nom{
    margin-bottom: 0;
    border-radius: 0;
}
.thumbnail.nocolor{
    background-color: transparent;
}
.thumbnail.nocolor .caption{
    color: #fff;
}
.thumbnail.nocolor .caption p{
    color: #f3f3f3;
}
.thumbnail .caption{
    padding-bottom: 30px;
}
.thumbnail.nopb .caption{
    padding-bottom: 12px;
}
.blog {
    position: relative;
    clear: both;
    list-style: none;
}
/* Common style */
.blog figure {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.blog figure img {
    position: relative;
    display: block;
    height: auto;
    max-width: 100%;
}
.blog figure figcaption {
    color: #fff;
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*border: 1px solid#93FBFE;*/
}

.blog figure figcaption p{
    height:55px;
    width:50px;
    /*border:2px solid#93FBFE;*/
    margin-top:15px;
    margin-left:-2px;
    padding-top:5px;
    color:#fff;
    text-align:center;
    font-weight:600;
    background-color:#ffb600;
    text-transform:uppercase;
}
.blog figure figcaption::before{
    pointer-events: none;
}
.blog figure figcaption::after {
    pointer-events: none;
}
.blog figure figcaption,
.blogfigure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.blog figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.blog .caption h3 {
    font-size: 20px;
    font-weight:500;
}
.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;
}
.caption a{
    font-weight: 500;
}
.caption a:hover{
    color: #ffb600;
}
.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{
    padding-bottom: 7px;
    border-bottom: 1px solid #fff;
}
.blog_date p{
    margin-top: 10px;
    color: #222;
}
.archive a:first-child{
    border-top: 1px solid #f3f3f3;
}
.archive a{
    border-bottom: 1px solid #f3f3f3;
    display: block;
    padding: 8px 10px;
    font-weight: 600;
}
.archive a:hover{
    color: #ffb600;
}
.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-weight: 600;
    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;
    font-weight: 600;
}
.blog-comment .media .media-body h4 em{
    font-size: 13px;
    color: #999;
}
.blog-comment .media .media-body h4 a{
    float: right;
    font-size: 13px;
    margin-top: -15px;
    text-transform: uppercase;
    font-weight: 500;
    padding-right: 15px;
}
.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: #ffb600;
}
.blog-right .media .media-left a p{
    background-color: #ffb600;
    position: absolute;
    color:#141414;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 0px;
    padding: 5px 8px;
    margin-top: 25px;
    margin-left: -7px;
}
/* ===================================
   5.7 thumbnail style Titile angle
====================================== */

/*.team1 .box{
    margin: 25px 0;
}*/
.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 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:30%;
    color:#fff;
    font-size:25px;
    left:50%;
    margin-left:-25px;
    opacity:0;
    padding-top:10px;
    position:absolute;
    text-align:center;
    text-transform:uppercase;
    -webkit-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    width:45px;
    height: 45px;
    border-radius: 100%;
    /*        background-color: #ffb600;*/
    filter:alpha(opacity=0);
    -khtml-opacity:0;
    -moz-opacity:0;
    -moz-transition:all .7s ease-out;
    -o-transition:all .7s ease-out;
    -webkit-transition:all .7s ease-out
}
.team1 .box:hover figcaption i {
    bottom:55%;
    opacity:1;
    margin-bottom:-21px;
    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);
    -ms-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);
    -ms-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);
    -ms-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{
    color: #222;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
/*blog*/
.team1.team2.blog-title .box .title h2, .team1.team2.blog-title  .box .title2 h2{
    color: #222;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.team1 .box .caption{
    border: 1px solid;
    cursor: text;

}
.team1 .box .caption h3{
    color: #222;
    font-size: 17px;
    margin: 0;
    padding: 15px 0;
    text-align: center;
}
.team1 .box .caption h2{
    margin: 15px 0 0 15px;
    font-weight: 600;
    font-size: 17px;
}
.team1 .box .caption p{
    color: #666;
    font-size: 15px;
    margin:0 0 15px 0;
    padding: 0px 0 15px 0px;
    text-align: left;
}
.team1 .box .caption a{
    padding:8px 0;
    font-weight: 500;
}
.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;
    color: #222;
    font-size:20px;
    text-align: left;
    font-weight: 700;
}
.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:30%;
    color:#fff;
    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: #24201f;
}
.team1.team-m .box figure figcaption a:hover  {
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}


/* ===========================================
 5.8 Thumbnail position absolute slide
============================================ */
/*slide address*/
.piko-address.slide {
    font-size:17px;
    border: none;
    width: 100%;
    height: 100%;
    margin-top:0;
    padding:15px 15px;
    color: #ccc;
}
.piko-address.slide.menu {
    min-width: 220px;
    font-size:14px;
    padding:0px 0;
    color: #666;
}
.piko-address.slide i{
    width: 60px;
    height: 60px;
    float: left;
    line-height: 60px;
    text-align: center;
    font-size: 50px;
    padding-right: 40px;
    border-right: 1px solid #fff;
}

.piko-address.slide.menu i{
    width: 30px;
    height: 30px;
    line-height: 25px;
    padding-top: 5px;
    font-size: 30px;
}
.piko-address.slide span{
    font-size:18px;
    font-weight: 700;
    color: #fff;
}
.piko-address.slide.menu span{
    font-size:15px;
    font-weight: 600;
    color: #222;
}
.slider-ab{
    position: absolute;
    z-index: 1;
}
.absolute-slide{
    margin-top: 635px;
    position: relative;
    z-index: 10;
}
.absolute-slide2{
    margin-top: 660px;
    position: relative;
    z-index: 10;
}
#absolute-slider{
    position: absolute;
    z-index: 1;
}

/* Heading Typography */
/*.btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success {border-color: #4cacee;}*/

/* ==========================
7.1  icon boxes
========================== */
.box > .icon-box {
    /*margin: 40px 0 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 #ffb600;
    -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;
    transition: transform 0.2s, opacity 0.2s;
}
.box > .icon-box > .image:before {
    speak: none;
    font-size: 48px;
    line-height: 75px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smootserviceng: antialiased;
}
.box > .icon-box:hover > .image:after {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}
.box > .icon-box:hover > .image:hover {
    color: #fff !important;
}
.box > .icon-box > .image > i {
    font-size: 40px !important;
}
.box > .icon-box:hover > .image > i {
    color: white !important;
}
/*.box > .icon-box > .info {
    background-color: #f4f4f4;
    background: #f4f4f4;
}*/
.box > .icon-box > .info.white{
    background-color: #fff;
    background: #fff;
}
.box > .icon-box > .info > h3.title {
    color: #222;
    font-weight: 600;
    font-size: 1em;
}
.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;
}
/* ==============================
      7.2 start certification
================================= */
.box-c > .icon-box {
    margin: 20px 0;
    text-align: center;
    position: relative;
    min-width: 140px;
}
.box-c > .icon-box > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 140px;
    height: 70px;
    border: 1px solid;
    background-color: #fff;
    vertical-align: middle;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    overflow: hidden;
    box-shadow: inset 0px -2px 3px -1px rgba(0,0,0,0.8);
}
.box-c > .icon-box > .image:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    box-sizing: content-box;
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: 100;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}
.box-c > .icon-box:hover > .image:after {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0.4;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}
/*.box-c > .icon-box:hover > .image:hover {
    background-color: #fff;
}*/
.box-c > .icon-box:hover > .image {
    opacity: 1;
}
.box-c > .icon-box > .info > h3.title {
    color: #222;
    font-weight: 600;
    font-size: 1.1em;
}
.box-c > .icon-box > .info > p {
    color: #666;
    text-align: left;
    padding: 0 10px 0;
}
.box-c > .icon-box > .info > p span {
    padding-right: 10px;
}
.box-c > .icon-box > .info {
    margin-top: -24px;
    padding: 20px 0 10px 0;
    border-bottom: 2px solid;
    background: transparent url("../images/bg/white.gif") repeat scroll 0% 0%;
}
.box-c > .icon-box > .info:hover {
    border-bottom: 2px;
    border-bottom-style: solid;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/* ==============================
    7.3 contact us
============================== */

.box-squre {
    height: 50px;
    line-height:55px;
    margin: 35px auto;
    color:#ffffff;
    position: relative;
    width: 90px;
}
.box-squre:before {
    border-bottom: 25px solid #ffb600;
    border-left: 45px solid rgba(0, 0, 0, 0);
    border-right: 45px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: -25px;
    width: 0;
}
.box-squre:after {
    border-left: 45px solid rgba(0, 0, 0, 0);
    border-right: 45px solid rgba(0, 0, 0, 0);
    border-top: 25px solid #ffb600;
    bottom: -25px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}

/* ================================
    8.1 testimonial and client
================================== */

#testimonials {
    display: block;
    width: 100%;
    margin:20px 0 20px;
    padding:70px 0 50px;
}
#testimonials h6 {
    display: block;
    text-align: center;
    font-weight: bold;
    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;
    font-weight: bold !important;
    letter-spacing: 1px;
    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;
    font-weight: 500;
    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 !important;
}
/* ===================
  8.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;
    font-weight: 600;
    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;
    }
}
div.partner{
    display: inline-block;
}
.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;
}
/*================================
  8.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;
    font-weight: 700;
    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!important;
    padding-bottom: 35px!important;
    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;
}

/* ================================
  8.5  TESTIMONIAL 03 STYLES
=================================  */
.testimonials-03 img{
    border: 3px solid #ccc;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45);
}
.testimonials-03 p{
    max-width: 80%;
    margin: 0 auto;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    color:#fff;
    height: auto;
    padding: 15px;
    position: relative;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
}
.testimonials-03 strong{
    color:#fff;
    font-weight: 600;
    font-size: 20px;
}
.testimonials-03 a{
    color:#fff !important;
    font-weight: 400;
    font-size: 15px;
}
.testimonials-03 p:after{
    top:-25px;
    border:transparent;
    border-style: solid;
    content: "";
    position: absolute;
    border-bottom-color: #ffb600;
    border-width: 15px !important;
    margin-left: -60px;
}

/* ==========================
    9.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: 2px 2px;
    line-height: 30px;
    margin-bottom:10px;
    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;
    transition: transform 0.2s, opacity 0.3s;
}
.social-effect-1a .social-icon:hover {
    color: #fff;
}
.social-effect-1a .social-icon:hover:after {
    -webkit-transform: scale(1.3);
    -ms-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;
    transition: transform 0.2s, opacity 0.3s;
}
.social-effect-1b .social-icon:hover {
    color: #141414;
}

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

.social-effect-1b .social-icon:hover:after {
    -webkit-transform: scale(1);
    -ms-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;
}

/* ============================
 10. Constructin processing
============================= */
.process img{
    border: 1px solid;
    padding: 5px;
    border-radius: 2px;
}
.margin-bottom{
    margin-bottom: 20px;
}
.process h3.media-heading {
    font-size: 16px;
}


/*=========================
    11. get-quote
===========================*/

.get-quote{
    /*    background-color: #ffb600;*/
    z-index: 1;
    height: 80px;
}
.get-quote.opacity{
    background: rgba(255, 182, 0, 0.7);
}
.get-quote .layer{
    height: 80px;
    width: 100%;
    /*    background-color: #21c2f8;*/
    z-index: 2;
    position:absolute;
    margin-left: -17px;
    line-height: 80px;
    border-radius: 0px 0px 100px 0px;
    -moz-border-radius: 0px 0px 100px 0px;
    -webkit-border-radius: 0px 0px 100px 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-weight: 500;
    font-size: 17px;
    color: #141414;
    padding-right: 50px;
    position: relative;
}
.get-quote a{
    margin: 20px 0 0 10px;
    display: inine-block;
    font-weight: 600;
    z-index: 3;
    position: relative;
}
.get-quote p{
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    padding-left: 40px;
    position: relative;
    line-height: 80px;
}


/* ======================================================
  12. 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/statistics2.html");
}
.bg-img3{
    background-image: url("../images/bg/pera-bg1.html");
}
.bg-img4{
    background-image: url("../images/bg/pera-bg2.html");
}
.bg-img5{
    background-image: url("../images/bg/pera-bg3.jpg");
}
.bg-img6{
    background-image: url("../images/bg/pera-bg4.jpg");
}
.bg-img7{
    background-image: url("../images/bg/pera-bg5.html");
}
.bg-img8{
    background-image: url("../images/bg/pera-bg6.html");
}
.bg-body1{
    background-image: url("../images/bg/bg-body1.jpg");
}
.bg-map{
    background-image: url("../images/bg/world-map.html");

}

.bg-opa-black {
    background-color: rgba(0,0,0, 0.4);
}
.bg-opa-black2 {
    background-color: rgba(0,0,0, 0.7);
}
.bg-opa-black4 {
    background-color: rgba(0,0,0, 0.8);
}
/*yellow opacity*/
.bg-opa-black3 {
    background-color: rgba(255,182,0, 0.8);
}
.bg-opa-white {
    background-color: rgba(255,255,255, 0.5);
}
.bg-opa-yellow {
    background-color: rgba(255,182,0, 0.5);
}
.client-bg{
    background:url(../images/bg/bg-body1.jpg) no-repeat center center;
    background-size:cover;
}

.client-bg-opacity{
    background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================
  13.  media box Portfolio
============================ */

.media-boxes-filter{
    text-align: center !important;
}
#grid .media-box-container{
    border-radius: 0px;
}
#grid .media-box-container{
    -o-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
}
#grid5 .thumbnail-overlay .media-box-title,
#grid5 .thumbnail-overlay .media-box-date{
    color: #222;
}
#grid5 .thumbnail-overlay{
    background: white;
}

#grid .thumbnail-overlay .media-box-title,
#grid .thumbnail-overlay .media-box-date{
    color: white;
}
/*#grid .thumbnail-overlay{
    background-color: rgba(0,0,0, 0.7);
}*/

#filter2 li a.selected{
    background: #28ac86;
}
#grid2 .media-box-date{
    color: #28ac86;
}
#grid2 .thumbnail-overlay{
    background: rgba(255,255,255,.7);
    padding: 10px;
}
#grid2.img-up .thumbnail-overlay{
    /*background-color: #ffb600;*/
    padding: 10px;
}
.thumbnail-overlay i{
    color: #222;
}
#grid2.img-up .media-box-date{
    color: #fff;
}

#grid3{
    margin-bottom: -20px !important;
}
#grid3 .thumbnail-overlay .media-box-title,
#grid3 .thumbnail-overlay .media-box-date{
    color: white;
}
#grid3 .thumbnail-overlay{
    background: rgba(0,0,0,.45);
}
.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}
.media-boxes-no-more-entries{
    display: none;
}
#search{
    float: right;
}
#filter2 li a.selected,
#grid2 .thumbnail-overlay .fa{
    background: #28ac86;
}
.media-boxes-drop-down-menu > li > a.selected,
#grid2 .media-box-date,
#grid2 .media-box-author{
    color: #28ac86;
}
.media-boxes-drop-down{
    float: right;
    margin-left: 5px;
}
#sort2 .media-boxes-drop-down-menu > li > a.selected,
#filter3 .media-boxes-drop-down-menu > li > a.selected,
#grid3 .media-box-date{
    color: #09b0dd;
}
/*        #grid3 .thumbnail-overlay .fa{
            background: #09b0dd;
        }*/


/* ======================================
    15. project-view page and profile
======================================== */
.project-view {
    position: relative;
}
.project-view .top-img {
    width:100%;
    height: 550px;
    background: url(../images/bg/bg2.jpg) no-repeat center center;
    background-size:cover;
}
.project-view .top-img2 {
    width:100%;
    height: 400px;
    background: url(../images/slider/master/bg.html) no-repeat center center;
    background-size:cover;
}
.project-view .social-share{
    width: 100%;
    height: 40px;
    background-color: rgba(255,255,255, 0.8);
    position: absolute;
    bottom: 0;
}
.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 !important;
    border-left: 1px solid #fff;
    float: right;
    display: inline-block;
    text-align: right;
}
.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 li{
    border-bottom: 1px solid #f9f9f9;
    padding: 5px;
    display: block;
    font-size: 13px;
}
.project-view .left-side ul li:first-child{
    border-top: 1px solid #f9f9f9;
}
.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{
    font-weight: bold;
    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;
}


/* ======================
    16. shop page
=========================*/
.thumbnail.shop > .caption{
    padding: 0 10px !important;
}
.tag {
    position: absolute;
    z-index: 3;
}
.ribbon span {
    display: block;
    font-size: 16px;
    color: #FFF;
    margin: 0px;
    padding: 0 10px 0 15px;
    font-weight: 400;
    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: 25px;
    z-index: 100;
    opacity: 0;
    border: 1px solid  #ccc;
    border-radius: 1px;
}
.quick-view:hover, .quick-view2:hover {
    background-color: #ffb600;
    border: 1px solid  #ffb600;
    border-radius: 1px;
    color: #222;
}
.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;
}
.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;
}
.cart-button strong{
    color: #222 !important;
}
.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
}
.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 !important;
}
.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;
}


/* ==============================
 16.2 single page image
============================== */
.shop-single{
    background-color: #fff;
}
.shop-page{
    line-height: 45px;
}
.shop-page a i{
    color: #ccc !important;
}
.shop-page a:hover i{
    color: #ffb600 !important;
}
.shop-page small i{
    /*    color: #ffb600;*/
    font-size: 18px;
}
.shop-qty a{
    padding: 8px 12px;
    border: 1px solid #ccc;
    font-size: 18px;
    background-color: #ccc;
    color: #fff;
}
.shop-qty a:last-child{
    margin-top: 3px;
    padding: 11px 20px 13px;
    /*    background-color: #ffb600;*/
    font-size: 14px;
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
}
.shop-qty a:last-child:hover{
    background-color: #393939;
}
.shop-qty  input{
    padding: 8px 12px;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.tags.fa-ul li a{
    font-weight:600;
    margin-right:10px;
    color: #222;
}
.nav-tabs li a{
    font-weight:600;
}
.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;
}*/


/* ===========================
    17. blog view
============================== */
.blog-view .blog figure figcaption p:first-child{
    height:65px;
    width:90px;
    /*    background-color:#21c2f8;*/
    font-size: 28px;
    font-weight: 800;
    color:#fff;
    text-align:center;
    line-height: 20px;
    padding-left: 10px;
    /*border: 2px solid;*/
}
.blog-view .blog figure figcaption p:last-child{
    height:65px;
    width:90px;
    background-color: #fff;
    margin-top:-12px;
    margin-left:-2px;
    font-size: 28px;
    font-weight: 800;
    color:#222;;
    text-align:center;
    line-height: 20px;
    padding-left: 10px;
}
.blog-view .blog figure figcaption p:first-child span{
    font-size: 15px;
    font-weight: 600;
    color:#fff;
}
.blog-view .blog figure figcaption p:last-child span{
    font-size: 11px;
    font-weight: 600;
    color:#222;
}
.tag-button{
    margin: 3px 0;
    padding: 5px 5px;
    font-size:15px  !important;
    color:#999 !important;
    font-weight: 500 !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
}
.tag-button:hover{
    color: #fff !important;
}


/* =======================================
    18.1 Thumbnail aware Effect
======================================= */
.piko-aware-control li {
    -webkit-perspective: 420px;
    perspective: 420px;
}
.piko-aware-control2 li {
    -webkit-perspective: 700px;
    perspective: 700px;
}
.piko-aware {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
    transform: rotate3d(1, 0, 0, 90deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    pointer-events: none;
}
.in-top .piko-aware{
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: in-top 300ms ease 0ms 1 forwards;
    animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .piko-aware {
    -webkit-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-animation: in-right 300ms ease 0ms 1 forwards;
    animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .piko-aware {
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
    animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .piko-aware {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation: in-left 300ms ease 0ms 1 forwards;
    animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .piko-aware {
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: out-top 300ms ease 0ms 1 forwards;
    animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .piko-aware {
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: out-right 300ms ease 0ms 1 forwards;
    animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .piko-aware {
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
    animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .piko-aware {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation: out-left 300ms ease 0ms 1 forwards;
    animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
    from {
        -webkit-transform: rotate3d(-1, 0, 0, 90deg);
        transform: rotate3d(-1, 0, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes in-top {
    from {
        -webkit-transform: rotate3d(-1, 0, 0, 90deg);
        transform: rotate3d(-1, 0, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@-webkit-keyframes in-right {
    from {
        -webkit-transform: rotate3d(0, -1, 0, 90deg);
        transform: rotate3d(0, -1, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@keyframes in-right {
    from {
        -webkit-transform: rotate3d(0, -1, 0, 90deg);
        transform: rotate3d(0, -1, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@-webkit-keyframes in-bottom {
    from {
        -webkit-transform: rotate3d(1, 0, 0, 90deg);
        transform: rotate3d(1, 0, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@keyframes in-bottom {
    from {
        -webkit-transform: rotate3d(1, 0, 0, 90deg);
        transform: rotate3d(1, 0, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@-webkit-keyframes in-left {
    from {
        -webkit-transform: rotate3d(0, 1, 0, 90deg);
        transform: rotate3d(0, 1, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@keyframes in-left {
    from {
        -webkit-transform: rotate3d(0, 1, 0, 90deg);
        transform: rotate3d(0, 1, 0, 90deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
}
@-webkit-keyframes out-top {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(-1, 0, 0, 104deg);
        transform: rotate3d(-1, 0, 0, 104deg);
    }
}
@keyframes out-top {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(-1, 0, 0, 104deg);
        transform: rotate3d(-1, 0, 0, 104deg);
    }
}
@-webkit-keyframes out-right {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(0, -1, 0, 104deg);
        transform: rotate3d(0, -1, 0, 104deg);
    }
}
@keyframes out-right {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(0, -1, 0, 104deg);
        transform: rotate3d(0, -1, 0, 104deg);
    }
}
@-webkit-keyframes out-bottom {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(1, 0, 0, 104deg);
        transform: rotate3d(1, 0, 0, 104deg);
    }
}
@keyframes out-bottom {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(1, 0, 0, 104deg);
        transform: rotate3d(1, 0, 0, 104deg);
    }
}
@-webkit-keyframes out-left {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(0, 1, 0, 104deg);
        transform: rotate3d(0, 1, 0, 104deg);
    }
}
@keyframes out-left {
    from {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
        -webkit-transform: rotate3d(0, 1, 0, 104deg);
        transform: rotate3d(0, 1, 0, 104deg);
    }
}
.piko-aware-control ul.slide {
    padding: 0;
    margin-left: 130px;
}
.piko-aware-control ul, .piko-aware-control2 ul {
    padding: 0;
    margin: 0 auto;
}
.piko-aware-control ul:after, .piko-aware-control2 ul:after {
    content: "";
    display: table;
    clear: both;
}
.piko-aware-control li {
    position: relative;
    float: left;
    width: 210px;
    height: 210px;
    margin: 5px;
    padding: 0;
    list-style: none;
}
.piko-aware-control li a, .piko-aware-control2 li a {
    width: 100%;
    height: 100%;
    display: block;
    text-align:center;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 2px 20px #e6ebed;
}
.piko-aware-control.dark li a, .piko-aware-control2.dark li a {
    width: 100%;
    height: 100%;
    display: block;
    text-align:center;
    border-radius: 4px;
    background-color: #222;
    box-shadow: inset 0 2px 20px #111;
}

.piko-aware-control li a i{
    background-color: #fff;
    margin-top: 50px;
    margin-left: 10px;
}
.piko-aware-control li a span{
    font-weight: 700;
    font-size: 18px;
    color: #222;
}
.piko-aware-control li a span.team{
    font-weight: normal;
    font-size: 18px;
    color: #222;
}
.piko-aware-control li h3 {
    margin-top: 0;
    font-size: 17px;
    text-align: center;
    font-weight: 700;
    color:#222;
}
.piko-aware-control li p {
    color:#222;
}
/* =================================
    18.2    Control 2
================================= */
.piko-aware-control2 li {
    position: relative;
    float: left;
    width: 350px;
    height: 350px;
    margin: 10px;
    padding: 0;
    list-style: none;
}
.piko-aware-control2 li a strong{
    font-size: 22px;
    color: #222;
}
.piko-aware-control2 li a span{
    color: #fff;
    background-color:#666;
    padding: 15px 55px;
    border-radius: 3px;
}
.piko-aware-control2 li a span i{
    font-size:18px;
}
.piko-aware-control2 li button{
    margin-top: 30px;
    margin-left: 90px;
}
.piko-aware-control2 li h3 {
    font-size: 23px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}


/* =======================
    19. 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.html") repeat-x scroll 0% 0%;
}
.quote-box {
    max-width: 1100px;
}


/* ==============================
    20.1 about page
================================ */
.single-page-top{
    margin-top: 100px;
}
.top-margin{
    margin-top: 50px;
}
.top-margin2{
    margin-top: 25px;
}
.top-margin-minus{
    margin-top: -25px;
}
.fa-ul{
    color:#666;
}
.banner{
    background-color: #24201f;
}
.page-banner {
    padding: 65px 0px 47px;
    position: relative;
}
.about-page-banner{
    background: transparent url(../images/banner.html) repeat scroll 0% 0% / cover;
}
.page-banner h1 {
    font-weight: 600;
    margin: 0px 0px 7px;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
}
.page-banner.white h1 {
    font-weight: 700;
    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;
    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 .list-group .sublink .list-group-item:before {
    font-family: fontAwesome;
    content: "\f105";
    padding-right: 10px;
}*/

#sub-menu .custom-list .list-group-item {
    cursor: pointer;
}
.list-group a{
    background-color: #f4f4f4;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 83%;
}
.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;
}
.media-body a {
    font-size: 1.2em;
    font-weight: 600;
}
.tab-content .media-body a {
    font-size: 14px;
    font-weight: 500;
}
.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;
}

/* ========================================
    20.1  start time line history page
========================================= */
.timeline{
    background-image: url("../images/bg/line-1.png");
    background-position: center;
    background-repeat: repeat-y;
    max-width: 97%;
    margin: 0 auto;
    position: relative;
    height: auto;
    padding: 0px;
    clear: both;
    overflow: hidden;
}
.timeline li h3{color: #666;}
.timeline li.year{
    clear: both;
    width: 3em;
    margin: 0 auto;
    line-height: 3em;
    background-color: #fff;
    border-radius:50%;
    text-align: center;
    margin-bottom: 25px;
    border: 1px solid;
    color: #666;
    font-size: 25px;
    font-weight: 700;
    box-shadow: 2px 2px 2px #888888;
    -moz-box-shadow: 2px 2px 2px #888888;
    -webkit-box-shadow: 2px 2px 2px #888888;
}
.timeline li.year:first-child{
    margin-top:0px;
}
.timeline li.year, .timeline li.event{
    list-style-type: none;
    z-index: 999;
}
.timeline li.event{
    width: 45%;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    position: relative;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-style: solid;
    border-width: 1px;
}
li.event:nth-child(odd) {
    color: #666;
    clear:left;
    float: left;
}
li.event:nth-child(even) {
    color: #666;
    clear: right;
    float: right;
    margin-top:30px;
    margin-bottom: 0px;
}
.timeline li.event:nth-child(odd)::after {
    content: "";
    height: 2px;
    position: absolute;
    right: -11.2%;
    top: 30px;
    width: 11.2%;
}
li.event:nth-child(even)::before{
    content: "";
    height: 2px;
    position: absolute;
    top: 30px;
    width: 11.2%;
    left: -11.2%;
}

/* =======================================
    20.3 Start certifications box
======================================= */
.signle-box  {
    margin: 40px 0 20px;
}
.signle-box > .icon {
    margin: 40px 0 20px;
    text-align: center;
    position: relative;
}
.signle-box > .icon-box > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 120px;
    height: 120px;
    border: 1px solid;
    line-height:115px;
    border-radius: 50%;
    background-color: #f9f9f9; /*hover color */
    vertical-align: middle;
    box-shadow: 0 0 0 3px #ffb600;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    padding-left: 5px;
}
.signle-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;
    transition: transform 0.2s, opacity 0.2s;
}

.signle-box > .icon-box > .image:before {
    speak: none;
    font-size: 48px;
    line-height: 75px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
}
.signle-box > .icon-box:hover > .image:after {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}
.signle-box > .icon-box:hover > .image:hover {
    color: #333;
}
.signle-box > .icon-box > .info {
    margin-top: -24px;
    /*background-color: #f3f3f3;*/
    padding: 20px 15px;
}
.signle-box > .icon-box > .info > h3.title {
    color: #666;
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 1px;
    padding: 0 10px 0;
}
.signle-box > .icon-box > .info > p {
    color: #666;
    text-align: left;
    padding: 0 10px 0;
}
.signle-box> .icon-box > .info > .more a {
    color: #222;
    line-height: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
.signle-box > .icon-box:hover > .info > .more > a {
    color: #000;
    padding: 6px 8px;
    border-bottom: 4px solid black;
}

/* =================================
    20.4 signle career page
==================================== */
.carer-banner{
    border-bottom: 1px solid;
    box-shadow: 0 6px 6px -5px #666;
}
.internship{
    min-height: 200px;
    padding: 30px;
    /*    background-color: #f4f4f4;*/
}

/* =============================
    20.5 Thumbnail image
=============================== */
.carrer-margin {
    margin-left: 0px;
}
.carrer-margin ul {
    padding-left: 0px;
}
.carrer-image {
    list-style: none;
    display: inline-block;
}
.carrer-image li {
    float: left;
    width: 270px;
    height: 240px;
    overflow: hidden;
}
.carrer-image a {
    display: block;
    width: 285px;
    height: 244px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.carrer-image a img {
    width: 400px;
    height: 360px;
    margin: 0 auto;
    position: absolute;
    left: -70px;
    top: -20px;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.carrer-image a:hover img {
    width: 300px;
    height: 220px;
    left: 0;
    top: -10px;
}
.carrer-image a p {
    background: #59A214;
    color: #fff;
    font-size: 14px;
    padding: 12px 20px;
    position:absolute;
    bottom:-100px;
    line-height: 20px;
    display: block;
    width: 100%;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.carrer-image a:hover p {
    bottom: 0;
    background: #222;
}
.carrer-image a h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color:rgba(255,182,0,0.7);
    width: 211px;
    padding: 8px 10px;
    position: absolute;
    left:10px;
    bottom:10px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.carrer-image a:hover h3 {
    bottom:50px;
    /*    background: #0af;*/
}
.carrer-image a h3 i {
    width: 38px;
    height: 36px;
    position: absolute;
    right: -38px;
    top: 0;
    text-align:center;
    padding-top:10px;
    background: #222;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.carrer-image a h3 .fa-minus,
.carrer-image a h3:hover .fa-plus  {
    display: none;
}
.carrer-image a:hover .fa-minus {
    display: inline;
}
.carrer-image a span {
    color: #fff;
    text-align: center;
    position:absolute;
    top:-30px;
    line-height: 20px;
    display: block;
    width: 100%;
    cursor: pointer;
    text-shadow: 1px 1px #666;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.carrer-image a:hover span {
    top:80px;
    text-align: center;
}
.carrer-image a:hover img {
    opacity: .5;
}

@media (max-width: 640px) {
    .carrer-margin {
        margin-left: 10%;
    }
}
/* ==================================
    20.6 thumbnail image zooming
==================================== */

.padding0{
    padding-left: 0px;
}
.gallery li{
    display: inline;
    padding: 2px !important;
    margin: 0 !important;
}
#p-photo .p-photo div{
    left:0;
    top:0;
    background: rgba(0,0,0,0.4);
    opacity:0.6;
    color:#FFF;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    box-shadow: 1px 2px 2px #000;
    border: 1px solid #0af;
}
#p-photo .p-photo {
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    width: 280px;
    *display:inline;
    position:relative;
    vertical-align:top;
    border: 1px solid #ccc;
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    outline:none;
    -o-transition-duration: .35s;
    -moz-transition-duration: .35s;
    -webkit-transition: -webkit-transform .35s;
    overflow: hidden;
}
#p-photo .p-photo img{
    display:block;
    border:none;
}
#p-photo .p-photo div {display:none}
.gallery a span {
    /*    color: #0af;*/
    text-align: center;
    position:absolute;
    top:-35px;
    display: block;
    width: 100%;
    cursor: pointer;
    text-shadow: 1px 1px #666;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.gallery a:hover span {
    top:60px;
    text-align: center;
}
.gallery a:hover img {
    opacity: .5;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}

.gallery a img{
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

@media (max-width: 640px) {
    #p-photo .p-photo {
        width: 345px;
    }
    .gallery a:hover span {
        top:80px;
        text-align: center;
    }
}


/* ============================
    21.1 with team member
============================== */
.image-round .thumbnail{
    /*background-color: #f4f4f4;*/
    border: 1px solid #ddd;
    text-align: center;
}
.image-round .thumbnail img{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 130px;
    height: 130px;
    border-radius:50%;
    box-shadow: 0 0 1px 0 #0af;
}

.image-round .thumbnail .caption{
    background-color: #f9f9f9;
    color: #666;
}
.image-round .thumbnail h3{
    padding: 0;
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    display: inline-block;
    letter-spacing: 1px;
}
.image-round .thumbnail .caption span{
    text-align: center;
    font-style: italic;
}
.image-round .thumbnail .caption p{
    text-align: center;
}

/* ============================
    21.2 with team member style2
============================== */

.image-round2 .thumbnail{
    /*    background-color: #f4f4f4;*/
    border: 1px solid #F0F0F0;
    text-align: center;
}
.image-round2 .thumbnail img{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
    border: 5px solid #FFF;
}

.image-round2 .thumbnail .caption{
    color: #666;
}
.image-round2 .thumbnail h3{
    padding: 0;
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    display: inline-block;
    letter-spacing: 1px;
}

.image-round2 .thumbnail .caption span{
    text-align: center;
    font-style: italic;
}
.image-round2 .thumbnail .caption p{
    text-align: center;
}

/* ============================
    21.3 with team style 3
============================== */

.image-round3 .thumbnail{
    /*background-color: #f4f4f4;*/
    border: 1px solid #ddd;
    text-align: center;
}
.image-round3 .thumbnail img{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
    border: 5px solid #FFF;
}
.image-round3 .thumbnail .caption{
    background-color: #fff;
    color: #666;
}
.image-round3 .thumbnail h3{
    padding: 0;
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    display: inline-block;
    letter-spacing: 1px;
}
.image-round3 .thumbnail .caption span{
    text-align: center;
    font-style: italic;
}
.image-round3 .thumbnail .caption p{
    text-align: center;
}
.team_image{
    height:50px;
    margin-top:-55px;
    background:url(../images/bg/team.html)  no-repeat center bottom 5px;
    background-size: 80%;
    opacity: .6;
}

/* ============================
    21.5 with team style 5
============================== */
.team-04 {
    border: 1px solid;
}
.team-04 .thumbnail{
    padding: 20px;
    margin: 0;
    border-radius: 0;
    /*background-color: #f4f4f4;*/
}
.team-04 .thumbnail.team5{
    padding: 0px;
    margin: 0;
    border-radius: 0;
    /*    background-color: #f4f4f4;*/
}
.team-04 .caption{
    background-color: #fff;
}
.team-04 h3{
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.team-04 p:nth-of-type(1){
    margin: 0;
}
.team-04 p:nth-of-type(2){
    text-align: center;
    font-style: italic;
    margin:0;
}
.team-04 p{
    padding: 0 10px 15px 10px;
}
.social-04{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 0px 0px 50px 50px;
    -moz-border-radius: 0px 0px 50px 50px;
    -webkit-border-radius: 0px 0px 50px 50px;
}
/*other style*/
.team-09{
    width: 80%;
    height: 50px;
    top: 80%;
    left: 50%;
    margin-top: -45%;
    margin-left: -50%;
    padding: 10px 30px;
    position: absolute;
    background-color: #ffb600;
    border-radius: 50px 0px 50px 0px;
    -moz-border-radius: 50px 0px 50px 0px;
    -webkit-border-radius: 50px 0px 50px 0px;
}


/* =================================
   22. Coming soon timer
================================== */
/*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;
    font-weight: 800;
    color: #222;
}
.no404 .error p{
    color:red;
    font-size: 40px;
    font-weight: 700;
    margin: -120px 0 0 100px;
    -webkit-transform:rotate(130deg);
    -ms-transform:rotate(130deg);
    transform:rotate(130deg);
    position: absolute;
}
.no404 .text h3{
    font-size: 25px;
    font-weight: 600;
}
.no404 .text p{
    font-size: 16px;
    font-weight: 500;
}


/* =============================
    23.1 pattern and bg image
============================= */

/*bg pattern*/
.pattern {
    background: transparent url("../images/bg/brickwall.html") repeat;
}
.pattern2 {
    background: transparent url("../images/bg/white_brick_wall.png") repeat;
}
.pattern3 {
    background: transparent url("../images/bg/white.gif") repeat;
    position: relative;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}
/*light destroy*/
.pattern4 {
    background: transparent url("../images/bg/pattern4.png") repeat scroll;
    position: relative;
}
/*dark*/
.pattern5 {
    background: transparent url("../images/bg/dark-pattern.jpg") repeat scroll 0% 0%;
    position: relative;
}

.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;
}
.stripe-1 {
    background: -webkit-repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px),
        url("../images/bg/strip1.html");
    background: -webkit-repeating-linear-gradient(315deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px), url("../images/bg/strip1.html");
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px),
        url("../images/bg/strip1.html");
}
.stripe-2 {
    background: -webkit-repeating-linear-gradient(135deg, rgba(255, 182, 0, 0.2), rgba(255, 182, 0, 0.2) 10px, rgba(255, 182, 0, 0.3) 10px, rgba(255, 182, 0, 0.3) 20px);
    background: -webkit-repeating-linear-gradient(315deg, rgba(255, 182, 0, 0.5), rgba(255, 182, 0, 0.5) 10px, rgba(0, 0, 0, 0.6) 10px, rgba(0, 0, 0, 0.6) 20px);
    background: repeating-linear-gradient(135deg, rgba(255, 182, 0, 0.5), rgba(255, 182, 0, 0.5) 10px, rgba(0, 0, 0, 0.6) 10px, rgba(0, 0, 0, 0.6) 20px);
}

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

.img-pattern:after{
    background: url(..css/images/bg/pattern.html) center repeat;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.7;
    z-index: -1;
}
/* ================================
    23.2  Dot  overlay pattern
=================================== */
.piko-overlay {
    opacity: .5;
    background: transparent url(overlays/02.html) center center repeat;
}


/* ===========================
  24.1  footer big
============================== */
.footer2-bg{
    background-color: #24201f;
    color: #ccc;
    font-weight:500;
}
.f-line{
    width: 100px;
    height: 10px;
    background-color: #ffb600;
    pposition: 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;
    font-weight:600;
    padding:5px 0;
    margin: 10px 0;
}
.footer2-box p {
    color:#ccc;
    padding: 15px 0;
}
/*.footer2-box .media{
    padding-top: 7px;
}*/
.footer2-box .media a{
    font-size: 14px;
    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: 13px;
    font-style: italic;
}

.footer2-box ul, .footer2-box ol{
    cursor: pointer;
    padding:5px 0;
}
.footer2-box ul li{
    position:relative;
    padding:7px 0;
}
/*.footer2-bg.light .footer2-box ul li, .footer2-bg.light .footer2-box ol li{
    border-bottom: 1px dashed #ccc;
}*/
.footer2-box ul li:hover{
    position:relative;
    padding-left:8px;
    font-weight:600;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}
.footer2-box ol li{
    position:relative;
    padding:5px 0;
    border-bottom: 1px dashed #444;
}

.footer2-box ol li span{
    font-weight:600;
}


/* ========================
  24.2 sub menu footer
========================= */
footer {
    line-height:70px;
    font-weight:600;
    /*    background-color:#ffb600;*/
}
footer p{
    color:#141414;
    margin:0;
}
footer a{
    color:#fff !important;
}
footer .link a{
    color:#141414 !important;
    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 !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}
/* ======================
   24.3 back to top
====================== */

.back-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    padding: 10px 10px 10px 15px;
    position: fixed;
    bottom: 80px;
    right: 50px;
    border: 1px solid #e0a000;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    z-index:10000;
    white-space: nowrap;
    color: #fff !important;
    background: #ffb600;
    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;
}

/* ================================
      Bootstrap changing
=================================== */
/*carousel control*/
/*bootstrap carosel next and previous*/
strong{font-weight: 600;}
.title{
    margin-right: 15px;
}
.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 !important;
}
/*flickr widget*/
.popup-gallery.table > tbody > tr > td {
    padding: 0 5px 6px 0px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 1px solid #DDD;
}

.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;
}
form .form-control-feedback{
    margin: 24px 10px 0 0;
    color:#999;
}
.result{
    margin-bottom: 15px;
}
.form-control.piko-coming, #newsletterForm .form-control {
    background-color: transparent;
}
.piko-media .media-body:hover .font16{
    color: #fff !important;
    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;
    font-weight: 400;
}
.media .media-body h4{
    font-weight: 500;
}

/*.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 {
    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 {
    border-color: #ffb600;
    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: 0px !important;
    border-top-left-radius: 0px !important;
}

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

.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;
    font-weight: 600;
}
/* =======================
    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 !important;
}
.nav-page ul li a i{
    padding-right: 10px;
    color: #ffb600 !important;
}
.media-body.tab-piko ul li {
    margin-top: 15px;
    margin-bottom: 0px !important;
}
.tab-content{
    border: 1px solid #f3f3f3;
    padding: 30px 20px;
}
.tab-content.widget{
    border: 1px solid #f3f3f3;
    padding: 0;
}

/* ================================
      div screen middle
=================================== */
.screen-middle {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



/*============================
26   Cost calculation
============================= */
select option{
    height: 25px;
    padding: 5px 10px;
}
select option:hover{
    height: 25px;
    padding: 5px 15px;
    font-weight: 700;
}

/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    -webkit-filter: inherit;
    filter: inherit;
}

.ui-slider-horizontal {
    height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

/*///////////////////////////////////////////////////*/

.ui-slider
{
    float: right;
    width: 100%;
    margin-top: 20px;
    background-color: #E2E6E7;
    border-radius: 5px;
}
.ui-slider-horizontal
{
    height: 10px;
}
.ui-slider .ui-slider-handle{
    cursor: pointer;
    width: 28px;
    height: 32px;
    background: url(../images/bg/button.png) no-repeat;
    border: none;
}

.cost_cal-box{
    line-height: 50px;
    background-color: #f3f3f3;
    text-align: right;
    padding-top: 10px;
    padding-bottom: 6px;
}

.cost_cal-box input{
    width: 100%;
    height: 50px;
    border:1px solid #f3f3f3;
    color: #ffb600;
    font-size: 22px;
    text-align: center;
    font-weight:bold;
}

.cost_cal-box label, .sel_option label{
    width: 100%;
    height: 40px;
    line-height: 20px;
    font-size: 15px;
    font-weight:normal;
    text-align: left;
}
.sel_option{
    background-color: #f3f3f3;
    text-align: right;
    padding-top: 10px;
    padding-bottom: 6px;
}
.sel_option label{
    padding-top: 27px;
}
.sel_option select{
    width: 100%;
    height: 50px;
    margin: 10px 0 !important;
    border:1px solid #f3f3f3;
    font-size: 14px;
    text-align: left;
    font-weight:normal;
    border-radius: 0;
}

.sel_option select #speed{
    padding-top: 10px;
}

.cost .form-group{
    margin-bottom: 2px;
}


.sel_option .ui-widget{
    padding: 10px;
    background-color: #fff;
    color: #666;
    font-weight: normal;
    border-radius: 0;
}

.ui-menu .ui-menu-item {
    padding-top: 5px;
    padding-left: 20px;
}

.overflow {
    height: 200px;

}
.total-cost{
    width: 100%;
    border-bottom:  2px solid #ffb600;
    padding: 30px 0  50px;
}
.total-cost p, .total-cost2 p{
    font-size: 15px;
    font-weight: 700;
}
.total-cost p span, .total-cost2 p span{
    font-size: 25px;
    font-weight: 700;
    color: #ffb600;
    padding-left: 5px;
}
.total-cost p i, .total-cost2 p i{
    font-size: 25px;
    font-weight: 700;
    color: #ddd;
    padding-left: 10px;
}
.total-cost2{
    width: 100%;
    height: 100px;
    background-color: #f3f3f3;
}
.total-cost2 h4{
    margin-top: 0;
    padding-top: 10px;
    text-align: center;
}



/* ================================
    28.  Media Query
=================================== */

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

@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;
    }

    /*    .padding-tb50{
            padding-top: 150px;
            padding-bottom: 0px;
        }*/

    .absolute-slide{
        margin-top: 578px;
    }
    .absolute-slide.contact{
        margin-top: 650px;
    }
    .absolute-slide2{
        margin-top: 580px;
    }
    .piko-address.slide {
        font-size:14px;
    }
    .piko-address.slide.menu {
        font-size:13px;
    }
    .piko-address.slide span{
        font-size:15px;
    }
    .piko-address.slide i{
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 35px;
    }
    .piko-address.slide.menu {
        padding:8px 0;
    }
    footer {
        line-height:50px !important;
        padding: 10px 0;
    }


    .get-quote .layer p{
        font-size: 15px;
        padding-left: 20px;
        line-height: 20px;
        padding-top: 20px;

    }
    .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;
    }
    .back-top {
        right: 10px;
        bottom: 75px;
    }
    .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%;
    }

}

/* 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: 15px;
    }
    .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;
    }
    .absolute-slide{
        margin-top: 305px;
    }
    .absolute-slide2{
        margin-top: 415px;
    }
    .piko-address.slide {
        font-size:14px;
    }
    .piko-address.slide.menu {
        font-size:13px;
    }
    .piko-address.slide span{
        font-size:14px;
    }
    .piko-address.slide i{
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 35px;
    }
    .piko-address.slide.menu {
        padding:8px 0;
    }
    footer {
        line-height:40px !important;
        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;
    }
    .back-top {
        right: 10px;
        bottom: 70px;
    }
    .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;
    }
    .mobile.shop-cart:after {
        left: 70%;
    }

}

@media (max-width: 767px) {
    footer p{
        text-align: center;
    }
    footer .link {
        float: none !important;
        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 !important;
        padding: 15px 0 10px;
    }  
    .social-wrap {
        float:none !important;
        display: block;
    }
    /*    .social-wrap a{
            float:none !important;
            text-align: center !important;
        }*/
    .padding-t100{
        padding:50px 0;
    }

    .piko-hr-title {
        width: 100%;
    }
    .absolute-slide{
        margin-top: 0px;
    }
    .absolute-slide2{
        margin-top: 0px;
    }

    .padding-t40{
        padding-top: 0px;
    }
    .row.full{
        padding-right: 15px;
        padding-left: 15px;
    }
    .page-banner h1 {
        font-size: 30px;
    }
    .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);
        -ms-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-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;
    }
    .back-top {
        right: 10px;
        bottom: 90px;
    }
    .modal-lg {
        max-width:90%;
        margin-right:15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .back-top {
        right: 10px;
        bottom: 120px;
    }
    .margin-t150 {
        margin-top: 0px;
    }

    .get-quote .layer p{
        font-size: 14px;
        line-height: 20px;
        padding-top: 15px;
        font-weight: normal;
    }
    .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;
    }



}


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

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

1. Preload.
------------------------------------------
2. Heading Title.
------------------------------------------
3. Button and Effect
------------------------------------------
4. Font Icon Design (FontAwesome)
------------------------------------------
5. Prograss Bars
-----------------------------------------
6. Counter Box
-----------------------------------------
7. Font Box Design
-----------------------------------------
8. Image frames Border
----------------------------------------
9. Tooltrip and Pop overs
---------------------------------------
10. Pricing Box
----------------------------------------
11. List Item
----------------------------------------

====================================== */
.shortcode-bg{
    background:url(../images/bg/bg-blur3.html) no-repeat center center;
    background-size:cover;
}
/* ===================
    1. 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;
}

/*----------------------------------------------------
   Heading Titles
------------------------------------------------------*/

.piko-subtitle1 h3, .piko-subtitle2 h3{
    line-height: 0.5;
    text-align: center;
    font-size: 27px;
}
.piko-subtitle1 p, .piko-subtitle2 p{
    text-align: center;
    font-size: 14px;
}
.piko-subtitle1 span, .piko-subtitle2 span {
    display: inline-block;
    position: relative;
}
.piko-subtitle1 span:before,
.piko-subtitle1 span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
    top: 10px;
    width: 100%;
}
.piko-subtitle2 span:before,
.piko-subtitle2 span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 1px solid #e3e3e3;
    top: 10px;
    width: 100%;
}
.piko-subtitle1 span:before, .piko-subtitle2 span:before {
    right: 100%;
    margin-right: 15px;
}
.piko-subtitle1 span:after, .piko-subtitle2 span:after {
    left: 100%;
    margin-left: 15px;
}
.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;
    font-weight: 700;
    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;
    font-weight: 300;
}
.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;
    font-weight: 800;
}
.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);
    -ms-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);
    -ms-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);
    -ms-transform: skewX(-15deg);
    transform: skewX(-15deg);
    z-index: 1;

}

.page-wrap .section-title {
    -webkit-transform: skewX(-15deg);
    -ms-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;
    font-weight: 700;
}
.piko-title4.widget h3{
    font-size: 18px;
    padding-bottom: 16px;
    margin-bottom: 0;
}
.piko-title4.widget h3 strong{
    font-weight: 600;
}
.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 !important;
    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;
    font-weight: normal;
    margin-bottom: 25px;
}
.piko-title5 h3.nmb {
    margin-bottom: 10px;
}
.piko-title5 h3.big {
    font-size: 43px;
    font-weight: bolder;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}
.piko-title5 h3.shop {
    font-size: 12px !important;
    padding-top: 0;
    margin-bottom: 0;
    line-height: 0 !important;
    text-transform: uppercase;
}
.piko-title5 a {
    font-size: 13px;
    font-weight: normal !important;
}
.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;
    font-weight: 400;
}
.piko-title6 hr {
    width: 100px;
    height: 2px;
    display: block;
    /*    background: #ffb600;*/
    margin: 0 auto;
    margin-bottom: 20px;
}


.piko-title6.two hr {
    width: 30px;
    height: 2px;
    margin-bottom: 10px;
    background: #ffb600;
}
.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;
    font-weight: 300;
}
.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;
}
.piko-title9  h2, .piko-title9  h1, .piko-title9  h3{
    margin-bottom: 15px;
    font-size: 23px;
    font-weight: 700;
}
.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;
}
.piko-title9 h3 mark{
    /*   color:#ffb600;*/
    background-color:transparent;
}



/* =============================
    2. Section divider
============================== */
.piko-divider0 {
    float: left;
    width: 100%;
    padding-top: 100px;
    margin-bottom: 100px;
    border-bottom: 1px solid #e1e1e1;
}
.piko-divider0.pm {
    padding-top: 0px;
    margin-bottom: 0px;
}
.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 !important;
}
.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.html) 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: '';
}

/* ===========================
    3. small buttons
=========================== */
.btn-s1 {
    color: #fff;
    padding: 10px 25px;
    /*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: 35px;
    font-size: 12px;
    font-weight: normal !important;
    position: relative;
    /*    background-color: #ffb600;*/
    color: #fff;
    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:hover {
    color: #fff !important;
    background-color: #e0a000;
}
.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 !important;
    background: #141414;
    border: 1px solid #141414;
    padding: 8px 10px;
}
.btn-s5.gray2:hover {
    color: #fff !important;
    border: 1px solid;
}
.btn-s5.gray3 {
    color: #222 !important;
    background: #f3f3f3;
    border: 1px solid #f9f9f9;
    padding: 8px 10px;
}
.btn-s5.gray3:hover {
    color: #fff !important;
    border: 1px solid ;
    background-color: #ffb600;
}
.btn-s5.gray:hover {
    color: #fff !important;
    /*background-color: #ffb600;*/
    border: 1px solid;
}
.btn-s5.orange {
    color: #fff !important;
    border: 1px solid;
}
.btn-s5.orange:hover {
    color: #222 !important;
    background-color: #fff;
    border: 1px solid;
}
.btn-s5.light {
    color: #fff;
    background: none;
    border: 1px solid #fff;
}
.btn-s5.light:hover {
    color: #666 !important;
    background-color: #fff;
    border: 1px solid #999;
}

.btn-s5.light2 {
    color: #fff !important;
    background: none;
    border: 1px solid #fff !important;
    padding: 8px 18px;
}
.btn-s5.light2:hover {
    color: #141414 !important;
    background-color: #fff;
}
.btn-s5.light3 {
    color: #fff !important;
    background: none;
    border: 1px solid #fff !important;
    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 !important;
        background-color: #fff;
        font-weight: normal;
    }

}

/* ============================
     3.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;
    font-weight: bold;
}
.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 !important;
    font-weight: 700;
}
.btn-m5.gray.ms {
    padding: 7px 10px;
    border-radius: 0px;
    font-weight: 500;
}
.btn-m5 i, .btn-m4 i{
    padding-right: 6px;
}
.btn-m5.gray:hover {
    color: #fff !important;
    /*    background-color: #ffb600;*/
    border: 2px solid;
}

/* =========================
   3.3  large buttons
========================== */
.btn-lg1 {
    color: #fff;
    padding: 18px 50px;
    /*background-color: #ffb600;*/
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-lg1:hover {
    color: #fff;
    background-color: #393939;
}
.btn-lg1.two:hover {
    color: #fff;
    background-color: #727272;
}
.btn-lg1.small {
    color: #fff;
    padding: 13px 50px;
    /*background-color: #ffb600;*/
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
}
.btn-lg1.small:hover {
    color: #fff;
    background-color: #393939;
}
.btn-lg3 {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding-right: 35px;
    padding-left: 83px;
    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-lg3 span {
    position: absolute;
    left: 0;
    width: 58px;
    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-lg3:hover {
    color: #fff;
}
.btn-lg3 span i {
    color: #fff;
    font-size: 18px;
    margin-left: 20px;
}
.btn-lg3:hover span, .btn-lg3.active span {
    color: #fff;
    background-color: #393939;
    border-right: 1px solid #181818;
}
.btn-lg2 {
    color: #fff;
    padding: 16px 50px;
    /*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-lg2:hover {
    color: #fff;
    background-color: #393939;
}
.btn-lg4 {
    color: #fff;
    padding: 16px 50px;
    /*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-lg4:hover {
    color: #fff;
    background-color: #393939;
}
.btn-lg4.white {
    /*color: #ffb600;*/
    background-color: #fff;
    border-bottom: 0px solid #393939;
}
.btn-lg4:hover {
    color: #fff;
    background-color: #393939;
    border-bottom: 0px solid #454545;
}
.btn-lg5 {
    /*color: #ffb600;*/
    padding: 16px 45px;
    background-color: #fff;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 2px solid;
}
.btn-lg5:hover {
    color: #393939;
    border: 2px solid #393939;
}
.btn-lg5 i, .btn-lg4 i{
    padding-right: 6px;
}
.btn-lg5.gray {
    padding: 10px 50px;
    border-radius: 0;
    border: 1px solid;
}
.btn-lg5.gray:hover {
    color: #fff !important;
    border: 1px solid;
}



/* =======================
    3.4 button effect
======================== */

/* Pulse */
@-webkit-keyframes btn-pulse {
    50% {
        background-color: rgba(32, 152, 209, 0.75);
    }
}

@keyframes btn-pulse {
    50% {
        background-color: rgba(32, 152, 209, 0.75);
    }
}

.btn-pulse {
    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;
    overflow: hidden;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}
.btn-pulse:hover, .btn-pulse:focus, .btn-pulse:active {
    -webkit-animation-name: hvr-back-pulse;
    animation-name: hvr-back-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    /*background-color: #ffb600;*/
    color: white;
}

/* Sweep To Right */
.btn-sweep-to-right {
    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.3s;
    transition-duration: 0.3s;
}
.btn-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-sweep-to-right:hover, .btn-sweep-to-right:focus, .btn-sweep-to-right:active {
    color: white;
}
.btn-sweep-to-right:hover:before, .btn-sweep-to-right:focus:before, .btn-sweep-to-right:active:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

/* Sweep To Left */
.btn-sweep-to-left {
    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.3s;
    transition-duration: 0.3s;
}
.btn-sweep-to-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-sweep-to-left:hover, .btn-sweep-to-left:focus, .btn-sweep-to-left:active {
    color: white;
}
.btn-sweep-to-left:hover:before, .btn-sweep-to-left:focus:before, .btn-sweep-to-left:active:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

/* Sweep To Bottom */
.btn-sweep-to-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.3s;
    transition-duration: 0.3s;
}
.btn-sweep-to-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-sweep-to-bottom:hover, .btn-sweep-to-bottom:focus, .btn-sweep-to-bottom:active {
    color: white;
}
.btn-sweep-to-bottom:hover:before, .btn-sweep-to-bottom:focus:before, .btn-sweep-to-bottom:active:before {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

/* Sweep To Top */
.btn-sweep-to-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.3s;
    transition-duration: 0.3s;
}
.btn-sweep-to-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-sweep-to-top:hover, .btn-sweep-to-top:focus, .btn-sweep-to-top:active {
    color: white;
}
.btn-sweep-to-top:hover:before, .btn-sweep-to-top:focus:before, .btn-sweep-to-top:active:before {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

/* Bounce To Right */
.btn-bounce-right {
    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-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-bounce-right:hover, .btn-bounce-right:focus, .btn-bounce-right:active {
    color: white;
}
.btn-bounce-right:hover:before, .btn-bounce-rightt:focus:before, .btn-bounce-right:active:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(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 Left */
.btn-bounce-left {
    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-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-bounce-left:hover, .btn-bounce-left:focus, .btn-bounce-left:active {
    color: white;
}
.btn-bounce-left:hover:before, .btn-bounce-left:focus:before, .btn-bounce-left:active:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(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 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);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: 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);
    -ms-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);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: -webkit-transform;
    transition-property: 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);
    -ms-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);
}

/* Underline From Left */
.btn-underline-left {
    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;
    overflow: hidden;
}
.btn-underline-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    /*background: #ffb600;*/
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-underline-left:hover:before, .btn-underline-left:focus:before, .btn-underline-left:active:before {
    right: 0;
}

/* Underline From Center */
.btn-underline-center {
    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;
    overflow: hidden;
}
.btn-underline-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    bottom: 0;
    /*background: #ffb600;*/
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-underline-center:hover:before, .btn-underline-center:focus:before, .btn-underline-center:active:before {
    left: 0;
    right: 0;
}

/* Overline From Left */
.btn-overline-left {
    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;
    overflow: hidden;
}
.btn-overline-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    top: 0;
    /*background: #ffb600;*/
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-overline-left:hover:before, .btn-overline-left:focus:before, .btn-overline-left:active:before {
    right: 0;
}

/* Overline From Center */
.btn-overline-center {
    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;
    overflow: hidden;
}
.btn-overline-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0;
    /*    background: #ffb600;*/
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-overline-center:hover:before, .btn-overline-center:focus:before, .btn-overline-center:active:before {
    left: 0;
    right: 0;
}
/* Underline Reveal */
.btn-underline-reveal {
    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;
    overflow: hidden;
}
.btn-underline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #ffb600;*/
    height: 4px;
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-underline-reveal:hover:before, .btn-underline-reveal:focus:before, .btn-underline-reveal:active:before {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* Overline Reveal */
.btn-overline-reveal {
    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;
    overflow: hidden;
}
.btn-overline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    /*background: #ffb600;*/
    height: 4px;
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn-overline-reveal:hover:before, .btn-overline-reveal:focus:before, .btn-overline-reveal:active:before {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.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: #ccc;
    padding: 12px 35px;
    border-radius: 2px;
    white-space: nowrap;
    border: 1px solid #ccc;
}
.btn-m6 i{
    padding-right: 6px;
}

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



/* ==========================
    4.1 font icon effect
=========================== */
.icon-wrap {
    text-align: center;
    margin: 0 auto;
}
.feature-icon .icon-wrap a{
    margin-right:  35px;
    margin-bottom: 30px;
}
.icon {
    display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin: 0 auto;
    width: 90px;
    height: 90px;
    /*border-radius: 50%;*/
    text-align: center;
    position: relative;
    z-index: 1;
    color: #fff;
}
.icon.big {
    width: 140px;
    height: 140px;
    /*color: #ffb600;*/
}
.icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
}
.icon:before {
    font-family: 'FontAwesome';
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.icon.big:before {
    font-size: 60px;
    line-height: 140px;
}

/* ===========================================
    4.2 Button effect for all button
============================================ */

/* Effect 1 */
.icon-effect-1 .icon {
    background: rgba(255,255,255,0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.icon-effect-1 .icon:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    opacity: 0;
}

/* Effect 1a */
.icon-effect-1a .icon:hover {
    background: rgba(255,255,255,1);
    color: #41ab6b;
}

.icon-effect-1a .icon:hover:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 1b */
.icon-effect-1b .icon:hover {
    background: rgba(255,255,255,1);
    color: #41ab6b;
}

.icon-effect-1b .icon:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.icon-effect-1b .icon:hover:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 2 */
.icon-effect-2 .icon {
    color: #eea303;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.icon-effect-2 .icon:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}

/* Effect 2a */
.icon-effect-2a .icon:hover {
    color: #eea303;
}

.icon-effect-2a .icon:hover:after {
    -webkit-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}

/* Effect 2b */
.icon-effect-2b .icon:hover:after {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}

.icon-effect-2b .icon:hover {
    color: #fff;
}

/* Effect 3 */
.icon-effect-3 .icon {
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.icon-effect-3 .icon:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
}

/* Effect 3a */
.icon-effect-3a .icon {
    color: #f06060;
}

.icon-effect-3a .icon:hover {
    color: #fff;
}
.icon-effect-3a .icon:hover:after {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}

/* Effect 3b */
.icon-effect-3b .icon {
    color: #fff;
}

.icon-effect-3b .icon:hover {
    color: #f06060;
}
.icon-effect-3b .icon:after {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
.icon-effect-3b .icon:hover:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 5 */
.icon-effect-5 .icon {
    box-shadow: 0 0 0 1px rgba(255,255,255,1);
    overflow: hidden;
    border-bottom: 10px solid #ffb600;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.icon-effect-5 .icon:after {
    display: none;
}
.icon-effect-5 .icon:hover {
    /*background: rgba(255,255,255,1);*/
    color: #fff !important;
    box-shadow: 0 0 0 2px rgb(255,182,0);
}

.icon-effect-5a .icon:hover:before {
    -webkit-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards;
}
/*.nocolor .caption.white h3:after{
    content: "\f105";
    border-bottom: 10px solid #ffb600;
    height: 150px;
    background-color: #ffb600;
}*/

@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

.icon-effect-5b .icon:hover:before {
    -webkit-animation: toLeftFromRight 0.3s forwards;
    animation: toLeftFromRight 0.3s forwards;
}

@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}

.icon-effect-5c .icon:hover:before {
    -webkit-animation: toTopFromBottom 0.3s forwards;
    animation: toTopFromBottom 0.3s forwards;
}

@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}

.icon-effect-5d .icon:hover:before {
    -webkit-animation: toBottomFromTop 0.3s forwards;
    animation: toBottomFromTop 0.3s forwards;
}

@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}

/* Effect 6 */
.icon-effect-6 .icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.icon-effect-6 .icon:hover {
    background: rgba(255,255,255,1);
    color: #64bb5d;
}

.icon-effect-6 .icon:hover:before {
    -webkit-animation: spinAround 2s linear infinite;
    animation: spinAround 2s linear infinite;
}

/* Effect 7 */
.icon-effect-7 .icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.icon-effect-7 .icon:hover {
    color: #fff;
}

.icon-effect-7 .icon:after {
    top: -8px;
    left: -8px;
    padding: 8px;
    z-index: -1;
    opacity: 0;
}

/* Effect 7a */
.icon-effect-7a .icon:after {
    box-shadow: 0 0 0 rgba(255,255,255,1);
    -webkit-transition: opacity 0.2s, box-shadow 0.2s;
    transition: opacity 0.2s, box-shadow 0.2s;
}
.icon-effect-7a .icon:hover:after {
    opacity: 1;
    box-shadow: 3px 3px 0 rgba(255,255,255,1);
}
.icon-effect-7a .icon:before {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.icon-effect-7a .icon:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 7b */
.icon-effect-7b .icon:after {
    box-shadow: 3px 3px rgba(255,255,255,1);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}

.icon-effect-7b .icon:hover:after {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.icon-effect-7b .icon:before {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.icon-effect-7b .icon:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 8 */
.icon-effect-8 .icon {
    background: rgba(255,255,255,0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.icon-effect-8 .icon:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.icon-effect-8 .icon:hover {
    background: rgba(255,255,255,0.05);
    -webkit-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
    color: #fff;
}
.icon-effect-8 .icon:hover:after {
    -webkit-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Effect 9 */
.icon-effect-9 .icon {
    -webkit-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.icon-effect-9 .icon:after {
    top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}

/* Effect 9a */
.icon-effect-9a .icon:hover:after {
    -webkit-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.5;
}
.icon-effect-9a .icon:hover {
    box-shadow: 0 0 0 10px rgba(255,255,255,1);
    color: #fff;
}

/* Effect 9b */
.icon-effect-9b .icon:hover:after {
    -webkit-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}
.icon-effect-9b .icon:hover {
    box-shadow: 0 0 0 10px rgba(255,255,255,0.4);
    color: #fff;
}

/* Webkit animation keyframes */
@-webkit-keyframes animate-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 44px 0;
    }
}


/* ==============================
    5. Prograss Bar
=============================== */
.ui-pbg {
    position: relative;
    height: 35px;
    padding-right: 2px;
    border-bottom: 15px solid #f5f5f5;
    margin-top: -25px;

}
.ui-progress {
    position: relative;
    display: block;
    overflow: hidden;
    height: 35px;
    border-bottom: 15px solid #5CB85C;
}
.ui-progress.two {
    border-bottom: 15px solid #5BC0DE;
}
.ui-progress.three {
    border-bottom: 15px solid #F0AD4E;
}
.ui-progress.four {
    border-bottom: 15px solid #e7d18d;
}
.ui-progress.five {
    border-bottom: 15px solid #D9534F;
}
.ui-progress span.ui-label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 16px;
    color: #272727;
    position: absolute;
    right: 0;
    line-height: 20px;
    padding-right: 12px;
    white-space: nowrap;
}
.ui-pbg.small {
    height: 34px;
    border-bottom: 7px solid #f5f5f5;
    margin-top: -35px;
}
.ui-progress.small {
    height: 34px;
    border-bottom: 7px solid #5CB85C;
}
.ui-progress.small.two {
    border-bottom: 7px solid #5BC0DE;
}
.ui-progress.small.three {
    border-bottom: 7px solid #F0AD4E;
}
.ui-progress.small.four {
    border-bottom: 7px solid #e7d18d;
}
.ui-progress.small.five {
    border-bottom: 7px solid #D9534F;
}

/*Style 02*/
.ui-pbg2 {
    position: relative;
    height: 46px;
    padding-right: 2px;
    border-bottom: 10px solid #f5f5f5;
    margin-top: -29px;
}
.ui-progress2 {
    position: relative;
    display: block;
    overflow: hidden;
    height: 46px;
    border-bottom: 10px solid #5CB85C;
}
.ui-progress2.two {
    border-bottom: 10px solid #5BC0DE;
}
.ui-progress2.three {
    border-bottom: 10px solid #F0AD4E;
}
.ui-progress2.four {
    border-bottom: 10px solid #e7d18d;
}
.ui-progress2.five {
    border-bottom: 10px solid #D9534F;
}
.ui-progress2 span.ui-label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    position: absolute;
    right: 0;
    line-height: 28px;
    padding-right: 12px;
    white-space: nowrap;
}
.ui-progress2 b {
    float: left;
    width: 40px;
    height: 40px;
    text-align: center;
    background: url(../images/bg/tooltop-graph.png) no-repeat center top;
}


/*style 03*/
.ui-pbg3 {
    position: relative;
    height: 35px;
    padding-right: 2px;
    border-bottom: 10px solid #f5f5f5;
    margin-top: -25px;
}
.ui-progress3 {
    position: relative;
    display: block;
    overflow: hidden;
    height: 35px;
    border-bottom: 10px solid #C1C8CE;
}
.ui-progress3 span.ui-label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 16px;
    color: #272727;
    position: absolute;
    right: 0;
    line-height: 20px;
    padding-right: 12px;
    white-space: nowrap;
}

/*style 04*/
.ui-pbg4 {
    position: relative;
    height: 27px;
    padding-right: 2px;
    background-color: #f5f5f5;
    margin-top: -10px;
}
.ui-progress4 {
    position: relative;
    display: block;
    overflow: hidden;
    height: 27px;
    background: -webkit-repeating-linear-gradient(135deg, rgba(255, 182, 0, 0.2), rgba(255, 182, 0, 0.2) 10px, rgba(255, 182, 0, 0.3) 10px, rgba(255, 182, 0, 0.3) 20px);
    background: -webkit-repeating-linear-gradient(315deg, rgba(255, 182, 0, 0.5), rgba(255, 182, 0, 0.5) 10px, rgba(0, 0, 0, 0.6) 10px, rgba(0, 0, 0, 0.6) 20px);
    background: repeating-linear-gradient(135deg, rgba(255, 182, 0, 0.5), rgba(255, 182, 0, 0.5) 10px, rgba(0, 0, 0, 0.6) 10px, rgba(0, 0, 0, 0.6) 20px);
}
.ui-progress4 span.ui-label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    color: #222;
    position: absolute;
    right: 0;
    line-height: 27px;
    padding-right: 30px;
    white-space: nowrap;
    margin-top:2px;

}
.ui-progress4 span.ui-label b{
    padding:5px;
    border-radius: 50%;
    background-color: #fff;

}

.ui-pbg4.color {
    height: 22px;
    border-radius: 14px;
    margin-top: -5px;
}
.ui-progress4.color {
    height: 22px;
    border-radius: 14px;
    background-color: #e54c4c;
}
.ui-progress4 span.ui-label {
    line-height: 22px;
}

.progress-title h5 {
    font-weight: 500;
    color:#222;
}
.progress-title2 h5 {
    font-weight: 600;
    margin-bottom: 25px;
    color:#222;

}

/* ===========================
    6. charts
============================= */
.charts > div{
    float: left;
    display: inline-block;
    margin: 10px;
    text-align: center;
    padding-top: 10px;
    font-weight: 700;
}
.charts p{
    text-align: center;
    font-weight: 700;
    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;
}


/* =========================
    6.1 Counters Design
============================ */
.counter1 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
}
.counter1 span {
    font-size:25px;
    font-weight: 600;
}
.counter1 h5 {
    color: #ccc;
    font-weight: 600;
}
.counter1.two span {
    font-size: 40px;
    color: #fff;
    font-weight: 700;
}
.counter1.two h4 {
    font-size: 16px;
    color: #fff;
    margin: 3px 0px 0px 0px;
}
.counter1.three span {
    font-size: 40px;
    color: #393939;
    font-weight: 400;
}
.counter1.three h4 {
    font-size: 16px;
    color: #999;
    margin: 3px 0px 0px 0px;
}
.counter2 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
}
.counter2 i {
    /*color: #ffb600;*/
    font-size: 40px;
    display: block;
    margin-bottom: 30px;
}
.counter2 h4 {
    font-size: 18px;
    color: #999;
    font-weight: 400;
    margin: 30px 0px 0px 0px;
}
.counter2 .one {
    background-color: #f3f3f3;
    padding: 30px 0px;
    border-radius: 4px;
    font-size: 50px;
    color: #393939;
    font-weight: bold;
}
.counter1.widget > div{
    float: left;
    display: inline-block;
    margin-right: 20px;
    text-align: center;
    vertical-align: middle;
}
.counter3 {
    width: 100%;
    padding: 0px;
    text-align: center;
}
.counter3 .one {
    padding: 0px;
    font-size: 45px;
    text-align: center;
}
.counter3.small .one {
    padding: 0px;
    font-size: 30px;
    color: #9ECA45;
    text-align: center;
}
.counter3 .one i {
    font-size: 55px;
    padding-bottom: 30px;
    padding-right: 25px;
    padding-top:30px;
    padding-left: 20px;
}
.counter3.small .one i {
    font-size: 49px;
    padding-bottom: 40px;
    padding-right: 30px;
    padding-top:35px;
    padding-left: 30px;
}
.counter3 .one.white {
    color: #e3e3e3;
}
.counter3 .one.white i {
    color: #9eca45;
}
.counter3 .one.two i {
    color: #fff;
    /*    background-color: #ffb600;*/
}
.counter3 .one.three {
    color: #9eca45;
    border: 1px solid;
}
.counter3 .one.three i {
    border-right: 1px solid;
    margin-right: 40px;
}
.counter3 .one.four i {
    border-right: 1px solid;
    margin-right: 40px;
}
.counter3 h4 {
    text-align: center;
    font-size: 18px;
    color: #999;
    font-weight: 400;
    margin: 10px 0px 0px 0px;
}
.counter4 {
    float: left;
    width: 100%;
    text-align: center;
    padding: 50px 0px 45px 0px;
    border-radius: 4px;
    font-size: 50px;
    border: 1px solid #e9e9e9;
    color: #9eca45;
}
.counter4 span {
    font-weight: bold;
}
.counter4 h4 {
    font-size: 21px;
    color: #454545;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 0px;
}

.counter4.two {
    padding: 70px 0px;
    border: none;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.counter4.three {
    padding: 100px 0px 100px 0px;
    border: none;
    border-bottom: 1px solid #eee;
}
.counter5 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
}
.counter5 span {
    font-size: 67px;
    font-weight: 600;
    color: #fff;
}
.counter5 h4 {
    color: #fff;
    font-weight: 400;
    margin: 0px 0px 35px 0px;
}
.counter6 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
    font-size: 50px;
    color: #fff;
    font-weight: 300;
}
.counter6 i {
    color: #fff;
    font-size: 20px;
    display: block;
    margin-bottom: 35px;
}
.counter6 h4 {
    display: block;
    width: 50%;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin: 35px auto 0 auto;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding: 5px 0px 8px 0px;
}
.counter7 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
    font-size: 45px;
    color: #fff;
    font-weight: 600;
}
.counter7 i {
    /*	color: #ffb600;*/
    font-size: 30px;
    display: block;
    margin-bottom: 35px;
}
.counter7 h4 {
    display: block;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin: 15px auto 0 auto;
}
.counter7.two i {
    color: #fff;
}
.counter8 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
    font-size: 45px;
    color: #393939;
    font-weight: 600;
}
.counter8 h4 {
    display: block;
    width: 50%;
    font-size: 16px;
    color: #727272;
    margin: 27px auto 0 auto;
}

.counter9 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
}
.counter9 .circle {
    width: 138px;
    height: 138px;
    padding-top: 40px;
    border: 1px solid #eee;
    border-radius: 100%;
    margin: 0 auto;
}
.counter9 span {
    font-size: 35px;
    color: #393939;
    font-weight: 300;
}
.counter9 h4 {
    font-size: 16px;
    color: #999;
    font-weight: 300;
    margin: 5px 0px 0px 0px;
}
.counter10 {
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
    font-size: 45px;
    color: #2a2a30;
    font-weight: 700;
}
.counter10 h4 {
    display: block;
    width: 100%;
    font-size: 16px;
    color: #727272;
    margin: 18px auto 0 auto;
}
.counter10 .one_half {
    padding: 30px 0px 30px 0px;
    border: 2px solid #e9e9e9;
}


/* ================================
   6.2 counter graphis icon
================================== */
.block, .block2{
    display: inline-block;
    /*margin-top: 40px;*/
    margin-left: 65px;
}
.count-icon-box{
    color: #21c2f8;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 50%;
    line-height: 100px;
    height: 100px;
    width: 100px;
}
.count-box{
    border: 1px solid #fff;
    color: #fff;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 40px;
    height: 40px;
    width: 120px;
    text-align: center;
    padding-bottom: 45px;
}
.count-box.black{
    border: 1px solid #f3f3f3;
}
.count-text{
    color: #666;
    font-size: 1em;
    text-align: center;
    margin-top: 10px;
    text-transform: uppercase;
}
.block2 .count-box, .block2 .count-text{
    color: #fff;
}
@media only screen and (max-device-width: 768px) {
    .block, .block2{
        display: inline-block;
        margin-top: 40px;
        margin-left: 20px;
        margin-bottom: 40px;
    }
    .counter3.small .one i {
        font-size: 48px;
        padding-bottom: 20px;
        padding-right: 25px;
        padding-top:25px;
        padding-left:25px;
    }

}


/* ============================
    7. FontAwesome icons box
============================== */
.font0 {
    width: 100px;
    height: 100px;
    color: #fff;
    font-size: 50px !important;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    /*    background-color: #ffb600;*/
    margin-right: 13px;
    margin-bottom: 13px;
}
.font1 {
    width: 100px;
    height: 100px;
    color: #fff;
    font-size: 50px !important;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    background-color: #393939;
    margin-right: 13px;
    margin-bottom: 13px;
}
.font2 {
    color: #393939;
    font-size: 50px !important;
    vertical-align: middle;
    margin-right: 30px;
    margin-bottom: 30px;
}
.font3 {
    color: #393939;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    border: 1px solid #999;
    margin-bottom: 12px;
}
.font4 {
    color: #fff;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #9eca45;
    margin-bottom: 12px;
}
.font4.two {
    float: left;
    font-size: 22px !important;
    width: 40px;
    height: 40px;
    line-height: 40px !important;
    margin-bottom: 30px;
    margin-right: 14px;
}
.font5 {
    /*color: #ffb600;*/
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    border: 1px solid;
    margin-bottom: 12px;
}
.font6 {
    color: #760001;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #ed2b2b;
    margin-bottom: 12px;
}
.font7 {
    color: #999;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #f3f3f3;
    border: 1px solid #e3e3e3;
    margin-bottom: 12px;
}
.font8 {
    color: #393939;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    border: 1px solid #393939;
    margin-bottom: 12px;
}
.font9 {
    color: #9eca45;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 95px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    border: 5px solid #9eca45;
    margin-bottom: 12px;
}
.font10 {
    color: #fff;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #febc1d;
    margin-bottom: 12px;
}
.font11 {
    color: #fff;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #35d3b7;
    margin-bottom: 12px;
}
.font12 {
    color: #527c00;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #a5d549;
    margin-bottom: 12px;
}
.font13 {
    color: #727272;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 95px !important;
    border-radius: 100%;
    text-align: center;
    margin-right: 12px;
    background-color: #f9f9f9;
    border: 5px solid #e3e3e3;
    margin-bottom: 12px;
}
.font14 {
    color: #393939;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 4px;
    text-align: center;
    margin-right: 12px;
    border: 1px solid #999;
    margin-bottom: 12px;
}
.font15 {
    color: #fff;
    font-size: 45px !important;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    line-height: 100px !important;
    border-radius: 4px;
    text-align: center;
    margin-right: 12px;
    background-color: #393939;
    margin-bottom: 12px;
}
.font16 {
    width: 75px;
    height: 75px;
    color: #222;
    font-size: 35px !important;
    vertical-align: middle;
    line-height: 75px !important;
    border-radius: 100%;
    text-align: center;
    background-color: #ffb600;
    margin-right: 14px;
    margin-bottom: 14px;
}
.font16.black {
    color: #fff;
    background-color: #393939;
}
.font17 {
    width: 50px;
    height: 50px;
    color: #fff !important;
    font-size: 27px !important;
    vertical-align: middle;
    line-height: 50px !important;
    /*border-radius: 100%;*/
    text-align: center;
}
.font17.orange{
    color:#222!important;
    border-radius: 2px;
    border : 1px solid;
}
.font17.orange:hover{
    color:#fff !important;
}
.font17.white{
    background-color: transparent;
    color:#666;
    border : 1px solid #ccc;
}
.font18 {
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 16px !important;
    vertical-align: middle;
    line-height: 30px !important;
    border-radius: 100%;
    text-align: center;
    background-color: #393939;
    margin-right: 7px;
    margin-bottom: 7px;
}
.font18.white{
    background-color: transparent;
    color:#666;
    border : 1px solid #ccc;
}


/* =====================
    8. Image Frames
======================= */
.img-frame1 {
    float: left;
    width: 100%;
    border: 8px solid #d3d3d3;
}
.img-frame2 {
    margin-bottom: 10px;
    float: left;
    width: 100%;
    border: 8px solid #fff;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.20);
}

.img-frame3 {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #393939;
    border: 8px solid #393939;
}
.img-frame3 img {
    float: left;
    width: 100%;
}
.img-frame3 strong {
    float: left;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    width: 100%;
    padding: 14px 0px 12px 0px;
    text-align: center;
}
.img-frame4 {
    float: left;
    width: 100%;
    box-shadow: 0 10px 6px -6px #454545;
}
.img-frame5 {
    float: left;
    width: 100%;
    position: relative;
}
.img-frame5 img {
    float: left;
    width: 100%;
}
.img-frame5:before, .img-frame5:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    box-shadow: 0 12px 10px #454545;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.img-frame5:after {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.img-frame6 {
    float: left;
    width: 100%;
    position: relative;
}
.img-frame6 img {
    float: left;
    width: 100%;
    border: 10px solid #f3f3f3;
}
.img-frame6:before, .img-frame6:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    box-shadow: 0 16px 10px #454545;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.img-frame6:after {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}
/* ==============================
    9.2 Custom Tooltips
================================= */
.tooltips1{
    width: 90%;
    padding: 0;
    margin: 0px;
}
.tooltips1 li{
    float: left;
}
.tooltips1 li a, .tooltips1 li a img{
    display: block;
    outline: none;
    position: relative;
    /*    background-color: #f3f3f3;*/
    text-align: center;
    vertical-align: middle;
    border-radius: 100%;
}
.tooltips1 li a span{
    width: 300px;
    height: auto;
    line-height: 21px;
    padding: 10px;
    left: 50%;
    margin-left: -150px;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 4px solid #fff;
    background: #f9f9f9;
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.tooltips1 li a span.blue{
    background: #21c2f8 !important;
    color: #fff !important;
}
.tooltips1 li a span:before,
.tooltips1 li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
.tooltips1 li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}
.tooltips1 li a:hover span{
    opacity: 0.9;
    bottom: 135px;
}
.tooltips1 span i {
    padding: 5px 0;
    font-size: 13px;
    font-weight: 700;
    font-style:normal;
}

/*Style 02*/
.tooltips2 {
    width: 90%;
    padding: 0;
}
.tooltips2 li{
    float: left;
}
.tooltips2 li a span{
    width: 200px;
    height: auto;
    line-height: 21px;
    padding: 10px;
    left: 50%;
    margin-left: -50%;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-align: center;
    border: 4px solid #fff;
    background: #fff;
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 80px;
    opacity: 0;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    white-space: normal;
    z-index: 99;
}
.tooltips2 li a span:before,
.tooltips2 li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
.tooltips2 li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}
.tooltips2 li a:hover span{
    opacity: 1;
    bottom: 50px;
}

.tooltips2.orange li a span{
    color: #fff;
    border: 4px solid;
    /*background: #ffb600;*/
    box-shadow: none;
}
.tooltips2.orange  li a span:after{
    border-top: 10px solid #ffb600;
}
.tooltips2.sky li a span{
    color: #fff;
    border: 4px solid #21C2F8;
    background: #21C2F8;
    box-shadow: none;
}
.tooltips2.sky  li a span:after{
    border-top: 10px solid #21C2F8;
}

.tooltips2.gray li a span{
    color: #222;
    background: #f3f3f3;
    border: 4px solid #f3f3f3;
    box-shadow: none;
}
.tooltips2.gray li a span:after{
    border-top: 10px solid #f3f3f3;
}

.tooltips2.border li a span{
    background: #fff;
    border: 4px solid #f3f3f3;
    box-shadow: none;
}
.tooltips2.border li a span:after{
    border-top: 10px solid #f3f3f3;
}


/* =================================
    10.1 Pricing Box
================================ */

.pricing-box {
    border:1px solid #EFEFEF;
    text-align:center;
    padding:20px;
    margin:40px 0;
    -webkit-transition: background-color .4s linear, color .4s linear;
    transition: background-color .4s linear, color .4s linear;
}
div.price {
    width:120px !important;
    border-radius: 100%;
    height:120px !important;
    line-height:120px;
    font-size:24px;
    color:#666;
    margin:0 auto !important;
    text-align:center;
    font-weight:400;
    background-color: #ffb600;
}
.pricing-box h4 {
    font-size:20px;

}
.pricing-box:hover div.price,
.pricing-box:hover .btn-s1{
    background-color:#343434;
    border-color:#545454;
    color: #fff;
}
.pricing-box:hover h4,
.pricing-box:hover {
    color:#999;
}
.pricing-box hr {margin:20px -20px; border-style:dotted; border-color:#f4f4f4;}
.pricing {list-style:none; padding:0; margin:0 !important}
/*.pricing li {
    font-size: 13px;
    line-height: 31px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}*/


/*pricing box style 02*/
.pricing-box2 {
    min-width: 100%;
    border:1px solid #EFEFEF;
    text-align:center;
    -webkit-transition: background-color .4s linear, color .4s linear;
    transition: background-color .4s linear, color .4s linear;
}
.pricing-box2 h4 {
    font-size:30px;
    padding: 5px ;
    margin-top: 0;
    color: #fff;
    background-color: #ffb600;
}

.pricing-box2:hover .btn-s1{
    background-color:#343434;
    border-color:#545454;
    color: #fff;
}
.pricing-box2:hover h4,
.pricing-box2:hover {
    color:#222;
}
.pricing-box2 hr {
    margin:5px 20px;
    border-style:dotted;
    border-color:#f4f4f4;
    width: 90%;
}


.pricing-box2:hover {
    -webkit-transform: scale(1.04) translateY(-5px);
    -ms-transform: scale(1.04) translateY(-5px);
    transform: scale(1.04) translateY(-5px);
    z-index: 1;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    box-shadow: 0px 0px 2px 0px rgba(224,157,22,1);
}
.pricing-box2:hover .price {
    background:-webkit-linear-gradient(#e7a61a, #bf840d);
    background:linear-gradient(#e7a61a, #bf840d);
    box-shadow: inset 0 0 45px 1px #999;
    color: #fff;
}


/*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 !important;
    text-align:center;
    font-weight:400;
    /*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 #1c1919;
    border-right: 15px solid #1c1919;

}

.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 !important}
.pricing li {
    font-size: 14px;
    line-height: 40px;
    margin: 0 auto;
    padding: 0;
    text-align: center;

    border-bottom: 1px dotted #f3f3f3;
}

/*pricing box style 04*/
.pricing-box4 {
    min-width: 100%;
    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.price4 {
    line-height:120px;
    font-size:24px;
    color:#666;
    margin:0 auto !important;
    text-align:center;
    font-weight:400;
    background-color: #f4f4f4;
}
.pricing-box4 h4 {
    font-size:30px;
    padding: 10px ;
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
    background-color: #21c2f8;
}
.pricing-box4:hover .btn-s1{
    background-color:#545454;
    border-color:#545454;
    color: #fff;
}
.pricing-box4:hover h4{
    color:#fff;
}
.pricing-box4 hr {
    margin:5px 20px;
    border-style:dotted;
    border-color:#f4f4f4;
    width: 90%;
}
.pricing-box4:hover {
    -webkit-transform: scale(1.04) translateY(-5px);
    -ms-transform: scale(1.04) translateY(-5px);
    transform: scale(1.04) translateY(-5px);
    z-index: 1;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;

}
.pricing-box4:hover .price4 {
    background:-webkit-linear-gradient(#f4f4f4, #f1f1f1);
    background:linear-gradient(#f4f4f4, #f1f1f1);
    box-shadow: inset 0 0 45px 1px #ddd;
    color: #222;
}

/* ===========================
    11. 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;
    }
}



/* ===========================
    11. owl carusel v1.3.3
=========================== */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

/*control*/
.owl-theme .owl-controls{
    margin-top: 10px;
    text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
    color: #141414;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 16px;
    border-radius: 0px;
    background: #fff;
    border: 1px solid #ffb600;
    -webkit-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    transform: skewX(-15deg);

}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
    /*        background-color: #ffb600;*/
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
    display: block;
    width: 15px;
    height: 10px;
    margin: 5px 3px;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
    /*    background: #ffb600;*/
    border-radius: 1px 1px 1px 1px;
    -moz-border-radius: 1px 1px 1px 1px;
    -webkit-border-radius: 1px 1px 1px 1px;
    -webkit-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
    min-height: 150px;
    background: url(AjaxLoader.html) no-repeat center center
}



.wrapper-with-margin{
    margin:0px 50px;
}


.owl-theme .owl-controls .owl-buttons div {
    position: absolute;
    z-index: 99;
}

.owl-theme .owl-controls .owl-buttons .owl-prev{
    right: 50px;
    top: -50px;
}

.owl-theme .owl-controls .owl-buttons .owl-next{
    right: 10px;
    top: -50px;
}

/* ===============================
    amimate css
 ===============================  */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes jello {
    11.1% {
        -webkit-transform: none;
        transform: none
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes jello {
    11.1% {
        -webkit-transform: none;
        transform: none
    }

    22.2% {

        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}



.jello{
    -webkit-animation-name:jello;
    animation-name:jello;
    -webkit-transform-origin: center;

    -ms-transform-origin: center;

    transform-origin: center
}

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    100% {
        opacity: 0;
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    100% {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

/* ============================================
            Magnific Popup CSS
=============================================== */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
    filter: alpha(opacity=80); }

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box; }

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

.mfp-align-top .mfp-container:before {
    display: none; }

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto; }

.mfp-ajax-cur {
    cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -webkit-zoom-out;
    cursor: zoom-out; }

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
    cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }

.mfp-loading.mfp-figure {
    display: none; }

.mfp-hide {
    display: none !important; }

.mfp-preloader {
    color: #cccccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044; }
.mfp-preloader a {
    color: #cccccc; }
.mfp-preloader a:hover {
    color: white; }

.mfp-s-ready .mfp-preloader {
    display: none; }

.mfp-s-error .mfp-content {
    display: none; }

button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none; }
button::-moz-focus-inner {
    padding: 0;
    border: 0; }

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    filter: alpha(opacity=65);
    padding: 0 0 18px 10px;
    color: white;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
.mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
    color: #333333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: white;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%; }

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #cccccc;
    font-size: 12px;
    line-height: 18px; }

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    filter: alpha(opacity=65);
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
    margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
    left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f; }

.mfp-arrow-right {
    right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
.mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: black; }

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
    line-height: 0; }
.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444444; }
.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px; }
.mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto; }

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px; }

.mfp-image-holder .mfp-content {
    max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
         * Remove all paddings around the image on small screen
         */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0; }
    .mfp-img-mobile img.mfp-img {
        padding: 0; }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px; }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0; }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px; }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0; } }

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75); }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        -ms-transform-origin: 0;
        transform-origin: 0; }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        -ms-transform-origin: 100%;
        transform-origin: 100%; }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px; } }

.mfp-ie7 .mfp-img {
    padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
    padding: 0; }
.mfp-ie7 .mfp-content {
    padding-top: 44px; }
.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0; }



/* ====================================================================== *
      [1] MEDIA BOX CONTENT  v2.6
 * ====================================================================== */

.media-box{
    font-size: 13px;
}

.media-box-container{
    /*	-webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                border-radius: 3px;

        -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
           -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
             -o-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
            -ms-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
                box-shadow: 0 1px 3px rgba(34,25,25,0.4);*/
}


.media-box-content{
    padding: 20px;
    position: relative;
    background: white;
    color: rgb(51, 51, 51);
    line-height: 17px;
}

.media-box-image-caption{
    position: absolute;
    z-index: 3;
    bottom: 0;
    padding: 20px;
    font-size: 21px;
    color: white;
    width: 100%;
}

.media-box-title{
    letter-spacing: 0px;
    line-height: 1.1;
    font-weight: 600;
    color: #333333;
    font-size: 17px;
}


.media-box-title h4{
    letter-spacing: 0px;
    font-weight: 300;
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
}
.media-box-view p{
    padding-top: 8px;
}
.media-box-view p a{
    font-weight: 500;
    color: #fff !important;
    text-transform: uppercase;
}
.media-box-view p a:hover{
    color: #ffb600 !important;
}
.media-box-title hr {
    margin: 0 auto;
    width: 30px;
    height: 1px;
    background-color: #ffb600;
}

.media-box-title small{
    font-size: 12px;
    display: block;
    font-weight: 300;
    margin-top: 5px;
}

.media-box-year{
    color: gray;
    font-size: 11px;
    margin-bottom: 3px;
}

.media-box-author{
    font-size: 11px;
    margin: 3px 0 0px 0 !important;
}

.media-box-date{
    font-size: 11px;
    line-height: 15px;
    color: #e54e53;
    margin-top: 5px;
}

.media-box-big-icon{
    margin-bottom: 12px;
}

.media-box-big-icon .fa{
    font-size: 55px !important;
    color: white !important;

    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
}

.media-box-text{
    font-size: 13px;
    margin: 13px 0px 13px 0 !important;
    color: #333333;
}

.media-box-view-image{
    margin: 5px 0 0 0;
}

.media-box-more a, .media-box-view-image a{
    text-decoration: none !important;
    color: #999;
    padding: 0;
    margin: 0;
    font-weight: 600;
    font-size: 11px;
}

.media-box-more .fa, .media-box-view-image .fa{
    font-size: 12px;
}
/* ====================================================================== *
      [2] LOAD MORE
 * ====================================================================== */

.media-boxes-load-more-button{
    cursor: pointer;
    width: 150px;
    text-align: center;
    color: white;
    background-color: #333333;
    font-size: 14px !important;
    height: 15px;
    padding: 10px 15px 10px 15px;
    margin: 0px auto;
    line-height: 15px;
    -o-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -ms-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    box-sizing: content-box !important;
}

.media-boxes-no-more-entries{
    filter: alpha(opacity=20);
    opacity: 0.2;
}


/* ====================================================================== *
      [3] FILTER BAR
 * ====================================================================== */

.filters-container{
    margin-bottom: 15px;
}

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

.media-boxes-filter{
    font-size: 0px;
    list-style: none;
    margin: 0;
    padding: 0px;
    text-align: left;
}

.media-boxes-filter>li{
    display: inline-block;
    line-height: 16px;
    margin: 0 8px 0 0; /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.media-boxes-filter>li:last-child{
    background: none;
}

.media-boxes-filter>li a{
    display: block;
    cursor: pointer;
    color: #141414;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin: 0 0px 0px 0;
    padding: 11px 14px;
    background-color: white;
    border-radius: 1px;
    border:1px solid #f3f3f3;
    -webkit-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
    -o-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -ms-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    box-shadow: 0 1px 1px rgba(34,25,25,0.2);
}

.media-boxes-filter>li a:hover{
    text-decoration: none;
    color: #666;
}

.media-boxes-filter>li a.selected{
    color: #fff;
    border:1px solid #ffb600;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important;
}

/* ====================================================================== *
      [4] SEARCH FILTER
 * ====================================================================== */

.media-boxes-search{
    padding: 10px 14px;
    font-size: 12px;
    margin: 0;
    font-weight: 400;

    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);

    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    box-sizing: border-box;
}

.media-boxes-search:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

/* ====================================================================== *
      [5] DROP DOWN MENU
 * ====================================================================== */

.media-boxes-drop-down{
    width: 140px;
    margin: 0;
    position: relative;
    -o-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -ms-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    box-shadow: 0 1px 1px rgba(34,25,25,0.2);
}

.media-boxes-drop-down-header .fa{
    float: right;
}

.media-boxes-drop-down-menu {
    margin: 0;
    padding: 0;
    z-index: 99999;
    position: absolute;
    width: 100%;
    display: none;
    -o-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -ms-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    box-shadow: 0 1px 1px rgba(34,25,25,0.2);
}

.media-boxes-drop-down-menu > li {
    list-style: none;
}

.media-boxes-drop-down-menu > li:first-child > a{
    border-top: 1px solid #E9E9E9;
}

.media-boxes-drop-down-menu > li > a, .media-boxes-drop-down-header > a {
    font-size: 12px;
    font-weight: 400;

    display: block;
    padding: 10px 14px;

    text-decoration: none;
    background-color: white;
    color: #676767;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.media-boxes-drop-down-menu > li > a{
    color: #999999;
}

.media-boxes-drop-down-menu > li > a:hover, .media-boxes-drop-down-menu > li > a:focus {
    color: #000;
}

.media-boxes-drop-down-menu > li.selected > a,
.media-boxes-drop-down-menu > li > a.selected{
    color: #e54e53;
}

.media-boxes-drop-down-header > a {
    background-color: white;
}

/* ====================================================================== *
      [6] THUMBNAIL OVERLAY EFFECT
 * ====================================================================== */

.thumbnail-overlay{
    background: black; /* fallback for IE8 */
    background-color: rgba(0,0,0, .7);
    color: #333333;
}

/* The style for centering the caption (vertically and horizontally) */
.thumbnail-overlay>div.aligment{
    height: 100%;
    width: 100%;
    display: table !important;
}

.thumbnail-overlay>div.aligment>div.aligment{
    padding: 10px;
    display: table-cell !important;
    vertical-align: middle; /* FOR VERTICAL ALIGN */
    text-align:center; /* FOR HORIZONTAL ALIGN */
}

.overlay-title{
    font-weight: 500;
    font-size: 16px;
    display: block;
    line-height: 16px;
    margin-bottom: 5px;
}

.overlay-description{
    font-weight: 400;
    font-size: 12px;
    display: block;
    line-height: 16px;
}

.thumbnail-overlay i.fa{
    font-size: 13px;
    text-align: center;
    display: inline-block;
    margin: 2px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 1px;
    /*padding: 17px 17px 15px 17px;*/ /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */ /* Safari 3-4, iOS 1-3.2, Android 1.6- */ /* Firefox 1-3.6 */
    /* border-radius: 50%;  Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    -webkit-transition: -webkit-transform .2s, background .1s;
    transition:         transform .2s, background .1s;
}

.thumbnail-overlay i.fa:hover{
    /*      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);*/

    cursor: pointer;

}


.mb-play-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('icons/blank.gif'); /* IE hack, since IE doesn't recognize the hover state in places where there's nothing */
}

.mb-play-container .fa{
    border: 2px solid #fff;
    padding: 14px 15px 13px 17px;
    font-size: 19px;
    text-align: center;
    width: 50px;
    height: 50px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ /* Firefox 1-3.6 */
    border-radius: 50%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;

    -webkit-transition: background-color .2s, -webkit-transform .2s;
    transition: background-color .2s,         transform .2s;
}

.mb-play-container:hover .fa{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}


/* ====================================================================== *
      [7] MAGNIFIC POPUP
 * ====================================================================== */

.mb-open-popup{
    cursor: pointer;
}

.mfp-arrow.mfp-arrow:before,
.mfp-arrow.mfp-arrow:after { border:none !important; }

.mfp-arrow.mfp-arrow-left {
    background:url('icons/icon-arrow-left.png') 50% 50% no-repeat !important;
}

.mfp-arrow.mfp-arrow-right {
    background:url('icons/icon-arrow-right.png') 50% 50% no-repeat !important;
}

/*.mfp-close{
    background:url('icons/icon-close.png') right no-repeat !important;
}*/

/* Just some example in how to add a loder image (gif) to the popup
.mfp-preloader {
 width: 24px;
 height: 24px;
 margin: auto;
 color: transparent;
 background-image: url('icons/loading-image.gif');
}
*/


/* ====================================================================== *
      [8] SOCIAL FOR MAGNIFIC POPUP
 * ====================================================================== */

.media-boxes-social-container{
    float: right;
    margin-right: 10px;
    font-size: 18px;
}

.media-boxes-social-container>*{
    margin-right: 5px;
}












/*
 *
 *
 *
 *
 *  BRIDGE (Unless you know what you are doing don't scroll down) ========>
 *
 *
 *
 *
 */











/* ********************************************************************
  (2) NEEDED STYLE (Don't play here)
********************************************************************* */


/* ====================================================================== *
      [1] SETUP
 * ====================================================================== */

.media-box {
    /* Box-model */
    display: none; /* hidden by default, the plugin will take care of showing it */
    float: left;
    /*width: 20%;*/
}

.media-box-hidden, .not-loaded-before-search{
    display: none; /* hide the hidden boxes */
}

.media-boxes-container{
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.media-box-loaded{
    display: block; /* class to show the boxes once the plugin has been initialized */
}

/* ====================================================================== *
   [2] MEDIA BOX THUMBNAIL
* ====================================================================== */

.media-box-image{
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Hack to center the image */
.media-box-image div[data-width][data-height]{
    position: relative;
    overflow: hidden;
}
.media-box-image div[data-width][data-height] img{
    position: absolute;
    top:-100%; left:0; right: 0; bottom:-100%;
    margin: auto;
}
/* End Hack */

.media-box .media-box-image img{
    width: 100%;
    max-width: 100%;
    display: block;
}

.media-box img{
    max-width: 100%;
}

/* Loading and broken thumbnail effects */

.media-box-image div[data-thumbnail], .media-box-image div[data-popup]{
    background-position: center center;
    background-repeat: no-repeat;
}

.image-with-dimensions{
    background-color: black;
    background-image: url('icons/loading-image.gif');
}

.broken-image-here{
    background-color: #BE3730;
    background-image: url('icons/broken-image.png');
}

.broken-image-here:not([data-height]){
    min-height: 150px;
}
/* ====================================================================== *
    [3] MEDIA BOX CONTENT
 * ====================================================================== */

.media-box-container{
    overflow: hidden;
    position:relative;
    z-index:1;
}

.media-box-container:hover{
    z-index: 2; /* bring the hover media box to the front */
}


/* ====================================================================== *
    [4] THUMBNAIL OVERLAY EFFECT
 * ====================================================================== */

.thumbnail-overlay{
    position: absolute; /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    width: 100%;
}

/* REVEAL EFFECT */
.position-reveal-effect .media-box-thumbnail-container{
    z-index: 2;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.position-reveal-effect .thumbnail-overlay{
    z-index: 1;
    position: absolute;
    left: 0;
}

.overlay-always-visible{
    display: block !important;
    zoom: 1 !important;
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}

.overlay-text-left>.aligment>.aligment{
    text-align: left !important;
}
.overlay-text-right>.aligment>.aligment{
    text-align: right !important;
}

/* ====================================================================== *
    [5] MAGNIFIC POPUP
 * ====================================================================== */

.mfp-arrow:focus {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

.mfp-arrow:hover {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

/* at start */
.my-mfp-slide-bottom .mfp-figure {
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .mfp-figure {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .mfp-figure {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
    opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
    opacity: 0;
}


/*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: #ffb600;
    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;
}