/* Background */

.background-001 {
    background-image: linear-gradient(158deg, rgba(84, 84, 84, 0.03) 0%,
    rgba(84, 84, 84, 0.03) 20%,rgba(219, 219, 219, 0.03) 20%,
    rgba(219, 219, 219, 0.03) 40%,rgba(54, 54, 54, 0.03) 40%,
    rgba(54, 54, 54, 0.03) 60%,rgba(99, 99, 99, 0.03) 60%, 
    rgba(99, 99, 99, 0.03) 80%,rgba(92, 92, 92, 0.03) 80%, 
    rgba(92, 92, 92, 0.03) 100%),
    linear-gradient(45deg, rgba(221, 221, 221, 0.02) 0%, 
    rgba(221, 221, 221, 0.02) 14.286%,
    rgba(8, 8, 8, 0.02) 14.286%, rgba(8, 8, 8, 0.02) 28.572%,
    rgba(52, 52, 52, 0.02) 28.572%, rgba(52, 52, 52, 0.02) 42.858%,
    rgba(234, 234, 234, 0.02) 42.858%, rgba(234, 234, 234, 0.02) 57.144%,
    rgba(81, 81, 81, 0.02) 57.144%, rgba(81, 81, 81, 0.02) 71.42999999999999%,
    rgba(239, 239, 239, 0.02) 71.43%, rgba(239, 239, 239, 0.02) 85.71600000000001%,
    rgba(187, 187, 187, 0.02) 85.716%, rgba(187, 187, 187, 0.02) 100.002%),
    linear-gradient(109deg, rgba(33, 33, 33, 0.03) 0%, rgba(33, 33, 33, 0.03) 12.5%,
    rgba(147, 147, 147, 0.03) 12.5%, rgba(147, 147, 147, 0.03) 25%,
    rgba(131, 131, 131, 0.03) 25%, rgba(131, 131, 131, 0.03) 37.5%,
    rgba(151, 151, 151, 0.03) 37.5%, rgba(151, 151, 151, 0.03) 50%,
    rgba(211, 211, 211, 0.03) 50%, rgba(211, 211, 211, 0.03) 62.5%,
    rgba(39, 39, 39, 0.03) 62.5%, rgba(39, 39, 39, 0.03) 75%,
    rgba(55, 55, 55, 0.03) 75%, rgba(55, 55, 55, 0.03) 87.5%,
    rgba(82, 82, 82, 0.03) 87.5%, rgba(82, 82, 82, 0.03) 100%),
    linear-gradient(348deg, rgba(42, 42, 42, 0.02) 0%, rgba(42, 42, 42, 0.02) 20%,
    rgba(8, 8, 8, 0.02) 20%, rgba(8, 8, 8, 0.02) 40%,rgba(242, 242, 242, 0.02) 40%, 
    rgba(242, 242, 242, 0.02) 60%,rgba(42, 42, 42, 0.02) 60%, rgba(42, 42, 42, 0.02) 80%,
    rgba(80, 80, 80, 0.02) 80%, rgba(80, 80, 80, 0.02) 100%),linear-gradient(120deg, 
    rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%,
    rgba(67, 67, 67, 0.03) 14.286%, rgba(67, 67, 67, 0.03) 28.572%,
    rgba(134, 134, 134, 0.03) 28.572%, rgba(134, 134, 134, 0.03) 42.858%,
    rgba(19, 19, 19, 0.03) 42.858%, rgba(19, 19, 19, 0.03) 57.144%,
    rgba(101, 101, 101, 0.03) 57.144%, rgba(101, 101, 101, 0.03) 71.42999999999999%,
    rgba(205, 205, 205, 0.03) 71.43%, rgba(205, 205, 205, 0.03) 85.71600000000001%,
    rgba(53, 53, 53, 0.03) 85.716%, rgba(53, 53, 53, 0.03) 100.002%),linear-gradient(45deg, 
    rgba(214, 214, 214, 0.03) 0%, rgba(214, 214, 214, 0.03) 16.667%,rgba(255, 255, 255, 0.03) 16.667%, 
    rgba(255, 255, 255, 0.03) 33.334%,rgba(250, 250, 250, 0.03) 33.334%, 
    rgba(250, 250, 250, 0.03) 50.001000000000005%,rgba(231, 231, 231, 0.03) 50.001%, 
    rgba(231, 231, 231, 0.03) 66.668%,rgba(241, 241, 241, 0.03) 66.668%, 
    rgba(241, 241, 241, 0.03) 83.33500000000001%,rgba(31, 31, 31, 0.03) 83.335%, 
    rgba(31, 31, 31, 0.03) 100.002%),linear-gradient(59deg, rgba(224, 224, 224, 0.03) 0%, 
    rgba(224, 224, 224, 0.03) 12.5%,rgba(97, 97, 97, 0.03) 12.5%, rgba(97, 97, 97, 0.03) 25%,
    rgba(143, 143, 143, 0.03) 25%, rgba(143, 143, 143, 0.03) 37.5%,rgba(110, 110, 110, 0.03) 37.5%, 
    rgba(110, 110, 110, 0.03) 50%,rgba(34, 34, 34, 0.03) 50%, rgba(34, 34, 34, 0.03) 62.5%,
    rgba(155, 155, 155, 0.03) 62.5%, rgba(155, 155, 155, 0.03) 75%,rgba(249, 249, 249, 0.03) 75%, 
    rgba(249, 249, 249, 0.03) 87.5%,rgba(179, 179, 179, 0.03) 87.5%, rgba(179, 179, 179, 0.03) 100%),
    linear-gradient(241deg, rgba(58, 58, 58, 0.02) 0%, rgba(58, 58, 58, 0.02) 25%,rgba(124, 124, 124, 0.02) 25%, 
    rgba(124, 124, 124, 0.02) 50%,rgba(254, 254, 254, 0.02) 50%, rgba(254, 254, 254, 0.02) 75%,
    rgba(52, 52, 52, 0.02) 75%, rgba(52, 52, 52, 0.02) 100%),
    linear-gradient(90deg, var(--animation001Color1),var(--animation001Color2));

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0% 50%;
    background-size: 125% 125%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
  }
  
  /* Aktives Menü */
  .page-menu-activ::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--menuHoverColor);
    border-radius: 50%;
    animation: move-around 10s linear infinite;
  }
  
  @keyframes move-around {
    0% { top: 0; left: 0; }
    25% { top: 0; left: 100%; transform: translateX(-100%); }
    50% { top: 100%; left: 100%; transform: translate(-100%, -100%); }
    75% { top: 100%; left: 0; transform: translateY(-100%); }
    100% { top: 0; left: 0; }
  }

  /* zoomFadeIn  */
  .titlePicture {
    animation: zoomFadeIn  5s linear;
  }
  
  @keyframes zoomFadeIn  {
      0% {
        transform: scale(0.1);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;	
      }
    }

  .page-title-final {
    opacity: 0;
    animation: page-title-final-arrival 4.2s ease-out forwards;
  }

  .page-title-tow {
    animation: page-title-ufo-delivery 4.2s linear both;
  }

  .page-title-ufo {
    animation: page-title-ufo-hover 0.56s ease-in-out infinite alternate;
    transform-origin: center;
  }

  .page-title-ufo-light {
    animation: page-title-ufo-blink 0.42s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
  }

  .page-title-ufo-beam {
    animation: page-title-ufo-beam 4.2s ease-in-out both;
    transform-origin: top center;
  }

  .page-title-ufo-light:nth-of-type(2) {
    animation-delay: 0.14s;
  }

  .page-title-ufo-light:nth-of-type(3) {
    animation-delay: 0.28s;
  }

  @keyframes page-title-ufo-delivery {
    0% {
      left: 100%;
      opacity: 0;
      transform: translateX(0) translateY(calc(-50% - 10px)) rotate(3deg);
    }
    16% {
      left: 84%;
      opacity: 1;
      transform: translateX(0) translateY(calc(-50% - 7px)) rotate(2deg);
    }
    48% {
      left: 50%;
      opacity: 1;
      transform: translateX(-50%) translateY(calc(-50% - 12px)) rotate(0deg);
    }
    62% {
      left: 50%;
      opacity: 1;
      transform: translateX(-50%) translateY(calc(-50% - 12px)) rotate(0deg);
    }
    88% {
      left: 14%;
      opacity: 1;
      transform: translateX(-100%) translateY(calc(-50% - 12px)) rotate(-4deg);
    }
    100% {
      left: 0;
      opacity: 0;
      transform: translateX(-100%) translateY(calc(-50% - 18px)) rotate(-7deg);
    }
  }

  @keyframes page-title-final-arrival {
    0%,
    49% {
      opacity: 0;
      transform: translateY(-16px) scale(0.72);
    }
    58% {
      opacity: 1;
      transform: translateY(3px) scale(1.06);
    }
    70%,
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes page-title-ufo-hover {
    from {
      transform: translateY(-2px) rotate(-1deg);
    }
    to {
      transform: translateY(2px) rotate(1deg);
    }
  }

  @keyframes page-title-ufo-beam {
    0%,
    46%,
    68%,
    100% {
      opacity: 0;
      transform: scaleX(0.55);
    }
    50%,
    58% {
      opacity: 0.62;
      transform: scaleX(1);
    }
    54% {
      opacity: 0.82;
      transform: scaleX(1.16);
    }
  }

  @keyframes page-title-ufo-blink {
    from {
      opacity: 0.45;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1.25);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-title-final {
      opacity: 1;
      animation: none;
    }

    .page-title-tow {
      display: none;
    }
  }
  
  .tracking_in_bottom_picture
  {
      -webkit-animation: tracking_in_bottom_picture 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
              animation: tracking_in_bottom_picture 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  }
  
  @-webkit-keyframes tracking_in_bottom_picture
  {
      0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(300px);
                transform: translateZ(400px) translateY(300px);
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        -webkit-transform: translateZ(0) translateY(0);
                transform: translateZ(0) translateY(0);
        opacity: 1;
      }
    }
    @keyframes tracking_in_bottom_picture
    {
      0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(300px);
                transform: translateZ(400px) translateY(300px);
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        -webkit-transform: translateZ(0) translateY(0);
                transform: translateZ(0) translateY(0);
        opacity: 1;
      }
    }
  
  @-webkit-keyframes AnimationName {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @keyframes AnimationName {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }





/* Icons sidebar */

@keyframes rotateText {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(+10deg) rotateY(+10deg);
    }
    50% {
        transform: rotateX(+15deg) rotateY(+15deg);
    }
    75% {
        transform: rotateX(+10deg) rotateY(+10deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg);
    }
}

@keyframes tiltFloating {
    0% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
    }
    25% {
        transform: rotateX(-5deg) rotateY(5deg) translateY(-3px);
    }
    50% {
        transform: rotateX(5deg) rotateY(-5deg) translateY(3px);
    }
    75% {
        transform: rotateX(-5deg) rotateY(5deg) translateY(-3px);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
    }
}

.menuiconcontainer {
    transition: transform 0.5s ease-in-out;
    perspective: 1000px;
}

.menuiconcontainer:hover {
    animation: rotateText 1s infinite alternate ease-in-out;
    transform: rotateX(15deg) rotateY(15deg);
}

/* .menuiconcontainer {
    transition: transform 0.5s ease-in-out;
    perspective: 1000px;
}

.menuiconcontainer:hover {
    animation: tiltFloating 2s infinite alternate ease-in-out;
} */