html, body { background:#fdfdfd;
font-family:'Roboto', Helvetica, Arial, sans-serif;
font-size:16px;
color:#333;
scroll-behavior:smooth;
}
input[type=text],
textarea
{ font-size:16px;
width:100%;
}
.readonly input,
.readonly select { background-color:transparent;
border:0;
pointer-events: none;
}
.readonly input::placeholder
{ color:transparent }
#cmdSaveAccount { display:none }
#cmdEditAccount { display:block }
#cmdSaveAccount.editmode
{ display:block }
#cmdEditAccount.editmode
{ display:none }
.announcement { background-color:#000;
color:#fff;
font-size:16px;
}
#divOverlay { background: #000;
opacity:0.4;
transition: all 0.1s ease-in;
}
#divLeftMenu { background: #fff;
transition: all 0.2s ease-in;
overflow:hidden;
box-shadow:none;
}
#divLeftMenuHeader { text-align:right;
font-size:18px;
background:#e3e3e3 url('../images/left_menu_logo.png') no-repeat left center;
}
#divLeftMenuHeader i
{ cursor:pointer }
#divHeader { background:#fa8001;
border-bottom:solid 1px #d46200;
box-shadow: 8px 0 8px 2px rgb(0 0 0 / 20%);
}
#divLogo { background:url('../images/logo_mobile.jpg') no-repeat; }
#divMenu { background:#fff url('../images/tagline.jpg') center right no-repeat;
border-bottom:solid 1px #ccc;
}
#divSearchWrapper { border: 1px solid #e0e0e1;
border-radius:6px 0 0 6px;
border-left:none
}
#txtSearch { border:0;
font-size:16px;
background:transparent;
outline:0;
color: #505050;
}
.ui-autocomplete { overflow-y: auto;
overflow-x: hidden;
font-size:12px;
}
#cmdSearch,
#divSearchContainer > i,
#divSearchBy,
#divCart
{ cursor:pointer }
#divSearchBy:hover { background-color:#ffe2c5 }
#divSearchByList { border:none;
box-shadow: 0 5px 25px rgb(0 0 0 / 10%);
background:#fff;
border-radius:6px;
transform-origin: top;
transform: scaleY(0);
transition: all .2s ease;
cursor:default;
font-size:14px;
}
#divSearchByList.show_list
{ transform: scaleY(1) }
#divSearchByList span,
#left_menu_container span
{ color:#aeaeaf;
font-weight:700;
font-size:13px;
font-family:'Roboto', sans-serif;
}
#divSearchByList ul li a
{ color:#37495d }
#divSearchByList ul li a:hover
{ font-weight:700 }
#cmdSearch {
border: 1px solid #c26300;
border-left: 0;
border-radius: 0 6px 6px 0;
background-color: #c26300;
}
#cmdSearch:hover,
#search_button:hover + #cmdSearch
{ background-color:#874500 }
::placeholder { color:#999 }
#divCart { background: url('../images/cart.png') no-repeat center left }
#spanCart { font-size: .8rem;
color: #fff;
background-color: #58a34e;
border: solid 2px #fa8001;
border-radius: 50%;
font-family: sans-serif;
box-sizing: border-box;
text-align:center;
}
.footer1 { color: #fff;
background-color:#ff9425;
}
#divDelivery { background-color:#fa8001 }
#divDelivery span { color:#fff }
#divDelivery p span { font-weight:bold;
color:#72ff38;
}
.footer2 { background:#000;
font-size:16px;
color:#e2e2e2;
display:flex;
flex-direction: column-reverse;
text-align:center;
}
.footer2 i { font-size: 30px }
#divCopyright { flex-grow:1 }
.footer2 ul li { display:inline }
a { color:#ffffff;
text-decoration:none;
}
a.submenu,
#divUserMenus ul li a
{ color:#37495d;
font-size:14px
}
#divBeef ul li a.submenu:hover,
#divPork ul li a.submenu:hover,
#divChicken ul li a.submenu:hover,
#divFresh ul li a.submenu:hover,
#divGroceries ul li a.submenu:hover,
#divOthers ul li a.submenu:hover
{ border:0; }
a:hover { color:#ffff00; }
a.header:hover { color:#ffffff; }
ul { list-style: none }
a.menu { float: left;
color: #333;
}
ul#menu li a:hover,
ul#left_menu li a:hover
{ color: #fa8001; }
li#mnuBeef > a:hover,
li#mnuPork > a:hover,
li#mnuChicken > a:hover,
li#mnuFresh > a:hover,
li#mnuOthers > a:hover
{ background-color:#fff7ee; }
ul.submenu li:hover { background:#f8f8f8; }
ul.submenu li:not(:last-child)
{ border-bottom:solid 1px #eee }
#divPork ul li a:hover,
#divBeef ul li a:hover,
#divChicken ul li a:hover,
#divFresh ul li a:hover,
#divOthers ul li a:hover,
#divUserMenus ul li a:hover
{ color:#333;
font-weight:bold;
text-decoration:none;
}
ul#left_menu { font-weight:bold }
ul#left_menu li { font-size:16px;
border-bottom:1px solid #ccc;
color:#333;
}
#divLeftMenu a { color: #333; }
#divLeftMenu a:hover
{ color: #ff8200; }
#mnuCatBeef,
#mnuCatPork,
#mnuCatChicken,
#mnuCatFresh,
#mnuCatOthers { font-weight:normal;
list-style:square;
margin-left:25px;
}
#divCatBeef ul li,
#divCatPork ul li,
#divCatChicken ul li,
#divCatFresh ul li,
#divCatOthers ul li { border:none }
.title { font-family: tahoma, arial;
font-size:16px;
font-weight:bold;
}
#divUserAccount { background: #fff;
color:#333333;
text-align:center;
color:#3a2a2f;
}
#cmdTop { border:0;
outline:none;
background-color:#46b900;
color:#fff;
cursor:pointer;
border-bottom-left-radius:5px;
font-size:12px;
}
#cmdTop:hover { background-color: #ff0000; }
.sidebar #divLeftMenu
{ box-shadow: 8px 0 8px 2px rgb(0 0 0 / 10%) }
#divNavigation a { color:#fa8001 }
#divNavigation a:hover
{ color:#ff0000 }
.search_result { color: #686868;
font-weight: 100;
}
.search_result span { font-weight:bold }
/* ###### GRID ###### */
.grid_container { display: grid;
grid-template-columns: auto auto;
padding:0;
max-width: fit-content;
margin-left:auto;
margin-right:auto;
}
.list_view #spanIcon i
{ color:#ccc }
.list_view #spanList i
{ color:#fa8001 }
.list_view div.grid_container
{ display:flex;
flex-direction: column;
max-width: none;
}
.list_view div.grid_container > div
{ border-bottom:solid 1px #ccc }
.list_view div.item
{ width:auto;
margin:0;
display:flex;
box-shadow: none;
background-color:#fff;
border-radius:0;
flex-direction:row
}
.list_view div.item_image img
{ width:120px; }
.list_view div.item_description
{ font-size:18px }
.list_view div.item_department
{ display:block;
padding-left:10px;
}
.list_view div.item_price
{ flex:1;
padding-left:10px;
}
.list_view .add2cart
{ flex:0;
max-width:200px;
margin-bottom:15px;
}
/* ###### CONTENT ###### */
#divContentWrapper { padding:10px }
#divNavigation { padding:0 15px;
color:#949494;
font-family:'Nunito Sans';
}
/* ###### SLIDERS ###### */
.slick-slide { width: 200px;
height: inherit !important;
}
.slick-slide img { width:100% }
.slick-track { display: flex !important; }
.slick-prev, .slick-next
{ top: unset !important;
bottom: -60px !important;
height:32px !important;
width:32px !important
}
.slick-prev { left:0 !important }
.slick-next { left:30px !important }
.category_section { padding:0 15px }
.category_header { padding:5px;
display:flex;
justify-content: space-between;
border-bottom:solid 1px #cfcfcf;
align-items: center;
}
.category_title { font-size:25px;
font-weight:bold;
color:#2b2b2b;
}
.category_info { display:grid;
grid-template-columns:150px auto;
grid-row-gap:5px;
padding:15px;
font-size:14px;
}
.category_items { padding:0;
margin-bottom:50px;
}
.item { padding:0;
box-shadow: 0 1px 8px rgb(0 0 0 / 10%);
margin:20px 10px;
border-radius:6px;
background-color:#f6f6f6;
overflow:hidden;
display:flex;
flex-direction:column;
}
.item_image { padding:5px;
background-color:#fff;
border-radius:6px 6px 0 0;
cursor:pointer
}
.item img { opacity: 0.9;
width: 100%;
height: auto;
}
.item img:hover { opacity:1 }
.item_details_wrap { position:relative;
flex:1;
display:flex;
flex-direction:column;
}
.item_description { font-size:14px;
font-weight:600;
padding:5px 0 0 10px;
color:#1c1c1c;
flex:1;
}
.item_department { display:none;
color: #ba6868;
}
.item_remarks { padding:10px 0 0 10px;
font-size:16px;
}
.item_price { font-size: 20px;
font-weight:bold;
color:#a82226;
padding:5px 10px;
}
.item_price span { font-size:13px }
.add2cart { color:#f6f6f6;
padding:8px;
background-color:#fa8001;
margin:10px;
border-radius:3px;
text-align:center;
border:0;
outline: none;
font-size:16px;
font-weight:bold;
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.plus:hover,
.minus:hover,
.add:hover,
.add2cart:hover { background-color:#c46400 }
.qty_wrap { padding:0;
display:flex;
border:0;
margin:20px 10px;
width:320px;
}
.plus, .minus, .add { border:0;
color:#fff;
font-weight:bold;
font-size:20px;
width:100px;
background-color: #fa8001;
}
.plus { border-radius: 0 4px 4px 0 }
.minus { border-radius: 4px 0 0 4px }
.add { border-radius: 4px;
margin-left: 5px;
width:300px;
}
#txtQuantity { border-top:solid 1px #787878;
border-bottom:solid 1px #787878;
border-left:0;
border-right:0;
background-color:#fff;
outline:none;
font-size:30px;
padding:5px;
width:100%;
text-align:center;
}
.thumb { margin:0 5px !important }
.focus { padding:0;
margin:20px 5px;
}
.focus img { border-radius:6px }
.product_container { display:grid;
flex-direction:column;
margin:10px;
grid-template-columns: auto
}
.product_container .item_description
{ font-size:20px }
.product_container .item_price
{ font-size:40px;
margin-top:10px
}
.product_container .item_price span
{ font-size:30px }
.product_container .add2cart
{ flex:1;
background-color: #fa8001;
padding:15px;
font-size:20px;
}
.product_container .add2cart:hover
{ background-color: #c46400 }
#divProductWrapper { position:relative;
min-width:250px;
margin-top:15px;
background:#fff;
border-radius:10px;
}
.solo { display: flex;
justify-content: center;
background-color:#fff;
border-radius:10px;
}
.solo img { width:100%;
max-width:400px;
border-radius:10px;
}
a.category:link,
a.category:active,
a.category:visited { font-size:14px;
color:#fa8001;
}
a.category:hover { color:#ff0000; }
.category_header i { font-size: 20px;
padding-left:10px;
cursor:pointer;
}
#spanIcon i { color:#fa8001 }
#spanList i { color:#ccc }
.category_header i:hover
{ color:#ff0000 }
/* ####### BASKET ######### */
.cart { margin:10px }
.cart .item_details_wrap
{ display:block;
padding-top:5px;
}
.cart img { width:80px !important}
.cart .item_description,
.cart .item_price
{ font-weight:normal;
font-size:16px !important;
color:#1c1c1c;
}
.cart .item_description i
{ position:absolute;
right:10px;
top:20px;
font-size:16px;
}
.cart .item_total_amount
{ flex:1;
position:absolute;
right:10px;
font-weight:bold;
color:#6a6a6a;
font-size:17px;
}
.empty_cart { background-color: #f0f0f0;
margin:20px 0;
/*padding:20px;*/
display:flex;
align-items:center;
justify-content:center;
height:200px;
border-radius:6px;
}
.empty_cart div { text-align:center }
.ui-dialog { font-size:13px }
.cart_add,
.cart_plus,
.cart_minus { width:40px;
border:0;
font-size:18px;
background-color:#e0e0e0;
padding:5px;
}
.cart_add:hover,
.cart_plus:hover,
.cart_minus:hover { opacity:0.8 }
.cart_minus { border-radius: 3px 0 0 3px;
width:30px;
}
.cart_plus { border-radius: 0 3px 3px 0;
width:30px;
}
.cart_add { border-radius: 3px;
font-size: 10px;
margin-left:3px;
width:40px
}
.cart_qty { text-align:center;
border:0;
font-weight:bold;
font-size:18px;
width:60px !important;
outline:0;
}
.subtotal { font-size:25px;
font-weight:bold;
display:flex;
}
.reorder { position:absolute;
right:5px;
bottom:0;
font-size:12px
}
#btnCheckOut { background-color:#46b900;
flex:1;
max-width:unset;
margin: 15px 0;
}
#btnCheckOut:hover { opacity:0.8 }
.history { background-color:#fff;
padding:10px;
margin:10px 5px;
border: 1px solid #e1e8ed;
border-radius:5px;
position:relative;
cursor:default;
}
.history:hover { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
background-color:#fff9f2;
}
.history span { position:absolute;
top:5px;
right:10px;
font-size:12px;
color:#ff8200;
}
.caption { font-size:12px;
color:#d26b00;
font-weight:bold;
}
/* ###### OUR STORE ###### */
.slider-wrapper { margin-top:0;
max-width: 880px;
width:100%;
align-self: center;
}
.slider-for { padding: 0 }
.slider-nav { padding: 0 5px }
.slider-nav .slick-dots
{ margin: 0 }
.slider-nav .slick-dots li
{ margin:0 }
.vision_mission { padding:10px;
background-color:#eee;
display:grid;
grid-template-columns: auto;
grid-row-gap: 5px;
}
.vision_mission h1 { font-size:25px }
#divMission { background-color: #d26b00;
border-radius: 30px 0 0 0;
}
#divVision { background-color: #44b400;
border-radius: 0 0 25px 0;
}
#divMission h1 { color: #d26b00;
font-weight:bold;
margin:0;
padding:10px;
background-color: #ffe0c0;
border-radius: 25px 0 0 0;
}
#divVision h1 { color:#2a6f00;
font-weight:bold;
margin:0;
padding:10px;
background-color: #d6ffbd;
}
.vision_mission p { padding: 20px;
color:#fff8f8;
font-size:20px
}
@media screen and (min-width:600px){
::placeholder { font-size: 14px }
#divUserAccount { top:70px;
right:10px;
width:355px;
border-radius:5px;
box-shadow: 2px 2px 10px #999999;
}
#divUserAccount:after
{ content:"";
display:block;
position:absolute;
top:-19px;
left:285px;
width:0;
height:0;
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 10px;
overflow:none;
}
#divDelivery { background-color:#ff9425 }
}
@media only screen and (min-width: 680px){
.grid_container { grid-template-columns: auto auto auto }
.list_view div.item_description
{ font-size:25px }
}
@media screen and (min-width:700px){
#divSearchBy { align-items:center;
background: #fff1e3;
border: 1px solid #e0e0e1;
border-radius: 6px 0 0 6px;
border-right: none;
flex-shrink: 0;
padding:10px;
}
#divSearchWrapper
{ border-radius:0 }
.search_mode #divLogo
{ display:block }
.footer2 { flex-direction: row;
text-align:left;
padding:5px 10px 15px 10px;
}
.footer2 i { font-size: 25px }
.category_items { padding:10px 40px; }
}
@media only screen and (min-width: 870px){
.grid_container { grid-template-columns: auto auto auto auto }
.vision_mission { grid-template-columns: auto auto;
column-gap: 5px;
padding:20px;
}
.vision_mission h1
{ font-size:30px }
.vision_mission p
{ font-size: 25px }
.slider-wrapper { margin-top:50px }
.slider-for { padding:10px 35px }
.slider-nav { padding: 10px 40px }
.slider-nav .slick-dots
{ margin:0 -40px }
.slick-prev, .slick-next
{ top: 50% !important; }
.slick-next { left: unset !important;
right:0 !important;
}
.product_container
{ margin:20px;
grid-template-columns: 400px auto;
}
.product_container .add2cart
{ flex:unset;
min-width:200px;
color:#fff;
}
.product_container .item_description
{ font-size:30px }
#divProductWrapper
{ margin: 0 10px }
}
@media screen and (min-width:970px){
#divDelivery { background-color:#fa8001 }
#divDelivery span
{ color:#fff }
}
@media screen and (min-width:1135px){
#divHeader { box-shadow: none }
#divLogo { background:url('../images/logo.jpg') no-repeat right center; }
::placeholder { font-size: 15px; }
#divUserAccount { top:80px; }
#divBeef,
#divPork,
#divChicken,
#divFresh,
#divOthers,
#divGroceries { display:none;
z-index:1;
position:absolute;
background-color:#ffffff;
border:solid 1px #ccc;
font-weight:normal;
top:141.5px;
box-shadow: 0 3px 4px 0.08px rgba(0, 0, 0, 0.1);
}
#divBeef { left:93px;
width:200px;
}
#divPork { left:195px;
width:200px;
}
#divChicken { left:296px;
width:200px;
}
#divFresh { left:423px;
width:200px;
}
#divOthers { left:596px;
width:200px;
}
}
@media screen and (min-width:1160px){
.category_section
{ padding:20px 80px }
#divNavigation { padding:0 20px }
}
@media only screen and (min-width: 1240px){
.grid_container { grid-template-columns: auto auto auto auto auto }
}
@media only screen and (min-width: 1430px){
.grid_container { grid-template-columns: auto auto auto auto auto auto }
}
.notice { padding: 20px 30px }
*:before, *:after { box-sizing: border-box }