@font-face {
    font-family: "Open Sans Condensed";
    src: url(../fonts/OpenSans-CondLight.ttf);
    font-weight: normal;
}
@font-face {
    font-family: "Open Sans Condensed";
    src: url(../fonts/OpenSans-CondBold.ttf);
    font-weight: bold;
}
*{
color: #444;
font-family: "helvetica", "Open Sans Condensed", "Arial","sans-serif";
}
body {
padding: 0;
margin: 0;
background: #e6e6e6;
}
img{
max-width: 100%;
}
a{
color: #444;
}
.margin-top-10{
margin-top: 10px;
}
.margin-top-15{
margin-top: 15px;
}
.margin-top-20{
margin-top: 20px;
}
.margin-top-25{
margin-top: 25px;
}
.margin-top-30{
margin-top: 30px;
}
.margin-top-35{
margin-top: 35px;
}
.margin-top-40{
margin-top: 30px;
}
.margin-top-45{
margin-top: 45px;
}
.margin-top-50{
margin-top: 50px;
}
.padding-5{
padding: 5px;
}
.padding-10{
padding: 10px;
}
.padding-15{
padding: 15px;
}
.padding-20{
padding: 20px;
}
.padding-25{
padding: 25px;
}
.padding-30{
padding: 30px;
}
.padding-35{
padding: 35px;
}
.padding-40{
padding: 30px;
}
.padding-45{
padding: 45px;
}
.padding-50{
padding: 50px;
}
.width-100{
width: 100%;
}
.display-flex{
display: flex;
flex-wrap: wrap;
display: -webkit-flex; /* NEW */
-webkit-flex-wrap: wrap; /* NEW */
}


/*read more*/
.readmore{
display: inline-block;
padding: 5px 15px;
color: #fff;
text-transform: uppercase;
background-color: #01a2dd;  
}
.readmore:hover{
background-color: #86C351;
color: #fff;
text-decoration: none;
}

/*top*/
#top{
background-color: #fff;
}
#main-logo{
padding: 5px 0 10px 0;
}
#main-logo img{
max-height:100px;
}
#language{
padding: 10px 0 10px 25px;
text-align: left;
}
#language .language{
padding: 0 5px;
}
#main-menu{
margin-bottom: 5px;
}
#main-menu .nav>li>a{
color: #666;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
padding-left: 25px;
padding-right: 25px;
}
#main-menu .nav>li>a>span{
color: #666;
}
#main-menu .nav>li.active>a, #main-menu .nav>li>a:hover, #main-menu .nav>li>a:focus{
background-color: transparent;
color: #01A2DD;
}
#main-menu .nav>li.active>a>span, #main-menu .nav>li>a:hover>span, #main-menu .nav>li>a:focus>span{
color: #01A2DD;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
background-color: transparent;
}
.dropdown-menu>li>a{
font-weight: bold;
color: #666;
padding: 5px 20px;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{
background-color: transparent;
background-image: none;
color: #01A2DD;
}
.navbar-toggle{
margin-top: 0;
margin-bottom: 0;
}

@media screen and (max-width: 991px){
  #main-logo{
    text-align: center;
  }
  #language{
    text-align: center;
  }
  #main-menu{
  margin-top: 0px;
  }
  .navbar-header{
    background-color: #e8e8e8;
    text-align: center;
  }
  #navbar{
    background-color: #f2f2f2;
  }
  .navbar-toggle{
    float: none;
  }
}



/*slide fade*/

.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}

.carousel-fade .carousel-control {
z-index: 2;
background-image: none;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
  margin: 0 auto;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/*slide*/
.carousel-control{
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.carousel-control.left{
  background: url(../image/slide-prev.png) center left no-repeat;
}
.carousel-control.right{
  background: url(../image/slide-next.png) center right no-repeat;
}
.carousel-inner>.item>.desc{
width: 60%;
margin: 0 auto;
padding: 10px;
background-color: rgba(255, 255, 255, 0.6);
position: absolute;
bottom: 80px;
left: 20%;
}
.carousel-inner>.item>.desc h3{
margin: 0 0 10px 0;
padding: 0;
letter-spacing: 5px;
color: #0187bf;
text-transform: uppercase;
text-shadow: 1px 1px #fff;
font-weight: bold;
}
.carousel-inner>.item>.desc p{
font-size: 15px;
letter-spacing: 1px;
color: #0187bf;
text-shadow: 1px 1px #fff;
font-weight: bold;
}
.carousel-indicators li{
width: 18px;
height: 18px;
margin: 1px 5px;
background-color: #fff;
border-color: #fff;
}
.carousel-indicators .active{
width: 18px;
height: 18px;
margin: 1px 5px;
background-color: #01A2DD;
border-color: #01A2DD;
}
@media screen and (min-width: 768px){
  .carousel-indicators {
      bottom: 10px;
  }
}
@media screen and (max-width: 768px){
  .carousel-inner>.item>.desc{
    display: none;
  }
}

/*categories hot*/
#cate-hot{
background-color: #01a2dd;
padding: 55px 0 75px 0;
}

.citem{
display: block;
position: relative;
border: 5px solid #9fe0f8;
overflow: hidden;
}
.citem img{
/*opacity: 1;*/
}
.citem .tit{
position: absolute;
top: 30%;
left: 0;
width: 100%;
height: 66px;
overflow: hidden;
padding: 7px 25px;
text-align: center;
line-height: 26px;
color: #0187bf;
background-color: rgba(255, 255, 255, 0.6); 
font-size: 19px;
font-weight: bold;
text-transform: uppercase;
}
.citem:hover{
border-color: #fff;
}
.citem:hover .tit{
/*background-color: rgba(1, 162, 221, 0.7); */
}
.citem:hover img{
/*opacity: 0.9;*/
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
-moz-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
@media screen and (max-width: 1199px){
  #cate-hot .cate-hot-item:nth-child(5){
    display: none;
  }
}
@media screen and (max-width: 991px){
  #cate-hot .cate-hot-item:nth-child(4){
    display: none;
  }
}
@media screen and (max-width: 767px){
  #cate-hot .cate-hot-item:nth-child(3){
    display: none;
  }
}

/*cate-list*/
#cate-list{
text-align: center;
margin: 30px 0 10px 0;
}
#cate-list ul, #cate-list ul li{
list-style: none;
margin: 0;
padding: 0;
}
#cate-list ul li{
display: inline-block;
margin: 0 15px;
}
#cate-list ul li a{
font-weight: border;
font-size: 20px;
text-transform: uppercase;
}
#cate-list ul li.active a, #cate-list ul li a:hover{
color: #01A2DD;
text-decoration: none;
}

/*product*/
.pitem .pwrap{
padding: 9px 8px 12px 8px;
background-color: #fff;
text-align: center;
}
.pitem .pwrap .img{
display: block;
overflow: hidden;
}
.pitem .pwrap .tit{
height: 33px;
overflow: hidden;
font-size: 15px;
text-align: center;
font-weight: bold;
margin: 10px 0 10px;
}
.pitem .pwrap .tit a{
line-height: 16px;
color: #01a2dd;
}
.pitem .pwrap p.desc{
height: 54px;
margin: 10px 0 0 0;
overflow: hidden;
color: #888;
font-size: 13px;
}
.pitem .pwrap span.madein{
font-weight: bold;
color: #888;
}
.pitem .pwrap .readmore{
margin-top: 10px;
}
.pitem .pwrap img:hover{
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
-moz-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.pitem .pwrap .tit:hover a{
color: #86C351;
text-decoration: none;
}


/*footer*/
#footer{
background-color: #01a2dd
}
#footer .fmid{
padding: 25px 0;
background-color: #fff
}
#footer .fleft, #footer .fright{
padding: 20px 0;
}
#footer .fleft *{
color: #fff;
}
#footer .fleft .head{
margin: 0;
padding: 0;
font-size: 19px;
letter-spacing: 1px;
text-transform: uppercase;
}
#footer .fleft ul{
list-style: none;
margin: 30px 0 0 0;
padding: 0;
}
#footer .fleft ul li{
list-style: none;
margin: 20px 0 0 0;
padding: 0;
font-size: 14px;
}
#footer .fleft ul li span{
margin-right: 10px;
}


/*left menu*/
.left-menu{
margin: 0;
padding: 0;
}
.left-menu li{
list-style: none;
padding: 0 0 0 20px;
}
.left-menu > li{
list-style: none;
background: url(../image/arrow-menu.png) 0px 9px no-repeat;
}
.left-menu > li.open{
background: url(../image/arrow-menu-sub.png) 2px 12px no-repeat;
}
.left-menu li.active, .left-menu li.active > a, .left-menu li.active > a > h3{
color: #40C1DE;
}
.left-menu li a{
}
.left-menu > li > a > *{
display: block;
padding: 7px 0 7px 20px;
font-size: 15px;
margin: 0 0 0 -20px;
}
.left-menu > li > ul{
padding-left: 0;
}
.left-menu > li > ul > li{
background: url(../image/arrow-menu-child.png) 0px 8px no-repeat;
}
.left-menu > li > ul > li > a{
display: block;
margin: 0 0 0 -40px;
padding: 4px 0 4px 40px;
font-size: 13px;
}
.left-menu > li > ul > li:first-child > a{
}
.left-menu > li > ul > li:last-child > a{
}
.left-menu > li > a.left-dropdown{
}
.left-menu li.active a, .left-menu li a:hover{
text-decoration: none;
color: #40C1DE;
}
.left-menu li.active a, .left-menu li a:hover *{
color: #40C1DE;
text-decoration: none;
}

/*main wrap*/
#main-wrap{
margin-bottom: 20px;
}
/*title*/
.title{
padding: 10px 12px;
background-color: #fff;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
}

/*box*/
.box{
padding: 8px 10px;
background-color: #fff;
}

/*paginator*/

.pagination>li>a, .pagination>li>span{
  border-color: #b3b3b3;
  padding: 8px 13px;
  font-size: 15px;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{
    background-color: #01a2dd;
    border-color: #0087b7;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus{
  border-color: #b3b3b3;
}

/*product detail*/

.product-info h1{
font-size: 24px;
margin: 0;
line-height: 30px;
}
.product-info .share{
margin: 10px 0 5px 0;
clear: both;
}
.product-info .share .fb-like{
float: left;
}
.product-info .share .g-plus{
float: left;
margin-left: 10px;
}
.product-info > span{
font-weight: bold;
color: #6f6b65;
}
.product-info > ul{
padding-left: 20px;
font-size: 13px;
margin-bottom: 15px;
}
.product-info > ul > li{
font-weight: bold;
color: #524f44;
}
.product-info > ul > li > span{
display: inline-block;
width: 110px;
}
.product-info > p.info{
margin-top: 5px;
padding-top: 5px;
font-size: 13px;
color: #777;
border-top: 1px solid #bbbbbb;
}
#product-content .nav>li>a{
margin-left: 10px;
}

/*breadcrumb*/
.breadcrumb{
margin: 0;
padding: 0;
background-color: transparent;
}


/*news list*/
#news-list .nitem{
padding: 10px;
background-color: #fff;
border: 1px solid #ece5e0;
}
#news-list .nitem .desc a.tit{
font-size: 17px;
color: #01A2DD;
font-weight: bold;
}
#news-list .nitem .desc a.tit:hover{
color: #01A2DD;
text-decoration: none;
}
#news-list .nitem .desc .info{
font-size: 15px;
margin: 10px 0;
max-height: 60px;
line-height: 20px;
color: #777;
overflow: hidden;
font-size: 13px;
}

#news-list .nitem .desc a.more{
}
#news-list .nitem .desc a.more:hover{
color: #01A2DD;
text-decoration: none;
}


/*contact*/
#contact .form-control{
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
border-radius: 0;
}
#contact .button {
display: block;
text-align: center;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 16px;
background-color: #01a2dd;
border: 1px solid #008abd;
}


/*banner bottom*/
#bn-bottom div:nth-child(1) a{
  float: right;
}
#bn-bottom div:nth-child(2) a{
  float: left;
}