@font-face {
        font-family: FiraSans;
        src: url("fonts/FiraSans-Medium.otf") format: ("opentype");
}

html{
   scroll-behavior: smooth;
} 

span {
   color:#E30A78;
}


iframe {
   filter: drop-shadow(5px 5px 20px #4b122d);
}

body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   background-color: #181e29;
   color: white;
   font-family: "FiraSans", sans-serif;
}

.white {
   background-color: #19181F;
   color: white;
}

.bwhite {
   border: 1px solid white !important;
   color: white !important;
}

.mood {
   background-color: #1B1A21;
   color: white;
}

.violet {
   background-color: #1D1A2F;
   color: white;
   border-color: white !important;
}

.stage {
   width: 100%;
   height: 1200px;
   overflow: hidden;
   background-color: #19181F;
}

.stage-img {
   position: relative;
   top: 0;
   left: 0;
   z-index: 1;
   opacity: 0.3;
}

.stage-img > img {
   width: 100vw;
   height: auto;
   display: block;
}

.stage-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
}

.logo {
   float: left;
   width: 150px;
   padding: 70px 50px;

}

.logo > img {
   width: 100%;
}

.navigation {
   display: block;
   padding: 80px 50px;
   float: right;
}

.navigation > li {
   float: left;
   margin-right: 30px;
   font-size: 24px;
}

.navigation > li > a {
   color: white;
   text-decoration: none;
}
.navigation > li > a:hover {
   text-decoration: underline;
}
.stage-message {
   max-width: 900px;
   margin: 0 auto;
   display: block;
}
.subtitle {
   font-size: 36px;
   margin-top: 20px;
   text-align: center;
}
.rave-logo-big {
   width: 70%;
   margin: 0 auto;
   display: block;
   margin-top: 515px;
}
.stage-title {
   max-width: 80%;
   font-size: 130px;
   margin: 0 auto;
   display: block;
   margin-top: 320px;
}

.rave-logo-big > img{
   width: 100%;
} 

.section {
   display: flex;
   max-width: 100%;
   overflow: hidden;
}

.section-left {
   width: 50%;
   float: left;
   overflow: hidden;
   max-height: 550px;
}
.section-right {
   width: 50%;
   float: right;
   padding: 80px;
}

.section-right > .section-text {
   max-width: 550px;
}
.section-left > img {   
   height: 100%;
   width: 100%;
}

.section-container {
   width: 80%;
   max-width: 1080px;
   padding-top: 100px;
   padding-bottom: 100px;
   margin: 0 auto;
   text-align: center;
}

.section-text {
   font-size: 24px;
   line-height: 1.4;
}

h2 {
   font-size: 48px;
   margin-bottom: 30px;
   line-height: 1;
}

h3 {
   font-size: 32px;
   margin-bottom: 30px;
}

.button > p > a {
   border: 1px solid white;
   display: inline-block;
   padding: 15px 30px;
   font-size: 21px;
   color: white;
   text-decoration: none;
   margin-top: 40px;
}

.button > p > a:hover {
   border: 1px solid #E30A78 !important;
   display: inline-block;
   background-color: #E30A78;
   padding: 15px 30px;
   color: white !important;
   text-decoration: none;
}

.products {
   display: flex;
   justify-content: center;
   margin: 0 auto;
   margin-bottom: 50px;
   margin-top: 40px;
   max-width: 1080px;
}

.item {
   width: 33.3%;
   float: left;
}

.card {
   max-width: 100%;
   height: 400px;
   margin: 10px;
   padding: 10px 10px;
   background-color: white;
   filter: drop-shadow(5px 5px 20px #4b122d);
}
.card-image {
   margin: 0 auto;
   overflow: hidden;
   width: 100%;
}

.card-image > img {
   height: 400px;
   display: block;
   width: 100%;
}

.item-description {
   font-size: 21px;
   padding-top: 20px;
}
h4{
   margin-bottom: 10px;
}

.ambassadors {
   margin-top: 50px;
   margin-bottom: 50px;
}

.person {
   width: 33.3%;
   float: left;
   margin-bottom: 50px;
}
.person-image {
   width: 160px;
   height: 160px;
   border-radius: 50%;
   overflow: hidden;
   margin: 0 auto;
}
.person-image > img {
   width: 100%;
   display: block;
}

.footer {
   background-color:#2A254A;
   color: white;
   padding-top: 70px;
   padding-bottom: 50px;
   display: block;
   overflow: hidden
}
.footer-content {
   max-width: 960px;
   margin: 0 auto;
}

.footer-content > li {
}

.footer-list > li {
   margin-bottom: 15px;
   font-size: 20px;
   text-align: center;
}

.music {
   padding: 60px;
}

@media only screen and (max-width: 600px) {
   h2 {
      font-size: 28px;
      text-align: left;
   }

   #verein {
      padding-bottom: 100px;
   }

   h3 {
      font-size: 24px;
      text-align: left;
   }
   .card {
      height: 70vw;
   }
   .card-image {
      height: 70vw;
   }
   .section {
      padding-left: 10px;
      padding-right: 10px;
      display: block;
   }

   .rave-logo-big {
      margin-top: 120px;
   }

   .stage {
      max-height: 300px;
   }

   .stage-img > img {
      height: 300px;
   }

   .button > p > a {
      width: 80%;
   }
   .section-container {
      padding-top: 60px;
      padding-bottom: 60px;
   }
   .section-text {
      text-align: left;
      font-size: 20px;
   }

   .navigation{
      display: none;
   }
   .products {
      display: block;
   }
   
   .music {
      padding: 40px 0 0 0;
   }

   .item {
      width: 100%;
      margin: 0 auto;
      float:none;
      margin-bottom: 30px;
   }
   .ambassador {
      display: block;
   }
   .person {
      width: 50%;
      margin: 0 auto;
      margin-bottom: 30px;
   }
   .person-image {
      width: 100px;
      height: 100px;
   }

   .stage-title {
      font-size: 80px;
   }
   .section-left {
      width: 100%;
      float: none;
      clear: both;
   }

   .section-right{
      width: 80%;
      margin: 0 auto;
      text-align: center;
      padding: 60px 40px;
   }
   .section-left > img {   
      width: 100%;
   }
   .mood {
      padding: 0;
   }
   .footer {
      padding-left: 30px;
      padding-right: 30px;
   }
   .footer-content > li {
      float: left;
      width: 100%;
   }
   .footer-list {
      width: 100%;
   }
}

@media only screen and (max-width: 768px) {
   .desktop {
      display: none;
   }
   .navigation {
      min-width: 0;
      width: 50px !important;
   }


}