* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgba(17, 17, 17, 1.0);
  width:100%;
  margin: 0;
  height: 100%;
  z-index: 0;
  transition: 0;
}

/*_______________________________________________________*/



.content{
  width: 100%;
  position: absolute;
}


.logo{
  height: 10vh;
  bottom: 5vw;
  margin-top: 12vh;
  margin-bottom: 8vh;
}
.logo img{
  max-height: 20vh;
}

.bookinginfo{
  width: 30vw;
  margin-top: 5vh;
}



.bookinginfo p{
  font-weight: 100;
  font-family: alternate-gothic-atf, sans-serif;
  font-size:2vw;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: hsla(10,100,40,1);
  text-align: center;
  color:white;

}

.container {
  max-width: 100%;
}

label{
  font-weight: 500;
  font-family: alternate-gothic-atf, sans-serif;
  font-size:3vw;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: red;
}

.form{
  left: 0;
}

.form-group{
    margin-bottom: 0.0vw;
    transition:all .3s;
    width: 30vw;
}
.form-label{
    display:block;
    opacity:0;
    transition: all .3s;
    margin-bottom: -3vw;
}
.form-control{
    border-width: thin;
    border-color: white;
    border-radius: 0.4vw;
    width:30vw;
    transition:all .6s;
    background-color: rgba(17,17,17,0.1);
    padding: 0 0.5vw 0 0.5vw ;
    border: 1px solid rgba(220,220,200,1);
    border-radius: 12px;
    padding: 5px;
    padding-left: 1vw;


/*FONT     WHILE WRITGING*/

    font-size: 1.1vw;
    color: rgba(150, 100, 0, 1.0);
    font-weight: 500;
    font-family: alternate-gothic-atf, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;

}
.form-control::placeholder{
  /*TEXT FELD SCHRIFT ______ */

  font-weight: 500;
  font-family: alternate-gothic-atf, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: hsla(20, 22%, 70%, 1.0);
  font-size: 1vw;
}
.form-control:focus{

/*BEI EINGABE TEXTFELD*/
    box-shadow:none;
    border-color:var(--font-hover-color);
    outline:none;
    background-color: hsla(100, 100%, 100%, 1.0);
    outline: inherit;
}
.form-group:focus-within{
  /*  transform:scale(1.1);*/
}

.form-control:invalid:focus{
  color: rgba(150, 100, 0, 1.0);

}
.form-control:valid:focus{
    color:black;
}


.btn{

/*BUTTON */
    background-color:  rgba(150, 100, 0, 1.0);
    padding: 0.5vw;
    margin-top: 0.5vw;
    border-radius:0.5vw;
    font-family: alternate-gothic-atf, sans-serif;
    color: white;
    font-size:1vw;
    text-transform:uppercase;
    border: none;
    width: 30vw;
    transition: 0.4s;
    cursor: pointer;

}
.btn:hover{
    border-opacity:1;
    background-color: rgba(200, 150, 50, 1.0);
    color: hsla(200,10,10,1.0);
}

textarea{
    resize:none;
}

.form-invalid{
  outline: 1px solid red !important;
}

.focused > .form-label{
    opacity:1;
    transform:translateX(0px);
}



h3{
  margin-top: 25vw;
  font-weight: 500;
  font-family: alternate-gothic-atf, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: hsla(40, 90%, 94%,1);
  margin-left: 2vw;
  font-size: 1.7vw;
  line-height: 2vw;
}



button{
  border-style: none;
}



/*_______________________________________________________*/

#overlay {
    display: none;
}
.button{
  font-family: Assisant, sans-serif;
  font-size: 2em;
  color: rgba(10, 17, 117, 0);
}
.button button{
  color: hsla(28, 98%, 92%, 1.0);
  cursor: pointer;
  margin-bottom: 0%;
  position: fixed;
  background-color: rgba(17, 17, 17, 1.0);
  bottom: 0;
  left:0;
}

.imprint{
  max-width: 40%;
  color: grey;
  font-family: Assisant, Open Sans Condensed, sans-serif;
  text-align: justify;
  font-size: 0.4em;
  cursor: pointer;
}
.imprint a{
  color: hsla(28, 98%, 62%, 1.0);
}
.button button:hover{
  color: rgba(150, 100, 0, 1.0);
}


/*_______________________________________________________*/




/*animation*/
.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
  }
  /*_______________________________________________________*/

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}




/*_______________________________________________________*/
/*_______________________________________________________*/

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

.logo{
  height: 18vh;
  bottom: 0vw;
  margin-top: 2%;
  margin-bottom: 10vh;
}

.logo img{
  max-height:25vh;
}

.button{
  display: none;
}
.bookinginfo{
  width:100%;
  margin: 1vw;
  margin-top: 4vw;
}

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


  .content{
    margin: 0vw;
    width: 98vw;
  }
  .content p{
  font-size: 6.5vw;
  }
  .container{
    margin-top: 10vw;
    margin-bottom: 5vh;
  }

  .form-group{
      width: 95vw;
      margin: 0vh 0vw 0.5vh -2vw;
  }

  .form-control{
      width:96vw;
  /*FONT     WHILE WRITGING*/

      font-size: 5.4vw;
      margin-left: 1vw;

  }
  .form-control::placeholder{
    /*FONT     PLACEHOLDER*/
    margin: 2vw 0vw 2vw 0vw;
    font-size: 4.4vw;
  }
  .btn{
      font-size:6vw;
      width: 95vw;
      border-radius: 2vw;
  }




h3{
  margin-top: 30vw;
  font-size: 5vw;
  text-align: center;
}



}

/*______________*/
/*______________ DANCING ___________________________*/