:root {
  --white: #ffffff;
  --grey: #cccccc;
  --purple: #b4afff;
  --dark-purple: #d5d6f4;
}

@font-face {
    font-family: 'Andale Mono';
    src: url('../fonts/AndaleMono.eot');
    src: url('../fonts/AndaleMono.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AndaleMono.woff2') format('woff2'),
        url('../fonts/AndaleMono.woff') format('woff'),
        url('../fonts/AndaleMono.ttf') format('truetype'),
        url('../fonts/AndaleMono.svg#AndaleMono') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
  background-color: #fff;
  font-family: 'Hind';
  font-family: aktiv-grotesk, sans-serif;
  color: var(--white);
  background-color: var(--grey) !important;


}

#index-body {
  width: 100% !important;
  overflow: hidden;
  padding: 0px !important;
  margin: 0px !important;
}

a {
  color: #c49a6a;
  color: #333;
  text-decoration: none;
  //text-decoration: underline;
}

a:hover {
  text-decoration: none;
  color: #000;
}

iframe {
  background-color: var(--grey);
}

#main {
  height: 100vh;
}

.row {
  margin: 0px;
}

#content-wrapper {
  margin: 10px;
  position: relative;
  width: 100vw;
  height: 100vh;
  //border: 1px solid green;
}

#page-wrap {
  position: absolute;
  width: 100%;
  height: 100vh;

  top: 0px; left: 0px;
  overflow: scroll;
}


svg {
  position:absolute;
  top: -10px; left: -10px;
  display: none;
  pointer-events: none;
  }

.over {
  fill: var(--grey);
  //clip-path: url(#clip);
  pointer-events: painted;
  }

.menu {
  position: absolute;
  left: 0px;
  top: 0px;
  padding-top: 20px;
  padding-left: 20px;
  max-width: 300px;
}

.menu-item {
    overflow: hidden;
    line-height: 1;

    display: inline-block;
    margin-bottom: -10px;
}

.menu-item a {
  line-height: 1em;
  display: inline-block;
  font-family: aktiv-grotesk, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 7em;
  color: var(--white);
  padding: 0px !important;

  margin: 0px;
  margin-top: -20px;
  position: relative;
  text-decoration: none !important;
}

/*.menu .active, .menu a:hover {
  text-decoration: underline;
  text-decoration-line: underline;
  text-decoration-thickness: 13px;
}*/

.menu .active::after,
.menu a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px; /* Abstand zum Text; passe an, falls nötig */
  width: 100%;
  height: 15px; /* Dicke der „Unterstreichung“ */
  background-color: #fff; /* Setzt die Farbe der Unterstreichung auf die Textfarbe */
  //z-index: -1; /* Liegt hinter dem Text */
}

.marquee {

  z-index: 1;
  fill: rgba(180,175,255,0.5);
  font-family: aktiv-grotesk, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12em;
  //line-height: 1em;
  //padding-left: 20px;
  //display: block;
  //min-width: 1000%;
  text-transform: uppercase;
}

.small {
  z-index:1001;
  fill: green;
}

#hamburger {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1010;
  text-align: right;
}

#hamburger img {
  width: 70px;
}

#hamburger-colapse {
  display: none;
  padding-top: 20px;

}

#hamburger-colapse a {
  color: var(--white);
  font-family: aktiv-grotesk, sans-serif;
  font-size: 2em;


}

.flying-icon {
  position: absolute;
  z-index: 1010;
  cursor: pointer;


}
.flying-icon img  {
  height: 70px;
}
.flying-icon img:hover  {
  height: 90px;
}

@keyframes pulse {
	0% {
		transform: scale(0.80);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.80);
	}
}

@keyframes rotateImage {
  0% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}

#info {
  top: 50%;
  left: 10%;
}

#shopping {
  top: 5%;
  left: 52%;
}

#shopping img {
    height: 50px;
}

#shopping img:hover  {
  height: 70px;
}

#contact {
  top: 65%;
  left: 15%;
}

#sound {
  top: 7%;
  left: 45%;
}

#radio {
  top: 65%;
  right: 3%;
}

.overlay-slide {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  //background-color: var(--grey);

  background-image: url('../../../../uploads/2023/06/bobble_grau_1.png');
  background-repeat: no-repeat;

  background-size: 110vw 120vh;
  background-size: 120vw 133vh;
  //background-size: contain;
  background-position: -5vw -8vh;
  background-position: -8vw -12vh;

  //z-index: 1;
  //padding: 50px;
  padding-bottom:200px;
  display: none;
  overflow-y: scroll;

  font-family: 'Andale Mono';
}

#shop-slide {
  padding: 0px;
  max-height: 100vh;
  overflow-y: hidden;
  z-index: 100000;
  background-image: none;
  background-color: rgba(204,204,204,1) !important;
}

#shop-slide-close {
  position: absolute;
  z-index:2001;
  right: 20px;
  top: -80px;
}


.overlay-close-icon {
  margin-top: 100px;
  width: 30px;
}

.radio-big-overlay {
  max-width: 400px;
  margin-left:150px;
}

#radio-slide-close img  {
  margin-top: 200px;
  margin-bottom: -50px;
  margin-right:300px;
}

#radio-overlay-skip {
  display: block;
  margin-left: 150px;
}

#radio-toggle {
  cursor: pointer;
  max-width: 37%;
}

#radio-toggle:hover {
  //max-width: 37%;
}

.fa-close {
  color: #fff;
  display: block;

}

/* ARTIST OVERVIEW */

#backdrop-artist-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(180,175,255,0.5);
  //display: none;
  z-index:-10;
  //-webkit-backdrop-filter: grayscale(100%);
}

.artist-list {
  padding-top: 250px;
}

.artist-link {
  position:relative;

  color: var(--dark-purple);
  font-size: 3em;
  line-height: 1em;
  text-decoration: underline;
  font-family: 'Andale Mono';
  display: block;

}

.artist-link:hover {
  color: #fff;
}

/* ARTIST SINGLE */

h2 {
  font-family: 'Andale Mono';
  font-size: 3em;
  margin-left: -2px;
  color: var(--dark-purple)
}

.pagination {
  position: absolute;
  top: 20%;
}

#pagination-prev {
  right: 15%;
}
#pagination-next {
  top: 20%;
  right: 10%;
}

.artist_col_headline_description {
  padding: 0px;
  padding-top: 200px;
  margin: 0px;
  padding-right: 20px
}

.artist-text {
  font-family: 'Andale Mono';
  font-size: 1.2em;
  line-height: 1.2em;
  padding-left: 40px;
  color: var(--dark-purple)
}

.artist_col_image_personal {
  padding: 20px;
  margin: 0px;
}

.artist-personal {
  padding-top: 10px;
  color: #333;
  font-family: 'Andale Mono';
  font-weight: bold;
  font-size: 0.7em;
  //letter-spacing: 0.1em !important;
}

.artist-gallery-img {
  position: absolute;
  max-height: 200px;
  filter: opacity(50%);
  cursor: pointer;
}

.artist-gallery-img:hover {
  filter: opacity(100%);
  //max-height: 500px;
  z-index: 1003
}

#gallery-overlay {
  padding: 200px;
  padding-top: 0px;
  padding-bottom: 5vh;
  display: none;
  position: fixed;
  z-index: 1100;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}

#gallery-overlay img {
  max-height: 79vh;
  margin: 0 auto;
}

#galler-overlay small {
  display: block;
  margin: 0 auto;
}

#gallery-overlay .gallery-close-icon {
  margin-top: 20px;
  width: 30px;
}

.artist-col-video {
  padding-top: 50px;
  font-family: 'Andale Mono';
  color: #333;
  padding-bottom: 150px;
}

/* RELEASE OVERVIEW */

.release-col {
  margin-left: 230px;
  padding-top: 250px;
  padding-bottom: 200px;
}

.release-img-container {
  position: relative;
  cursor: pointer;

}

.release-img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .1s ease;
  backface-visibility: hidden;
}

.release-img-text {
  transition: .1s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Andale Mono';
  font-size: 3em;
  text-decoration: underline
}

.release-img-container:hover .release-img {
  opacity: 0.3;
}

.release-img-container:hover .release-img-text {
  opacity: 1;
}

.release-img-text {

  color: white;
  font-size: 16px;
  //padding: 16px 32px;
}

/* RELEASE SINGLE */

.release-wrapper {
  background-color: #ffa890;
}

.release-wrapper h2 {
  color: #333;
}

.release-col-img {
  padding: 40px;
  padding-top: 160px;
  margin: 0px;
}

.release-col-text {
  padding: 0px;
  padding-top: 200px;
  margin: 0px;
  color: #333
}

.release-text {
  font-family: 'Andale Mono';
  font-size: 1.2em;
  line-height: 1.2em;

  color: #333;
}

.release-tracklist {
  padding-top: 10px;
  color: #333;
  font-family: 'Andale Mono';
  font-weight: bold;
  font-size: 0.7em;
}

.releas-artist-link {
  color: var(--grey);
}

.releas-artist-link:hover {
  color: #333;
}

.release-col-presse {
  padding-top: 50px;
  font-family: 'Andale Mono';
  color: #333;
}

.release-col-video {
  padding-top: 50px;
  font-family: 'Andale Mono';
  color: #333;
}

/* NEWS OVERVIEW */



#backdrop-news-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(211, 241, 114,0.5);
  //display: none;
  z-index:1;
  //-webkit-backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%);
  backdrop-filter: grayscale(100%);
}

#news-carousel {
  position: relative;
}

#news-carousel .carousel-item {
  //width: 100vw;
  height: 100vh;
  background-size: cover;
}

#news-carousel .news-carousel-title {
  max-width: 600px;
  color: #fff;
  display: block;
  position: relative;
  z-index: 2;
  margin:0 auto;
  margin-top: 30%;
  text-align: center;
}

#news-carousel .news-carousel-title:hover {
  color: #eee;
}

.news-list {
  padding-top: 200px;
  padding-right: 200px;
}

.news-title {
  font-family: 'Andale Mono';
  font-weight: bold;
  font-size: 2.5em;


}

.news-date {
  font-family: 'Andale Mono';
  font-weight: bold;
  font-size: 1.5em;
  color: #fff;
  margin-top: 30px;

}

/* NEWS SINGLE */

.news-wrapper {
  background-color: #d3f172;
}

.news-wrapper h2 {
  color: #333;
}

.news-spacer {
  margin-left: 150px;
}

.news-col-img {
  padding: 40px;
  padding-top: 0px;
  padding-right: 0px;
  margin: 0px;
}

.news-col-text {
  padding: 0px;
  padding-top: 200px;
  padding-left: 45px;
  margin: 0px;
  color: #333;
  font-family: 'Andale Mono';
  font-size: 1.2em;
  line-height: 1.2em;
}

.news-text {
  font-family: 'Andale Mono';

  padding-left: 20px;
  color: #333;
}


#img-1 {
  left: 10%;
  top: 10%;
}
#img-2 {
  left: 4%;
  top: 35%;
}
#img-3 {
  left: 80%;
  top: 50%;
}
#img-4 {
  left: 50%;
  top: 40%;
}
#img-5 {
  left: 60%;
  top: 20%;
}
#img-6 {
  left: 90%;
  top: 30%;
}

@media (max-width: 575.98px) {

 }

 @media (max-width: 575.98px) {

}



@media (max-width: 767.98px) {
  .menu {
    padding-bottom: 50px;
    background-image: url('../../../../uploads/2023/06/bobble_grau_1.png');
    background-size: 100% 110%;
    background-position:-10px 0;

    background-size: 190vw 130%;
    background-position:-115vw -50px;

    background-repeat: no-repeat;
    z-index: 1010;
  }

  .menu-item {
      overflow: hidden;
      line-height: 1;

      display: inline-block;
      //margin-bottom: -10px;
  }

  .menu-item a {
    //line-height: 1em;
    display: block;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 50px;
    color: var(--white);
    padding: 0px !important;

    margin: 0px;
    margin-top: -5px;
    position: relative;
    text-decoration: none !important;
  }

  .menu .active::after,
  .menu a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* Abstand zum Text; passe an, falls nötig */
    width: 100%;
    height: 10px; /* Dicke der „Unterstreichung“ */
    background-color: #fff; /* Setzt die Farbe der Unterstreichung auf die Textfarbe */
    //z-index: -1; /* Liegt hinter dem Text */
  }

  #mobile-menu-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
  }

  svg {
    display: none !important;
 }

/* OVERLAY SLIDES */

.overlay-slide {
  background-image: none;
  background-color: var(--grey);
}

.radio-big-overlay {
  max-width: 300px !important;

}

 /* OVERLAY ICONS*/

 .icon-background-mobile {
   position: absolute;
   //top: 87vh;
   bottom: -2vh;
   left: 0;
   width: 100%;
   //background-color: var(--grey);
   background-image: url('../../../../uploads/2023/06/bobble_grau_1.png');
   background-size: 200% 100%;
   background-position:30% 0;
   background-repeat: no-repeat;
   height: 100px;
   z-index: 1010;
 }

 #info {
   top: auto;
   bottom: 2vh;
   left: 10vw;

 }

#info img {
  max-height: 50px;
}

 #shopping {
   top: auto;
   bottom: 2vh;
   left: 26vw;
 }

 #shopping img {
     max-height: 50px;
 }

 #shopping img:hover  {
   height: 70px;
 }

 #contact {
   top: auto;
   bottom: 2vh;
   left: 52vw;
 }

 #contact img {
   max-height: 50px;
 }

 #sound {
   top: auto;
   bottom: 2vh;
   left: 83vw;
 }

 #sound img {
   max-height: 50px;
 }

 #radio {
   display: none !important;
   top: auto;
   bottom: 2vh;
   left: 75vw;
 }

 #radio img {
   display: none !important;
   max-height: 50px;
 }

/* OVERLAYS */

.radio-big-overlay {
  max-width: 90%;
  margin-left:20px;
}

#radio-slide-close img {
  margin-top: 200px;
  margin-bottom: -50px;
  margin-right:40px;
}

#radio-overlay-skip {
  display: block;
  margin: 0 auto;
}

 /* ARTISTS OVERVIEW */

 .artist-link {
   font-size: 32px !important;
 }

 .artist-list {
   padding: 20px !important;
   padding-top: 200px !important;
 }

 /* RELEASE OVERVIEW */


 .release-col {
   margin-left: 0px;
   padding: 10px;
   padding-top: 200px;
   padding-bottom: 150px;
 }

 .release-img-text-mobile {
   display: block !important;
   color: #fff;
   text-decoration: underline;
   margin-bottom: 20px;
   margin-top: 10px;
   font-family: "Andale mono", sans-serif;
   text-align: center;
 }

 /* RELEASE SINGLE */

 .pagination {
   position: absolute;
   top: 20%;
 }

 #pagination-prev {
   right: 20vw;
 }
 #pagination-next {
   top: 20vh;
   right: 10vw;
 }

 .release-wrapper {
   overflow-x: hidden;
 }

 .release-col-img {
   padding: 20px;
   padding-top: 50px;
 }

 .release-col-text {
   padding-left: 20px;
   padding-right: 20px;
 }

 .release-col-presse {
   padding-top: 50px;
   padding-left: 20px;
   padding-right: 20px;
 }

 .release-col-video {
   padding-top: 50px;
   padding-left: 20px;
   padding-right: 20px;
 }

 /* ARTIST SINGLE */

 .artist_col_headline_description {
   padding: 20px;
   padding-top: 200px;
 }

 .artist-text {
   padding-left: 0px;
 }

 .artist_col_image_personal {

 }

 .artist-col-video {
   padding-bottom: 0px;
 }

 #gallery-overlay {
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 100px;
 }

/* NEWS OVERVIEW */

.news-list {
  padding-top: 200px;
  padding-right: 20px;
  padding-left: 20px;
}

/* NEWS SINGLE */

.news-col-img {
  padding: 20px;
  padding-top: 200px;
  padding-right: 20px;
  margin: 0px;
}

.news-col-text {
  padding: 20px;

}

.news-text {
  font-family: 'Andale Mono';
  padding-left: 0px;
  padding-top: 20px;
  color: #333;
}

.news-text img, .news-text iframe {
  max-width: 100%;
}

}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }