@charset "utf-8";

@font-face {
    font-family:'UTM Bebas';
    font-weight: normal;
    font-style: normal;
    src:url('../fonts/UTM Bebas.ttf') format('truetype');
}
/*------------------ Reset -----------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none
}

html,
body {
    min-width: 300px;
    max-width: 1800px;
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
    font-size: 14px;
    color: rgba(0,0,0,.7);
}

p {
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: inherit;
}
.bs.container-fluid,
.bs.container {
    width: 100%;
    position: relative;
}

.bs.container {
    max-width: 1080px;
}

.bs.row {
    margin-left: 0;
    margin-right: 0
}
.bs.row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
h1.bs, .h1.bs, h2.bs, .h2.bs, h3.bs, .h3.bs, h4.bs, .h4.bs, h5.bs, .h5.bs {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    transition: all 0.15s linear
}

ol.bs, ul.bs {
    margin: 0;
    padding: 0
}

a, a:hover,a:focus,a:active {
    text-decoration: none;
    color: inherit
}

a, input, select {
    transition: all 0.15s linear
}

img {
    max-width: 100%;
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
}

iframe {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.fw {
    max-width: 992px;
}
.fw-600 {
    max-width: 600px;
}
.h-fw {
    max-width: 500px;
}

.dil {
    display: inline-block;
    vertical-align: middle;
}
.eff{
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
}
.dfx,
.image,
.image.i a,
.image.o a,
.image.fit a {
    display: flex;
    flex-wrap: wrap;
}
.flex-center > *{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.image,
.image a
{
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.image a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.image img {
    width: 100%;
}
.image.e img {
    transition: none;
}

.image.e:hover img {
    /*transform: scale(1.15);*/
    opacity: .7;
}

.image.i img {
    max-width: none;
    max-height: none;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}
.image.o img{
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    min-height: inherit;
    min-width: inherit;
}
.image.fit img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

article[class^="ii-"],div[class^="ii-"] {
    display: flex !important;
    outline: none;
}

article[class^="ii-"] .inner,div[class^="ii-"] .inner {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.inner .meta {
    padding: 5px 0;
}

.title {
    font-size: 15px;
    margin: 0;
}
.title.u{
    text-transform: uppercase;
}

.bg-cover{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/*------------------ Style -----------------*/
/*wrapper*/
.viver-wrapper{
    background-image: url(../img/bg.jpg);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: 0;
}
/*----------------header---------------*/
#viver-header{

}

.viver-logo{
    text-align: center;
}
.viver-logo img{
    max-height: 150px;
    width:  auto;
}
.top-header{
    padding: 10px 0;
}
.social{
    width: 100%;
    text-align: center;
}
.social a{
    display: inline-block;
    padding: 5px;
}
.social i{
    border-radius: 50%;
    text-align: center;
    margin: 0 2px;
    display: inline-block;
}
.social i{
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    border: 1px solid #eee;
}
.social i.fa-facebook{
    background-color: #3a589b
}
.social i.fa-google-plus{
    background-color: #cf1717
}
.social i.fa-twitter{
    background-color: #598dca
}
.social i.fa-youtube-play{
    background-color: #cc191e;
}
.social i:hover{
    opacity: .8;
}
/* Search */
.viver-search{
    width: 100%;
    padding: 30px 20px 20px;
    position: relative;
    display: none;
    background: #eee;
}
.viver-search-close{
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 22px;
    z-index: 999;
}
.viver-search-close:hover{
    transform: rotate(360deg);
}
#f-s{
    width: 100%;
    position: relative;
}
#s{
    width: 100%;
    background-color: #fff;
    padding: 10px 38px 10px 10px;
    border: 1px solid #ddd;
    outline: none;
    border-radius: 20px;
    color: #777;
    font-size: 18px;
}
#s:focus{
    border-color: #f5841e;
}
#k{
    font-family: 'FontAwesome';
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    color: #f5841e;
    border: none;
    width: 50px;
    height: 47px;
    outline: none;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    border-radius: 0 20px 20px 0;
}

/***********Menu**************/
.viver-navigation{
    width: 100%;
    position: relative;
    background-color: #0b9243;
}
.viver-navigation-inner{
    position: relative;
}
.viver-lang{
    position: absolute;
    top: 10px;
    right: 15px;
}
.viver-lang a{
    margin-left: 5px;
}
.viver-lang img{
    width: 30px;
    height: 20px;
}
.viver-nav-pc{
    width: 100%;
    position: relative;
}
.viver-menu{
    font-size: 0;
    margin: 0;
    display: inline-block;
}
.viver-menu > li{
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.viver-menu li a{
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    text-align: left;
    letter-spacing: 0.7px;
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
    color: #fff;
}
.viver-menu > li > a{
    text-align: center;
    padding: 10px 40px;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
}
.viver-menu li:hover>a,
.viver-menu li.current-menu-item > a{
    color: #fff;
    background-color: #d81e11;
}
.viver-menu > li > ul{
    position: absolute;
    top: 100%;
    left: -2px;
    height: 0;
    min-width: 240px;
    background: rgba(255,255,255,1);
    z-index: 999;
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
    transform: translateY(30px);
    opacity: 0;
    overflow: hidden;
    border: 1px solid #d4d4d4;
}

.viver-menu > li:hover > ul{
    display: block;
    transform: translateY(0px);
    opacity: 1;
    height: auto;
    overflow: visible;
}

.viver-menu ul > li{
    display: block;
    border-bottom: 1px solid #d4d4d4;
}
.viver-menu ul > li:last-child{
    border-bottom: none;
}
.viver-menu ul > li > a{
    padding: 10px;
}
.viver-menu ul > li:hover > a{
    /*transform: translateX(15px);*/
}
.viver-nav-mobile{
    display: none;
    width: 100%;
    text-align: right;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #333;
}
.viver-menu-bar{
    padding:0 15px;
}
.viver-nav-mobile .left,
.viver-nav-mobile .right{
    width: 50%;
}
.viver-nav-mobile .left{
    text-align: left;
    float: left;
}
.viver-nav-mobile .right{
    text-align: right;
    float: right;
}
.viver-nav-mobile span.tx{
    color: #fff;
    height: 40px;
    height: 40px;
    line-height: 40px;
    position: relative;
    display: inline-block;
    background: none;
    margin: 0;
    font-size: 18px;
    padding: 0 10px;
    vertical-align: middle;
}
.viver-nav-mobile p{
    width:32px;
    height:40px;
    position:relative;
    display:inline-block;
    background:none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.viver-nav-mobile p span{
    display:block;
    width:30px;
    height:5px;
    background:#fff;
    position:absolute;
    left:0;
    transition:all 0.3s linear
}
.viver-nav-mobile span.micon1{
    top:7px
}
.viver-nav-mobile span.micon2{
    top:17px
}
.viver-nav-mobile span.micon3{
    top:27px
}
.viver-nav-mobile p.action span.micon1{
    transform:rotate(45deg);
    top:18px
}
.viver-nav-mobile p.action span.micon2{
    display:none
}
.viver-nav-mobile p.action span.micon3{
    transform:rotate(-45deg);
    top:18px
}

.nav-block{
    width: 100%;
}
.nav-block .nav-left,.nav-block .nav-right{
    width: 40%;
    float: left;
}
.nav-block .nav-left{
    text-align: right;
}
.nav-block .nav-right{
    text-align: left;
}
.nav-block .nav-center{
    width: 20%;
    float: left;
    height: 40px;
    position: relative;
}


.mobile-search{
    height: 40px;
    width: 40px;
    text-align: center;
    color: #fff;
    line-height: 40px;
}
.mobile-search:focus,
.mobile-search:hover,
.mobile-search:active{
    color: #fff;
}
/*content*/
#viver-content{
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
}
.content-inner{
    padding: 0;
    margin-bottom: 25px;
}

/*------------------Slide-----------------*/

.slick-slide img{
    margin: 0 auto;
}
.slick-slider a,
.slick-slider a:focus,
.slick-slider li,
.slick-slider img,
.slick-initialized .slick-slide{
    outline: none !important;
}
.slick-track,
.slick-list{
    width: 100%;
}

.slick-slider:hover .slick-prev:before, 
.slick-slider:hover .slick-next:before{
    color: rgba(255,255,255,.9);
}
.slick-slider .slick-prev:before,
.slick-slider .slick-next:before{
    color: rgba(255,255,255,.8);
    opacity: 1;
}
.slick-slider .slick-prev:hover:before,
.slick-slider .slick-next:hover:before{
    color: #d81e11;
}

.slide-brand .slick-track,
.product-slide .slick-track{
    display: flex !important;
    flex-wrap: wrap;
}
.product-slide div.ii-product{
    height: auto;
}
.product-slide.slick-slider .slick-prev:before,
.product-slide.slick-slider .slick-next:before{
    color: rgba(0,0,0,.7);
}
.viver-slider-item{
    background-color: #eee;
    height: 600px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.viver-slider-caption{
    
}
/*Main*/
.block{
    padding: 0;
    margin-top: 30px;
    position: relative;
}
.block-title{
    margin-bottom: 10px;
    position: relative;
    margin-bottom: 10px;
    position: relative;
    /*text-transform: uppercase;*/
}
.block-title .title{
    padding: 10px;
    margin: 0;
    position: relative;
    color: #0b9243;
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.block-title.magic{
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 200px;
}
.block-content{
    overflow: hidden;
}
.block-title.archive-title{
    text-align: center;
    margin: 30px 0;
}
.single-title{
    font-size: 20px;
    color: #0b9243;
    margin-bottom: 15px;
}
.block-title.archive-title .title{
    margin: 0;
}
div.ii-product{
    padding-top: 15px;
    padding-bottom: 15px;
}
div.ii-product .inner{
    border: 1px solid #ccc;
}
div.ii-product .image{
    padding: 10px;
    height: 180px;
    border-bottom: 1px dashed #ccc;
}
div.ii-product .meta{
    padding: 10px;
    text-align: center;
}
div.ii-product .desc{
    text-align: left;
}
div.ii-product .title{
    padding: 5px 0;
    margin-bottom: 5px;
}
.desc{
    color: #999;
}

div.ii-post{
    padding: 10px 15px;
}

div.ii-post .image{
    width: 40%;
    float: left;
    padding-right: 15px;
    height: 160px;
}

div.ii-post .meta{
    width: 60%;
    float: left;
}
div.ii-post .title{
    color: #0b9243;
    margin-bottom: 10px;
}
div.ii-post .inner{

}
.box-posts div.ii-post{
    padding: 5px 10px;
    border-bottom: 1px dashed #ccc;
}
.box-posts div.ii-post:last-child{
    border-bottom: none;
}
.box-posts div.ii-post .image{
    height: 60px;
}
.box-posts div.ii-post .title{
    font-size: 13px;
}
.view-more{
    display: block;
    margin: 10px auto;
    border: 1px solid #d7d7d7;
    background-color: #fff;
    color: #333;
    padding: 10px 20px;
    text-align: center;
    border-radius: 20px;
    max-width: 150px;
    box-shadow: 0 3px 0px #d7d7d7;
}

.view-more:hover{
    color: #fff;
    background-color: #d81e11;
    box-shadow: 0 3px 0px #a01309;
    border-color: #d81e11;
}
.box-social .item{
    padding: 5px 10px;
}
.box-social .item .icon{
    width: 25%;
    /*float: left;*/
}
.box-social .item .text{
    width: 72%;
    /*float: left;*/
}
.box-ads .image{
    padding: 5px 10px;
}
/*zoom*/
.product-image{
    padding-right: 20px;
}
.zoom-s{
    text-align: center;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    padding: 10px;
}
.zoom-w{
    position: relative;
}
.zoom-w img{
    top: 0;
    left: 0;
}
.zoom-s img{
    width: 100%;
}
.zoom-n{
    text-align: left;
    padding: 0;
    margin-bottom: 10px;
    font-size: 0;
    border-left: 1px solid #ccc;
}
.zoom-n .zoom-i{
    width: 33.33333%;
    display: inline-block;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 4px;
    background: #fff;
    height: 88px;
    vertical-align: middle;
    text-align: center;
}
.zoom-n .zoom-i img{
    max-height: 100%;
}
/*tabs*/
.dd-tabs{
    margin-top: 25px;
}
.dd-tabs .nav-tabs,
.dd-tabs .nav-tabs>li,
.dd-tabs .nav-tabs>li>a,
.dd-tabs .nav-tabs>li.active>a, 
.dd-tabs .nav-tabs>li.active>a:focus,
.dd-tabs .nav-tabs>li.active>a:hover{
    border: none;
    border-radius: 0;
    margin: 0;
}
.dd-tabs .nav-tabs>li{
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.dd-tabs .nav-tabs>li:last-child{
    border-right: 1px solid #ccc;
}
.dd-tabs .nav-tabs>li>a{
    background-color: #fff;
    color: #333;
}
.dd-tabs .nav-tabs>li.active>a, 
.dd-tabs .nav-tabs>li.active>a:focus,
.dd-tabs .nav-tabs>li.active>a:hover{
    background-color: #179447;
    color: #fff;
}
.dd-tabs .tab-content{
    padding: 10px 15px;
    background-color: rgba(255,255,255,.8);
    border: 1px solid #ccc;
}

/*breadcrumb*/
.zt-bread{
    padding: 0 10px;
    color: #f5f5f5;
    background-color: #f2f2f2;
}
.zt-bread ul{
    /*background: #fff;*/
    padding: 0 5px;
    border-radius: 4px;
}
.zt-bread li{
    display: inline-block;
    padding: 7px 20px 7px 0;
    position: relative;
    color: #179447;
}
.zt-bread li:after{
    content: "\f105";
    position: absolute;
    top: 7px;
    right: 5px;
    font-family: 'FontAwesome';
}
.zt-bread li:last-child:after{
    content: none;
}
.zt-bread li a{
    color: #777;
}
.zt-bread li i{
    width: 20px;
}

/*paging*/
.zt-paging {
    display: block;
    padding: 15px 15px;
    text-align: center;
    font-size: 14px
}
.zt-paging ul{
    margin: 0;
}
.zt-paging ul li {
    display: inline-block;
    margin: 5px 0
}
.zt-paging ul li a {
    display: block;
    background: #e7e7e7;
    text-align: center;
    padding: 5px 10px;
    color: #626262;
    transition: all 0.3s linear;
    text-decoration: none;
}
.zt-paging span,
.zt-paging a:hover,
.zt-paging a.current {
    background: #d81e11;
    color: #fff;
}
.box{
    margin-bottom: 15px;
    background-color: #fff;
}
.box-title .title{
    font-weight: bold;
    text-transform: uppercase;
    background-color: #0b9243;
    color: #fff;
    padding: 10px 5px;
    text-align: center;
    position: relative;
    margin: 0;
}
.box-content{
    /*border: 1px solid #d5d5d5;
    border-top: none;*/
}
.box-list{
    margin: 0 0 10px;
}
.box-content{
    border: 1px solid #0b9243;
    border-top: none;
}
ul.decimal,
ul.decimal > li{
    list-style: decimal;
}
ul.decimal{
    padding-left: 20px;
}
ul.decimal > li{
    padding: 5px 0;
}
.box-list li{
    position: relative;
    padding: 0 10px 0 20px;
    /*pointer-events:none;*/
}
.box-list ul ul li{
    padding: 0 0 0 10px;
}
.box-list ul ul{
    display: block;
}
.box-list .box-content > ul > li:last-child > a,
.box-list .box-content > ul > li:last-child li:last-child > a{
    border-bottom: none;
}
.box-list li:before{
    content: "\f111";
    position: absolute;
    left: 10px;
    top: 8px;
    font-family: 'FontAwesome';
    cursor: pointer;
    color: #f7941d;
    pointer-events: auto;
    font-size: 10px;
}
.box-list li.active:before{
    content: "\f078";
}
.box-list ul ul li:before{
    content: "\f111";
    font-size: 8px;
    top: 15px;
    left: 0;
}
.box-list li a{
    display: block;
    padding: 5px 5px;
}
.box-list li a:hover{
    color: #ec4f61;
}
/*------------------ FOOTER -----------------*/
#viver-footer{
    color: #fff;
    background-color: #0b9243;
    padding: 30px 0;
    border-bottom: 4px solid #0b9243;
    position: relative;
}
#viver-footer:before{
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url('../img/dotted.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0;
}
.footer-inner .title{
    color: #fff;
    margin-bottom: 15px;
}
.footer-info{
    text-align: center;
}
.footer-info .title{
    font-size: 20px;
    color: #fff;
}
.footer-info .title span{
    color: #fff;
}
.footer-info i{
    width: 25px;
    color: #fff
}
.footer-inner li{
    padding: 3px 0 3px 10px;
    position: relative;
    transition: all .2s linear;
}
.footer-inner li:before{
    content: "\f105";
    position: absolute;
    top: 3px;
    left: 0;
    font-family: 'FontAwesome';
}
.footer-inner li:hover{
    color: #fff;
    transform: translateX(10px);
}
.form-subcribe{
    position: relative;
    margin: 5px 0;
}
.form-subcribe input{
    width: 100%;
    padding: 8px 10px 8px 10px;
}
.form-subcribe input[type="submit"]{
    width: 80px;
    height: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: #980f13;
    border: none;
}
/*btt*/
#viver-back-top{
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    z-index: 100
}
#viver-back-top i{
    font-size: 25px;
    line-height: 35px;
    color: #fff;
}
.zt-loading.active{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999;
    background: rgba(255,255,255,.7);
}
.zt-loading{
    display: none;
}
/*contact*/
.form-m{
    margin-bottom: 10px;
}
.form-m input,
.form-m textarea {
    width: 100%;
    padding: 5px 10px;
    margin-bottom: 10px;
    max-width: 100%;
}
.form-m input[type="submit"] {
    background: #0b9243;
    color: #fff;
    border: 1px solid #0b9243;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    margin: 0 auto;
}
.form-m input[type="submit"]:hover {
    opacity: .8;
}
.maps iframe{
    width: 100%;
    max-height: 220px;
}
.sub-title{
    display: block;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    z-index: 1;
    text-transform: uppercase;
}
.sub-title:before,
.sub-title:after{
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 80%;
    height: 1px;
    background: #c5c5c5;
    content: '';
    z-index: -1;
}
.sub-title:before{
    bottom: 25px;
}
.sub-title .title{
    display: inline-block;
    padding: 10px 10px 10px 0;
    background: #f7f7f7;
}
/*fb fix*/
.fb-comments, .fb-comments > span, .fb-comments iframe {
    width: 100% !important;
}
.maps iframe{
    width: 100% !important;
}
/*------------------Responsive-----------------*/
@media screen and (min-width: 768px){
    .social{
        position: fixed;
        top: 20%;
        right: 0;
        width: 50px;
        z-index: 999;
    }
}
@media screen and (min-width: 992px){

}
@media screen and (max-width: 1080px){
    .viver-menu > li > a{
        padding: 10px 35px;
    }
    .viver-lang{
        right: 15px;
    }
    .viver-slider-item{
        height: 400px;
    }
}
@media screen and (max-width: 992px){
    .viver-menu > li > a {
        padding: 10px 15px;
    }
    .top-header {
        background-position: 0;
    }
    .viver-slider-item{
        height: 300px;
    }
}
@media screen and (max-width: 768px){
    .viver-navigation{
        margin-right: 0;
        margin-left: 0;
    }
    .viver-menu{
        display: block;
    }
    .viver-wrapper{
        margin-top: 40px;
    }

    .viver-nav-pc{
        position: fixed;
        top: 39px;
        padding-top: 1px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background: #555;
        overflow-y: scroll;
        overflow-x: hidden;
        display: none;
    }
    .viver-nav-pc::-webkit-scrollbar{
        display: none;
    }
    .viver-nav-pc::-moz-scrollbar{
        display: none;
    }

    .viver-nav-mobile{
        display: block;
    }
    .viver-menu li{
        display: block;
        border-top: 1px solid #999;
    }
    .viver-menu li a{
        padding: 10px;
        text-align: left;
        color: #fff;
    }
    .viver-menu > li > ul{
        display: block;
        width: 100%;
        position: relative;
        top: inherit;
        left: inherit;
        border: none;
        background: none;
    }
    .viver-menu ul li a {
        padding: 10px 10px 10px 50px;
    }
    .viver-slider-item{
        height: 400px;
    }

    .viver-slider-item,
    .block-title.magic {
        height: auto;
        padding: 20px 0;
    }
    .viver-lang{
        position: fixed;
        left: 15px;
        z-index: 99999;
        right: inherit;
    }
}
@media screen and (max-width: 560px) {
    div.ii-system .meta{
        position: relative;
        transform: none;
    }
}
@media screen and (max-width: 480px) {
    .viver-logo img{
        max-height: 60px;
    }
}

@media screen and (max-width: 440px){
    
}
@media screen and (max-width: 360px){
    
}