@charset "utf-8";
/* CSS Document */

body{
	background-color: #fff;
	font-family:"arial";
}

/*++++++++++LAYOUT+++++++++++*/
div#wrapper {margin: 0px auto;}
div.container{width: 100%;}
header#header {width: 100%;}
div#banner{float: left;}
div#banner img{max-height: 150px;}
div#banner h1,
div#banner p{ margin: 0px; padding: 0px; height: 0px; text-indent: -9999px; }

div#lang{position: absolute; top: 25px; right: 15px;}

div#hotline{position: absolute; top: 114px; left: 77px;}
div#hotline p{margin: 0px; line-height: 43px; text-align: right; font-size: 16px;}
div#hotline a{color: #f00;font-size: 18px;}

div#social{position: absolute; bottom: 0px; right: 15px;}
div#social a{ margin-left: 10px;}

div#search{position: absolute; right: 25px; top: 3px; width: 250px;}
div#search p{margin:0;}
div#search input::-webkit-input-placeholder {font-size: 13px; color:#ccc;}
div#search input:-moz-placeholder {font-size: 13px; color:#ccc;}
div#search input::-moz-placeholder {font-size: 13px; color:#ccc;}
div#search input:-ms-input-placeholder {font-size: 13px; color:#ccc;}

section#slideshow{position: relative; z-index: 10; overflow: hidden;}
section#slideshow button{width: 40px; height: 70px; margin-top: -35px; border-color: transparent;}
section#slideshow button:hover{background-position: left bottom;}
section#slideshow .slick-prev{opacity: 0; left: -60px; background: url('../images/slide-control-left.png') no-repeat left top; background-size: 40px 139px;}
section#slideshow .slick-next{opacity: 0; right: -60px; background: url('../images/slide-control-right.png') no-repeat left top; background-size: 40px 139px;}
section#slideshow:hover .slick-prev{left: 10px; opacity: 1;}
section#slideshow:hover .slick-next{right: 10px; opacity: 1;}
section#slideshow .slick-slide{position: relative;}
section#slideshow .slick-desc{position: absolute;
    bottom: 10px; left: 0; right: 0px;
}
section#slideshow .slick-desc .container * {opacity: 0;}
section#slideshow .slick-desc h2{
    font-weight: 600;
    text-transform: uppercase;
    color: #000000;
    letter-spacing: -2px;
    font-size: 50px;
    padding-bottom: 10px;
    margin: 0px;
    text-align: center;
}

div.slick-index .slick-prev{ top: -10px; left: auto; right: 55px; }
div.slick-index .slick-next{ top: -10px; right: 15px; }

section#product-hot{background-color: #f0f0f0; padding-top: 30px;}
section#page-wrapper{position: relative; margin-top: 15px;}

div.i-title, div.i-content{float: left; width: 100%; margin-bottom: 15px;}

div.i-title{ height: 40px; margin-bottom: 15px; background: url('../images/bg_title_.jpg') repeat-x left center;}
div.i-title h1, div.i-title h2{float: left; width: 255px; margin: 0px; padding: 11px 40px 10px 15px; text-transform: uppercase; font-size: 17px; font-weight: 400; color: #fff; background: url('../images/bg_title.jpg') no-repeat left top; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
div.i-title h2 a{color: #fff;}
div.i-title h2 a:hover{color: #333;}
div.i-title ul{float: left; margin: 0; padding: 0; list-style: none;}
div.i-title ul li{float: left; padding-left: 16px; background: url('../images/line_nav_title.png') no-repeat left center;}
div.i-title ul li:first-child{background: none;}
div.i-title ul li a{display: block; padding: 9px 5px; font-size: 14px; text-align: center;}
div.i-title ul li.active a{color: #f00;}
div.i-title ul li.active a, div.i-title ul li.active a:hover{border-color: transparent; background-color: transparent;}

div#left .i-title{height: 50px; background: none; padding-top: 15px;}
div#left .i-content{margin-bottom: 0px; background-color: #d8f7d8;}
div#left .i-title h2{ margin-left: -5px; padding-left: 20px; height: 45px; }
div#left .wrap-shadow{ box-shadow: 0px 0px 2px #a8aba9; margin-bottom: 10px; }
div#left .wrap-shadow:after{ content:''; display: table; clear: both; }
div#left .box-news{ border-top: 1px dotted #ccc;}
div#left .box-news:first-child{ border-top: 0px dotted #ccc;}
div#left .box-news .name{ min-height: auto; margin-bottom: 0px; text-align: center; }

section#product-hot .i-title{border: 1px solid #e2e2e2; background-color: #fff;}
section#product-hot .i-title h2{color: #f00; padding-left: 50px; background: url('../images/icon_arrow_product_hot.jpg') no-repeat 15px center;}

section#partners h2.title{position: absolute; left: 30px; top: -14px; margin: 0px; padding: 6px 20px; background-color: #f00; color: #fff; text-transform: uppercase; font-size: 15px; border-radius: 0px 8px 0px 8px;}
section#partners div.i-content{padding: 35px 50px 15px; border: 1px solid #ccc; border-radius: 5px;
    background-color: #f2f2f2; 
    background: -webkit-linear-gradient(279deg, rgb(254, 254, 254) 0%, rgb(232, 232, 232) 100%);
    background: -o-linear-gradient(279deg, rgb(254, 254, 254) 0%, rgb(232, 232, 232) 100%);
    background: -ms-linear-gradient(279deg, rgb(254, 254, 254) 0%, rgb(232, 232, 232) 100%);
    background: -moz-linear-gradient(279deg, rgb(254, 254, 254) 0%, rgb(232, 232, 232) 100%);
    background: linear-gradient(171deg, rgb(254, 254, 254) 0%, rgb(232, 232, 232) 100%);

}
section#partners div.slick-partners .slick-prev{left: -25px !important;}
section#partners div.slick-partners .slick-next{right: -25px !important;}

div.tab-content .tab-pane {display: block;height: 0;overflow: hidden;}
div.tab-content .active {height: auto;overflow: visible;}

div.slick-adv .slick-slide img{max-width: 100%; height: auto;}

body#index .slick-slider .box-product{padding-top: 0px; padding-bottom: 0px;}

div.box-product{margin: 15px 0px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
div.box-product .image{position: relative; z-index: 5; margin: 0px; padding: 4px; border: 1px solid #e2e2e2; background-color: #fff; overflow: hidden; text-align: center; transition: all .2s ease;}
div.box-product .image img{width: 100%; height: auto; margin: 0px auto;}
div.box-product .name{margin: 10px 0px 0px; font-size: 15px; line-height: 1.2; text-align: center; text-overflow: ellipsis; overflow: hidden;}
div.box-product .name a{color: #636763;}
div.box-product .name a:hover{color: #337ab7;}

div.box-product .desc{margin: 15px 0px 0px;}
div.box-product .more{margin: 0px; text-align: right;}
div.box-product .code {margin: 0px;text-align: center;}
div.box-product .code span{ color: #35b21e; font-weight: 700; }
div.box-product .price {width: 100%;margin: 0px;text-align: center;}
div.box-product .price:after{content:''; display: block; clear: both;}
div.box-product .price span{}
div.box-product .price .price-old b{ color: #f00; text-decoration: line-through; font-size: 16px;}
div.box-product .price .price-sale{color: #f00; font-size: 15px; font-weight: 700;}
/*div.box-product:hover{transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1);}*/
div.box-product:hover .image{ border-color: #f00; }
div.box-product:nth-child(4n+1){clear: both;}

div.box-image{cursor: pointer; margin: 15px 0px;}
div.box-image:after{content: ''; position: absolute; top: 0px; bottom: 0px; left: 15px; right: 15px; background-color: rgba(0,0,0,0.3); z-index: 5;}
div.box-image img{width: 100%; height: auto;}
div.box-image h2{ position: absolute; display: block; width: 100%; text-align: center; top: 50%; left: 0px; right: 0px; margin: 0px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    font-size: 30px;
    padding: 15px;
    transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    z-index: 10;
}

div.box-news{padding: 15px;}
div.box-news .image{position: relative; text-align: center;}
div.box-news .image.col-xs-3{margin: 0px 15px 0px 0px; padding: 5px; border: 1px solid #e2e2e2;}
div.box-news .image.col-xs-5{margin: 0px 15px 0px 0px; padding: 5px; border: 1px solid #e2e2e2;}
div.box-news .image:hover{border-color: #f00;}
div.box-news .image img{width: 90%;height: auto; margin: 0px auto;}
/*div.box-news .image a {display: block;
    position: absolute;top: 50%;left: 50%;border: 2px solid #fff;color: #fff;height: 36px;width: 36px;
    font-size: 20px;text-align: center;line-height: 32px;font-weight: 100;margin-top: -18px;margin-left: -18px;opacity: 0;border-radius: 50%;
    -moz-border-radius: 50%;-webkit-border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;
    transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;
    transform: scale(0.2, 0.2);-webkit-transform: scale(0.2, 0.2);-moz-transform: scale(0.2, 0.2);-o-transform: scale(0.2, 0.2);-ms-transform: scale(0.2, 0.2);
}*/

div.box-news .name{margin-top: 0px; font-weight: 400; font-size: 14px; margin-bottom: 5px; line-height: 1.42857;}
div.box-news .date{color: #999; margin-bottom: 5px; font-size: 13px;}
div.box-news .date span{margin-right: 10px;}
div.box-news .date i{color: #B02900; margin-right: 5px; font-size: 13px;}
div.box-news .desc{text-align: justify;color: #666; margin-bottom: 5px;}
div.box-news .more{text-align: right;margin: 0px; font-style: italic;}
div.box-news .more a{}
div.box-news:after{content: ''; display: block; clear: both;}
div.box-news.col-xs-3:nth-child(4n+1){clear: both;}
div.box-news.col-xs-4:nth-child(3n+1){clear: both;}
div.box-news.col-xs-3 .name{text-align: center;}
/*
div.box-news.col-xs-3 .image:before {content: '';position: absolute;top: 10px; right: 10px;bottom: 10px;left: 10px;border: 1px solid #ccc;cursor: pointer;
    transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;
}

div.box-news.col-xs-3:hover .image:before{top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(0,0,0,0.5);}

div.box-news.col-xs-3:hover .image a{opacity: 1; transform: scale(1.5, 1.5);-webkit-transform: scale(1.5, 1.5);-moz-transform: scale(1.5, 1.5);-o-transform: scale(1.5, 1.5);-ms-transform: scale(1.5, 1.5);}
*/


p#date-post{color: #999; font-size: 14px;}
p#date-post span{margin-right: 10px;}
p#date-post i{color: #EB5858; margin-right: 5px; font-size: 13px;}

section#newsletter{margin-bottom: 60px;}
section#newsletter .col-md-4 h2{margin: 0px; padding: 8px 10px; text-align: center; color: #fff; font-size: 17px; text-transform: uppercase; background-color: #333;}
section#newsletter .col-md-4 div{border: 1px solid #ccc;border-top:0px;padding: 10px 15px 5px;}
section#newsletter .col-md-4 p{text-align: center; text-transform: uppercase;}

ul#accordion ,ul#accordion ul{width:100%;list-style: none; margin: 0px; padding: 0px;}
ul#accordion li{position: relative;border-top:1px dotted #ccc;margin: 0px; padding: 0px; z-index: 10;}
ul#accordion li:first-child{border-top: 0px;}

ul#accordion h4{margin: 0px; font-size: 15px;}
ul#accordion a{position: relative; display: block; padding: 9px 10px; font-weight: 400; z-index: 1;}
ul#accordion li.active > a, ul#accordion li:hover > a{color: #f00;}
ul#accordion ul li.active > a, ul#accordion ul li:hover > a{color: #f00;}
ul#accordion ul ul li.active > a, ul#accordion ul ul li:hover > a{color: #f00;}

ul#accordion > li > i, ul#accordion > li > ul > li > i{position: absolute; width: 30px; height: 33px; right: 0px;top: 0px; line-height: 37px; z-index: 10; text-align: center; cursor: pointer;}
ul#accordion ul a{line-height: 1.3em; text-transform: none;}
ul#accordion ul a i{position: absolute; right: auto; left: 28px; top: 10px;}
ul#accordion ul ul a i{right: auto; left: 20px; top: 9px;}
ul#accordion ul a{padding-left: 50px;}
ul#accordion ul ul a{padding-left: 30px;}

ul#accordion ul{position: absolute; left: 100%; top: 2px; display: none; background-color: #fff;}
ul#accordion li:hover > ul{display: block;-webkit-animation-name: fadeIn; animation-name: fadeIn;}

ul.pagination li.active a, ul.pagination li a:hover{color: #fff; border-color: #3b5998 !important; background-color: #3b5998 !important;}
ul.pagination a{color: #222;padding: 6px 14px;}

ul.nav-index{list-style: none;padding: 10px 0px;margin: 0px;}
ul.nav-index li{padding-bottom: 10px;}
ul.nav-index li h3{font-size: 15px;margin: 0px; font-weight: 600;}
ul.nav-index li h3 a{display: block; color: #b83400; background-color: #f2f2f2; padding: 7px 10px;}
ul.nav-index li h3 a:hover{color: #f00; background-color: #ccc;}
ul.nav-index li h3 a i{margin-right: 10px;}
ul.nav-index li div.detail{display: none; padding: 15px; margin: 15px 0px; border: 1px solid #ccc;}
ul.nav-index li.active div.detail{display: block;}

ul.nav-left{list-style: none; padding: 0px;}
ul.nav-left li{ border-top: 1px dotted #ccc;}
ul.nav-left li:first-child{ border-top: 0px dotted #ccc;}
ul.nav-left li.active a{color: #f00;}
ul.nav-left h4{margin: 0px; font-size: 15px;}
ul.nav-left a{display: block; padding: 7px 0px;font-weight: 400;}

ul.other-nav{list-style: none; margin: 0px; padding: 0px;}
ul.other-nav li{border-top: 1px dotted #ccc;}
ul.other-nav li:first-child{border-top: 0px;}
ul.other-nav h2{font-size: 15px; margin: 0px;}
ul.other-nav a{display: block; font-weight: 600; padding: 5px 0px;}
ul.other-nav i{margin-right: 10px;}

div.grid{margin-bottom: 30px; overflow: hidden;}
div.grid .grid-item{float: left; padding: 0px 15px; margin-bottom: 30px;}
div.grid .grid-item img{max-width: 100%; height: auto;}
div.grid .grid-item a{position: absolute; display: block; width: 100%;font-size: 2.3em;text-transform: uppercase;color: #fff;font-weight: 600;text-shadow: 1px 0 1px #000;text-align: center; top: 45%;z-index: 20;}
div.grid .grid-item:hover a{top: 50%;}

section#logo{position: relative; z-index: 10;height: 200px; background: url('../images/whitestripes-new.png') repeat-x left center;}
section#logo img{position: absolute; width: 320px; height: 320px; top:50%; left: 50%; margin-top: -160px; margin-left: -160px;}

section#logo a{ display: block; text-align: center; background-color:#f9f9f9; text-transform: uppercase; padding: 10px 25px;
    border:1px solid #e0e0e0;
    color:#a2a2a2;
    text-shadow:1.6px 1.6px 0 #fff;
    -moz-box-shadow:0 0 0 6px #eeeeee, 0 0 0 7px #ffffff;
    -webkit-box-shadow:0 0 0 6px #eeeeee, 0 0 0 7px #ffffff;
    box-shadow:0 0 0 6px #eeeeee, 0 0 0 7px #ffffff;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#f9f9f9),color-stop(1,#e9e9e9));
    background:-moz-linear-gradient(top,#f9f9f9 5%,#e9e9e9 100%);
    background:-webkit-linear-gradient(top,#f9f9f9 5%,#e9e9e9 100%);
    background:-o-linear-gradient(top,#f9f9f9 5%,#e9e9e9 100%);
    background:-ms-linear-gradient(top,#f9f9f9 5%,#e9e9e9 100%);
    background:linear-gradient(to bottom,#f9f9f9 5%,#e9e9e9 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#e9e9e9',GradientType=0);
}

nav#navbar-bottom{position: relative;width: 100%; height: 40px; z-index: 1000; background-color: #B02900;}

nav#navbar-bottom ul{width: 100%; height: 40px; list-style: none; margin:0; padding:1px 15px 0px; text-align:center;}
nav#navbar-bottom ul > li{position: relative; display: inline-block; }
nav#navbar-bottom ul > li:first-child{background: none;}
nav#navbar-bottom ul a{position: relative; z-index: 15; display: block; font-size: 15px; color: #fff; font-weight: 600; padding: 9px 19px; text-transform: uppercase;}
nav#navbar-bottom ul li a i{display: none;}
nav#navbar-bottom ul > li.active > a, nav#navbar-bottom ul > li:hover > a{ color: #333; background-color: #fff; }

footer#footer {}
footer#footer #information{padding: 15px; background: #ccc;}
footer#footer .title{font-size: 16px; font-weight: bold; margin-top: 0px; text-transform: uppercase;}
footer#footer .title.company{font-size: 20px; color: #f00;}
footer#footer ul{list-style: none; padding: 0; margin: 0;}
footer#footer ul h3{margin: 0px; font-size: 15px;}
footer#footer ul a{display: block; padding: 2px 0px;}
footer#footer #social a{ margin-right: 10px;}
footer#footer #copy-right{padding: 10px 10px 8px; background-color: #999;}
footer#footer #copy-right p{display: inline-block; padding-left: 10px; margin: 0px;}

div#product-img{position: relative;}
div#product-img img{max-width: 100%; height: auto;}
div.product-img-large{ margin-bottom: 15px; border: 1px solid #ccc; }
div.product-img-thumb{ border: 1px solid #ccc; }
div.product-img-thumb p{padding: 10px 5px; margin: 0px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s;}
div.product-img-thumb .slick-slide p:hover{opacity: 1 !important;}
div.product-img-thumb .slick-slide p img{max-width: 100%; height: auto;}

div#product-content{font-size: 15px;}
div#product-content ul{list-style: none; padding: 0px; margin: 0px;}
div#product-content ul li{padding: 10px 0px; border-top: 1px dotted #ccc;}
div#product-content ul li h3{text-transform: uppercase; margin-top: 0px;}
div#product-content ul li:first-child{padding-top: 0px; border-top: 0px;}
div#product-content ul li span{display: inline-block; width: 100px;}
div#product-content ul .price{margin: 0px;}
div#product-content ul .price-old b{text-decoration: line-through;}
div#product-content ul .price-sale b{color: #f00;}


div#product-order{border: 1px solid #ccc; padding: 20px 30px 10px; margin-bottom: 30px;}
div#product-order .share.icon-social{display: inline-block; text-align: center; width: 35px; height: 35px; line-height: 35px; background-color: #ccc; border-radius: 50%;}

div#product-ship{border: 1px solid #ccc; padding: 20px 30px 10px; background-color: #f7f7f7;}

div#contact-content h1, div#contact-content h2, div#contact-content h3, div#contact-content h4, div#contact-content h5, div#contact-content h6{margin-top: 0px;}

div#map-canvas{width: 100%; height: 400px;}

.tooltip{white-space: nowrap;}
.modal {text-align: center;}
.modal:before {content: '';display: inline-block; height: 100%; vertical-align: middle;}
.modal-dialog{display: inline-block; width: 90%; vertical-align: middle; text-align: left;}
.modal-content{overflow: hidden;}
.modal-content input.form-control{}
.modal-header{background-color: #333;padding: 7px 10px;}
.modal-header h4{color: #fff; font-size: 15px; font-weight: 500; text-transform: uppercase;}
.modal-header .close{margin: 0px; color: #fff;}
.modal-footer{padding: 7px 15px;}

#notifyModal .modal-body{color: #f00; font-style: italic;}

@media (min-width:992px){
    div#wrapper{width: 1200px;}
    nav#navbar{position:relative; z-index: 1000; height: 40px; margin-bottom: 15px;}
    nav#navbar button#btn-menu{display: none;}
    nav#navbar ul{float: left; width: 100%; height: 40px; list-style: none; margin: 0px; padding: 0px; background-color: #3c763d;}
    nav#navbar ul > li{position: relative; float: left; padding-bottom: 10px; background: url('../images/line_nav.png') no-repeat left top;}
    nav#navbar ul > li:first-child{background: none;}
    nav#navbar ul a{position: relative; z-index: 15; display: block; text-transform: uppercase; font-size: 14px; font-weight: 500; color: #fff; padding: 11px 25px 9px;}
    nav#navbar ul li a i{display: none;}
    nav#navbar ul li.active > a, nav#navbar ul li:hover > a{ color: #fff; background-color: ##5cb85c;}

    nav#navbar ul ul:before{content: ''; display: none; position: absolute; border-left: 7px solid transparent ; border-right:7px solid transparent ; border-bottom: 7px solid rgba(0,0,0,0.2); top: -6px; left: 23px;}
    nav#navbar ul ul:after{content: ''; display: none; position: absolute; border-left: 6px solid transparent ; border-right:6px solid transparent ; border-bottom: 6px solid rgba(0,0,0,0.5); top: -5px; left: 24px;}
    nav#navbar ul ul ul:before{content: ''; display: none; position: absolute; border-top: 7px solid transparent ; border-bottom:7px solid transparent ; border-right: 7px solid rgba(0,0,0,0.2); left: -13px; top: 23px;}
    nav#navbar ul ul ul:after{content: ''; display: none; position: absolute; border-top: 6px solid transparent ; border-bottom:6px solid transparent ; border-right: 6px solid rgba(0,0,0,0.5); left: -12px; top: 24px;}

    nav#navbar ul ul, nav#navbar ul ul ul{position: absolute;display: none; top: 39px;left: 0px;width: 200px;height: auto; margin:0; padding: 0px; z-index: 30;}
    nav#navbar ul ul ul{top: 0px; left: 195px; z-index: 40;}
    nav#navbar ul ul li{width: 100%; padding: 0px; background: none; border-top: 1px solid #f2f2f2;}
    nav#navbar ul ul li:first-child{border-top: 0px;}
    nav#navbar ul ul li a{font-size: 14px; font-weight: 400; color: #fff; padding: 5px 10px; background: none; text-shadow: none; text-transform: capitalize;}
    nav#navbar ul ul li:hover > a{ color: #000;}
    nav#navbar ul li:hover > ul{display: block;-webkit-animation-name: fadeIn; animation-name: fadeIn;}
    /*nav#navbar ul ul li:hover > ul{display: block; -webkit-animation-name: fadeInRightSmall; animation-name: fadeInRightSmall;}*/

    div#info{float: right;}

    div.box-product.col-md-3:nth-child(4n+1){clear: both;}
    div.box-product.col-md-4:nth-child(3n+1){clear: both;}

    div.box-news.col-md-3:nth-child(4n+1){clear: both;}
    div.box-news.col-md-4:nth-child(3n+1){clear: both;}

}

@media (max-width: 991px){
    nav#navbar{position:relative; width: 100%; margin-bottom: 15px; z-index: 10; background-color: #f2f2f2; }
    nav#navbar button#btn-menu{margin: 7px 0px; padding: 6px 12px; border: 0px; color: #fff; border-radius: 0px; }
    nav#navbar ul ,nav#navbar ul ul{position: relative; width:100%;list-style: none; margin: 0px; padding: 0px; z-index:100; background-color: #fff;}
    nav#navbar ul{display: none; margin-bottom: 15px;}
    nav#navbar ul li{position: relative;border-top: 1px dotted #ccc;margin: 0px; padding: 0px;}
    nav#navbar ul li:first-child{border-top: transparent;}
    
    nav#navbar ul a{position: relative; display: block; padding: 8px 10px; font-size: 14px; font-weight: 400;color: #000; z-index: 1;}
    nav#navbar ul li.active > a, nav#navbar ul li:hover > a{color: #fff; background-color: #666;}
    nav#navbar ul ul li.active > a, nav#navbar ul ul li:hover > a{color: #fff; background-color: #999;}
    nav#navbar ul ul ul li.active > a, nav#navbar ul ul ul li:hover > a{color: #fff; background-color: #ccc;}

    nav#navbar ul > li > i{position: absolute; width: 34px; height: 34px; right: 2px;top: 2px; line-height: 33px; z-index: 10; text-align: center; cursor: pointer;}
    nav#navbar ul ul a{line-height: 1.3em; text-transform: none;}
    nav#navbar ul ul a i{position: absolute; right: auto; left: 5px; top: 10px;}
    nav#navbar ul ul ul a i{right: auto; left: 20px; top: 10px;}
    nav#navbar ul ul a{padding-left: 25px;}
    nav#navbar ul ul ul a{padding-left: 40px;}

    div#search{position: absolute; left: auto; right: 15px; top: 7px;}
    div#search input, div#search button{ height: 32px; }
}

@media (min-width:768px) and (max-width: 991px){
    div.box-product.col-sm-4:nth-child(3n+1){clear: both;}
    div.box-news.col-sm-4:nth-child(3n+1){clear: both;}
}

@media (min-width:401px) and (max-width: 767px){
    div.box-product.col-xs-6:nth-child(2n+1){clear: both;}
    div.box-news.col-xs-6:nth-child(2n+1){clear: both;}
}

@media (max-width:400px){
    header#header div#hotline span{display: none;}
    div.box-image, div.box-product, div.box-news{width: 100%;}
    footer#footer .col-xs-6{width: 100%; margin-top: 15px;}
}

@media (max-width:350px){
    div#search{width: 200px;}
}

/*======================CSS3================*/

.tranSlateTop {
	animation:tranSlateTop 1s infinite;
	-webkit-animation: tranSlateTop 1s infinite;
	-moz-animation: tranSlateTop 1s infinite;
	-o-animation: tranSlateTop 1s infinite;

}
@-webkit-keyframes tranSlateTop {
	from{ -webkit-transform: rotate(270deg) translateX(0px);}
	50%{-webkit-transform: rotate(270deg) translateX(5px);}
	to{-webkit-transform: rotate(270deg) translateX(0px);}
}
@-moz-keyframes tranSlateTop {
	from{ -moz-transform: rotate(270deg) translateX(0px);}
	50%{-moz-transform: rotate(270deg) translateX(5px);}
	to{-moz-transform: rotate(270deg) translateX(0px);}
}
@-o-keyframes tranSlateTop {
	from{ -o-transform: rotate(270deg) translateX(0px);}
	50%{-o-transform: rotate(270deg) translateX(5px);}
	to{-o-transform: rotate(270deg) translateX(0px);}
}

::-webkit-input-placeholder {font-size: 15px; color:#666;}
:-moz-placeholder {font-size: 15px; font-size: 14px; color:#666;}
::-moz-placeholder {font-size: 15px; color:#666;}
:-ms-input-placeholder {font-size: 15px; color:#666;}
.transitionAll{transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out;}
.transitionAll_1s{transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;}