/*Typography*/
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

*,
*:before,
*:after {box-sizing: border-box;}

@keyframes lazy-kf{
  from {opacity:0;}
  to {opacity:1;}
}
img[loading=lazy] {
  animation: lazy-kf 5s;
}

/*-------------Splashscreen------------*/
#splashscreen {
  height: 100vh;
  background-color: black;
  background-image: url("splash.gif");
  background-repeat: repeat;
  background-size: cover;
}

@media only screen and (max-width: 600px) {
#splashscreen {
 background-repeat:no-repeat;
 background-size: 45vh;
 background-position: 40vw;
 background-position: 0vh;
}
}



/*Website Banner-Logo*/
.logo {
    width: 25vw;
}

@media only screen and (max-width: 600px) {
  .logom {
    width: 55vw;
    padding: 30px 1px;
  }
}

@media only screen and (min-width: 600px) {
  .logom {
    width: 35vw;
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .logo {
    width: 35vw;
    display: none;
  }
}

.topnav .icon {
  display: none;
}


/*--------------------*/
.pfeil {
  position: absolute;
  right:20;
  bottom:20;
}

/* HELL MODE */
button:active,.section{
  background-color: #1A1A1D;
}
/*---------------------Content-Containers--------------------------------------------*/

.header {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    height: 15vh;
    width: 100%; 
    height: 100px; 
    position: fixed;
    top:0;
    left:0;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.418);
    z-index: 1;
    background: #282828;
}

/*-----Welcome----*/
.section1 {
  height: 80vh;
  background: linear-gradient(0.15turn, #423d52, #03729e);
}

@media only screen and (max-width: 600px) {
.section1 {
 height: 100vh;
}
}

.welcome {
    font-size: 50px;
    font-family: 'Caveat', cursive;
    color: white;
    text-shadow: 1px 1px 12px #00000080;
    padding: 6vh;
    text-align: left;
    
}

@media only screen and (max-width: 600px) {
  .welcome {
    text-align: center;
    font-size: 41px;
    padding: 5vw;
    margin-bottom: 0%;
  }
  }

.welcome2 {
  font-size: 35px;
  font-family: 'Spartan', sans-serif;
  color: white;
  text-shadow: 5px 5px 12px #00000080;
  padding: 0vh;
  text-align: left;
}

@media only screen and (max-width: 600px) {
  .welcome2 {
    text-align: center;
    padding: 0vh;
    margin: 0vh;
  }
  }

.welcomeIMGright1 {
  position: relative;
  width: 40vh;
  float: right;
  margin-top: -39vh;
  margin-right: -7vh;
}

@media only screen and (min-width: 1393px) {
  #umbruch1mobil {
    display: none;
  }
}

@media only screen and (max-width: 1050px) {
.welcomeIMGright1 {
  width: 20vh;
}
}



  @media only screen and (max-width: 600px) {
    .welcomeIMGright1 {
      position: absolute;
      width: 31vh;
      float: left;
      margin-top: 3vh;
      margin-left: -15vh;
    }
  }




/*-----Das sind wir----*/
.section2 {
    height: 100vh;
    background-color: #1f2125;
}

/*-----Zahlen----*/
.sec_zahlen {
  height: 40vh;
  background-color: #133f97;
}

.zahlenh2_1 {
  display: inherit;
  display: block;
  font-size: 35px;
  font-family: 'Caveat', cursive;
  color: white;
  text-shadow: 5px 5px 12px #00000080;
  padding: 1vw;
  margin-left: 10vh !important;
}

.zahlenh2_2 {
  display: inherit;
  display: block;
  font-size: 35px;
  font-family: 'Caveat', cursive;
  color: white;
  text-shadow: 5px 5px 12px #00000080;
  padding: 1vw;
  margin-left: 10vh !important;
  float: inherit;
}





.imgsec2 {
  width: 700vw;
}

/*-----Videos----*/
.section3 {
  height: 100vh;
  background-color:#292b30;
}

.section4 {
    height: 100vh;
    background-color:#131313;
}

.podcasts {
  height: 5vh;
  background-color:#1f2125;
}

.spotify1 {
  margin-left: 35vw;
  margin-top: 10vh;
}


.tiktok-embed {
  width: 14px;
  height: 10px;
  padding: 30px;
}




.mitglieder {
    height: 100vh;
    background-color:#2E3239;
  }

.text1 {
    margin-top: 0px;
    text-align: center;
}

.titel2 {
  font-size: 50px;
  font-family: 'Caveat', cursive;
  color: #ffffff;
  text-shadow: 1px 1px 12px #00000080;
  padding: 1px;
  text-align: center;
}

.latestVideoEmbed {
  width: 640px;
  height:360px;
}

/*--------*/
.footer {
  height: 10vh;
  background-color:#2b3d70;
}

.footercp {
  font-family: 'Courier New', Courier, monospace;
  color: white;
  padding: 2px;
  text-align: center;
}
    /*-----Artists------*/
    .artists {
      width: 200px;
      margin-left: 3vh;
      margin-top: 1vw;
      border-radius: 50%;
      box-shadow:  1px 1px 12px #00000080;
      margin: 0 10px; /* Just for spacing between images */
    }

    .slider-container {
      position: relative;
      overflow: hidden;
      width: calc(3 * (220px + 0px)); /* Annehmen, dass jedes Bild 300px Breite hat, 20px für den Abstand */
      margin-left: 50%;
      transform: translateX(-50%);
  }
  
  
  .slider {
      display: flex;
      transition: transform 0.5s ease;
  }
  
  .prev-btn,
  .next-btn {
      position: absolute;
      background-color: transparent;
      border: none;
      font-size: 24px;
      color: white;
      cursor: pointer;
  }
  
  .prev-btn {
      left: 12%;
      margin-top: 13%;
  }
  
  .next-btn {
      right: 12%;
      margin-top: 13%;
  }
  
  .leerartist {
      display: none;
  }
    
  @media only screen and (max-width: 600px) {
    .slider-container {
        width: calc(2 * (170px + 0px)); /* Annehmen, dass jedes Bild 300px Breite hat, 20px für den Abstand */
    }
    .artists {
  width: 150px;
  height: 150px;
    }
    
    .leerartist {
        display: flex;
    }
}


.text3 {
    font-size: 30px;
    font-family: 'Spartan', sans-serif;
    color: #ffffff;
    text-shadow: 1px 1px 12px #00000080;
    padding: 1px;
    margin: 1px !important;
    text-align: center; 
}



/*---------------------Topnav-------------------------*/

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #26292B;
}

.topnav a:hover {
  color: rgb(66, 66, 66);
}

.topnav a.active {
  color: rgb(238, 238, 238);
}

.topnav a,.mobile i {
  margin-left: auto;
  color: #c4c4c4;
  text-align: center;
  padding: 0px 12px !important;
  text-decoration: none;
  font-size: 100%;
  
}

.hamburger,.hamburgerClose{
  float: right;
}

section#hamburgerOverlay {
  display: none;
  height: 100vh;
  width: 100vw;
  background: rgb(66, 66, 66);
  position:sticky;
  text-align: center;
  text-shadow: 5px 5px 12px #00000080;
} 
.hamburgerMenu {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.hamburgerMenu a {
  font-size: 200%;
  text-decoration: none;
  color: #e9e7e7;
  font-family: 'Spartan';
  
}

.mobile {
  height: 5vh;
  margin-top: 2vh;
}

.topnav {
  height: 5vh;
  margin-top: 4vh;
}
.topnav {
  margin-left: auto;
}

.mobile i {
  padding-top: 15% !important;
  font-size: 4vh;
}  

.mobile {
display: block;
}
.mobile img {
width: 50%;
}
.desktop img {
padding: 10px;
width: 25%;
}

.desktop {
display: none;
}

@media screen and (min-width: 1000px) {
.mobile {
  display: none;
}
.desktop {
  display: flex;
}

}


/*------------------------2. Abschnitt Infobereich---------------------------*/
  
.titel3 {
  font-size: 50px;
  font-family: 'Caveat', cursive;
  color: #ffffff;
  text-shadow: 1px 1px 12px #00000080;
  padding: 1px;
  margin: 1px !important;
  text-align: center;
}


.news1 {
  margin-left: 40vw;
  width:  40vh !important;
}



/*------------------------Footer---------------------------*/
.social-icons li {
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
}

.social-icons a {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  word-break: break-all;
}

/*------------------------Artists---------------------------*/

img.artists:hover {
  animation: shake 0.60s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.artistname {
  text-align: center;
  color: white;
  text-decoration: none;
  font-family: 'Spartan', sans-serif;
}

/*------------------------Responsive fuer Handy---------------------------*/

@media only screen and (max-width: 600px) {
  .latestVideoEmbed {
    width: 256px;
    height:144px;
  }
    .news1 {
      size: 30px;
      margin-left: 3vh;
    }

  .welcome2 {
    font-size: 28px;
  }

  .titel2 {
    font-size: 30px;
  }

    .text3 {
        font-size: 20px;
    }

    .prev-btn {
      left: 1%;
      margin-top: 20%;
  }
  
  .next-btn {
      right: 1%;
      margin-top: 20%;
  }
}