/* @keyframes spinning-1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-90deg);
  }
}

@keyframes spinning-2 {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes spinning-3 {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(-540deg);
  }
}

@keyframes spinning-4 {
  from {
    transform: rotate(-540deg);
  }
  to {
    transform: rotate(-630deg);
  }
}

@keyframes spinning-5 {
  from {
    transform: rotate(-630deg);
  }
  to {
    transform: rotate(-720deg);
  }
} */

@keyframes spinning {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1080deg);
  }
}

@keyframes blick {
  0% {
    left: 20%;
    opacity: 0;
  }

  30% {
    opacity: 0.75;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.logo {
  /*margin-top: 10px;*/
  position: relative;
  overflow: hidden;
}

.logo.animate.logo::before {
  animation: blick 3s linear;
}

.animation-gear,
.animation-disc {
  animation: none;
}

.animation-gear.animate {
  /* animation: spinning-1 1s linear forwards, spinning-2 0.8s 1s linear forwards,
    spinning-3 1s 1.8s linear forwards, spinning-4 0.8s 2.8s linear forwards,
    spinning-5 1s 3.6s linear forwards; */
  animation: spinning 5s ease-in-out;
}

.animation-disc.animate {
  /* animation: spinning-5 1s linear forwards reverse,
    spinning-4 0.8s 1s linear forwards reverse,
    spinning-3 1s 1.8s linear forwards reverse,
    spinning-2 0.8s 2.8s linear forwards reverse,
    spinning-1 1s 3.6s linear forwards reverse; */
  animation: spinning 5s ease-in-out reverse;
}

.logo::before {
  content: "";
  width: 20px;
  height: 200%;
  opacity: 0;
  background-color: #fff;
  transform: rotate(45deg);
  position: absolute;
  top: -55%;
  left: 20%;
  z-index: 1;
}

.animation-gear {
  transform-box: fill-box;
  transform-origin: center;
}

.animation-disc {
  transform-box: fill-box;
  transform-origin: center;
}

.fill-color {
  fill: #ffcd2f;
}