/* Stylesheet CSS*/

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Monoton&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;200;300;400;500;600;700&display=swap');
/* 
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Red Hat Text', sans-serif;
font-family: 'Monoton', cursive;
font-family: 'Cutive Mono', monospace;
font-family: 'Allison', cursive;
font-family: 'Antonio', sans-serif;
*/

:root {
  --brand-white: #f7f7f7;
  --brand-black: #272727;
  --brand-grey: #666559;
  --brand-orange: #ff734c;
  --brand-blue: #4593a9;

  /* --name-font: 'Monoton', cursive; */
  --name-font: 'Antonio', sans-serif;
  --name-font: 'Roboto Condensed', sans-serif;
  --c-cream: #fde3c7ff;
  --c-purple: #583a42ff;
  --c-silver: #e2e0deff;
  --c-bone: #c4bcaeff;
  --c-blue: #385f71ff;
  --c-midgrey: #3f3e3c;
  --c-darkgrey: #302828;
}

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

a:hover {
  font-weight: bold;
}

body {
  max-width: 100vw;
}

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

p {
  color: #2d2d2d;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: 200;
  /* margin: 1.5em 0; */
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #757083;
  font-family: 'Antonio', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;

  line-height: 2em;
  font-weight: 700;
}

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

/* -------------
   SITE COLORS
   ------------- */
.brandwhite {
  color: #f6f6f6;
}

.brandblack {
  color: #363538;
}

.brandgrey {
  color: #8d8c8a;
}

.brandteal {
  color: #408697;
}

.brandblue {
  color: #52d6f4;
}

hr {
  width: 50%;
  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;
}

/* -------------
 BUTTONS
 ------------- */
.btn {
  color: #feefdd;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #ff4000;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 3vh 6vh;
  border: 0px solid #feefdd;
  cursor: pointer;
  margin: 2vh;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-ghost {
  color: #fdfdfd;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  text-transform: uppercase;
  background-color: transparent;
  background-color: var(--brand-blue);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-align: center;
  padding: 2vh 6vh;
  border: #fdfdfd 0px solid;
  cursor: pointer;
  margin: 2vh;
  /*-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
	*/
}

.btn-ghost:hover {
  background-color: var(--c-blue);
  color: var(--brand-white);
}

.btn-cta {
  color: #a61510;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #f7f7f7;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 2vh 4vh;
  border: 1px solid #a61510;
  cursor: pointer;
  margin: 2vh;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-small {
  color: #f7f7f7;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #262f38;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 1.5vh 3vh;
  border: 0px solid #f7f7f7;
  cursor: pointer;
  margin: 2vh;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.deletebtn {
  background-color: #7c1919;
  width: 30vw;
  height: 8vw;
  font-family: 'Open Sans', sans-serif;
  transition: all 0.2s ease-in-out;
  font-size: 0.8em;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  vertical-align: middle;
  line-height: 8vw;
  margin: 1vh;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.editbtn {
  background-color: #456990;
  width: 30vw;
  height: 8vw;
  font-family: 'Open Sans', sans-serif;
  transition: all 0.2s ease-in-out;
  font-size: 0.8em;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  vertical-align: middle;
  line-height: 8vw;
  margin: 1vh;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.ghost {
  color: aliceblue;
  background: transparent;
  border: 1px solid aliceblue;
}

.tix {
  color: #000;
  background: rgba(0, 0, 0, 0.9);
  background: rgba(240, 248, 255, 0.5);
  border: 1px solid #000;
  padding: 1vh 2vh;
  font-size: 0.8em;
}

.tix {
  background-color: #c6e2ff;
}

@media only screen and (min-width: 56.25em) {
  .deletebtn {
    width: 4vw;
    height: 2vw;
    line-height: 2vw;
  }

  .editbtn {
    width: 4vw;
    height: 2vw;
    line-height: 2vw;
  }

  .btn-ghost {
    font-size: 0.9em;
    font-weight: 400;
    letter-spacing: 0.4rem;
    padding: 2vh 6vh;
  }
}

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

IMG CLASSES

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

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

.logo {
  max-width: 100%;
  height: auto;
}

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

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

.logoLinklist {
  max-height: 15vw;
  width: auto;
}

.iconSocial {
  max-width: 8vw;
  height: auto;
  margin: 2vh;
}

.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: 25vw;
  height: auto;
  margin: 0 auto;
}

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

.music-image {
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 56.25em) {
  .logo {
    max-width: 100%;
  }

  .logoSmall {
    max-width: 20vw;
  }

  .logoAvatar {
    max-width: 10vw;
  }

  .logoLinklist {
    max-height: 15vw;
    width: auto;
  }

  .iconSocial {
    max-width: 2vw;
  }

  .heroImage {
    max-width: 20vw;
  }

  .locationIcon {
    max-width: 1vw;
  }

  .navbarIcon {
    max-width: 1vw;
  }

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

  .iconInstall {
    max-width: 10vw;
  }

  .music-image {
    max-width: 80%;
    height: auto;
  }
}

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

/* :::::::::::::::::::::::::::::::::::::::::::::
MENU  ICON and MENU TOGGLE
::::::::::::::::::::::::::::::::::::::::::::: */

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

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

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

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

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

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

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

/**---- Menu Word Effects ----**/
.menuWord {
  font-size: 1.2em;
  font-weight: 300;
  color: #408697;
  cursor: pointer;
  transition: transform 900ms ease;
}

.menuWord > span:before {
  transform: translateY(-0.6em);
  content: 'MENU';
}

.menuWord > span:after {
  transform: translateY(0.6em);
  content: '';
}

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

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

.menu-toggle:checked + .mobile-bar .menuWord span:after {
  font-size: 0.8em;
  content: 'Close(X)';
}

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

.menu-toggle:checked ~ .header {
  transform: translateX(100%);
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
}

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

/**---- Pushdown Page Effect ----**/

.menu-toggle:checked ~ .dropdown-menu {
  transform: translateY(100%);
}

.menu-toggle:checked ~ .pagedrop {
  transform: translateY(100%);
}

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

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

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

.menu-toggle {
  display: none;
}

.mobile-bar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 2.5vw;
  width: 100vw;
  height: 10vh;
  background-color: transparent;
  display: flex;
  flex-direction: row;
}

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

.mobile-bar-center {
  z-index: 8;
  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;
}

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

/* :::::::::::::::::::::::::::::::::::::::::::::
	   HEADER 
	   ::::::::::::::::::::::::::::::::::::::::::::: */

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

header nav li {
  margin: 0;
}

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

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

/* :::::::::::::::::::::::::::::::::::::::::::::
  MOBILE NAVIGATION OFFCANVAS slide in from right
  
  To implement:-
  HTML
  
  1. <header class="header">
  2. Main page contents must be wrapped in class .pagedrop
  <section class="col pagedrop">
  
  ::::::::::::::::::::::::::::::::::::::::::::: */

.header {
  z-index: 9;
  position: fixed;
  top: 0;
  left: -100vw;
  padding-top: 10vh;
  padding-bottom: 4em;
  height: 100%;
  background-color: rgba(76, 60, 62, 0.8);
  text-align: center;
  transition: transform 1000ms ease;
}

/* ////// CHANGE WIDTH BELOW, TO CHANGE WIDTH OF OFF CANVAS MENU THAT SLIDES IN.  EG 100% IS FULL SCREEN, 50% IS HALF SCREEN /////// */

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

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

.header a {
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #9dc2ac;
  color: #f9f9f9;
  display: block;
  padding: 1vh;
  transition: background-color 2000ms ease-in;
  font-size: 1.5em;
}

.header a:hover {
  color: #ff734c;
}

.menu-icon p {
  opacity: 0;
}

@media only screen and (min-width: 56.25em) {
  /* :::::::::::::::::::::::::::::::::::::::::::::
  Desktop Navigation Style===  Comment out section 1 or 2 below.
  ::::::::::::::::::::::::::::::::::::::::::::: */

  /* :::::::::::::::::::::::::::::::::::::::::::::
  1.  Horizontal Desktop Navigation
  ////////////////////////////////////////// */

  /* .header a {
		  font-size: 1em;
	  }
  
	  .header {
		  padding: 0;
		  left: 0;
		  height: auto;
		  background-color: transparent;
	  }
  
	  .header nav,
	  .header ul {
		  height: 10vh;
		  width: 100vw;
		  display: -webkit-box;
		  display: flex;
		  -webkit-box-orient: horizontal;
		  -webkit-box-direction: normal;
		  flex-direction: row;
		  justify-content: space-around;
		  -webkit-box-align: center;
		  align-items: center;
	  } */

  /* :::::::::::::::::::::::::::::::::::::::::::::
  2.  Mobile Style Hamburger Menu on Desktop Navigation
  
  THE "DISPLAY" properties on 
  .mobile-bar
  .menu-icon
  are the key to displaying the hamburger and mobile bar with logo,
  as the navigation.
  
  .header nav, .header ul
  width determines the width of the navigation that slides onto the screen.
  width: 100vw;  is full screen!!
  ////////////////////////////////////////// */

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

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

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

  .mobile-bar {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}

/* :::::::::::::::::::::::::::::::::::::::::::::
  MOBILE NAVIGATION TOP that pushes page contents down
  
  To implement:-
  HTML
  
  1. <header class="dropdown-menu">
  
  2. Main page contents must be wrapped in class .pagedrop
  <section class="col pagedrop">
  
  CSS Below:
  
  3. Adjust height of dropdown menu here, 100% full page.
  .dropdown-menu
	  top: -100%;
	  height: 100%;
  
  ::::::::::::::::::::::::::::::::::::::::::::: */

.dropdown-menu {
  position: fixed;
  top: -70%;
  height: 70%;
  width: 100vw;
  left: 0;
  padding-top: 10vh;
  padding-bottom: 4em;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  transition: transform 900ms ease;
}

.dropdown-menu nav,
.dropdown-menu ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

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

.dropdown-menu a {
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #80ced7;
  display: block;
  padding: 1vh;
  transition: background-color 300ms ease-in;
  font-size: 1em;
}

.dropdown-menu a:hover {
  color: #dbf4a7;
}

.menu-icon p {
  opacity: 0;
}

@media only screen and (min-width: 56.25em) {
  /* :::::::::::::::::::::::::::::::::::::::::::::
  Desktop Navigation Style===  Comment out section 1 or 2 below.
  ::::::::::::::::::::::::::::::::::::::::::::: */

  /* :::::::::::::::::::::::::::::::::::::::::::::
  2.  Mobile Style Hamburger Menu on Desktop Navigation
  
  THE "DISPLAY" properties on 
  .mobile-bar
  .menu-icon
  are the key to displaying the hamburger and mobile bar with logo,
  as the navigation.
  
  .header nav, .header ul
  width determines the width of the navigation that slides onto the screen.
  width: 100vw;  is full screen!!
  ////////////////////////////////////////// */

  .dropdown-menu a {
    font-size: 2em;
  }

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

  .dropdown-menu nav,
  .dropdown-menu ul {
    width: 100vw;
  }

  .mobile-bar {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}

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

MOBILE APP BAR MOBILE APP MODULE

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

.mobileappbar {
  z-index: 9;
  background: transparent;
  background-color: rgba(76, 60, 62, 0.8);
  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(64, 63, 76, 0.8) solid 1px; */
  padding: 2vh;
}

.last {
  border-right: 0px;
}

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

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

.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  bottom: 0;
  margin-bottom: 8vh;
  background-color: #201e1f;
}

.footer p {
  font-size: 0.8em;
  line-height: 1.5em;
  color: #8d8c8a;
}

.footer a {
  font-size: 0.8em;
  line-height: 1.5em;
  color: #8d8c8a;
}

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

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

L A Y O U T

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

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

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

.start {
  justify-content: flex-start;
}

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

.logo h1 {
  font-family: var(--name-font);
  color: var(--brand-black);
  line-height: 1em;
  font-size: 4em;
  font-weight: 200;
}

.logo h2 {
  font-family: var(--name-font);
  color: var(--brand-black);
  line-height: 1em;
  font-size: 3em;
  font-weight: 200;
}

@media only screen and (min-width: 37.5em) {
  .logo h1 {
    font-size: 6em;
  }
  .logo h2 {
    font-size: 4.5em;
  }
}

@media only screen and (min-width: 56.25em) {
  .logo h1 {
    font-size: 10em;
    font-weight: 400;
  }
  .logo h2 {
    font-size: 7.5em;
    font-weight: 400;
  }
}

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

.landing {
  min-height: 100vh;
  width: 100%;
  background: var(--brand-white);
  padding-bottom: 8vh;
  text-align: center;
  align-items: center;
  /* justify-content: flex-end; */
  padding-top: 0;
  transition: min-height 1000000s ease;
  -webkit-transition: min-height 1000000s ease;
  -moz-transition: min-height 1000000s ease;
  -o-transition: min-height 1000000s ease;
}

.landingContent {
  width: 100%;
  height: 80vh;
  justify-content: flex-end;
  padding-top: 5vh;
}

.landing h1 {
  font-family: var(--name-font);
  color: var(--c-midgrey);
  line-height: 1em;
  font-size: 3.5em;
  font-weight: 700;
  /* color: #ff734c; */
}

.landing h2 {
  color: var(--c-bone);
  line-height: 1em;
  font-size: 1.8em;
  /* color: #ff734c; */
}

.landing p {
  color: var(--c-midgrey);
}

@media only screen and (min-width: 37.5em) {
  .landing {
    background: var(--brand-white);
  }
  .landing h1 {
    font-size: 6em;
  }
}
@media only screen and (min-width: 56.25em) {
  .landing {
    min-height: 100vh;
    background: var(--brand-white);

    padding-top: 8vh;
    padding-bottom: 2vh;
    justify-content: center;
    align-items: center;
  }

  .landing h1 {
    font-size: 5em;
    font-weight: 700;
  }

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

  .landing p {
    font-size: 2em;
  }

  .landingContent {
    /* padding-top: 10vh; */
    width: 60%;
    justify-content: center;
    padding-top: 0;
  }
}

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

.landingHero {
  min-height: 100vh;
  width: 100%;
  /* padding: 2vh; */
  text-align: center;
  background-color: var(--brand-grey);
}

.landingHero h4 {
  line-height: 1em;
  color: var(--brand-black);
}

.landingHero p {
  text-align: center;
  color: var(--brand-white);
  padding: 2vh;
}

.musicLinkRow {
  justify-content: space-between;
  padding: 0 2vh;
}

.musicLinkRow a {
  flex: 1;
}

@media only screen and (min-width: 56.25em) {
  .landingHero h2 {
    font-size: 4em;
  }
  .landingHero p {
    padding: 5vh;
  }
}

/* // APPLICATION PAGE /////////////////////////////////////////////////////////////// */

.application {
  min-height: 100vh;
  background: var(--brand-white);
  width: 100%;
  padding-top: 10vh;
  text-align: center;
}

.application h2 {
  color: var(--brand-blue);
}
.application h3 {
  color: var(--brand-black);
}

.application-section {
  width: 100%;
  flex-wrap: wrap;
}

.application-card {
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
  .application-section {
    width: 100%;
    flex-wrap: wrap;
  }

  .application-card {
    width: 40%;
    margin: 0 5vh;
  }
  .application-card .btn-ghost {
    width: 90%;
    color: var(--brand-white);
  }
}

/* LANDING MUSIC LINKS //////////////////////////////////////////////////////////// */
.music-page {
  min-height: 100vh;
}
.landing-music {
  width: 100%;
  min-height: 80vh;
  background-color: var(--c-bone);
}
.landing-music-link-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.landing-music-link {
  margin: 0 auto;
  width: calc(100% / 3);
  margin-bottom: 1vh;
}

.music-card {
  width: 100%;
  background: lightgrey;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  padding: 1vh;
  margin: 1vh;
  margin-bottom: 5vh;
}

@media only screen and (min-width: 56.25em) {
  .music-card {
    width: 80%;
  }
}

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

.landingVideo {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(247, 247, 247, 1) 0%,
    rgba(172, 180, 183, 1) 50%,
    rgba(247, 247, 247, 1) 100%
  );
  padding: 2vh;
  text-align: center;
  padding-top: 0;
}

.landingVideo h2 {
  text-align: center;
  font-size: 2em;
  color: #8d8c8a;
}

.landingVideo p {
  text-align: center;
  color: #363538;
  line-height: 1em;
  font-size: 1em;
  max-width: 90vw;
}

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

  .landingVideo h2 {
    font-size: 2.5em;
  }

  .landingVideo p {
    max-width: 60vw;
  }
}

.videoPage {
  width: 100%;
  flex-wrap: wrap;
  padding: 2vw;
}

.videoCard {
  width: calc(100vw / 1 - 5vw);
}

@media only screen and (min-width: 56.25em) {
  .videoCard .iframe-container {
    width: calc(100vw / 2);
  }
}

/* LANDING PAGE NEWS SECTION CSS /////////////////////////////////////////////// */
.landingNews {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(247, 247, 247, 1) 0%,
    rgba(172, 180, 183, 1) 50%,
    rgba(247, 247, 247, 1) 100%
  );
  padding: 2vh;
}

/* .landingNews-listing h3 {
	color: #c6e2ff;
} */

.landingNews-feature-image {
  max-width: 90vw;
  height: auto;
  display: block;
}

.landingNews-listing {
  width: 90%;
}

@media only screen and (min-width: 56.25em) {
  /* .landingNews {
		background: url(http://localhost/NewMaster/public/img/general/hero3.jpg) no-repeat top center fixed;
	} */

  .landingNews-feature-image {
    max-width: 40vw;
  }

  .landingNews-listing {
    width: 70%;
  }
}

/* LANDING PAGE GIGS SECTION CSS /////////////////////////////////////////////// */
.landingGigs {
  padding-top: 10vh;
  min-height: 100vh;
  width: 100%;
  background-color: #feefdd;
  background-image: url(https://chillifest24.anothertastyevent.com.au/public/img/general/HERO3.jpg);
  background-position: center left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  transition: min-height 1000000s ease;
  -webkit-transition: min-height 1000000s ease;
  -moz-transition: min-height 1000000s ease;
  -o-transition: min-height 1000000s ease;
}

.landingGigs-listing {
  background-color: rgba(0, 0, 0, 0.8);
  width: 90%;
}

.landingGigs h2 {
  color: var(--c-blue);
}

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

.gig-listing {
  width: 90%;
  background-color: rgba(0, 0, 0, 0.6);
  padding-top: 1vh;
}

.gig-listing p {
  font-size: 1.5em;
  color: #f7f7f7;
  text-align: center;
}

.gig-listing-section {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0;
}

.gigDetails {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2vh;
}

@media only screen and (min-width: 56.25em) {
  .gigDetails {
    background-color: rgba(0, 0, 0, 0);
    padding: 2vh;
  }
  .landingGigs p {
    color: var(--c-darkgrey);
  }
  .gig-listing p {
    color: #f7f7f7;
  }
}

@media only screen and (min-width: 56.25em) {
  .landingGigs {
    background-image: url(https://chillifest24.anothertastyevent.com.au/public/img/general/HERO3.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding-top: 8vh;
    padding-bottom: 2vh;
    justify-content: center;
    align-items: center;
  }

  .gig-listing {
    width: 80%;
  }

  .gig-listing-section {
    align-items: flex-start;
    padding-left: 2vh;
  }

  .landingGigs-listing {
    width: 70%;
  }
}

/* LANDING PAGE BIO SECTION CSS /////////////////////////////////////////////// */
.landingBio {
  min-height: 100vh;
  width: 100%;
  background-color: #cecece;
  background-image: url(https://chillifest24.anothertastyevent.com.au/public/img/general/bglarge2.jpg);
  background-position: center right -90vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.landingBio h2 {
  color: var(--c-purple);
}

.landingBio p {
  color: var(--c-darkgrey);
  font-size: 1.2em;
  font-weight: 300;
}

.bio-body {
  width: 90%;
}

@media only screen and (min-width: 56.25em) {
  .landingBio {
    background-image: url(https://chillifest24.anothertastyevent.com.au/public/img/general/bglarge2.jpg);
    background-position: center left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

  .bio-body {
    width: 60%;
  }
  .landingBio p {
    color: var(--c-darkgrey);
    font-size: 1.5em;
  }
}

/* LANDING PAGE CONTACT SECTION CSS /////////////////////////////////////////////// */
.landingContact {
  width: 100%;
  background-color: #201e1f;
}

.landingContact h4 {
  color: #c6e2ff;
}

@media only screen and (min-width: 56.25em) {
  /* .landingBio {
	} */
}

.sitePage {
  min-height: 100vh;
  width: 100%;
  background-color: #201e1f;
  padding-top: 2vh;
}

.sitePage h1 {
  color: #fb6c2d;
}

.sitePage h3 {
  color: #c6e2ff;
}

.sitePage p {
  color: #f7f7f7;
  font-size: 1em;
  line-height: 1.35em;
  width: 95vw;
}

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

  .sitePage p {
    width: 70vw;
  }
}

/* LANDING PAGE CSS /////////////////////////////////////////////// */
.list-link-page {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.7) 100%
    ),
    url(https://chillifest24.anothertastyevent.com.au/public/img/general/bglarge.jpg)
      no-repeat top left fixed;
  background-size: cover;
  background-position: bottom 0 left -20vw;
  /* padding-bottom: 8vh; */
  text-align: center;
  justify-content: flex-start;
  padding-top: 0;
  transition: min-height 1000000s ease;
  -webkit-transition: min-height 1000000s ease;
  -moz-transition: min-height 1000000s ease;
  -o-transition: min-height 1000000s ease;
}

.list-link-col {
  width: 98%;
  background: var(--brand-white);
  padding: 2vh;
  border-radius: 5vh;
  -webkit-border-radius: 5vh;
  -moz-border-radius: 5vh;
  -ms-border-radius: 5vh;
  -o-border-radius: 5vh;
}

.btn-linklist {
  border-radius: 10vh;
  width: 98%;
  -webkit-border-radius: 10vh;
  -moz-border-radius: 10vh;
  -ms-border-radius: 10vh;
  -o-border-radius: 10vh;
  margin: 1vh auto;
  padding: 1em 2em;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1em;
  text-align: center;
  text-transform: none;
  transition: 0.5s;
  background: var(--brand-grey);
  color: white;
  border: 2px solid var(--brand-orange);
  box-shadow: 0 0 20px #a7a7a7;
}

.btn-linklist:hover {
  background: var(--brand-orange);
}

.list-link-item {
  width: 100%;
  display: flex;
}

@media only screen and (min-width: 56.25em) {
  .list-link-page {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.7) 100%
      ),
      url(https://chillifest24.anothertastyevent.com.au/public/img/general/bglarge.jpg)
        no-repeat center left fixed;
    padding-top: 8vh;
  }

  .list-link-col {
    width: 30%;
    background: #ffffffd9;
  }
}

/* STORE PAGE SECTION CSS /////////////////////////////////////////////// */

.store {
  width: 100%;
  min-height: 100vh;
  background: var(--brand-white);
  justify-content: stretch;
  padding-top: 5vh;
}

.store h1 {
  font-family: var(--name-font);
}

.product-row {
  width: 80%;
}

.product-card {
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: var(--brand-white);
  width: 100%;
  min-height: 70vh;
  border: var(--brand-grey) 1px solid;
  border: #dedede 1px solid;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  padding: 2vh;
  -webkit-filter: drop-shadow(5px 10px 4px #9a9a9a);
  filter: drop-shadow(5px 10px 4px #9a9a9a);
  margin: 2vh;
}

@media only screen and (min-width: 56.25em) {
  .product-card {
    width: calc(100% / 3 - 8vw);
    margin: 0 2vh;
  }
}

/* MEDIA PAGE SECTION CSS /////////////////////////////////////////////// */
.media-landing {
  background: var(--brand-white);
  width: 100%;
}
.media {
  background: var(--brand-white);
}

.media h1 {
  font-family: var(--name-font);
  color: var(--brand-black);
  line-height: 1em;
  font-size: 2.5em;
  font-weight: 200;
}

.media h2 {
  font-family: var(--name-font);
  color: var(--brand-black);
  line-height: 1em;
  font-size: 2em;
  font-weight: 200;
}
.media h3 {
  font-family: var(--name-font);
  color: var(--brand-black);
  line-height: 1em;
  font-size: 5em;
  font-weight: 200;
}

.media-bio {
  padding: 2vh;
  text-align: center;
}

.media-video {
  padding: 2vh;
}
.media-image {
  max-height: 40vh;
  width: auto;
}
.image-half {
  width: 100%;
}
.colour-block {
  width: 100%;
}
.colour-block h3 {
  font-family: 'Allison', cursive;
  font-weight: 100;
  color: var(--brand-white);
  line-height: 1em;
  font-size: 2.5em;
  text-align: center;
}
.green-block {
  width: 100%;
  background: #9a9c53;
  padding: 3vh;
}
.green-block h2 {
  color: var(--brand-white);
  font-family: 'Allison', cursive;
  font-weight: 100;
  color: var(--brand-white);
  line-height: 1em;
  font-size: 4em;
  text-align: center;
}
.orange-block {
  background: var(--brand-orange);
  padding: 3vh;
  width: 100%;
}
.orange-block h2 {
  color: var(--brand-white);
  font-family: 'Allison', cursive;
  font-weight: 100;
  color: var(--brand-white);
  line-height: 1em;
  font-size: 3em;
  text-align: center;
}
.white-block {
  background: var(--brand-white);
  padding: 3vh;
  width: 100%;
}

.bio-block {
  background: url(https://chillifest24.anothertastyevent.com.au/public/img/media/leaf-bg.jpg);
  background-size: cover;
  background-position: bottom 0 right 0vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
}

.bio {
  padding: 2vh;
}

.no-pad {
  padding: 0;
}

.stretch {
  justify-content: stretch;
}
.link-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--brand-black);
}

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

.image-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--brand-black);
}

@media only screen and (min-width: 37.5em) {
  .media h1 {
    font-size: 6em;
  }
  .media h2 {
    font-size: 3em;
  }
  .media h3 {
    font-size: 10em;
  }
  .media-bio {
    width: 60%;
  }
  .media-video {
    width: 60%;
  }
  .media-landing {
    justify-content: flex-start;
  }
  .image-half {
    width: 50vw;
    -webkit-clip-path: polygon(0 0%, 100% 0, 85% 100%, 0 100%);
    clip-path: polygon(0 0%, 100% 0, 85% 100%, 0 100%);
  }
  .colour-block h3 {
    font-size: 4em;
  }
  .bio-block {
    display: grid;
    grid-template-columns: 3fr 2fr;
  }
  .bio p {
    font-size: 2em;
  }
  .link-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .image-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.jem-text {
  font-size: 4.5em;
}

@media only screen and (min-width: 56.25em) {
  .jem-text {
    font-size: 10em;
  }
}
/* CONTACT PAGE SECTION CSS /////////////////////////////////////////////// */
.contact {
  width: 100%;
  padding: 2vh;
  min-height: 100vh;
  background: url(http://localhost/amberlawrence/public/img/general/hero2.jpg)
    no-repeat bottom right fixed;
  background-position: bottom 0 right -10vw;
  background-size: cover;
}

/* .contact h1,
h2,
h3,
h4 {
	color: #f7f7f7;
} */

.contact p {
  color: #241623;
}

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

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

/* .music h1,
h2,
h3,
h4 {
	color: #f7f7f7;
} */

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

/* LOGIN PAGE CSS /////////////////////////////////////////////// */
.loginPage {
  min-height: 70vh;
  font-family: 'Roboto Condensed', sans-serif;
  justify-content: center;
  padding-top: 10vh;
}

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

.edit-button {
  height: 100%;
  width: 70px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  margin: 8px;
  font-family: arial;
  font-size: 13px;
  line-height: 36px;
  color: #111;
  text-transform: uppercase;
  text-align: center;
  border: #111 solid 1px;
}

.edit-button:hover {
  background: green;
  color: #f6f6f6;
}

input .hidden {
  display: none;
}

.delete-button {
  height: 100%;
  width: 70px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  margin: 8px;
  font-family: arial;
  font-size: 13px;
  line-height: 36px;
  color: #111;
  text-transform: uppercase;
  text-align: center;
  border: #111 solid 1px;
}

.delete-button:hover {
  background: red;
  color: #f6f6f6;
}

.logout-button {
  height: 100%;
  width: 70px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  margin: 8px;
  font-family: arial;
  font-size: 13px;
  line-height: 36px;
  color: #111;
  text-transform: uppercase;
  text-align: center;
  border: #111 solid 1px;
}

/* POSTS PAGE CSS /////////////////////////////////////////////// */
/* POSTS PAGE CSS /////////////////////////////////////////////// */
/* POSTS PAGE CSS /////////////////////////////////////////////// */

.postspage {
  min-height: 70vh;
  width: 90vw;
  background: #9eb3c2;
}

.postspage-entry {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
  text-align: left;
}

@media only screen and (min-width: 56.25em) {
  .postspage {
    width: 70vw;
  }

  .postspage-entry {
    width: 70%;
  }
}

/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* 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) {
  /* .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: #4c3c3e;
  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;
}

/* FORM :::::::::::::::::::::::::::::::::: */
/* FORM :::::::::::::::::::::::::::::::::: */
/* FORM :::::::::::::::::::::::::::::::::: */

form {
  width: 80%;
  background: white;
}

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

.form-row {
  width: 100%;
}

.form50 {
  width: 100%;
}

.form30 {
  width: 100%;
}

.form-group input {
  padding: 15px;
  flex: 1;
  width: 100%;
  /*margin-right: 30px;
  */
  font-size: 18px;
  color: #555;
  margin: 0 0 20px 0;
  flex-basis: 100%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border: 1px solid var(--brand-blue);
}

.form-group textarea {
  padding: 15px;
  width: 100%;
  height: 15vh;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.2em;
  color: #555;
  margin: 0 0 2vh 0;
}

.form-group label {
  margin-bottom: 1vh;
  margin-top: 2vh;
  text-transform: uppercase;
}

button {
  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;
}

button:hover {
  background-color: #c6e2ff;
  color: #201e1f;
}

.file-upload-box {
  background: var(--brand-blue);
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2vw;
  border-bottom: 1px solid #fff;
  margin: 0 auto;
  margin-bottom: 2vh;
}

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

  .form30 {
    width: 30%;
  }
  .form-group input {
    width: 100%;
  }

  .form-group textarea {
    width: 100%;
    height: 20vh;
  }

  form .btn {
    width: auto;
    font-size: 2vh;
  }

  .file-upload-box {
    width: 50%;
  }
}

/* LOGIN FORM :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.loginForm {
  width: 90vw;
  min-height: 50vh;
  padding: 20px;
  border-radius: 6px;
  background-color: #857c8d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto Condensed', sans-serif;
}

.loginForm input {
  height: 5vh;
  width: 90%;
  /* padding: 0 15px; */
  border: none;
  border-radius: 4px;
  background-color: #feefdd;
  font-family: arial;
  font-size: 20px;
}

.loginForm h2 {
  color: #feefdd;
}

.loginForm p {
  color: #feefdd;
}

.loginForm label {
  color: #201e1f;
}

@media only screen and (min-width: 56.25em) {
  .loginForm {
    width: 50vw;
  }
}

@media only screen and (min-width: 75em) {
  .loginForm {
    width: 25vw;
  }
}

.loginForm button {
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #50b2c0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 2vh 4vh;
  border: 1px solid #fff;
  cursor: pointer;
  margin: 2vh;
}

.loginForm button:hover {
  background-color: #2b435c;
}

/* CONTENT FORM :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.content-form {
  width: 95vw;
  padding: 0;
}

.contact-form {
  width: 95vw;
  background-color: #2b435c;
}

@media only screen and (min-width: 56.25em) {
  .content-form {
    width: 80%;
    padding: 0 5vh;
  }

  .contact-form {
    width: 50vw;
  }
}

/* CONTACT FORM :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.contactForm {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 50vh;
  padding: 3vh;
  border-radius: 3vh;
  background-color: #857c8d;
  background-color: rgba(38, 47, 56, 0.95);
  background-color: var(--brand-grey);
  font-family: 'Roboto Condensed', sans-serif;
  color: #201e1f;
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 3vh;
  -moz-border-radius: 3vh;
  -ms-border-radius: 3vh;
  -o-border-radius: 3vh;
}

.contactFormHalf {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 2vh;
}

.contactForm h2 {
  color: #faaa8d;
}

.contactForm p {
  color: #feefdd;
}

.contactForm ::-webkit-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: #201e1f;
  color: #aeaeae;
  font-size: 0.8em;
  cursor: text;
}

.contactForm ::-moz-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: #201e1f;
  color: #aeaeae;
  font-size: 0.8em;
  cursor: text;
}

.contactForm :-ms-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: #201e1f;
  color: #aeaeae;
  font-size: 0.8em;
  cursor: text;
}

.contactForm ::-ms-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: #201e1f;
  color: #aeaeae;
  font-size: 0.8em;
  cursor: text;
}

.contactForm ::placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: #201e1f;
  color: #aeaeae;
  font-size: 0.8em;
  cursor: text;
}

.contactForm :focus {
  color: #aeaeae;
}

.contactForm label {
  color: #aeaeae;
}

@media only screen and (min-width: 56.25em) {
  .contactForm {
    width: 60vw;
    padding: 3vh;
  }

  .contactFormHalf {
    width: 50%;
    padding-left: 10vh;
  }
}

@media only screen and (min-width: 75em) {
  .contactForm {
    width: 80vw;
  }
}

.smallForm {
  width: 80%;
  background-color: transparent;
}

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

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

/* MESSAGE FLASH FOR SUCCESS */

.alert-success {
  background: #22be51;
  padding: 1vh;
}

/* BOOTSTRAP CSS FOR INVALID INPUT */

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
  background: #fff;
  text-align: center;
  padding: 1vh;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right
    calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid,
.custom-select.is-invalid {
  border-color: #dc3545;
  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
      no-repeat right 0.75rem center/8px 10px,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E")
      #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem)
      calc(0.75em + 0.375rem);
}

.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip,
.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip,
.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip,
.custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated
  .custom-control-input:invalid:checked
  ~ .custom-control-label::before,
.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.was-validated
  .custom-control-input:invalid:focus
  ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated
  .custom-control-input:invalid:focus:not(:checked)
  ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked)
  ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label,
.custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip,
.custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label,
.custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

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

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

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

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

  .landingGigs {
    background-attachment: initial;
  }

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

  .contact {
    background-attachment: initial;
  }

  .join {
    background-attachment: initial;
  }
  .bio-block {
    background-attachment: initial;
  }
}

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