/* Stylesheet CSS*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&family=Anton&display=swap');
/* 
font-family: 'Roboto Condensed', sans-serif;
font-family: "Days One", sans-serif;
font-family: "Audiowide", sans-serif;
font-family: "Rubik Lines", system-ui;
font-family: "Rye", serif;

*/

/* This is how/where you install font face files.
@font-face {
  font-family: 'aktiv_grotesk_exbold';
  src: url('https://australianbrooksanddunnshow.com/public/fonts/aktiv_grotesk_ex_bold-webfont.woff2')
      format('woff2'),
    url('https://australianbrooksanddunnshow.com/public/fonts/aktiv_grotesk_ex_bold-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
} */

:root {
  /* FONTS */
  --logo-font: 'Roboto Condensed', sans-serif;
  --logo-desk: 8em;
  --logo-mob: 3.25em;

  --p-font: 'Roboto Condensed', sans-serif;
  --h-font: 'Montserrat', sans-serif;
  --title-font: 'Montserrat', sans-serif;
  --h-font: 'Rubik Lines', system-ui;
  --h-font: 'Allison', cursive;
  --landing-font: 'Luckiest Guy', cursive;
  /* --h-font: 'Audiowide', sans-serif; */

  --brand-white: #f7f7f7;
  --brand-black: #202020;
  --brand-grey: #69747c;
  --brand-midgrey: #cecece;
  --brand-lightgrey: #b5b5b5;
  /* DARK MODE */
  --dark1: #1d2023;
  --dark2: #586168;
  --dark3: #97a1a7;
  --dark4: #dce0e2;
  /* LIGHT MODE */
  --light1: #eeeeff;
  --light2: #fffafa;
  --light3: #f8f8ff;
  --light4: #f7f7f7;
  /* FONT COLORS */
  --light-font: #f7f7f7;
  --grey-font: #b5b5b5;
  --dark-font: #202020;
  --p-color: #202020;
  --h-color: #ffd889;
  /* color pallette */
  --brand-blue: #2e4057;
  --brand-gold: #ffd889;

  --brand-orange: #fb7b4c;
  --brand-vanilla: #dfcc74;
  --brand-greengrey: #476a6f;

  /* Primary color shades */
  --primary-col: #b7cfe9;
  --secondary-col: #dad8cd;
  --brand-blue1: #dbeef9;
  --brand-blue2: #c4d8ed;
  --brand-blue3: #49aae1;
  --brand-blue8: #1e3e62;
  --brand-blue9: #1e3e62;
  --brand-blue10: #12253b;
  /* BUTTON COLORS */
  --button-prim: #ffd889;
  --button-prim-text: #f7f7f7;
  --button-hov: #b7cfe9;
  --button-sec: #dbeef9;
  --button-sec-text: #69747c;
  --button-ghost: transparent;
  --button-ghost-text: #dad8cd;
  --button-ghost-border: #dad8cd;

  --brand-pink: #cb3066;
  --brand-dkblue: #3d5a80;
  --brand-green: #26d0ce;
  --brand-orange: #ff734c;
  --brand-skin: #ebbab9;
  --brand-mint: #b5ffe1;
  --brand-purple: #764ba2;
  --brand-lavender: #667eea;

  --highlight-font-light: #e4d6a7;
  --highlight-font-dark: #e1bb80;
  --radius: 14px;
}

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

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

html {
  font: normal 16px sans-serif;
  color: var(--dark-font);
  font-family: 'Roboto Condensed', sans-serif;
  background: var(--dark1);
}

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: var(--p-color);
  font-family: var(--p-font);
  font-size: 1.2em;
  font-weight: 400;
  line-height: 158.99%;
  line-height: 1.2em;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--h-color);
  font-family: var(--h-font);
  line-height: 2em;
  font-weight: 300;
}

h1 {
  font-size: 5em;
}

h2 {
  font-size: 4em;
}

h3 {
  font-size: 2.5em;
}

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: 4em;
  }

  h3 {
    font-size: 3em;
  }

  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.05vh;
  background-color: var(--brand-lightgrey);
  border: 0;
  margin: 0 auto;
  margin-bottom: 2vh;
  margin-top: 2vh;
}

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

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

button {
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  background-color: var(--brand-blue);
  color: var(--brand-white);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  padding: 2vh 4vh;
  border: 0px solid var(--brand-white);
  cursor: pointer;
  margin: 2vh;
  /*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  */
}

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

.btn-solid {
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  background-color: var(--button-prim);
  color: var(--button-sec-text);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  padding: 2vh 4vh;
  border: 0px solid var(--brand-white);
  cursor: pointer;
  margin: 2vh;
  /*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  */
}

.btn-solid:hover {
  background-color: var(--button-hov);
  color: var(--button-prim-text);
  font-weight: 800;
}

.btn-ghost {
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  background-color: var(--button-ghost);
  color: var(--button-ghost-text);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  padding: 2vh 4vh;
  border: 1px solid var(--button-ghost-border);
  cursor: pointer;
  margin: 2vh;
  /*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  */
}

.btn-ghost:hover {
  background-color: var(--button-hov);
  color: var(--button-prim-text);
  font-weight: 800;
}

.btn-sec {
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  background-color: var(--button-sec);
  color: var(--button-sec-text);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  padding: 2vh 4vh;
  border: 0px solid var(--brand-white);
  cursor: pointer;
  margin: 2vh;
  /*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  */
}

.btn-sec:hover {
  background-color: var(--button-hov);
  color: var(--button-prim-text);
}

.btn-small {
  padding: 1vh 2vh;
  font-size: 0.7em;
  background-color: var(--brand-dkblue);
}

.btn-no-margin {
  margin: 0;
}

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

.btn-size {
  padding: 2vh 0.5vh 2vh 1vh;
  margin: 1vh;
}

.tix {
  color: var(--brand-vanilla);
  background: rgba(0, 0, 0, 0.9);
  background: transparent;
  border: 1px solid var(--brand-vanilla);
  padding: 1vh 2vh;
  font-size: 0.8em;
}

.copy-link-hide {
  opacity: 0;
}

@media only screen and (min-width: 56.25em) {
  .btn-size {
    padding: 2vh 0.5vh 2vh 1vh;
    margin: 1vh;
  }
}

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

IMG CLASSES

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

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

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

.outer-glow {
  -webkit-filter: drop-shadow(0 0 10px rgba(1, 47, 37, 0.8))
    drop-shadow(0 0 20px rgba(1, 47, 37, 0.6))
    drop-shadow(0 0 30px rgba(1, 47, 37, 0.4));
  filter: drop-shadow(0 0 10px rgba(1, 47, 37, 0.8))
    drop-shadow(0 0 20px rgba(1, 47, 37, 0.6))
    drop-shadow(0 0 30px rgba(1, 47, 37, 0.4));
}

.logo-med {
  max-width: 75vw;
  height: auto;
}

.logo-small {
  max-width: 40vw;
  height: auto;
}

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

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

.iconSponsor {
  max-width: 20vw;
  height: auto;
  margin: 1vh;
}

.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: 20vw;
  height: auto;
}

/* .music-image {
  max-width: 80%;
  height: auto;
} */
.logoCover {
  width: 100%;
}

.bannerImage {
  max-width: 95vw;
}

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

  .logo-small {
    max-width: 15vw;
  }

  .logoCover {
    max-width: 40vw;
  }

  .logoAvatar {
    max-width: 10vw;
  }

  .iconSocial {
    max-width: 2vw;
  }
  .iconSponsor {
    max-width: 10vw;
    margin: 2vh;
  }
  .heroImage {
    max-width: 20vw;
  }

  .locationIcon {
    max-width: 1vw;
  }

  .navbarIcon {
    max-width: 1vw;
  }

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

  .iconInstall {
    max-width: 5vw;
  }

  .bannerImage {
    max-width: 60vw;
  }

  /* .music-image {
    max-width: 60%;
    height: auto;
  } */
}

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

NAVIGATION IS ALL HANDLED IN SEPERATE MENU CSS

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

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

MOBILE APP MODULE - FOOTER BAR

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

.mobileappbar {
  z-index: 9;
  background: transparent;
  background-color: rgba(76, 60, 62, 0.8);
  background-color: #272727cc;
  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% / 5);
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  text-align: center;
  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;
  }
}

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

L A Y O U T

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

/*---------------------
	PAGE LAYOUT SECTION
	JUST ADD LAYOUT PROPERTIES HERE
---------------------*/

.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%;
  justify-content: center;
}
.col10 {
  width: 100%;
  justify-content: center;
}
.col20 {
  width: 100%;
  justify-content: center;
}
.col25 {
  width: 100%;
  justify-content: center;
}
.col30 {
  width: 100%;
  justify-content: center;
}
.col40 {
  width: 100%;
  justify-content: center;
}
.col60 {
  width: 100%;
  justify-content: center;
}
.col70 {
  width: 100%;
  justify-content: center;
}
.col80 {
  width: 100%;
  justify-content: center;
}
.col90 {
  width: 100%;
  justify-content: center;
}

@media only screen and (min-width: 56em) {
  .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%;
  }
  .col10 {
    width: 10%;
    justify-content: center;
  }
  .col20 {
    width: 20%;
    justify-content: center;
  }
  .col25 {
    width: 25%;
    justify-content: center;
  }
  .col30 {
    width: 30%;
    justify-content: center;
  }
  .col40 {
    width: 40%;
    justify-content: center;
  }
  .col60 {
    width: 60%;
    justify-content: center;
  }
  .col70 {
    width: 70%;
    justify-content: center;
  }
  .col80 {
    width: 80%;
    justify-content: center;
  }
  .col90 {
    width: 90%;
    justify-content: center;
  }
}

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

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

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

.landing {
  height: 100%;
  min-height: 95vh;

  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
    url(https://australianbrooksanddunnshow.com/public/img/general/bgmob.jpg)
      no-repeat bottom center fixed;
  background-size: cover;
  background-position: top 0 center 0;
  justify-content: flex-end;
  /* //temporary justify-content below: // */
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-top: 0;
  padding-bottom: 10vh;
  transition: min-height 1000000s ease;
  -webkit-transition: min-height 1000000s ease;
  -moz-transition: min-height 1000000s ease;
  -o-transition: min-height 1000000s ease;
  -ms-transition: min-height 1000000s ease;
}

.landingContent {
  position: relative; /* Added */
  z-index: 2;
  width: 100%;
}

.landing h1 {
  font-family: var(--logo-font);
  color: var(--logo-color);
  font-size: var(--logo-mob);
  line-height: 1em;
}

.landing h3 {
  font-family: var(--title-font);

  line-height: 1em;
  font-size: 1.2em;
}

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

@media only screen and (min-width: 37.5em) {
  .landing {
    background: url(https://australianbrooksanddunnshow.com/public/img/general/bglarge.jpg)
      linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    background-size: cover;
    background-position: top 0 center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .landing h1 {
    font-size: 6em;
  }
}
@media only screen and (min-width: 56.25em) {
  .landing {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.35)
      ),
      url(https://australianbrooksanddunnshow.com/public/img/general/bglarge.jpg)
        no-repeat bottom center fixed;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    min-height: 95vh;
    /* height: 100vh; */
    width: 100%;
    padding-top: 8vh;
    padding-bottom: 2vh;
    justify-content: center;
    justify-content: flex-end;
    align-items: center;
  }

  .landing h1 {
    font-size: var(--logo-desk);
  }

  .landing h3 {
    font-size: 2.5em;
  }

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

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

.landingbanner {
  height: 100vh;
  width: 100%;
  background: url(https://australianbrooksanddunnshow.com/public/img/general/bgmobbanner.jpg)
    no-repeat bottom center fixed;
  background-size: cover;
  background-position: top 0 center 0;
  justify-content: flex-end;
  /* //temporary justify-content below: // */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0;
  padding-bottom: 15vh;
  transition: min-height 1000000s ease;
  -webkit-transition: min-height 1000000s ease;
  -moz-transition: min-height 1000000s ease;
  -o-transition: min-height 1000000s ease;
  -ms-transition: min-height 1000000s ease;
}

.landingbannerContent {
  position: relative; /* Added */
  z-index: 2;
  width: 100%;
}

.landingbanner h1 {
  font-family: var(--logo-font);
  color: var(--logo-color);
  font-size: var(--logo-mob);
  line-height: 1em;
}

.landingbanner h3 {
  font-family: var(--title-font);

  line-height: 1em;
  font-size: 1.2em;
}

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

@media only screen and (min-width: 37.5em) {
  .landingbanner {
    background: url(https://australianbrooksanddunnshow.com/public/img/general/bglargebanner.jpg);
    background-size: cover;
    background-position: top 0 center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .landingbanner h1 {
    font-size: 6em;
  }
}
@media only screen and (min-width: 56.25em) {
  .landingbanner {
    background: url(https://australianbrooksanddunnshow.com/public/img/general/bglargebanner.jpg)
      no-repeat top center fixed;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    min-height: 90vh;
    /* height: 100vh; */
    width: 100%;
    padding-top: 8vh;
    padding-bottom: 2vh;
    justify-content: center;
    justify-content: flex-end;
    align-items: center;
  }

  .landingbanner h1 {
    font-size: var(--logo-desk);
  }

  .landingbanner h3 {
    font-size: 2.5em;
  }

  .landingbanner p {
    font-size: 2em;
    color: var(--brand-white);
  }
}

/* LANDING PAGE BANNER SECTION CSS /////////////////////////////////////////////// */

.banner {
  height: 25vh;
  width: 100%;
  background-color: #ecd72c;
  color: #0881ff;
}

.banner h2 {
  font-family: var(--p-font);
  color: #0881ff;
  font-weight: 600;
}

/* LANDING PAGE BANNER SECTION CSS /////////////////////////////////////////////// */

.services {
  height: 100%;
  width: 100%;
  background-color: var(--brand-blue);
  color: var(--brand-white);
}

.servicesrow {
  width: 100%;
}

.services-card {
  width: 90%;
  max-height: 20vh;
  --skew: -5deg; /* negative = lean right */
  flex: 1 1 260px;
  background: var(--brand-lightgrey);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 2vh;
  box-shadow: var(--shadow);
  transform: skewX(var(--skew));
  transform-origin: center;
  margin: 2vh;
}

.services-card > * {
  transform: skewX(calc(var(--skew) * -1));
}
.services-card:hover {
  translate: 0 -2px;
}
.services-card h4 {
  color: var(--brand-white);
  font-family: var(--title-font);
}
@media only screen and (min-width: 56.25em) {
  .services-card {
    width: 25%;
  }
  .services-card:hover {
    translate: 0 0;
  }
}

.banner h2 {
  font-family: var(--p-font);
  color: #0881ff;
  font-weight: 600;
}

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

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

.landing-hero h2 {
  line-height: 1em;
}

.landing-hero p {
  text-align: center;
  /* color: #feefdd; */
}

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

.musicLinkRow a {
  flex: 1;
}

.landing-hero-banner {
  max-height: 90vw;
  /* padding: 2vh; */
}

.herotext {
  padding: 2vh 5vh;
}

.herotext p {
  color: var(--brand-lightgrey);
  text-align: left;
}

@media only screen and (min-width: 56.25em) {
  .landing-hero {
    min-height: 70vh;
    width: 100%;
  }
  .landing-hero h2 {
    font-size: 4em;
  }
  .herotext {
    align-items: flex-end;
  }
  .herotext p {
    color: var(--brand-lightgrey);
    text-align: right;
  }
  /* .landing-hero-banner {
  } */
}

/* LANDING MUSIC LINKS //////////////////////////////////////////////////////////// */
/* LANDING MUSIC LINKS //////////////////////////////////////////////////////////// */

.landing-music {
  width: 100%;
  min-height: 80vh;
  background-color: var(--brand-black);
  padding: 10vh 2vh;
}
.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;
}

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

.music-page {
  width: 100%;
  /* min-height: 80vh; */
  justify-content: flex-start;
  background-color: var(--brand-grey);
  padding: 10vh 2vh;
}

.music-card {
  width: 100%;
  background-color: var(--brand-lightgrey);
  background-color: transparent;
  background-color: var(--dark3);
  border-radius: 20px;
  justify-content: stretch;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  /* padding: 2vh; */
  margin: 1vh;
  margin-bottom: 5vh;
  text-align: center;
}

.music-card-image {
  width: 100%;
  padding: 2vh;
}

.music-card-text {
  width: 100%;
  height: 100%;
  padding: 0 2vh;
  justify-content: flex-start;
  align-items: flex-start;
}

@media only screen and (min-width: 56.25em) {
  .music-card {
    width: 60%;
  }
  .music-card-image {
    width: 40%;
  }
  .music-card-text {
    width: 60%;
    justify-content: flex-start;
    align-items: flex-start;
    align-items: center;
  }
}

.newmusic-page {
  width: 100%;
  min-height: 100%;
  background-color: var(--brand-grey);

  justify-content: flex-start;
  padding: 0;
  padding-bottom: 30vh;
}
.newmusic-card {
  width: 100%;
  /* height: 100vh; */
  background-color: transparent;
  position: relative;
  justify-content: flex-start;
}

.newmusic-image {
  position: relative;
  display: flex;
  background: transparent;
  /* width: 50%; */
  height: auto;
}

.newmusic-text {
  position: absolute;
  background: var(--dark3);
  position: absolute;
  bottom: 0px;
  padding: 1em;
  width: 100%;
  text-align: center;
  top: 38vh;
  left: 2vh;
  min-height: 40vh;
}

@media only screen and (min-width: 56.25em) {
  .newmusic-card {
    width: 70%;
  }
  .newmusic-text {
    top: 35vh;
    left: 60vh;
  }
}

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

.landing-video {
  display: flex;
  width: 100%;
  background-color: var(--brand-lightblue);
  background-color: #cecece;
  background-color: var(--brand-black);
  padding: 10vh 2vh;
  text-align: center;
  padding-top: 0;
}

.landing-video p {
  text-align: center;
  color: var(--brand-lightgrey);
  line-height: 1em;
  font-size: 1em;
  max-width: 90vw;
}

.landing-video h5 {
  color: var(--brand-white);
}
.landing-video-text {
  padding: 0 2vh;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (min-width: 56.25em) {
  .landing-video {
    padding-top: 8vh;
    padding-left: 10vh;
    padding-right: 5vh;
  }

  /* .landing-video p {
    max-width: 60vw;
  } */
  .landing-video-text {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 5vh;
  }
  .landing-video-text p {
    text-align: left;
  }
}

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

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

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

.landingNews {
  min-height: 100vh;
  width: 100%;
  background-color: var(--dark3);
  padding: 10vh 2vh;
}

.landingNews-listing h3 {
  color: var(--brand-grey);
  width: 100%;
}

.landingNews-listing h5 {
  color: var(--dark2);
}

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

.landingNews-listing {
  width: 90%;
}

.landingNews-text {
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}

.landingNews .sitelogoimagedisplay {
  -webkit-filter: invert(1);
  filter: invert(1);
  opacity: 0.8;
}

.invertlogo {
  -webkit-filter: invert(1);
  filter: invert(1);
  opacity: 0.8;
}

@media only screen and (min-width: 56.25em) {
  .landingNews-feature-image {
    max-width: 70%;
  }

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

/* LANDING PAGE GIGS SECTION CSS /////////////////////////////////////////////// */
.landingGigs {
  padding: 10vh 2vh;
  min-height: 100vh;
  width: 100%;
  background-color: var(--brand-blue);
  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 p {
  color: var(--light-font);
}

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

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

.gig-listing h6 {
  line-height: 1em;
}

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

.gig-guide {
  justify-content: flex-start;
  padding-top: 10vh;
}

.double-section {
  flex: 2;
}

.guide-date {
  background-color: var(--brand-bone);
  margin-bottom: 1vh;
  margin-left: 1vh;
}

.guide-date p {
  font-family: var(--p-font);
  color: var(--brand-white);
  text-transform: uppercase;
  line-height: 1.5em;
}
.guide-date h6 {
  font-family: var(--p-font);
  color: var(--brand-white);
}

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

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

.gigDetails h4,
.gigDetails h5 {
  font-family: var(--title-font);
  color: var(--brand-gold);
}

.bit-embed {
  width: 90%;
  /* background-color: rgba(0, 0, 0, 0.6); */
}

@media only screen and (min-width: 56.25em) {
  .gigDetails {
    background-color: rgba(0, 0, 0, 0);
    padding: 2vh;
  }
}

@media only screen and (min-width: 56.25em) {
  .landingGigs {
    min-height: 95vh;
  }

  .gig-listing {
    width: 70%;
  }

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

  .landingGigs-listing {
    width: 70%;
  }

  .bit-embed {
    width: 70%;
    /* background-color: rgba(0, 0, 0, 0.6); */
  }
}

/* RODEO SECTION CSS /////////////////////////////////////////////// */

.landing-rodeo {
  min-height: 30vh;
  width: 100%;
  background-color: var(--brand-gold);
  background: url(https://australianbrooksanddunnshow.com/public/img/general/bglarge-4.jpg)
    no-repeat bottom center scroll;
  background-size: cover;
  background-position: bottom 0 center 0;
  color: var(--brand-white);
  text-align: center;
  padding: 10vh 2vh;
}

/* .landing-rodeo p {
  color: var(--brand-lightgrey);
} */

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

.rodeos {
  background-color: var(--brand-grey);
}

@media only screen and (min-width: 56.25em) {
  .rodeos {
    background: url(https://australianbrooksanddunnshow.com/public/img/general/bglarge-bio.jpg)
      no-repeat top center scroll;
    background-size: cover;
    background-position: top 0 right 0;
  }
}

/* LANDING PAGE BIO SECTION CSS /////////////////////////////////////////////// */
.landingBio {
  min-height: 100vh;
  width: 100%;
  background-color: var(--brand-black);
  /* background: url(https://australianbrooksanddunnshow.com/public/img/general/bglarge-2-mob.jpg)
    no-repeat center center scroll;
  background-size: cover; */
  /* background-position: top 0 right -80vw; */
  padding: 10vh 2vh;
  align-items: center;
  justify-content: center;
}

.landingBio h2 {
  color: var(--brand-gold);
}

.landingBio p {
  color: var(--brand-lightgrey);
}

.bio-body {
  width: 90%;
}

@media only screen and (min-width: 56.25em) {
  .bio-body {
    width: 100%;
    justify-content: center;
  }
}

/* LANDING PAGE CONTACT SECTION CSS /////////////////////////////////////////////// */

.gallery-row {
  width: 100%;
  justify-content: center;
  align-items: center;
}

.galleryImage {
  width: 95%;
  margin: 2vh auto;
}

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

/* LANDING PAGE CONTACT SECTION CSS /////////////////////////////////////////////// */
.landing-contact {
  width: 100%;
  background-color: var(--brand-black);
  padding: 10vh 2vh;
}

.landing-contact p {
  color: var(--grey-font);
  text-align: center;
}

@media only screen and (min-width: 56.25em) {
  /* .landingBio {
	} */
}
/* LANDING PAGE CONTACT SECTION CSS /////////////////////////////////////////////// */

.site-page {
  justify-content: flex-start;
  padding: 10vh 2vh;
  min-height: 85vh;
  width: 100%;
  background-color: var(--brand-black);
}

.site-page p {
  color: var(--grey-font);
  font-size: 1em;
  line-height: 1.35em;
  width: 95vw;
}

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

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

/* LANDING PAGE CSS /////////////////////////////////////////////// */
.list-link-page {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.7) 100%
    ),
    url(https://australianbrooksanddunnshow.com/public/img/general/bglarge.jpg)
      no-repeat top left fixed;
  background-size: cover;
  background-position: bottom 0 left -120vw;
  /* padding-bottom: 8vh; */
  text-align: center;
  justify-content: flex-start;
  padding-top: 12vh;
  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);
  background: var(--brand-blue);
  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-blue);
  background: var(--secondary-col);
  border: 2px solid var(--brand-white);
  color: var(--brand-black);
  box-shadow: 0 0 20px #a7a7a7;
}

.btn-linklist:hover {
  background-position: right center; /* change the direction of the change here */
  text-decoration: none;
  background: var(--brand-midgrey);
  color: var(--brand-dkblue);
}

.btn-linklist:hover p.linklist-btn {
  color: var(--brand-dkblue);
}

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

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

  .list-link-col {
    width: 30%;
    background: #ffffffd9;
    background: var(--brand-blue);
  }
}

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

.store {
  width: 100%;
  min-height: 100vh;
  background: var(--dark1);
  justify-content: stretch;
  align-items: center;
  padding: 10vh 2vh;
  text-align: center;
}

.store p {
  color: var(--light-font);
}

.product-row {
  width: 80%;
  align-items: flex-start;
}

.product-card {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: var(--dark3);
  background: transparent;
  width: 100%;
  min-height: 50vh;
  margin-bottom: 4vh;

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

.product-card img {
  background: var(--dark3);
  margin-bottom: 2vh;
}

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

/* MEDIA PAGE SECTION CSS /////////////////////////////////////////////// */
.media-landing {
  background: var(--brand-white);
  width: 100%;
  background: url(https://australianbrooksanddunnshow.com/public/img/media/Jem-Cassar-Daley-Media-Header-01.jpg);

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 80vh;
  justify-content: flex-end;
}
/* .media {
  background: var(--brand-white);
} */
.name-title {
  width: 100%;
}
.media h1 {
  font-family: var(--name-font);
  color: var(--brand-black);
  color: var(--brand-white);
  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);
  color: var(--brand-white);

  line-height: 1em;
  font-size: 5em;
  font-weight: 200;
}

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

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

.media-video {
  padding: 2vh;
}
.media-image {
  max-height: 40vh;
  width: auto;
}
.image-half {
  width: 100%;
}

.highlight {
  width: 100%;
  background: var(--brand-grey);
  padding: 2vh 0;
  text-align: center;
}
.highlight p {
  color: var(--brand-white);
}
.highlight h2 {
  color: #cacb91;
  line-height: 1em;
}
.highlight h3 {
  font-family: 'Allison', cursive;
  font-weight: 100;
  color: var(--brand-orange);
}
.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%;
  text-align: center;
}
.white-block h2 {
  font-family: 'Allison', cursive;
  font-weight: 100;
  color: var(--brand-orange);
  line-height: 1em;
  font-size: 3em;
  text-align: center;
}

.bio-block {
  /* background: url(https://australianbrooksanddunnshow.com/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;
}

.achieve {
  width: 100%;
  text-align: center;
  padding: 4vh;
}
.achieve p {
  color: #006780;
  /* color: var(--brand-white); */
}
.achieve h4 {
  font-size: 1.2em;
}
@media only screen and (min-width: 56.25em) {
  .achieve h4 {
    font-size: 2em;
  }
}

.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: 4em;
  }
  .media h2 {
    font-size: 3em;
  }
  .media h3 {
    font-size: 7em;
  }
  .media-bio {
    width: 60%;
  }
  .media-video {
    width: 60%;
  }
  .media-landing {
    justify-content: flex-end;
    background: url(https://australianbrooksanddunnshow.com/public/img/media/Jem-Cassar-Daley-Media-Header-01.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    min-height: 70vh;
    width: 100%;
  }
  .name-title {
    width: 45%;
  }
  /* .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;
  }
  .brag {
    width: 100%;
  }
  .brag h3 {
    font-family: 'aktiv_grotesk_exbold';
    color: var(--brand-white);
  }
  .brag h3::first-letter {
    font-family: 'nauticaw00-regular';
    font-family: 'aktiv_grotesk_exbold';

    font-size: 1.5rem;
    color: var(--brand-white);
    font-weight: bold;
  }
  .highlight {
    background: var(--brand-grey);
  }
  .bio-block {
    display: grid;
    grid-template-columns: 3fr 2fr;
  }
  .bio p {
    font-size: 1.5em;
    color: var(--brand-white);
  }
  .link-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .image-row {
    grid-template-columns: repeat(5, 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);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

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

/*---------------------
	INSTALL WEBAPP PAGE
---------------------*/
.installwebapp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #b5b5b5;
  padding: 2vh;
  padding-top: 12vh;
  /* padding-bottom: 8vh; */
}

.installwebapp h1 {
  color: #fefefe;
}

.installwebapp p {
  color: #9eb3c2;
}

.installPage {
  background: #69747c;
  padding: 2vh;
  width: 100%;
  margin-left: 2vh;
}

.installPage p {
  color: #f7f7f7;
  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 Signup Modal * */

.signupmodal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 2s ease;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -ms-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
}

.signupmodal-content {
  background-color: #fefefe;
  background-color: rgba(0, 0, 0, 0.7);
  margin: 10% auto;
  padding: 20px;
  border: 1px solid var(--brand-vanilla);
  border-radius: 5vh;
  width: 80%;
  /*max-width: 400px;
  */
  -webkit-border-radius: 10vh;
  -moz-border-radius: 5vh;
  -ms-border-radius: 5vh;
  -o-border-radius: 5vh;
  -webkit-border-radius: 5vh;
}

@media only screen and (min-width: 56.25em) {
  .signupmodal-content {
    width: 30%;
  }
}

.signupmodal.show {
  display: block;
  opacity: 1;
}

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

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

/* The Modal (background) */
.installmodal {
  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: rgba(0, 0, 0, 0.4); /* Black with opacity */
}

/* Modal Content/Box */
.installmodal-content {
  background-color: rgba(0, 0, 0, 0.7);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

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

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

.hide {
  display: none;
}

/* * The Signup Modal * */

/* 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 {
  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 {
  padding: 15px;
  flex: 1;
  width: 100%;
  /* margin-right: 30px; */
  font-size: 18px;
  color: #555;
  margin: 0 0 20px 0;
  flex-basis: 100%;
  font-family: 'Roboto Condensed', sans-serif;
}

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

@media only screen and (min-width: 56.25em) {
  .form-group input {
    width: 100%;
  }

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

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

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

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

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

  .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);
  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 input {
  height: 5vh;
  width: 100%;
  border: none;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 0;
  background-color: transparent;
  font-family: arial;
  font-size: 20px;
  -webkit-border-radius: 0x;
  -moz-border-radius: 0x;
  -ms-border-radius: 0x;
  -o-border-radius: 0x;
  font-family: 'Roboto Condensed', sans-serif;
  color: #aeaeae;
}

.contactForm textarea {
  padding: 15px;
  width: 100%;
  height: 15vh;
  font-family: 'Roboto Condensed', sans-serif;
  /* font-size: 1.2em; */
  color: #aeaeae;
  background-color: transparent;
  margin: 5vh 0 5vh 0;
  border: none;
  border-bottom: 1px solid #f6f6f6;
}

.contactForm .form-group {
  justify-content: flex-start;
}

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

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

/* @media (min-width: 576px) { */
/* .form-inline label {
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-align: center;
	  align-items: center;
	  -ms-flex-pack: center;
	  justify-content: center;
	  margin-bottom: 0;
	}
	.form-inline .form-group {
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex: 0 0 auto;
	  flex: 0 0 auto;
	  -ms-flex-flow: row wrap;
	  flex-flow: row wrap;
	  -ms-flex-align: center;
	  align-items: center;
	  margin-bottom: 0;
	}
	.form-inline .form-control {
	  display: inline-block;
	  width: auto;
	  vertical-align: middle;
	}
	.form-inline .form-control-plaintext {
	  display: inline-block;
	}
	.form-inline .input-group,
	.form-inline .custom-select {
	  width: auto;
	}
	.form-inline .form-check {
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-align: center;
	  align-items: center;
	  -ms-flex-pack: center;
	  justify-content: center;
	  width: auto;
	  padding-left: 0;
	}
	.form-inline .form-check-input {
	  position: relative;
	  -ms-flex-negative: 0;
	  flex-shrink: 0;
	  margin-top: 0;
	  margin-right: 0.25rem;
	  margin-left: 0;
	}
	.form-inline .custom-control {
	  -ms-flex-align: center;
	  align-items: center;
	  -ms-flex-pack: center;
	  justify-content: center;
	}
	.form-inline .custom-control-label {
	  margin-bottom: 0;
	}
  } */

/* EMAIL SPAM FILTER CSS///////////////////////// */
#email_add {
  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;
}

.mobile-hide {
  display: none;
}

.desktop-hide {
  display: flex;
}

.new-line {
  display: flex;
}

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

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

  .landingbanner {
    background-attachment: initial;
  }

  .preorder {
    background-attachment: initial;
  }

  .landingGigs {
    background-attachment: initial;
  }

  .landingBio {
    background-attachment: initial;
  }
  .landing-rodeo {
    background-attachment: initial;
  }

  .rodeos {
    background-attachment: initial;
  }
  .contact {
    background-attachment: initial;
  }

  .join {
    background-attachment: initial;
  }
  .bio-block {
    background-attachment: initial;
  }
  .media-landing {
    background-attachment: initial;
  }
  .list-link-page {
    background-attachment: initial;
  }
}

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