@charset "utf-8";
/* CSS Document */

/*.mainImgBelow{background-size: 110svw auto; }*/

@media screen and (max-width: 1199px){
	h1{font-size: 5em;}
	.br4{ display:inherit; }
	.hide4{	display:none; }
	.navLR{	margin:0 10px;}
	.connectMainImg{ margin-top: -85px;}
	.btMenuC{ width: 200px; }
	.bgGallery{ padding-top: 170px; }
.bgGallery{ background-size: 150%;}
.boxCmmt{ height: 190px;}

	.topTitle{font-size: .9em;}
	.Close-button{width:  45px; top: 30px;}
	.btScroll{ width: 100%; left: 0%; top: 52svh;}
.bgNavSlide{ font-size: 2em;}

/*.tiAbout{width: 90%; margin-bottom: 30px;}*/
.bgAboutText{  padding: 20px 30px;}
.bgAboutTextWhite{ padding: 15px;}
.aboutTi{font-size: 2em; padding-bottom: 10px;}
.aboutTextFinish{width: 200px;}
.btRead-about{width: 100px; margin-bottom: 0;}
.showAbout{width: 100%; margin-left: -4.25%;}

	/*.carousel,.item,.active {   height: 200%;}
	.carousel-inner {   height: 100%;}*/
	.carousel-control, .carousel-indicators, .carousel{  max-height: 58svh !important;}
	.mainImgBelow{ background-size: auto 58svh; background-position: center top;  height: auto; margin-top: 0svh;  position:inherit;
		background-image:url("../images/slide-desktop/MandarinDuck-HomeDT-NewBelow.jpg"); padding-bottom: 0px;}  /* auto 100svh */	
	/*.carousel-control, .carousel-indicators, .carousel{  max-height: auto !important; }*/
	.fill { /*width: 100%; height: 100%;*/ background-size: auto 115svh  !important; background-position: top center;	}
	
	
.bgMenuInner{ font-size: .9em;}
/*.showMenu{ z-index: 99; padding: 0px 80px 20px 20px; width: 83.5%; margin-right: 8%; margin-left: -20px; }*/
.tiGal{ font-size: 3.5em;  margin-top: 20px;}
.txtAbout{ font-size: .7em; padding: 0 0px; }
.about-sub-heading{margin: 10px 0;}
.about-graphic{margin-top: 10px; width: 120px;}
/*.about-pic{width: 40%; height: auto; position: absolute; transform: translate(-50%, -105%);}*/
	.about-pic2, .about-picBack{width: 70%; height: auto; transform: translate(-4%, 0%); margin: 3svh 0 3svh 0;  }
.navMenuTop{width: 55px; margin-left: 1px; }
.icoSocial{width: 30px; margin: 10px 5px;}
.showsocialbox{width: 120px; margin: 10px 0 0 280px;}
.bgMenu{ background-size: auto 100%;}
.bgContact{font-size: .9em;}
textarea.boxCmmt{ height: 150px;}
}

.chef-peter-lai{width: 100%;}


@media screen and (max-width: 991px){
	.br3{ display:inherit; }
	.hide3{	display:none; }
	.hide-tablet{
		display:none;
	}
	.show-tablet{
		display:inherit;
	}
	
	.logo{ width: 100%; left: 0; }
	
	.spcLus{padding-left: 20px;}
	.btMenuC{ width: 160px; }
.HiBox2{height: 0px;}
	
	#bgCondition{	padding: 30px 0 20px 0; margin-bottom: -0px;}
	/*.carousel-control, .carousel-indicators, .carousel{  max-height: auto !important;}*/	
	.whatonh2{font-size: 16px; line-height: 20px; }	
	.bgGallery{ padding-top: 130px; }
	.boxCmmt{ height: 150px;}
	
	
	.topTitle{ line-height: 1em;}
	.bookinglink{}
	.aboutColumn{padding: 30px 25px 10px 25px; margin-right: 35%;}
	.logo-only{margin-bottom: 20px; width: 100%;}
	.txt_title{font-size: 1.8em; line-height: .85em; text-transform: uppercase;}
	.bgAboutFoot{width: 65%;} 	.imgBGmenu{ width: 60%;}
	.bgAlldayMenu{background-image: url('../../images/bgAllday-bg.png'); padding-top: 20px; margin-right: 40%;}
	.txtMenu{font-size: 3em; font-weight: 600;}
	.titleGalery{font-size: 4.5em;}
	/*.contactHeader, .bgContactForm, .bgContactForm2{ width: 76%;}
	.bgContactForm, .bgContactForm2{ margin: 0 auto; padding-bottom: 10px;}
	.colContactL{padding: 0 15%;}
	.colContactR{padding: 20px 0 0 15%;}*/
	.contactBT, .contactBTBook{width: 85%; margin: 2px 0;}
	.contactBTBook{ position: absolute; z-index: 1; width: 72%; }
	.contactBTCollect{ margin-top: 55px;}
	
	.btSubmit{height: 80px; width: 96%; background-position: center;}
	.miniheart{width: 50px; position: absolute; margin: 0 0 0 -55px;}
	.firstGallery{width: 90%; height: 55vh; margin: -100% 0 0 0;}
	.topHeadMessage{font-size: .9em;}
	
	.showsocialbox{margin: 10px 0 0 137px;}
	
	/***************  Commingsoon ******************/
	.commingsoonBox{ /*top: 25svw;*/ padding: 3% 2%;}
	/*************** End Commingsoon ******************/
}

@media screen and (max-width: 767px){
	h1{font-size: 3em;}
	h2{font-size: 1.55em;}
	.lineNavBlue{ display:inherit; height: 2px; margin: 5px 0 5px 0;}	
	.bluestrip{ padding: 5px 0;}
	.icoNavSet{ width: 40px; margin: 20px 0px 0 0;}
	.icoNavSet2{ width: 40px; margin: 20px 0 0 0;}
.menucatering{position: absolute; margin: 50px 0 0 110px; z-index: 98; font-family: "ohno-blazeface", sans-serif; color: #1a303d; font-size: 20px;}
	.bgArrow{ margin-top: 12px; width: 35%;}
	.bgArrowGallery{width: 55%;}
	.bgArrowFoot{width: 35%;}
	.connectMainImg{ margin-top: -60px;}	
	
	.bgGal{ width: 170px;}
	.galset1, .galset2, .galset3, .galset4{margin: 0; padding: 0;}
	.txtContactUs{ font-size:20px;}
	.heightcontact{display:none;}
	.boxRegister{width: 90%;}
	.imgwhaton{ width: 20%;}
	.new_menu_img{ width:50%; }
	
	.hide-mobile{
		display:none;
	}
	.show-mobile{
		display:inherit;
	}
	.br2{ display:inherit; }
	.hide2{	display:none; }
	
	
	.logo{ width: 180px;}
	.burger{ right: 3svw; width: 17svw; top: 9.5svh;}
	.burgerClose{  top: 9.5svh;}
	.orderonlinelink, .bookinglink{ width: 85px; right: 12px; left: auto; top: 0; }
	.bookinglink{ top: 88px;}
	.btScroll{font-size: .8em; top : auto; bottom: 0svh; padding-bottom: 0.05svh;}
	
	.btMenuC{margin-top: 0px; }
	
	.coninnerLR{ padding:0 15px;}
	#morediv{ margin-top: -20px; width: 100px;}
	.closeAbout{margin: 0; padding: 0; position: inherit;}
	.txtSeeMenu{ height: 35px; margin-top: 5px;}
	.txtSeeMenu2{ width: 85%; margin-top: 5px;}
	.btMenuAll{width: 50%; margin-top: 5px;}
	.txtGallery{width: 65%;}
	.bgGallery{ padding-top: 45px; background-size: 300%; }
	.txtTitle{font-size: 40px;}
	.txtContact{font-size: 16px;}
	.boxCon1, .boxCon2{padding: 10px;}
	
	.imgAbout{ width: 50%;}
	.readmore{font-size: .6em;}
	.tiMenu{ width: 280px; margin-top: 5vh; margin-bottom: 30px;}
	.conditionMenu{ margin-top: 2vh; font-size: 1em; margin-bottom: 0; }
	.menu_img{width: 100%;}
	.fontabout{font-size: .5em; line-height: 1.2em;}
	.aboutL{margin-top: -50px;}
	.mobCenter{text-align: center;}
	.mobLeft{text-align: center;}
	
	.clrMob{padding: 0; margin: 0;}
	.spTopLogo{padding: 5px 0 0 3px;}
	.bgTopHead{height: 150px;}
	.topTitle{ font-size: 1em; line-height: .8em;}
	.logo-onlyFoot{ width: 270px; position: absolute; margin: -225px 0 0 -135px; }
	.Back-button{ width: 210px; position: absolute; margin: -46px 0 0 -105px; cursor: pointer;}
	.colContactL2{ padding-left: 50px;}
	.miniheart{width: 70px; position:inherit; margin: 0 0 0 0px;}
	
	.bgNavSlide{ width: 100%; left: 0%; font-size: 1.5em; line-height: 1em; height: 100svh;  }
	.Close-button{width:  42px; top: 20px; left: 33%;}
	
	
	.tiAbout{width: 100%; position: absolute; margin-top: 10px;}
	.bgAboutText{  padding: 30px 10px; margin: 0 12%;}
	.bgAboutTextWhite{ padding: 15px;}
	.aboutTi{font-size: 1.8em; letter-spacing: .05em; padding-bottom: 10px;}
	.aboutTextFinish{width: 200px;}
	.btRead-about{width: 100px; margin-bottom: 0; cursor: pointer; }
	.showAbout{position: inherit; padding: 0 0 0 10px;}
	
	.menuClick{ width: 32%; margin: 0 0% 40px 0; }
	.menu_bt{width: 70%; margin-top: 15px; margin-bottom: 0;}
	
	
	.btRead-menu{ width: 80%; margin-left: 10%; margin-bottom: -1px;  }
	.bgMenuInner{ font-size: 1em; background-image:url("../images/MD__0024_Menu-noteS-bg.png");}
	.showMenu{width: 80%; margin: 0; padding: 0; margin-left: 10%; }
	.firstGallery{width: 100%; height: 55vh; margin: -80svh 0 0 0;}
	.tiGal{ font-size: 3em;  margin-top: 20px; padding-bottom: 20px;}
	.bgContactBox{border-radius: 90px; padding: 50px 10px; margin: 0 10px;}
	.foot-bt{width: 80%; margin-top: 10px;}
	.bgContact{ font-size: 1.1em; line-height: 1.3em; background-size: 15%;}
	.txtFoot{font-size: .8em; line-height: 1em;}
		.btHiring{position:absolute; width: 85px; right: 100px; top: 0px;}
	
	.txtAbout{ font-size: .84em; line-height: 1.5em;}
	.bgAbout{background-color: #bd2e32; padding: 0 6svw; background-image: url("../images/mobC.jpg"); background-size: 100%; }
	.about-graphic{ width: 35%;  transform: translate(-0%, 0%); width: 45%; }
	/*.about-pic2{width: 76%; height: auto; position:absolute; transform: translate(-50%, 7%); }*/
	.about-pic2, .about-picBack{width: 85%; height: auto; position:absolute; transform: translate(-50%, 0%);}
	.topHeadMessage{font-size: .85em; line-height: 1.2em; padding: 1svh 0;}
	.navSlidMar{margin: 0 5svw;}
.icoSocial{width: 40px; margin: 15px 10px;}
	.scrollAni{width: 70px; transform: translate(-50%, 0%);}
	.bgMenu{ background-size: auto 25%;}
	.bgVoucher{ padding: 30px 0 30px 0;}
	
.icoFootSet{width: 13%; margin: 0px 2% 0 0;}
.icoFootSet2{width: 28%; margin-top: 20px; }
	
	
	/***************  Commingsoon ******************/
	.commingsoonBox{ top: 16svh; padding: 3% 2%; font-size: .78em; line-height: 1.5em; }
	.commingsoonFoot{font-size: 1.3em; color: #ece7c7; text-align: center;}
	.logoComingsoon{ width: 75%; left: 0; margin: 0; top: -9svh; z-index: 200; }  .logoMobileInside{top: 9svh; left: 1svw;}
	.bgNavSlide{margin-top: 0; padding-top: 0; text-align: left; font-size: .75em; line-height: 1.3em;}
	.navTopMenu{line-height: 2em;}
	.bgMobTop{ padding: 2.5%; background-image: url('../../images/bgNavBarTop.png');}
	.navMobWidth{width: 30svw; margin-top: 20px;}
	/*************** End Commingsoon ******************/
	
	
	.carousel,.item,.active {   height: 100%;}
	.carousel-inner {   height: 100%;}
	.carousel-control, .carousel-indicators, .carousel{  max-height: 100svh !important;}
	
	/*.carousel,.item,.active {   height: 200%;}
	.carousel-inner {   height: 100%;}*/
	.mainImgBelow{ background-size: auto 58svh; background-position: center top;  height: auto; margin-top: 0svh;  position:inherit;
		background-image:url("../images/slide-desktop/MandarinDuck-HomeDT-NewBelow.jpg"); padding-bottom: 0px;}  /* auto 100svh */	
	/*.carousel-control, .carousel-indicators, .carousel{  max-height: auto !important; }*/
	.fill { /*width: 100%;*/ height: 100%; background-size: auto 100%  !important; background-position: top center;	}
	
}


@media screen and (max-width: 500px){
	.connectMainImg{ margin-top: -45px;}
	/*.btOrderOnlineT{margin: -30px 0 0 0;}
	.btBookingOnlineT{margin: -30px 0 0 0;}*/
	.imgwhaton{ width: 80%;}
	h2.newmenu{
		font-size:20px;
		text-align:center;
		font-weight:normal;
	}
	.new_menu_img{ width:80%; }
	
	.mobile100{width:90%;}
	.mobile80{width:70%;}
	.br1{ display:inherit; }
	.hide1{	display:none; }
	.btMenuC{ width: 80%; margin-top: 10px;}
	.btAbout{width: 130%; margin:0 0 -50px -70px;}
	.galSection{padding:20px;}
	/*.bgNavSlide{width: 100%; text-align: center; padding-left: 0;}*/
}

@media screen and (max-width: 320px){
	/*.icoDown{position: inherit; margin: 0; padding: 0; margin-top: -30px;}
	.shopName{height: 10px;}		*/
}