:root {
  --distance: 500px;
}

.err-d-3-sec {
  position: relative;
  background: #D4DFE6;
  min-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #274c5e;
}
.err-d-3-sec .err-d-3 {
  text-align: center;
  position: relative;
}
.err-d-3-sec .err-d-3 .MainTitle {
  display: block;
  font-size: 2rem;
  font-weight: lighter;
  text-align: center;
}
.err-d-3-sec .err-d-3 .MainDescription {
  max-width: 50%;
  font-size: 1.2rem;
  font-weight: lighter;
}
.err-d-3-sec .err-d-3 .Cog {
  width: 10rem;
  height: 10rem;
  fill: #30A9DE;
  transition: all 0.5s ease-in-out;
  animation: CogAnimation 5s linear infinite;
}
.err-d-3-sec .err-d-3 .Spanner {
  position: absolute;
  transform: rotate(20deg);
  top: 10%;
  left: 20%;
  width: 10rem;
  height: 10rem;
  fill: #30A9DE;
  animation: SpannerAnimation 4s infinite;
}
.err-d-3-sec .err-d-3 .Hummingbird {
  position: absolute;
  width: 3rem;
  height: 3rem;
  fill: #30A9DE;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.MainGraphic {
  position: relative;
}

@keyframes CogAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes SpannerAnimation {
  0% {
    transform: translate3d(20px, 20px, 1px) rotate(0deg);
  }
  10% {
    transform: translate3d(calc(-1 * var(--distance)), var(--distance), 1px) rotate(180deg);
  }
  15% {
    transform: translate3d(calc(-1 * var(--distance)), var(--distance), 1px) rotate(360deg);
  }
  20% {
    transform: translate3d(var(--distance), calc(-1 * var(--distance)), 1px) rotate(180deg);
  }
  30% {
    transform: translate3d(calc(-1 * var(--distance)), var(--distance), 1px) rotate(360deg);
  }
  40% {
    transform: translate3d(var(--distance), calc(-1 * var(--distance)), 1px) rotate(360deg);
  }
  50% {
    transform: translate3d(calc(-1 * var(--distance)), var(--distance), 1px) rotate(180deg);
  }
  100% {
    transform: translate3d(0, 0px, 0px) rotate(360deg);
  }
}/*# sourceMappingURL=errorDesign3.css.map */