body:before {
	height: 249px;
}

section.foodMenuSection {
	flex-direction: column;
}

/*reset materialize css*/
nav {
	height: inherit;
}

nav#foodMenuNav ul li:hover,
nav#foodMenuNav ul li.active{
	background-color: inherit;
}

.foodMenuSection {
	position: fixed;
    width: 100%;
    z-index: var(--menu-z-index);
    top: var(--header-height);
	background: white;
}

#foodSubMenu ul,
#foodMenuNav ul {
	display: flex;
	justify-content: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/*to balance spacing when indicator added*/
#foodMenuNav ul {
	padding-top: 1em;
}

#foodSubMenu ul li, 
#foodMenuNav ul li{
	float: none;
}

#foodMenuList .nameAnchor {
    top: -300px;
}

.foodMenuItem {
	color: #aaaaaa;
	text-align: center;
}

#foodMenuNav .foodMenuItem.active,
#foodMenuNav .foodMenuItem:hover {
	color: #538786;
}


#foodMenuNav .foodMenuItem:after {
	display: block;
	content: " ";
	width:0;
	height: 6px;
	background: #dde7e7;
	transition: width 0.2s ease;
	margin: 0 auto;
}

#foodMenuNav  .foodMenuItem:hover:after,
#foodMenuNav .foodMenuItem.active:after {
	
	width: 100%;
	
	
}
.foodMenuItem span{
	display: block;
	line-height: 1.5;
}

#foodMenuNav .foodMenuItem .name_eng{
	font-size: 0.8rem;
}

#foodMenuNav .foodMenuItem .name_chi{
	font-size: 1.25rem;
}

#foodMenuNav .swiper-slide,
#foodSubMenu .swiper-slide {
		flex-shrink: 0;
		width: auto;
		height: auto;
		float:none;
		
	}

#foodSubMenu {
	background-color: #cde7df;
}

#foodSubMenu .foodMenuItem .name_eng{
	font-size: 0.75rem;
	color: #538786;
}

#foodSubMenu .foodMenuItem .name_chi{
	font-size: 1rem;
	color: #538786;
}

/*
.menuSet .items:before {
	display: block;
	height: 200px;
	content: " ";
}
*/
#foodMenuList .contentWrap {
	padding-top: 0;
	padding-bottom: 0;
	flex-direction: column;
}

.menuSet {
	display: flex;
	margin-bottom: 8rem;
}

.menuSet:nth-child(even) {
	
}

.menuSet:nth-child(even) .items {
	order:1;
	padding-left: 4rem;
}

.menuSet:nth-child(even) .images img {
	transform-origin: right top;
}

.menuSet:nth-child(even) .menuItemInfo {
	margin-right: 0;
}

.menuSet .images img {
	max-width: 100%;
	transform: scale(1.1);
	transform-origin: left top;
	
	position: sticky;
	top: 249px;
}

.menuSet >div {
	width: calc(100% * 8/12);
}

.menuSet .images {
	width: calc(100% * 4/12);
}

.menuSet .heading {
	margin-top: 4rem;
	margin-bottom: 4rem;
	color: #49a5a4;
}

.menuSet .heading div:first-child {
	font-size: 2rem;
}

.menuSet .heading div:nth-child(2) {
	font-size: 4rem;  
}

.menuSet .subHeading {
	position: relative;
	color:#848484;
}
.menuSet .subHeading div:first-child {
	font-size: 1.75rem;
}

.menuSet .subHeading div:nth-child(2) {
	font-size: 3rem;  
}

.menuItemRow {
	display: flex;
	align-items: center;
	
	margin-bottom: 1rem;
}

.menuItemRow .menuItemImage img{
	max-width: 130px;
}
	


.menuItemInfo {
	flex: 1;
	
	margin-left: 1rem;
	margin-right: 4rem;
	border-bottom: 1px solid black;
	
}

.menuItemName{max-width: 70%;}

.menuItemInfo .menuItemName >div:nth-child(1){
	font-size: 0.75rem;
}

.menuItemInfo .menuItemName >div:nth-child(2){
	font-size: 1.5rem;
}

.menuItemName_eng {
	word-break: inherit;
}

.menuItemInfo .price{
	display: flex;
	text-align: center;
	font-size: 2rem;
	color: #b26122;
}
.menuItemInfo .price >div {
	margin-left: 0.75rem;
}

.menuItemInfo .price .priceOptionLabel{
	font-size: 0.85rem;
}

.menuItemInfo >div {

	
	display:flex;
	justify-content: space-between;
	align-items:flex-end;
}

@media only screen and (max-width:1400px) {
	.menuSet .images img {
		transform: none;
	}
}

@media only screen and (max-width:1280px) {
	.menuItemInfo >div{
		display: block;
	}
	
	.menuItemName {
		max-width: 100%;
	}
}

@media only screen and (max-width:960px) {
	.menuSet >div {
		width: inherit;
	}
	
	.menuSet .items {
		width: 70%;
	}
	
	.menuSet .images {
		width: 30%;
	}
	
	.menuSet:first-child .images{
		padding-top: 30%;
	}
	
	.menuSet:first-child .images img{
		top: 240px;
	}
	
	
}

@media only screen and (max-width:768px) {
	body:before {
		height: 276px;
	}
	
	section.foodMenuSection {
		
	}
	
	#foodMenuList .nameAnchor {
		top: -300px;
	}
	
	nav ul li:hover, nav ul li.active {
		background: none;
	}
	
	#foodMenuNav, #foodSubMenu {
		height: auto;
		overflow: hidden;
	}
	
	
	#foodSubMenu ul, #foodMenuNav ul{
		justify-content: flex-start;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	
	
	#foodSubMenu .foodMenuItem .name_chi {
		
	}
	
	.menuSet .heading {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	

	
	.menuSet .heading div:first-child{
		font-size: 1.75rem;
	}
	
	.menuSet .heading div:nth-child(2){
		font-size: 2.75rem;
	}
	
	.menuSet .images {display:none;}
	
	.menuSet {
		margin-bottom: 3rem;
	}
	
	.menuSet >div {
		width: 100%;
	}
	
	.menuSet .items {
		width: 100%;
	}
	
	.menuSet .images {transform:none;}
	
	.menuSet:nth-child(even) .items{
		padding-left: 0;
	}
	
	.menuSet .subHeading div:first-child{
		font-size: 1.25rem;
	}
	
	.menuSet .subHeading div:nth-child(2) {
		font-size: 2rem;
	}
	.menuItemRow .menuItemImage img { 
		max-width: 90px;
	}
	
	.menuItemInfo {
		margin-right: 0;
	}
	
	
	.menuItemInfo .price .priceNum{
		font-size: 1rem;
	}
	
	.menuItemInfo .price >div {
		margin-left: 0;
		margin-right: 1.5rem;
	}
}

@media only screen and (max-width:600px) {
	.menuSet .heading div:first-child{
		font-size: 1.5rem;
	}
	.menuSet .heading div:nth-child(2){
		font-size: 2.25rem;
	}
	
	.menuSet .subHeading div:first-child{
		font-size: 1.1rem;
	}
	.menuSet .subHeading div:nth-child(2){
		font-size: 1.5rem;
	}
	
	.menuItemInfo .menuItemName >div:nth-child(2){
		font-size: 1.25rem;
	}
}

@media only screen and (max-width:500px) {
	.menuItemInfo .menuItemName >div:nth-child(1){
		font-size: 0.7rem;
	}

	
	.menuItemInfo .price {
		font-size: 1.5rem;
	}
}