/*RESPONSIVE*/
@media screen and (max-width: 1170px){
    .wp-inner{ width: 100%; padding-left: 10px; padding-right: 10px;}
}

@media screen and (max-width: 1024px){
    /*HEADER*/
    #head-body #search-wp{ padding: 22px 0px 22px 90px;}
    #advisory-wp{ padding: 15px 10px 15px 50px;}
    #cart-wp{ margin-left: 10px;}
    #btn-respon{ display: block; margin-left: 35px; font-size: 21px; padding: 27px 0px; color: #fff; cursor: pointer;}
    #site{ position: relative; overflow: hidden;}
    #container{ position: relative; right: 0px; transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -o-transition: all .5s ease;}
    #menu-respon{  display: block; position: absolute; top: 0; right: -250px; width: 250px; height: 100%; background: #ddd; transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -o-transition: all .5s ease;}
    #site.show-respon-menu #container{ right: 250px;}
    #site.show-respon-menu #menu-respon{ right: 0;}
    #main-menu-respon .sub-menu{ display: none;}
    #menu-respon .logo{ display: block; padding: 10px 0px; color: #07ADC6; text-align: center; text-transform: uppercase; font-family: 'Roboto Medium'; font-size: 24px; background: #F4FCFF;}
    #menu-respon .logo img{ display: inline-block;}
    #main-menu-respon li{ position: relative;}
    #main-menu-respon li a{ display: block; padding: 12px 15px; color: #000; line-height: normal; text-transform: uppercase;}
    #main-menu-respon > li > a{ border-top: 1px solid #fff; border-bottom: 1px solid #979797;}
    #main-menu-respon li .sub-menu li a{border-top: 1px solid #fff; border-bottom: 1px solid #979797; padding-left: 30px;}
    #main-menu-respon li .sub-menu li .sub-menu li a{ padding-left: 45px;}
    #main-menu-respon li .sub-menu li .sub-menu li .sub-menu li a{ padding-left: 60px;}
    #main-menu-respon > li:last-child > a, #main-menu-respon li:last-child .sub-menu > li:last-child > a{ border-bottom: none;}
    #main-menu-respon > li:hover > a, #main-menu-respon .sub-menu li a:hover{ background-color: #cacaca;}
    #main-menu-respon li .arrow{ position: absolute; top: 0px; right: 0px; padding: 14px 16px; cursor: pointer;}
    #main-menu-respon > li.open > .arrow, #main-menu-respon .sub-menu > li.open > .arrow{ transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);}
    #main-menu-respon li.open > .sub-menu{ display: block;}
    #cart-wp{ display: none;}
    #cart-respon-wp{ display: block;}
    /*MAIN CONTENT*/
    .sidebar{ display: none;}
    .main-content{ width: 100%; float: none; margin-left: 0;}
    /*DETAIL PRODUCT*/
    .thumb-wp{ display: none;}
    .thumb-respon-wp{ display: block;}
    /*FOOTER*/

    /*CHECK OUT*/
    #to-checkout-wp .shop-table tbody tr td{ white-space: nowrap;}
}

@media screen and (max-width: 800px){
    /*HEADER*/
    #head-body #search-wp{ padding: 22px 0px 22px 50px;}
    #head-body #search-wp #s{ width: 325px; padding: 8px 15px;}
    #head-body #search-wp #sm-s{ padding: 10px 15px;}
    #advisory-wp{ display: none;}
    #head-body #logo{ padding: 25px 0px; font-size: 28px;}
    #head-body #search-wp{ padding: 20px 0px 20px 50px;}
    #head-body #search-wp #s{ line-height: 18px;}
    #head-body #search-wp #sm-s{ line-height: 14px;}
    #cart-wp i{ font-size: 18px;}
    /*MAIN CONTENT*/
    #list-product-wp .section-detail .list-item li{ width: 32.666666666666664%; margin-right: 1%;}
    #list-product-wp .section-detail .list-item li:nth-child(4n){ margin-right: 1%!important;}
    #list-product-wp .section-detail .list-item li:nth-child(3n){ margin-right: 0}
    /*DETAIL PRODUCT*/
    #detail-product-wp .info{ padding-left: 25px;}
    #detail-product-wp .info .product-name{ line-height: normal;}
    /*FOOTER*/
    #footer-wp #foot-body .block{ width: 50%; height: 200px;}
    .policy{ padding-left: 0!important;}
    /*CART*/
    .table-responsive{ width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd;}
    .table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td{ white-space: nowrap; display: table-cell; vertical-align: middle;}
    .cart-page #cart-wp table thead tr td{ font-size: 13px;}
    .cart-page #to-checkout-wp table{ margin: 15px 0px;}
    .cart-page #cart-wp table tfoot tr td #actions-cart a{ font-size: 12px; padding: 0px 15px;}
    .cart-page #to-checkout{ width: 50%; padding: 30px 15px;}
    /*CHECK OUT*/
    #customer-info-wp .form-row{ padding-bottom: 15px;}
    .checkout-page #main-content .section:nth-child(2){ padding-left: 20px;}
    #customer-info-wp .form-row .form-col{ padding-right: 10px;}
}

@media screen and (max-width: 600px){
    /*HEADER*/
    #search-wp{ display: none;}
    /*MAIN CONTENT*/
    #list-product-wp .section-detail .list-item li{ width: 49%; margin-right: 2%; margin-bottom: 2%;}
    #list-product-wp .section-detail .list-item li:nth-child(3n){ margin-right: 2%;}
    #list-product-wp .section-detail .list-item li:nth-child(4n){ margin-right: 2%;}
    #list-product-wp .section-detail .list-item li:nth-child(2n){ margin-right: 0!important;}
    /*DETAIL PRODUCT*/
    #detail-product-wp .add-cart{ font-size: 14px;}
    /*DETAIL BLOG*/
    #detail-blog-wp .section-title{ font-size: 21px;}
    /*FOOTER*/
    .menu-ft .title, #newfeed .title, #info-company .title{ margin-bottom: 15px;}
    #footer-wp #foot-body .block{ width: 100%; height: auto!important; padding-left: 0!important; margin-bottom: 35px;}
    /*DETAIL PRODUCT*/
    #same-category-wp .section-title:before, #same-category-wp .section-title:after{ display: none;}
    /*CART & CHECK OUT*/
    .cart-page .inf-cart-wp table tfoot tr td.actions{ padding: 15px 0px;}
    .table-responsive .table thead tr td, .table-responsive .table tfoot tr td{ padding: 15px 25px;}
    .cart-page #to-checkout{ width: 50%;}
    .cart-page .cart-wp table tbody tr td{ padding: 10px 0px;}
    #customer-info-wp .form-row{ padding-bottom: 20px;}
    #customer-info-wp .form-row:last-child{ padding-bottom: 0!important;}
    .checkout-page #main-content .section:nth-child(2){ padding-left: 0px; margin-top: 20px;}
    .checkout-page .section{ width: 100%!important;}
    #customer-info-wp{ margin-right: 0!important; padding-bottom: 50px;}
    #order-review-wp{ margin-left: 0!important;}
    /*DETAIL NEWS*/
    #list-news-wp .thumb{ width: 40%;}
    #list-news-wp .info{ width: 60%;}
    #list-news-wp .info .title{ font-size: 21px; line-height: 26px;}
    #list-news-wp .info .desc{ line-height: 24px;}
}

@media screen and (max-width: 414px){
    /*HEADER*/
    #main-menu-wp{ display: none;}
    /*MAIN CONTENT*/
    .home-page#main-content-wp{ padding-top: 0;}
    #slider-wp{ display: none;}
    #support-wp .section-detail .list-item li{ width: 100%; margin-bottom: 25px;}
    #support-wp .section-detail .list-item li:before{ display: none; }
    .home-page #main-content-wp{ padding-top: 0;}
    #main-content-wp{ padding-bottom: 50px;}
    #feature-product-wp .list-item li .action a, #list-product-wp .list-item li .action a, #same-category-wp .list-item li .action a{ padding: 2px 5px;}
    #feature-product-wp .list-item li .price, #list-product-wp .list-item li .price, #same-category-wp .list-item li .price{ font-size: 12px!important;}
    #feature-product-wp .list-item li .product-name, #list-product-wp .list-item li .product-name, #same-category-wp .list-item li .product-name{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -moz-line-clamp: 1;
        -o-line-clamp: 1;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        max-height: 100%;
        overflow: hidden;
    }
    /*DETAIL PRODUCT*/
    .thumb-respon-wp{ width: 100%!important; margin-bottom: 15px;}
    #detail-product-wp .info{ padding-left: 0!important; width: 100%;}
    #detail-product-wp .info .num-product{ margin-bottom: 20px;}
    #detail-product-wp .info .price{ margin-bottom: 25px;}
    #detail-product-wp .add-cart{ padding: 10px 25px;}
    /*BLOG*/
    #list-blog-wp .info .title{ font-size: 16px; line-height: 24px; font-family: 'Roboto Medium';}
    #list-blog-wp .info .desc{ line-height: 21px;}
    #list-blog-wp .info{ padding-left: 15px;}
    /*DETAIL BLOG*/
    #detail-blog-wp .section-title{ font-size: 18px; line-height: 24px;}
    /*CHECKOUT*/
    #customer-info-wp .form-row .form-col input[type="text"], #customer-info-wp .form-row .form-col input[type="email"], #customer-info-wp .form-row .form-col input[type="tel"], #customer-info-wp .form-row:nth-child(3) .form-col textarea{ padding: 5px 10px;}
    #customer-info-wp .form-row{ padding-bottom: 15px;}
    /*FOOTER*/
    #footer-wp #foot-body{ padding: 30px 0px;}
    .menu-ft .title, #newfeed .title, #info-company .title{ font-size: 21px;}
}

@media screen and (max-width: 375px){
    /*HOME*/
    #list-product-wp .section-detail .list-item li{ width: 100%; margin-right: 0!important; margin-bottom: 4%;}
    #list-product-wp .section-detail .list-item li:last-child{ margin-bottom: 0!important;}
    #feature-product-wp .list-item li .action a, #list-product-wp .list-item li .action a, #same-category-wp .list-item li .action a{ padding: 5px 20px;}
    /*CATEGORY PRODUCT*/
    .filter-wp form select{ padding: 5px;}
    .filter-wp form button{ padding: 3px 10px;}
    /*FOOTER*/

    /*DETAIL PRODUCT*/
    #menu-price-fixed{ height: 115px;}
    #menu-price-fixed .info-product{ width: 100%; margin-bottom: 15px;}
    #menu-price-fixed .info-product .detail, #menu-price-fixed .function-button{ float: left!important;}
    #menu-price-fixed .function-button a{ font-size: 14px; padding: 10px 15px;}
    #tab-menu li a{ font-size: 13px; padding: 15px;}
    #detail-product-wp{ padding-top: 15px;}
    .detail-product-page #add-to-cart, .detail-product-page #buy-now{ font-size: 13px; padding: 13px 23px;}
    /*CART & CHECKOUT*/
    .place-order-wp input[type="submit"]{ padding: 15px 30px;}
}