/* GLOBAL */
:root {
  --white: #fff;
  --black: #000;
  --subBlack: #5e5e5e;
  --cubic-bezier: 0.35s cubic-bezier(0.49, 0.9, 0.36, 0.79);
}
/* END GLOBAL */

/* BASE */
* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  line-height: 100%;
  text-decoration: none;
  background: none;
  border: 0;
  font-family: sans-serif;
}

html {
  font-size: 1.5vw;
}

body {
  font-size: 100%;
  color: white;
}
/* END BASE */

/* UTILITIES */
.default-container {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  z-index: 10;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 12312312311231231231;
  background: black;
}

.heading {
  font-size: 175%;
}

.bg-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  object-fit: cover;
}

.btn-primary {
  background-color: black;
  color: white;
  text-transform: uppercase;
  padding: 1rem 2rem;
  line-height: 100%;
  display: inline-block;
  border: 0.2rem black solid;
  transition: all var(--cubic-bezier);
}

.btn-primary:hover {
  background-color: transparent;
  border-color: black;
  color: black;
  /* letter-spacing: 0.1rem; */
  transition: all var(--cubic-bezier);
}

.btn-primary__img {
  width: 1rem;
  opacity: 0;
  position: absolute;
}

.btn-primary:hover .btn-primary__img {
  position: relative;
  opacity: 1;
}

.btn-secondary {
  background-color: transparent;
  color: white;
  text-transform: uppercase;
  padding: 1rem 2rem;
  line-height: 100%;
  display: inline-block;
  border: 0.2rem white solid;
  transition: all var(--cubic-bezier);
}

.btn-secondary:hover {
  background-color: white;
  color: var(--black);
  /* letter-spacing: 0.1rem; */
  transition: all var(--cubic-bezier);
}

/* END UTILITIES */

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-content: center;
  transition: all var(--cubic-bezier);
}

.navbar__link {
  padding: 2rem;
  font-size: 90%;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition: all var(--cubic-bezier);
}

.navbar__link:hover {
  color: var(--subBlack);
  transition: all var(--cubic-bezier);
}

.navbar.scrolled {
  background-color: var(--black);
  transition: all var(--cubic-bezier);
}
/* END NAVBAR */

/* HERO */
.hero {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero__container {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
  width: 75%;
  margin: auto;
  gap: 1rem;
  padding: 2rem 1rem;
}

.hero__row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero__img--text {
  width: 50%;
}

.hero__text {
}

.hero__btn {
  margin-top: 1rem;
}

.hero__img--artist,
.hero__img--logo {
  width: 70%;
  margin: auto;
}

/* scroll down */
.scroll-down__container {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  transition: all var(--cubic-bezier);
}

.scroll-down__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2vw;
  cursor: pointer;
}

.scroll-down__text {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1rem;
  line-height: 0;
  rotate: 90deg;
  margin-bottom: 5rem;
  color: var(--black);
}

.scroll-down__icon {
  width: 1vw;
}

.scroll-down__container:hover {
  top: 55%;
  transition: all var(--cubic-bezier);
}
.scroll-down__container:hover .scroll-down__icon {
  opacity: 0;
}
/* scroll down */

/* socials */
.hero__socials__container {
  opacity: 100;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  gap: 2rem;
}

.socials__icon {
  cursor: pointer;
}

.socials__icon:hover img {
  scale: 1.2;
}

.socials__icon img {
  width: 2vw;
  scale: 1;
  transition: scale var(--cubic-bezier);
  filter: invert(1);
} /* socials */

/* END HERO */

/* BANNER */
.banner {
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* END BANNER */

/* TOUR */
.tour {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 0 1rem;
  padding-top: 5rem;
}

.tour__container {
  width: 75%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  gap: 1rem;
}

.tour__items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tour__row {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.tour__item {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.tour__img {
  width: 100%;
  height: 100%;
}

.tour__date {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border: 0.1rem solid var(--subBlack);
  font-size: 90%;
  justify-content: center;
  align-items: center;
}

.tour__date--month {
  font-size: 60%;
}

.tour__details__container {
  display: flex;
  flex-direction: column;
}

.tour__location {
  font-size: 80%;
  color: var(--subBlack);
}

.tour__icon {
  width: 0.75rem;
}

.tour__btn {
  padding: 0.5rem;
  margin-top: 0.5rem;
  display: inline-block;
  color: var(--black);
  border-color: var(--black);
  font-size: 60%;
}

.tour__btn:hover {
  background-color: var(--black);
  color: white;
}

/* defaults */
.bit-widget-container {
  width: 100% !important;
}
.bit-follow-section-wrapper,
.bit-play-my-city-wrapper,
.bit-play-my-city-wrapper + div {
  display: none !important;
}

/* END TOUR */

/* VIDEOS */
#videos {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
}

.videos__container {
  width: 75%;
  margin: auto;
  padding: 4rem 0;
}

.videos__heading {
  padding: 1rem;
  text-align: center;
}

.videos-slider__container {
}

.videos-slider__item {
  padding: 1rem;
  text-align: left;
}

.videos-slider__col {
  padding: 0.5rem 0.5rem;
  margin-top: 0.7rem;
  text-align: center;
}

.videos-slider__title {
  font-size: 90%;
  color: var(--white);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.videos-slider__artist {
  color: var(--white);
  margin-top: 0.2rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
}

.videos-slider__img {
  width: 100%;
  object-fit: cover;
}

.videos-slider__iframe {
  height: 70vh;
  width: 100%;
  overflow: hidden;
  /* pointer-events: none; */
}

.videos-slider__arrow {
  position: absolute;
  top: 100%;
  z-index: 10;
}

.videos-slider__arrow img {
  width: 1.5vw;
  filter: invert(1);
  cursor: pointer;
}

.videos-slider__arrow--next {
  right: -5%;
  top: 40%;
}
.videos-slider__arrow--prev {
  left: -5%;
  top: 40%;
}

#videos .slick-dots button:before {
  color: white !important;
  opacity: 90%;
}
#videos .slick-dots li.slick-active button:before {
  color: white !important;
}

#videos .slick-list.draggable {
  height: 100% !important;
}
/* END VIDEOS */

/* SHOP */
.shop {
  position: relative;
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.shop__bg {
  object-fit: cover;
  object-position: top right;
}

.shop__col {
  position: relative;
  z-index: 10;
  text-align: center;
}

.shop__heading {
  color: white;
  text-transform: uppercase;
}

.shop__btn {
  margin-top: 2rem;
}

/* scroll up*/
.scroll-up__container {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  transition: all var(--cubic-bezier);
}

.scroll-up__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2vw;
  cursor: pointer;
}

.scroll-up__text {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1rem;
  line-height: 0;
  rotate: -90deg;
  margin-top: 5rem;
  color: white;
}

.scroll-up__icon {
  width: 1vw;
}

.scroll-up__container:hover {
  top: 45%;
  transition: all var(--cubic-bezier);
}
.scroll-up__container:hover .scroll-up__icon {
  opacity: 0;
}
/* scroll up*/

/* END SHOP */

/* FOOTER */
.footer {
  position: relative;
  text-align: center;
}

.footer__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 1rem;
  z-index: 10;
  position: relative;
}

.footer__socials__container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.footer__socials__container .socials__icon img {
  width: 1.5vw;
}

.footer__text {
  margin-top: 0.5rem;
  color: var(--white);
}

.footer__copyright {
  text-align: center;
  width: 75%;
  margin: auto;
  padding: 1rem 0;
}

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

.footer__link:hover {
  text-decoration: underline;
}

/* END FOOTER */

/* POPUP */
.spinner-icon {
  width: 3vw;
}

.newsletter__popup {
  position: fixed;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  border: 0.2rem solid var(--black);
  transition: all var(--cubic-bezier);
  z-index: 999;
}

.newsletter__popup.open {
  top: 50%;
  opacity: 1;
}

.newsletter__popup {
  top: -150%;
  opacity: 0;
  transition: all var(--cubic-bezier);
}

.newsletter__form__container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border-radius: 0.2rem;
}

.newsletter__heading {
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.newsletter__input--email {
  padding: 0.5rem 1rem;
  border: 0.1rem solid var(--black);
  margin-bottom: 2rem;
  width: 100%;
}

.newsletter__btn {
  padding: 0.5rem 1rem;
}

.newsletter__btn--close {
  cursor: pointer;
  position: absolute;
  top: 5%;
  right: 3%;
  font-size: 120%;
  color: var(--black);
  z-index: 990;
  margin-left: auto;
  /* margin-top: -5vh; */
}
/* END POPUP */

/* BANDSINTOWN */
.bit-top-track-button,
.bit-nav-bar-container {
  display: none !important;
}
/* END BANDSINTOWN */

/* MEDIA */
@media (max-width: 768px) {
  body {
    font-size: 300%;
  }

  #hero {
    /* height: 90vh; */
    padding: 4rem 0;
  }

  .hero__container {
    width: 85%;
    /* height: 100vh; */
    flex-direction: column-reverse;
    padding: 2rem;
  }

  .hero__img--artist {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    object-position: center;
  }

  .hero__img--text {
    margin-top: 1rem;
  }

  .scroll-down__icon {
    width: 4vw;
  }

  .scroll-down__text {
    margin-bottom: 10rem;
  }

  .socials__icon img {
    width: 5vw;
  }

  .videos__container {
    width: 90%;
  }

  .videos-slider__iframe {
    height: 30vh;
  }

  .videos-slider__arrow img {
    width: 4vw;
  }

  .videos-slider__arrow--next {
    right: 5%;
    top: 100%;
  }

  .videos-slider__arrow--prev {
    left: 5%;
    top: 100%;
  }

  .scroll-up__icon {
    width: 4vw;
  }

  .scroll-up__text {
    margin-top: 10rem;
  }

  .footer__copyright {
    width: 90%;
    font-size: 90%;
  }

  .footer__socials__container .socials__icon img {
    width: 4vw;
  }

  .newsletter__popup {
    width: 90%;
  }

  .newsletter__form__container {
    padding: 10rem 2rem;
  }

  .tour {
    padding-top: 10rem;
  }

  .tour__container {
    flex-direction: column;
  }

  .tour__items {
    margin-top: 1rem;
  }
}