/* xong */
@media screen and (max-width: 319px){
    .logo img{height: 45px !Important;}
    .block-search ::placeholder {color: #333 !Important;}
    .block-search :-ms-input-placeholder {color: #333 !Important;}
    .block-search ::-ms-input-placeholder {color: #333 !Important;}
    #cart .col-md-4 >.col-md-12 >p >a{padding: 10px !Important;}
    #cart .col-md-4 >.col-md-12{border-left: none !Important;padding: 0px !Important;}
    .pay >.container >.row >.col-md-6 >.col-md-12{border-left: none !Important;padding: 0px !Important;}

    #top-bar{padding: 5px;}
    #top-bar .nav>li{width: 100%;text-align: center;margin-bottom: 5px;}
    #top-bar a{padding: 0px;}
    .block-search form{margin: auto !Important;width: 80%;}
    .logo img{height: 45px !Important;padding-top: 3px;}
    .header .header-main{width: 100%;padding: 0px;}
    #mobile-menu{float: left !important;width: 50% !important;text-align: left !important;margin: 0px !important;}
    #mobile-menu .navbar-toggle{float: left;}
    #logo{float: right !important;width: 50% !important;text-align: right !important;margin: 0px !important;}
    .navbar-toggle{background: #ccc;color: #333;}
    .navbar-toggle .icon-bar{border-bottom: 1px solid #fff;}
}

@media (min-width: 320px) and (max-width: 480px) {
    .block-search ::placeholder {color: #333 !Important;}
    .block-search :-ms-input-placeholder {color: #333 !Important;}
    .block-search ::-ms-input-placeholder {color: #333 !Important;}
    #cart .col-md-4 >.col-md-12 >p >a{padding: 10px !Important;}
    #cart .col-md-4 >.col-md-12{border-left: none !Important;padding: 0px !Important;}
    .pay >.container >.row >.col-md-6 >.col-md-12{border-left: none !Important;padding: 0px !Important;}

    #top-bar{padding: 5px;}
    #top-bar .nav>li{width: 100%;text-align: center;margin-bottom: 5px;}
    #top-bar a{padding: 0px;}
    .block-search form{margin: auto !Important;width: 80%;}
    .logo img{height: 45px !Important;padding-top: 3px;}
    .header .header-main{width: 100%;padding: 0px;}
    #mobile-menu{float: left !important;width: 50% !important;text-align: left !important;margin: 0px !important;}
    #mobile-menu .navbar-toggle{float: left;}
    #logo{float: right !important;width: 50% !important;text-align: right !important;margin: 0px !important;}
    .navbar-toggle{background: #ccc;color: #333;}
    .navbar-toggle .icon-bar{border-bottom: 1px solid #fff;}
}

@media (min-width: 481px) and (max-width: 768px) {
    .logo img{height: 45px !Important;}
    .block-search ::placeholder {color: #333 !Important;}
    .block-search :-ms-input-placeholder {color: #333 !Important;}
    .block-search ::-ms-input-placeholder {color: #333 !Important;}
    #cart .col-md-4 >.col-md-12 >p >a{padding: 10px !Important;}
    #cart .col-md-4 >.col-md-12{border-left: none !Important;padding: 0px !Important;}
    .pay >.container >.row >.col-md-6 >.col-md-12{border-left: none !Important;padding: 0px !Important;}

    #top-bar{padding: 5px;}
    #top-bar .nav>li{width: 100%;text-align: center;margin-bottom: 5px;}
    #top-bar a{padding: 0px;}
    .block-search form{margin: auto !Important;width: 80%;}
    .logo img{height: 45px !Important;padding-top: 3px;}
    .header .header-main{width: 100%;padding: 0px;}
    #mobile-menu{float: left !important;width: 50% !important;text-align: left !important;margin: 0px !important;}
    #mobile-menu .navbar-toggle{float: left;}
    #logo{float: right !important;width: 50% !important;text-align: right !important;margin: 0px !important;}
    .navbar-toggle{background: #ccc;color: #333;}
    .navbar-toggle .icon-bar{border-bottom: 1px solid #fff;}
    #top-bar:before,#top-bar:after{display: none;}
}
@media (min-width: 769px) and (max-width: 991px) {
    #top-bar{padding: 5px;}
    #top-bar .nav>li{width: 100%;text-align: center;margin-bottom: 5px;}
    #top-bar a{padding: 0px;}
    .block-search form{margin: auto !Important;width: 80%;}
    .logo img{height: 45px !Important;padding-top: 3px;}
    .header .header-main{width: 100%;padding: 0px;}
    #mobile-menu{float: left !important;width: 50% !important;text-align: left !important;margin: 0px !important;}
    #mobile-menu .navbar-toggle{float: left;}
    #logo{float: right !important;width: 50% !important;text-align: right !important;margin: 0px !important;}
    .navbar-toggle{background: #ccc;color: #333;}
    .navbar-toggle .icon-bar{border-bottom: 1px solid #fff;}
    #top-bar:before,#top-bar:after{display: none;}
}
@media (min-width: 992px) and (max-width: 1142px) {
    .header .header-bottom nav .nav .nav-item>a{font-size: 10px;}
}