body {
  background-color: #404040;
}

.hsv-container {
  background-color: #fff;
  min-height: 100vh;
}

.box1 {
  background-color: #7a3504;
}
.box2 {
  background-color: #FB9953;
}
.box3 {
  background-color: #FA6C07;
}
.box4 {
  background-color: #7A4B28;
}
.box5 {
  background-color: #C75606;
}
.box6 {
  background-color: #7a3504;
}

.hsv-boxfond {
  color: #f7f7f7;
}
.hsv-boxfond a {
  color: #f7f7f7;
}

.hsv-border-1 {
  border-top: 1px solid #FA6C07;
}

.hsv-ab-1 {
  padding-top: 2.5rem;
}



@media only screen and (max-width: 740px) {
      .hsv-center {
        text-align: center;
      }
      .hsv-ab-1 {
        padding-top: 1rem;
      }
}

/* Mail */
#mail:hover {
  animation: he-mail 1s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

  @keyframes he-mail {
    0%{
      transform: scale(1);
    }
    50%{
      transform: scale(1.4);
    }
    100%{
      transform: scale(1);
    }
  }
/* Mail Ende */

/* Fax */
#fax:hover {
  animation: he-fax 1s ease-in-out infinite;
}

  @keyframes he-fax {
    0%, 100%{
      color: #fff;
    }
    50%{
      color: #111;
    }
  }
/* Fax Ende */


/* Telefon */
#telefon:hover {
  animation: he-telefon 1s infinite ;
  transform-origin: center;
  transform-box: fill-box;
  }

@keyframes he-telefon {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(30deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
/* Telefon Ende */
/* Handy */
#handy:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
/* Handy Ende*/


#Kreisobenrechts {
  animation: Kreis1 3s infinite linear;
  transform-origin: center;
  transform-box: fill-box;
}

#Kreisuntenlinks, #Kreisobenlinks{
  animation: Kreis2 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes Kreis1 {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes Kreis2 {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}