body { margin: 0px; font-family: Arial, sans-serif; color:rgb(0, 0, 0); color:#777777; font-size:12px; text-rendering: optimizespeed; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

/* @media only screen and (min-width:1800px) and (max-width:1920px) { .container { width: 1770px; margin: 0 auto; } }  */ /* 6col */
/* @media only screen and (min-width:1500px) and (max-width:1800px) { .container { width: 1470px; margin: 0 auto; } }  */ /* 5col */
@media only screen and (min-width: 1200px) and (max-width:1920px) { .container { width: 1170px; margin: 0 auto; } } /* 4col  <--- standard */
@media only screen and (min-width: 900px) and (max-width:1200px) { .container { width: 870px; margin: 0 auto; } }  /* 3col  */ 
@media only screen and (min-width: 600px) and (max-width:900px) { .container { width: 570px; margin: 0 auto; } }  /* 2col  */ 
@media only screen and (min-width: 300px) and (max-width:600px) { .container { width: 270px; margin: 0 auto; } }  /* 1col  */ 

.container { margin: 0 auto; }

a { color:#333; text-decoration:none; transition: all 0.5s ease 0s; }
a:hover { color:#474747; text-decoration:none; cursor:pointer; } 
a:active { outline-style:none; outline-width :0;}
h1, h2, h3, h4, h5 { font-weight:normal; margin:0; }
img { border: 0 }
input {  }
ul { margin:0; padding:0; }
ul li { padding:0; list-style:none; }
.clearfix {}
.clearfix::after { content: "."; display:block; line-height:0; height:0; clear:both; visibility:hidden; } 
.mi { display:inline-flex; vertical-align:middle; }

#blur { position:absolute; z-index:998; top:0; right:0; background-color:#000; } /* used in recommendation & category loading */

header .container { }
header .row { position:relative; min-height:110px; max-height:160px; }
header .dmu { float:right; position: relative; margin-top:3px; white-space:nowrap; padding:0 0; }
#shopname { display:inline-block; position:absolute; top:3px; left:0; }
#shopname a { display:inline-block; height:81px; }
#shopname img { float:left; border:0;  margin-right:10px; }
#shopname h1 { float:left; font-size:50px; color: rgb(48, 48, 48); display:inline-block; line-height:81px; }

#acc { white-space:nowrap; text-align:right; font-size:14px; color:#333; line-height:43px; }
#acc a { display:inline-block; color:#333; text-decoration:none; font-size:14px; padding: 0 5px; line-height:43px; 
         transition: all 300ms linear; }
#acc a:hover { color:#666; text-decoration:none; cursor:pointer }
#acc .logout { padding-left:0; }
#acc .cart { padding-right:5px !important; } 

.search { display:inline-block; }
.search .search-input { float:left; display: inline-block; height: 43px; border: none; background:#f0f0f0; box-shadow: none; border: none; border-radius: 0;
                         width:340px; padding:0 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.search .search-button { float:left; position: relative; height:43px; width:41px; border:solid 1px #f0f0f0;
                         background:#ffffff url('images/icon-search.png') no-repeat 13px 14px;
                         -moz-transition: all 0.5s ease 0s;
                         -webkit-transition: all 0.5s ease 0s;
                         -o-transition: all 0.5s ease 0s; }
.search .search-button:hover { color: #fff; cursor:pointer; }
a.beourreseller { float:right; display:inline-block; height:43px; line-height:43px; background-color:#333; color:#fff; padding:0 10px; }

.stickershadow { border-bottom:solid 1px #999; background-color:#fff; }
.top-cat-menu { margin:0; margin:10px 0; display:inline-block; position:relative; }
.top-cat-menu ul { margin:0; padding:0; }
.top-cat-menu ul li { display:inline-block; margin:0; }
.top-cat-menu a { font-size:16px; letter-spacing:1.4px; font-weight:bold; display:inline-block; padding:6px 20px;
                  cursor: pointer; position: relative; overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.top-cat-menu a .tn { font-size:12px; display:inline-block; margin-right:3px; }
#floatmenu2 { display:none; position:absolute; top:0; left:0; z-index:999999; background-color:#fefefe; overflow:auto; 
             border:solid 1px #999; box-shadow:0 1px 10px #999; width:245px; }

.prod { float: left; clear: both; width:100%; }

.product a:hover img {  -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
                        -moz-transform:scale(1.1); /*Mozilla scale version*/
                        -o-transform:scale(1.1); /*Opera scale version*/
                        -moz-transition: all 0.5s ease 0s;
                        -webkit-transition: all 0.5s ease 0s;
                        -o-transition: all 0.5s ease 0s; }
.product a:hover .so { visibility:hidden;  -moz-transition: all 0.1s ease 0s;
                        -webkit-transition: all 0.1s ease 0s;
                        -o-transition: all 0.1s ease 0s; }

.product { float: left; height: 460px; width:260px;position:relative; padding: 0; margin:0 15px 30px;  }
.product a { display: block; font-size: 12px; color: #333 !important; border: none; }
.product .p-outer { display: table; #position: relative; margin:0 auto; height:294px; }
.product .p-middle { display: table-cell; #position: absolute; #top: 50%; #left:50%; vertical-align: middle; text-align:center; }
.product .p-inner { #position: relative;	#top: -50%; #left:-50%; }
.product_thumb { margin: 0; position:relative; width:230px; }
.product_thumb .so { position:absolute; bottom:0; left:0; width:210px; padding:0 10px; height:30px; line-height:30px; 
               font-weight:bold; font-size:20px; text-align:center; background-color:#aaa; color:#fff; text-shadow: 0 1px 1px #777; }
.product_thumb .tag { position:absolute; top:-24px; left:0; width:230px; text-align:center; }
.product_thumb .tag  h5 { font-family:Arial; font-size: 11px; font-style: italic; color: #333;  text-align: center; text-shadow: 0 1px 2px rgba(255,255,255,.7);
                            display:inline-block; padding:0 5px; }
.product_thumb img { max-width:230px; max-height:294px; }
.product_thumb .tag-bottom { position:absolute; bottom:0; right:0; }
.product_thumb .tag-bottom .tagSpecialOffer { display:none; width:40px !important; min-width:unset; z-index:10; }
.product_thumb .tag-bottom .tagSpecialOffer.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center 10px;
    float:left;
}
@keyframes swing {
    0% { transform: rotate(6deg); }
    100% { transform: rotate(-6deg); }
}

.prod_detail { margin-top:10px; text-align:center; }
.prod_detail h2 { font-size: 14px; display:block; line-height:20px; height:40px; overflow:hidden; }
.prod_detail h2 .pc { display:inline-block; background-color:#888; color:#fff; padding:0 5px; margin-right:5px; transition: all 300ms linear 0s; }
.prod_detail .pr { display:block; line-height:16px; }

/* Normal style */
.prod_detail .price { white-space:nowrap; font-size:18px; font-weight:bold; font-family: "Varela Round", sans-serif; }
.prod_detail .pricePromo { font-size:16px; font-weight:bold; font-family: "Varela Round", sans-serif; }
.prod_detail .strike {  text-decoration:line-through; font-weight:normal; color:#888;  font-size:14px; }
.prod_detail .et { font-size:11px; color:#259959; line-height:12px; height:12px; font-family: "Varela Round", sans-serif; margin-top:3px; }  /* Green */
.prod_detail .qty-left-color { font-size:11px; color:#b12704 !important; line-height:14px; font-weight:700; font-family: "Varela Round", sans-serif; }

/* Group Sale Points */
.gspl {margin-top:5px;color:rgba(0,0,0,.7);font-size:0.9em}
.gspl .iconGroupSalePoints {width:18px;height:18px}
.gspl .dec {padding:0 3px}
.iconGroupSalePoints {background:url('/svg/icon-groupsalepoints.svg'); display:inline-block;}

/* Wholesale style */
.prod_detail .priceBFG { font-size:8px; color:#888 !important; line-height:normal; display:block; }
.prod_detail .ng { margin-bottom:6px; }
.prod_detail .priceN { font-size:12px; font-weight:bold; color:#888; font-family: "Varela Round", sans-serif; display:inline-block; }
.prod_detail .priceN .strike { font-size:12px; }
.prod_detail .priceW { font-size:18px; display:block; font-family: "Varela Round", sans-serif; }
.prod_detail .priceW .strike { font-size:14px; }
.prod_detail .lbl { display:block; font-size:11px; color:#888; font-weight:normal; }
.prod_detail .off { font-size:14px; color:#888; }
.prod_detail .cdf { font-size:11px; text-align:center; color:#888; }
.gstincl { font-size:9pt; color:#888; display:inline-block; margin:0 0 10px 10px; }

.prod-nav-con{ clear:both; font-size: 0.9em; padding: 40px 40px 0 0; text-align:right; }
.prod-nav-con .highlight { border:solid 1px #fff; background-color:rgb(100, 100, 100); color:#fff; padding: 8px 10px; width:60px; font-size:13px; 
                           -moz-border-radius: 4px;
                           -webkit-border-radius: 4px;
                           -khtml-border-radius: 4px;
                           border-radius: 4px; }
.prod-nav-con .backnext { border:solid 1px #f8f0ef; background-color:#ece6e9; padding: 8px 10px; font-size:13px; 
                            -moz-border-radius: 3px;
                            -webkit-border-radius: 3px;
                            -khtml-border-radius: 3px;
                            border-radius: 3px; }
.prod-nav-con .backnext:hover { background-color:#fff; }
.prod-nav-con a{ border: 1px solid #f8f0ef; background-color: #ece6e9;	color: #666; padding: 8px 10px; width:60px; font-size:13px; 
                 -moz-border-radius: 3px;
                 -webkit-border-radius: 3px;
                 -khtml-border-radius: 3px;
                 border-radius: 3px; }
.prod-nav-con a:hover{ background-color: #ffffff; cursor:pointer; }

/* Login Modal Popup */
.f-modalBackground { background-color:Black; filter:alpha(opacity=60); opacity:0.6; }
.f-shadow {  -moz-box-shadow: 0px 0px 12px #000;
            -webkit-box-shadow: 0px 0px 12px #000;
            box-shadow: 0px 0px 12px #000; }
.rounded-corners10 {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
a.closePanel { z-index:999; position:absolute; top:-10px; right:-10px; background:url('../../Images/close.png') no-repeat; width:30px; height:30px; display:inline-block; }

#divPages ul li { display:inline-block; }
#divPages a { display:inline-block; padding:8px 20px; font-size:18px; letter-spacing:0.05em; }
#divPages a:hover, #divPages a:focus { background-color:#f0f0f0; color:#333; }


.company-info { color:#555; }
.company-info h5 { font-weight:bold; font-size:18px; margin-bottom:10px; color:#585757; }
.company-info a { color:#555; }
.company-info a:hover { color:#496161; }
.company-info .pm { display:inline-block; }
.company-info .contact { line-height:20px; }
.company-info .contact span { display:inline-block; width:70px; }
.company-info .courier-wrapper {display:flex; align-items:center; flex-wrap: wrap; justify-content:center; gap:2px;}
.company-info .courier-wrapper .courier {flex: 0 1 110px; background-color:#ffffff; border:solid 2px rgb(204, 204, 204); 
                   border-radius: 5px; text-align:center; padding:3px; }
.company-info .courier-wrapper .courier img { display:block; max-height:20px; }

.copyright { text-align:center; color:#777; padding:40px 0; font-size:12px; } 
.copyright a { color:#777; } 
.copyright a:hover { color:#496161; }

.menubg { background-color:#fff; min-width:460px; max-width:690px; position:relative; padding:10px; max-height:495px; overflow:auto;  
           -moz-box-shadow: 0px 0px 12px #000;   
          -webkit-box-shadow: 0px 0px 12px #000;
          box-shadow: 0px 0px 12px #000;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 3px; }
.menubg table {  padding:0; border-collapse:collapse; }

/* Subscribe newsletter */
.newsletter1 { position:relative; display:inline-block; height:34px; border:solid 1px #cacecf; width:220px; border-right:0; margin-left:-90px; }
.newsletter1 select { position:absolute; top:8px; left:0; z-index:99; border:0; margin:0; padding:0; }
.newsletter1 input { position:absolute; top:0; left:0; z-index:98; padding: 0 10px 0 60px; color: #666; height:34px; width:150px; border:0; }
.newsletter1 .topSubscribe { height:34px; width:180px; display:inline-block }

.newsletter2 { position: relative; display:inline-block; height:34px; border:solid 1px #cacecf; border-right:0; width:275px; }
.newsletter2 input { position:absolute; top:0; left:0; padding: 0 10px; color: #666; height:34px; width:255px; border:0; }
.newsletter2 .topSubscribe { background:url('images/subscribe-input.png') no-repeat; height:34px; width:255px; display:inline-block }
.newsletter2 a.submit { height:34px; display:inline-block; position:absolute; top:-1px; left:275px;  padding:0 10px;
                        line-height:36px; color:#494949; border:solid 1px #cacecf;
                        background-color:#eaeaea;
                        transition: all 0.5s ease-out 0s; }
.newsletter2 a.submit:hover { background-color:#a0a0a0; text-decoration:none; color:#000; }
.newsletter2 .loading { position:absolute; top: 10px; left: 365px; } 

/* Pages */
.sub-title { color:#333; padding:40px 0 10px 32px; font-size:20px; letter-spacing:1px; font-weight:bold; }

.page-bg { margin: 0 0 20px 0; padding:0; }
.page-section { padding-left:32px; margin-bottom:40px; color:#333; }
.page-section:before, .page-section:after { content: ""; display: table; }
.page-section:after { clear: both; }
.page-section p { word-wrap:break-word; }

/* new category menu using ajax */
.bc-wrap { position: relative; padding:10px 0; border-bottom: 1px solid rgb(236, 236, 236); }
#breadcrumb { display:block; color:#333; line-height:40px; font-size: 16px; padding:0 20px; position:relative; margin:16px 0; }
#breadcrumb span { margin:0 3px; }
#breadcrumb a { color: #333; font-size: 16px; text-decoration: none; letter-spacing:1.4px; display:inline-block; }
#breadcrumb a:hover { color:#000000; }
#breadcrumb a:last-child { font-size:18px; font-weight:bold; }

/* Category Arrow - temporary solution for page browsing */
.ico-right { background:url('../../images/MasterImage(SBuy).png') no-repeat -743px -326px; width:14px; height:16px;  }
.ico-left { background:url('../../images/MasterImage(SBuy).png') no-repeat -757px -326px; width:14px; height:16px; } 

.secTitle { display:block; position:relative; font-size:24px; padding-left:20px; margin:20px 0 40px; line-height:60px; letter-spacing:1.0px; background-color:rgba(0, 0, 0, 0.1); }
.secTitle span { position:absolute; top:0; right:20px; font-size:16px; }
.secTitle:hover, .secTitle:focus { text-shadow: 0 1px 1px #888; }
.seemore { text-align:center; margin:0 0 60px 0; }
.seemore a, .resellerRF { display:inline-block; padding: 8px 20px; font-size:16px; background-color:#000; color:#fff; font-weight:bold; border-radius:2px; }
.seemore a:hover, .resellerRF:hover { background-color:#999; color:#fff; }

/* countdown for product */
.countdownp { }
.countdownp .num { font-size:10px; display:inline-block; }
.countdownp .h { display:inline-block; margin:0 4px 0 1px; }
.countdownp .over { font-size:12px; }

/* Category Banner */
.categoryBannerText { color:#333; }

/* Top menu - Category Level 1, 2 & 3 */
ul#navMenu { padding:0px; margin:0px; list-style:none; position:relative; display:inline-block; }

ul#navMenu ul { position:absolute; left:0; top:100%; display:none; padding:0px; margin:0px }

ul#navMenu li { display:inline-flex; position:relative; background-color:#fff;  }

ul#navMenu i { display:inline-flex; vertical-align: middle; font-size:18px; }

/*ul#navMenu a { text-decoration:none; padding: 13px 20px; width:auto; color:#7a7a7a; font-size:14px; }*/

ul#navMenu > li:hover a { color:#0a0a0a; }  /* Level 1 */

ul#navMenu li:hover ul { display:block; z-index:100; } /* Level 2 submenu show */
ul#navMenu li:hover ul a { color:#333; font-size:14px; display:block; text-align:left; } /* Level 2 a link color */

ul#navMenu ul a { width:200px; }   /* Level 2 and below: width style */
ul#navMenu > li > .submenu > li a { line-height:30px; }  /* level 2 li hover, a link style */
ul#navMenu > li > .submenu > li:hover a { background-color: #55595c; color: #fff; }  /* level 2 li hover, a link style */
ul#navMenu > li > .submenu > li:hover > ul > li a { background-color: #ffffff; color: #333; font-size:14px; }  /* Level 2 li hover, Level 3 style */
ul#navMenu > li > .submenu > li > ul > li:hover a { background-color: #55595c; color: #fff; }

ul#navMenu ul li { display:block; margin:0px }

ul#navMenu ul ul { top:0;left:100%; }

ul#navMenu li:hover ul ul { display:none; }  /* Level 3 hide when level 1 hover */

ul#navMenu ul li:hover ul { display:block; }  /* Level 3 submenu show */

/* Combo */
.cof { background:unset !important; background-color:rgba(255, 216, 0, 0.8) !important; }
.cof:hover { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); }

/* Just Purchase */
.justPurchase { display:none; position:fixed; left:10px; bottom:-80px; width:320px; background-color:#fcfcfc; box-shadow:0px 0px 2px rgba(0,0,0,0.5); height:80px;
                border-radius:3px; border:solid 1px #259959; font-family:Arial; color:#555; z-index:50; }
.justPurchase .purchase-text { font-size:0.8rem; color:#555; line-height:18px; max-height:36px; overflow:hidden; }
.justPurchase .purchase-prod { font-size:0.8rem; height:18px; line-height:18px; color:#259959; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }
.justPurchase .purchase-time { font-size:0.7rem; color:#999; padding-top:3px; height:12px; line-height:12px; }

/* Popup TNC at First Page */
.popupTNCWrapper {display:none; position: fixed; background-color:#fff; font-size:12px;}
.popupTNCWrapper .popupTNCHeader {height:40px;line-height:40px; padding:0 10px; background-color:#ff0000; color:#ffffff; font-weight:bold; text-transform:uppercase}
.popupTNCWrapper .innerScrollTNCContent {overflow:auto;}
.popupTNCWrapper .popupTNCContent {padding:10px; padding-bottom:0;}
.popupTNCWrapper .popupTNCButtonAgree {display:inline-block;background-color:#ff0000; color:#fff; padding:10px 16px; font-size:14px;cursor:pointer}

/* Popup AROT at First Page */
.popupAROTWrapper {display:none; position: fixed; background-color:#fff; font-size:20px;}
.popupAROTWrapper .innerScrollAROTContent {overflow:auto;text-align:center}
.popupAROTWrapper .popupAROTContent {padding:10px; padding-bottom:0;}
.popupAROTWrapper .popupAROTButtonAgree {display:inline-block;background-color:#ff0000; color:#fff; padding:10px 16px; font-size:14px;cursor:pointer}
.popupAROTWrapper .inline-flex-center { display:inline-flex; vertical-align: middle; margin-top:-3px;}