/* 1390px */




/* 1250  Social MEdia Phone */
@media  screen and (max-width: 1250px){


.social_media_phone{
  flex-direction: column;
  align-items: flex-end;
}

}



/* 1080px */


@media  screen and (max-width: 1080px) {

  .social_media_nav{
      max-width: 130px;
      left: 1.5%;
  }





}




/* 950 PX */

@media  screen and (max-width: 950px){


  #kontakt{
      padding: 10px 0.5rem;
  }

  .form_container{
      max-width: 1364px;
      height: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
  
     
      margin: 0 auto;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
      
  
    }



    .form_small{

      width: 100%;
      max-width: 758px;
      min-height: 200px;
     
      background-image: url('../img/bg_form2.jpg');
      
      background-repeat: no-repeat;
      background-position: center;
      background-size:cover;
    }


    #awf-ID33{
      display: -webkit-box !important;
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
      -webkit-box-pack: center !important;
      -webkit-justify-content: center !important;
          -ms-flex-pack: center !important;
              justify-content: center !important;
    }


    .form_info{
      text-align: center;
    }



    

}







/* Mobile */

@media  screen and (max-width: 930px) {

  /* BASE STYLES */

  html{
      font-size: 80%;
  }




/* HEADER BILD */

.desk{
  display: none;
}

.mob{
  display: block;
}

/* HEADER BILD ENDE */


/* NAV */


.main-header {

  min-height: 90px;
 
  }

  .menu-wrap {

  min-height: 90px;
  }


  .menu_container{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
  }

  

    .logo-wrap {
      display: block;
  max-width: 70px;
  
  }

  .logo-wrap-nav{
      display: none;
  }

  
  .main-nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0vh;


      
      -webkit-transition: height .0s ease-out .4s, opacity .2s ease-out .2s, padding-left .2s ease-in 0s;
      
      -o-transition: height .0s ease-out .4s, opacity .2s ease-out .2s, padding-left .2s ease-in 0s;
      
      transition: height .0s ease-out .4s, opacity .2s ease-out .2s, padding-left .2s ease-in 0s;
      opacity: 0;
      
      display: -webkit-box;
      
      display: -ms-flexbox;
      
      display: -webkit-flex;
      
      display: flex;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -webkit-flex-direction: column;

          -ms-flex-direction: column;

              flex-direction: column;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      z-index: 400;
      
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.85);
      -webkit-backdrop-filter: blur(3px);
              backdrop-filter: blur(3px);
      
      padding-left: 100%;
      }


      .space_nav{
display:block;

}



.main-nav span{
  font-size: 16px;
  white-space: nowrap;


}


  .main-nav a{
  
  color: white;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  padding: 20px 0px;
  /* margin: 0 30px; */
  z-index: 10000;


  
  }


  .nav-item:first-of-type {
      margin-top: 5vh;
      } 



  .impr_dat{
      display: block;
      }


      .social_mob{
          display: block;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          /* border-top: 1px solid black; */
        }



        .social_media_nav{
          display: none;
        }

        .social_mob a{
          margin:0 15px;
        }

        .social_mob img{
          max-width: 35px;
        }


        /* Social Media Phone */

        .social_media_phone{
          display: none;
        }

        .social_media_phone_mob{
          display: block;
        }

        .social_media_phone_mob img{
          max-width: 15px;
          margin: 0 15px;
          transition: color 0.3s ease;
          
        }

        .social_media_phone_mob{
          /* color: white; */
          width: 100%;
          max-width: 300px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .social_media_phone_mob a{
          display: flex;
        }





/* HAMBURGER */


/* Hamburger btn */
.drop-trigger {
  /* Changing these will automatically adjust bars */
  height: 34px;
  width: 50px;
  cursor: pointer;
  
  /* For btn bars */
  position: absolute;
  right: 5%;
  top: 35%;
  

  background: rgba(0,0,0,0);
  -webkit-transition: all .1s ease-out 0s;
  -o-transition: all .1s ease-out 0s;
  transition: all .1s ease-out 0s;
  z-index: 450;
  border-width: 0;
  margin-left: auto;
  }

  #nav-tog{
      display: block;
  position: absolute;
  /* top: 45%; */
  /* right: 0; */
  right: 8.2%;
  top: 48%;
  -webkit-transform: scale(4.5, 4);
      -ms-transform: scale(4.5, 4);
          transform: scale(4.5, 4);
  z-index: 10000000;
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  }




  /* Hamburger bars */
  .drop-trigger .btn-bar {
  position: absolute;
  display: block;
  top: 20%;
  left: 50%;
  height: 4px;
  width: 60%;
  -webkit-transition: all .4s ease-in 0s;
  -o-transition: all .4s ease-in 0s;
  transition: all .4s ease-in 0s;
  background: grey;
  margin: 0 auto;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateX(-50%) translateY(-0%) rotate(-0deg);
      -ms-transform: translateX(-50%) translateY(-0%) rotate(-0deg);
          transform: translateX(-50%) translateY(-0%) rotate(-0deg);
  }
  .btn-bar.middle {
  top: 50%;
  -webkit-transform: translateX(-50%)  translateY(-50%) rotate(0deg);
      -ms-transform: translateX(-50%)  translateY(-50%) rotate(0deg);
          transform: translateX(-50%)  translateY(-50%) rotate(0deg);
  }
  .btn-bar.bottom {
  top: calc(80% - 3px);
  }
  
  /* Fills background of nav and is linked to the checkbox toggle */
  .nav-revert {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.5); */
  
  /* backdrop-filter: blur(3px); */
  z-index: 1;
  }

/* =====================
  Mobile Nav open
  ====================== */
  #nav-tog:checked ~ .drop-trigger .btn-bar {
      -webkit-transition-timing-function: ease-out;
           -o-transition-timing-function: ease-out;
              transition-timing-function: ease-out;
      }
      #nav-tog:checked ~ .drop-trigger .btn-bar {
      top: 50%;
      background: white;
      }
      #nav-tog:checked ~ .drop-trigger .btn-bar.top {
      -webkit-transform: translateX(-50%)  translateY(-50%) rotate(-315deg);
          -ms-transform: translateX(-50%)  translateY(-50%) rotate(-315deg);
              transform: translateX(-50%)  translateY(-50%) rotate(-315deg);
      }
      #nav-tog:checked ~ .drop-trigger .btn-bar.middle {
      -webkit-transform: translateX(-50%)  translateY(-50%) rotate(-225deg);
          -ms-transform: translateX(-50%)  translateY(-50%) rotate(-225deg);
              transform: translateX(-50%)  translateY(-50%) rotate(-225deg);
      }
      #nav-tog:checked ~ .drop-trigger .btn-bar.bottom {
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(-225deg);
          -ms-transform: translateX(-50%) translateY(-50%) rotate(-225deg);
              transform: translateX(-50%) translateY(-50%) rotate(-225deg);
      }
      #nav-tog:checked ~ .main-nav {
      -webkit-transition: height .0s ease-in 0s, opacity .2s ease-in 0s, padding-left .23s ease-out .21s;
      -o-transition: height .0s ease-in 0s, opacity .2s ease-in 0s, padding-left .23s ease-out .21s;
      transition: height .0s ease-in 0s, opacity .2s ease-in 0s, padding-left .23s ease-out .21s;
      opacity: 1;
      height: 100vh;
      padding-left: 0%;
      }




      }



/* 660px */

@media  screen and (max-width: 680px){

.kontakt_info{
  flex-direction: column;
}


  .kontakt_info_studio{
  text-align: center;
  order: -1;
}


.kontakt_info_studio{
  margin: 40px 0;

}


.kontakt_info img.logo_kontakt{
  max-width: 100px;
  margin: 40px auto;
  order: -3;
}


.kontakt_info_marketing{
  order: -1;
}


}


      /*  610px*/


      @media  screen and (max-width: 610px){

        /* STUDIO */

        .studio_text{
          display: none;
        }


        .studio_text_mob{
          display: block;
        }


        .studio_text_mob p{
          white-space: normal;
          margin-bottom: 70px;
          text-align: justify;
          hyphens: auto;
        
 
        }






          /* KONTAKT */

          #awf #awf-ID26{
              max-width: none !important;
              padding: 0.5em 20px !important;
          }
      
          #awf #awf-ID27{
              margin: 0px !important;
              max-width: none !important;
              padding: 0.5em 20px !important;
          }

          #awf-ID31{
              padding: 0.5em 20px !important;
              margin: 0px !important;

          }
      
          #awf-ID33{
              display: -webkit-box !important;
              display: -webkit-flex !important;
              display: -ms-flexbox !important;
              display: flex !important;
              -webkit-box-pack: center !important;
              -webkit-justify-content: center !important;
                  -ms-flex-pack: center !important;
                      justify-content: center !important;
              padding: 0.5em 20px !important;
          }

          .form_info{
              text-align: center;
              padding: 0 0 0 10px;
          }


                /* TEXT FORM */

    #awf-ID28{
      /* font-size: ; */
      text-align: center !important;
      padding: 0 !important;
      height: 4rem !important;
    }

    #awf-ID29{
      text-align: center !important;
      padding: 0 !important;
      height: 4rem !important;


    }

  
  

    #awf-ID32{
      text-align: center !important;
      padding: 13px 0 0 0 !important;


    }
      

      
      }




      /* Phone 480 PX */


  @media  screen and (max-width: 480px){

      /* BASE Styles */

      html{
          font-size: 70%;
      }


      /* Studio */

      #studio{
          background-image: url('../img/bg_studio_mob.webp');
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
      }



      .studio_container>h1{
          margin: 50px 0 28px 0; 
       }


       .studio_icons{
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-wrap: wrap;
              -ms-flex-wrap: wrap;
                  flex-wrap: wrap;

          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;

       }






       .studio_icons div{
          width: 40%;
       }
      

       .studio_btns a.btn{
          font-size: 14px;
       }




       /* STUDIO ENDE ---> */


/* PREISE */


.preise_box{

  max-width: 290px;


}

.box_titel{
  margin-top: 10px;
}

.box_link{
  margin-bottom: 10px;
}


       /* KÜNSTLER */


       #kuenstler>h1{
          margin: 50px 0;
        }


        .avatar{
          max-width: 190px;
        }

        .swiper_icons a img{
          max-width: 28px;
        }

        .swiper-slide a{
          font-size: 16px;
        }

        /* KPNSTLER ENDE ---> */




        /* PLAYLIST */

        .playlist{
          padding: 0px 0rem 50px 0rem;
          background-image: url('../img/smoke_artist.webp');
          background-position: -380px;
          background-repeat: no-repeat;
          background-size:cover;
        
         
        }



        /* PLAYLIST */

        .playlist_container {
      
          padding: 0px 10px;
      }


        /* RELEASES */


        #releases{
          padding: 0px 0rem 40px 0rem;
        }

        #releases>h1{
          margin-bottom: 11px;
        }

        .avatar-release{
          max-width: 320px;
        }

        .info_release{
          font-size: 16px;
        }

        .info_release a{
          font-size: 16px;
        }


        /* FOOTER */

        footer a, footer .copyright{
          font-size: 12px;
        }

        footer .copyright{
          font-size: 10px;
          letter-spacing: 1px;
        }

        footer .copyright{
          margin-top: 10px;
          
        }

  }