/* Loading */

.outer-loader {
  background: #FFF; 
  width:      100%;
  height:     100%; 
  z-index:    1024;
  top:        0; 
  left:       0; 
  position:   fixed; 
  display: flex;
  align-items: center;
  justify-content: center;
}
main {
  z-index: 0;
}
#ball-loading-wrap {
  position: relative;
  height: 75px;
  width: 30px;
}
#ball-loading-wrap::after {
  background: #f1f1f7;
  bottom: 0;
  content: "";
  height: 30px;
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 50%;
  transform: scaley(0.1);
  transform-origin: center bottom;
  -webkit-animation-name: bounceballShadow;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-delay: 0;
  -webkit-animation-timing-function: ease-out;
  animation-name: bounceballShadow;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0;
  timing-function: ease-out;
  animation-play-state: running;
  animation-fill-mode: none;
}
#ball-loading-wrap #ball {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-animation-name: bounceball;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-delay: 0;
  -webkit-animation-timing-function: ease-out;
  animation-name: bounceball;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0;
  timing-function: ease-out;
  animation-play-state: running;
  animation-fill-mode: none;
  overflow: hidden;
}
#ball-loading-wrap #ball img,
#ball-loading-wrap #ball svg {
  height: 30px;
  width: 30px;
}

@-webkit-keyframes bounceball {
  from {
    bottom: 0;
    height: 20px;
  }
  10% {
    bottom: 0;
    height: 30px;
  }
  to {
    bottom: 50%;
  }
}
@keyframes bounceball {
  from {
    bottom: 0;
    height: 20px;
  }
  10% {
    bottom: 0;
    height: 30px;
  }
  to {
    bottom: 50%;
  }
}
@keyframes bounceballShadow {
  from {
    background: #e4e6ee;
    transform: scaleY(0.1) scaleX(1);
  }
  10% {
    background: #CCC;
    transform: scaleY(0.1) scaleX(0.8);
  }
  to {
    background: #e4e6ee;
    transform: scaleY(0.1) scaleX(1);
  }
}