/* *********************************************************************** */
/* VARIABLES */
/* *********************************************************************** */
/* The variable "--nav-height" is used to get hero image and all other 
   sections below the header & navigation to shift down by same distance 
   from top as height of header & navigation. Since the header and navigation
   is fixed to top, thereby removed from normal document flow  */
:root {
  --nav-height: 80px;
  --menu-page-title-height: 70px;
  --about-page-title-height: 100px;
}




/* *********************************************************************** */
/* BUTTONS */
/* *********************************************************************** */
/* HOME PAGE */
.cust-btn-home-page {
  color: #FEFAEA;
  background-color: #d4273e;
  -webkit-box-shadow: 3px 3px 10px rgb(104, 104, 104);
          box-shadow: 3px 3px 10px rgb(104, 104, 104);
}

.cust-btn-home-page:hover {
  font-size: 0.95rem;
  -webkit-transition: font-size 200ms ease;
  transition: font-size 200ms ease;
  color: #FEFAEA;
  background-color: #c7004a;
  -webkit-box-shadow: 3px 3px 10px rgb(54, 54, 54);
          box-shadow: 3px 3px 10px rgb(54, 54, 54);
}

.cust-btn-home-page:active {
  font-size: 0.95rem;
  background-color: #c7004a;
  -webkit-box-shadow: 3px 3px 10px rgb(54, 54, 54);
          box-shadow: 3px 3px 10px rgb(54, 54, 54);
}

.cust-btn-home-page:focus {
  font-size: 0.95rem;
  background-color: #c7004a;
  -webkit-box-shadow: 3px 3px 10px rgb(54, 54, 54);
          box-shadow: 3px 3px 10px rgb(54, 54, 54);
}

/* MENU PAGE */
.cust-btn-menu-dinner-list {
  /* This is the font used by the menu.php menu item list buttons */
  /* The import is already carried out as this is the font that is 
     linked in via bootstrap*/
  font-family: "Raleway", sans-serif;
  color: #FEFAEA;
  background-image: radial-gradient(circle, #540c73 0%, #2b053b 90%);
  font-size: 0.9rem;
  -webkit-transition: font-size 100ms ease;
  transition: font-size 100ms ease;
}

.cust-btn-menu-dinner-list:hover {
  color: #FEFAEA;
  font-size: 1rem;
  background-image: radial-gradient(circle, #3a084f 0%, #1e0329 90%);
}

.cust-btn-menu-dinner-list:active {
  color: #eab0fd;
}

.cust-btn-menu-dinner-list:focus {
  border: 1px solid #e0adf5;
  -webkit-box-shadow: none;
          box-shadow: none;
}




/* *********************************************************************** */
/* GLOBALS */
/* *********************************************************************** */
/* ----- DROP SHADOWS ----- */
/* box-shadow: offset X offset Y blur color */
.cust-drop-shadow {
  -webkit-box-shadow: 3px 3px 10px rgb(104, 104, 104);
          box-shadow: 3px 3px 10px rgb(104, 104, 104);
}

/* ----- OTHER ----- */
.chilly-pepper {
  height: 1rem;
  margin-top: -0.2rem;
  margin-right: -0.3rem;}




/* *********************************************************************** */
/* KEEP FOOTER ON BOTTOM IF NOT ENOUGH CONTENT ELSE MOVE DOWN WITH CONTENT */
/* *********************************************************************** */
html{
  height: 100vh;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  min-height: 100%;
}

main {
  -webkit-box-flex: 1;
          flex: 1 0 auto;    
  -ms-flex: 1 0 auto;    
}




/* *********************************************************************** */
/* HEADER / NAVIGATION */
/* *********************************************************************** */
#navigation {
  /* Since the header navigation root element has Bootstrap 
   class fixed-top it has been given a z-index pf 1030 by Bootstrap
   In our menu page the menu title is also fixed to the top, but 
   displays over the top of header navigation root element
   This is because both have been assigned a z-index of 1030, but since
   the menu page menu title is later it takes precedence

   So here we force z-index of header navigation root element to be 
   higher */
  z-index: 1031;
}

.header-title {
  font-size: 1.7rem;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
}

.header-soc-phone-num {
  font-size: 1.05rem;
  margin-top: 5px;
  margin-bottom: 2px;
}

.header-soc-icon {
  margin-top: 8px;
  margin-right: 10px;
}

/* -----  CUSTOM MEDIA QUERIES ----- */
@media (max-width: 365px) {
  .header-title {
    font-size: 1.5rem;
  }
}




/* *********************************************************************** */
/* FOOTER */
/* *********************************************************************** */
.footer {
  background-color: #1a1407;
  color: #FEFAEA;
}

.footer-text {
  font-size: 0.6rem;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 15px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* -----  CUSTOM MEDIA QUERIES ----- */




/* *********************************************************************** */
/* HOME PAGE - HERO SECTION*/
/* *********************************************************************** */
.hero {
  margin-top: var(--nav-height);
  position: relative;
  background-color: #1a1407;
}

.hero-text-wrapper {
  position: absolute;
  top: 5%;
  left: 11%;
  width: 86%;
}

.hero-text-title {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
}

.hero-text-title-suffix {
  margin-bottom: 0px;
  font-size: 0.7rem;
  text-align: center;
}

.hero-text-para {
  font-size: 0.8rem;
  line-height: 1.1;
  width: 62vw;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0px;
}

/* -----  CUSTOM MEDIA QUERIES ----- */
@media (min-width: 420px) {
  .hero-text-title {
    font-size: 2.5rem;
  }

  .hero-text-para {
    font-size: 1rem;
    margin-top: 1.8rem;
  }
}




/* *********************************************************************** */
/* HOME PAGE - COMMON SECTIONS */
/* *********************************************************************** */
.section-wrapper-border-light {
  margin: 15px;
  padding: 12px 15px 20px;
  border: 2px solid #fefaea;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.section-wrapper-border-dark {
  margin: 15px;
  padding: 12px 15px 20px;
  border: 2px solid #151106;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.7rem;
}

.section-text {
  line-height: 1.4;
  font-size: 0.75rem;
  margin-bottom: 2.2rem;
}

.section-image-border-light {
  border: 2px solid #fefaea;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.section-image-border-dark {
  border: 3px solid #151106;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.section-image-border-warning {
  border: 2px solid #400457;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.section-image-border-dark.lunch-buffet-image {
  margin-right: 14px;
  padding-left: 0px;
  padding-right: 0px;
}

/* -----  MEDIA QUERIES ----- */
@media (min-width: 440px) {
  .section-text {
    font-size: 0.9rem;
  }
}




/* *********************************************************************** */
/* HOME PAGE - AUTHENTIC SECTION */
/* *********************************************************************** */
.authentic {
  background-image: radial-gradient(circle, #164516 0%, #081a08 85%);
}




/* *********************************************************************** */
/* HOME PAGE - LUNCH SECTION */
/* *********************************************************************** */
.lunch {
  background-color: #FEFAEA;
}




/* *********************************************************************** */
/* HOME PAGE - PRIVATE FUNCTION SECTION */
/* *********************************************************************** */
.private-function {
  color: #FEFAEA;
  background-image: radial-gradient(circle, #4b1163 29%, #2b053b 100%);
}




/* *********************************************************************** */
/* HOME PAGE - CONTACT US SECTION */
/* *********************************************************************** */
.contactus {
  position: relative;
  overflow: hidden;
  background-image: -webkit-gradient(linear, left top, right top, from(#0f4a0f), to(#041704));
  background-image: linear-gradient(90deg, #0f4a0f 0%, #041704 100%);
}

.contact-title-wrapper {
  position: absolute;
  top: 0%;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.contact-content-background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.contact-content-google-map {
  width: 100%;
  height: 40vw;
  max-height: 300px;
  border: 3px solid white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-top: 5px;
}

.section-text.contactus-text-title {
  margin-bottom: 2px;
}







/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* MENU PAGE */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* MENU PAGE - MAIN SECTION */
.menu-pg-main {
  margin-top: var(--nav-height);
  /* DO NOT USE - z-index as clicks won't work */
  /* z-index: -1; */
  position: relative;
  background-size: cover;
  background-attachment: fixed;
  background-color: #21171F;
  background-image: url("../assets/images/menu/grand-palace@1920.jpg");
}

.menu-pg-bg-wrapper {
  z-index: 0;
  position: fixed;
}

.menu-pg-title-wrapper {
  background-image: radial-gradient(circle, #601d7d 37%, #2b053b 100%);
  width: 100%;
  position: fixed;
  z-index: 2;
}

.menu-pg-content-wrapper {
  margin-top: var(--menu-page-title-height);
}


/* ********* menu-items start here *********** */
.menu-item-card-header {
  padding: 0.5rem 1.25rem;
  background-image: radial-gradient(circle, #601d7d 37%, #2b053b 100%);
  color: #FEFAEA;
}

.menu-item-wrapper {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-width: medium 1px 1px;
  border-top: 1px solid rgba(9, 28, 9, 0.1);
}

.menu-title-text {
  font-size: 2.2rem;
} 


/* ************* Used by this style e.g. Entrees **************** */
/* menu-item-title -------------- menu-item-price */
/* menu-item-text */
.menu-item-title {
  margin-bottom: 0.2rem;
  display: inline-block;
  color: #c21969;
  font-weight: bold;
  font-size: 0.9rem;
}

.menu-item-price {
  float: right;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.menu-item-text {
  clear: both;
  line-height: 1;
  text-align: left;
  margin-bottom: 0px;
  font-size: 0.8rem;
}

/* ********** Used by this style e.g. Soups *********** */
/* menu-item-title */
/* menu-item-text */
/* ------------------menu-item-entree --------- menu-item-main */
/* menu-item-type ---menu-item-entree-price -- menu-item-entree-price */
/* menu-item-type ---menu-item-entree-price -- menu-item-entree-price */
/* menu-item-type ---menu-item-entree-price -- menu-item-entree-price */
.menu-item-entree-main-top {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.menu-item-text.menu-item-main {
  width: 60px;
  text-align: right;
  font-weight: bold;
}

.menu-item-text.menu-item-main-price {
  width: 60px;
  text-align: right;
}

.menu-item-text.menu-item-entree {
  width: 50px;
  text-align: right;
  font-weight: bold;
}

.menu-item-text.menu-item-entree-price {
  width: 50px;
  margin-left: auto;
  text-align: right;
}

.menu-item-text.menu-item-type {
  line-height: 1.5;
  font-size: 12.6px;
}

/* ********** Used by this style e.g. The Golden Wok *********** */
.menu-group-top-row {
  background-image: radial-gradient(circle, #601d7d 37%, #2b053b 100%);
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  padding-top: 0.7rem;
}

.menu-group-middle-row {
  background-image: radial-gradient(circle, #601d7d 37%, #2b053b 100%);
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}
    
.menu-group-bottom-row {
  background-image: radial-gradient(circle, #601d7d 37%, #2b053b 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  padding-bottom: 0.7rem;
}

.menu-group-text {
  font-size: 0.9rem;
  color: #FEFAEA;
  margin-bottom: 0px;
  margin-left: 4.5vw;
}

.menu-group-price {
  font-size: 0.9rem;
  color: #FEFAEA;
  margin-bottom: 0px;
  margin-right: 4.5vw;
}

/* ************* Used by this style e.g. banquet **************** */
/* menu-item-title -------------- menu-item-price */
/* menu-item-text */
.banquet-item-title {
  color: #c21969;
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0.2rem;
}

.banquet-description {
  text-align: center;
  line-height: 1.3;
  display: block;
  margin-bottom: 1rem;
}

.banquet-group-title {
  margin-bottom: 0.1rem;
}




/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ABOUT.PHP */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
.about-pg-main {
  padding-top: var(--about-page-title-height);
  background-color: rgba(26, 20, 7, 0.98)
}
.about-image {
  border: 2px solid #ebe1e1;
}




/* *********************************************************************** */
/* BOOTSTRAP MEDIA QUERIES */
/* *********************************************************************** */
@media (min-width: 576px) {
  /* HERO SECTION */
  .hero-text-title {
    font-size: 3.5rem;
  }

  .hero-text-title-suffix {
    font-size: 1rem;
  }

  .hero-text-para {
    font-size: 1.25rem;
  }

  /* HOME PAGE COMMON SECTIONS */
  .section-text {
    font-size: 1rem;
  }

  /* CONTACT US SECTION */
 .contact-content-background {
    width: 50%;
  }

  /* MENU PAGE -  */
  .custom-menu-page-title-height {
    margin-top: 167px;
  }
  
  .menu-title-text {
    font-size: 2.6rem;
  }
}




@media (min-width: 768px) {
  /* HERO SECTION */
  .hero-text-title-suffix {
    font-size: 1.2rem;
  }

  .hero-text-title {
    font-size: 3.8rem;
  }

  .hero-text-para {
    font-size: 1.4rem;
    width: 58vw;
  }

  /* HOME PAGE COMMON SECTIONS */
  .section-title {
    font-size: 2.2rem;
  }

  .section-text {
    font-size: 1.1rem;
  }

  /* AUTHENTIC SECTION */
  .authentic {
    position: relative;
    margin-top: -100px;
  }
}




@media (min-width: 992px) {
  /* HERO SECTION */
  .hero-text-title {
    font-size: 4.5rem;
  }

  .hero-text-title-suffix {
    font-size: 1.5rem;
    margin-top: 1rem;
  }

  .hero-text-para {
    font-size: 1.5rem;
    width: 45vw;
    margin-top: 3rem;
  }

  /* AUTHENTIC SECTION */
  .authentic {
    margin-top: -165px;
  }
}




@media (min-width: 1200px) {
  /* HERO SECTION */
  .hero-text-title {
    font-size: 6rem;
  }

  .hero-text-para {
    font-size: 1.6rem;
    margin-top: 5rem;
  }
  
  /* HOME PAGE COMMON SECTIONS */
  .section-title {
    font-size: 2.5rem;
  }

  /* AUTHENTIC SECTION */
  .authentic {
    margin-top: -200px;
  }
}

/* ??????????  CSS BELOW NEEDS TO BE SORTED  ?????????? */