/* GENERAL STYLES
 * ========================================================================
 */

body{
    font-family: Arial,'Lato',"Microsoft YaHei", sans-serif;
    font-weight: 400;
    line-height: 1.52;
    position: relative;
}

h1, h2, h3, h4, h5, h6, a, small{
    font-family: 'Oswald',"Microsoft YaHei", serif;
}
h1{
    font-size: 80px;
    font-weight: 700;
}

@media(max-width: 767px){
    h1{font-size: 50px;}
}
h2{font-size: 60px; font-weight: 700;}
h3{font-size: 40px; font-weight: 300;}

h4{
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    letter-spacing: normal;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

h5{font-size: 18px; letter-spacing: 1.5px;}
h6{font-size: 16px;}

@media (max-width: 767px) {
    h1{font-size: 70px;}
    h2{font-size: 50px;}
    h4{font-size: 20px;}
}
@media(max-width: 480px){
    h1{font-size: 30px;}
    h2{font-size: 24px;}
}

a{
    color:#666;
    font-size: 16px;
    text-transform: uppercase;
    text-transform: none;
    font-weight: 400 !important;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
a:hover{
    text-decoration: none;
    color: #000;
    letter-spacing: 1.5px;
    letter-spacing: inherit;
    color: #F7B300;
}

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

p{letter-spacing: 0.5px; font-size: 16px; color: #666; font-weight: 300;line-height:30px;}
.lead{margin-top: 30px; margin-bottom: 30px;}
.main-section-margins{margin-top: 100px; margin-bottom: 70px;}
.main-section-margin-bottom{margin-bottom: 70px;}
.main-section-margin-top{margin-top: 100px;}
.main-section-padding{padding-top: 100px; padding-bottom: 100px;}

/* buttons */
.btn{
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    display: inline-block;
    background: #000;
    padding: 8px 12px;
    color: #fff;
    margin-top: 20px;
}
.icon-btn{
    position: relative;
    text-align: center;
    padding: 7px 40px;
    display: inline-block;
    background: transparent;
    border: 1px solid #666;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    color: rgba(255,255,255, 0.6);
}
.icon-btn:after {
    content: '';
    position: absolute;
    z-index: -1;
}

.icon-expand:hover:before,.icon-link:hover:before{}
.icon-expand:before {content: "展开";}
.icon-link:before {content: "查看";}
.icon-link-2:before {content: "full article";}
.icon-width{padding: 7px 45px;}
.home-btn {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.home-btn:before {
    position: absolute;
    padding: 7px 10px;
    color: #F7B300;
    left: -100%;
    top: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.home-btn:hover:before {left: 0;}
.home-btn i{
    -webkit-transition: all 0.2s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.2s;
    -moz-backface-visibility: hidden;
    -ms-transition: all 0.2s;
    -ms-backface-visibility: hidden;
    transition: all 0.2s;
    backface-visibility: hidden;
}
.home-btn:hover i{
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
    letter-spacing: 0;
    opacity: 0;
}

.transition{
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/* firefox fix */
.img-responsive{
    width: 100%;
}

#loader{
    background: #fff url('../images/loader.gif') no-repeat center;
    padding-top: 50%;
    padding-left: 50%;
    position: fixed;
    z-index: 2000;
    width: 100%;
    height: 100%;
}

/* some predefined classes for the background and text color */
.white-bg{background: #fff;}
.light-bg{background: #f7f7f7;}
.dark-bg{background: #000;}
.thin{font-weight: 300;}
.thick{font-weight: 900;}
.white{color: #fff;}
.white-transparent{color: rgba(255,255,255,0.3);}
.black{color: #000;}
.light{color: #f7f7f7;}
.color{color: #F7B300;}

/* mostly sections have intro titles */
.section-intro h3{letter-spacing: 2px; display: inline-block; margin-right: 20px; font-weight: 400; padding: 20px 20px 20px 0; color: #F7B300;} .section-intro h3 small{display: block; color: #ccc; margin-top: 10px; font-weight: 300; font-size: 16px; font-family: "Lato","Microsoft YaHei";}
.section-intro h5{display: inline; color: #ccc; letter-spacing: 1.5px; font-family: "Lato","Microsoft YaHei";}
.section-intro a h5:hover{color: #333;}

/* one-page next section links */

.section-intro h5.second{margin-left: -55px;}
.section-intro h5.second,
.section-intro a:hover h5.first{opacity: 0;} .section-intro h5.first:hover + h5.second, .section-intro a:hover h5.second{opacity: 1;}

@media(max-width: 480px){
    .section-intro h3{font-size: 24px;}
    .section-intro h5{font-size: 14px;}
}

/* =================================
 *
        LOGO
 */

#logo-wrapper{z-index: 1000; top: 0; display: block;}
#logo-wrapper .logo-name{
    background: #f7f7f7;
    font-family: "Oswald","Microsoft YaHei";
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    letter-spacing: normal;
    padding: 8px 20px 4px 30px;
    margin: 0 auto;
    width: 300px;
    z-index: 1001;
    font-size: 50px;
    text-transform: uppercase;
    opacity: 0.95;
    letter-spacing: 1.5px;
}
#logo-wrapper .logo-name:hover{opacity: 1;}
@media(max-width: 991px){
    #logo-wrapper .logo-name{width: 250px;}
}

/* =================================
 *
        MENU (General)
 */

/* custom menu bar codes */

.navbar-header{
    float: none;
    text-align: center;
}

/* fixed navbar - classic menu */

.visible-navbar{
    background: rgba(0,0,0,0.7);
    height: 92px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}
.visible-navbar:hover{background: rgba(0,0,0,0.9);}
.logo-left .navbar-header{float: left;}
.navbar-nav{opacity: 0;}
.visible-menu-items{opacity: 1;}

/* bootstrap menu */
.navbar-nav li a{
    color: rgba(255,255,255,0.7);
    letter-spacing: 1.5px;
    font-weight: 300;
    font-family: Lato,"Microsoft YaHei";
}
.navbar-nav > li > a{
    height: 92px;
    padding-top: 33px;
}

.navbar-nav li a:hover,
.dropdown .dropdown-menu li a:hover,
.navbar-nav li a:focus{
    background: #000;
    color: rgba(255,255,255,1);
}

/* dropdown menu */
.dropdown .dropdown-menu{
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.9);
    padding: 0;
}

.dropdown .dropdown-menu li a{
    padding: 15px 20px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
    text-align: right;
}

@media(max-width: 767px){
    .dropdown .dropdown-menu li a{
        text-align: left;
    }
}

.dropdown .dropdown-menu li a:hover{
    color: #F7B300;
}

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
    background: #000;
    letter-spacing: 1.5px;
    color: #fff;
}

.navbar-toggle{
    background: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    margin-top: -10px;
    margin-right: 0;
    padding-right: 0;
    border: none;
}

@media (min-width: 768px){
    .dropdown:hover > .dropdown-menu{
        display: block;
    }
}

@media(max-width: 767px){
    .navbar-toggle{
        display: inline-block;
        float: left;
        position: absolute;
        top: 1px;
        margin-left: 115px;
    }
    .navbar-nav{
        margin-top: -1px;
        padding-top: 0;
        width: 200px;
        margin-left: 60px;
    }
    .navbar-nav > li{
        background: rgba(0,0,0,0.8);
    }
    .navbar-nav > li > a{
        height: 50px;
        padding-bottom: 10px;
        padding-top: 15px;
    }

    .dropdown .dropdown-menu li{
        height: 50px;
    }
    .dropdown .dropdown-menu li a{
        padding: 20px;
        height: 50px;
    }

    .navbar-nav .open .dropdown-menu>li>a,
    .navbar-nav .open .dropdown-menu .dropdown-header{
        padding: 15px 15px 15px 25px
    }

}
@media(max-width: 500px){
    .navbar-nav{
        margin-top: 90px;
        margin-left: 0;
    }
}

/* end of classic menu */

/* modern menu - the black transparent overlay after menu button is clicked */

.menuOverlay {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.5s;
}

.menuOverlay.menuOverlay-open {
    position: fixed;
    opacity: 0.7;
    z-index: 1;
}

.menu-icon{
    z-index: 1003;
    font-weight: 300;
    font-size: 18px;
    margin: 0 auto;
    display: inline-block;
    color: rgba(255,255,255, 0.5);
    opacity: 0.9;
    top: 0;
    background: rgba(0,0,0, 1);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

.menu-icon:hover{background: #F7B300;}
.menu-icon-bottom{padding: 7px 25px 8px 25px;}
.menu-icon-bottom:hover{padding: 14px 17px;cursor: pointer;color: #fff;}
.menu-icon-left{padding: 32px 25px 33px 25px; float: left;}
#menu-icon-left{display: none;}

@media(min-width: 768px){
    #menu-icon-left{
        display: block;
    }
    .navbar-toggle{
        display: none;
    }
}

@media(max-width: 991px){
    #fixed-bar .container{
        width: auto;
        margin-right: 0;
        margin-left: 0;
        padding-left: 0;
    }
}

.menu-icon:hover i{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* MENU ITEMS */
.menu-item-links{
    width: 100%;
    list-style: none;
    margin-top: 10%;
    padding-left: 0;
    text-align: center;
    padding-top: 0;
    min-height: 100px;
}

.menu-item-links li{
    display: inline-block;
    padding-top: 0;
    vertical-align: top;
    position: relative;
}

.menu-item-links > li.dropdown:after{
    font-family: "FontAwesome";
    content: "\f107";
    display: block;
    text-align: center;
}

.menu-item-links li a{
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    line-height: 28px;
    letter-spacing: 1.5px;
}

.menu-item-links li a:hover,
.menu-item-links li a:focus,
.menu-item-links li:hover:before,
.menu-item-links li:hover:focus,
.menu-item-links li.selected,
.menu-item-links li.selected a,
.menu-item-links li.selected:hover{
    color: #666;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

@media(min-width: 681px) and (max-width: 991px){
    .menu-item-links{
        margin-top: 10%;
    }
}
@media(max-width: 680px){
    .menu-item-links{
        margin-bottom: 20px;
        margin-top: 8%;
        padding-left: 10px;
        text-indent: 5%;
        text-align: left;
        display: block;
    }
    .menu-item-links li{
        display: block;
        margin-bottom: 10px;
    }

    .menu-item-links li.dropdown:after{
        content: " ";
        display: inline-block;
    }
}


/* SUBMENU ITEMS */

.submenu-items{
    opacity: 0;
    position: fixed;
    padding-left: 0;
    margin-top: 10px;
    text-align: left;
    text-indent: 22px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

.submenu-items li.selected,
.submenu-items li.selected a,
.submenu-items li.selected:hover,
.submenu-items li.selected:focus,
.submenu-items li.selected:before{
    content: "\f105";
    color: #000;
    font-weight: 400;
}

@media (min-width: 681px){
    .menu-item-links li a:hover + .submenu-items,
    .submenu-items:hover{
        margin-top: 30px;
    }
}

.submenu-items li{
    display: block;
    margin-bottom: 0;
}

.submenu-items > li:before{
    font-family: "FontAwesome";
    content: "\f105";
    display: inline;
    text-align: center;
    font-size: 10px;
    /*position: absolute;*/
}

.submenu-items li a{
    font-size: 13px;
    font-weight: 300;
    color: #666;
}

.submenu-items li a:hover{
    color: #F7B300;
}

.menu-item-links li:hover > .submenu-items{
    opacity: 1;
}

@media(max-width: 680px){
    .submenu-items{
        position: static;
        opacity: 1;
        text-align: left;
        text-indent: 18%;
        margin-top: 10px;
    }
}

/* Orientation-dependent styles for the content of the menu */

/* General styles for all menus */
.cbp-spmenu {
    position: fixed;
    background: rgba(255,255,255, 0.95);
    border-top: 42px solid #000;
    border-bottom: 42px solid #000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cbp-spmenu span i{
    font-style: normal;
}

.cbp-spmenu span:hover i{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* scroll bar for the menu overlay if the content doesn't
 * fit height of the screen on small devices
 */

.cbp-spmenu-open{
    overflow-y: scroll;
}

.cbp-spmenu-vertical {
    width: 100%;
    height: 500px;
    z-index: 1000;
}

.menu-full-height{
    height: 700px;
}


/* Vertical menu that slides from top to bottom */

.cbp-spmenu-top {
    top: -200%;
    opacity: 0;
}

.cbp-spmenu-top.cbp-spmenu-open {
    top: 92px;
    opacity: 1;
}

/* menu search form */

#search-form{
    clear: both;
    margin-top: 10%;
    margin-bottom: 0;
}

#search-form input{
    border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-color: #000;
    font-weight: 300;
    height: 45px;
    display: inline;
    color: #333;
}

#search-form input:focus,
#search-form input:hover{
    border-color: #000;
    box-shadow: none;
    -webkit-box-shadow: none;
}


#search-form:hover .input-group-addon,
#search-form input:focus + .input-group-addon{
    background: #000;
    color: #fff;
}

#search-form:hover input{
    border-color: #000;
}

.input-group-addon{
    border-radius: 0;
    -webkit-border-radius: 0;
    background: #000;
    border: none;
}
.input-group-addon:hover{
    cursor: pointer;
}

/* HEADER margin from top */
.header-margin-top{
    margin-top: 133px;
}
.carousel-header-margin-top{
    margin-top: 104px;
}

.bgslider-header-margin-top{
    margin-top: 98px;
}

.header-image img{
    position: relative;
    width: 100%;
}

/* the banner overlay and its content */
.rect-banner{
    background: transparent;
    padding: 120px 80px;
    height: 530px;
}
.rect-banner h1{
    color: #fff;
    font-size: 90px;
    letter-spacing: 1.5px;
    margin-top: 0;
    padding-top: 0;
    text-transform: uppercase;
}
.rect-banner h4{
    font-family: Lato,"Microsoft YaHei";
    font-size: 16px;
    display: inline-block;
    color: #F7B300;
}

.rect-banner h3{
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #F7B300;
    font-family: Lato,"Microsoft YaHei";
}


.rect-banner p{
    color: rgba(255,255,255,0.7);
}
.rect-banner h2{
    letter-spacing: 2.5px;
    margin-bottom: 30px;
    font-family: Lato,"Microsoft YaHei";
    font-size: 34px;
    color: #F7B300;
}
@media(max-width: 767px){
    .rect-banner h2{
        font-size: 24px;
    }
}

.rect-banner a.btn{
    letter-spacing: 1.5px;
    padding: 15px 20px;
    background: rgba(0,0,0,0.2);
    margin-top: 30px;
    margin-right: 10px;
    border: 3px solid rgba(255,255,255,0.7);
    text-transform: none;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-size: 16px;
    font-family: Lato,"Microsoft YaHei";
    color: #fff;
}

.rect-banner a.btn:hover{
    color: #fff;
    border-color: #fff;
    background: rgba(0,0,0,0.4);
    border-color: #F7B300;
}

/* index-bgslider.html */

.bgslider .rect-banner{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
}

.bgslider li{
    position: relative;
    height: 530px;
}

@media(max-width: 991px){
    .bgslider li{
        height: 400px;
    }
}

@media(max-width: 767px){
    .bgslider li{
        height: 300px;
    }
}

@media(max-width: 480px){
    .bgslider li{
        height: 220px;
    }
    .bgslider h3{
        font-size: 13px;
    }
}

.bgslider li > div,
.bgslider li > div img{
    display: block;
}

.bgslider li > div {
    background-color: black;
}

.bgslider li > div img {
    opacity: 0.7;
}

/* index-parallax.html */
#home-parallax.half-height ul{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.6)
    ), url(../images/home-parallax.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 530px;
}

#home-parallax .rect-banner{
    margin-top: 0;
}

/* one-page.html */

#home-parallax.static{
    padding: 0;
}

#home-parallax.static section{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.6)
    ), url(../images/home-parallax.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 750px;
}

#home-parallax.static .rect-banner{
    padding-top: 250px;
}

@media(max-width: 991px){

    #home-parallax.static{
        top: 0;
    }
    .rect-banner h1{
        font-size: 60px;
    }
    .rect-banner h3{
        font-size: 30px;
    }
    .rect-banner p{
        font-size: 16px;
    }
}

@media(max-width: 767px){

    .bgslider .rect-banner{
        padding: 60px;
    }
    .rect-banner h1{
        font-size: 50px;
    }

    .rect-banner h3{
        font-size: 20px;
    }
    .rect-banner a.btn{
        padding: 7px;
        margin-top: 20px;
        margin-right: 5px;
        font-size: 14px;
    }
}

@media(max-width: 600px){

    .bgslider .rect-banner{
        padding: 30px 20px;
    }

    .rect-banner a.btn{
        padding: 7px;
        margin-top: 20px;
        margin-right: 5px;
        font-size: 14px;
    }
}

@media(max-width: 480px){

    .bgslider .rect-banner{
        padding: 30px;
    }
    .rect-banner h3{
        font-size: 16px;
    }
    .rect-banner h1{
        font-size: 34px;
    }

    #home .rect-banner p{
        display: none;
    }
}


/* index-alt.html */

.circle-banner section{
    display: inline-block;
    background-size: cover;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 40px solid rgba(0,0,0,0.5);
}

.circle-banner-margins{
    margin-top: 91px;
    margin-bottom: 70px;
}

.circle-banner-layer{
    margin-top: 40%;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}
.circle-banner-layer:hover{
    margin-top: 30%;
}

.circle-banner-layer h3{
    letter-spacing: 1.5px;
    font-size: 30px;
    color: #F7B300;
    font-family: Lato,"Microsoft YaHei";
}
.circle-banner-layer h2{
    letter-spacing: 1.5px;
}

.circle-banner-layer h4{
    color: #F7B300;
    font-family: Lato,"Microsoft YaHei";
    font-size: 16px;
}
.circle-banner-layer h4:hover{
    color: rgba(255,255,255,1);
}

.circle-banner-layer i{
    font-size: 14px;
    margin-top: 30px;
    opacity: 0;
}

.circle-banner section:hover i{
    opacity: 1;
    margin-top: 70px;
    font-size: 40px;
    color: #F7B300;
}

@media(max-width: 880px){
    .circle-banner section{
        width: 550px;
        height: 550px;
    }
    .circle-banner-layer h3{
        font-size: 34px;
    }
    .circle-banner-layer h2{
        font-size: 44px;
    }

}

@media(max-width: 600px){
    .circle-banner section{
        width: 450px;
        height: 450px;
        border: 30px solid rgba(0,0,0,0.5);
    }
    .circle-banner-layer h3{
        font-size: 24px;
    }
    .circle-banner-layer h2{
        font-size: 36px;
    }
}

@media(max-width: 480px){
    .circle-banner section{
        width: 400px;
        height: 400px;
    }
}

@media(max-width: 400px){
    .circle-banner section{
        width: 350px;
        height: 350px;
        border: 20px solid rgba(0,0,0,0.5);
    }
    .circle-banner-layer h3{
        font-size: 20px;
    }
    .circle-banner-layer h2{
        font-size: 32px;
    }
}

/* fullscreen-slider.html */


/* =================================
 *
        SUPER SLIDES
 */

#slides {
    position: relative;
}

#slides .slides-container {
    display: none;
}
#slides .scrollable {
    *zoom: 1;
    position: relative;
    top: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}
#slides .scrollable:after {
    content: "";
    display: table;
    clear: both;
}

.slides-navigation {
    margin: 0 auto;
    position: absolute;
    z-index: 3;
    width: 100%;
}

.slides-navigation a{
    position: absolute;
    display: block;
    padding: 40px 13px;
    color: #fff;
    background: #000;
    border: 1px solid #000;
    opacity: 0.9;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.slides-navigation a:hover{
    background: rgba(0,0,0,0.5);
    letter-spacing: 0.2px;
}

.slides-navigation a.prev {
    left: 0;
    bottom: 92px;
}
.slides-navigation a.next {
    left: 0;
    bottom: 192px;
}

/* alternative slides */


.slides-alt .slides-pagination{
    position: absolute;
    z-index: 3;
    right: 10%;
    top: 45%;
    width: 110px;
}
.slides-alt .slides-pagination a {
    background: rgba(255,255,255,0.2);
    border-radius: 0;
    -webkit-radius: 0;
    width: 60px;
    height: 10px;
    display: -moz-inline-stack;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    margin: 5px;
    overflow: hidden;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    color: transparent;
    display: block;
}



.slides-alt .slides-pagination a.current,
.slides-alt .slides-pagination a:hover{
    background: rgba(255,255,255,0.7);
    letter-spacing: normal;
}

.slides-alt .slides-pagination a.current:hover:after{
    color: #000;
    background: transparent;
}

@media(min-width: 992px){
    .slides-alt .slides-pagination a{
        text-align: center;
    }
    .slides-alt .slides-pagination{
        bottom: 45%;
        right: 10%;
    }
}


@media(min-width: 1200px){
    .slides-alt .slides-pagination{
        right: 13%;
    }
}

@media(min-width: 1400px){
    .slides-alt .slides-pagination{
        right: 18%;
        bottom: 47%;
    }
}

@media(min-width: 1900px){
    .slides-alt .slides-pagination{
        right: 25%;
    }
}

@media(min-width: 2500px){
    .slides-alt .slides-pagination{
        right: 33%;
        bottom: 50%;
    }
}

@media(max-width: 767px){
    .slides-alt .slides-pagination a{
        display: none;
    }
}

.content-layer{
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    padding-top: 20%;
    padding-left: 10%;
    padding-right: 10%;
}

.content-layer:after{
    background: rgba(0,0,0,0.9);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.7;
    z-index: -1;
}

.content-layer h2{
    font-size: 100px;
    font-weight: 700;
    color: #fff;
    margin-top: 0;
    letter-spacing: 2px;
    text-transform: uppercase

}
.content-layer h2 span{
    display: block;
    font-weight: 300;
    font-size: 50px;
    font-family: Lato,"Microsoft YaHei";
    color: #F7B300;
}

.content-layer p{
    color: rgba(255,255,255, 0.7);
    margin-top: 20px;
}

.content-layer a.btn{
    letter-spacing: 1.5px;
    padding: 15px 20px;
    background: rgba(0,0,0,0.2);
    margin-top: 30px;
    margin-right: 10px;
    border: 3px solid rgba(255,255,255,0.7);
    text-transform: none;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-size: 16px;
    font-family: Lato,"Microsoft YaHei";
    color: #fff;
}

.content-layer a.btn:hover{
    color: #fff;
    border-color: #fff;
    background: rgba(0,0,0,0.4);
    border-color: #F7B300;
}


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

    .content-layer{
        padding-top: 30%;
    }
    .content-layer h2{
        font-size: 70px;
    }

}


@media(max-width: 767px){
    .content-layer{
        padding-top: 40%;
    }
}

@media(max-width: 480px){
    .content-layer{
        padding-top: 50%;
    }
}


.bar2{
    padding: 50px;
}
.bar2 p{
    color: rgba(255,255,255, 0.7);
    letter-spacing: 2px;
}
.bar2 span{
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255,255,255, 0.9);
}
.bar2 .white span{
    color: #F7B300;
}

#work-process{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/aboutus-cover.jpg) 50% 0 no-repeat fixed;

    background-size: cover;
}
#work-process h3{
    margin-top: 120px;
    letter-spacing: 2px;
    font-weight: 400;
}

#work-process h5{
    color: #fff;
}



/* page header backgrounds */

#home-banner section{
    background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
    ), url("../images/home-banner-cover.jpg") 50% 40% no-repeat fixed;
}

/* bg for about-alt.html */
#about-banner section{
    background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
    ), url("../images/about-banner-cover.jpg") 50% 40% no-repeat fixed;
}
/* bg for about.html */
#about article{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.7)
    ), url(../images/team-cover.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 530px;
}

/* bg for services-alt.html */
#services-banner section{
    background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
    ), url("../images/services-banner-cover.jpg") 50% 40% no-repeat fixed;
}
/* bg for services.html */
#services article{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.7)
    ), url(../images/services2-cover.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 530px;
}

/* bg for portfolio-alt.html */
#portfolio-banner section{
    background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
    ), url("../images/portfolio-banner-cover.jpg") 50% 40% no-repeat fixed;
}

/* bg for portfolio.html */
#portfolio article{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.7)
    ), url(../images/services-cover.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 530px;
}

/* bg for blog-list.html */
#blog article{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.7)
    ), url(../images/blog-cover.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 530px;
}

/* bg for contact-alt.html */
#contact-banner section{
    background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
    ), url("../images/contact-banner-cover.jpg") 50% 40% no-repeat fixed;
}

/* bg for contact.html */
#contacts article{
    background: linear-gradient(
            rgba(0,0,0, 0.3),
            rgba(0,0,0, 0.7)
    ), url(../images/services-banner-cover.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
    height: 530px;
}

/* ABOUT US */

#team img{
    margin-bottom: 30px;
}

.team-position{
    font-weight: 300;
    color: #666;
    letter-spacing: 1.5px;
    /*margin-bottom: 30px;*/
    margin-top: 0;
}

@media(max-width: 480px){
    #team article{
        width: 100%;
        background: #fff;
    }

    #team article:nth-child(even){
        background: #f7f7f7;
    }
}

/* about counters */

.counter-bg{
    background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
    ), url("../images/home-bar-bg.jpg") 50% 40% no-repeat fixed;
}

.counters{
    margin-bottom: 30px;
}
.counters h5{
    color: #fff;
    font-weight: 300;
    border: 1px rgba(255,255,255,0.5) solid;
    background: rgba(255,255,255,0.2);
    padding: 10px;
}
.counters span{
    margin-left: 30px;
    font-weight: 700;
    font-size: 50px;
    color: #fff;
}


/* counters home */

#home-bar{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/home-bar-bg.jpg) 50% 0 no-repeat fixed;

    background-size: cover;
}


.counters2{
    margin-bottom: 70px;
    margin-top: 40px;
}

.counters2 h5:hover{
    background: rgba(255,255,255, 0.5)
}
.counters2 h5{
    background: rgba(255,255,255, 0.5);
    padding: 40px;
    color: #fff;
}

#home-bar h2{
    margin-top: 120px;
}

.border-top{
    border-top: 20px solid #F7B300;
    opacity: 0.8;
}
.border-bottom{
    border-bottom: 20px solid #F7B300;
    opacity: 0.8;
}

.counters2 span{
    font-weight: 700;
    font-size: 50px;
    color: #000;
    display: block;
    margin-bottom: 20px;
}

.counters2 .inner{
    margin-bottom: 50px;
    text-align: center;
}

@media(max-width: 991px){
    .counters span{
        margin-left: 0;
        margin-top: 50px;
    }
}

@media(max-width: 991px){
    .counters2 h5{
        padding: 20px;
    }

    .counters2 span{
        font-size: 40px;
    }
}

@media(max-width: 480px){
    .counters2 span{
        font-size: 50px;
    }
    .counters2 .inner{
        width: 100%;
    }
}

/* SERVICES */
.home-services .block{
    background: #000;
    color: #fff;
    margin-left: -0.5px;
    margin-right: -0.5px;
    padding-top: 110px;
    padding-left: 30px;
}

.home-services .block-sm{
    height: 300px;
}

.home-services .block-lg{
    height: 350px
}

.home-services .block:nth-child(odd){
    border: 10px solid #fff;
}

.home-services .block h4{
    font-weight: 400;
    text-transform: uppercase;
    color: rgba(255,255,255, 0.6);
}

.home-services .block:hover{
    padding-top: 80px;

}
.home-services .block:hover h4{
    color: rgba(255,255,255, 1);
}

.home-services .block ul{
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
    list-style: none;
    padding-left: 0;
    margin-bottom: -40px;
    opacity: 0;
}

.home-services .block:hover ul{
    opacity: 0.7;
    margin-bottom: 30px;
}

.home-services .block li{
    letter-spacing: 1.5px;
    font-weight: 300;
    font-size: 12px;
}

.home-services .block a{
    color: #fff;
}

.home-services .block a:hover{
    color: #F7B300
}

@media(min-width:768px) and (max-width: 991px){
    .home-services .block{
        border: 10px solid #fff;
    }
}


#home-quote figure{
    padding: 0;
}

#home-quote .quote{
    padding: 20px 60px 40px 60px;
}

#home-quote h2{
    color: #222;
}

#home-quote p{
    color: #fff;
}

/* gallery about us */

#gallery-list{
    padding: 0;
}
#gallery-list div{
    padding: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#gallery-list div:hover{
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
    transform:scale(1.25);
    z-index: 100;
}

#gallery-list:hover img{
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}

#gallery-list div:hover img{
    -webkit-filter: grayscale(0);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

}


/* team social icons */

.team-social-icons{
    padding: 20px 0 10px 0;
}

article.team-social-icons{
    padding: 0 0 10px 0;
}
.team-social-icons a{
    display: inline-block;
    margin-left: 0;
}
.team-social-icons i{
    border-bottom: 3px #eee solid;
    padding: 15px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    color: #333;
}

.team-social-icons i:hover{
    border-bottom: 3px #F7B300 solid;
    color: #000;
}

@media(max-width: 680px){
    .team-social-icons{
        margin-bottom: 20%;
    }
}

.icons-on-hover{
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    margin-top: -50px;
}

.box-sm article:hover img{
    /*-webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/ /* Firefox 3.5+ */
}

.box-sm .team-member img{
    margin-bottom: 10px;
    margin-top: 7px;

}
.box-sm .team-member h5{
    color: #F7B300;
}
.box-sm .team-member:hover .icons-on-hover{
    opacity: 1;
    margin-top: -70px;
}

.box-sm .team-member:hover h5,
.box-sm .team-member:hover div.title{
    opacity: 0;
}


/* progress bar */
#skills{
    margin-bottom: 40px;
}

.custom-progress{
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    height: 30px;
    margin-bottom: 30px;
    margin-top: 5px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    background: #fff;
}

.custom-progress-alt{
    margin-bottom: 20px;
}
.custom-progress .progress-bar{
    background: #fff;
    border-bottom: 10px solid #f7f7f7;
    font-size: 14px;
    text-align: left;
    padding-left: 20px;
    padding-top: 4px;
    color: #000;
}

.custom-progress .progress-bar-alt{
    border-bottom: none;
}

.custom-progress span{
    color: #F7B300;
    letter-spacing: 1.5px;
    float: right;
    padding-right: 20px;
}

.custom-progress div{
    letter-spacing: 1.5px;
}

.custom-progress div span.counter:after{
    content: "%";
}

.custom-progress div.progress-bar-alt span.counter:after{
    content: "/100";
}

@media (max-width: 767px){
    .progress-bars{
        width: 100%;
    }
}

@media (min-width: 480px) and (max-width: 767px){
    .progress-bars{
        padding-right: 10%;
        padding-left: 10%;
    }
}


/* call to action */

.bar{
    clear: both;
    text-align: center;
    padding: 0;
    background-size: cover;
    min-height: 360px;
}

.margin-top{
    margin-top: 70px;
}

.bar div{
    letter-spacing: 1.5px;
    font-weight: 400;
    padding: 60px 80px;
}

@media(max-width: 480px){
    .bar div{
        padding: 40px;
    }
}

.bar h2{
    font-size: 50px;
    text-transform: uppercase;
    color: #F7B300;
    padding-top: 20px;
    text-align: center
}

.one-col-bar h2{
    font-weight: 300;
}
.bar h3{
    padding-top: 30px;
}


.bar .btn{
    background: transparent;
    border: 5px rgba(255,255,255,0.5) solid;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1.5px;
    padding: 10px 30px;
    font-weight: 700;
    font-size: 24px;
    margin-top: 30px;
}

.bar .btn:hover{
    border: 5px #F7B300 solid;
    color: #fff;
}

@media(max-width: 480px){
    .bar h2{
        font-size: 40px;
    }
    .bar .btn{
        font-size: 20px;
        padding: 10px 20px;
    }
}


#contact-bg{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/services-bar.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
}

#contact-bar{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/services-bar.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
}

.contact-bar .contact-details{
    border: none;
}
.contact-bar .contact-details div{
    min-height: 300px;
    opacity: 0.8;
}
.contact-bar .contact-details div:hover{
    opacity: 0.9;
}

.contact-bar .contact-details i{
    color: #333;
}

.contact-bar input,
.contact-bar textarea{
    opacity: 0.8;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}
.contact-bar input:hover,
.contact-bar textarea:hover{
    opacity: 0.9;
}

.contact-bar .custom-btn:hover{
    background: transparent;
    color: #fff;
}

#two-cols-bar section:first-child{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/bar-bg.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
}


#two-cols-bar section:last-child{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/portfolio-bar.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
}

.two-cols-bar section{
    padding: 70px 80px;
    min-height: 440px;
}

.two-cols-bar .fix-height{
    min-height: 380px;
}

@media(max-width: 991px){
    .two-cols-bar section:first-child,
    .two-cols-bar section:last-child{
        padding: 40px;
    }
}
@media(max-width: 767px){
    .two-cols-bar p{
        text-align: center;
        font-size: 20px;
    }
    .two-cols-bar section:first-child,
    .two-cols-bar section:last-child{
        min-height: 330px;
    }
}


/* SERVICES */

#services-grid li{
    padding: 0
}

#services-list a{
    color: #666;
}

#services-list article:hover{
    background: #f7f7f7;
}

#services-list article:hover h2{
    color: #fff;
}

#services-list article:hover a{
    letter-spacing: 1.5px;
}

@media(max-width: 767px){
    #services-list article{
        min-height: 300px;
    }
}



/* services-alt */

.each-block p{
    font-size: 14px;
    font-weight: 300;
    background-color: #000;
    padding: 30px 20px;
    color: rgba(255,255,255,0.7);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-align: left;
}

.each-block:hover > p{
    background-color:  #222;
}

.each-block a.btn{
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255,255,255, 0.7);
    background: #F7B300;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
}

.each-block:hover > p a{
    letter-spacing: 1.5px;
    background: #222;
    border-top: 1px #444 solid;
    border-bottom: 1px #444 solid;
}

.each-block p a:hover{
    color: rgb(255,255,255);
}


.each-block h4{
    text-transform: uppercase;
    margin-bottom: 30px;
}

@media(max-width: 991px){
    .each-block{
        margin-bottom: 50px;
    }
}

@media(max-width: 680px){
    .each-block a.btn{
        margin-top: 30px;
        position: absolute;
    }
    .each-block{
        margin-bottom: 100px;
    }
}


/* block details */

.block-details{
    padding: 60px 70px;
    border: 1px solid #eee;
    margin-left: -1px;
    margin-top: -1px;
}

.block-details h4{
    color: #F7B300;
}
#services-grid > li:nth-child(odd){
    background: #f7f7f7;
}

@media(max-width:480px){
    .block-details{
        padding: 30px 40px;
    }
}

.block-details p{
    margin-top: 30px;
    margin-bottom: 30px;
}

.block-details li{
    color: #666;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.block-details .btn{
    opacity: 0;
    margin-top: 20px;
    font-size: 12px;
    background: #F7B300;
}

.block-details .btn:hover{
    color: #fff;
    background: #000;
}

.block-details:hover .btn{
    opacity: 1;
}

.block-details h6{
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}



/* SMALL BOXES */

.box-sm article{
    padding: 20px 30px;
    border: 1px solid #eee;
    margin-left: -1px;
    margin-bottom: -1px;
}

.box-sm .box-title-icon{
    float: right;
    color: #f7f7f7;
    font-size: 30px;
}

.box-sm h2{
    text-align: right;
    margin-top: 30px;
}

.box-sm h4{
    color: #F7B300
}

.box-sm article > a{
    position: absolute;
    margin-top: 45px;
}


@media(max-width: 991px){
    .box-sm .home-team{
        clear: left;
    }
}

@media(min-width: 767px) and (max-width: 991px){
    .box-sm .home-team{
        margin-right: 2px;
    }
}
.box-sm .home-team span{
    padding: 0;
    display: inline;
}

.box-sm .home-team section{
    display: inline-block;
    padding-top: 10px;
}


/* SMALL BOXES ALT */

.box-sm-alt article{
    padding: 30px;
    border: 1px solid #eee;
    margin-left: -1px;
    margin-bottom: -1px;
    min-height: 320px;
}

.box-sm-alt .box-title-icon{
    float: right;
    color: #f7f7f7;
    font-size: 30px;
}

.box-sm-alt h4{
    margin-top: 50px;
    letter-spacing: 1.5px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    color: #F7B300;
}

.box-sm-alt h2{
    color: #f7f7f7;
    margin-top: 50px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
}
.box-sm-alt .dark-bg h2{
    color: #222;
}

.service-hover-layer{
    opacity: 0;
    position: absolute;
}

.box-sm-alt article:hover .service-hover-layer{
    opacity: 1;
}

.box-sm-alt article:hover h2{
    font-size: 0;
    margin: 10px;
}

.box-sm-alt article:hover h4{
    margin-top: 20px;
}

.box-sm-alt p{
    margin-bottom: 35px;
    margin-top: 5px;
}
.box-sm-alt p,
.box-sm-alt a{
    margin-right: 30px;
}

@media(max-width: 480px){
    .box-sm-alt h2,
    .box-sm h2{
        font-size: 40px;
    }
}


/* =================================
 *
       PRICE TABLE
 */


#price-table > header{
    margin-top: 50px;
    margin-bottom: 50px;
}

.price-table{
    border: 1px solid #eee;
    margin-left: -1px;
    text-align: center;
}

@media(max-width: 991px){
    .price-table{
        margin-bottom: 10px;
    }
}

@media(max-width: 480px){
    .price-table{
        width: 100%;
    }
}

.price-table h2{
    padding-top: 80px;
    padding-bottom: 80px;
    margin-bottom: 30px;
    background-color: #f7f7f7;
    color: #666;
    font-size: 60px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    color: rgba(0,0,0, 0.8);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.price-table h2 small{
    font-size: 16px;
    color: #ccc;
    display: block;
    font-weight: 300;
    letter-spacing: 1.5px;
    margin-top: 10px;
}

.price-table h2 sup{
    opacity: 0.5;
    font-size: 24px;
}

.price-table:hover h2{
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.price-table:hover h4{
    border-color: #666;
}

.price-table h4{
    margin-top: 25px;
    margin-bottom: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 30px;
    color: #666;
    text-transform: uppercase;
    font-weight: 300;
    border-bottom: 10px #f7f7f7 solid;
}

@media(min-width: 992px){
    .price-table:hover h2{
        font-size: 70px;
        font-size: 60px;
        color: #000;
    }

    .price-table.featured:hover h2{
        font-size: 70px;
        font-size: 60px;
        color: #fff;
    }
}

.price-table footer .btn{
    background: #666;
    border: 3px solid #666;
    font-weight: 400;
    margin-bottom: 50px;
    margin-top: 50px;
    letter-spacing: 1.5px;
    display: block;
}

.price-table footer .btn:hover{
    background: #fff;
    color: #666;
}

.price-table.featured h2{
    background-color: #F7B300;
    font-size: 60px;
    font-weight: 700;
    color: #fff;
}

.price-table.featured h4{
    color: #000;
    font-weight: 700;
    border-color: #000;
}

.price-table.featured small{
    color: #000;
}

.price-table.featured h2 sup{
    font-weight: 300;
}

.price-table.featured footer .btn{
    background: #000;
    border: 3px solid #000;
}
.price-table.featured footer .btn:hover{
    background: #fff;
    color: #000;
}

.price-table ul{
    padding-left: 0;
}

.price-table ul li{
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #f7f7f7;
    color: #666;
    text-transform: capitalize;
    font-weight: 300;
}


/* CLIENTS */

#clients-list section > div{
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    margin-left: -1px;
    padding: 50px 25px;
}

@media (max-width: 480px){
    #clients-list section > div{
        width: 100%;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
        border-right: none;
        border-left: none;
        margin-top: -1px;
        margin-left: 0;
    }
}

#clients-list span img{

}
.client-hover{
    opacity: 0;
    padding: 30px;
    color: #fff;
    background: rgba(0,0,0,0.8);
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    position: absolute;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

#clients-list div:hover .client-hover{
    opacity: 1;
}

.client-hover h5{
    color: #ccc;
}

.client-hover p{
    text-transform: capitalize;
    font-family: Lato,"Microsoft YaHei";
    letter-spacing: 1.5px;
}

.client-hover:hover span i{
    color: #F7B300;
}

@media(max-width: 767px){
    .client-hover{
        padding: 60px 30px;
    }
}

@media(max-width: 480px){
    .client-hover{
        padding: 30px;
    }
    .client-hover h5{
        font-size: 14px;
    }

    .client-hover p{
        font-size: 12px;
    }
}


/* PORTFOLIO */

.grid-layout {
    list-style: none;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

.grid-layout div {
    height: 50%;
    width: 100%;
    opacity: 0.7;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    padding: 50px;
}
.grid-layout div span {
    display: block;
    font-size: 12px;
    padding-top: 5px;
    opacity: 0.8;
    color: #F7B300;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.grid-layout figure {
    position: relative;
}
.grid-layout figure:hover img{
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}

@media (max-width: 767px){

    .grid-layout{
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .grid-layout li{
        margin-bottom: 20px;
    }
}

.entry {
    position: relative;
    float: left;
    cursor: pointer;
    list-style: none;
}

.hover-effect{
    margin-top: 0;
}

.hover-effect li{
    padding: 15px;
}

.hover-effect.no-padding li{
    padding: 0;
}

.hover-effect div h4 {
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}

.hover-effect a{
    text-decoration: none;
    float: none;
    margin-top: 50px;
    opacity: 0;
}
.hover-effect a:hover{
    border-color: #fff;
}
.hover-effect i:hover,
.hover-effect i:focus{
    background: transparent;
    color: #fff;
    letter-spacing: 0.5px;
}

.hover-effect figure:hover div{
    padding-top: 100px;
    opacity: 1;
    height: 100%;
}

.hover-effect figure:hover div a{
    opacity: 1;
}

@media (max-width: 767px) {
    .hover-effect figure h4{
        font-size: 28px;
        margin-bottom: 20px;
    }
}

@media(max-width: 640px){
    .hover-effect figure:hover div{
        padding-top: 50px;
    }
}

@media(max-width: 480px){
    .hover-effect figure h4{
        font-size: 20px;
        margin-bottom: 10px;
        margin-top: 0;
    }

    .hover-effect figure img{
        min-height: 200px;
    }
}
.portfolio-classic div{
    position: relative;
    padding: 20px;
    height: 120px;
    opacity: 1;
    background: #000;
}

.portfolio-classic figure:hover div{
    height: 320px;
    padding-top: 70px;
}

.portfolio-classic figure:hover img{

}


/* portfolio filter & blog filter */

.grid-filter{
    padding: 0;
    list-style: none;
    height: 120px;
}

@media(max-width: 991px){
    .grid-filter{
        height: 220px;
        text-align: left;
        margin-left: 30px;
    }
}

.grid-filter li{
    margin-bottom: 20px;
    margin-left: -30px;
    display: block;
}

.grid-filter a{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    line-height: 39px;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.grid-filter a:hover,
.grid-filter a:focus{
    color: #666;
}

.grid-filter a.selected,
.grid-filter a.selected:hover,
.grid-filter a.selected:focus{
    color: #F7B300;
}

.grid-filter a div{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    font-size: 10px;
    color: #fff;
    font-weight: 400;
    position: absolute;
    font-family: Lato,"Microsoft YaHei";
    z-index: -1;
    margin-left: 3px;
}

@media(max-width: 991px){
    .grid-filter a div{
        margin-left: -30px;
    }
}

.grid-filter a:hover div,
.grid-filter a.selected div{
    font-size: 80px;
    color: #eee;
}


/* SINGLE PROJECT */
#single-project-description article{
    padding-left: 0;
    padding-right: 0;
}

#single-project-description article h4{
    color: #F7B300;
}

#single-project-meta section{
    margin-top: -60px;
}

#single-project-meta article{
    border: 1px solid #eee;
    padding: 20px;
    margin: 10px 0 0 0;
    background: #f7f7f7;
    opacity: 0.8;
    text-align: center;
}

#single-project-meta article a{
    font-family: Lato,"Microsoft YaHei";
    font-weight: 300;
}

@media(max-width: 480px){
    #single-project-meta article{
        width: 100%;
    }
}


#single-project-meta.meta-alt{
    margin-bottom: 70px;
}

#single-project-meta.meta-alt article{
    margin-left: 0;
}

#single-project-meta div{
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 300;
}

#single-project-meta h6{
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.project-preview{
    padding: 0;
}
.project-preview img{
    margin-bottom: -1px;
    padding: 20px;
    border: 1px solid #eee;
}

.project-preview img:hover{
    padding: 10px;
}

.project-preview h4{
    margin-bottom: 40px;
}

.client-review{
    background: #000;
    color: #fff;
    padding: 40px 50px;
    margin-top: 50px;
}

.client-review p{
    color: #aaa;
}

.client-review h2{
    color: #222;
}

@media(max-width: 767px){
    #single-project-meta div{
        letter-spacing: 1.5px;
    }

    #single-project-meta h6{
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    #single-project-meta article{
        padding: 10px;
    }

    #single-project-meta section{
        margin-top: -50px;
    }
}

/* BLOG */

.blog-post-list{
    padding: 0;
    font-size: 13px;
    font-family: Oswald,"Microsoft YaHei";
}
.blog-post-list .day{
    color: #000;
    font-size: 70px;
}

.blog-post-list .month{
    color: #000;
    font-size: 20px;
    text-transform: uppercase;
}

.blog-post-list h4{
    text-transform: capitalize;
    font-weight: 300;
    color: #666;
}

.blog-post-list img{
    position: relative;
}
.blog-post-list div{
    top: 0;
    position: absolute;
    background: rgba(255,255,255, 0.7);
    height: 100%;
    width: 100%;
    padding: 12%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.blog-post-list div:hover{
    background: rgba(255,255,255, 0.8);
}

.blog-post-list .meta{
    opacity: 0;
    letter-spacing: 1.5px;
    bottom: 0;
}
.blog-post-list .meta,
.blog-post-list .meta a{
    color: #000;
    font-family: Lato,"Microsoft YaHei";
}

.blog-post-list .meta i{
    margin-right: 3px;
    margin-left: 3px;
}
.blog-post-list div:hover .meta{
    opacity: 1;
}

.blog-post-list a:hover h4{
    color: #000;
}

.blog-post-list div:hover h4{
    margin-bottom: 50px;
}

@media(max-width: 580px){
    #blog-list article{
        width: 100%;
    }
}
@media(max-width: 480px){
    .blog-post-list h4{
        font-size: 24px;
    }
}

@media(max-width: 991px){
    #blog-grid.hover-effect figure div{
        padding-top: 30px;
    }
    #blog-grid.hover-effect figure:hover div{
        padding-top: 50px;
    }
}

@media(max-width: 650px){
    #blog-grid.hover-effect figure div{
        padding-top: 20px;
    }
    #blog-grid.hover-effect figure:hover div{
        padding-top: 30px;
    }

    #blog-grid div h4{
        font-size: 22px;
    }
}

@media(max-width: 480px){
    #blog-grid div{
        height: 70%;
        text-align: center;
    }
    #blog-grid figure:hover div{
        height: 100%;
    }
    #blog-grid div a{
        margin-top: 20px;
    }
}


/* blog single post */

#blog .rect-banner{
    padding-left: 40px;
    padding-right: 40px;
}


.post-photos div{
    margin-top: 50px;
    margin-bottom: 50px;
}
.post-photos div img{
    border: 1px solid #eee;
    padding: 10px;

}

/* blog post thumbnails */

.blog-post-thumbnails .img-border{
    border: 1px solid #eee;
    padding: 10px;
}
.blog-post-thumbnails .img-border:hover{
    padding: 0;
}

.blog-post-thumbnails .img-fade:hover{
    opacity: 0.8;
}

.blog-post-thumbnails .img-border-radius{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

@media(max-width: 480px){
    .blog-post-thumbnails div{
        width: 100%;
        height: 100%;
    }

    .blog-post-thumbnails img{
        margin-bottom: 20px;
    }
}


/* blog post quote */

.blog-post-quote{
    padding: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    border-left: 10px #F7B300 solid;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.blog-post-quote p.lead{
    margin-top: 0;
    color: #666;
    display: inline;
}
.blog-post-quote footer{
    display: block;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    font-weight: 700;
    font-family: Oswald,"Microsoft YaHei";
}


/* blog post social share icons */

.blog-social-share{
    padding: 70px;
}
.blog-social-share a{
    color: #fff;
}
.blog-social-share a:hover{
    letter-spacing: normal;
}

.blog-social-share h4{
    display: inline;
    margin-right: 20px;
    margin-left: 20px
}

.blog-social-share span{
    padding: 10px 20px;
    display: inline-block;
}
.blog-social-share span:hover a{
    color:  #999;
}

@media(max-width: 767px){

    .blog-social-share{
        text-align: center;
    }
    .blog-social-share h4{
        display: block;
        margin-bottom: 30px;
        margin-right: 0;
        clear: both;
    }
}

@media(max-width: 480px){
    .blog-social-share span{
        margin-bottom: 3px;
    }
}


/* sidebar */

#sidebar{
    padding: 0;
}
@media(max-width: 991px){
    #sidebar{
        margin-top: 50px;
        clear: both;
    }
}

#sidebar section{
    clear: both;
    padding: 0;
}

#sidebar header,
#sidebar article{
    display: block;
    padding-left: 0;
    padding-right: 0;
}

#sidebar .meta .author-name{
    padding-top: 30px;
    padding-bottom: 30px;
}

#sidebar .author-name span{
    color: #999;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#sidebar .meta .author-name h4{
    color: #fff;
}

#sidebar .meta .author-info{
    padding: 0;
    background: #f7f7f7;
}

#sidebar .author-info .social-icons{
    margin-bottom: 50px;
    margin-top: 50px;
}

.sidebar-social-icons a{
    border-bottom: 3px #eee solid;
    padding: 15px;
    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    color: #ccc;
    font-weight: 300;
    font-size: 16px;
}
.sidebar-social-icons i{
    font-size: 24px;
}

.sidebar-social-icons span{
    margin-left: 30px;
    margin-right: 10px;
    color: #333;
    font-weight: 400;
}


/* tags cloud */
#tags ul{
    margin: 30px 15px 15px -15px;
    display: inline-block;
}
#tags ul.tags a{
    background-color: #000;
    padding: 10px 15px;
    color: rgba(255,255,255, 0.7);
    font-weight: 300;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-transform: lowercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-family: Lato,"Microsoft YaHei";
}

#tags ul.tags a:hover,
#tags ul.tags a:focus{
    color: #fff;
    background: #F7B300;
}

#tags ul.tags li{
    display: inline-block;
    margin-bottom: 18px;
    margin-right: 0;
}

/* categories list */
ul.bullets{
    margin-left: -10px;
    margin-bottom: 30px;
    margin-top: 30px;
    list-style: none;
}
ul.bullets li{
    margin-bottom: 15px;

}
ul.bullets li:before{
    font-family: "FontAwesome";
    content: "\f10c";
    display: inline;
    text-align: center;
    font-size: 8px;
    margin-right: 20px;
}
ul.bullets li a{
    letter-spacing: 1.5px;
    font-family: Lato,"Microsoft YaHei";
}
ul.bullets li a:hover{
    letter-spacing: normal;
}

/* post comments */

#post-comments h4{
    margin-bottom: 50px;
}
#post-comments div{
    margin-right: 12px;
    padding: 0;
}

@media(max-width: 480px){
    #post-comments input{
        width: 100%;
    }
}

/* comments list */

#comments-list{
    padding-left: 0;
    padding-right: 0;
}
#comments-list h4{
    margin-bottom: 50px;
}
.media-list{
    padding: 50px 0 50px 50px;
    border-left: 10px solid #F7B300;
    background: #fff;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.media-list > .media{
    border-bottom: 5px solid #f7f7f7;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.media-list > .media:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.media-list h5 span{
    margin-right: 10px;
}

.media-list h5 small{
    color: #ccc;
    font-weight: 300;
    font-family: Lato,"Microsoft YaHei";
}

.media-list .reply a{
    color: #ccc;
}

.media-list .media-body:hover .reply a{
    color: #000;
}

.media .media-heading,
.media p{
    margin-left: 10px;
}

.media.nested-media{
    margin-top: 50px;
}

@media(max-width: 480px){
    .media-list{
        padding: 20px;
    }
    .media-list span i{
        font-size: 16px;
    }
}


/* blog pagination */

.pagi > li:first-child > a{
    margin-left: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-color: #f7f7f7;
}
.pagi > li:last-child > a{
    border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.pagi > .disabled > a:hover{
    cursor: default;
}

.pagi li a {
    display: block;
    width: 35px;
    height: 35px;
    margin-right: 1px;

    border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border: none;
    border-bottom: 10px solid #f7f7f7;
    color: #000;
    opacity: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}

.pagi li a:hover,
.pagi li a:focus{
    background: #000;
    color: #fff;
    border-color: #000;
}

.pagi > .active > a,
.pagi > .active > a:hover{
    background-color: #000;
    border-color: #000;
}



/* photo stream */

.photo-stream div{
    padding: 0;
}
.photo-stream div img{
    -webkit-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    -moz-transition:  opacity 0.4s;
    -o-transition:  opacity 0.4s;
    transition:  opacity 0.4s;
}
.photo-stream div img:hover,
.photo-stream div img:focus{
    opacity: 0.8;
}

/* subscribe form */
#subscribe{
    background: linear-gradient(
            rgba(0,0,0,0.4),
            rgba(0,0,0, 0.6)
    ), url(../images/services-bar.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
}

#subscribe h2{
    margin-bottom: 50px;
}
#subscribe input{
    width: 400px;
    height: 40px;
    background: rgba(255,255,255, 0.8);
    margin: 0 auto;
}
#subscribe a{
    width: 400px;
    margin-top: 20px;
    margin-bottom: 50px;
}

@media(max-width: 480px){
    #subscribe input,
    #subscribe a{
        width: 300px;
    }
}


/* FOOTER */

#footer{
    padding: 0;
}
.copyright{
    margin-bottom: 0;
    margin-top: 0;
    clear: both;
    text-align: center;
    background: #000;
    padding: 120px;
}
.copyright div{
    display: block;
    color: #666;
    padding-top: 10px;
    font-size: 14px;
    letter-spacing: 1.5px;
}
.copyright a{
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-left: 2px;
    color: rgba(255,255,255,0.7);
}
.copyright i{
    margin-right: 2px;
    margin-left: 2px;
}

/* footer & menu social icons */

.menu-social-icons{
    padding: 50px 15px;
}

.footer-social-icons{
    padding: 110px 15px;
}
.main-social-icons a{
    display: inline-block;
    margin-right: 10px;
    letter-spacing: normal;
}
.main-social-icons a span{
    letter-spacing: 1.5px;
}
.main-social-icons i,
.main-social-icons span{
    border-bottom: 10px #eee solid;
    border-top: 10px transparent solid;
    padding: 15px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

.main-social-icons i:hover,
.main-social-icons span:hover{
    border-top: 10px #000 solid;
    border-bottom: 10px transparent solid;
    color: #F7B300;
    background: #000;
}

@media(max-width: 680px){
    .menu-social-icons{
        margin-bottom: 20%;
    }
}

@media(max-width: 480px){
    .word-icons a{
        display: block;
        margin-bottom: 70px;
    }
}

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


/* CONTACT PAGE */

.form-horizontal{
    margin-bottom: 100px;
}

.form-control{
    border-radius:0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #eee;
    font-weight: 300;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

.form-control:focus {
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    background: #fff;
}

.form-control:hover,
.form-control:focus{
    border-color: #eee;
}

.custom-btn{
    color: #fff;
    background-color: #F7B300;
    border: none;
    width:100%;
    padding-top:15px;
    padding-bottom: 15px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    border: 2px solid transparent;
}

.custom-btn:hover,
.custom-btn:focus{
    color: #fff;
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    outline: none;
}



form input[type="text"].error, form input[type="password"].error, form input[type="date"].error, form input[type="datetime"].error, form input[type="datetime-local"].error, form input[type="month"].error, form input[type="week"].error, form input[type="email"].error, form input[type="number"].error, form input[type="search"].error, form input[type="tel"].error, form input[type="time"].error, form input[type="url"].error, form textarea.error {
    border-color: red;
}


#success, #error {
    display:none
}

#success span, #error span {
    display: block;
    position: absolute;
    background-color: rgba(255,255,255,0.8);
}

#success span.layer-size-1,
#error span.layer-size-1{
    top: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    height: 500px;
}

#success span.layer-size-2,
#error span.layer-size-2{
    top: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 96%;
    height: 431px;
    background: transparent;
}

@media(max-width: 767px){
    #success span.layer-size-1,
    #error span.layer-size-1{
        width: 95%;
    }
}

#success span i {
    color: #00B355;
    margin-top: 2.5em;
}

#error span i {
    color: #c0392b;
    margin-top: 6em;
}


.green-btn{
    background-color: green;
}

#map{
    width: 100%;
    height: 340px;
    border: none;
}

#map.map-height{
    height: 510px;
}

.contact-details{
    border: 1px solid #eee;
    padding: 0;
}

.contact-details > div{
    min-height: 250px;
    padding: 20px 40px;
}

.contact-details > div:hover i{
    color: #000;
}

.contact-details h5,
.contact-details a{
    font-family: Lato,"Microsoft YaHei";
}
.contact-details h5 a{
    letter-spacing: 1.5px;
}
.contact-details h5 span{
    display: block;
    margin-bottom: 6px;
}

.contact-details i{
    margin-bottom: 20px;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.contact-details:hover td i{
    color: #fff;
}

.contact-form h4{
    margin-bottom: 50px;
    margin-top: 0;
    color: #F7B300;
}


/* ISOTOPE PLUGIN */

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:    -ms-transform, opacity;
    -o-transition-property:    -o-transform, opacity;
    transition-property:         transform, opacity;
}


/* -- LIGHTBOX --
 * =====================================================================
 */


.lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #000;
    opacity: 0.8;
    display: none;
}

.lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10000;
    text-align: center;
    line-height: 0;
    font-weight: normal;
}

.lightbox .lb-image {
    display: block;
    height: auto;
    max-width: inherit;
}

.lightbox a img {
    border: none;
}

.lb-outerContainer {
    position: relative;
    background-color: white;
    width: 250px;
    height: 250px;
    margin: 0 auto;

}

.lb-outerContainer:after {
    content: "";
    display: table;
    clear: both;
}

.lb-container {
    padding: 4px;
}

.lb-loader {
    position: absolute;
    top: 43%;
    left: 0;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}

.lb-cancel {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

.lb-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}

.lb-container > .nav {
    left: 0;
}

.lb-nav a {
    outline: none;
    background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
    height: 100%;
    cursor: pointer;
    display: block;
}

.lb-nav a.lb-prev {
    width: 34%;
    left: 0;
    float: left;
    background: url(../images/img/prev.png) left 48% no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -o-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover,
.lb-nav a.lb-prev:focus{
    opacity: 1;
}

.lb-nav a.lb-next {
    width: 64%;
    right: 0;
    float: right;
    background: url(../images/img/next.png) right 48% no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -o-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover,
.lb-nav a.lb-next:focus{
    opacity: 1;
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    width: 100%;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
    content: "";
    display: table;
    clear: both;
}

.lb-data {
    padding: 0 4px;
    color: #ccc;
}

.lb-data .lb-details {
    width: 85%;
    float: left;
    text-align: left;
    line-height: 1.1em;
}

.lb-data .lb-caption {
    font-size: 13px;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1.5px;
    line-height: 1em;
}

.lb-data .lb-number {
    display: block;
    clear: left;
    padding-bottom: 1em;
    font-size: 12px;
    color: #fff;
}

.lb-data .lb-close {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
    background: url(../images/img/close.png) top right no-repeat;
    text-align: right;
    outline: none;
    opacity: 0.7;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.lb-data .lb-close:hover,
.lb-data .lb-close:focus{
    cursor: pointer;
    opacity: 1;
}


/* JCAROUSEL Plugin */

.jcarousel-wrapper {
    position: relative;
    margin-top: 30px;
}

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: inline-block;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.jcarousel li {
    float: left;
    padding: 5px;
}

.jcarousel figure img {
    display: block;
    height: auto !important;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: -33px;
    margin-top: -20px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #000;
    text-decoration: none;
    font-size: 14px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    z-index: 100;
}

.jcarousel-control-prev:hover,
.jcarousel-control-prev:focus,
.jcarousel-control-next:hover,
.jcarousel-control-next:focus{
    background: #000;
    color: #fff;
    text-decoration: none;
}

.jcarousel-control-prev i,
.jcarousel-control-next i{
    padding-top: 8px;
    color: #000;
}

.jcarousel-control-prev:hover i,
.jcarousel-control-next:hover i{
    color: #fff;
}

.jcarousel-control-prev {
    right: 35px;
}

.jcarousel-control-next {
    right: 5px;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    display: inline-block;
    top: 150px;
    right: 5%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-pagination a {
    display: block;
    padding: 10px;
    margin-bottom: 5px;
    background: rgba(255,255,255,0.3);
    opacity: 1;
    color: transparent;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-decoration: none;
}

.jcarousel-pagination a.active{
    padding: 10px 20px;
    color: rgba(0,0,0,0.9);
    background: rgba(255,255,255,0.4);
    font-size: 90px;
}

.jcarousel-pagination a:hover,
.jcarousel-pagination a:focus{

}

@media(max-width: 1200px){
    .jcarousel-pagination{
        right: 3%;
    }
}
@media(max-width: 991px){
    .jcarousel-pagination{
        right: 2%;
    }
    .jcarousel-pagination a{
        padding: 5px;
    }
    .jcarousel-pagination a.active{
        font-size: 50px;
    }
}

@media(max-width: 767px){
    .jcarousel-pagination{
        right: 3%;
        top: 70px;
    }
}
@media(max-width: 700px){

    .jcarousel-pagination{
        right: 3%;
        top: 25%;
    }
    .jcarousel-pagination a{
        padding: 3px;

    }
    .jcarousel-pagination a.active{
        font-size: 20px;
    }
}

@media(max-width: 480px){
    .jcarousel-pagination{
        right: 2%;
    }
    .jcarousel-pagination a{
        padding: 5px;
    }
    .jcarousel-pagination a.active{
        font-size: 0;
        padding: 5px;
        color: transparent;
    }
}