.loader3 .loader-inner {
  background: var(--wdtBodyBGColor);
  position: fixed;
  z-index: 100000001;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    180deg,
    rgba(var(--wdtTertiaryColorRgb), 0.2) 0%,
    rgba(var(--wdtTertiaryColorRgb), 0.2) 100%
  );
}
.loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.loader-wrapper svg {
  width: 200px;
  height: 200px;
  z-index: 999999;
  position: relative;
  animation: pencilSkin 5s infinite ease;
  -webkit-animation: pencilSkin 5s infinite ease;
}
#pre-lead-one {
  animation: pre-lead-1 2s infinite ease;
  -webkit-animation: pre-lead-1 2s infinite ease;
}

#pre-lead-two {
  animation: pre-lead-2 2s infinite ease;
  -webkit-animation: pre-lead-2 2s infinite ease;
}

#pre-lead-three {
  animation: pre-lead-3 2s infinite ease;
  -webkit-animation: pre-lead-3 2s infinite ease;
}

#loader {
  animation: loaderColor 5s infinite ease;
  -webkit-animation: loaderColor 5s infinite ease;
}

@keyframes pre-lead-1 {
  0% {
    transform: translateY(0px);
  }
  15% {
    transform: translateY(-10px);
  }
  30% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes pre-lead-1 {
  0% {
    transform: translateY(0px);
  }
  15% {
    transform: translateY(-10px);
  }
  30% {
    transform: translateY(0px);
  }
}

@keyframes pre-lead-2 {
  30% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes pre-lead-2 {
  30% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(0px);
  }
}

@keyframes pre-lead-3 {
  60% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-10px);
  }
  90% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes pre-lead-3 {
  60% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-10px);
  }
  90% {
    transform: translateY(0px);
  }
}

@keyframes pencilSkin {
  0% {
    fill: var(--wdtSecondaryColorRgb);
  }
  33% {
    fill: var(--wdtTertiaryColor);
  }
  66% {
    fill: var(--wdtPrimaryColor);
  }
  100% {
    fill: var(--wdtTertiaryColor);
  }
}

@-webkit-frames pencilSkin {
  0% {
    fill: var(--wdtSecondaryColorRgb);
  }
  33% {
    fill: var(--wdtTertiaryColor);
  }
  66% {
    fill: var(--wdtPrimaryColor);
  }
  100% {
    fill: var(--wdtTertiaryColor);
  }
}