/*** Print Page ***/
@media print {
	#SITE_FOOTER_WRAPPER, #btn_print, #btn_save{
		display:none;
	}
}

/*** Loading ***/
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}
 

 @-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.lbl-confirm{
	float:left;
	width: 100%;
}

.load {
	display:none;
	float:left;
	width: 10px;
	height: 10px;
	margin-left: 35%;
	border:solid 4px #fff;
	border-radius: 50%;
	border-right-color: transparent;
	border-bottom-color: transparent;
	-webkit-transition: all 0.5s ease-in;
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         1.0s; 
    -webkit-animation-iteration-count:  infinite;
	transition: all 0.5s ease-in;
    animation-name:             rotate; 
    animation-duration:         1.0s; 
    animation-iteration-count:  infinite;
}

/**** MOBILE ****/
#SITE_HEADER_MOBILE{
	display:none;
}

#mobile_media{
	display: inline-flex;
}

#mobile_media li{
	margin: 10px;
}

#div_mobile_head{
	width: 35%;
}

#img_mobile_head{
	width: 100%;
}

.mobile-media-img{
	width: 30px;
	height: 30px; 
	object-fit: cover;
}

.main-container{
	font-size: 13px;
	margin-top: 1%;
	margin-bottom: 3%;
}

.buttons{
	margin-top: 15px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    background-color: #262262;
    color: #fff;
    text-align: center;
    font-weight: 600;
    width: 20%;
	cursor:pointer;
}

.buttons:hover{
	opacity: 0.8;
}

#mobile_search{
	display:none;
}

/**** Heading Banner ****/
.img-stage{
	width: 100%;
}

/**** Category ****/
#category{
	float:left;
	width:17%;
	height: 750px;
	border-right: 1px solid #000;
	padding-left: 3%;
}

#category ul li{
	margin-left: 10px;
	color: #000;
}

#cat_all{
	font-weight: 600;
}

.sub-ul{
	float:right;
	width:95%;
}

.cat-button{
	color:#000;
}

.cat-button:link{
	text-decoration: none;
}

.cat-title{
	float:left;
	width: 85%;
	margin-bottom: 3%;
	font-weight: 600;
}

.cat-product{
	float:left;
	width: 85%;
	margin-bottom: 2%;
	margin-left: 1%;
}

.cat-expand{
	width: 10px;
    border: 1px solid #000;
    text-align: center;
    height: 10px;
    font-size: 10px;
    float: left;
	margin-right: 5%;
	margin-top: 1px;
	cursor: pointer;
}

#btn_cart{
	margin-top:0px;
	width:90%;
}

#row_checkOrder{
	display: flex;
	margin: 10px 0px 15px 0px;
}

#txt_checkOrder{
	width:80%;
	border-radius: 3px 0px 0px 3px;
	margin-top: 0;
}

#btn_checkOrder{
	margin-top:0;
	border-radius: 0px 3px 3px 0px;
	height: 29px;
	line-height: 29px;
	width: 29px;
	color: #fff;
}

/**** Store Main Page ****/
#item_list{
	float:left;
	width:79%;
	min-height: 500px;
}

#item_list .item_container{
	float:left;
	width: 20%;
	margin: 0px 3% 3% 2%;
}

#item_list a:link{
	text-decoration: none;
}

#item_list .item_img{
	width: 100%;
}

#item_list .item_desc{
	font-size: 11px;
	font-weight: 800;
	color: #000;
	padding-top: 6px;
}

/**** Product Page ****/
.product-dtl, .product-neo, .product-jam{
	display: none;
}

#product_detail{
	float:left;
	width: 79%;
}

#container_left{
	float:left;
	width:23%;
	margin: 0px 2% 0px 3%;
}

.container-image {
	position: relative;
}

.img-large{
	width:100%;
	margin-bottom: 12px;
	cursor: pointer;
}

.img-small{
	width:31.5%;
	margin-right:1.25%;
	cursor: pointer;
}

.img-last{
	margin:0;
}

.arrow-left, .arrow-right{
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: 30%;
	cursor: pointer;
	opacity: 0.6;
	transition: 0.3s;
}

.arrow-left{
	border-width: 11px 11px 11px 0;
	border-color: transparent #000 transparent transparent;
	left: 5px;
}

.arrow-left:hover{
	border-width: 13px 13px 13px 0;
	left: 3px;
}

.arrow-right{
	border-width: 11px 0 11px 11px;
	border-color: transparent transparent transparent #000;
	right: 5px;
}

.arrow-right:hover{
	border-width: 13px 0 13px 13px;
	right: 3px;
}

.arrow-left:hover, .arrow-right:hover{
	opacity: 1;
	top: 29%;
}

.ul-spec li{
	font-weight:600;
	padding: 5px;
}

.btn-spec{
	margin: 0px 10px;
	width: 50px;
	border-radius:6px;
	border: 1px solid #262262;
	background-color:#fff;
	color:#262262;
}

.active{
	border: unset;
	background-color:#262262;
	color:#fff;
}

#container_order{
	margin-top: 15px;
	height:40px;
	line-height: 40px;
	border-radius:13px;
	background-color: #262262;
	color: #fff;
	text-align: center;
	font-weight:600;
}

#container_order:hover{
	opacity: 0.9;
}

.container-cart{
	margin-top: 15px;
	text-align:center
}

#cart_btns{
    display: inline-flex;
    line-height: 40px;
}

#cart_minus, #cart_add{
	width:35px;
	height:35px;
	line-height: 35px;
	border-radius:25px;
	color: #000;
	text-align: center;
	cursor:pointer;
	font-size:38px;
}

#cart_add{
	line-height: 38px;
}

#cart_qty{
	width:70px;
	height:35px;
	line-height: 38px;
	color: #000;
	text-align: center;
	font-size:30px;
}

#container_addtocart{
	width:40px;
	height:40px;
	line-height: 40px;
	border-radius:20px;
	background-color: #262262;
	color: #fff;
	text-align: center;
	font-weight:600;
	cursor:pointer;
	margin-left: 15px;
}

#container_addtocart:hover{
	opacity: 0.9;
}

#container_desc{
	float:left;
	width:60%;
}

#container_desc h2{
	font-size: 29px;
	font-weight: 800;
	margin-bottom: 13px;
}

#container_desc h3{
	font-weight: 600;
}

#container_desc p{
	margin: 13px 0px;
}

#container_desc p a{
	text-decoration: none;
	color: #762DDD;
}

.btn-del{
	font-size:15px;
	margin-left: 15px;
	cursor:pointer;
	color:red;
}

/**** Error Page ****/
#div_error{
	float:left;
	width:79%;
	min-height: 500px;
}

#section_error{
	padding-left: 3%;
}

#div_error h2{
	font-size: 20px;
	font-weight: 600;
	margin: 10px 0;
}

#a_retry{
	text-decoration: none;
	color: #762DDD;
}

/**** Make Order Page ****/
#container_order_form{
	float:left;
	width:50%;
	padding-left: 3%;
}

#container_order_form h2{
	font-size: 33px;
	color: #BCBEC0;
	font-weight: 800;
}

.form-group img{
	width:20%;
}

.order-product{
	display:flex;
	margin-top: 3%;
}

.order-delivery{
	margin-top: 3%;
	padding-top:5%;
	border-top: 1px solid #BCBEC0;
}

.order-delivery input{
	margin: 5px 0;
}

.rb-delivery{
	width: auto!important;
}

.lb-delivery{
	float: none!important;
	margin-left: 5px;
}

#div_delivery_address{
	margin: 8px 0;
	display:none;
}

.delivery-link{
	text-decoration: none;
    color: #762DDD;
}

.order-product-middle{
	width: 60%;
	padding-left: 2%;
	position: relative;
}

.order-product-middle div{
	float:left;
}

.order-product .order-title-qty{
	float:left;
	width:100%;
	position: absolute;
}

.order-product .order-title-qty:first-child{
	top:30%;
}

.order-product .order-title-qty:nth-child(2){
	top:50%;
}

.order-title{
	line-height: 25px;
	font-weight: 600;
}

.order-qty{
	float: right!important;
}

.txt-qty{
	float: left;
    width: 40px;
    text-align: center;
    font-weight: 600;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #BCBEC0;
}

.qty-minus, .qty-plus{
	margin: 0px 6px;
	text-align: center;
	line-height: 25px;
    font-size: 20px;
    font-weight: 600;
    width: 16px;
    font-family: fangsong;
	cursor: pointer;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

#row_subtotal{
	text-align: right;
    font-weight: 800;
    border-top: 1px solid #BCBEC0;
	padding:5px;
}

#row_discount{
	text-align: right;
	padding: 0px 5px;
}

.form-input{
	margin-top: 3%;
}

.form-group label{
	float:left;
	width:100%;
	font-weight: 600;
}

.form-input input{
	width: 100%;
    border: 1px solid #BCBEC0;
    border-radius: 3px;
    padding: 6px 8px;
	margin-top: 5px;
}

#txt_discount{
	width: 150px;
	border-radius: 3px 0px 0px 3px;
}

#txt_discount::placeholder {    
    /* Firefox, Chrome, Opera */
	text-align: right;
}

#btn_discount{
	margin-top:0;
	border-radius: 0px 3px 3px 0px;
	height: 29px;
	line-height: 29px;
	width: 65px;
}

.ui-dialog-titlebar-close {
	visibility: hidden;
}

/**** Order Status Page ****/
.row-checkbox{
	width:100%;
}

.checkbox-input{
	float:left;
	width: 5%!important;
	margin:0px;
}

.checkbox-label{
	float:left;
	width: 92%!important;
	line-height: 25px;
}

#div_upload_payment{
	display:none;
	margin-top:1%;
}

.option-payment{
	display:inline-flex;
}

.div-radio{
	align-self: center;
}

.img-radio{
	width: 25%!important;
}

#row_order_table, #row_order_upload, #row_order_conditions{
	width:95%;
	margin-top:5%;
	padding-top:5%;
	border-top:1px solid #000;
}

#row_order_upload{
	margin-top: 0;
	padding-top: 0;
	border-bottom: 1px solid #000;
}

#row_order_conditions{
	margin-top: 0;
	padding-top: 0;
	border-top: unset;
}

.tbl-order{
	width:100%;
}

.tbl-order td{
	width: 33.33%;
	padding: 10px 0;
	font-weight: 600;
}

.tbl-order td:nth-child(1){
	width: 35%;
}

.tbl-order td:nth-child(2){
	width: 50%;
}

.tbl-order td:nth-child(3){
	width: 15%;
}

.tbl-order .tr-cm td{
	padding-top: 0;
}

.tbl-order .td-price{
	text-align: right;
}

/***** Hamburger *****/
#toggle {
  display: none;
}

/**
  Hamburger
**/
.hamburger {
  position: absolute;
  top: 8em;
  right: 28%;
  margin-left: -2em;
  margin-top: -45px;
  width: 2em;
  height: 45px;
  z-index: 5;
}

.hamburger div {
  position: relative;
  width: 4em;
  height: 6px;
  background-color: #000;
  margin-top: 7px;
  transition: all 0.3s ease-in-out;
}

/**
Nav Styles
**/
.nav {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.9;
  top: -100%; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  z-index: 4;
}
.nav-wrapper {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
}
#nav_menu {
  text-align: center;
  margin-top: 80px;
}
#nav_menu a {
  position: relative;
  text-decoration: none;
  color: #000;
  font-size: 2.5em;
  line-height: 25px;
  display: inline-block;
  margin-top: 1.25em;
  transition: color 0.2s ease-in-out;
  letter-spacing: 1px;
  font-weight: 600;
}
#nav_menu a:before {
  content: '';
  height: 0;
  position: absolute;
  width: 0.25em;
  background-color: white;
  left: -0.5em;
  transition: all 0.2s ease-in-out;
}
#nav_menu a:hover {
  color: #762DDD;
}
#nav_menu a:hover:before {
  height: 100%;
}

/**
Animations
**/
#toggle:checked + .hamburger .top-bun {
  transform: rotate(-45deg);
  margin-top: 25px;
}
#toggle:checked + .hamburger .bottom-bun {
  opacity: 0;
  transform: rotate(45deg);
}
#toggle:checked + .hamburger .meat {
  transform: rotate(45deg);
  margin-top: -7px;
}

#toggle:checked + .hamburger + .nav {
  top: 0;
  transform: scale(1);
}

/**************** Responsive ******************/
@media screen and (max-width: 1200px){
	#container_left{
		width:30%;
	}
}

@media screen and (max-width: 1023px) {
	#main_MF{
		overflow:hidden;
	}
	
	#masterPage.mesh-layout{
		grid-template-columns: 100%;
	}
}

@media (min-width: 950px) and (max-width: 980px) {
	#masterPage.mesh-layout{
		grid-template-columns: 96%!important;
	}
	
	.hamburger{
		right: 11%;
	}
}

@media (min-width: 912px) and (max-width: 949px) {
	#masterPage.mesh-layout{
		grid-template-columns: 92%!important;
	}
	
	.hamburger{
		right: 15%;
	}
}

@media (min-width: 880px) and (max-width: 911px) {
	#masterPage.mesh-layout{
		grid-template-columns: 90%!important;
	}
	
	.hamburger{
		right: 17%;
	}
}

@media (min-width: 850px) and (max-width: 879px) {
	#masterPage.mesh-layout{
		grid-template-columns: 86%!important;
	}
	
	.hamburger{
		right: 20%;
	}
}

@media (min-width: 820px) and (max-width: 849px) {
	#masterPage.mesh-layout{
		grid-template-columns: 83%!important;
	}
	
	.hamburger{
		right: 23%;
	}
}

@media (min-width: 795px) and (max-width: 819px) {
	#masterPage.mesh-layout{
		grid-template-columns: 81%!important;
	}
	
	.hamburger{
		right: 25%;
	}
}

@media screen and (max-width: 980px) {
	#SITE_HEADER_WRAPPER{
		display:none;
	}
	
	#SITE_HEADER_MOBILE{
		display:block;
	}
	
	#SITE_HEADER-placeholder{
		display:none;
	}
	
	#masterPage.mesh-layout{
		grid-template-columns: 78%;
	}
	
	#div_mobile_head{
		width: 50%;
		margin-left: 27%;
	}
	
	#mobile_media{
		margin-left: 41%;
	}
	
	#category{
		z-index: 1;
		background: #fff;
		position: absolute;
		display:none;
		position: absolute;
		top: 8%;
		width: 35%;
		border-right: none;
		opacity: 0.9;
	}
	
	#item_list, #div_error{
		width:100%;
	}
	
	#item_list .item_container{
		width: 28%;
	}
	
	#product_detail{
		width: 100%;
	}
	
	#mobile_search{
		display: block;
		left: 6%;
		z-index: 3;
	}
	
	#mobile_search i{
		font-size: 35px;
		padding-top: 5px;
	}
	
	#container_left, #container_desc{
		width: 60%;
		margin-left: 21%;
	}
	
	#container_desc{
		margin-top: 3%;
	}
	
	#container_desc h2{
		font-size: 25px;
	}
	
	#container_order_form {
		width: 80%;
		padding-left: 10%;
	}
}

@media screen and (max-width: 768px){
	#container_order_form .form-group img{
		width: 25%;
		max-height: 150px;
	}
}

@media screen and (max-width: 720px) {
	#masterPage.mesh-layout{
		grid-template-columns: 73%!important;
	}
	
	.hamburger{
		right: 32%;
	}
}

@media screen and (max-width: 690px) {
	#masterPage.mesh-layout{
		grid-template-columns: 70%!important;
	}
	
	.hamburger{
		right: 35%;
		top: 8em;
	}
	
	.hamburger div{
		width: 3em;
		height: 4px;
	}
	
	#mobile_search i{
		font-size: 30px;
	}
}

@media screen and (max-width: 660px) {
	#masterPage.mesh-layout{
		grid-template-columns: 67%!important;
	}
	
	.hamburger{
		right: 38%;
	}
}

@media screen and (max-width: 630px) {
	#masterPage.mesh-layout{
		grid-template-columns: 64%!important;
	}
	
	#category{
		top: 150px;
	}
	
	#mobile_media{
		margin-left: 39%;
	}
	
	.hamburger{
		right: 41%;
	}
}

@media screen and (max-width: 600px) {
	#masterPage.mesh-layout{
		grid-template-columns: 61%!important;
	}
	
	.hamburger{
		right: 44%;
		top: 7em;
	}
	
	#container_order_form h2{
		font-size: 35px;
	}
}

@media screen and (max-width: 570px) {
	#masterPage.mesh-layout{
		grid-template-columns: 58%!important;
	}
	
	.hamburger{
		right: 48%;
	}
	
	#container_left, #container_desc{
		margin-left: 22%;
	}
	
	#container_order_form{
		width: 85%;
		padding-left: 5%;
	}
	
	#container_order_form h2{
		font-size: 30px;
	}
}

@media screen and (max-width: 530px) {
	#masterPage.mesh-layout{
		grid-template-columns: 54%!important;
	}
	
	.mobile-media-img{
		width: 25px;
		height: 25px;
	}
	
	.hamburger{
		right: 51%;
	}
	
	#container_order_form{
		width: 90%;
		padding-left: 5%;
	}
	
	#container_order_form .form-group img{
		width: 35%;
		max-height: none;
	}
}

@media screen and (max-width: 500px) {
	#masterPage.mesh-layout{
		grid-template-columns: 50%!important;
	}
	
	.hamburger{
		right: 54%;
		top: 6.5em;
	}
	
	.hamburger div{
		width: 3em;
		height: 3px;
	}
	
	#container_left, #container_desc {
		margin-left: 5%;
		width: 90%;
	}
	
	#container_order_form{
		width: 93%;
		padding-left: 4%;
	}
	
	.order-product-middle{
		width: 61%;
	}
}

@media screen and (max-width: 470px) {
	#masterPage.mesh-layout{
		grid-template-columns: 48%!important;
	}
	
	.hamburger{
		right: 56%;
	}
	
	#mobile_search i{
		font-size: 25px;
	}
	
	#container_order_form h2{
		font-size: 25px;
	}
	
	.order-product{
		display: block;
		text-align: center;
	}
	
	#container_order_form .form-group img{
		float:unset;
		width: 40%;
	}
	
	.order-product-middle{
		width: 96%;
		float:left;
		margin: 15px 0px;
	}
	
	.order-product .order-title-qty {
		position: initial;
		margin:5px 0;
	}
	
	#row_subtotal{
		border-top: unset;
	}
}

@media screen and (max-width: 440px) {
	#masterPage.mesh-layout{
		grid-template-columns: 45%!important;
	}
	
	#category{
		top: 5%;
	}
	
	.hamburger{
		right: 59%;
	}
	
	.hamburger div{
		margin-top: 6px;
	}
	
	#mobile_search i{
		font-size: 26px;
		padding-top:3px;
	}
	
	#mobile_media{
		margin-left: 36%;
	}
}

@media screen and (max-width: 420px) {
	#masterPage.mesh-layout{
		grid-template-columns: 43%!important;
	}
	
	.hamburger{
		right: 61%;
	}
	
	#mobile_search i {
		font-size: 24px;
		padding-top: 1px;
	}
	
	
}

@media screen and (max-width: 400px) {
	#masterPage.mesh-layout{
		grid-template-columns: 41%!important;
	}
	
	.hamburger{
		right: 63%;
	}
	
	.hamburger div{
		width:2.5em;
		height: 3px;
		margin-top: 4px;
	}
}

@media screen and (max-width: 375px) {
	#masterPage.mesh-layout{
		grid-template-columns: 39%!important;
	}
	
	.hamburger{
		right: 65%;
	}
	
	.mobile-media-img{
		width: 22px;
		height: 22px;
	}
	
	#mobile_media{
		margin-left: 35%;
	}
}