/*
///////////////////////////////////////
* MOBILE MENU *
///////////////////////////////////////
*/
#menuToggle
{
  display: none;
  position: relative;
  top: 38px;
  height: 55px;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}

#menuToggle input
{
  display: block;
  width: 100%;
  height: 48px;
  top: -8px;
  position: absolute;
  z-index: 999 !important;
  left: 0;
  padding: 9px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin: 0 auto 5px auto;
  padding: 0 3px;
  left: 0;
  position: relative;
  
  background: rgba(212, 212, 170, 1);
  border-radius: 4px;
  
  z-index: 2;
  
  transform-origin: 4px 0px;
  -webkit-transform-origin: 4px 0px;
  -ms-transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  -webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  -moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
  -webkit-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
  -ms-transform: rotate(45deg) translate(-2px, -1px);
  background: rgba(212, 212, 170, 1);
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  -ms-transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
  -webkit-transform: rotate(-45deg) translate(0, -1px);
  -ms-transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 100%;
  margin: 0;
  z-index: 999 !important;
  top: 30px;
  left: 0;
  
  padding: 28px 0;
  background: rgba(0,0,0,.89);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(0 , -120%);
  -webkit-transform: translate(0 , -120%);
  -ms-transform: translate(0 , -120%);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu ul
{
	width: 100%;
	padding: 0 0 18px 0;
	margin: 0;
	
}
#menu li
{
  padding: 10px 0;
  margin: 0;
  float: left;
  font-size: 18px;
  text-align: center;
  line-height: 1.08em;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 100;
  text-transform: uppercase;
  width: 100%;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  -webkit-transform: scale(1.0, 1.0);
  -moz-transform: scale(1.0, 1.0);
  -o-transform: scale(1.0, 1.0);
  opacity: 1;
}
/* 
/////////////////////////////////////////////////// 
///////////////////////////////////////////////////
///////////////////////////////////////////////////
*/



/* ///////////////////MEDIA QUERY//////////////////////// */

@media only screen and (max-width: 760px) {
	
	/* ///////////////////HOME//////////////////////// */
	
	header{
		top: 0;
		width: 100%;
		min-width: 380px;
		background: black;
		z-index: 99999 !important;
		overflow: visible;
	}
	#navGroup{display: none;}
	#menuToggle{display: block;}
	#MainNavigation{display: none;}
	.naviagationBG{
		min-width: 380px;
		height: 88px;
		width: 100%;
		background: black;
		padding: 0;
		margin-top: 138px;
		position: relative;
	}
	#lang{
		display: block;
		width: 100%;
		min-width: 380px;
		float: right;
		right: 0;
		background: rgba(202, 190, 125, 1);
		height: 38px;
		margin: auto;
		padding: 11px 0 5px 0;
		font-size: 0.88em;
		text-align: center;
		z-index: 99999999 !important;
		top: 0;
	}
	.groupLinkMobile{
		display: inline-block;
	}
	#headerLogoContainer{
		width: 100%;
		min-width: 380px;
		height: 138px;
		top: 38px;
		position: fixed;
		z-index: 99995 !important;
		background: url("./pic/headerBackground.png") no-repeat left top ;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		padding: 0 0 1em 0;
		margin: 0;
	}
	#logo {
		padding: 1.8vh;
		height: 48px;
		width: 100%;
		display: inline-block;
		text-align: center;
	}
	#logo img{
		width: auto;
		height:78px;
	}
	#headerImg{
		width: 100%;
		min-width: 380px;
		background-color: black;
		overflow: hidden;
		top: 208px;
		z-index: 1;
		position: static;
		display: none;
	}
	#headerImg figure{
		display: none;
	}
	
	/****************************** BODY CONTENT **************************************/
	.BodyContainerHome{
		width: 100%;
		min-width: 380px;
		max-width: 760px;
		margin: 0 auto;
		height: auto;
		margin-top: 238px;
		z-index: 1 !important;
	}
	.BodyContainer{ /* OTHER PAGES */
		width: 100%;
		min-width: 380px;
		max-width: 760px;
		margin: 0 auto;
		height: auto;
		margin-top: 0;
		z-index: 1 !important;
	}
	.goldBg{
		width: 100%;
		height: 100%;
		background: rgba(212, 212, 170, 1);
		padding: 48px 0;
	}
	.whiteBg{
		width: 100%;
		height: 100%;
		background: white;
		padding: 48px 0;
	}
	.mainContent{ /* Holder for each content in different sections */
		width: 90%;
		height: auto;
		min-height: 200px;
		margin: 0 auto;
		min-width: 208px;
		max-width: 760px;
		text-align: left;
	}
	/* SECTION 1:STAY WITH US */
	#homeText{
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 38px 0;
	}
	#homeText img{
		width: 8.8vh;
		height: auto;
	}
	.homeSec1Box{
		display: inline-block;
		float: left;
		width: 46%;
		background: rgba(212, 212, 170, 1);
		margin: 0 0 0 2%;
		padding: 1%;
		overflow: hidden;
	}
	.homeSec1Box img{
		width: 100%;
		height: auto;
	}
	/* SECTION 2:DINE WITH US */
	.subHeadWrapper{
		width: 100%;
		margin-bottom: 38px;
	}
	.subheadIcon{
		width: 100%;
		text-align: center;
		border-bottom: 1px solid rgb(153, 140, 102, 1);
	}
	.subheadIcon{
		padding-bottom: .8em;
	}
	.subheadIcon img{
		width: 6.38vw;
		height: auto;
	}
	.subHeadText{
		margin: -1.78em auto 0 auto;
		padding: 0;
		width: 100%;
		background: white;	
	}
	.subhd{
	    background-color: rgba(212, 212, 170, 1);
	    font-family: 'Roboto Condensed', sans-serif !important;
	    font-size: 1.38em;
	    line-height: .78em;
		text-transform: uppercase;
		text-align: center;
		color: black;
		font-weight: 800;
		padding: 0;
	}
	.subhdWHT{
	    background-color: white;
	    font-family: 'Roboto Condensed', sans-serif !important;
	    font-size: 1.38em;
	    line-height: .78em;
		text-transform: uppercase;
		text-align: center;
		color: black;
		font-weight: 800;
		padding: 0;
	}
	.contentWrapper{
		width: 100%;
		margin: 0;
		padding: 0;
		min-width: 208px;
	}
	
	.contentWrapper p {
		width: 100%;
		margin: 0 auto;
	}
	.contentWrapper a {
		color: rgb(7, 153, 198);
	}
	.contentWrapper h2 {
		color: rgb(153, 140, 102, 1);
		text-align: center;
	}
	.homeSec2Box{
	/* 	display: inline-block; */
		float: left;
		display: block;
		width: 30%;
		overflow: hidden;
		margin: 0;
	}
	.homeSec2BoxCenter{
	/* 	display: inline-block; */
		float: left;
		display: block;
		width: 30%;
		overflow: hidden;
		margin: 0 4.5%;
	}
	.homeSec2Box img{
		width: 100%;
		height: auto;
	}
	.homeSec2BoxCenter img{
		width: 100%;
		height: auto;
	}
	
	/******************************** RESTAURANT **************************************/
	#homeContainers{
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		justify-content: space-between;
		
		height: auto;
		padding: 0;
		margin: 0 0 78px 0;
	}
	.homeDining{
		flex-grow: 1;
		width: 100%;
		height: auto;
		margin: 0 10px 28px 10px;
		padding-bottom: 38px;
	}
	.hdImgWrapper{
		overflow: hidden;
		width: 100%;
		height: auto;
		margin-bottom: 8px;
		vertical-align: middle;
		display: inline-block;
	}
	.homeDining span{
		color: black;
	}
	.homeDining img{
		width: 100%;
		height: auto;
		display: inline-block;
		vertical-align: middle;
		margin: auto 0;
		padding: 0;
	}
	.title{
		text-align: center;
	}
	
	
	
	
	/****************************** FOOTER **************************************/
	footer {
		background: black;
		color: white;
		float: left;
		width: 100%;
		height: auto;
		z-index: 20;
		overflow: hidden;
	}
	.footerLeft {
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
		z-index: 22;
	/* 	border: 1px solid white; */
	}
	.footerRight {
		float: left;
		width: 100%;
		padding: 0 1.5em 0 0;
		margin: 0;
	/* 	border: 1px solid white; */
	}
	.selected {
		color: rgba(175, 175, 175, 0.7);
	}
	/*-- Font in Footer Section: "NAVIGATION" & "LOCATION & CONTACT" --*/
	.footerP {
		color: gray;
		font-size: 0.8em;
		margin: 3em 1.5em 0.2em 2em;
		width: 100%;
		text-align: left;
		font-family: 'Playfair Display', serif !important;
		letter-spacing: 0.1em;
	}
	/*-- "LOCATION & CONTACT" --*/
	#locationContact {
		text-align: left;
		margin: 2em 0 1em 2em;
	}
	.contact {
		text-align: left;
		float: left;
		padding-left: 2em;
	}
	.tel {
		text-align: left;
		float: left;
		clear: right;
	}
	.number1 {
		padding-left: 2em;
		text-align: left;
		float: left;
	}
	
	
	/*------------ Footer Logo ----------------*/
	#footerLogo {
		width: 8em;
		height: auto;
		color: white;
		margin: 1.5em 0 0 1.1em;
	}
	#footerLogo img {
		width: 3em;
		height: auto;
		position: relative;
		left: 30%;
	}
	#footerLogo p {
		text-align: center;
		color: white;
		font-size: 0.7em;
		padding: 0;
		margin: 0;
		width: 100%;
	}
	/*------------ Footer Navigation ----------------*/
	.footerNavigation {
		background: none;
		justify-content: flex-start;
		width: 100%;
		position: inherit;
		margin: 0 0 0 1em;
		font-size: 0.9em;
	}
	.footerNavigation a {
		padding: 0 1em;
	}
	.borderLeftRight {
		border-left: 1px solid white; 
		border-right: 1px solid white;
	}
	.borderLeft {
		border-left: 1px solid white;
	}
	/*------------ Surya Group Navigation ----------------*/
	.suryaGroupNavigation {
		background: none;
		justify-content: flex-start;
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		margin: 0.5em 0 0 1em;
		font-size: 0.9em;
	}
	.suryaGroupNavigation a {
		padding: 0 1em;
	}
	/*------------ Social Media ----------------*/
	.socialMediaIcons {
		clear: both;
		width: 100%;
		left: 0;
		text-align: center
	}
	.socialMedia {
		float: left;
		width: 1.38em;
		height: 1.38em;
		margin: 3em 1.3em 3em 0;
	}
	/*------------ Copyright ----------------*/
	.copyright {
		clear: both;
		margin: auto;
		background: none;
		width: calc(100% - 2em);
		font-weight: 300;
		color: gray;
		font-size: 0.7em;
		border-top: 1px solid gray;
	}
	
	/* ///////////////////HOME END//////////////////////// */
	/* /////////////////////////////////////////////////// */



	/***************** Content with left sub menu *****************/
	/*------------------------- side navigation (fixed navigation) -------------------------*/

	.sideNav {
		display: none;
	}
	.siteNavWrapFull{
		display: block;
	}
	.sideNavFull {
		display: block;
	}

	
	.wLSubMenuSubHeadWrapper{ /* Forcing Content to right of sub menu on Left*/
		margin-top: 0;
		width: 100%;
		float: none;
		padding-top: 0;
		min-width: 208px;
	}
	.fourboxes{
		min-width: 208px;
		padding: 0 8px;
	}
	.caption{
		max-width: 208px;
	}
	.gallery{
		min-width: 208px;
		max-width: 684px;
		height: 300px;
	}
	.activity-item {
		width: 48%;
	}
	.offers{
		width: 80%;
	}
	.floatLeft{
		padding: 0 auto;
		width: 100%;
	}
	.contactPageSocialMedia {
		float: left;
		width: 15%;
		height: 6vh;
		margin: 0 10% 3em 8%;
		padding: 0px auto;
		display: inline-block;
		text-align: center;
	}
	#contactPageSocialMediaUl{
		width: 100%;
		text-align: center;
		padding: 0 30%;
	}
	.contactPageSocialMedia img{
		margin: 0 auto;
		padding: auto;
		float: left;
		height: 6vh;
		display: inline-block;
	}
	.contactPageP{
		text-align: center;
	}
}
@media only screen and (max-width: 760px) and (orientation: portrait){
	header{position: fixed;}
	#headerLogoContainer{position: fixed;}
	#lang{position: fixed; text-align: center;}
	#menuToggle{position: relative;}
	#menuToggle{top: 38px;}
	#menu{top: 30px;}
	.naviagationBG{
		height: 88px;
		margin-top: 138px;
	}
	#logo {padding: auto;margin-top: 0;}
	.BodyContainerHome{
		margin-top: 238px;
	}
	.BodyContainer{ /* OTHER PAGES */
		margin-top: 0;
	}
	
}
@media only screen and (max-width: 760px) and (orientation: landscape){
	header{position: static;}
	#headerLogoContainer{position: relative;}
	#lang{position: relative; z-index: 99999999 !important; text-align: right;}
	#menuToggle{top: 0px;}
	#menu{top: 30px;z-index: 999 !important;}
	.naviagationBG{
		height: 48px;
		margin-top: 38px;
	}
	#logo {padding:0; margin-top: -19px;}
	.BodyContainerHome{
		margin-top: 0px;
	}
	.BodyContainer{ /* OTHER PAGES */
		margin-top: -238px;;
	}
}