/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
  -webkit-font-smoothing: antialiased;
  padding: 0px;
  cursor: url('../img/200421_Auge_Bewegung-1.png'), auto;
} 

body:active {
  /*cursor: url('../img/200416_VB_Auge_loop.gif'), auto;*/
  /*cursor: url('../img/200417_VB_Auge.gif'), auto;*/
  -webkit-animation: cursor 400ms infinite;
    animation: cursor 400ms infinite;
}

* {
  cursor: url('../img/200421_Auge_Bewegung-1.png'), auto;
}

*:active {
  -webkit-animation: cursor 400ms ;
    animation: cursor 400ms ;
}

@-webkit-keyframes cursor {
  0% {cursor: url(../img/200421_Auge_Bewegung-1.png), auto;}
  15% {cursor: url(../img/200421_Auge_Bewegung-2.png), auto;}
  30% {cursor: url(../img/200421_Auge_Bewegung-3.png), auto;}
  45% {cursor: url(../img/200421_Auge_Bewegung-4.png), auto;}
  60% {cursor: url(../img/200421_Auge_Bewegung-3.png), auto;}
  75% {cursor: url(../img/200421_Auge_Bewegung-2.png), auto;}
  100% {cursor: url(../img/200421_Auge_Bewegung-1.png), auto;}
} 

@keyframes cursor {
  0% {cursor: url(../img/200421_Auge_Bewegung-1.png), auto;}
  15% {cursor: url(../img/200421_Auge_Bewegung-2.png), auto;}
  30% {cursor: url(../img/200421_Auge_Bewegung-3.png), auto;}
  45% {cursor: url(../img/200421_Auge_Bewegung-4.png), auto;}
  60% {cursor: url(../img/200421_Auge_Bewegung-3.png), auto;}
  75% {cursor: url(../img/200421_Auge_Bewegung-2.png), auto;}
  100% {cursor: url(../img/200421_Auge_Bewegung-1.png), auto;}
} 

/*
@keyframes cursor {
  0% {cursor: url(../img/frame1.png), auto;}
  15% {cursor: url(../img/frame2.png), auto;}
  30% {cursor: url(../img/frame3.png), auto;}
  45% {cursor: url(../img/frame4.png), auto;}
  60% {cursor: url(../img/frame5.png), auto;}
  75% {cursor: url(../img/frame6.png), auto;}
  100% {cursor: url(../img/frame7.png), auto;}
}*/

.jumbotron {
  height: 100vh;
  background-color: #fff;
  position: relative;
  padding: 0px 10px;
  margin: 0px;
}

.headline_wrapper {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  position: absolute;
  top: calc(50% + -180px);
    left: 0px;
}

.headline--item {
    background-image: url('../img/200415_VB_Landingpage-01.svg');
    width: 100%;
    max-width: 1200px;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-position: center;
}

.headline--item:hover {
    -webkit-animation: cursor 400ms ;
    animation: cursor 400ms ;
}

h1 {
    font-family: 'BlackerProDis-Bd';
    text-rendering: optimizeLegibility!important;
    color: #000!important;
    font-size: 70px!important;
}


h2 {
  text-transform: uppercase;
  color: #000;
  font-size: 22px;
}


.logo {
   background-image: url('../img/200406_VB_Logo_Schriftzug.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
    width: 100%;
    max-width: 400px;
    height: 69px;
    margin: 0 auto;
    position: relative;
    top: 60px;
    padding: 0px 10px;
    margin: 0 auto;
}

.logo:hover {
    -webkit-animation: cursor 400ms ;
    animation: cursor 400ms ;
}

footer {
    position: absolute;
    bottom: 20px;
    left:-10px;
    width: 100%;
    text-align: center;
}

footer a {
  text-decoration: none;
  font-size: 12px;
  color: #000;
}

footer a:hover {
  color: #000;
}

@media only screen and (max-width: 768px) {
  .headline--item {
      background-image: url('../img/200415_VB_Landingpage-02.svg');
      margin: 0 auto;
  }

  .headline_wrapper {
      top: calc(50% + -180px);
  }
}

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

  .headline--item {
    height: 250px;
  }

  .headline_wrapper {
    top: calc(50% + -120px);
  } 

  .logo {
    max-width: 250px;
    height: 70px;
  }
}

@media only screen and (max-height: 400px) {
  .headline--item {
    height: 150px;
  }

  .headline_wrapper {
    top: calc(50% + -80px);
  }

  .logo {
      height: 30px;
    top: 30px;
    padding: 0px 10px;
    
  }
}