.pre-loader.hidden {
  display: none;
}

.w-ball {
  background: #000;
}

.button .w-ball {
  background: #FFFFFF;
}

.balls-wrapper {
  position: relative;
  height: 200px;
  zoom: 0.5;
}

button .balls-wrapper,
.small .balls-wrapper {
  height: 16px;
  zoom: 0.3;
}

button .loading {
  min-width: 28px;
}

button .loading,
.small .loading {
  margin: 0;
}

button .w-ball,
.small .w-ball {
  width: 9px;
  height: 9px;
}

button .busy-loader,
.small .busy-loader {
  top: 16px;
  left: 48px;
}

.busy-loader {
  position: absolute;
  width: 90px;
  height: 90px;
  margin: auto;
  top: 50%;
  left: 50%;
  margin-left: -45px;
  margin-top: -45px;
}

.busy-loader .w-ball-wrapper {
  position: absolute;
  width: 86px;
  height: 86px;
  opacity: 0;
  -moz-transform: rotate(225deg);
  -moz-animation: orbit 4.4s infinite;
  -webkit-transform: rotate(225deg);
  -webkit-animation: orbit 4.4s infinite;
  -ms-transform: rotate(225deg);
  -ms-animation: orbit 4.4s infinite;
  -o-transform: rotate(225deg);
  -o-animation: orbit 4.4s infinite;
  transform: rotate(225deg);
  animation: orbit 4.4s infinite;
}

.busy-loader .w-ball-wrapper .w-ball {
  position: absolute;
  width: 7px;
  height: 7px;
  left: 0px;
  top: 0px;
  border-radius: 11px;
}

.busy-loader .ball-1 {
  animation-delay: 0.96s;
}

.busy-loader .ball-2 {
  animation-delay: 0.19s;
}

.busy-loader .ball-3 {
  animation-delay: 0.38s;
}

.busy-loader .ball-4 {
  animation-delay: 0.58s;
}

.busy-loader .ball-5 {
  animation-delay: 0.77s;
}

@keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin: 0%;
  }

  30% {
    opacity: 1;
    transform: rotate(410deg);
    animation-timing-function: ease-in-out;
    origin: 7%;
  }

  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin: 30%;
  }

  70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin: 39%;
  }

  75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin: 70%;
  }

  76% {
    opacity: 0;
    transform: rotate(900deg);
  }

  100% {
    opacity: 0;
    transform: rotate(900deg);
  }
}

