@font-face {
  font-family: "Helvetica Neue Light";
  font-style: normal;
  font-weight: normal;
  src: local("Helvetica Neue Light"), url("../fonts/HelveticaNeueLight.woff") format("woff"); }
@font-face {
  font-family: "Helvetica Neue Thin";
  font-style: normal;
  font-weight: normal;
  src: local("Helvetica Neue Thin"), url("../fonts/HelveticaNeue-Thin.woff") format("woff"); }
@font-face {
  font-family: "Helvetica Neue Ultrathin";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/HelveticaNeue-Thin.woff") format("woff"); }
@font-face {
  font-family: "Helvetica Neue Ultralight Condensed";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/HelveticaNeue-UltraLigCond.woff") format("woff"); }
@font-face {
  font-family: "gulim";
  font-style: normal;
  font-weight: normal;
  src: local("gulim"), url("../fonts/gulim.ttf") format("ttf"); }
@font-face {
  font-family: "PingFang SC Regular";
  font-style: normal;
  font-weight: normal;
  src: local("PingFang SC Regular"), url("../fonts/PingFangSCRegular.ttf") format("ttf"); }
@font-face {
  font-family: "Helvetica Neue UltraLight";
  font-style: normal;
  font-weight: normal;
  src: local("Helvetica Neue UltraLight"), url("../fonts/HelveticaNeueUltraLight.woff") format("woff"); }
::selection {
  background: none; }

::-moz-selection {
  background: none; }

::-webkit-scrollbar {
  display: none; }

.termsfeed-com---palette-dark .cc-nb-okagree, .termsfeed-com---palette-dark .cc-nb-reject, .termsfeed-com---palette-dark .cc-cp-foot-save {
	background-color: #9a4646 !important;
	color: #ffffff !important;
}
	

body {
  background-color: black;
  width: 100vw;
  overflow-x: hidden; }

.body-block {
  height: 100vh;
  overflow-y: hidden; }

* {
  font-family: "Helvetica Neue Light";
  margin: 0;
  box-sizing: border-box;
  font-weight: lighter; }

.marqueebox {
  width: 100vw;
  z-index: 10;
  margin: 0;
  position: absolute;
  left: 0;
  bottom: 10px; }

.marquee-proto {
  margin: 0;
  width: 100vw;
  overflow: hidden;
  z-index: 10;
  font-size: 1.5vw;
  color: #9a4646;
  display: inline-block; }

.icon {
  position: relative;
  width: 2vw;
  height: 100%;
  fill: #9a4646;
  display: flex;
  align-items: flex-start; }

path {
  stroke-width: 20; }

.icon:hover {
  fill: #ABADB0; }

header {
  position: absolute;
  top: 150vh;
  left: 65%;
  color: #9a4646;
  height: 100%; }
  header nav {
    position: sticky;
    z-index: 19;
    transform-origin: bottom right;
    top: 50vh; }
  header h3 {
    font-size: 4.5vw;
    letter-spacing: 3px; }
  header p {
    text-align: left;
    margin-left: 27%;
    margin-top: 10px; }

.button {
  cursor: pointer; }

.button:hover {
  color: #ABADB0; }

.overlay-container {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden; }
  .overlay-container p {
    color: black; }

span, span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100px;
  height: 4px;
  background-color: #222222;
  transform-origin: center;
  transform: rotate(45deg); }

span:after {
  transform: rotate(-90deg); }

.close {
  position: absolute;
  top: 5vh;
  right: 5vh;
  height: 80px;
  width: 80px;
  opacity: 0;
  z-index: 10; }

.close:hover span, .close:hover span:after {
  background-color: white; }

.overlay-container-active {
  width: 100vw;
  z-index: 20; }

.overlay {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background-color: #9a4646;
  border-radius: 50%; }

.overlay-active {
  z-index: -1;
  transition: 1s;
  transform: scale(50); }

.about {
  height: 100vh;
  width: 100vw;
  opacity: 0;
  position: absolute;
  top: 0px;
  overflow: scroll; }
  .about .container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10%; }
  .about .innercontainer {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
  .about .shutup {
    margin-top: 35px;
    text-align: left; }
    .about .shutup h2 {
      font-size: 3vw;
      line-height: 1; }
  .about .title {
    order: 2;
    padding: 2% 0 2% 15px;
    border-left: 2px solid black; }
    .about .title h1 {
      font-size: 7vw;
      line-height: 0.84;
      font-family: "Helvetica Neue Light";
      font-weight: normal; }
    .about .title h1:nth-child(2) {
      letter-spacing: 0.04em; }
  .about .text {
    order: 1;
    font-size: 14px;
    padding: 20px 0 0 0;
    text-align: justify; }

.music {
  opacity: 0;
  position: absolute; }
  .music .container {
    height: 100vh;
    width: 100vw; }
    .music .container ul.musicNav {
      height: 100vh;
      position: absolute;
      z-index: 50;
      left: 0;
      list-style: none;
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .music .container ul.musicNav li {
        cursor: pointer;
        padding: 5px 0;
        font-size: 3.5vw;
        color: white; }
      .music .container ul.musicNav li:hover {
        color: #ABADB0; }
    .music .container .musicBackground {
      position: absolute;
      left: 40%;
      width: 60vw;
      height: 100vh; }
    .music .container h1 {
      position: absolute;
      font-size: 90vh;
      z-index: -1; }
    .music .container .musicBox {
      position: absolute;
      right: 0;
      width: 60vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 1px solid black;
      background-color: #9a4646; }
      .music .container .musicBox h2 {
        font-size: 5vw; 
		}
		.music .container .musicBox h2 a {
			position: relative;
			z-index: 10000;
		}
    .music .container .releases {
      position: absolute;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .music .container .releases img {
        width: 70%; }
      .music .container .releases ul {
        position: absolute;
        left: 0;
        bottom: 100px;
        list-style: none;
        padding: 20px 20px;
        z-index: 51; }
      .music .container .releases li {
        padding: 5px 0;
        transition: 0.3s;
        transform-origin: left;
        transform: translateX(0px) scale(1);
        font-size: 4.5vw; }
      .music .container .releases li:hover {
        transition: 0.3s;
        transform-origin: left;
        transform: scale(1.2); }
      .music .container .releases a {
        color: black;
        text-decoration: none; }
      .music .container .releases a:hover {
        color: white; }
    .music .container .remixesAndMixes {
      position: absolute;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center; }
      .music .container .remixesAndMixes ul {
        list-style: none;
        padding: 20px 20px;
        z-index: 51; }
      .music .container .remixesAndMixes li {
        padding: 5px 0;
        transition: 0.3s;
        transform-origin: left;
        transform: translateX(0px) scale(1);
        font-size: 2vw; }
      .music .container .remixesAndMixes li:hover {
        transition: 0.3s;
        transform-origin: left;
        transform: scale(1.5); }
      .music .container .remixesAndMixes a {
        color: black;
        text-decoration: none; }
      .music .container .remixesAndMixes a:hover {
        color: white; }
    .music .container .playlists {
      position: absolute;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center; }
      .music .container .playlists ul {
        list-style: none;
        padding: 20px 20px;
        z-index: 51; }
      .music .container .playlists li {
        padding: 5px 0;
        transition: 0.3s;
        transform-origin: left;
        transform: translateX(0px) scale(1);
        font-size: 2vw; }
      .music .container .playlists li:hover {
        transition: 0.3s;
        transform-origin: left;
        transform: scale(1.5); }
      .music .container .playlists a {
        color: black;
        text-decoration: none; }
      .music .container .playlists a:hover {
        color: white; }

.art {
  opacity: 0;
  position: absolute; }
  .art .container {
    height: 100vh;
    width: 100vw; }
  .art video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1; }
  .art #muted {
    height: 100px;
    width: 100px;
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 20; }
  .art .inner-container {
    overflow: hidden;
    position: absolute;
    transform-origin: top;
    top: 93vh;
    padding: 0 46vw 0 5vw;
    opacity: 0.8;
    transition: 1s;
    z-index: 11; }
  .art .text {
    padding: 20px 20px;
    background-color: white; }
  .art .info-active {
    transition: 1s;
    transform: translateY(-100%); }
  .art h3, .art br, .art p, .art a {
    background-color: white;
    text-decoration: none; }
  .art p, .art a {
    font-size: 14px; }
  .art a {
    cursor: pointer;
    color: black;
    text-decoration: none;
    font-size: 12px; }
  .art a:hover {
    color: #ABADB0; }
  .art a:nth-child(even) {
    display: block; }
  .art h3 {
    display: inline-block;
    padding: 20px 20px 20px 20px;
    cursor: pointer; }
  .art .details > * {
    font-size: 12px; }

.contact {
  opacity: 0;
  position: absolute; }
  .contact .container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center; }
    .contact .container .innercontainer {
      z-index: 50; }
    .contact .container .text {
      padding: 20px 10px; }
      .contact .container .text p {
        font-size: 2vw; }
      .contact .container .text a {
        cursor: pointer;
        color: black;
        text-decoration: none; }
      .contact .container .text a:hover {
        color: #ABADB0; }

.impressum {
  opacity: 0;
  position: absolute; }
  .impressum .container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  .impressum h1 {
    margin-bottom: 30px;
    color: black; }
  .impressum .text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 80vw; }
  .impressum p {
    text-align: center; }
  .impressum ul {
    padding-left: 0;
    list-style: none;
    text-align: center;
    color: black; }
  .impressum a {
    cursor: pointer;
    color: black;
    text-decoration: none; }
  .impressum a:hover {
    color: #ABADB0; }

.section-active {
  opacity: 1; }
  .section-active h1, .section-active h2, .section-active p {
    color: black; }

.opener {
  height: 100vh;
  display: flex;
  align-items: center;
  color: #9a4646; }
  .opener .arrow {
    position: absolute;
    top: -100vh;
    z-index: -1;
    opacity: 70%;
    text-align: center;
    padding: 12px;
    margin-bottom: 6px;
    height: 50vh;
    width: 100vw;
    animation-name: arrow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay: 3s; }
    .opener .arrow:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 50%;
      background: white;
      transform: skew(0deg, 6deg); }
    .opener .arrow:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: white;
      transform: skew(0deg, -6deg); }
@keyframes arrow {
  100% {
    top: 150vh; } }
  .opener .intro {
    margin-left: 150px; }
  .opener .title {
    padding-top: 8%;
    padding-right: 100px; }
    .opener .title h1 {
      font-size: 10vw;
      line-height: 0.84;
      font-weight: normal; }
    .opener .title h1:nth-child(2) {
      letter-spacing: 0.04em; }
  .opener .date {
    opacity: 0;
    margin-top: 40px; }
    .opener .date .inline > p {
      display: inline;
      font-size: 8vw;
      line-height: 0.7;
      font-family: "Helvetica Neue UltraLight"; }
  .opener .box {
    display: flex;
    align-items: center;
    margin-top: 30px; }
    .opener .box p {
      display: inline;
      font-size: 3vw;
      line-height: 1;
      font-family: "Helvetica Neue UltraLight"; }
    .opener .box .time {
      opacity: 0;
      margin-right: 5px; }
    .opener .box .city {
      opacity: 0;
      margin: 0;
      margin-right: 20px; }
      .opener .box .city p {
        display: block; }
    .opener .box .bpm {
      opacity: 0; }
      .opener .box .bpm p {
        margin: 0;
        font-size: 6vw;
        line-height: 1;
        font-family: "Helvetica Neue Light"; }
  .opener .icons {
    position: fixed;
    z-index: 15;
    top: 50px;
    right: 30px; }
  .opener .icons > * {
    display: block;
    margin-bottom: 10px; }

.images {
  position: relative;
  width: 100vw;
  height: auto; }
  .images .background {
    padding-top: 20vh; }
    .images .background img {
      display: block;
      width: 100%; }
  .images #zwei {
    width: 60%;
    position: absolute;
    top: 2%;
    left: 40%; }
  .images #drei {
    width: 40%;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 2; }
  .images #vier {
    width: 100vw;
    position: absolute;
    top: 18%;
    left: 0;
    z-index: 0; }
  .images #fuenf {
    width: 40%;
    position: absolute;
    top: 27%;
    left: 50%;
    z-index: 0; }
  .images #sechs {
    width: 40%;
    position: absolute;
    top: 37%;
    left: 20%;
    z-index: 1; }
  .images #sieben {
    width: 50%;
    position: absolute;
    top: 48%;
    left: 40%;
    z-index: 1; }
  .images #acht {
    width: 100vw;
    position: absolute;
    top: 63%;
    z-index: 0; }
  .images #neun {
    width: 40%;
    position: absolute;
    top: 74%;
    left: 40%;
    z-index: 0; }

@media screen and (max-width: 800px) {
  .opener .intro {
    margin-left: 10%; }
  .opener .title h1 {
    font-size: 10vw; }
  .opener .title .inline > p {
    font-size: 8vw; }
  .opener .title p {
    font-size: 8vw; }
  .opener .title .bpm {
    margin-top: 5%; }
    .opener .title .bpm p {
      font-size: 15vw; }

  .close {
    top: 2vw;
    right: 2vw; }

  span, span:after {
    width: 60px; }

  .about .container {
    padding: 5% 10%;
    justify-content: center; }
  .about .innercontainer {
    display: block; }
  .about .title {
    padding: 5% 0 5% 15px;
    margin-bottom: 5%; }
    .about .title h1 {
      font-size: 7vw; }
  .about .text {
    font-size: 1.8vw;
    padding: 0; }
  .about .icons {
    top: 6vw; }

  .music .container ul.musicNav {
    height: auto;
    top: 5%; }
    .music .container ul.musicNav li {
      font-size: 5vw; }
  .music .container img {
    position: absolute; }

  .art .container .inner-container {
    padding: 0 26vw 0 5vw; }

  .icon {
    width: 5vw; }

  .background {
    display: flex;
    flex-direction: column;
    align-items: center; } }
@media screen and (max-width: 650px) {
  header {
    position: absolute;
    top: 70vh;
    left: 45%; }
    header nav {
      position: fixed;
      z-index: 19;
      top: unset;
      bottom: 15vh; }
    header h3 {
      font-size: 6vw;
      letter-spacing: 3px; }

  .music .container .remixesAndMixes li {
    font-size: 3vw; }
  .music .container .playlists li {
    font-size: 3vw; }

  .art .container .inner-container {
    padding: 0 5vw 0 5vw; }

  .opener {
    align-items: flex-start; }
    .opener .intro {
      margin-left: 10%;
      margin-top: 15%; }
    .opener .title h1 {
      font-size: 14vw; }
    .opener .date {
      margin-top: 25px; }
      .opener .date .inline > p {
        font-size: 11vw; }
      .opener .date p {
        font-size: 5vw; }
    .opener .bpm p {
      font-size: 10vw; }
    .opener .box {
      margin-top: 5%; }

  .close {
    top: 2vw;
    right: 2vw; }

  span, span:after {
    width: 60px; }

  .about .container {
    justify-content: center; }
  .about .innercontainer {
    display: block; }
  .about .title {
    padding: 5% 0 5% 15px;
    margin-bottom: 5%; }
    .about .title h1 {
      font-size: 10vw; }
  .about .text {
    font-size: 2.5vw; }
  .about .icons {
    top: 6vw; }

  .icon {
    width: 5vw; }

  .images .background {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0; } }
@media screen and (max-width: 400px) {
  header {
    position: absolute;
    top: 70vh;
    right: 10%; }
    header nav {
      position: fixed;
      z-index: 19; }
    header h3 {
      font-size: 8vw;
      letter-spacing: 3px;
      line-height: 1; }

  .opener {
    display: block; }
    .opener .intro {
      margin-left: 10%; }
    .opener .title h1 {
      font-size: 20vw; }
    .opener .date {
      margin-top: 10%; }
      .opener .date .inline > p {
        font-size: 10vw; }
    .opener .box {
      display: block;
      margin-top: 5%; }
      .opener .box p {
        font-size: 10vw; }
      .opener .box .bpm {
        margin-top: 5%; }
        .opener .box .bpm p {
          font-size: 10vw; }

  .close {
    top: 2vw;
    right: 2vw; }

  span, span:after {
    width: 60px; }

  .marquee-proto {
    font-size: 3vw; }

  .about .container {
    justify-content: center; }
  .about .innercontainer {
    display: block; }
  .about .title {
    padding: 5% 0 5% 15px;
    margin-bottom: 5%; }
    .about .title h1 {
      font-size: 10vw; }
  .about .text {
    font-size: 3.3vw; }
  .about .icons {
    top: 6vw; }

  .icon {
    width: 6vw; }

  .background {
    display: flex;
    flex-direction: column;
    align-items: center; } }