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

*www.nicktanem.com*
*www.djnikkat.com * <-- redirects to the above web address

Author: Victoria Jones
victoria-jones-design.com
victoria.j.art@gmail.com

Date Last Modified: 8/30/2023

**************************/
/**************************/
/****** imports only ******/
/**************************/
/** VARIABLES **/
/** ANIMATIONS **/
@keyframes simpleRotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideToLeft {
  from {
    opacity: 0;
    transform: translateX(5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideToRight {
  from {
    opacity: 0;
    transform: translateX(-5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/** MIXINS **/
/* MEDIA QUERIES */
/***********
$breakpoints:
    - phone-small   300px
    - phone-med     480px
    - phone         600px
    - tab-port      900px
    - tab-land      1200px
    : med-desktop   1400px
    - big-desktop   1800px

//height breakpoints
    $breakpoints:
        - phone-small-h 650px
        - phone-med-h   740px

EM used here (do not change to different measurement)
1em === 16px
***********/
/** FUNCTIONS **/
/**********************

REM sizing used for styling
base size:  1rem = 10px

def:
- base browser sizes at 16px
- changed to 62.5% to equal 10px
- conversions are (desired px size)/16px
    - change to percent

**********************/
/** BASE **/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  box-sizing: border-box;
  background-color: #1e1e1e;
}

/** TYPOGRAPHY **/
body {
  font-family: "Newsreader", serif;
  line-height: 1.7;
  font-size: 1.6rem;
  color: #fff;
}

.extra-bold {
  font-weight: 500;
}

.diamond-paragraphs {
  font-family: "Teko", sans-serif;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 300;
}
.diamond-paragraphs__p:not(:last-child)::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #d0a348;
  transform: rotate(45deg);
  margin: 2rem auto;
}

.bold-copy {
  color: #d0a348;
  font-family: "Teko", sans-serif;
  font-size: 2.2rem;
  line-height: 1.2;
}
.bold-copy::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #d0a348;
  transform: rotate(45deg);
  margin: 2rem auto;
}
@media only screen and (max-width: 75em) {
  .bold-copy {
    text-align: center;
  }
}

.p__copy:not(:last-child),
.p__bold:not(:last-child) {
  margin-bottom: 2rem;
}

.header-2 {
  text-transform: uppercase;
  font-family: "Teko", sans-serif;
  font-size: 5.5rem;
  font-weight: 300;
}

.header {
  font-weight: 300;
}

/** UTILITIES **/
/** banner **/
.banner {
  position: fixed;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  transition: all 0.4s;
  top: 0;
}
.banner__checkbox {
  display: none;
}
.banner__checkbox:checked + .banner {
  transition: all 0.4s;
  top: -100vh;
}
@media only screen and (max-width: 37.5em) {
  .banner__checkbox:checked + .banner {
    top: -100vh;
  }
}
.banner__container {
  position: relative;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000;
  border: 0.3rem solid #d0a348;
  padding: 1rem 1.5rem;
  overflow: hidden;
}
.banner__close {
  transition: all 0.4s;
  position: absolute;
  z-index: 3;
  align-self: flex-end;
  font-family: sans-serif;
  font-size: 2.4rem;
}
.banner__close::after {
  transition: all 0.4s;
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 0;
  height: 0;
  box-shadow: 0 0 10rem 5rem #f2d978;
  opacity: 0;
}
.banner__close:hover {
  cursor: pointer;
  color: #d0a348;
}
.banner__close:hover::after {
  opacity: 1;
}
.banner__content {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
}
.banner__content--set-to-column {
  flex-direction: column;
}
@media only screen and (max-width: 56.25em) {
  .banner__content {
    flex-direction: column;
  }
}
.banner__content--left {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .banner__content--left {
    margin-bottom: 3rem;
  }
}
.banner__content--right {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}
.banner__content--right--cta-image {
  justify-content: center;
}
.banner__CTA--p--01 {
  font-family: "Teko", sans-serif;
  color: #d0a348;
  font-size: 2.4rem;
}
@media only screen and (max-width: 37.5em) {
  .banner__CTA--p--01 {
    padding-top: 3rem;
    line-height: 1;
    padding-bottom: 0.5rem;
  }
}
.banner__CTA--p--04 {
  font-family: "Teko", sans-serif;
  color: #FF0A39;
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner__CTA--p--freebetty {
  color: #FF0A39;
  font-family: "Teko", sans-serif;
  font-size: 2rem;
}
.banner__CTA--image {
  height: 80vh;
  max-height: 86.3rem;
}
@media only screen and (max-width: 37.5em) {
  .banner__CTA--image {
    max-width: 100%;
    height: auto;
    max-height: auto;
  }
}
.banner__button {
  margin-top: 1rem;
}
.banner__background {
  position: absolute;
  width: 100%;
  bottom: -1.2rem;
  z-index: -1;
  display: flex;
  justify-content: end;
}
.banner__background--img {
  width: 20%;
  transform: rotate(-15deg);
  opacity: 0.2;
}
@media only screen and (max-width: 37.5em) {
  .banner__background--img {
    width: 50%;
  }
}

/** tour banner **/
.tour-banner {
  z-index: 1;
  position: relative;
  height: 10rem;
  padding: 0.2rem;
  overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
  .tour-banner {
    height: 11rem !important;
  }
}
.tour-banner::before {
  content: "";
  position: absolute;
  top: -72vw;
  right: -26vw;
  height: 150vw;
  width: 150vw;
  background-image: conic-gradient(#8d6e30 20deg, #d0a348, #e4bf67, transparent 120deg);
  animation: simpleRotate 3s infinite linear;
}
.tour-banner__container {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #000;
}
.tour-banner__side--left {
  display: flex;
}
.tour-banner__text--text-01 {
  padding-right: 0.5rem;
  padding-top: 0.5rem;
}
.tour-banner__text--text-02 {
  font-size: 2.5rem;
  font-family: "Teko", sans-serif;
  color: #d0a348;
  transform: rotate(-7deg);
}
@media only screen and (max-width: 37.5em) {
  .tour-banner__text--text-02 {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tour-banner {
    height: 9.5rem;
  }
  .tour-banner__container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/** main nav **/
.nav-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  height: 15rem;
}
.nav-main__logo {
  position: relative;
  z-index: 1;
  height: 12rem;
  filter: drop-shadow(0 0.3rem 0 #1e1e1e) drop-shadow(-0.3rem 0 0 #1e1e1e) drop-shadow(0.3rem 0 0 #1e1e1e);
}
@media only screen and (max-width: 37.5em) {
  .nav-main__logo {
    transform: scale(0.7) translateY(-2rem);
  }
}
.nav-main__bar {
  width: 100%;
  position: relative;
  top: -9rem;
  height: 0.8rem;
  background-image: linear-gradient(to right, transparent 5%, #8d6e30 40%, #d0a348, #e4bf67, #f2d978, #fff7da, #f2d978, #e4bf67, #d0a348, #8d6e30 60%, transparent 95%);
}

.website-nav {
  transition: all 0.3s;
  position: fixed;
  top: 0;
  left: -100%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.website-nav__checkbox {
  display: none;
}
.website-nav__checkbox:checked + label + .website-nav, .website-nav__checkbox:checked + label + .website-nav::after, .website-nav__checkbox:checked + label + .website-nav .website-nav__list {
  left: 0;
}
.website-nav__checkbox:checked + label + .website-nav {
  z-index: 10;
}
.website-nav__checkbox:checked + .website-nav__menu .website-nav__menu__bar {
  transform: rotate(45deg);
}
.website-nav__checkbox:checked + .website-nav__menu .website-nav__menu__bar::after, .website-nav__checkbox:checked + .website-nav__menu .website-nav__menu__bar::before {
  width: 4rem;
}
.website-nav__checkbox:checked + .website-nav__menu .website-nav__menu__bar::after {
  transform: rotate(360deg);
  top: 0;
}
.website-nav__checkbox:checked + .website-nav__menu .website-nav__menu__bar::before {
  transform: rotate(-450deg);
  top: 0;
}
.website-nav__menu {
  position: fixed;
  left: 2rem;
  top: 1rem;
  z-index: 11;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
}
.website-nav__menu__bar, .website-nav__menu__bar::before, .website-nav__menu__bar::after {
  transition: all 0.3s;
}
.website-nav__menu__bar {
  position: absolute;
  top: 1rem;
  width: 4rem;
  height: 0.2rem;
  background-color: #d0a348;
}
.website-nav__menu__bar::before {
  content: "";
  position: absolute;
  top: 1rem;
  width: 3rem;
  height: 0.2rem;
  background-color: #d0a348;
  transition-delay: 0.15s;
}
.website-nav__menu__bar::after {
  content: "";
  position: absolute;
  top: 2rem;
  width: 2rem;
  height: 0.2rem;
  background-color: #d0a348;
  transition-delay: 0.25s;
}
.website-nav__menu:hover .website-nav__menu__bar {
  transform: translateY(-0.3rem);
}
.website-nav__menu:hover .website-nav__menu__bar::before {
  transform: translateY(-0.3rem);
}
.website-nav__menu:hover .website-nav__menu__bar:after {
  transform: translateY(-0.6rem);
}
.website-nav::after {
  transition: all 0.8s;
  content: "";
  left: -200%;
  position: absolute;
  width: 220%;
  height: 100%;
  background: linear-gradient(100deg, black 50%, transparent 50%, transparent 0%);
}
.website-nav__list {
  transition: all 0.8s ease;
  position: relative;
  z-index: 1;
  list-style-type: none;
  left: -100%;
}
.website-nav__list__item {
  transition: all 0.3s;
  margin-bottom: 2rem;
}
.website-nav__list__item__link {
  font-family: "Teko", sans-serif;
  color: #d0a348;
  text-decoration: none;
  font-size: 2.2rem;
}
.website-nav__list__item:hover::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 0;
  height: 0;
  box-shadow: 0 0 10rem 5rem #d0a348;
  opacity: 0;
  margin-left: -25%;
}
.website-nav__list__item:hover:hover {
  transform: scale(1.2) rotate(-10deg);
  color: #f2d978;
}
.website-nav__list__item:hover:hover::after {
  opacity: 1;
}

/** logo **/
.logo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo__description {
  display: flex;
  font-family: "Teko", sans-serif;
  line-height: 1;
}
.logo__description--1 {
  text-align: right;
}
.logo__description--bar {
  background-color: #fff;
}
.logo__img, .logo__description {
  z-index: 2;
}
.logo__glow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  width: 0;
  height: 0;
}
.logo__header {
  position: absolute;
  width: 72rem;
  height: 72rem;
  right: 0;
  top: 20vh;
}
.logo__header__img {
  width: 55rem;
  margin-top: 4rem;
}
.logo__header__description {
  position: relative;
  font-size: 5.5rem;
  margin-right: 18.5rem;
}
.logo__header__description--1 {
  height: 16.3rem;
  width: 18.9rem;
}
.logo__header__description--text {
  position: relative;
  height: 5.5rem;
}
.logo__header__description--text--top, .logo__header__description--text--stroke {
  position: absolute;
}
.logo__header__description--text--top {
  z-index: 1;
}
.logo__header__description--text--stroke {
  text-stroke: 0.4rem #000;
  -webkit-text-stroke: 0.4rem #000;
}
.logo__header__description--text--1 {
  display: flex;
  justify-content: end;
  text-align: right;
}
.logo__header__description--text--1--top, .logo__header__description--text--1--stroke {
  right: 0;
  text-align: right;
}
.logo__header__description--bar {
  width: 0.5rem;
  margin: 0 1rem;
  border: 0.15rem solid #000;
}
@media only screen and (max-width: 37.5em) {
  .logo__header__description {
    margin-right: 11.1rem;
  }
  .logo__header__description--text {
    height: 4.5rem;
  }
  .logo__header__description--1 {
    width: 11rem;
  }
  .logo__header__description--bar {
    height: 13rem;
  }
}
.logo__header__glow {
  box-shadow: 0 0 40rem 12rem #d0a348;
}
@media only screen and (max-width: 75em) {
  .logo__header {
    width: 60rem;
    height: 60rem;
    top: 50vh;
  }
  .logo__header__img {
    width: 43rem;
  }
  .logo__header__description {
    font-size: 4.5rem;
  }
  .logo__header__borderbox {
    width: 30rem !important;
    height: 30rem !important;
  }
}
@media only screen and (max-width: 56.25em) {
  .logo__header {
    display: flex;
    width: 100%;
    justify-content: center;
    top: 50vh;
  }
}
.logo__music__glow {
  box-shadow: 0 0 40rem 12rem #d0a348;
}
.logo__footer {
  width: 45rem;
  height: 45rem;
}
.logo__footer__img {
  width: 28rem;
  margin-top: 2rem;
}
.logo__footer__description {
  font-size: 2.5rem;
  margin-right: 1.7rem;
  line-height: 1;
  text-stroke: 0.05rem #000;
  -webkit-text-stroke: 0.05rem #000;
}
.logo__footer__description--bar {
  width: 0.2rem;
  margin: 0 0.5rem;
}
.logo__footer__glow {
  box-shadow: 0 0 10rem 5rem #d0a348;
}
.logo__footer__borderbox {
  width: 19rem !important;
  height: 19rem !important;
}
.logo__footer__borderbox--1::after, .logo__footer__borderbox--2::after {
  background-color: #1e1e1e !important;
}
@media only screen and (max-width: 30em) {
  .logo__footer, .logo__header {
    width: 100%;
    height: 45rem;
  }
  .logo__footer__img, .logo__header__img {
    width: 25rem;
  }
  .logo__footer__description, .logo__header__description {
    font-size: 3.2rem;
  }
  .logo__footer__borderbox, .logo__header__borderbox {
    width: 19.5rem !important;
    height: 19.5rem !important;
  }
}
@media only screen and (max-width: 18.75em) {
  .logo__footer__description, .logo__header__description {
    font-size: 2.9rem;
    margin-right: 1.7rem;
  }
  .logo__footer__borderbox, .logo__header__borderbox {
    width: 17rem !important;
    height: 17rem !important;
  }
}

/** border boxes **/
.borderbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 38rem;
  height: 38rem;
  transform: rotate(45deg);
}
.borderbox--1, .borderbox--2 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d0a348;
}
.borderbox--1::after, .borderbox--2::after {
  content: "";
  position: relative;
  width: 98%;
  height: 98%;
  background-color: black;
}
.borderbox--1 {
  width: 100%;
  height: 100%;
}
.borderbox--2 {
  width: 94%;
  height: 94%;
}

.img-borderbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 60rem;
  height: 60rem;
  transform: rotate(45deg);
}
@media only screen and (max-width: 75em) {
  .img-borderbox {
    position: static;
  }
}
.img-borderbox--1, .img-borderbox--2, .img-borderbox--3 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-borderbox--1 {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #8d6e30 20%, #d0a348, #e4bf67, #f2d978, #fff7da, #f2d978, #e4bf67, #d0a348, #8d6e30 80%);
}
.img-borderbox--2 {
  width: 85%;
  height: 85%;
  background-color: #1e1e1e;
}
.img-borderbox--3 {
  overflow: hidden;
  background-color: #000;
  width: 75%;
  height: 75%;
  border: 0.5rem solid #d0a348;
}
.img-borderbox--imgholder {
  min-width: 145%;
  height: 145%;
  transform: rotate(-45deg);
}
.img-borderbox--black-bg .img-borderbox--2, .img-borderbox--black-bg .img-borderbox--3 {
  background-color: #000;
}

.stream__img-borderbox--imgholder {
  background-color: #1e1e1e;
}

.contact__img-borderbox--2,
.yours-truly__image-borderbox--2 {
  background-color: #000;
}

/** angle edge skew boxes **/
.skewbox {
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: -40rem;
}
.skewbox--1, .skewbox--2 {
  width: 100%;
  height: 40rem;
}
.skewbox-upward {
  top: -6rem;
}
.skewbox-upward--1 {
  transform: skewY(10deg);
}
.skewbox-upward--2 {
  transform: skewY(-10deg);
}
.skewbox-upward__about--1, .skewbox-upward__about--2, .skewbox-upward__stream--1, .skewbox-upward__stream--2 {
  background-color: #1e1e1e;
}
.skewbox-upward__stream {
  top: -5vw;
}
.skewbox-downward {
  top: -7rem;
}
.skewbox-downward--1 {
  transform: skewY(-10deg);
}
.skewbox-downward--2 {
  transform: skewY(10deg);
}
.skewbox-downward__music--1, .skewbox-downward__music--2 {
  background-color: #000;
}

/** links **/
.inline-link {
  display: inline-block;
  transition: all 0.4s;
}
.inline-link::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 0;
  height: 0;
  box-shadow: 0 0 10rem 5rem #d0a348;
  opacity: 0;
  margin-left: -25%;
}
.inline-link, .inline-link:visited, .inline-link:link {
  color: #d0a348;
  font-family: "Teko", sans-serif;
  font-size: 1.9rem;
}
.inline-link:hover {
  transform: scale(1.2) rotate(-10deg);
  color: #f2d978;
}
.inline-link:hover::after {
  opacity: 1;
}
.inline-link:active {
  transform: scale(1) rotate(-10deg);
}

/** header under line **/
.header-2 {
  position: relative;
  transform: rotate(-10deg) translateY(-15rem);
  margin-bottom: 2rem;
}
.header-2::before, .header-2::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 0.4rem;
  width: 100%;
  background-color: #fff;
}
.header-2::after {
  bottom: 1rem;
}
@media only screen and (max-width: 37.5em) {
  .header-2 {
    margin-left: 2rem;
  }
}

.music__header::after,
.contact__header::after,
.featured__header::after {
  left: -79%;
}
.music__header::before,
.contact__header::before,
.featured__header::before {
  left: -82%;
}

@media only screen and (max-width: 37.5em) {
  .music__header,
  .contact__header,
  .stream__header,
  .featured__header {
    line-height: 1;
    padding-bottom: 2rem;
  }
  .music__header::after,
  .contact__header::after,
  .stream__header::after,
  .featured__header::after {
    left: -17%;
  }
  .music__header::before,
  .contact__header::before,
  .stream__header::before,
  .featured__header::before {
    left: -20%;
  }
}

.stream__header::after {
  left: -17%;
}
.stream__header::before {
  left: -20%;
}
@media only screen and (max-width: 37.5em) {
  .stream__header {
    margin-left: 2rem !important;
  }
}

/** lists **/
.list {
  list-style-type: none;
  transition: all 0.4s;
}
.list__svg {
  fill: url(#gradient-start) #d0a348;
}
.list__item:not(:last-child) {
  margin-bottom: 0.5rem;
}
.list__link {
  transition: all 0.4s;
  background-image: linear-gradient(to right, #8d6e30 20%, #d0a348, #e4bf67, #f2d978, #fff7da, #f2d978, #e4bf67, #d0a348, #8d6e30 80%);
  background-size: 100%;
  background-position: 0 0;
  text-decoration: none;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
.list__link, .list__link:visited, .list__link:link {
  color: #d0a348;
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
}
.list__link:hover {
  background-position: 20rem 0;
}
.list__bullet__link, .list__contact__link {
  font-size: 2.2rem;
}
.list__bullet {
  margin-bottom: 2rem;
}
.list__bullet__link::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #d0a348;
  transform: rotate(45deg);
  margin-right: 2rem;
  margin-bottom: -0.2rem;
}
.list__bullet__featured {
  margin-top: -5rem;
}
.list__socialmedia__link {
  font-size: 3.8rem;
}
.list__socialmedia__svg {
  margin-right: 1.5rem;
  width: 4rem;
  height: 4rem;
  margin-bottom: -1rem;
}
.list__socialmedia__svg--soundcloud {
  width: 6rem;
  height: 6rem;
}
.list__socialmedia__svg--twitch {
  width: 4rem;
  height: 4rem;
}
@media only screen and (max-width: 18.75em) {
  .list__socialmedia__stream__link {
    font-size: 3.5rem;
  }
}
.list__nav {
  width: 100%;
  display: flex;
  justify-content: center;
}
.list__nav__item:not(:last-child) {
  margin-right: 5rem;
}
.list__nav__svg {
  transition: all 0.3s;
  width: 2.8rem;
  height: 2.8rem;
}
.list__nav__svg:hover {
  transform: rotate(-10deg) scale(1.2);
}
@media only screen and (max-width: 30em) {
  .list__nav__item:not(:last-child) {
    margin-right: 3rem;
  }
}
.list__nav__footer__item:not(:last-child) {
  margin-right: 2.3rem;
}
.list__nav-main__svg {
  width: 2rem;
  height: 2rem;
}
.list__contact__link {
  font-size: 3rem;
}
.list__contact__svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
  margin-bottom: -0.5rem;
}
@media only screen and (max-width: 30em) {
  .list__contact__link {
    font-size: 2rem;
  }
}

/** button **/
.button {
  position: relative;
  transition: all 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 5rem;
  background-image: linear-gradient(to right, #8d6e30 20%, #d0a348, #e4bf67, #f2d978, #fff7da, #f2d978, #e4bf67, #d0a348, #8d6e30 80%);
  background-position: right;
  background-size: 350%;
  padding: 1rem 1.5rem;
}
.button, .button:visited, .button:link {
  color: #fff;
  text-decoration: none;
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
}
.button:hover, .button:active {
  background-position: left;
}
.button::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 114%;
  height: 130%;
  border: 2px solid #d0a348;
}
.button--small {
  width: 10.5rem;
  height: 4.5rem;
}

/** decorative bottom border **/
.decorative-bottom-border {
  position: relative;
  width: 100%;
  height: 88rem;
  top: -99.1rem;
  margin-bottom: -100rem;
  z-index: 1;
}
.decorative-bottom-border__line {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #d0a348;
  display: flex;
  justify-content: center;
  align-items: top;
  margin-top: 0.5rem;
}
.decorative-bottom-border__line, .decorative-bottom-border__line-inside--03 {
  background-color: #d0a348;
}
.decorative-bottom-border__line-inside--03 {
  height: 97.6%;
}
.decorative-bottom-border__line-inside, .decorative-bottom-border__line-inside--02, .decorative-bottom-border__line-inside--03, .decorative-bottom-border__line-inside--04 {
  position: absolute;
  width: 100%;
  clip-path: polygon(0% 10%, 50% 0, 100% 10%, 100% 50%, 100% 90%, 50% 100%, 0% 90%);
}
@media only screen and (max-width: 37.5em) {
  .decorative-bottom-border__line-inside, .decorative-bottom-border__line-inside--02, .decorative-bottom-border__line-inside--03, .decorative-bottom-border__line-inside--04 {
    clip-path: polygon(0% 5%, 50% 0, 100% 5%, 100% 50%, 100% 95%, 50% 100%, 0% 95%);
  }
}
.decorative-bottom-border__line-inside, .decorative-bottom-border__line-inside--02, .decorative-bottom-border__line-inside--04 {
  background-color: #000;
}
.decorative-bottom-border__line-inside {
  height: 90%;
}
.decorative-bottom-border__line-inside--02 {
  height: 98.5%;
}
.decorative-bottom-border__line-inside--04 {
  height: 97.3%;
}
.decorative-bottom-border__bookings {
  height: 88rem;
}
.decorative-bottom-border__bookings__line {
  clip-path: polygon(0% 10%, 50% 0, 100% 10%, 100% 50%, 100% 90%, 50% 100%, 0% 90%);
}
@media only screen and (max-width: 37.5em) {
  .decorative-bottom-border__bookings__line {
    clip-path: polygon(0% 5%, 50% 0, 100% 5%, 100% 50%, 100% 95%, 50% 100%, 0% 95%);
  }
}
@media only screen and (max-width: 56.25em) {
  .decorative-bottom-border__bookings {
    height: 85rem;
    top: -95rem;
    margin-bottom: -98rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .decorative-bottom-border__bookings {
    height: 110rem;
    top: -118rem;
    margin-bottom: -120rem;
  }
}

/** soundcloud-player **/
.soundcloud-player:not(:last-child) {
  margin: 0 0 2rem 0;
}

/** fadeup text bodies **/
.fade-up-paragraphs__p--01 {
  opacity: 0;
  transform: translateY(-1rem);
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation: fadeup 2s 1s ease-out forwards;
}
.fade-up-paragraphs__p--02 {
  opacity: 0;
  transform: translateY(-1rem);
  animation-delay: 1.5s;
  animation-timing-function: ease-out;
  animation: fadeup 2s 1.5s ease-out forwards;
}
.fade-up-paragraphs__p--03 {
  opacity: 0;
  transform: translateY(-1rem);
  animation-delay: 2s;
  animation-timing-function: ease-out;
  animation: fadeup 2s 2s ease-out forwards;
}
.fade-up-paragraphs__p--04 {
  opacity: 0;
  transform: translateY(-1rem);
  animation-delay: 2.5s;
  animation-timing-function: ease-out;
  animation: fadeup 2s 2.5s ease-out forwards;
}

/** slide in text bodies (to left) **/
.slide-in-body--01 {
  animation: slideToLeft 2s 0.2s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}
.slide-in-body--02 {
  animation: slideToLeft 2s 0.5s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}

/** slide in text bodies (to right) **/
.slide-in-body__right--01 {
  animation: slideToRight 2s 0.2s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}
.slide-in-body__right--02 {
  animation: slideToRight 2s 0.5s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}

/** slide up bodies **/
.slide-up--01 {
  opacity: 0;
  transform: translateY(-1rem);
  animation-delay: 0.2s;
  animation-timing-function: ease-out;
  animation: fadeup 2s 0.2s ease-out forwards;
}

/** grids **/
.container {
  display: grid;
  grid-template-rows: 10rem repeat(2, maxcontent) 20rem;
  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}

.banner,
.tour-banner,
.nav-main,
.header,
.main,
.footer {
  grid-column: 1/-1;
}

.nav-main,
.tour-banner {
  grid-row: 1;
}

.header {
  grid-row: 1/2;
}

.main {
  grid-row: 3;
}

.footer {
  grid-row: 4;
}

/** all sections **/
body {
  overflow-x: hidden;
  width: 100%;
  background-color: #1e1e1e;
}

.main {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
}

.main-section__container {
  position: relative;
  margin: 0 auto;
  max-width: 140rem !important;
  padding: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .main-section__container {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
@media only screen and (max-width: 30em) {
  .main-section__container--padding-fix {
    padding: 0;
    margin-bottom: -8rem;
    margin-top: 0 !important;
  }
}
.main-section__media-kit {
  overflow-x: hidden;
}

.section__header {
  position: relative;
  z-index: 1;
}

/** header **/
.header {
  /*&__media-kit {
      position: relative;
      //z-index: 1;
      min-height: 110vh;

      display: flex;
      justify-content: center;
      align-items: center;

      &::before {
          content: "";
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          z-index: -1;
          top:0;
          right: 0;
          background-image: url(../img/media-kit/dj-nikka-t_hero-image-gradient_large.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: top center;
      }

      &::after {
          content: "";
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          z-index: -2;
          top:0;
          right: 0;
          background-color: black;
      }

      &__content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          text-align: center;
          max-width: 47rem;
          padding: 0 0 25% 0;
      }
      &__logo {
          margin: 20rem 0 0 0;
      }
      &__button {
          margin-bottom: 5rem;
      }

      @include respond(tab-port) {
          &__logo {
              width: 100%;
          }
      }
  }*/
}
.header__main {
  height: 110vh;
  background-color: #000;
  margin-bottom: -5vw;
  min-height: 72rem;
}
.header__main::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-image: url(../img/nikka-t_02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.4;
}
@media only screen and (max-width: 75em) {
  .header__main::after {
    background-image: url(../img/nikka-t_02_med.jpg);
    background-position: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .header__main::after {
    background-image: url(../img/nikka-t_02_small.jpg);
  }
}
@media only screen and (max-width: 75em) {
  .header__main {
    min-height: 90rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .header__main {
    min-height: initial;
  }
}
@media only screen and (max-height: 46.25em) {
  .header__main {
    min-height: 90rem;
  }
}

/** about **/
.about {
  margin-bottom: 15rem;
}
.about__content {
  display: flex;
}
.about__content > * {
  width: 100%;
}
.about__copy {
  margin-left: 5rem;
  margin-top: 5rem;
}
.about__img {
  position: relative;
  left: -15rem;
  top: -5rem;
}
.about__img-borderbox--imgholder {
  background-image: url(../img/nikka-t_03.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}
.about__featured-in {
  margin-top: 18rem;
}
.about__iframe {
  margin-top: 5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .about__iframe {
    margin-bottom: -5rem;
  }
}
@media only screen and (max-width: 30em) {
  .about__iframe {
    margin-bottom: -10rem;
  }
}
@media only screen and (max-width: 18.75em) {
  .about__iframe {
    margin-bottom: -20rem;
  }
}
.about__more-streams {
  margin: 18rem 10rem 0 10rem;
}
@media only screen and (max-width: 30em) {
  .about__more-streams {
    margin: 18rem 0 0 0;
  }
}
@media only screen and (max-width: 75em) {
  .about {
    margin-bottom: 10rem;
  }
  .about__content {
    flex-direction: column;
  }
  .about__copy {
    order: -1;
    margin: 0 auto;
    position: relative;
    margin-bottom: 5rem;
    z-index: 2;
  }
  .about__img {
    position: static;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    z-index: 1;
    margin-top: 8rem;
  }
  .about__img-borderbox {
    width: 45rem;
    height: 45rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .about__img-borderbox {
    width: 40rem;
    height: 40rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .about__img {
    margin-top: 4rem;
  }
  .about__img-borderbox {
    width: 30rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 30em) {
  .about__img {
    margin-bottom: 2rem;
  }
  .about__img-borderbox {
    width: 22rem;
    height: 22rem;
  }
}
@media only screen and (max-width: 18.75em) {
  .about__img-borderbox {
    width: 17rem;
    height: 17rem;
  }
}

/** music **/
.music {
  background-color: #000;
  padding-bottom: 20rem;
}
.music__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.music__content > * {
  width: 100%;
}
.music__content--1 {
  margin-right: 5rem;
}
.music__content--2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.music__content--2__img {
  position: absolute;
  z-index: 2;
}
.music__tour {
  margin-top: 10rem;
}
.music__tour__container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.music__tour__flyer {
  width: 100%;
  max-width: 75rem;
}
@media only screen and (max-width: 56.25em) {
  .music__tour {
    margin-top: 50rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .music--video__container {
    padding-top: 20rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .music--video__container {
    padding-top: 30rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .music__header {
    margin-top: 5rem;
    margin-bottom: -2rem;
  }
  .music__content {
    flex-wrap: wrap;
  }
  .music__content--1 {
    margin: 0 0 30rem 0;
  }
  .music__content--2 {
    z-index: 1;
  }
  .music__list__bullet, .music__list__socialmedia {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .music__header {
    margin-bottom: -6rem;
  }
  .music__content--1 {
    margin-bottom: 20rem;
  }
  .music__content--2 {
    margin-bottom: -11rem;
  }
  .music__content--2__img {
    width: 38rem;
  }
  .music__list__bullet, .music__list__socialmedia {
    width: 100%;
  }
  .music__borderbox {
    width: 30rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 30em) {
  .music__content--1 {
    margin-bottom: 12rem;
  }
  .music__content--2__img {
    width: 27rem;
  }
  .music__borderbox {
    width: 20rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 18.75em) {
  .music__content--2__img {
    width: 25rem;
  }
  .music__borderbox {
    width: 18rem;
    height: 18rem;
  }
}

/** stream **/
.stream {
  margin-bottom: 10rem;
}
.stream__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stream__img {
  position: absolute;
  left: 0;
  z-index: 1;
  margin-top: -18rem;
}
.stream__list {
  margin-top: 5rem;
  position: relative;
  z-index: 2;
}
.stream__header {
  text-align: center;
  margin-left: 50rem;
  margin-top: 8rem;
}
@media only screen and (max-width: 56.25em) {
  .stream {
    margin-bottom: 5rem;
  }
  .stream__img {
    transform: scale(0.7);
    left: -15rem;
    margin-top: -10rem;
  }
  .stream__header {
    margin-left: 0;
    z-index: 2;
    margin-top: 15rem;
    margin-bottom: -5rem;
  }
  .stream__img-borderbox {
    width: 45rem;
    height: 45rem;
  }
}
@media only screen and (max-width: 30em) {
  .stream__img {
    left: -7rem;
  }
  .stream__img-borderbox {
    width: 30rem;
    height: 30rem;
  }
}

.stream-embed {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}
.stream-embed video {
  width: 100%;
}

@media only screen and (max-width: 87.5em) {
  #twitch-embed {
    width: 85.4rem;
    height: 48rem;
  }
}
@media only screen and (max-width: 56.25em) {
  #twitch-embed {
    width: 64rem;
    height: 36rem;
  }
}
@media only screen and (max-width: 37.5em) {
  #twitch-embed {
    width: 42.6rem;
    height: 24rem;
  }
}
@media only screen and (max-width: 30em) {
  #twitch-embed {
    width: 30rem;
    height: 16.9rem;
  }
}
@media only screen and (max-width: 18.75em) {
  #twitch-embed {
    width: 27rem;
    height: 15.2rem;
  }
}

/** contact **/
.contact {
  background-color: #000;
  padding: 5rem 0;
  margin-bottom: 10rem;
}
.contact__content {
  display: flex;
  justify-content: center;
}
.contact__content > * {
  width: 100%;
}
.contact__img {
  margin-top: -20rem;
}
.contact__img-borderbox {
  width: 50rem;
  height: 50rem;
}
.contact__img-borderbox--imgholder {
  background-image: url(../img/nikka-t_01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}
@media only screen and (max-width: 75em) {
  .contact {
    padding-bottom: 0;
  }
  .contact__img {
    margin-top: -15rem;
    margin-right: -10rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .contact {
    padding-top: 10rem;
    margin-bottom: 5rem;
  }
  .contact__content {
    flex-wrap: wrap;
    margin-top: -7rem;
  }
  .contact__img {
    margin-top: 12rem;
    margin-right: auto;
    margin-left: auto;
  }
  .contact__img-borderbox {
    width: 40rem;
    height: 40rem;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .contact__img-borderbox {
    width: 30rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 30em) {
  .contact {
    padding-top: 13rem;
  }
  .contact__content {
    margin-top: -13rem;
  }
  .contact__img {
    margin-top: 8rem;
    margin-bottom: 5rem;
  }
  .contact__img-borderbox {
    width: 22rem;
    height: 22rem;
  }
}
@media only screen and (max-width: 18.75em) {
  .contact__img {
    margin-bottom: 3rem;
  }
  .contact__img-borderbox {
    width: 17rem;
    height: 17rem;
  }
}

/** media-kit-header **/
.media-kit-header {
  position: relative;
  min-height: 110vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /*&__bg-img {
      width: 100%;
      height: 100%;
      position: absolute;
      position: fixed;
      z-index: -2;
      top:0;
      right: 0;
      background-image: url(../img/media-kit/dj-nikka-t_hero-image-gradient_large.jpg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top center;
  }*/
}
.media-kit-header::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  background-image: url(../img/media-kit/dj-nikka-t_hero-image-gradient_large.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}
.media-kit-header::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -3;
  top: 0;
  right: 0;
  background-color: black;
}
.media-kit-header__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 47rem;
  padding: 0 0 25% 0;
}
.media-kit-header__logo-wrapper {
  width: 100%;
  height: 39.4rem;
  margin: 20rem 0 0 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.media-kit-header__logo {
  position: absolute;
}
.media-kit-header__logo--top {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  animation: fadeIn 3.5s 0.5s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}
.media-kit-header__button {
  margin-bottom: 5rem;
}
@media only screen and (max-width: 56.25em) {
  .media-kit-header__logo {
    width: 100%;
  }
  .media-kit-header__logo-wrapper {
    margin: 10rem 0 0 0;
  }
  .media-kit-header__content {
    padding: 0 0 30% 0;
  }
}
@media only screen and (max-width: 30em) {
  .media-kit-header__content {
    padding: 0 0 40% 0;
  }
}

/** bookings **/
.bookings {
  position: relative;
  top: -2.5%;
  z-index: 2;
  clip-path: polygon(0% 10%, 50% 0, 100% 10%, 100% 50%, 100% 90%, 50% 100%, 0% 90%);
  padding: 15% 0 10% 0;
}
@media only screen and (max-width: 37.5em) {
  .bookings {
    clip-path: polygon(0% 5%, 50% 0, 100% 5%, 100% 50%, 100% 95%, 50% 100%, 0% 95%);
  }
}
.bookings::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background-image: url(../img/media-kit/dj-nikka-t-live-02_bg-image-gradient_large.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
}
.bookings::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  background-color: black;
}
.bookings__list {
  display: flex;
  justify-content: space-around;
}
.bookings__list__section {
  opacity: 0;
  transform: translateX(5rem);
}
@media only screen and (max-width: 56.25em) {
  .bookings::before {
    background-image: url(../img/media-kit/dj-nikka-t-live-bg-image-gradient-med_06.jpg);
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: top right;
  }
  .bookings__list__link {
    filter: drop-shadow(0 0 0.75rem #000);
  }
}
@media only screen and (max-width: 37.5em) {
  .bookings {
    padding: 25% 0 10% 0;
  }
  .bookings__content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bookings__list {
    flex-direction: column;
    align-items: start;
  }
}
@media only screen and (max-width: 30em) {
  .bookings {
    padding: 30% 0 10% 0;
  }
}

/** bands **/
.bands {
  position: relative;
  top: -1.5%;
  z-index: 0;
  padding: 7% 0 0% 0;
  clip-path: polygon(0% 0, 50% 0, 100% 0, 100% 90%, 50% 100%, 0% 90%);
}
@media only screen and (max-width: 37.5em) {
  .bands {
    clip-path: polygon(0% 0, 50% 0, 100% 0, 100% 95%, 50% 100%, 0% 95%);
  }
}
.bands::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background-image: url(../img/media-kit/dj-nikka-t-live_bg-image-gradient_large_02.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center left;
}
.bands::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  background-color: #000;
}
.bands__content {
  display: flex;
  flex-flow: wrap;
}
.bands__content__side {
  flex-grow: 1;
}
.bands__content__copy {
  flex-basis: 100%;
  margin-top: 5rem;
  text-align: center;
}
.bands__content__copy__text {
  font-family: "Teko", sans-serif;
  font-size: 3.5rem;
}
.bands__list {
  display: flex;
  justify-content: center;
  gap: 8rem;
}
.bands__list__section {
  opacity: 0;
  transform: translateX(-5rem);
}
@media only screen and (max-width: 56.25em) {
  .bands__list {
    background-image: radial-gradient(#000, transparent 72%);
  }
  .bands::before {
    background-image: url(../img/media-kit/dj-nikka-t-live-bg-image-gradient-med_05.jpg);
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: bottom left;
  }
  .bands__content__side--1 {
    flex-grow: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .bands {
    padding: 15% 0 0% 0;
  }
}
@media only screen and (max-width: 30em) {
  .bands {
    padding: 22% 0 0 0;
  }
  .bands__list {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
}

/** performance-video **/
.performance-video {
  padding: 5% 0 15% 0;
  margin-top: -5rem;
}
@media only screen and (max-width: 56.25em) {
  .performance-video {
    margin-top: -10rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .performance-video {
    padding: 0 0 25% 0;
  }
}
.performance-video__container:not(:first-child) {
  margin-top: 10rem;
}
@media only screen and (max-width: 37.5em) {
  .performance-video__container:not(:first-child) {
    margin-top: 5rem;
  }
}

/** music streams **/
.music-streams {
  position: relative;
  top: -2.5%;
  z-index: 2;
  clip-path: polygon(0% 10%, 50% 0, 100% 10%, 100% 50%, 100% 90%, 50% 100%, 0% 90%);
  padding: 20% 0 10% 0;
}
@media only screen and (max-width: 37.5em) {
  .music-streams {
    clip-path: polygon(0% 5%, 50% 0, 100% 5%, 100% 50%, 100% 95%, 50% 100%, 0% 95%);
  }
}
.music-streams::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background-image: url(../img/media-kit/dj-nikka-t-smoke-colorful_bg-image-gradient_large.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center left;
}
.music-streams::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  background-color: black;
}
.music-streams__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.music-streams__content__players {
  opacity: 0;
  transform: translateY(2rem);
  max-width: 55rem;
}
@media only screen and (max-width: 56.25em) {
  .music-streams::before {
    background-image: url(../img/media-kit/dj-nikka-t-smoke-colorful_bg-image-gradient_med.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top left;
  }
}
@media only screen and (max-width: 37.5em) {
  .music-streams {
    padding: 25% 0 10% 0;
  }
}
@media only screen and (max-width: 30em) {
  .music-streams {
    padding: 30% 0 10% 0;
  }
}

/** book nikka t **/
.book-nikka-t {
  position: relative;
  top: -5%;
  z-index: 1;
  padding: 10% 0 10% 0;
}
.book-nikka-t__list {
  opacity: 0;
  transform: translateX(5rem);
}
.book-nikka-t::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background-image: url(../img/media-kit/dj-nikka-t-live_bg-image-gradient_large_03.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
}
.book-nikka-t::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  background-color: black;
}
@media only screen and (max-width: 56.25em) {
  .book-nikka-t::before {
    background-image: url(../img/media-kit/dj-nikka-t-live_bg-image-gradient_med.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center right;
  }
}
@media only screen and (max-width: 37.5em) {
  .book-nikka-t {
    padding: 18% 0 10% 0;
  }
}
@media only screen and (max-width: 30em) {
  .book-nikka-t {
    padding: 25% 0 10% 0;
  }
  .book-nikka-t__content {
    padding-top: 5rem;
  }
}

/** yours truly **/
.yours-truly {
  position: relative;
  top: -5%;
  z-index: 1;
  overflow: visible;
  background-color: #000;
  padding: 5rem 0;
  margin-bottom: 10rem;
}
.yours-truly__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.yours-truly__content > * {
  width: 100%;
}
.yours-truly__logo {
  width: 100%;
  max-width: 45rem;
}
.yours-truly__img {
  margin-top: -60rem;
}
.yours-truly__img-borderbox {
  width: 50rem;
  height: 50rem;
}
.yours-truly__img-borderbox--imgholder {
  background-image: url(../img/media-kit/dj-nikka-t_yours-truly_img_med.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}
@media only screen and (max-width: 75em) {
  .yours-truly {
    padding-bottom: 0;
  }
  .yours-truly__img {
    margin-top: -15rem;
    margin-right: -10rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .yours-truly {
    padding-top: 10rem;
    margin-bottom: 5rem;
  }
  .yours-truly__content {
    flex-direction: column;
    align-items: center;
    margin-top: -13rem;
  }
  .yours-truly__content__side {
    display: flex;
    justify-content: center;
  }
  .yours-truly__img {
    position: relative;
    z-index: -1;
    margin-top: 12rem;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
  }
  .yours-truly__img-borderbox {
    width: 40rem;
    height: 40rem;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .yours-truly__img-borderbox {
    width: 30rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 30em) {
  .yours-truly {
    padding-top: 13rem;
  }
  .yours-truly__content {
    margin-top: -13rem;
  }
  .yours-truly__img {
    margin-bottom: -2rem;
  }
  .yours-truly__img-borderbox {
    width: 22rem;
    height: 22rem;
  }
}
@media only screen and (max-width: 18.75em) {
  .yours-truly__img-borderbox {
    width: 17rem;
    height: 17rem;
  }
}

/** footer **/
.footer {
  max-width: 140rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.footer__media-kit {
  margin-top: -15%;
  background-color: #1e1e1e;
}
.footer__affiliates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5rem 0;
}
.footer__affiliates__img-holder {
  align-self: center;
}
.footer__affiliates__img {
  max-width: 15rem;
  opacity: 0.4;
  margin: 2rem 2.5rem;
}
.logo__footer {
  position: relative;
  z-index: -1;
  margin: 0 auto;
  margin-top: -5rem;
}

/** svg gradient holder **/
.svg-gradient {
  width: 0;
  height: 0;
}