@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Roboto+Condensed:300,400,700|Roboto:100,300,400,700');
/*font-family: 'Oswald', sans-serif;
font-family: 'Roboto Condensed', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
/* font-family: 'Poppins', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* font-family: 'Inter', sans-serif; */

:root {
  --brand-white: #f7f7f7;
  --brand-black: #2a2a2a;
  --brand-grey: #bbbbbb;
  --brand-darkgrey: #494949;
  --brand-purple: #8a1253;
  --brand-pink: #d7263d;
  --brand-orange: #e8751a;
  --brand-yellow: #fda304;
  --brand-teal: #17bebb;
  --brand-blue: #23294e;
  --dark-font: #464646;
  --brand-ltblue: #dcedffff;
  --brand-dkblue: #326273ff;
  --cursive-font: 'Allison', cursive;
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Roboto Condensed', sans-serif;
}

/*-------------
 	General
-------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: normal 16px sans-serif;
  color: #555;
  font-family: 'Roboto Condensed', sans-serif;
  background: #fff;
}

ul,
nav {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.9;
  width: 100%;
}

a:hover {
  opacity: 1;
}

a.btn {
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #d7263d;
  font-size: 2vh;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  border: 0px solid #8a1253;
  width: auto;
}

a.btnorange {
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #faa31b;
  font-size: 2vh;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  border: 0px solid #8a1253;
  font-family: 'Roboto Condensed', sans-serif;
  padding: 3vh 6vh;
  border: 0px;
  cursor: pointer;
  margin: 2vh;
}

.btn {
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #33ccff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2vh;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 3vh 6vh;
  border: 0px;
  cursor: pointer;
  margin: 2vh;
}

.btnmore:hover {
  background: #aa1e31;
}

.smallsponsor {
  padding: 1.5vh 3vh;
}

@media (max-width: 800px) {
  /* .btn {
		font-size: 3vh;
	}

	.btnorange {
		font-size: 3vh;
	} */
}

.btnmore {
  color: #f7f7f7;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: transparent;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2vh;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 3vh 6vh;
  border: 1px solid #f7f7f7;
  cursor: pointer;
  width: auto;
}

@media (max-width: 800px) {
  /* .btnmore {
		font-size: 3vh;
	} */
}

hr {
  width: 90vw;
  height: 0.3vh;
  background-color: #8a1253;
  border: 0;
  margin: 0 auto;
  margin-bottom: 2vh;
  margin-top: 5vh;
}

img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

.logo {
  max-width: 40vh;
  height: auto;
}
.app-logo {
  max-width: 70vw;
  height: auto;
}

.pagelogo {
  max-height: 10vh;
  width: auto;
  max-width: 95vw;
}

.webapplogo {
  max-height: 10vh;
  width: auto;
  max-width: 95vw;
}

.small {
  max-height: 10vh;
}

.scroll-icon {
  max-height: 10vh;
  width: auto;
}

p {
  color: #c2c2c2;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5em;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5 {
  color: #ededed;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
}

h1 {
  font-size: 3em;
}

.iconInstall {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 56.25em) {
  h1 {
    font-size: 5em;
  }

  h2 {
    font-size: 2.5em;
  }

  h3 {
    font-size: 2em;
  }

  p {
    font-size: 1em;
  }

  .logo {
    max-width: 40vw;
    height: auto;
  }
  .app-logo {
    max-height: 10vh;
    width: auto;
    margin: 0 auto;
  }
  .pagelogo {
    max-height: 10vh;
    width: auto;
  }
  .scroll-icon {
    max-height: 7vh;
  }
  .iconInstall {
    width: 40%;
    height: auto;
  }
}

.purple {
  background: #8a1253;
}

.orange {
  background: #e8751a;
}

/* IMG CLASSES:::::::::::::::::::::::::: */

/* DESIGN MOBILE FIRST. ALL CSS IS FOR MOBILE SCREENS UP TO 599PX WIDE= 37.4EM */

/* *600PX SCREENS AND UP for-tablet-portrait-up*/
@media only screen and (min-width: 37.5em) {
}

/* *900PX SCREENS AND UP for-tablet-landscape-up*/
@media only screen and (min-width: 56.25em) {
}

/* *1200PX SCREENS AND UP for-desktop-up*/
@media only screen and (min-width: 75em) {
}

/* *1800PX SCREENS AND UP for-big-desktop-up*/
@media only screen and (min-width: 112.5em) {
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rowcol {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.colrow {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.colhalf {
  width: 100%;
}

@media only screen and (min-width: 56em) {
  .page {
    /* -webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center; */
    align-items: center;
  }

  .pagedrop {
    justify-content: center;
    align-items: center;
  }

  .rowcol {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .colrow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .colhalf {
    width: 50%;
    overflow: hidden;
  }
}

.page {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  /* -webkit-box-pack: start;
	-ms-flex-pack: start; */
  justify-content: space-between;
  align-items: center;
  background: url(img/heromob.jpg) no-repeat center center fixed;
  background-size: cover;
  padding-bottom: 8vh;
  padding-top: 2vh;
}

.landing {
  width: 100%;
  min-height: 98vh;
  background: url(img/heromob.jpg) no-repeat bottom center fixed;
  background-size: cover;
  justify-content: flex-start;
  justify-content: space-between;
}

.landing h1 {
  font-size: 2em;
  color: #d7263d;
}
.landingBanner h2 {
  letter-spacing: 0.1em;
}

.landingBanner h3,
h4 {
  color: #555;
}

.landingBanner p {
  color: #8a1253;
  font-size: 1em;
  /* min-width: 99.5vw; */
  text-align: center;
  /* background: rgba(247, 247, 247, 0.857); */
}

@media only screen and (min-width: 56em) {
  .landing {
    min-height: 95vh;
    background: url('img/hero.jpg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

  .landing h1 {
    font-size: 3em;
  }
}

.header-banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.header-banner p {
  font-size: 1em;
  color: #2e294e;
  padding-top: 1vh;
}

@media only screen and (min-width: 56.25em) {
  .header-banner p {
    font-size: 1.2em;
  }
}

.pagebanner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  text-align: center;
}

.pagebanner p {
  /* background: #2e294e; */
  padding: 2vh;
  border-radius: 40px;
  color: #ff006e;
}

.covidbanner {
  width: 90vw;
  background: #d7263d;
  padding: 1vh;
  border-radius: 40px;
}

.covidbanner p {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: #f7f7f7;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  font-size: 1em;
  line-height: 1;
}

@media only screen and (min-width: 56.25em) {
  .covidbanner {
    width: 35vw;
    padding: 2vh;
  }

  .covidbanner p {
    font-size: 1.5em;
  }
}

.celebchef {
  min-height: 100vh;
  background: #17bebb;
  background: #23294e;
  background: #f7f7f7;
  text-align: center;
}

.celebchef h2 {
  color: #d7263d;
  font-size: 2.5em;
}

.celebchef h3 {
  color: #23294e;
}

.celebchef p {
  padding: 2.5vh;
  color: #23294e;
  font-size: 1em;
}

@media only screen and (min-width: 56.25em) {
  .celebchef h2 {
    font-size: 4em;
  }

  .celebchef p {
    font-size: 1.5em;
  }
}

.contentPage {
  min-height: 65vh;
  width: 100%;
  background: #d7263d;
  padding: 2vh;
  text-align: center;
}

.contentPage h3 {
  font-size: 2em;
  font-weight: 700;
  color: #ffbe0b;
}

.contentPage h2 {
  font-size: 1.8em;
}

.contentPage p {
  font-size: 1em;
}

@media only screen and (min-width: 56.25em) {
  .contentPage h2 {
    font-size: 4em;
  }

  .contentPage h3 {
    font-size: 3em;
  }

  .contentPage p {
    font-size: 1.5em;
  }
}

.logo-div {
  width: 100%;
}

.landing-grid {
  width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
}

.landing-grid a {
  width: calc(100vw / 2);
}

.landing-grid p {
  color: var(--brand-darkgrey);
}

.landing-grid-button {
  width: 50vw;
  width: calc(100vw / 2);
  padding: 3vh 0;
}

.landing-grid-button p {
  text-align: center;
  font-weight: 600;
  color: var(--brand-white);
  letter-spacing: 0.2em;
  font-size: 1em;
}

.lgb-red {
  background: var(--brand-red);
  color: var(--brand-white);
}

.lgb-pink {
  background: var(--brand-pink);
  color: var(--brand-white);
  width: 100vw;
}

.lgb-pink p {
  color: var(--brand-white);
}

.lgb-yellow {
  background: var(--brand-yellow);
  color: var(--brand-white);
  width: 100vw;
}
.lgb-orange {
  background: var(--brand-orange);
  color: var(--brand-white);
}

.lgb-blue {
  background: var(--brand-blue);
  color: var(--brand-white);
}

.lgb-dkblue {
  background: var(--brand-dkblue);
  color: var(--brand-white);
  width: 100vw;
}
.celeb-chef {
  min-height: 100vh;
  width: 100%;
}

.celeb-chef img {
  width: 100%;
}

.celeb-chef-text {
  width: 100%;
  padding: 2vh;
}

.celeb-chef h2 {
  font-family: var(--heading-font);
  color: var(--brand-pink);
  font-size: 2.25em;
}

.celeb-chef h3 {
  color: var(--brand-purple);
  font-size: 2em;
}

.celeb-chef h4 {
  color: var(--brand-purple);
  font-size: 1.8em;
}

.celeb-chef p {
  color: var(--brand-darkgrey);
}

.cooking-zone {
  justify-content: center;
  align-items: center;
  padding-bottom: 10vh;
  text-align: center;
}

@media only screen and (min-width: 56.25em) {
  .celeb-chef {
    grid-template-columns: 1fr 1fr;
  }
  .celeb-chef img {
    width: 50%;
  }
  .celeb-chef-text {
    width: 50%;
    padding: 5vh;
  }
}

.program {
  height: 100vh;
  padding: 2vh;
  /* padding-top: 20vh; */
  padding-bottom: 5vh;
  overflow: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.program-entry {
  background-color: #e9e9e9;
  width: 100%;
  display: grid;
  justify-items: start;
  align-items: start;
  grid-template-columns: 15vw 1fr;
  grid-column-gap: 10vw;
  padding: 0;
  text-align: left;
}

.sponsor-entry {
  justify-content: center;
  align-items: center;
  width: 100%;
}

.sponsor-spacer {
  width: 100%;
  height: 2px;
  background-color: var(--brand-blue);
  margin-bottom: 2vh;
}

.program-row {
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10vw;
  padding: 0;
  text-align: left;
  z-index: 1;
}

.program-image {
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  padding: 0;
  text-align: center;
}

.program-entry h1 {
  padding: 0;
}

.program-entry h2 {
  color: #8a1253;
}

.button {
  cursor: pointer;
  width: 100%;
  color: #fff;
  height: 10vh;
  display: grid;
  justify-items: center;
  align-items: center;
  border-radius: 5px;
  text-align: center;
}

.spacer50vh {
  height: 50vh;
}

@media only screen and (min-width: 56.25em) {
  .page {
    min-height: 100vh;
    justify-items: center;
    align-items: center;
  }

  .header {
    max-width: 50%;
  }

  .navbar {
    max-width: 100%;
  }

  .spotlight {
    height: 100vh;
    padding: 1vh;
    padding-top: 70%;
    padding-bottom: 11vh;
    overflow: auto;
  }

  hr {
    width: 100%;
  }

  .program-entry {
    grid-template-columns: 25% 1fr;
  }
}

.program {
  width: 100%;
  min-height: 100vh;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  text-align: center;
  padding-bottom: 10vh;
  /* padding-top: 25vh; */
}

@media only screen and (min-width: 56.25em) {
  .program {
    width: 60%;
    margin: 0 auto;
  }
}

.program-entry {
  width: 100%;
  padding: 1vh;
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5vh;
  min-height: 10vh;
}

.no-shadow {
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0);
}

.top-bar {
  background-color: var(--brand-white);
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 15vh;
  top: 0;
  position: fixed;
  z-index: 8;
}

.bar-red {
  background: var(--brand-red);
  font-weight: 600;
  width: 100%;
}
.bar-blue {
  background: var(--brand-blue);
  font-weight: 300;
  width: 100%;
}
.bar-pink {
  background: var(--brand-pink);
  font-weight: 300;
  width: 100%;
}
.bar-orange {
  background: var(--brand-orange);
  font-weight: 600;
  width: 100%;
}

.half-entry {
  width: 50vw;
}

.prog-btn {
  display: inline-block;
  background: var(--brand-white);
  border: 0px solid var(--brand-white);
  border-radius: 4px;
  width: 45vw;
  transition: all 0.4s ease 0s;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.3rem;
  color: var(--brand-black);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.5em 1em;
  cursor: pointer;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-blue {
  background: var(--brand-blue);
  color: var(--brand-white);
}
.btn-orange {
  background: var(--brand-orange);
  color: var(--brand-white);
}

.prog-sponsor {
  width: calc(100vw / 2 - 5vw);
  height: auto;
  margin: 1vh;
}
.prog-sponsor-small {
  width: calc(100vw / 3 - 5vw);
  height: auto;
  margin: 1vh;
}
.prog-sponsor-minimum {
  width: calc(100vw / 5);
  height: auto;
  margin: 1vh;
}
.text-entry {
  display: grid;
  grid-template-columns: 1fr 3fr;
  /* justify-items: center; */
  align-content: start;
  text-align: center;
  padding: 2vh 0.5vh;
}

.text-entry .col {
  justify-content: flex-start;
  align-items: flex-start;
}

.text-entry p {
  line-height: 1em;
  font-size: 1.1em;
  color: var(--brand-darkgrey);
}

.pink-entry {
  background: #d7263d;
}
.pink-entry p {
  color: var(--brand-white);
}

.blue-entry {
  background: rgb(35, 41, 78);
}

.blue-entry p {
  color: var(--brand-grey);
}

.green-entry {
  background: #559821b9;
}

.green-entry {
  background: rgba(23, 190, 187, 0.4);
}

.orange-entry {
  background: #ff6600b9;
}

.stallholder-text {
  padding: 2vh;
}

.stallholder-head-text {
  padding: 2vh;
}

.stallholder-head-text p {
  font-size: 1.2em;
}
.stallholder-text p {
  font-size: 1em;
}

.stall-listing {
  padding-left: 2vh;
  display: grid;
  grid-template-columns: 6fr 2fr 2fr;
  justify-items: start;
}

.stall-listing p {
  font-size: 1em;
  line-height: 1.5em;
}

.map-image {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
}

.map-image img {
  height: auto;
  width: 200vw;
}
.mapcol-a {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100vw;
}
.mapcol-b {
  width: 100vw;
  justify-content: flex-end;
  align-items: flex-end;
}

#mapcol-b {
  margin-left: 90vw;
}
.mapcol-c {
  width: 100vw;
}

.sponsorPage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  padding: 5vh;
  text-align: center;
}

.sponsorPage p {
  color: #222;
  font-size: 1.2em;
}

.sponsorPage h2 {
  color: #2e294e;
}

.sponsorPage h3 {
  color: #8a1253;
}

.sponsorRow-main {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.majorsponsor {
  max-width: 70vw;
  width: auto;
  padding: 2vw;
}

.heightsponsor {
  max-height: 10vh;
  width: auto;
}
.heightsponsorsmall {
  max-height: 5vh;
  width: auto;
}
.eventsponsor {
  max-width: 40vw;
  width: auto;
  padding: 2vw;
}

.eventpartner p {
  text-align: left;
}

.sponsorColumn {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

@media only screen and (min-width: 56.25em) {
  .page {
    justify-content: space-between;
    padding-top: 0;
    background: url(img/hero.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  .sponsorColumn {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .bollywoodPage h1 {
    font-size: 5em;
  }

  .bollywoodPage h2 {
    font-size: 3em;
  }

  .chefPage h1 {
    font-size: 5em;
  }

  .chefPage h2 {
    font-size: 3em;
  }

  .historyPage {
    padding: 5vh;
  }

  .historyPage h3 {
    font-size: 1.5em;
    font-weight: 300;
  }

  .vendorPage p {
    color: #f7f7f7;
    font-size: 1.5em;
  }

  .sponsorPage p {
    font-size: 1.5em;
  }

  .majorsponsor {
    max-width: 20vw;
    width: auto;
    padding: 2vw;
  }

  .eventsponsor {
    max-width: 15vw;
    width: auto;
    padding: 2vw;
  }

  .eventpartner p {
    font-size: 1.5em;
  }
}

.sitenumber {
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.find {
  width: 100%;

  justify-content: center;
  align-items: center;
  text-align: center;
}

.header {
  z-index: 9;
  background: #fff;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  padding: 1vh;
  justify-items: center;
  align-items: center;
  text-align: center;
  position: fixed;
  top: 0;
}

.navbar {
  background: #fff;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: fixed;
  bottom: 0;
}

.navbar p {
  color: #8a1253;
  color: #fff;
  font-size: 0.7em;
}

.navbutton p:hover {
  color: #fff;
}

.navbutton {
  flex: 1;
  width: 100%;
  background: #fff;
  background: #8a1253;
  height: 10vh;
  display: grid;
  justify-items: center;
  align-items: center;
  border-radius: 0px;
  text-align: center;
}

.navbutton:hover {
  background: #fff;
  color: #8a1253;
}

.navbutton:hover p {
  background: #fff;
  color: #8a1253;
}

/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */

.videoPage {
  padding: 10vh 0;
  min-height: 65vh;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding: 2vh;
  margin: 1 auto;
}

.iframe-container .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 56.25em) {
  /* .video-page {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	} */

  .iframe-container {
    width: 70%;
  }
}

/*---------------------
	INSTALL WEBAPP PAGE
---------------------*/
.installwebapp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(198, 226, 255, 1) 100%
  );
  padding: 2vh;
  padding-top: 12vh;
  /* padding-bottom: 8vh; */
}

.installwebapp h1 {
  color: #fefefe;
}

.installwebapp p {
  color: #9eb3c2;
}

.installPage {
  background: var(--brand-pink);
  padding: 2vh;
}

.installPage p {
  color: #c6e2ff;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.2em;
}

.spaced {
  justify-content: space-around;
}

@media only screen and (min-width: 75em) {
  .installwebapp {
    padding: 2vh;
    padding-top: 12vh;
  }

  .installwebapp h1 {
    font-size: 3em;
  }
}
/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #fefefe;
  margin: 25% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: auto;
  /* Could be more or less, depending on screen size */
}

.modal-image {
  width: 90%;
  height: auto;
}

.hide {
  display: none;
}

#myBtn .show {
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  color: #222;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
  background: #fff;
  /* padding: 20px; */
  border: 0px solid #fefefe;
  border-radius: 15px;
  display: inline-block;
  transition: all 0.4s ease 0s;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.2rem;
  /* padding: 1.2vh 2.4vh; */
  cursor: pointer;
  margin: 2vh;
  margin-top: 10vh;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.install-prompt {
  width: 90%;
  height: auto;
  margin: 0 auto;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close2 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close2:hover,
.close2:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.chrome {
  display: block;
}

.dropdown {
  z-index: 10;
  height: auto;
  color: #000;
  width: 85%;
  overflow: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

input[type='checkbox']:checked .dropdown {
  transition: all 3s cubic-bezier(0.325, 1, 0.22, 1);
}

.checkbox_toggle {
  color: #000;
  cursor: pointer;
}

.buttonapp {
  cursor: pointer;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  color: #8a1253;
  height: auto;
  border: #8a1253 1px solid;
  padding: 1vh 2vh;
  display: grid;
  justify-items: center;
  align-items: center;
  border-radius: 5px;
  text-align: center;
}

@media only screen and (min-width: 75em) {
  .dropdown {
    opacity: 0;
  }
}

/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */

/*-------------
 	Header
-------------*/

header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 35px 100px 0;
}

header h2 {
  font-family: 'Quicksand', sans-serif;
}

header nav {
  display: flex;
}

header nav li {
  margin: 0;
}

header nav li:first-child {
  margin-left: 0;
}

header nav li:last-child {
  margin-right: 0;
}

@media (max-width: 1000px) {
  header {
    padding: 20px 50px;
  }
}

@media (max-width: 700px) {
  header {
    flex-direction: column;
  }

  header h2 {
    margin-bottom: 15px;
  }
}

/**---- Header ----**/

.header {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 100vw;
  padding-top: 15vh;
  width: 90vw;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  /* overflow-y: scroll; */
  text-align: center;
  color: #1f82a3;
  transition: transform 300ms ease;
}

.header nav,
.header ul {
  height: 100%;
  width: 35vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.header li {
  border-bottom: 0px solid #1f678a;
}

.header a {
  color: #ff914d;
  display: block;
  padding: 1vh;
  transition: background-color 300ms ease-in;
  font-size: 1em;
}

.header a:hover {
  color: #8a1253;
}

.menu-icon p {
  opacity: 0;
}

.header-logo {
  display: block;
  max-width: 90vw;
  height: auto;
}
.locationIcon {
  max-width: 4vw;
  height: auto;
  margin: 0 auto;
}

@media only screen and (min-width: 56.25em) {
  /* .header {
		background: ;
		position: sticky;
	} */

  .header a {
    font-size: 2em;
  }

  .menu-icon p {
    font-size: 4em;
    opacity: 1;
  }

  .header-logo {
    height: 30vh;
    width: auto;
  }

  .header nav,
  .header ul {
    width: 20vw;
  }
  .locationIcon {
    max-width: 1vw;
  }
}

/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */

/**---- Mobile Bar ----**/

.menu-toggle {
  display: none;
}

.mobile-bar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  width: 100vw;
  height: 15vh;
  background-color: transparent;
  /* -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); */
  display: flex;
  flex-direction: row;
}

.mobile-bar-left {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mobile-bar-center {
  flex: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mobile-bar-right {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.mobile-bar p {
  font-size: 3vh;
}

.mobile-bar a {
  font-size: 3.8vh;
  color: #fff;
}

.mobile-bar-logo {
  width: 50vw;
  height: auto;
}

/**---- Menu Icon ----**/
/**---- Menu Icon ----**/
/**---- Menu Icon ----**/

/* TO USE MENU ICON INSTEAD OF WORD "MENU"  PLACE THIS IN mobile-bar-right DIV */

/* <label for="menu-toggle" class="menu-icon">
  <span></span>
</label> */

.menu-icon {
  display: block;
  position: relative;
  width: 25px;
  height: 100%;
  cursor: pointer;
  transition: transform 300ms ease;
}

.menu-icon > span {
  display: block;
  position: absolute;
  top: 55%;
  margin-top: -0.3em;
  width: 100%;
  height: 0.3em;
  border-radius: 1px;
  background-color: #e8751a;
  transition: transform 300ms ease;
}

.menu-icon > span:before,
.menu-icon > span:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #e8751a;
  transition: transform 300ms ease;
}

.menu-icon > span:before {
  transform: translateY(-0.6em);
}

.menu-icon > span:after {
  transform: translateY(0.6em);
}

/**---- Menu Icon Effects ----**/

.menu-toggle:checked + .mobile-bar .menu-icon {
  transform: rotate(45deg);
}

.menu-toggle:checked + .mobile-bar span:before,
.menu-toggle:checked + .mobile-bar span:after {
  transform: rotate(90deg);
}

/**---- Off-Canvas Effect ----**/

.menu-toggle:checked ~ .header {
  transform: translateX(-45%);
  transform: translate3d(-45%, 0, 0);
}

.menu-toggle:checked ~ .container {
  transform: translateX(35%);
  transform: translate3d(35%, 0, 0);
}

@media only screen and (min-width: 56.25em) {
  .menu-toggle:checked ~ .header {
    transform: translateX(-45%);
    transform: translate3d(-45%, 0, 0);
  }

  .menu-toggle:checked ~ .container {
    transform: translateX(20%);
    transform: translate3d(20%, 0, 0);
  }
}

/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */

/*---------------------
 	Contact Section
---------------------*/

.contact {
  background-color: #d7263d;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1vh;
}

.contact form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  margin: 5vh auto;
}

.contact form input {
  padding: 15px;
  flex: 1;
  flex-basis: 100%;
  width: 75vw;
  /* margin-right: 30px; */
  font-size: 18px;
  color: #555;
  margin: 0 0 20px 0;
}

.contact form .btn {
  padding: 18px 42px;
  width: 90vw;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 4vh;
  font-weight: 400;
  letter-spacing: 0.3rem;
  background: #282d4c;
  color: #fff;
  border: 0;
}

.contact h2 {
  font-size: 2em;
}

.contact p {
  font-size: 1.5em;
}

@media only screen and (min-width: 56.25em) {
  .contact form input {
    width: 25vw;
  }

  .contact form .btn {
    width: 25vw;
    font-size: 3vh;
  }
}

.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.footer p {
  font-size: 1em;
}

.footerItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 56.25em) {
  .footer {
    flex-direction: row;
    justify-content: center;
  }

  .footerItem {
    width: 33%;
  }
}

.imaged-footer {
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin-top: 5vh;
}

.imaged-footer p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  color: #6db0c0;
}

.imaged-footer img {
  max-width: 30vw;
  height: auto;
  margin: 0 auto;
}

.orangetext {
  color: #e8751a;
}

.desktophide {
  display: block;
}

@media only screen and (min-width: 56.25em) {
  .desktophide {
    display: none;
  }
}

.transparent {
  background: transparent;
}

/* :::::::::::::::::::::::::::::::::::::::::::::

MOBILE APP BAR MOBILE APP MODULE

::::::::::::::::::::::::::::::::::::::::::::: */

.mobileappbar {
  z-index: 9;
  background: transparent;
  background-color: #d7263d;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: fixed;
  bottom: 0;
  height: 8vh;
}

.mobileappbar p {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #f6f6f6;
  letter-spacing: 0.3em;
  font-size: 0.825em;
  line-height: 1em;
}

.mobileappbarbutton {
  flex: 1;
  min-width: calc(100% / 4);
  /* background: rgba(0, 0, 0, 0.9); */
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  text-align: center;
  border-right: rgba(255, 255, 255, 0.8) solid 1px;
  padding: 2vh;
}

.last {
  border-right: 0px;
}

@media only screen and (min-width: 56.25em) {
  .mobileappbar {
    display: flex;
  }
}

/* EMAIL SPAM FILTER CSS///////////////////////// 
    This styling will hide the email field from display, but it will still be seen by spambots */

#email_add {
  display: none;
}

.h1 {
  height: 1vh;
}

.h2 {
  height: 2vh;
}

.h5 {
  height: 5vh;
}

.h8 {
  height: 8vh;
}

.h10 {
  height: 10vh;
}

.h15 {
  height: 15vh;
}

.h20 {
  height: 20vh;
}

.h30 {
  height: 30vh;
}

.h40 {
  height: 40vh;
}

.h50 {
  height: 50vh;
}

.h60 {
  height: 60vh;
}

.h70 {
  height: 70vh;
}

.h80 {
  height: 80vh;
}

.h90 {
  height: 90vh;
}

.w2 {
  width: 2vw;
}

.w5 {
  width: 5vw;
}

.w10 {
  width: 10vw;
}

.w20 {
  width: 20vw;
}

.w30 {
  width: 30vw;
}

.w40 {
  width: 40vw;
}

.w50 {
  width: 50vw;
}

.w60 {
  width: 60vw;
}

.w70 {
  width: 70vw;
}

.w80 {
  width: 80vw;
}

.w90 {
  width: 90vw;
}

.w100 {
  width: 100vw;
}

.brandpurple {
  color: #8a1253;
}

.brandpurplebg {
  background-color: #8a1253;
}

.brandorange {
  color: #e8751a;
}

.brandorangebg {
  background-color: #e8751a;
}

.brandyellow {
  color: #ffbe0b;
}

.brandyellowbg {
  background-color: #ffbe0b;
}

.brandpink {
  color: #d7263d;
}

.brandpinkbg {
  background-color: #d7263d;
}

.brandteal {
  color: #17bebb;
}

.brandtealbg {
  background-color: #17bebb;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////
THIS IS THE CSS TO MAKE FULL BACKGROUND IMAGES WORK ON IOS DEVICES
This Media Query, targets IOS devices only (AS AT April 2021)
Include every page that has full page background image in here and add the property
background-attachment: initial;
/////////////////////////////////////////////////////////////////////////////////////////////// */

@supports (-webkit-touch-callout: none) {
  .page {
    background-attachment: initial;
  }
  .landing {
    background-attachment: initial;
  }

  .bollywoodPage {
    background-attachment: initial;
  }

  .chefPage {
    background-attachment: initial;
  }

  .historyPage {
    background-attachment: initial;
  }

  .culturePage {
    background-attachment: initial;
  }

  .lfresh {
    background-attachment: initial;
  }
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* MODAL ON LOAD //////////////////////////////////////////////////// */
/* 
#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  height: 100%;
  width: 100%;
}

.modalPopup {
  position: absolute;
  top: 10%;
  left: 5%;
  transform: translate(-2%, -2%);
  background: rgba(255, 255, 255, 0.9);
  width: 95%;
  padding: 0 0 15px;
  box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(-2%, -2%);
  -moz-transform: translate(-2%, -2%);
  -ms-transform: translate(-2%, -2%);
  -o-transform: translate(-2%, -2%);
}

@media only screen and (min-width: 56.25em) {
  .modalPopup {
    top: 30%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    padding: 0 0 30px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }
}

.modalContent {
  padding: 0 2em;
}

.headerBar {
  width: 100%;
  margin: 0;
  text-align: center;
}

.headerBar img {
  margin: 1em 0.7em;
}

.modalContent h2 {
  color: #8a1253;
  margin-bottom: 0.2em;
  text-transform: capitalize;
}

.modalContent h3 {
  color: #e8751a;
}

.modalContent p {
  font-size: 1em;
  margin: 0.75em 0 1.5em;
  color: #1e1e1e;
}

.button-modal {
  border: transparent;
  border-radius: 0;
  background-color: #d7263d;
  color: #eee !important;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  padding: 6px 25px;
  text-decoration: none;
  transition: all 1s ease;
}

.button-modal:hover {
  background: #1e1e1e;
  color: #fff;
  background: linear-gradient(
    to bottom,
    #1e1e1e 0%,
    #6d6d6d 100%,
    #6d6d6d 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e1e1e', endColorstr='#6d6d6d', GradientType=0);
} */

.returnToProfile {
  text-align: center;
  margin: 3em;
}

.returnToProfile a,
.returnToProfile a:visited {
  color: #ddd;
}

.returnToProfile a:hover {
  color: #fff;
}

.desktop-only {
  display: none;
}

.mobile-only {
  display: inline;
}

@media only screen and (min-width: 56.25em) {
  .desktop-only {
    display: inline;
  }

  .mobile-only {
    display: none;
  }
}

/* @media only screen and (min-width: 37.5em) {
  .desktop-only {
    display: inline;
  }

  .mobile-only {
    display: none;
  }
} */