@font-face {
  font-family: Cheltenham Extra Condensed;
  src: url('../fonts/Cheltenham-Extra-Condensed-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.section {
  background-image: linear-gradient(0deg, #000000bf 5%, #0003 73%), url('../images/bg.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 64px 1rem;
  display: flex;
  position: relative;
}

.background-video {
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.logo {
  z-index: 2;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.contents {
  z-index: 2;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 64px 1rem;
  display: flex;
  position: absolute;
  inset: 0%;
}

.presave-button {
  z-index: 2;
  color: #000;
  text-align: center;
  -webkit-text-fill-color: inherit;
  background-color: #fff;
  background-clip: border-box;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 14px 40px 12px;
  font-family: Cheltenham Extra Condensed, Palatino Linotype, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
  transition: all .2s;
  position: relative;
}

.presave-button:hover {
  color: #fff;
  background-color: #000;
}

.text-block {
  z-index: 2;
  color: #fff;
  text-align: center;
  margin-top: 2rem;
  font-family: Cheltenham Extra Condensed, Palatino Linotype, sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
  position: relative;
}

.code-embed {
  z-index: 1;
  height: auto;
  margin-top: 1rem;
  position: relative;
  overflow: auto;
}

.socials {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 0;
  display: flex;
  position: relative;
}

.sociallink {
  transition: all .2s;
}

.sociallink:hover {
  transform: scale(1.2);
}

.sign-up-image {
  z-index: 3;
  max-width: 100px;
  position: relative;
}

.text-block-copy {
  z-index: 2;
  color: #fff;
  text-align: center;
  margin-top: 1rem;
  font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
  font-size: 1.5rem;
  line-height: 100%;
  position: relative;
}

.shop-section {
  background-color: #0000;
  background-image: linear-gradient(#000000bf, #000000bf), url('../images/bg.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  flex-flow: column;
  align-items: center;
  width: 100vw;
  min-height: 0;
  padding: 48px 1rem;
  display: flex;
}

.heading {
  color: #fff;
  text-align: center;
  font-family: Cheltenham Extra Condensed, Palatino Linotype, sans-serif;
  font-size: 2rem;
  line-height: 1.2;
}

.shop-products-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 8px;
  display: flex;
}

.product-link {
  cursor: pointer;
  width: 100%;
  max-width: 512px;
  text-decoration: none;
  transition: all .2s;
}

.product-link:hover {
  transform: scale(1.05);
}

.buy-text {
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 0;
  max-width: 128px;
  margin: auto;
  padding: 14px 8px 12px;
  font-family: Cheltenham Extra Condensed, Palatino Linotype, sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  transition: all .2s;
}

.buy-text:hover {
  color: #000;
  background-color: #fff;
}

.video-section {
  background-color: #000;
  background-image: linear-gradient(#000000bf, #000000bf), url('../images/bg.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  flex-flow: column;
  align-items: center;
  width: 100vw;
  min-height: 0;
  padding: 48px 1rem;
  display: flex;
}

.tour-section {
  background-color: #000000e6;
  background-image: linear-gradient(#000, #000), url('../images/bg.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  flex-flow: column;
  align-items: center;
  width: 100vw;
  min-height: 0;
  padding: 48px 1rem;
  display: flex;
}

.code-embed-2 {
  color: #fff;
  width: 100%;
  max-width: 960px;
}

.openstage-section {
  background-color: #000;
  flex-flow: column;
  align-items: center;
  width: 100vw;
  min-height: 0;
  padding: 48px 1rem;
  display: flex;
}

.div-block {
  flex-flow: column;
  margin-top: auto;
  display: flex;
}

.youtube {
  width: 100%;
  max-width: 960px;
  height: auto;
}

.video {
  max-width: 960px;
}

.video-embed {
  width: 100%;
  max-width: 960px;
}

@media screen and (max-width: 991px) {
  .section {
    background-image: linear-gradient(0deg, #0009, #0003 73%), url('../images/BG_2.jpg');
    background-attachment: scroll, fixed;
  }

  .text-block, .text-block-copy {
    margin-top: 2rem;
  }

  .shop-section {
    background-image: linear-gradient(#000000bf, #000000bf), url('../images/BG_2.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .product-link {
    width: 48%;
  }

  .video-section {
    background-image: linear-gradient(#000000bf, #000000bf), url('../images/BG_2.jpg');
    background-attachment: scroll, fixed;
  }

  .tour-section {
    background-image: linear-gradient(#000, #000);
  }
}

@media screen and (max-width: 767px) {
  .section {
    background-image: linear-gradient(0deg, #000000bf, #0000001a 45%), url('../images/mobile_BG.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .text-block, .text-block-copy {
    margin-top: 2rem;
  }

  .shop-section {
    background-color: #0000;
    background-image: linear-gradient(#000000bf, #000000bf), url('../images/mobile_BG.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .video-section {
    background-image: linear-gradient(#000000bf, #000000bf), url('../images/mobile_BG.jpg');
  }

  .tour-section {
    background-color: #000;
    background-image: none;
    background-position: 0 0;
  }
}

@media screen and (max-width: 479px) {
  .section {
    background-image: linear-gradient(0deg, #000000bf, #0003 73%), url('../images/mobile_BG.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .presave-button {
    font-size: 14px;
  }

  .text-block {
    margin-top: 1rem;
    font-size: 1rem;
  }

  .text-block-copy {
    margin-top: 1rem;
    font-size: 1.25rem;
  }

  .shop-section {
    background-image: linear-gradient(#000000bf, #000000bf), url('../images/mobile_BG.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .product-link {
    width: 100%;
  }

  .video-section {
    background-image: linear-gradient(#000000bf, #000000bf), url('../images/mobile_BG.jpg');
  }

  .tour-section {
    background-color: #000;
    background-image: linear-gradient(#000, #000);
  }
}


@font-face {
  font-family: 'Cheltenham Extra Condensed';
  src: url('../fonts/Cheltenham-Extra-Condensed-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}