@media only screen and (min-width: 320px) and (max-width: 480px) {
    .header-top .actions > li:first-child {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1024px){
    #homeBanner #slider{display:none;}
    #homeBanner #sliderM{display:block;}
    #home #advertisement-container {margin-top:0; margin-bottom:20px}
    
    .product-name-info .sku-info {display:block; text-align:left;}
    .product-name-info .sku-info .edit-sku, .product-name-info .sku-info:hover .edit-sku {margin-top:10px; display:inline-block; position:static;}
    
    #quick-view-box {padding:25px;}
    
    .m-filter-container.fixed {display:block;}
    
    #header {position:fixed; top:0; left:0; width:100%; height:auto; z-index:17000000;}
    #container {margin-top:95px}
    
    #product-discount-page #product #productList ul.large li{width: calc((100% - 90px) / 3) !important}
    #product-discount-page #product #productList ul.large li .desc{width: 100%;}
    #header #mainLogo img{max-width: 160px !important}
    .wrap{width: calc(100% - 40px) !important; padding: 0px 20px !important;}
    .content .banner{width: calc(100% + 40px) !important; position: relative !important; left: -20px !important; }

    .mobile-filter-top{display: flex;}
    .mobile-filter-bottom{display: block}
    #filter-m-btn{float:right; display: inline-block; border:1px solid; padding:5px 10px; margin-bottom:10px;}

    #leftBar.mobile-leftBar .block .title a{display: none}

    #leftBar.mobile-leftBar .block .inner{display: none}

    #leftBar.mobile-leftBar .block .title p.filter-text{display: inline-block;}

    #m-resultPerPage, #m-sort{display: block}


    #header .mobileNavIcon{display: block;}
    .mobile-nav-top{display: flex;}
    #header #top, #header #bottom{display: none;}
    #header #nav{display: none;}
    #header #INcontainer {height: inherit !important;}
    #header #mainLogo{height: 60px}


    #login #leftBar.memberLeft{display: none;}
    #login .mainContent{width: 100% !important;}    
    
    #shoppingCart #shop #cartLeft{width: 100%}
    #shoppingCart #shop #cartRight{width: 100%;}
    #shoppingCart #shop .containBox{width: 100%;}

    #quick-view-box{width: auto; max-width: 415px;}
    .quick-view-right{clear: both;}
    .quick-view-thumbnail{width: 200px; height: 200px; margin: 0 auto 10px auto;}
    .quick-view-thumbnail img{max-width: 200px; max-height: 200px;}

    /*.quick-view-left-container{display: inline-block; width: 100%;}*/
    .quick-view-left{width: auto; float: none;}
    .quick-view-left ul{padding-left: 0; display: inline-block;}
    .quick-view-detail p.view-detail{position: relative; top: 20px; right: 0; float: right;}

    .quick-view-right{width: auto;}

    .member-left-info{width: 100%;}
    .member-right-info{width: 100% }
    .member-point {width:calc(100% + 20px);border:0; border-radius:0; margin-left:-20px;}
    
}

/* col-xs */
@media only screen and (max-width: 767px) {
    /*
    | ---------------------------------------------------------
    | General & Helper Class
    | ---------------------------------------------------------
    */
    #promo-bar .wrap{position: initial;}

    .main-header .logo-wrapper{
        margin:0 auto;}

    .center-xs {
        display: table;
        width: auto;
        margin: 0 auto;
        float: none;
        position: static;
        text-align: center;
    }

    /*
    | ---------------------------------------------------------
    | Header
    | ---------------------------------------------------------
    */
    .header-top {
        height: auto;
    }
    .header-top .contact-info,
    .header-top .actions {
        display: table;
        margin: 0 auto;
        padding: 15px 0;
        float: none;
        text-align: center;
    }

    .main-header {
        height: auto;
        margin: 0;
        padding: 30px 0;
    }
    .main-header .actions {
        display: table;
        margin: 0 auto 10px auto;
        float: none;
        position: static;
    }
    .main-header .logo-wrapper {
        position: static;
        float: none;
    }

    .dl-menuwrapper {
        margin: 0 0 3em;
    }
    .dl-menuwrapper .dl-menu.dl-menuopen,
    .dl-menuwrapper > .dl-submenu {
        top: 5em;
    }


    .products-wrapper {
        top: 0;
    }
    .products-layout.list .entry-media, 
    .products-layout.list .entry-main {
        display: block;
        width: auto;
    }
    .products-layout.list .entry-media {
        max-width: 280px;
        margin: 0 auto;
    }
    .products-layout.list .entry-main > * {
        margin-right: auto;
    }
    .products-layout.list .entry-price {
        position: static;
        margin: 20px auto;
        padding: 0;
        border: 0;
    }
    .products-layout.list .entry-links {
        display: table;
        margin: 10px auto;
        float: none;
    }

    .nav-tabs>li {
        float: none;
        margin-bottom: 3px;
    }

    .tbl-cart td {
        font-size: 12px;
    }
    .tbl-cart .qty-btn-group {
        min-width: 28px;
        width: 32px;
    }
    .tbl-cart .qty-btn-group button {
        height: 20px;
    }
    .tbl-cart tbody tr > td:nth-child(3):after {
        content: none;
    }
}
/* col-sm */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/* col-md */
@media only screen and (min-width: 992px) and (max-width: 1170px) {
    .main-menu > li > a {
        padding: 25px 10px;
    }
}
/* col-xs , col-sm */
@media only screen and (max-width: 991px) {
    /*
    | ---------------------------------------------------------
    | Promo
    | ---------------------------------------------------------
    */
    .promo.first-child {
        margin-top: 0;
    }
    .col-md-4{width:100%}
}

/* col-md and col-lg */
@media only screen and (min-width: 992px) {
    /*
    | ---------------------------------------------------------
    | Promo
    | ---------------------------------------------------------
    */
    .promo.first-row {
        margin-top: 0;
    }
}
/* All but col-xs */
@media screen and (min-width: 1024px) {
    #frm-contact-us { margin-right: 80px; }
    #header .mobileNav {display:none !important}
}

/*==========================================
Tablet
==========================================*/

@media screen and (max-width:1375px) {
    #recentlyView {position:fixed; right:0}
}


@media screen and (max-width: 1280px ) and (min-width: 1000px) {
    #leftBar {width:220px;}
    #leftBar .block .title h2 {font-size:18px}
    .wrap { position:relative; margin:0 auto; padding:0; width:1000px;}
    .content{position:relative; float:left; width:100%}
    #header #nav {height:36px}
    #header #nav .mean a {padding:0 10px}
    #header #nav.destktop a {padding:0 10px}
    #home #carousel.flexslider, #product #carousel.flexslider {width:880px}
    /*
    #home #advertisement li {width:47%; margin:0 0 5% 0; height:auto; line-height:0; clear:both}
    #home #advertisement li:nth-child(even) {float:right; clear:right}
    */
    #home #advertisement li {width:485px; }

    #home #newArrival ul {width:580px}
    #home #newArrival ul li {float:left; width:135px; height:240px; margin:0 13px 17px 0}
    #home #newArrival ul li .thumb {width:100%; height:135px; line-height:135px; background:#fff; overflow:hidden; position:relative; cursor:pointer}
    #home #introduction p {font-size:15px}
    #home .products li {width:184px; height:280px; margin:0 20px 20px 0}
    /*
    #home .products li .thumb {height:135px; line-height:135px}
    */

    #recentlyView {display:none}
    #recentlyViewM {display:block}	

    .content .banner {height:auto}

    #product #productList ul li .desc {width:415px}	
    #product #productList ul.large li {width:220px; margin-right:15px; /*padding:0*/}
    #product #productList ul.large li .thumb {width:100%; height:220px; line-height:220px}
    #product #productList ul.large li .desc {width:100%}

    #leftBar.memberLeft {width:auto}
    .mainContent {width:calc(100% - 240px) }	

    .products.large {margin-top:24px}

    #product #productDetail #thumbs {width:410px; }
    #product #productDetail #thumbs #mainPhoto {height:410px; line-height:410px}
    #product #productDetail #thumbs #carousel.flexslider {width:388px}
    #product #productDetail #related #carousel.flexslider {width:100%; margin:0 auto}
    #product #productDetail .comment .fRight {width:720px}

    #product #productList #loadMore {padding-bottom:40px; border-bottom:1px solid #202020}

    #shoppingCart #shop #cartLeft {width:535px}
    /*#shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) {width:340px}*/	
    /*#shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) input,*/
    #shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) textarea {width:324px}
    #shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) select {width:100%}

    #cart #shop #itemList td:nth-child(2), 
    #cart #shop #itemList td:nth-child(3),
    #cart #shop #itemList td:nth-child(4){width:120px}
    #cart #shop #itemList td:nth-child(5){width:80px; padding:0 20px}
    #cart #shop #itemList td:nth-child(5) i {width:30px}
    #cart #shop #cartLeft {width:100%}
    #cart #shop #cartRight {width:100%}
    #cart #shop #invoice p {width:70%}

    #contactUs .map {width:48%}
    #contactUs .map iframe {width:100%}
    #contactUs #contactInfo {width:48%}

    #news #newsList .content_box {width:223px; padding:6px; margin:7px; position:relative; background-color:#202020; border-radius:2px}

    #login {padding-bottom:30px}
    /*#login .row div:nth-child(1) {width:30%}*/
    /*#login .row div:nth-child(2) {width:70%}*/
    #login .row div input[type="text"], 
    #login .row div input[type="password"], 
    #login .row div textarea {width:100%}

    #leftBar .leftNav li a {width:170px}


    #footer #INcontainer {overflow:hidden}	
    #footer #footerNav {text-align:center}
    #footer #footerNav li {float:none; display:inline-block}
    #footer #copyright {float:none; width:100%; overflow:hidden; text-align:center}

    #footer #top #contactInfo {width:52%}

    #bottomImage {height:auto; line-height:0}

}

@media screen and (max-width: 999px ) and (min-width: 768px) {
    .wrap { position:relative; margin:0 auto; padding:0; width:768px;}
    .content{position:relative; float:left; width:100%}
    #header #nav {height:auto}
    #header #nav .mean a {padding:0 12px}
    #home #carousel.flexslider, 	#product #carousel.flexslider, #home #carousel.flexslider.center {width:500px}
    /*
    #home #advertisement li {width:47%; margin:0 0 5% 0; height:auto; line-height:0; clear:both}
    #home #advertisement li:nth-child(even) {float:right; clear:right}
    */
    #home #advertisement {margin-top:10px}
    #home #advertisement li {width:48%; margin:1%}
    #home #newArrival #bigImage {float:none; max-width:480px; width:100%; margin:0 auto 20px auto}
    #home #newArrival #bigImage .thumb {width:100%; height:auto; line-height:auto}
    #home #newArrival ul {width:100%}
    #home #newArrival ul li {float:left; width:calc((100% - 80px) / 4); margin:0 13px 17px 0}
    #home #newArrival ul li .thumb {width:100%; height:auto; line-height:auto; background:#fff; overflow:hidden; position:relative; cursor:pointer}
    #home #introduction p {font-size:15px}
    #home .products li {width:calc((100% - 80px) / 5); margin:0 20px 20px 0}
    #home .products li .thumb {height:135px; line-height:135px}

    #recentlyView {display:none}
    #recentlyViewM {display:block}	

    .content .banner {height:auto; margin-top:0}

    #product #productList ul li .desc {width:475px}	
    #product #productList ul.large li {width:240px; }
    #product #productList ul.large li .thumb {width:100%; height:240px; line-height:240px}
    #product #productList ul.large li .desc {width:100%}
    #leftBar {width:100%}
    #leftBar.memberLeft {width:auto}
    #header #leftBar.memberLeft {width:100%;}
    .mainContent {width:100%; padding-bottom:0}	
    #login .mainContent, 
    #wish .mainContent {width:70%}
    .products.large {margin-top:24px}

    #product #productDetail #thumbs {width:100%; text-align:center;}
    #product #productDetail #thumbs #mainPhoto {width:100%; height:300px; line-height:300px; text-align:center; background:none} 
    #product #productDetail #thumbs #mainPhoto img {width:auto; height:100%}
    #product #productDetail #thumbs #carousel.flexslider {width:400px; float:none; margin:0 auto}
    #product #productDetail #detail {width:100%}
    #product #productDetail #related #carousel.flexslider {width:560px; margin:0 auto}

    #product #productDetail #review h2 i {float:right}
    #product #productDetail .comment .fLeft {width:100%}
    #product #productDetail .comment .fLeft #userName {float:left; border:0; line-height:40px}
    #product #productDetail .comment .fLeft #info {float:right}
    #product #productDetail .comment .fRight {width:100%}

    #product #productList #loadMore {padding-bottom:40px; border-bottom:1px solid #202020}

    #cart #shop #itemList td:nth-child(2), 
    #cart #shop #itemList td:nth-child(3),
    #cart #shop #itemList td:nth-child(4){width:120px}
    #cart #shop #itemList td:nth-child(5){width:80px; padding:0 20px}
    #cart #shop #itemList td:nth-child(5) i {width:30px}
    #cart #shop #cartLeft {width:100%}
    #cart #shop #cartRight {width:100%}
    #cart #shop #invoice p {width:70%}

    #contactUs .map {width:48%}
    #contactUs .map iframe {width:100%}
    #contactUs #contactInfo {width:48%}

    #news #newsList .content_box {width:230px; padding:6px; margin:7px; position:relative; background-color:#202020; border-radius:2px}

    #login {padding-bottom:30px}
/*    #login .row div:nth-child(1) {width:30%}
    #login .row div:nth-child(2) {width:70%}*/
    #login .row div input[type="text"], 
    #login .row div input[type="password"], 
    #login .row div textarea {width:100%}

    #leftBar .leftNav li a {width:170px}
    #record #leftBar {width:100%; margin-bottom:10px}
    #record #leftBar .leftNav li a {width:100%; text-align:center}
    #record #leftBar .leftNav li a:hover i,
    #record #leftBar .leftNav li a.selected i {display:none}
    #record .mainContent {width:100%}

    #footer #INcontainer {overflow:hidden}	
    #footer #footerNav {text-align:center}
    #footer #footerNav li {float:none; display:inline-block}
    #footer #copyright {float:none; width:100%; overflow:hidden; text-align:center}

    #footer #top #contactInfo {width:52%}

    #bottomImage {height:auto; line-height:0}

}

/*==========================================
Mobile
==========================================*/
@media screen and (max-width: 767px) {
    .wrap { position:relative; margin:0 auto; padding:0; width:90%}
    /*#container {margin-top:60px}*/
    .content{position:relative; float:left; width:100%}

    .lineBreak {background:none}

    /*#header  {position:relative; top:0; z-index:12; }*/
    #header #INcontainer {height:60px}
    #header #mainLogo { /*line-height:60px*/ height: 60px;}
    /*#header #mainLogo img {height:auto; width:auto; vertical-align:middle}	*/
    #header #top, #header #bottom {display:none}
    #header #nav {display:none}
    #header .mobileNavIcon {display:block}

    #homeBanner {height:auto}
    #homeBanner .flexslider {height:auto}
    #homeBanner #slider .flex-direction-nav a {top:30%}

    #recentlyView {display:none}
    #recentlyViewM {display:block}
    #recentlyViewM #slider {width:270px}

    #home #carousel.flexslider, #home #carousel.flexslider.center {width:250px}
    /*#home #advertisement {width:300%; }*/
    /*#home #advertisement-container {margin:0px 0 20px -20px; width:calc(100% + 40px); overflow-x:scroll}*/
    /*#home #advertisement li {width:25%; margin:0}*/
    #home #advertisement li img:hover {transform: scale(1); -webkit-transform: scale(1); }
    /*#home #advertisement li:nth-child(even) {float:right; clear:right}*/

    #home #newArrival #bigImage {width:100%}
    #home #newArrival #bigImage .thumb {width:100%; height:auto; line-height:0}
    #home #newArrival ul {width:100%}
    #home #newArrival ul li {width:47%; margin:0 10px 20px 10px; height:auto; clear:both}
    #home #newArrival li:nth-child(even) {float:right; clear:right}
    #home #newArrival ul li .thumb {width:100%; height:auto; line-height:0}

    #home #introduction p {font-size:15px}
    #home .products li {width:47%; margin:0 0 5% 0; height:auto; line-height:0; clear:both}
    #home .products li:nth-child(even) {float:right; clear:right}
    #home .products li .thumb {width:100%; height:auto; line-height:0}

    .content .banner {width:110%; left:-5%; position:relative; height:auto; margin-top:0}
    #leftBar {float:none; width:100%; left:0}
    .mainContent {width:100%; padding-bottom:0}
    #product #carousel.flexslider {width:250px}
    #product #productList #result {display:none}
    #product h1 {clear:both; text-align:center}
    #product #productList ul li {width:48%; padding:30px 0; border:0; clear:both; overflow:hidden}
    #product #productList ul li:nth-child(even) {float:right; clear:right}
    #product #productList ul li .thumb {float:none; width:100%; height:auto; line-height:0}
    #product #productList ul li .desc {float:none; width:100%; margin-top:10px}
    #product #productList ul li .desc h2 {font-size:20px; margin-top:10px}
    #product #productList ul li .desc .price {font-size:15px}
    #product #productList ul li .desc .price span {display:block; margin-left:0; font-size:13px}
    #product #productList ul li .desc p {display:none}
    #product #productList ul li .desc #more {float:none; padding:0; width:100%; text-align:center}
    #product #productList ul.large li {width:48%; padding:30px 0; border:0; clear:both; margin-right:0; text-align:left}
    #product #productList ul.large li:nth-child(even) {float:right; clear:right}
    #product #productList ul.large li .thumb {width:100%; height:auto; line-height:0}
    #product #productList ul.large li .desc {height:auto; width:100%; margin-top:10px}
    #product #productList ul.large li .desc h2 {font-size:20px}
    #product #productList ul.large li .desc .price {font-size:15px}
    #product #productList ul.large li .desc .price span {display:block; margin-left:0; font-size:13px}
    #product #productList ul.large li .desc p {display:none}
    #product #productList ul.large li .desc #more {padding:0; width:100%; text-align:center;}


    #product #productDetail #thumbs {width:100%}
    #product #productDetail #thumbs #mainPhoto {width:100%; height:auto; line-height:0; text-align:center; background:none} 
    #product #productDetail #thumbs #carousel.flexslider {width:182px}
    #product #productDetail #detail {width:100%}
    #product #productDetail #detail #price span {display:block; margin-left:0; line-height:24px}
/*    
    #product #productDetail #detail #adding {position:fixed; top:60px; left:0; width:100%; z-index:17000001; margin:0;}
    #product #productDetail #detail #adding > * {box-sizing: border-box; }
    #product #productDetail #detail #adding #quantity {width:46px;}
    #product #productDetail #detail #adding a {float:left; clear:right; line-height:38px; width:calc( (100% - 55px) / 2); margin:0; padding:0; border:1px solid #fff; }
    */
    #product #productDetail #related #carousel.flexslider {width:280px; margin:0 auto}
    #product #productDetail #related #carousel .slides li {height:auto; padding-bottom:10px}
    #product #productDetail #related .thumb {width:100%; height:auto; line-height:0}
    #product #productDetail #related .caption {width:100%}
    #product #productDetail #review h2 i {float:right}
    #product #productDetail .comment .fLeft {width:100%}
    #product #productDetail .comment .fLeft #userName {float:left; border:0; width:auto}
    #product #productDetail .comment .fLeft #info {float:right}
    #product #productDetail .comment .fRight {width:100%}	

    #product #productList #loadMore {padding-bottom:40px; border-bottom:1px solid #202020}

    
    
    /*#step a {clear:both}*/

    /*-----  -----*/
    /*#cart #shop #itemList,
    #cart #shop #itemList tbody,
    #cart #shop #itemList tr,
    #cart #shop #itemList td {display:block; padding:0;}	
    
    #cart #shop #itemList td { border: none; position: relative; padding-left: 40%; padding-top:10px;	padding-bottom:10px; height:auto;}	
    
    #cart #shop #itemList td:before { position: absolute;	top: 10px; left: 6px; width: 30%; 	padding-right: 10px; white-space: nowrap;}
    #cart #shop #itemList tr:nth-child(1) td {display:none;}	
    #cart #shop #itemList {width:100%;}
    #cart #shop #itemList td:nth-child(2):before { content: "Product Name"; }
    #cart #shop #itemList td:nth-child(3):before { content: "Price"; }
    #cart #shop #itemList td:nth-child(4):before { content: "Special Price"; }
    #cart #shop #itemList td:nth-child(5):before { content: "Quantity"; }
    #cart #shop #itemList td:nth-child(6):before { content: "SubTotal"; }	

    
    #cart #shop #itemList td:nth-child(2) {border-top:1px solid #fff}
    #cart #shop #itemList td:nth-last-child(1) {border-bottom:1px solid #fff}
    #cart #shop #itemList td:nth-child(1),
    #cart #shop #itemList td:nth-child(2),
    #cart #shop #itemList td:nth-child(3),
    #cart #shop #itemList td:nth-child(4),
    #cart #shop #itemList td:nth-child(5),
    #cart #shop #itemList td:nth-child(6),
    #cart #shop #itemList td:nth-child(7){ width:auto; height:auto; min-height:15px; text-align:left}
    #cart #shop #itemList td .quantity {width:60%; margin:0 auto}	
    #cart #shop #itemList td .thumb {line-height:0; height:auto}
    */

    #shoppingCart #shop #cartLeft {width:100%}

    #cart #shop #itemList td {text-align:left}
    #cart #shop #itemList td .thumb {height:auto; line-height:0}
    #cart #shop #itemList td .quantity {text-align:center}
    #cart #shop #itemList td.delete {display:none}
    #cart #shop #itemList td .deleteBtn  {display:block}
    #cart #shop #itemList td:nth-child(4) {padding-right:0}
    #cart #shop #itemList.cart1 td:nth-last-child(1) {display:none}
    /*-----  -----*/

    #cart #shop .containBox {width:100%}
    #cart #shop .containBox .form .row {margin-bottom:5px}
    #cart #shop #cartRight .containBox #nextStep #back {width:99%; margin:0 auto 20px auto}
    #cart #shop #cartRight .containBox #nextStep #next {width:100%}
    #cart #shop #cartRight .containBox .row div:nth-of-type(2) {float:left; margin-top:5px}
    #cart #shop #cartRight .containBox .row.discount div {float:left; margin-top:5px}	

    #cart #shop #cartLeft {width:100%}
    #cart #shop #cartRight {width:100%}
    #cart #shop #cartLeft .containBox .row div:nth-of-type(1) {width:100%}
    #cart #shop #cartLeft .containBox .row div:nth-of-type(2) {width:100%}
    #cart #shop #cartLeft .containBox .row div:nth-of-type(2) input {width:96%; padding:0 2%}
    #cart #shop #cartLeft .containBox .row div:nth-of-type(2) select {width:100%}
    #cart #shop #cartLeft .containBox .row div:nth-of-type(2) textarea {width:96%; padding:0 2%}
    #cart #shop #invoice .print {display:none}
    #cart #shop .containBox .inner {width:94%; padding:3%}
    #cart #shop #order {margin-bottom:0}

    #cart #shop #cartRight .containBox .row div:nth-of-type(1) {width:100%; margin-right:2%}
    #cart #shop #cartRight .containBox #eCoupon input {width:96%; padding:0 2%}
    #cart #shop #cartRight .containBox .row div:nth-of-type(2) {width:100%}
    #cart #shop #cartRight .containBox .row div:nth-of-type(2) a {float:right; margin:10px 0 0 0}

    #cart #shop #invoice div {width:46%}

    #shoppingCart #shop .containBox .inner {padding:4%; width:92%}
    #shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) { width:100%}
    #shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) select {width:100%}
    #shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) input[type="text"] {width:96%; padding:0 2%}
    #shoppingCart #shop #cartLeft .containBox .row div:nth-of-type(2) textarea {width:96%; padding:2%}
    #shoppingCart #shop #cartRight {width:100%}
    #shoppingCart #shop #cartRight .containBox .row div:nth-of-type(1) {width:100%}
    #shoppingCart #shop #cartRight .containBox #eCoupon input {width:96%; padding: 0 2%; margin-bottom:15px}
    #shoppingCart #shop #cartRight .containBox #nextStep #back {width:48%; margin:0; height:35px; line-height:35px}
    #shoppingCart #shop #cartRight .containBox #nextStep #next {width:48%}

    #contactUs .map {width:100%}
    #contactUs .map iframe {width:100%; height:300px}
    #contactUs #contactInfo {width:100%}	

    /*-----  -----*/
    #record #itemList {width:100%;}
    #record #itemList,
    #record #itemList tbody,
    #record #itemList tr,
    #record #itemList td {display:block; padding:0; text-align:left}
    #record #itemList td a {text-align:center}

    #record #itemList td { 
        border: none;		
        position: relative;
        padding-left: 40%; 
        padding-top:10px;
        padding-bottom:10px;
        height:auto;
    }	

    #record #itemList td:before { 
        position: absolute;
        top: 10px;
        left: 6px;
        width: 40%; 
        padding-right: 10px; 

    }	

    #record #itemList td:nth-child(1) { border-top: 1px solid #eee; margin-top:20px }		
    #record #itemList td:nth-last-child(1) { border-bottom: 1px solid #eee; }	

    #record #itemList tr:nth-child(1) td {display:none;}		
    #record #itemList td:nth-child(1):before { content: "Invoice #"; }
    #record #itemList td:nth-child(2):before { content: "Order Date"; }
    #record #itemList td:nth-child(3):before { content: "Total"; }
    #record #itemList td:nth-child(4):before { content: "Order Status"; }
    #record #itemList td:nth-child(5):before { content: "Delivery"; }
    #record #itemList td:nth-child(6):before { content: "Post Reference Number"; }

    #record #itemList td:nth-child(1),
    #record #itemList td:nth-child(2),
    #record #itemList td:nth-child(3),
    #record #itemList td:nth-child(4),
    #record #itemList td:nth-child(5),
    #record #itemList td:nth-child(6){ width:auto; height:auto}	

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

    #news #newsList {width:100% !important;}
    #news #newsList .content_box {width:auto; left:0}


    #bottomImage {height:auto}

    #login #leftBar {width:100%; margin-bottom:10px}
    #login #leftBar .leftNav li a {width:100%; text-align:center}
    #login #leftBar .leftNav li a:hover i,
    #login #leftBar .leftNav li a.selected i {display:none}
    #login .mainContent {width:100%}
    #login .row div {width:100%}
    #login .row div input[type="text"],
    #login .row div input[type="password"] {padding:0 2%; width:96%}
    #login .row div textarea {padding:2%; width:96%}
    #login .row .btn {margin-bottom:40px}

    #footer h2 {text-align:center}
    #footer #INcontainer {overflow:hidden}	
    #footer #footerNav {text-align:center}
    #footer #footerNav li {float:none; display:inline-block}
    #footer #copyright {float:none; width:100%; overflow:hidden; text-align:center}

    #footer #top #contactInfo {width:100%}
    #footer #top #subscription {width:100%; margin-top:10px}
    #footer #top #subscription p {text-align:center}
    #footer #top #subscription input {margin:0 0 10px 0; width:96%; padding:0 2%}
    #footer #top #subscription .btn {float:none; overflow:hidden; margin:0 auto}

    /*#footer #footerNav {display:none}*/
    #footer #copyright {margin-top:10px}
    #back-top {display:none; right:auto; left:20px; bottom:50px}
    /*
    #footer #footerNav li {font-size:15px; width:50%; text-align:left; display:block; float:left}
    #footer #footerNav li:nth-child(even) {display:none}
    #footer #footerNav li:nth-child(3n) {float:right; text-align:right}
    #footer #footerNav li:nth-child(7n) {text-align:right}
    */

    #bottomImage {height:auto; line-height:0}
}

@media screen and (max-width: 415px) {
    #step {display:none !important;}
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
    .header-top .actions > li:first-child {
        width: 100%;
        margin-bottom: 10px;
    }
}
/* col-xs */
@media only screen and (max-width: 767px) {
    /*
    | ---------------------------------------------------------
    | General & Helper Class
    | ---------------------------------------------------------
    */

    .main-header .logo-wrapper{
        margin:0 auto;}

    .center-xs {
        display: table;
        width: auto;
        margin: 0 auto;
        float: none;
        position: static;
        text-align: center;
    }

    /*
    | ---------------------------------------------------------
    | Header
    | ---------------------------------------------------------
    */
    .header-top {
        height: auto;
    }
    .header-top .contact-info,
    .header-top .actions {
        display: table;
        margin: 0 auto;
        padding: 15px 0;
        float: none;
        text-align: center;
    }

    .main-header {
        height: auto;
        margin: 0;
        padding: 30px 0;
    }
    .main-header .actions {
        display: table;
        margin: 0 auto 10px auto;
        float: none;
        position: static;
    }
    .main-header .logo-wrapper {
        position: static;
        float: none;
    }

    .dl-menuwrapper {
        margin: 0 0 3em;
    }
    .dl-menuwrapper .dl-menu.dl-menuopen,
    .dl-menuwrapper > .dl-submenu {
        top: 5em;
    }


    .products-wrapper {
        top: 0;
    }
    .products-layout.list .entry-media, 
    .products-layout.list .entry-main {
        display: block;
        width: auto;
    }
    .products-layout.list .entry-media {
        max-width: 280px;
        margin: 0 auto;
    }
    .products-layout.list .entry-main > * {
        margin-right: auto;
    }
    .products-layout.list .entry-price {
        position: static;
        margin: 20px auto;
        padding: 0;
        border: 0;
    }
    .products-layout.list .entry-links {
        display: table;
        margin: 10px auto;
        float: none;
    }

    .nav-tabs>li {
        float: none;
        margin-bottom: 3px;
    }

    .tbl-cart td {
        font-size: 12px;
    }
    .tbl-cart .qty-btn-group {
        min-width: 28px;
        width: 32px;
    }
    .tbl-cart .qty-btn-group button {
        height: 20px;
    }
    .tbl-cart tbody tr > td:nth-child(3):after {
        content: none;
    }
}
/* col-sm */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/* col-md */
@media only screen and (min-width: 992px) and (max-width: 1170px) {
    .main-menu > li > a {
        padding: 25px 10px;
    }
}
/* col-xs , col-sm */
@media only screen and (max-width: 991px) {
    /*
    | ---------------------------------------------------------
    | Promo
    | ---------------------------------------------------------
    */
    .promo.first-child {
        margin-top: 0;
    }
    .col-md-4{width:100%}
}

/* col-md and col-lg */
@media only screen and (min-width: 992px) {
    /*
    | ---------------------------------------------------------
    | Promo
    | ---------------------------------------------------------
    */
    .promo.first-row {
        margin-top: 0;
    }
}
/* All but col-xs */
@media only screen and (min-width: 768px) {
    #frm-contact-us { margin-right: 80px; }
}

@media screen and (max-width: 767px){    
    
    #shoppingCart #shop .containBox .paymentList .row {margin-right:0px !important; width:100% !important}
    
    #home #advertisement {display:none; }
    #home #advertisement-slider {display:block;}
    
    #home #advertisement li img {width:98%; padding:2%}
/*        
    #product #productDetail #detail #addCart.full {float:right; width:calc(100% - 46px)}
    #product #productDetail #detail #adding input {padding:0; width:50px; height: 40px; line-height:40px;}
    */
    #login .row.half {width:100%;padding:0;}
    #login .row.half > div input {padding:0;}
    
    #product #productDetail #detail #adding input {height:35px;}
    #product-discount-page #product #productList ul.large li{padding:0; width:calc(50% - 20px) !important; margin:0 10px 20px 10px}
    .mobile-m-lang-currency{display: block}
    #header #INcontainer{height: inherit !important;}
    .mobile-nav-top{display: flex}
    .new-cart-table tr:first-child{display: none !important}
    .new-cart-table tr.product td:not(.mobile){display: none !important}
    .new-cart-table tr.product td.mobile{display: block !important; }

    .new-cart-table tr.subTotal{float: left; width: 100%;}
    .new-cart-table tr.discount,.new-cart-table tr.subTotal {background: #ececec;}
    .new-cart-table tr.discount td:not(.mobile){display: none !important}
    .new-cart-table tr.discount td.mobile{display: block !important;}
    .new-cart-table tr.discount td.mobile .discount-detail{display: none}

    .new-cart-table tr.subTotal td:not(.mobile){display: none !important}
    .new-cart-table tr.subTotal td.mobile{display: block !important;}

    #shoppingCart #shop #cartRight .containBox .row div:nth-of-type(1){width: 70% !important;}
    #shoppingCart #shop #cartRight .containBox .row div:nth-of-type(2){width: 30% !important;}

    #product #productList ul.large li {width: calc(50% - 30px) !important; padding:10px; margin-right:20px; text-align: left !important; border-bottom: 1px solid #dddddd !important; padding-top: 20px !important;}
    #product #productList ul.large li:nth-child(3n) {margin-right:20px;}
    #product #productList ul.large li:nth-child(even) {margin-right:0;}
    #product #productList ul.large li:hover {box-shadow:none;}
    #product #productList ul.large li .desc .price{float: left; font-size: 14px !important;}
    #product #productList ul.large li .desc .price span.discount{display: none}
    #product #productList ul.large li .desc .discount-value{display: block;}
    #product #productList .btn{display: none !important}
    #product #productList ul.large li .quick-view-btn{opacity: 0 !important}
    #product #productList ul.large li .desc h2{font-size: 16px !important;}

    #home .products li{width: calc(50% - 20px) !important; margin:0 10px 20px 10px; /*padding: 5px;*/}
    #home #bigImage{border-bottom: 1px solid #dddddd !important; padding-bottom: 20px;}
    #home .products li{border-bottom: 1px solid #dddddd !important; padding-bottom: 20px;}
    #home .caption .name{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 52px; line-height: 19px; overflow: hidden; text-overflow: ellipsis;}
    #home .caption .price-container{height: 36px}

    #footer #social{width: 100%; display: flex; align-items: center; justify-content: center;}

    #product #productDetail #thumbs #carousel.flexslider{width: 100% !important; position: relative; /*left: 20px;*/}

    #member-table table td{display: none;}
    #member-table .mobile-show{display: block !important;}
    
    #carousel .flex-direction-nav {display:none;}



    #member-table table td.have-thumb .info .table-tr div{width: 100% !important;}

    #member-table .detail-btn{max-width: 100px;}

    .member-coupon-container{float: none; width: 300px; margin: 25px auto;}
    .member-coupon-container li{float: none; margin-right: 0px;}
    .member-coupon .value{margin-top: 0px}
    .member-coupon .qr-code i{top:calc(50% - 10px);}

    #login .row div{width: 100% !important; padding: 0px; line-height: 20px; margin-bottom: 10px;}
    #login .row > div:first-of-type{margin-bottom: 10px;}
    #login .row div textarea{width: 95%;}

    #member-table{border-top: 1px solid #000; margin-top: 5px; border-bottom: 1px solid #848484 ; margin-bottom: 25px;}
    #member-table .mobile-show{padding: 20px 0px;}
    #member-table .mobile-show .thumb{width: 25% !important; height: auto !important; line-height: unset !important; display: flex; align-items: center; justify-content: center; float: left;}
    #member-table .mobile-show .product-info {width: 75%; float: left;}
    #member-table .mobile-show .info{float: left; width: 50%; text-align: left; padding: 0px 10px;}
    #member-table .mobile-show .info .title{font-weight: bold; font-size: 14px; line-height: 20px; color: #000;}
    #member-table .mobile-show .price-container {float: left; width: calc(50% - 20px);}
    #member-table .mobile-show .price-container .price{text-align: right; font-size: 16px; line-height: 20px;}
    #member-table .mobile-show .delete {text-align: right; margin-top: 25px; float: left; width: 100%;}
    #member-table .mobile-show .delete  a{color: red;}
    .fancybox-slide::before{height: initial !important;}    
    
    #home #newArrival #bigImage .thumb{/*width: 370px; height: 370px;*/ text-align: center; margin: 0 auto;    max-width: 100%;}
    #home .products li .thumb{height: 210px; line-height: 210px;}

    /*#product #productList ul.large li .thumb{height: 270px; line-height: 270px;}*/
    #product #productList .btn{display: inline-block;}
    #product #productList ul.large li{text-align: center;}
    
    #step{font-size: 15px; display: inherit;}
    .existing-member{width: 100%;}
    .new-member{width: 100%;}
    
    
    
    
}

@media screen and (max-width: 550px){
    
    #carousel .flex-direction-nav .flex-prev {left:-30px !important}
    #carousel .flex-direction-nav .flex-next {right:-30px !important}
    
    .new-footerNav{display: block; text-align: center;}
    .new-footerNav ul li:not(:nth-child(1)){display: none;}
    .new-footerNav ul li i{display: inline-block;}

    #carousel.flexslider{display: block;}
    .stArrow{display: none !important;}

    #shoppingCart #shop #itemList {min-width:740px;}
    #shoppingCart #shop #itemList td {padding:5px 0;}
    #shoppingCart #shop #itemList td .thumb {width:50px;height:50px;line-height:50px;}
    #shoppingCart #shop #itemList td:nth-child(1) {width:60px;}
    #shoppingCart #shop #itemList td:nth-child(2) {width:auto; padding-right:10px; text-align:left;}
    #shoppingCart #shop #itemList td:nth-child(3) {width:120px}
    #shoppingCart #shop #itemList td:nth-child(4) {width:120px;}
    #shoppingCart #shop #itemList td:nth-child(5) {width:120px;}
    #shoppingCart #shop #itemList td:nth-child(6) {width:40px;}
    #shoppingCart #shop #itemList tr:nth-last-child(1) {position:absolute; right:0;width:100%; border-top:1px solid #bebebe;}
    #shoppingCart #shop #itemList tr:nth-last-child(1) td {display:block; float:left;}
    #shoppingCart #shop #itemList tr:nth-last-child(1) td:nth-child(2) {float:right;}
    #shoppingCart #shop .tableContainer {width:100%; overflow:auto; padding-bottom:30px;}
    #shoppingCart #shop .tableContainer #itemList {min-width:700px;}

}


@media screen and (max-width: 500px){
    
    #product #productDetail #detail #adding a {float:right; width:calc(100% - 120px); padding:0; border:0; margin:0 0 10px 0}
    
    #carousel {padding:0; width:100%; max-width:100%}
    #carousel .swiper-slide {min-width:0; width:auto; text-align:left;}
    #carousel .swiper-button-prev, #carousel .swiper-button-next {display:none}
    
    .cart-button .btn{width: unset; padding: 5px 25px; float: none !important;}
    .cart-button .btn.fRight{float: right !important;}
    .cart-button .btn.fLeft{float: left !important;}

    .quick-view-right{width: auto;}

}