html {
    scroll-behavior: smooth;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;  /* Firefox */
  }

  @font-face {
    font-family: AS;
    src: url(/Fonts/AS.ttf);
  }

body{
   
    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

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

.tsp-back{
  object-fit: cover;
}

a{
    color:white !important;
    text-decoration: none !important;
    transition: 0.05s ease-in-out;
    font-weight: bold;
}

h1{
    font-family: AS;
    font-size: 6rem;
}

h2{
    font-family: AS;
    color: white;
    font-size: 4rem;
    text-shadow: black 1px 0 15px;
}

h3{
    font-family: AS;
    color: white;
    font-size: 3rem;
    text-shadow: black 1px 0 15px;
}

h5{
    font-family: AS;
    color: white;
    text-shadow: black 1px 0 15px;
}

p{
    color: white;
    text-shadow: 1px 1px black;
}

th{
  color: red !important;
  
}

td{
  font-family: AS;
  font-size: 0.8rem;
}

a:hover{
    text-shadow:0px 10px 5px white;
    color: white;
    transition: 0.05s ease-in-out;
}

.tsp-navbar a{
  font-family: AS;
    color: white;
    font-size: 2rem;
}

#copyright {
  font-family: AS;
  color: black;
  font-size: 1.5rem;
  text-shadow: none;
}

#insta{
  position: fixed;
  background: white;
  border-radius: 1rem 0rem 0rem 1rem;
  width: 6rem;
  right: -2rem;
  top: 50%;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.5s;
  z-index: 100;
}

#insta:hover{
  right: 0;
}

.tsp-responsive-picture{
  -webkit-box-shadow: 0px 0px 30px 0px black; 
    box-shadow: 0px 0px 30px 0px black;
    transition: 0.4s;
}

.tsp-responsive-picture:hover{
  transform: scale(1.025);
  
}

.tsp-shadow{
    -webkit-box-shadow: 0px 0px 15px 20px black; 
    box-shadow: 0px 0px 15px 20px black;
}

.row{
    margin-right:0 !important;
    margin-left: 0 !important;
}

.w-99{
    width: 99% !important;
}

.w-90{
    width: 90% !important;
}

.w10{
    width: 10% !important;
}

.tsp-navbar-container{
    width:100;
    z-index: 2;
}

.tsp-navbar{
    z-index: 2;
}

.tsp-logo-container{
    position: fixed !important;
    top:0.8rem;
    right: 0rem;
   z-index: 2;
}

.tsp-description{
    background: rgba(0,0,0,0.7);
    padding: 2rem;
}

#tsp-bio{
    background: black;
}

#members{
    background: none;
}

#media{
    background: black;
}

#contact{
    background: none;
}

#partner{
  background: black;
}

#booking{
  background: black;
}

#form{
    background: black;
    color: white;
    -webkit-box-shadow: 0px 0px 30px 0px black; 
    box-shadow: 0px 0px 30px 0px black;
}

#form label{
    font-family: 'Rock Salt', cursive;
    color: white;
}

#form h3{
    font-family: 'Rock Salt', cursive;
    color: black;
}

#form button{
    background: red;
    border: none;
    transition: ease-in-out 0.2s;
}

.hover:hover{
    transform: scale(1.1);
    transition: ease-in-out 0.2s;
}

.tsp-table{
    color: white;
}

th{
    font-family: 'Rock Salt', cursive;
    color: white;
}

table{
    text-align: center;
}

.card{
    background-color:black/* #1a1a1a*/;
    -webkit-box-shadow: 0px 0px 15px 0px black; 
box-shadow: 0px 0px 15px 0px black;
}

.card-body{
  background-color:rgba(0, 0, 0, 0.5);
  margin: 1rem;
  min-height: 15rem;
}

#tsp-card-datum{
  text-align: right;
}

.card-body h3 {
margin-bottom: 1rem;
}

#footer{
    height: 10rem;
    font-family: 'Rock Salt', cursive;
    color: white;
}

#tsp-contact-success{
  position:fixed;
  z-index: 7;
  padding-top: 25%;
  background:rgba(0,0,0,0.9);
}

.tsp-success{
  background:rgba(0, 168, 0, 0.9);
}

#tsp-contact-failed{
  position:fixed;
  z-index: 7;
  padding-top: 25%;
  background:rgba(0,0,0,0.9);
}

.tsp-failed{
  background:rgba(168, 0, 0, 0.9);
}


hr{
  background-image: url("/assets/img/stripe.png");
  Background-size: 60%;
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  margin: 0;
  padding: 2rem;
  border: none !important;
}

.card-img-top{
 width: 100%;
}

.tsp-bio-container{
  background: none;
}

.tsp-passed-container{
  background: black;
}


.impressum_container{
  color: black !important;
  text-align: center;
}

.responsive_logo{
  position:absolute;
  display: none;
  top:1rem;
  left:1rem;
}

#impressum {
  font-size: 12px;
}



/*-----------------------------------Animationen-------------------------------------*/


.glitch{
    animation: glitch 1s linear infinite;
  }
  
  @keyframes glitch{
    2%,64%{
      transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
      transform: translate(-2px,0) skew(0deg);
    }
    62%{
      transform: translate(0,0) skew(5deg); 
    }
  }
  
  .glitch:before,
  .glitch:after{
    content: attr(title);
    position: absolute;
    left: 0;
  }
  
  .glitch:before{
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  }

  .tsp-social-media-container{
      position: fixed;
        width: 3rem;
      top:60%;
      left: 0rem;
      z-index: 5;
      border-radius: 0 2rem 2rem 0;
      background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  }

  .tsp-scroll-conatiner{
      position: fixed;
      bottom: 1rem;
      right: 2rem;
      color: white;
      font-size: 2rem;
      z-index: 5;
  }

  .tsp-iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }

  .tsp-responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  .fab{
      font-size: 1.5rem !important;
      color: white !important;
  }

  .tsp-slider-container{
      padding-top: 3rem;
  }

  .text-red{
    color: red;
  }
  
  @keyframes glitchTop{
    2%,64%{
      transform: translate(2px,-2px);
    }
    4%,60%{
      transform: translate(-2px,2px);
    }
    62%{
      transform: translate(13px,-1px) skew(-13deg); 
    }
  }
  
  .glitch:after{
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  }
  
  @keyframes glitchBotom{
    2%,64%{
      transform: translate(-2px,0);
    }
    4%,60%{
      transform: translate(-2px,0);
    }
    62%{
      transform: translate(-22px,5px) skew(21deg); 
    }
  }


#tsp-background-img{
  position:fixed;
  z-index: -1;
  width: 100% !important;
  height: auto;
  padding: 0%;
}

#tsp-background-img > img {
  width:100%;
}

#tsp{
  display:none;
}

#mma{
  display:block;
  position: absolute;
}




/* -----------------------------Responsive Styles------------------------------------------- */

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

  #tsp{
    display:block;
  }

  #mma{
    display:none;
  }

  body{
    text-align: center;
  }

  #tsp-background-img{
    height: 100%;
    width:auto;
    top:0;
  }

  #tsp-background-img > img {
    height:100%;
  }

  .tsp-responsive-picture{
    width: 100% !important;
  }

  #tsp-card-datum{
    text-align: center;
  }


    .tsp-logo-container{
        display: none;
    }

    .tsp-navbar-container{
        width:100;
        position:initial;
        
    }

     .tsp-mobile-display-none{
         display:none;
     }

     .tsp-slider-container{
         padding-top: 0;
     }

    .card-body{
      text-align: center !important;
    }

    hr{
      display: block;
    }

    .video {
      display: none !important;
  }

  .responsive_container{
    width: 100% !important;
  }

  .responsive_logo{
    position:absolute;
    display: initial;
  }

}