/* Stylesheet CSS*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&family=Lora:wght@400;500;600;700&family=Allison&family=Roboto:wght@100;300;400;500;700;900&family=Spartan:wght@300;400;500;600&family=Oooh+Baby&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
/* 
font-family: 'Lora', serif;
font-family: 'Poppins', sans-serif;

font-family: 'Bungee Hairline', cursive;
font-family: 'Gruppo', cursive;
font-family: 'WindSong', cursive;
font-family: 'Allison', cursive;
font-family: 'Spartan', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Oooh Baby', cursive;
font-family: 'Allison', cursive;

SET VARIABLES */

:root {
  --brand-white: #f7f7f7;
  --brand-black: #2a2a2a;
  --brand-grey: #bbbbbb;
  --brand-darkgrey: #4c5454;
  --brand-green: #559821;
  --brand-orange: #ff6600;
  --brand-red: #e32227;
  --dark-font: #464646;
  --brand-ltblue: #dcedffff;
  --brand-blue: #5c9eadff;
  --brand-dkblue: #326273ff;
  --cursive-font: 'Allison', cursive;
  --heading-font: 'Spartan', sans-serif;
  --body-font: 'Poppins', sans-serif;
}

/* TO USE IN code
var(--brand-blue); 
*/

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

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

html {
  font: normal 16px sans-serif;
  color: var(--brand-black);
  font-family: 'Poppins', sans-serif;
  background: var(--brand-white);
}

ul,
nav {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 1;
}

a:hover {
  font-weight: bold;
}

body {
  max-width: 100vw;
}

/* -------------
	   typography
   ------------- */

p {
  color: #2d2d2d;
  font-family: 'Poppins', sans-serif;
  /* font-family: 'Roboto', sans-serif; */
  /* font-family: 'Gruppo', cursive; */
  /* font-family: 'Bungee Hairline', cursive; */
  font-size: 1.1em;
  line-height: 1.2em;
  font-weight: 300;
}

small {
  font-size: 0.7em;
  line-height: 1.2em;
}

micro {
  font-size: 0.5em;
  line-height: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--brand-blue);
  font-family: 'Spartan', sans-serif;
  line-height: 1.5em;
  font-weight: 500;
}

h1 {
  font-size: 2.125em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.825em;
}

h4 {
  font-size: 1.5em;
}

h5 {
  font-size: 1.25em;
}

h6 {
  font-size: 1.125em;
}

.redfont {
  font-size: 1em;
  color: #7c1919;
  border: 1px solid #7c1919;
  padding: 1vh;
}

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

  h2 {
    font-size: 2.5em;
  }

  h3 {
    font-size: 2.25em;
  }

  h4 {
    font-size: 2em;
  }

  h5 {
    font-size: 1.5em;
  }

  h6 {
    font-size: 1.25em;
  }
}

/* -------------
	   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) {
}

hr {
  width: 50vw;
  height: 0.1vh;
  background-color: var(--brand-blue);
  border: 0;
  margin: 0 auto;
  margin-bottom: 2vh;
  margin-top: 2vh;
}

.vl {
  width: 0.1vh;
  height: 90%;
  background-color: #f7f7f7;
}

/* -------------
 
NAVIGATION
 ------------- */

/* :::::::::::::::::::::::::::::::::::::::::::::
  
  MOBILE BAR AT TOP
  3 SECTIONS LEFT MIDDLE AND RIGHT
  LEFT OR MIDDLE CONTAIN SITE LOGO
  RIGHT CONTAINS MENU-ICON (HAMBURGER MENU)
  
  ::::::::::::::::::::::::::::::::::::::::::::: */

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

MOBILE APP BAR MOBILE APP MODULE

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

.mobile-app-bar {
  z-index: 9;
  background: transparent;
  background-color: var(--brand-blue80);
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: fixed;
  bottom: 0;
  /* height: 8vh; */
}

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

.mobile-app-bar-button {
  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(64, 63, 76, 0.8) solid 1px; */
  padding: 1vh;
}

.last {
  border-right: 0px;
}

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

/* :::::::::::::::::::::::::::::::::::::::::::::
  
  FOOTER  SECTION
  
  ::::::::::::::::::::::::::::::::::::::::::::: */

.footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  bottom: 0;
  margin-bottom: 8vh;
  background-color: var(--brand-darkgrey);
}

.footer p {
  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--brand-white);
}

.footer a {
  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--brand-white);
}

@media only screen and (min-width: 56.25em) {
  .footer {
    margin-bottom: 0;
  }
}

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

L A Y O U T

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

/*---------------------
	PAGE LAYOUT SECTION
	JUST ADD LAYOUT PROPERTIES HERE
---------------------*/
.pagedrop {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10vh;
  transition: transform 900ms ease;
}

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

/*---------------------
	 PAGE STYLING SECTIONS
	 NO LAYOUT PROPERTIES
	 Just add styling properties like
	 background:  background-color:  min-height: padding: text-align etc
---------------------*/

/* LANDING PAGE CSS /////////////////////////////////////////////// */
.landing {
  background-color: var(--brand-white);
  background: url('../img/Chilli-Festival-bg-mob.jpg');
  background-size: cover;
  background-position: center 0 center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  height: 95vh;
  width: 100%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: flex-start;
  padding-top: 20vh;
}

.landing-bar {
  width: 100%;
  padding: 2vh;
  background: rgb(85, 152, 33);
  background: linear-gradient(
    90deg,
    rgba(85, 152, 33, 1) 0%,
    rgba(255, 102, 0, 1) 50%,
    rgba(227, 34, 39, 1) 100%
  );
}

.landing-box {
  background-color: #f7f7f7;
  background-color: var(--brand-red);
  padding: 1vh 7vh;
  border-radius: 10vh;
  -webkit-border-radius: 10vh;
  -moz-border-radius: 10vh;
  -ms-border-radius: 10vh;
  -o-border-radius: 10vh;
  border: 2px solid
    linear-gradient(
      90deg,
      rgba(85, 152, 33, 1) 0%,
      rgba(255, 102, 0, 1) 50%,
      rgba(227, 34, 39, 1) 100%
    );
}
@media only screen and (min-width: 56.25em) {
  .landing-box {
    padding: 1vh 10vh;
  }
}

.landing h1 {
  color: var(--brand-white);
  letter-spacing: 0em;
  line-height: 0.1em;
  font-weight: 400;
  font-size: 0.1em;
  width: 90%;
  opacity: 0;
}

.landing h2 {
  font-size: 3em;
  color: var(--brand-green);
  font-weight: 600;
}

.landing h3 {
  color: var(--brand-green);
  letter-spacing: 0em;
  line-height: 1.2em;
  font-weight: 500;
  font-size: 1.2em;
  width: 90%;
}

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

.landing h4 {
  color: var(--brand-ltblue);
  font-weight: 800;
}

.landing-bar p {
  color: var(--brand-blue);
  color: #ffee93;
}

.landing-bar h3 {
  color: #390040;
}

/* .landing h5 {
  color: var(--brand-red);
  font-size: 4em;
} */

.logo-div {
  width: 100%;
  background: var(--brand-white);
}

/* @media only screen and (min-width: 37.5em) {
  .landing {
    background-position: bottom 0 left 0;
  }
} */

.vendors {
  width: 95%;
  background: rgba(247, 247, 247, 0.8);
}
.vendors p {
  font-size: 1em;
  color: var(--brand-dkblue);
}
@media only screen and (min-width: 56.25em) {
  .landing {
    background-color: var(--brand-white);
    background: url('../img/Chilli-Festival-bg-full.jpg');
    background-size: cover;
    background-position: center 0 center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    align-content: center;
    padding-top: 0vh;
  }

  .landing h1 {
    font-size: 0.1em;
    line-height: 0.1em;
    width: 70%;
    opacity: 0;
  }
  .landing h2 {
    font-size: 4em;
  }
  .landing h3 {
    font-size: 1.5em;
    line-height: 1.5em;
    width: 70%;
  }
  .landing p {
    font-size: 2em;
  }
  .logo-div {
    width: 100%;
    background: transparent;
  }
  .vendors {
    width: 70%;
  }
  .vendors p {
    font-size: 1.2em;
    color: var(--dark-font);
  }
}

.celeb-chef {
  min-height: 100vh;
  width: 100%;
  overflow-y: hidden;
}

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

.celeb-chef-text {
  width: 100%;
  padding: 2vh;
}
.celeb-chef h2 {
  font-family: var(--cursive-font);
  color: var(--brand-red);
  font-weight: 500;
  font-size: 5em;
}

.celeb-chef h3 {
  color: var(--brand-dkblue);
}

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

.event-details {
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.8) 100%,
      rgba(255, 255, 255, 0.5) 200%
    ),
    url('../img/heromob2.jpg');
  background-size: cover;
  background-position: center left;

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 95vh;
  width: 100%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
}

.event-details h2 {
  font-family: var(--cursive-font);
  color: var(--brand-red);
  font-size: 3em;
  font-weight: 400;
}
.event-details p {
  color: var(--brand-black);
}
.event-text {
  width: 100%;
}
.event-details-text {
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.8) 50%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    url('../img/bglarge2.jpg');
}

@media only screen and (min-width: 56.25em) {
  .event-details {
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.6) 100%
      ),
      url('../img/bglarge2.jpg');
    background-position: center center;
  }
  .event-text {
    width: 50%;
  }
  .event-details h2 {
    font-size: 5em;
  }
}

.chilli-page {
  background: url('../img/bglarge3.jpg');
  background-size: cover;
  background-position: center left -100vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 95vh;
  width: 100%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  align-content: center;
  padding-left: 2vw;
}

.chilli-page h2 {
  font-family: var(--cursive-font);
  color: #ceb076;
  font-size: 3em;
}

@media only screen and (min-width: 56.25em) {
  .chilli-page {
    padding-right: 20vw;
    justify-items: end;
    background-position: center left;
  }
  .chilli-page h2 {
    font-size: 7em;
  }
}

.about-chilli {
  padding: 10vh 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about-chilli h1 {
  font-weight: 600;
  color: var(--brand-ltblue);
}
.about-chilli h4 {
  font-weight: 600;
  color: var(--brand-dkblue);
}
.about-chilli p {
  font-size: 1em;
  color: var(--brand-white);
}

.landing-vendor {
  width: 100%;
  min-height: 50vh;
  background: var(--brand-dkblue);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.landing-vendor h2 {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand-green);
}

.landing-vendor p {
  color: var(--brand-ltblue);
}

.landingContact {
  width: 100%;
  background-color: var(--brand-ltblue);
}

.landingContact h2 {
  color: var(--brand-green);
}
.landingContact p {
  color: var(--brand-dkblue);
}

.smallForm {
  width: 100%;
  background: #2d2d2d75;
  padding: 5vh;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.smallForm input {
  color: #aeaeae;
  border: none;
  border-bottom: 1px solid #f6f6f6;
  background-color: transparent;
}

.smallForm textarea {
  color: #aeaeae;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #f6f6f6;
}

.smallForm button {
  background: var(--brand-red);
  color: var(--brand-ltblue);
}

.smallForm input::-webkit-input-placeholder {
  color: var(--brand-white);
}

.smallForm input::-moz-placeholder {
  color: var(--brand-white);
}

.smallForm input:-ms-input-placeholder {
  color: var(--brand-white);
}

.smallForm input::-ms-input-placeholder {
  color: var(--brand-white);
}

.smallForm input::placeholder {
  color: var(--brand-white);
}

@media only screen and (min-width: 56.25em) {
  .smallForm {
    width: 40%;
  }
}

/* LANDING PAGE CSS /////////////////////////////////////////////// */

.landing-head {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 0;
  background: #fff;
  /* height: 10vh; */
}

.landing-head-logo {
  max-height: 20vh;
  width: auto;
}

.landingnew {
  /* background: url('../img/bglarge.jpg');
  background-size: cover;
  background-position: center 0 center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; */
  background: #ffffff;
  height: 100vh;
  width: 100%;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 2vh 0;
}

.landingnew h2 {
  color: var(--brand-red);
  font-weight: 600;
}

.appimage {
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
}

.landingnew h1 {
  color: var(--brand-red);
  font-family: var(--cursive-font);
  letter-spacing: 0em;
  line-height: 0.1em;
  font-weight: 400;
  /* font-size: 1em; */
  width: 90%;
}

.landingnew h2 {
  font-size: 3em;
  color: var(--brand-red);
  font-weight: 600;
}

.landingnew h3 {
  color: var(--brand-white);
  letter-spacing: 0em;
  line-height: 1.2em;
  font-weight: 500;
  font-size: 1.2em;
  padding: 1vh;
}

.landingnew h4 {
  color: var(--brand-red);
  font-weight: 600;
}

.landingnew p {
  color: var(--brand-dkgrey);
}

.landingevent {
  background: #fff;
  height: 100vh;
}
.landingevent h1 {
  font-family: var(--cursive-font);
  color: var(--brand-red);
  font-size: 6em;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
  line-height: 1em;
}

.landingevent h2 {
  font-size: 3em;
  color: #fff;
  text-align: center;
}

.event-dayimage {
  width: 75%;
}

.landingevent h2 {
  color: var(--brand-green);
  font-weight: 600;
}

.half {
  width: 100%;
  border-left: 1vh solid var(--brand-red);
}

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

  .event-dayimage {
    width: 100%;
  }
  .half {
    width: 50%;
    height: 100vh;

    border-left: 2vh solid var(--brand-red);
  }
}

.landingevent h2 {
  font-weight: 600;
}

.centre-page {
  border-left: 2vh solid var(--brand-red);
  border-right: 2vh solid var(--brand-green);
}

.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-event-button {
  width: 90vw;
  padding: 2vh 1vh;
}

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

.landing-event-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-green {
  background: var(--brand-green);
  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: 100%; */
}

@media only screen and (min-width: 56.25em) {
  .landing-event-button {
    width: 30vw;
    padding: 2vh 1vh;
  }
}

.image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: calc(100vh / 3); */
  width: 100%;
}

.social-follow {
  width: 100%;
  min-height: 50vh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  background: var(--brand-orange);
  text-align: center;
}

.social-follow h2 {
  font-family: var(--cursive-font);
  color: var(--brand-white);
  font-size: 5em;
}

.social-follow h5 {
  color: var(--brand-ltblue);
}

.social-follow p {
  color: var(--brand-white);
}

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

.sponsor-col h2,
h3 {
  color: var(--brand-green);
  font-weight: 600;
}

.sponsor-col h3 {
  font-size: 1.5em;
}

.sponsors {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sponsor-logo {
  width: calc(100vw / 2 - 6vw);
  height: auto;
  margin: 1vh;
}

.reduce {
  width: calc(100vw / 2 - 10vw);
}
.sponsor-logo-partner {
  width: calc(100vw / 3);
  height: auto;
  margin: 2vh;
}
.sponsor-logo-supporter {
  width: calc(100vw / 4);
  height: auto;
  margin: 2vh;
}
.event-manager-logo {
  width: 80vw;
  height: auto;
}
@media only screen and (min-width: 56.25em) {
  .sponsor-logo {
    width: calc(100vw / 4 - 5vw);
    height: auto;
    margin: 2vh 4vh;
  }
  .reduce {
    width: calc(100vw / 4 - 8vw);
  }
  .sponsor-logo-partner {
    width: calc(100vw / 5 - 5vw);
    height: auto;
  }
  .sponsor-logo-supporter {
    width: calc(100vw / 9);
    height: auto;
  }
  .event-manager-logo {
    width: 30vw;
    height: auto;
  }
  .sponsor-col h3 {
    font-size: 1.5em;
  }
}

.col-green {
  width: 100%;
}
.grid-box {
  width: calc(100% / 3);
  height: calc(100vh / 3);
}

.grid-red {
  background: var(--brand-red);
}
.grid-green {
  background: var(--brand-green);
}
.grid-white {
  background: var(--brand-white);
}

/* LANDING PAGE HERO SECTION CSS /////////////////////////////////////////////// */

.landing-hero {
  min-height: 70vh;
  width: 100%;
  background-color: var(--brand-green);

  display: grid;
  grid-template-columns: 1fr;
  padding: 2vh;
  text-align: center;
}

.landing-hero h2 {
  color: var(--brand-white);
  letter-spacing: 0.25em;
}

.landing-hero p {
  text-align: center;
  color: var(--brand-yellow);
}

.music-link-row {
  justify-content: space-between;
  padding: 0 2vh;
}

.music-link-row a {
  flex: 1;
}

/* // this is the shadow and rotation of hero image */
.landing-hero-img img {
  filter: drop-shadow(10px 10px 5px var(--brand-grad3));
  -webkit-filter: drop-shadow(10px 10px 5px var(--brand-grad3));
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

@media only screen and (min-width: 56.25em) {
  .landing-hero {
    grid-template-columns: 1fr 1fr;
    padding: 10vh;
  }

  .landingHero h2 {
    font-size: 4em;
  }
  /* // this is the shadow and rotation of hero image */

  .landing-hero-img img {
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
  }
}

/* LANDING PAGE GIGS SECTION CSS /////////////////////////////////////////////// */

.landing-intro {
  background: var(--brand-green);
  background: var(--brand-white);
  display: grid;
  grid-template-columns: 1fr;
}
.landing-intro-content {
  padding: 1vh;
}
.landing-intro h2 {
  font-family: 'Allison', cursive;
  font-size: 3em;
}
.landing-intro h3 {
  font-size: 1.5em;
}
.landing-intro p {
  color: var(--dark-font);
  font-size: 1em;
}

@media only screen and (min-width: 56.25em) {
  .landing-intro {
    grid-template-columns: 2fr 1fr;
  }
  .landing-intro-content {
    padding: 10vh;
  }
  .landing-intro p {
    font-size: 1.1em;
  }
  .landing-intro h2 {
    font-size: 5em;
  }
  .landing-intro h3 {
    font-size: 1.75em;
  }
  .landing-intro-image img {
    border-radius: 50% 0 0 50%;
    -webkit-border-radius: 50% 0 0 50%;
    -moz-border-radius: 50% 0 0 50%;
    -ms-border-radius: 50% 0 0 50%;
    -o-border-radius: 50% 0 0 50%;
  }
}

.book-now-col {
  background: var(--brand-white);
  background: var(--brand-green);
  background: var(--brand-green);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(175, 175, 157, 0.5) 0%,
      rgba(175, 175, 157, 0.5) 100%
    ),
    url(http://localhost/babyviewtique/public/img/general/bglarge-3.jpg)
      no-repeat center center scroll;
  /* background: url(http://localhost/babyviewtique/public/img/general/bglarge.jpg)
no-repeat top center fixed; */
  background-size: cover;
  -webkit-clip-path: polygon(0 0%, 100% 2.5%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 2.5%, 100% 100%, 0 100%);
  padding-bottom: 10%;
}
.book-now {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 2vh;
}

.book-now h3 {
  font-size: 1.5em;
}
.book-now h4 {
  font-size: 5em;
  color: var(--brand-white);
  font-family: 'Allison', cursive;
  vertical-align: text-top;
  margin-top: -20px;
}

.booking-card-row {
  width: 100%;
  padding: 2vh;
}

.booking-card {
  background: rgba(175, 175, 157, 0.7);
  border: 2px solid var(--brand-white);
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  padding: 2vh;
  width: 100%;
  margin-bottom: 5vh;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.booking-card p {
  color: var(--brand-white);
}

.booking-card h4 {
  font-family: 'Allison', cursive;
  font-size: 4em;
  line-height: 1em;
}

.book-now-btn {
  border: 1px solid var(--brand-white);
  padding: 1vh;
}

@media only screen and (min-width: 56.25em) {
  .book-now-col {
    -webkit-clip-path: polygon(0 0%, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }
  .book-now h3 {
    font-size: 2em;
  }
  .booking-card {
    width: 20%;
    min-height: 35vh;
  }
}

/* BIO SECTION CSS /////////////////////////////////////////////// */

.bio {
  background: var(--brand-white);
  background: var(--brand-green);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      hsla(60, 10%, 65%, 0.6) 0%,
      hsla(60, 10%, 65%, 0.6) 100%
    ),
    url(http://localhost/babyviewtique/public/img/general/bglarge-2.jpg)
      no-repeat center right scroll;
  /* background: url(http://localhost/babyviewtique/public/img/general/bglarge.jpg)
no-repeat top center fixed; */
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 80vh;
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 97%);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 97%);
}

.bio-content {
  padding: 2vh;
  /* align-items: flex-start; */
  text-align: left;
}

.bio h2 {
  font-family: 'Allison', cursive;
  color: var(--brand-pink);
  font-size: 3em;
}

.bio-content p {
  color: var(--dark-font);
  color: var(--brand-white);
  width: 100%;
  font-size: 1.1em;
}
.signature {
  justify-content: flex-end;
  padding: 0 5vh;
}
.bio-image {
  padding-top: 10vh;
}

@media only screen and (min-width: 56.25em) {
  .bio {
    grid-template-columns: 1fr 1fr;
    background: var(--brand-green);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #aeae9b 100%),
      url(http://localhost/babyviewtique/public/img/general/bglarge-2.jpg)
        no-repeat center right scroll;
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 96%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 96%, 0 100%);
  }
  .bio h2 {
    font-size: 5em;
  }
  .bio-image {
    padding-top: 0vh;
  }
}

/* LANDING FAQ SECTION CSS /////////////////////////////////////////////// */

.landing-faq {
  margin-top: -10%;
  width: 100%;
  min-height: 100vh;
  background: var(--brand-grey);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
}

.landing-faq h2 {
  font-family: 'Allison', cursive;
  margin: 0;
  line-height: 1em;
  font-size: 3.5em;
}

.landing-faq-content {
  padding: 2vh;
}

.landing-faq-image img {
  -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 96%, 0 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 96%, 0 100%);
}

/* 
.landing-faq p {
  padding: 2vh;
} */

@media only screen and (min-width: 56.25em) {
  .landing-faq {
    -webkit-clip-path: polygon(0 0%, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }
  .landing-faq-image {
    background: var(--brand-grey);
    flex: 1.5;
  }
  .landing-faq-image img {
    border-radius: 0 50% 50% 0;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    -ms-border-radius: 0 50% 50% 0;
    -o-border-radius: 0 50% 50% 0;
    -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
  }

  .landing-faq-content {
    flex: 2;
    padding: 5vh;
  }
  .landing-faq h2 {
    line-height: 1em;
    font-size: 5em;
  }
}

/* FAQ PAGE SECTION CSS /////////////////////////////////////////////// */

.faq {
  min-height: 100vh;
  width: 100%;
  background: var(--brand-white);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  text-align: center;
  padding: 2vh;
}

.faq p {
  color: var(--brand-black);
}

.faq h2 {
  color: var(--brand-blue);
  font-family: 'Allison', cursive;
  margin: 0;
  line-height: 1em;
  font-size: 4em;
}
.faq h3 {
  color: var(--brand-black);
  font-family: 'Spartan', sans-serif;
  margin: 0;
  line-height: 1em;
  font-size: 1.4em;
}

@media only screen and (min-width: 56.25em) {
  .faq {
    padding: 0 25vh;
  }
  .faq h2 {
    line-height: 1em;
    font-size: 5em;
  }
  .faq h3 {
    font-size: 1.8em;
  }
}

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

.landing-gigs {
  width: 100%;
  min-height: 100vh;
  background: url(http://localhost/babyviewtique/public/img/general/hero3.jpg)
    no-repeat top right fixed;
  /* background-position: top 0 left -30vw; */
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
}

.title-banner {
  width: 100%;
  text-align: center;
}

.gig-listing {
  width: 90%;
  background-color: var(--brand-blue80);
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  padding: 1vh;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.gig-listing-section {
  flex-wrap: wrap;
  align-items: center;
}

.landing-gigs h2 {
  color: var(--brand-blue);
}

.landing-gigs p {
  color: var(--brand-black);
}

.gig-listing p {
  font-size: 1em;
  color: var(--brand-white);
  text-align: center;
}

@media only screen and (min-width: 56.25em) {
  .landing-gigs {
    background-position: top 0 center 0;
  }

  .gig-listing {
    width: 80%;
    grid-template-columns: repeat(5, 1fr);
  }
}

/* LANDING PAGE Video SECTION CSS /////////////////////////////////////////////// */

.landing-video {
  width: 100%;
  background: rgb(49, 62, 80);
  background: linear-gradient(
    180deg,
    rgba(50, 98 115, 1) 0%,
    rgba(50, 98 115, 1) 100%
  );
  text-align: center;
  padding: 2vh;
  padding-top: 5vh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
}

.video-story {
  width: 100%;
  text-align: center;
}

.landing-video h2 {
  text-align: center;
  color: var(--brand-white);
}

.landing-video h3 {
  color: var(--brand-orange);
}

.landing-video p {
  color: var(--brand-grey);
}

.video-story p {
  font-size: 0.8em;
}

@media only screen and (min-width: 56.25em) {
  .video-story {
    width: 60%;
  }
  .video-story p {
    font-size: 1em;
  }
}

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

.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) {
  .iframe-container {
    width: 60%;
  }
}

/* LANDING PAGE NEWS SECTION CSS /////////////////////////////////////////////// */

.landing-news {
  width: 100%;
  min-height: 100vh;
  background: var(--brand-grey);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  padding-top: 5vh;
}

.landing-news-listing {
  display: grid;
  grid-template-columns: 1fr;
}

.landing-news p {
  color: var(--brand-black);
}

.landing-news-feature-image {
  max-width: 90%;
  height: auto;
}

.landing-news-body {
  align-items: flex-start;
  text-align: left;
  padding: 5vh;
}

@media only screen and (min-width: 56.25em) {
  .landing-news-listing {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }
}

/* LANDING PAGE BIO SECTION CSS /////////////////////////////////////////////// */

.landing-bio {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  width: 100%;
  background-color: #cecece;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(43, 58, 70, 0.8) 100%
    ),
    url(http://localhost/babyviewtique/public/img/general/bglarge2.jpg)
      no-repeat top right fixed;
  background-position: bottom 0 right -40vw;
  background-size: cover;
  padding-top: 5vh;
}
.landing-bio-content {
  width: 100%;
  padding: 5vh;
}
.bio-body {
  width: 100%;
}
.landing-bio h2 {
  color: var(--brand-blue);
}

.landing-bio p {
  color: var(--brand-white);
  font-size: 1em;
}

@media only screen and (min-width: 56.25em) {
  .landing-bio {
    background-position: top 0 right 0;
  }
  .landing-bio-content {
    width: 60%;
  }
  .bio-body {
    width: 60%;
  }
}

/* LANDING PAGE CONTACT SECTION CSS /////////////////////////////////////////////// */
.landing-contact {
  width: 100%;
  background-color: var(--brand-blue);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 2vh;
}

.landing-contact p {
  color: var(--brand-white);
}

.landing-contact h2 {
  color: var(--brand-green);
  font-family: 'Allison', cursive;
  margin: 0;
  line-height: 1em;
  font-size: 3em;
}

@media only screen and (min-width: 56.25em) {
  .landing-contact h2 {
    line-height: 1em;
    font-size: 5em;
  }
}

/* Thanks SECTION CSS /////////////////////////////////////////////// */

.thanks {
  background: var(--brand-white);
  background: var(--brand-green);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      hsla(60, 10%, 65%, 0.6) 0%,
      hsla(60, 10%, 65%, 0.6) 100%
    ),
    url(http://localhost/babyviewtique/public/img/general/bglarge-2.jpg)
      no-repeat center right scroll;
  /* background: url(http://localhost/babyviewtique/public/img/general/bglarge.jpg)
no-repeat top center fixed; */
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  min-height: 100vh;
}

.thanks h2 {
  font-family: 'Allison', cursive;
  color: var(--brand-white);
  font-size: 3em;
}

@media only screen and (min-width: 56.25em) {
  .thanks h2 {
    font-size: 5em;
  }
}
/* GENERIC SITE PAGE SECTION CSS /////////////////////////////////////////////// */

.site-page {
  min-height: 100vh;
  width: 100%;
  background-color: var(--brand-blue);
  padding: 2vh;
  display: grid;
  grid-template-columns: 1fr;
}

.site-page h1 {
  color: var(--brand-white);
}

.site-page h3 {
  color: var(--brand-orange);
}

.site-page p {
  color: var(--brand-white);
  font-size: 1em;
  line-height: 1.35em;
}

@media only screen and (min-width: 56.25em) {
  .site-page {
    padding-top: 2vh;
  }

  .site-page p {
    width: 70vw;
  }
}

/* CONTACT PAGE SECTION CSS /////////////////////////////////////////////// */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  width: 100%;
  padding: 2vh;
  min-height: 89.5vh;
  background: url(http://localhost/babyviewtique/public/img/general/hero3.jpg)
    no-repeat bottom right fixed;
  background-position: bottom 0 right -10vw;
  background-size: cover;
}

.contact p {
  color: #241623;
}

@media only screen and (min-width: 56.25em) {
  .contact {
    background: url(http://localhost/babyviewtique/public/img/general/hero3.jpg)
      no-repeat bottom center fixed;
    background-position: bottom 0 right 0;
  }
}

.contact-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  background: var(--brand-blue80);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 2.5vh;
}

.contact-form-col {
  width: 100%;
  padding: 2.5vh;
}

.contact-form-col:first-child {
  border-right: 0;
  padding: 5vh;
}

@media only screen and (min-width: 56.25em) {
  .contact-form {
    width: 60%;
    grid-template-columns: 1fr 1fr;
  }
  .contact-form-col:first-child {
    border-right: 1px solid var(--brand-white);
  }
}

/* MUSIC PAGE SECTION CSS /////////////////////////////////////////////// */
.music {
  justify-content: flex-start;
  background-color: #1c7293;
  height: 80vh;
  width: 100%;
  padding: 2vh;
  padding-top: 10vh;
}

.music p {
  color: #9eb3c2;
}

/* VIDEO PAGE SECTION CSS /////////////////////////////////////////////// */

.video {
  background-color: #f7f7f7;
  justify-content: flex-start;
  align-items: center;
  padding: 8vw 2vw;
}

.video h1 {
  font-size: 4vh;
  /* color: #fff; */
}

.video p {
  color: #201e1f;
  text-align: center;
  font-size: 2.5vh;
  line-height: 1.2;
  margin-bottom: 0;
}

/*--------------------- INSTALL WEBAPP PAGE ---------------------*/

.installwebapp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: var(--brand-blue);
  padding: 2vh;
  padding-top: 12vh;
  /* padding-bottom: 8vh; */
}

.installPage h2 {
  color: #fefefe;
  font-size: 1.7em;
}

.installwebapp p {
  color: #9eb3c2;
}

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

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

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

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

  .installPage h2 {
    font-size: 3em;
    color: #fefefe;
  }
}

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

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

FORMS

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

.contact {
  width: 100%;
  background: var(--brand-black);
  height: 100vh;
}

.contact-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  background-color: #8bacd7;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 2.5vh;
}

.contact-form-col {
  width: 100%;
  padding: 2.5vh;
  justify-content: center;
  align-items: center;
}

.contact-form-col:first-child {
  border-right: 0;
  padding: 5vh;
}

@media only screen and (min-width: 56.25em) {
  .contact-form {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  .contact-form-col:first-child {
    border-right: 1px solid var(--brand-white);
  }
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  padding: 2vh;
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.form-group input {
  border: none;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 0;
  background-color: transparent;
  padding: 15px;
  flex: 1;
  width: 100%;
  height: 5vh;
  font-size: 1em;
  color: var(--dark-font);
  margin: 0 0 20px 0;
  flex-basis: 100%;
  font-family: 'Roboto Condensed', sans-serif;
}

.form-group ::-webkit-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--dark-font);
  cursor: text;
}

.form-group ::-moz-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--dark-font);
  cursor: text;
}

.form-group :-ms-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--dark-font);
  cursor: text;
}

.form-group ::-ms-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--dark-font);
  cursor: text;
}

.form-group ::placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--dark-font);
  cursor: text;
}

.form-group textarea {
  padding: 15px;
  width: 100%;
  height: 15vh;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1em;
  color: var(--dark-font);
  background-color: transparent;
  margin: 5vh 0 5vh 0;
  border: none;
  border-bottom: 1px solid #f6f6f6;
}

select {
  width: 100%;
  padding: 1vh;
}

.form-group label {
  color: var(--dark-font);
}

.form-button {
  display: inline-block;
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: transparent;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 2vh 4vh;
  border: 1px solid #fff;
  cursor: pointer;
  margin: 2vh;
  box-shadow: 0px 8px 15px rgb(0 0 0 / 30%);
  transition: all 0.4s ease 0s;
}

.form-button:hover {
  background-color: var(--brand-gold);
  color: var(--brand-white);
}

.small-form {
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
  .small-form {
    width: 25%;
  }
}

/* EMAIL SPAM FILTER CSS///////////////////////// */
#email_add {
  display: none;
}

/* UTILITIES //////////////////////////////////////// */

/* -------------
 BUTTONS
 ------------- */

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

.btn {
  display: inline-block;
  background: var(--brand-white);
  border: 0px solid var(--brand-white);
  border-radius: 4px;
  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: 1em 2em;
  cursor: pointer;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-ghost {
  border: 2px solid var(--brand-white);
  background: transparent;
  color: var(--brand-white);
}

.btn-green {
  border: 1.5px solid var(--brand-green);
  background: transparent;
  color: var(--brand-green);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0);
}
.btn-gold:hover {
  opacity: 0.8;
}

.green-solid {
  background-color: var(--brand-green);
  border: 2px solid var(--brand-white);
  color: var(--brand-white);
  /* max-width: 98%; */
}

.green-hover:hover {
  background-color: var(--brand-green);
  color: var(--brand-white);
}

.btn-red {
  border: 1.5px solid var(--brand-white);
  background: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0);
}
.red-hover:hover {
  background-color: var(--brand-white);
  color: var(--brand-red);
}

.btn-phone {
  padding: 0 2em;
}

.tix {
  color: var(--brand-white);
  background: var(--brand-lightblue);
  border: 1px solid var(--brand-white);
  padding: 1vh 2vh;
  font-size: 0.8em;
}

.btn-small {
  padding: 0.5em 1em;
  font-size: 0.8em;
}

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

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

IMG CLASSES

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

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

.logo {
  max-width: 95vw;
  height: auto;
}
.logo-image {
  border-radius: 45px;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  -ms-border-radius: 45px;
  -o-border-radius: 45px;
}

.logoSmall {
  max-width: 50vw;
  height: auto;
}

.logoAvatar {
  max-width: 30vw;
  max-height: 30vw;
  height: auto;
}

.iconSocial {
  max-width: 6vw;
  height: auto;
  margin: 1.5vh;
}

.locationIcon {
  max-width: 4vw;
  height: auto;
  margin: 0 auto;
}

.heroImage {
  max-width: 90vw;
  height: auto;
}

.navbarIcon {
  max-width: 6vw;
  height: auto;
  margin: 1vh;
}

.musicLinkLogo {
  max-width: 45vw;
  height: auto;
  margin: 1vw;
}

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

.grid-logo {
  background: var(--brand-white);
}

.icon-follow {
  width: 80vw;
  height: auto;
}

.logo-webapp {
  max-height: 8vh;
  width: auto;
}
@media only screen and (min-width: 56.25em) {
  .logo {
    max-width: 35vw;
  }

  .logoSmall {
    max-width: 20vw;
  }

  .logoAvatar {
    max-width: 10vw;
  }

  .iconSocial {
    max-width: 2vw;
  }

  .heroImage {
    max-width: 40vw;
  }

  .locationIcon {
    max-width: 1vw;
  }

  .navbarIcon {
    max-width: 1vw;
  }

  .musicLinkLogo {
    max-width: 10vw;
    height: auto;
  }

  .iconInstall {
    max-width: 10vw;
  }

  .icon-follow {
    width: 20vw;
  }

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

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

.h1 {
  height: 1vh;
}

.h2 {
  height: 2vh;
}

.h5 {
  height: 5vh;
}

.h8 {
  height: 8vh;
}

.h10 {
  height: 10vh;
}

.h20 {
  height: 20vh;
}

.h30 {
  height: 30vh;
}

.h40 {
  height: 40vh;
}

.h50 {
  height: 50vh;
}

.h60 {
  height: 60vh;
}

.h70 {
  height: 70vh;
}

.h80 {
  height: 80vh;
}

.h90 {
  height: 90vh;
}

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

.pad2 {
  padding: 2vh;
}

.pad5 {
  padding: 5vh;
}

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

span {
  color: var(--brand-blue);
  font-weight: bold;
  font-size: 120%;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////
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) {
  .landing {
    background-attachment: initial;
  }

  .preorder {
    background-attachment: initial;
  }

  .landing-gigs {
    background-attachment: initial;
  }

  .landing-bio {
    background-attachment: initial;
  }

  .contact {
    background-attachment: initial;
  }

  .join {
    background-attachment: initial;
  }
}

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