/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

/* UNIVERSAL */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow-x: hidden;
}
body.home {
    background: url("images/crowdbg.gif") no-repeat top center fixed;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
body.tour {
    background: url("images/tour-bg.jpg") no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url("images/bg.jpg") no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

/*preload*/

#preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #000;display: flex;justify-content: center;align-items: center;z-index: 9999;}

#loader {width: 100px;height: auto;}

/*404*/

div.error {position: fixed;bottom: 10px;width: 100%;text-align: center;pointer-events: none;}

div.error a.four {text-decoration: none;font-size: 1.5rem;font-weight: bold;pointer-events: auto;font-family: subway-paris-std, sans-serif;color: rgba(255, 255, 255, .6);}

/*Header*/

div.header a.logo img {padding-top: 20px;align-content: center;display: block;margin: 0 auto;}
div.header a.logo img {transition: transform 0.3s ease;}
div.header a.logo img:hover {transform: scale(1.1);}
div.header a.lnk {font-family: subway-paris-std, sans-serif;font-weight: 400;font-style: normal;font-size: 42px;color:aliceblue;text-decoration: none;text-align: center;display: block;margin: 5px;}
div.header a.lnk {transition: 0.5s ease;}
div.header a.lnk:hover {color: #0D77FF;transform: scale(1.2);}

/*Home Content*/

div.home a.cta {text-decoration: none;font-size: 60px;color: aliceblue;font-family: "hobeaux", sans-serif;text-align: center;display: block;margin-top: 150px;}
div.home a.cta {transition: 0.5s ease;}
div.home a.cta:hover {transform: scale(1.2);}

div.home a.cta {animation: glow 1.5s ease-in-out infinite alternate;}

@-webkit-keyframes glow {
  from {text-shadow: 0 0 1.5px #fff, 0 0 3px #fff, 0 0 4.5px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);}
  to {text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #fff;}
}

/*Music Content*/

div.music div.vids {position: relative;width: 100%;padding-bottom: 56.25%;height: 0;overflow: hidden;}
div.music div.vids iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

div.music div.row {opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease, transform 0.8s ease;}
div.music div.row.show {opacity: 1;transform: translateY(0);}

/*Tour Content*/

div.tour h1 {color: aliceblue;animation: glow 1.5s ease-in-out infinite alternate;font-family: "hobeaux", sans-serif;text-align: center;margin: -10px;font-size: 50px}
div.tour p.location {color: aliceblue;text-shadow:0 0px 8px rgba(0, 0, 0, 1);}
div.tour p.state {color: aliceblue;text-align: center;text-shadow:0 0px 8px rgba(0, 0, 0, 2);display: block;}
div.tour p.state {margin-top: 38px;}
div.tour a.ticket {text-decoration: none;color: aliceblue;text-align: center;padding: 15px;font-family: subway-paris-std, sans-serif;font-size: 24px;display: block;text-shadow:0 0px 8px rgba(0, 0, 0, 2);transition: 0.5s ease;}
div.tour a.ticket {margin-top: 23px;}
div.tour a.ticket:hover {color: #0D77FF;transform: scale(1.2);}

div.tour div.tour-info.alt {background-color: rgba(0, 0, 0, .1)}
div.tour div.tour-info {background-color: rgba(0, 0, 0, .3)}

/*About Content*/

a.toggle-link {display: inline-block;padding: 10px 20px;color:aliceblue;text-decoration: none;border-radius: 5px;cursor: pointer;transition: 0.5s ease;}
a.toggle-link:hover {background-color: rgba(0, 86, 179, .2);transform: scale(1.2);}

#hid {display: none;opacity: 0;transition: opacity 0.5s ease-in-out;}

div.about div.title {text-align: center}
div.about h1 {color: aliceblue;margin: -10px;font-family: "hobeaux", sans-serif;animation: glow 1.5s ease-in-out infinite alternate;}
div.about div.biopic {text-align: center;}
div.about img.abs {width: 140%;margin-top: 20px;transition: 0.5s ease;}
div.about img.abs:hover {transform: scale(1.2);}
div.about img.minis {display: none;transition: 0.5s ease;}
div.about img.minis:hover {transform: scale(1.2);}
div.about p {;color: white; font-size: 18px;}
div.about p strong {color: #0D77FF;}
div.about p em {color: #0D77FF;}

/*Shop Content*/

div.shop p {color: aliceblue;text-align: center;}

div.shop img {width: 100%;}
div.shop img {transition: 0.5s ease;}
div.shop img:hover {transform: scale(1.3);}

div.shop select {display: block;margin: 12px auto;padding: 3px;text-align: center;}

div.shop a.add {display: block; text-decoration: none;color: aliceblue;margin-top: 25px;text-align: center;background-color: #0D77FF;}

div.shop div.row {opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease, transform 0.8s ease;}
div.shop div.row.show {opacity: 1;transform: translateY(0);}

/*Checkout*/

div.checkout div.title {text-align: center;}
div.checkout div.title h1 {color: aliceblue;font-family: subway-paris-std, sans-serif;font-weight: 400;font-style: normal;font-size: 60px;margin: 0 auto;}
div.checkout div.title p {color: aliceblue;font-size: 16px;}
div.checkout div.title p.warning {color: red;}
div.checkout div.title p.warning strong {color: red;}
div.checkout a.prev {text-decoration: none; color: #0040FF; font-family: subway-paris-std, sans-serif; font-size: 24px;transition: 0.3s ease;}
div.checkout a.prev:hover {transform: scale(1.2);}

div.summary img {width: 45%;}

div.summary p {color: white;margin-top: 50px;}

div.summary select {display: block;margin: 12px auto;padding: 3px;text-align: center;}

div.summary a.confirm {display: block; text-decoration: none;color: aliceblue;margin-top: 25px;text-align: center;background-color: #0D77FF;padding: 10px;margin-bottom: 50px;}
div.summary div.row {opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease, transform 0.8s ease;}
div.summary div.row.show {opacity: 1;transform: translateY(0);}

div.summary input, select {padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;color: black;width: 100%;}
div.summary h2 {color: aliceblue;text-align: center;}
div.summary label {color: aliceblue;}

/*Cart*/

.cart-popup {position: fixed;top: 20px;right: 10px;background-color: #0D77FF;color: #121212;padding: 10px 15px;border-radius: 5px;font-weight: bold;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);opacity: 0;visibility: hidden;transition: opacity 0.5s ease-in-out, visibility 0.5s;}

.cart-icon {position: fixed;top: 20px;right: 40px;background: #121212;color: aliceblue;padding: 8px 15px;border-radius: 20px;font-size: 16px;font-weight: bold;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);display: flex;align-items: center;gap: 5px;text-decoration: none;}

/*Complete*/

div.complete h2 {color: aliceblue}
div.complete p {color: aliceblue;}
div.complete p.confirmation {font-size: 24px;font-weight: bold;color:aliceblue;padding: 10px;background: #0040FF;border-radius: 5px;display: inline-block;margin-top: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5)}
div.complete {text-align: center;}
div.complete a.ml {text-decoration: none; color: #0040FF; font-family: subway-paris-std, sans-serif; font-size: 24px;}

div.complete div.col-12 {opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease, transform 0.8s ease;}
div.complete div.col-12.show {opacity: 1;transform: translateY(0);}

/*Media Content*/

div.media img {width: 100%;margin: 0 auto;}
div.media div.row {opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease, transform 0.8s ease;}
div.media div.row.show {opacity: 1;transform: translateY(0);}

div.media div.color {position: relative}
div.media div.color img {filter: grayscale(100%); -webkit-filter: grayscale(100%);transition: 0.5s ease;}
div.media div.color img:hover {filter: grayscale(0%);filter: gray;-webkit-filter: grayscale(0%);}

/*Social Icons*/

div.icons {position: fixed;left: 20px;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;gap: 10px;z-index: 1000;}
div.icons a.socials {display: block;width: 40px;transition: transform 0.5s ease, filter 0.5s ease;}
div.icons a.socials img {width: 100%;height: auto;filter: brightness(1);}
div.icons a.socials:hover {transform: scale(1.2);filter: invert(42%) sepia(91%) saturate(2415%) hue-rotate(190deg) brightness(100%) contrast(103%);}
	
/* ROOT FONT STYLES */

* {
  font-family: 'Lato', Helvetica, sans-serif;
  color: #333447;
  line-height: 1.5;
}

/* TYPOGRAPHY */

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 1.8;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 700;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}

/* ==== GRID SYSTEM ==== */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 75%;
    max-width: 60rem;
  }
}

@media screen and (max-width: 1024px) {
  div.home a.cta {font-size: 40px;}
  div.header a.logo img {width: 80%;max-width: 200px;}
  div.header a.lnk {font-size: 36px;}
  div.summary p {margin: 0;}
  div.summary img {width: 60px;}
	
}

@media screen and (max-width: 768px) {
  div.home {background-attachment: scroll;}
  div.home a.cta {font-size: 32px;padding: 10px 20px;}
  div.header a.logo img {width: 80%;max-width: 220px;}
  div.header a.lnk {font-size: 28px;}
  div.icons {left: 10px;}
  div.icons a.socials {width: 30px;}
  div.summary img {width: 80px;}
}

@media screen and (max-width: 720px) {
  div.about img.abs {display: none;}
  div.about img.minis {display: flex;margin: 0 auto;width: 50%;}
  div.about p strong {color: #e87e32;}
  div.about p em {color: #e87e32}
  div.tour p.state {margin-top: 30px;}


}

@media screen and (max-width: 480px) {
  div.home a.cta {font-size: 24px;text-align: center;padding: 8px 16px;}  
  div.header a.logo img {width: 60%;max-width: 150px;}
  div.header a.lnk {font-size: 22px;display: block;text-align: center;padding: 8px 0;}
}