@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');

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*font-family: 'Oswald', sans-serif;
font-family: "Barlow Condensed", 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; */

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

:root {
  --brand-white: #f7f7f7;
  --brand-black: #2a2a2a;
  --brand-grey: #bbbbbb;
  --brand-darkgrey: #494949;
  --brand-purple: #8a1253;
  /* --brand-pink: #d7263d; */
  --brand-pink: #b30089;
  --brand-orange: #e8751a;
  --brand-yellow: #fda304;
  --brand-teal: #17bebb;
  --brand-blue: #23294e;
  --dark-font: #464646;
  --brand-ltblue: #dcedffff;
  --brand-dkblue: #326273ff;
  --brand-lightpurple: #7a3b69;
  --brand-maroon: #8f2d56;
  --brand-lightpink: #dd99bb;
  --brand-lightpink80: #dd99bbcc;
  --brand-lightblue: #3e6990;
  --brand-sage: #c0c999;
  --brand-darkpurple: #470063;

  --cursive-font: 'Allison', cursive;
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Roboto Condensed', sans-serif;
}

* {
  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: var(--brand-dkblue);
  border-radius: 4px;
  text-transform: uppercase;
  background-color: var(--brand-sage);
  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;
  background-color: var(--brand-lightblue);
}

.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;
  background-color: var(--brand-lightblue);
  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;
}

.logo-glow {
  filter: drop-shadow(0px 0 10px white);
  -webkit-filter: drop-shadow(0px 0 10px white);
}

.logosmall {
  max-width: 40vh;
  height: auto;
}

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

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

.logo-webapp {
  width: 10vh;
  height: auto;
}

.small {
  max-height: 10vh;
}

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

.social-icon {
  max-height: 4vh;
  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-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
}

h1 {
  font-size: 3em;
}

@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;
  }

  .logosmall {
    max-width: 25vw;
    height: auto;
  }

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

.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%;
}

.text-column {
  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;
  }
  .text-column {
    width: 70%;
  }
}

.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: 95vh;
  background: url(img/heromob23.avif) no-repeat bottom center fixed;
  background-size: cover;
  justify-content: flex-start;
  justify-content: space-between;
  background-color: var(--brand-white);
  padding-top: 10vh;
}

.landing h1 {
  font-size: 2em;
  color: #d7263d;
}

.landing p {
  font-size: 1em;
}
.landingBanner {
  width: 100%;
  /* background: var(--brand-white); */
}
.landingBanner h2 {
  color: var(--brand-purple);
  font-size: 2.5em;
}
.landingBanner h3,
h4 {
  color: var(--brand-white);
}

.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: 100vh; */
    background: url('img/hero26.avif');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

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

.hero {
  width: 100%;
  background-color: var(--brand-lightblue);
  color: var(--brand-white);
  min-height: 50vh;
  padding: 5vh 2vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero h2 {
  font-size: 1.5em;
  color: var(--brand-sage);
  font-weight: 400;
}

.program {
  width: 100%;
  background-color: var(--brand-white);
  color: var(--brand-blue);
  min-height: 50vh;
  padding: 5vh 2vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.program-header {
  width: 100%;
}

.program-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.program h2 {
  font-size: 1.5em;
  color: var(--brand-sage);
  font-weight: 400;
}

@media only screen and (min-width: 56.25em) {
  .program-header {
    width: 30vw;
  }
  .program-content {
    width: 70vw;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .program h2 {
    font-size: 3em;
  }
}

.event-over {
  width: 100%;
  min-height: 100vh;
  /* background: url(img/herob.jpg) no-repeat top center fixed;
  background-size: cover; */
  background-color: var(--brand-lightblue);
  text-align: center;
}

.event-over h1 {
  color: var(--brand-pink);
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
  line-height: 1em;
}

.event-over h3 {
  color: var(--brand-purple);
  color: var(--brand-white);
  font-size: 2em;
}

.event-over h1:hover {
  color: var(--brand-orange);
}

.event-over p {
  color: var(--brand-black);
  font-size: 1.2em;
}

.purple-banner {
  width: 100%;
  background-color: var(--brand-purple);
}

.over-logo {
  max-height: 15vh;
  width: auto;
}

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

.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: 50vh;
  background: #17bebb;
  background: #23294e;
  background: #f7f7f7;
  text-align: left;
}

.appdownload {
  min-height: 50vh;
  width: 100%;
}

.celebchef h2 {
  color: var(--brand-lightpurple);
  font-size: 2em;
}
.appdownload h2 {
  font-size: 2.25em;
}

.celebchef h3 {
  color: #23294e;
}

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

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

  .celebchef p {
    font-size: 1.5em;
    padding: 2vh 10vh;
  }
}

.contentPage {
  min-height: 65vh;
  width: 100%;
  background: var(--brand-lightpurple);
  background: rgb(138, 19, 83);
  background: linear-gradient(
    90deg,
    rgba(138, 19, 83, 1) 0%,
    rgba(253, 164, 5, 1) 100%
  );
  padding: 2vh;
  text-align: center;
}

.contentPage h3 {
  font-size: 2em;
  font-weight: 700;
  color: var(--brand-lightpink);
}

.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;
  }
}

.lfresh {
  min-height: 100vh;
  width: 100%;
  background: url('img/hero-lfresh.jpg');
  background-size: cover;
  background-position: top left -50vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.lfresh-col {
  width: 100%;
  padding-top: 25vh;
  justify-content: center;
  align-items: center;
}

.lfresh h1 {
  font-size: 4em;
  line-height: 1em;
}

.lfresh h2 {
  color: #d7263d;
  font-size: 3em;
  line-height: 1em;
}

.lfresh h3 {
  color: #e8751a;
}

.lfresh p {
  color: #f7f7f7;
  font-size: 1.2em;
}
.lfresh h5 {
  font-size: 1.8em;
}
@media only screen and (min-width: 56.25em) {
  .lfresh {
    background-position: top center;
  }

  .lfresh-col {
    width: 50vw;
    padding-top: 0;
  }
  .lfresh h1 {
    font-size: 8em;
    line-height: 1em;
  }
  .lfresh h2 {
    font-size: 5em;
  }
}

.bollywoodPage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: url(img/hero5.jpg) no-repeat center center fixed;
  background-size: cover;
  padding: 2vh;
  text-align: center;
}

.bollywoodPage h2 {
  font-size: 1.5em;
  font-weight: 700;
  color: #ffffff;
}

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

.bollywoodPage p {
  font-size: 1.8em;
}

.chefPage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: flex-end;
  align-items: center;
  background: url(img/hero6.jpg) no-repeat top center fixed;
  background-size: cover;
  padding: 2vh;
  text-align: center;
}

.chefPage h2 {
  font-size: 1.8em;
  font-weight: 700;
  color: #d7263d;
}

.chefPage h1 {
  font-size: 1.8em;
  color: #d7263d;
}

.chefPage p {
  font-size: 1.8em;
  color: #222;
}

.historyPage {
  min-height: 80vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.8) 50%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    url(img/hero3.jpg) no-repeat center center fixed;
  background-size: cover;
  padding: 2vh;
  text-align: center;
}

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

.partner {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: #17bebb;
  background: var(--brand-lightblue);
  padding: 5vh;
  text-align: center;
}

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

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

.partner form .btn {
  padding: 18px 42px;
  width: 90vw;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 3vh;
  font-weight: 400;
  letter-spacing: 0.3rem;
  background: #282d4c;
  background-color: var(--brand-sage);
  color: var(--brand-dkblue);
  border: 0;
}

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

  .partner form .btn {
    width: 25vw;
    font-size: 2vh;
  }
}

.vendorPage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: #17bebb;
  background: var(--brand-lightblue);
  padding: 5vh;
  text-align: center;
}
.vendorPage h2 {
  color: var(--brand-lightpink);
}

.landingVendor {
  min-height: 70vh;
}

.partner p {
  color: #f7f7f7;
  font-size: 1.2em;
}

.partner h2 {
  color: var(--brand-lightpink);
}

.landingfaq {
  min-height: 35vh;
}

.landingfaq h3 {
  color: #f7f7f7;
}

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

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

.wellnessPage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: #17bebb;
  background: var(--brand-white);
  padding: 5vh;
  text-align: center;
}
.wellnessPage h2 {
  color: var(--brand-lightblue);
}
.wellnessPage p {
  color: var(--brand-black);
  width: 100%;
  font-size: 1.2em;
}

.wellnessPage h3 {
  color: #0c92a5;
}

.wellnessPanel {
  width: 95%;
  height: 100%;
  padding: 2vh;
}
.wellnessPanel p {
  color: var(--brand-white);
}
.MainPanel {
  background-color: var(--brand-blue);
}
.SecPanel {
  background-color: var(--brand-dkblue);
}

@media only screen and (min-width: 56.25em) {
  .wellnessPage p {
    font-size: 1.5em;
    width: 70%;
  }
  .wellnessPanel {
    justify-content: flex-start;
    width: 30%;
    height: 95vh;
    padding: 2vh;
    margin: 2vh;
  }
}

/* Flip order only on mobile (default column layout) */
.reversal > img {
  order: -1; /* pushes the image above the .col */
}

/* Reset on desktop (row layout) so order is natural again */
@media (min-width: 56em) {
  .reversal > img {
    order: 0;
  }
}

.aboutPage {
  min-height: 80vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: #23294e;
  background-color: var(--brand-lightpurple);

  padding: 5vh;
  text-align: center;
}

.aboutPage h2 {
  color: #d7263d;
  color: var(--brand-sage);
  font-size: 2.5em;
}

.aboutPage p {
  font-size: 1em;
  color: var(--brand-lightpink);
}

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

  .aboutPage h2 {
    font-size: 4em;
  }
}

.culturePage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: url(img/hero4.jpg) no-repeat center center fixed;
  background-size: cover;
  padding: 2vh;
  padding-top: 10vh;
  text-align: center;
}

.culturePageQuote {
  background-color: var(--brand-lightpink80);
  padding: 2vh;
  border-radius: 10vh;
  -webkit-border-radius: 10vh;
  -moz-border-radius: 10vh;
  -ms-border-radius: 10vh;
  -o-border-radius: 10vh;
}

.culturePage h3 {
  color: #2e294e;
}

.culturePage p {
  font-size: 1em;
  color: var(--brand-dkblue);
}

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

.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;
  color: var(--brand-lightpurple);
}

.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;
  margin-bottom: 2vh;
}

.heightsponsor {
  max-height: 20vh;
  width: auto;
}

.eventsponsor {
  max-width: 40vw;
  width: auto;
  padding: 2vw;
}
.reduce {
  max-width: 25vw;
}

.eventpartner p {
  text-align: left;
}

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

.highlogo {
  max-height: 20vh;
}

@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;
  }

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

  .majorsponsor {
    max-width: 20vw;
    width: auto;
    padding: 2vw;
    margin-bottom: 0;
  }
  .reduce {
    max-width: 12vw;
  }

  .highlogo {
    max-width: 15vw;
    width: auto;
    padding: 2vw;
  }
  .eventpartner p {
    font-size: 1.5em;
  }
}

/* MEDIA EPK PAGE ////////////////////////////////////////////// */

.media-page {
  width: 100%;
  min-height: 100vh;
  background: var(--brand-white);
  text-align: center;
}

.media-page h2 {
  color: var(--brand-pink);
}

.media-page h3 {
  color: var(--brand-blue);
  font-size: 1.75em;
  font-weight: 600;
}

.media-page h4 {
  color: var(--brand-blue);
  font-size: 1em;
  font-weight: 300;
}

.mp-banner {
  width: 90%;
  padding: 5vh;
}

.mp-press-release {
  padding: 2vh;
}
.mp-press-release p {
  font-size: 1.1em;
  color: var(--brand-black);
}

.press-image {
  width: 100%;
}

.press-images {
  width: 98%;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 56.25em) {
  .media-page h4 {
    color: var(--brand-blue);
    font-size: 1.5em;
    font-weight: 300;
  }
  .media-page h3 {
    color: var(--brand-blue);
    font-size: 2.5em;
    font-weight: 600;
  }
  .mp-banner {
    width: 50%;
  }
  .mp-press-release {
    padding: 5vh;
    width: 60%;
    text-align: left;
  }
  .mp-press-release p {
    font-size: 1.2em;
    color: var(--brand-black);
  }
  .press-images {
    width: 60%;
    justify-content: center;
    align-items: center;
  }
  .press-image {
    width: 30vw;
  }
}

/* MEDIA EPK PAGE ////////////////////////////////////////////// */
*/ .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;
}

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

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

.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;
  }
}

.survey-page {
  width: 100%;
  min-height: 85vh;
  background-color: var(--brand-white);
  justify-content: space-between;
  align-items: center;
  padding: 2vh;
}
.survey-page h2 {
  color: var(--brand-purple);
}
.survey-page p {
  font-size: 1.5em;
  color: var(--brand-dkblue);
}

/* 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%;
  }
}

/* 
input[type=checkbox] {
	display: none;
}

nav {
	height: 100%;
}

nav ul {
	background: #414a4f;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	max-height: 0px;
	overflow: hidden;
	list-style: none;
	-webkit-transition: all 3s cubic-bezier(.325, 1, .22, 1);
	transition: all 3s cubic-bezier(.325, 1, .22, 1);
}

nav li {
	border-bottom: .18rem solid #fff;
	color: #fff;
	font-size: 1em;
	padding: 2vw 0;
}

nav li p {
	color: #ededed;
	font-size: 0.8em;
	font-weight: 400;
}

nav li:last-of-type {
	margin-bottom: .625rem;
}

nav li a {
	font-family: Nunito;
	text-decoration: none;
}

nav li a:hover {
	font-size: 1.2em;
	font-weight: 600;
}

input[type=checkbox]:checked~nav ul {
	z-index: 10;
	height: auto;
	max-height: 12rem;
	-webkit-transition: all 3s cubic-bezier(.5, 1, .22, 1);
	transition: all 3s cubic-bezier(.5, 1, .22, 1);
	min-height: 50vh;
}

.hamburger {
	display: block;
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-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;

	top: 18px;
	right: 13px;
	height: 27px;
	width: 50px;
	cursor: pointer;
	-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
	transition: all 1s cubic-bezier(.19, 1, .22, 1);
}

.line {
	position: absolute;
	display: block;
	background: #3d3d3d;
	width: 50px;
	height: .3rem;
	border-radius: .2rem;
	left: 0;
	-webkit-transition: all .6s cubic-bezier(.5, .1, 0, 1.2);
	transition: all .6s cubic-bezier(.5, .1, 0, 1.2);
}

.line-1 {
	top: 0;
}

.line-2 {
	top: 10px;
	width: 50px;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
}

.line-3 {
	top: 20px;
}

input[type=checkbox]:checked~label .line-1 {
	top: 0px;
	width: 50px;
	-webkit-transform: translateX(-11px) rotate(-45deg) translateY(12px);
	transform: translateX(-11px) rotate(-45deg) translateY(12px);
}

input[type=checkbox]:checked~label .line-2 {
	opacity: 0;
}

input[type=checkbox]:checked~label .line-3 {
	top: 14px;
	width: 50px;
	-webkit-transform: translateX(-8px) rotate(45deg) translateY(-8px);
	transform: translateX(-8px) rotate(45deg) translateY(-8px);
} */

.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;
}

@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: 20vh;
    width: auto;
  }

  .header nav,
  .header ul {
    width: 20vw;
  }
}

/* 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: 3;
  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;
  background-color: var(--brand-lightpink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1vh;
}
.contact h2 {
  color: var(--brand-lightblue);
}
.contact p {
  color: var(--brand-maroon);
}
.media-page-contact {
  background-color: var(--brand-grey);
  min-height: 20vh;
  text-align: center;
  padding: 1vh;
}
.media-page-contact textarea {
  width: 75vw;
}
.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-sponsors h3 {
  color: var(--brand-blue);
}

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

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

.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;
}

.footerItem h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: black;
  margin-top: 0.5vh;
  margin-left: -0.25em;
  /* border-bottom: 5px solid #6db0c0; */
}
.footerItem h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: black;
  border-bottom: 5px solid #6db0c0;
}

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

  .footerItem {
    width: 33%;
  }
  .footer-logo {
    width: 15vw;
    height: auto;
  }
}

.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;
}

@media only screen and (min-width: 56.25em) {
  .imaged-footer img {
    max-width: 8vw;
    height: auto;
    margin: 0 auto;
  }
}

.desktophide {
  display: block;
}

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

.transparent {
  background: transparent;
}

/* 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;
}

.orangetext {
  color: #e8751a;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////
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;
  }
}

.social-row {
  width: 10%;
  align-items: center;
  justify-content: center;
}

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

/* 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%;
  /* background: #fefefe; */
  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;
  }
}