/**
 * [media description]
 * @param  {[type]} max-width: 1199px        [description]
 * @return {[type]}            [description]
 */
@media (max-width: 1199px) {
    #f-banner {width: 550px}
    .pro-list .pro img, .list .pro img {}
    .pro-list .pro {width: calc((100% - 60px)/3);}
    .contact, .googlemap {width: 100%;margin-right:0;margin-left: 0}
    .googlemap {margin-top: 0;margin-bottom: 20px}

    .ct-pro {width: 250px}
    .box-sp {width: calc(100% - 270px);}
    #main-nav::after, #main-nav::before
    {
        display: none;
    }
    .dang_ky_fix
    {
        display: none;
    }
    .info-top h2
    {
        font-size: 22px;
    }
    .info-top .slogan
    {
        display: none;
    }
}
/**
 * [media description]
 * @param  {[type]} max-width: 991px         [description]
 * @return {[type]}            [description]
 */
@media (max-width: 991px) {

    #pull{ display:block; display: inline-block;}
    #pull img {
        display: block;
        margin: 7px 14px 7px 14px;
    }
    
    #main-nav ul{ display:none; position:absolute;top: 50px; left:0; z-index:10001;width: 94%;}
    #main-nav ul li {
        float:none;
        background: rgba(40, 40, 40, 0.9);
        border-bottom: 1px solid rgba(255,255,255,.2);
        width: 100%;
        border-right: none;
    }
    #main-nav ul li a{ display:block; color:#ccc;}
    #main-nav ul ul li {background: rgba(40, 40, 40,.85);}
    #main-nav ul ul {position: static;}
    #main-nav ul ul {width: 100%}
    #logo {
        position: absolute;
        top: 0;
        left: 60px;
        z-index: 99;
    }
    #logo img {text-align: center;height: 49px;display: block;}

    #f-banner {display: none}
    .hotline {
        position: absolute;
        right: 50px;
        z-index: 99;
        top: 15px;
        height: auto;
    }
    .hotline .tit {display: none;}
    .hotline .phone {font-size: 16px;color: #eee;text-shadow: none;}
    .sub-top {height: 0;}
    .left {display: none}
    .right {width: calc(100%);}
    .pro-list .pro {width: calc((100% - 80px)/4);}
    #slide {display: none}

    .ct-pro {width: 300px}
    .box-sp {width: calc(100% - 320px);}
    #main-nav .cart-info {
    right: 15px;
    bottom: 7px;
}
}
/**
 * [media description]
 * @param  {[type]} max-width: 767px         [description]
 * @return {[type]}            [description]
 */
@media (max-width: 767px) {
    .pro-list .pro , .list-sp .pro-list .pro{width: calc((100% - 40px)/2);}

    .seo {float: none;width: 100%;text-align: center;}
    .r-f {float: none;width: 100%;text-align: center;}
    .g-search {
        margin-left: 0;
        display: none;
    }
    .pro-list .pro img, .list .pro img {height: auto;}

    .ct-pro {width: 100%;float: none;}
    .box-sp {width: 100%;float: none;}
    .view-block {width: 100px}
    .large_img {width: calc(100% - 120px)}
    .pire-btn a {margin-top:5px;}

    .checkout-form label 
    {
        display: block;
        margin-bottom: 3px;
        width: auto;
    }
    .checkout-form input[type='text'], .checkout-form input[type='tel'], .checkout-form textarea 
    {
        width: calc(100% - 12px);
    }
    #footer .wp40, #footer .wp20
    {
        width: 100%;
        float: none;
    }
    .hotline_menu
    {
        display: none;
    }
    .tamtinh .tt
    {
        margin-top: 30px;
    }
    #da-slider
    {
        height: 200px !important;
    }
    #main-nav
    {        
        position: relative;
    }

    .form-search {
        position: absolute;
        margin-top: 10px;
        top: -57px;
        right: 0;
        z-index: 99;
    }
    .form-search .form-control
    {
        width: 250px;
    }
    .logo 
    {
        text-align: center;
    }
    .logo img 
    {
        width: 120px;
    }
    .slogan
    {
        margin-bottom: 20px;   
    }
    .form-search
    {
        margin-bottom: 20px;
    }
    .desktop
    {
        display: none !important;
    }
    .mobile
    {
        display: block !important;
    }
    .tencty
    {
        font-size: 24px;
    }
    .slogan
    {
        font-size: 18px;
    }
    .car-item .wp10
    {
        width: 15%;
    }
    .car-item .wp10.gia-wp
    {
        width: 30%;
    }
    .car-item .wp30
    {
        width: 50%;
    }
    .tamtinh .wp50
    {
        width: 100%;
        float: none;
    }
    .icon_delete a
    {
        background: none !important
    }
    .title_tt
    {
        font-size: 24px;
    }
    .cate-gird .owl-carousel .owl-item img {
        height: 100%;
    }
    .title_tt::after {
        left: 30%;
        width: 40%;
    }
    .nav-tabs > li > a {
        font-size: 14px;
        text-transform: uppercase;
        font-family: "Roboto Condensed";
        padding: 10px 10px;
    }
    .row {
        margin-right: 1px;
        margin-left: 0;
    }
    #main-nav ul ul li
    {
        width: 50%;
    }
    #main-nav ul ul
    {
        position: absolute;
    }
    #main-nav ul li 
    {
        position: relative;
    }
    #nav
    {
        overflow: visible !important;
    }
    .pro-list .pro {width: calc((100% - 40px)/2);}
    .dt-slider {
        margin: 20px -43px 20px 0px;
    }
}
/**
 * [media description]
 * @param  {[type]} max-width: 767px         [description]
 * @return {[type]}            [description]
 */
@media (max-width: 620px) {
    #header .col-md-3, #header .col-md-9 
    {
        padding-left: 0;
        padding-right: 0;
    }
    
    .search select {display: none}
    .search input[type="text"] {width: calc(100% - 105px) !important;}

    .view-block {width: 60px;}
    .large_img {width: calc(100% - 80px)}
    .checkout_box .item img {width: 100%;margin-right: 0 !important;}
    
    .pro-list .pro {
            width: calc((100% - 40px)/2);
        }
    .form-loc .wp20, .form-loc .wp30, .form-loc .wp10
    {
        width: 100%;
        margin-top: 10px;
        text-align: left;
    }
    .form-loc .field-f .wp30
    {
        width: 30%;
    }
    .nav-tabs > li > a {
        font-size: 13px;
        text-transform: uppercase;
        font-family: "Roboto Condensed";
        padding: 10px 3px;
    }
    .pro .ma
    {
        display: none;
    }
    .info-item {
        padding: 5px;
        font-size: 12px;
    }
    .pro .pro-div h2 a, .pro-div p
    {
        font-size: 14px;
    }
    .list-pro li
    {
        width: 100%;
        margin-bottom: 20px;
    }
    .list-pro li .wp50
    {
        width: 100%;
    }
    .item_sp img
    {
        width: 100%;
    }
    .page-home
    {
        overflow: visible;
    }
    .item_sp.chan .img-cate, .item_sp.chan  .nd-cate, .item_sp.le .img-cate, .item_sp.le  .nd-cate
    {
        float: none !important;
    }
    .nivo-caption .tittle-sl
    {
        font-size: 18px;
    }
    .nivo-caption .nd-sl
    {
        font-size: 14px;
    }
}
/**
 * [media description]
 * @param  {[type]} max-width: 413px         [description]
 * @return {[type]}            [description]
 */
@media (max-width: 413px) {
    .qc {display: none}
    .contact label {width: 100%;margin-bottom: 3px}
    .contact input[type="text"],.contact input[type="email"],.contact input[type="tel"], .contact textarea {
        width: calc(100% - 12px);
    }
    .navigation {display: none}
    .googlemap {display: none}

    .checkout-right {display: none}
    .checkout-left {width: 100%;}
    
    .pro-list .pro img, .list .pro img {
        height: auto;
    }
    .pire h4
    {
        margin-top: 10px;
    }
    #da-slider
    {
        height: 130px !important;
    }
    .pire-btn a {font-size: 14px;}
}
/**
 * [media description]
 * @param  {[type]} max-width: 319px         [description]
 * @return {[type]}            [description]
 */
@media (max-width: 320px) {
    .pire-btn a {
        font-size: 13px;
    }
    .hover-div
    {display: none !important;}
}

/* // ------------------------------------- */

/**
 * [media description]
 * @param  {[type]} min-width: 320px         [description]
 * @return {[type]}            [description]
 */

/**
 * [media description]
 * @param  {[type]} min-width: 414px         [description]
 * @return {[type]}            [description]
 */
@media (min-width: 414px) {

}
/**
 * [media description]
 * @param  {[type]} min-width: 600px         [description]
 * @return {[type]}            [description]
 */
@media (min-width: 568px) {

}
/**
 * [media description]
 * @param  {[type]} min-width: 768px         [description]
 * @return {[type]}            [description]
 */
@media (min-width: 768px) {
    .pagewrap {width: 750px;}
}
/**
 * [media description]
 * @param  {[type]} min-width: 992px         [description]
 * @return {[type]}            [description]
 */
@media (min-width: 992px) {
    .pagewrap {width: 970px;}
}
/**
 * [media description]
 * @param  {[type]} min-width: 1200px        [description]
 * @return {[type]}            [description]
 */
@media (min-width: 1200px) {
    .pagewrap {width: 1200px;}
    .col-md-1 {
      width: 8.33333333%;
    }
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-md-3 {
        width: 25%;
    }
    .mobile 
    {
        display: none !important;
    }
    #main-nav ul li ul li 
    {
        position: relative;
    } 
    #main-nav ul li:hover ul
    {
        display: block;
    } 
    #main-nav ul li:hover ul ul 
    {
        display: none;
    }
    
    #main-nav ul ul li 
    {
        display: block;
    } 
    #main-nav ul ul ul 
    {
        position: absolute;
        left: 100%;
        top:0;
        border-left: 1px solid #fff;
        display: none;
    }
    #main-nav ul ul li:hover ul
    {
        display: block;
    } 
    .img_us img {
        width: 356px;
    }
    .table tr td:first-child
    {
        width: 25%;
        text-align: center;
        padding-top: 10px;
    }
    .table img 
    {
        width: 120px;
        margin-top: 10px;
        margin: auto;
    }
    .pro-list .pro img, .list .pro img{
        max-width:100%;
    }
    .slider_big1
    {
        height: 390px;
        overflow: hidden;
    }

    .theme-default .nivo-caption {
        font-family: Helvetica, Arial, sans-serif;
        text-align: right;
        background: none;
        padding-right: 50px;
        padding-bottom: 80px;
    }
    .div-ct
    {
        float: right;
        background: rgba(0,0,0,0.8);
        padding: 20px;
    }
    .list-sp-index.pro-list .pro {
        margin: 0 10px;
        width: calc((100% - 80px)/4);
    }
}