/* 1st animation */
.wrapper{
  position: relative;
  width: 50px;
  min-height: 50px;
  left: calc(50% - (50px / 2));
  margin-top: 50px;
}

.animation-item {
  position:relative;
  float: left;
  margin: 4px;
  border-radius: 100%;
  box-shadow: 0px 1px 2px 0px #999;
  background-color: #999;
}

.item-1 {
  animation-delay: 0s;
}

.item-2{
  animation-delay: 0.25s;
}

.item-3{
  animation-delay: 0.5s;
}

.bounce {
  width: 6px;
  height: 6px;
  animation-name: bounce;
  animation-duration: 1s;
  animation-fill-mode: none;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes bounce {
  0% {
    background-color: #2F4F4F;
    border-radius: 100%;
    box-shadow: 0px 1px 1px 0px #999;
    transform: scale3d(1, 1, 1) translateY(0px);
  }
  50% {
  }
  100% {
    background-color: #7FFFD4;
    border-radius: 100%;
    box-shadow: 0px 12px 3px 0px #999;
    transform: scale3d(1.5, 1.5, 1.5) translateY(-4px);
  }
}

/* 2nd animation */
.wrapper-1 {
  position: relative;
  width: 60px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.animation-item-1 {
  position:relative;
  float: left;
  margin: 0px;
  background-color: #2F4F4F;
  border-radius: 50% 0% 50% 0%;
}

.item-4 {
  animation-delay: 0s;
}

.item-5 {
  animation-delay: .25s;
}

.item-6 {
  animation-delay: .5s;
}

.item-7 {
  animation-delay: .75s;
}

.item-8 {
  animation-delay: 1s;
}

.item-9 {
  animation-delay: 1.25s;
}

.waves {
  width: 10px;
  height: 10px;
  animation-name: waves;
  animation-duration: 2.5s;
  animation-fill-mode: none;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes waves {
  0% {
    background-color: #2F4F4F;
    transform: scale(1) translateX(0px);
    box-shadow: 0px 0px 1px 0px #aaa;
  }
  25% {
    transform: scale(1.2) translateX(1px);
  }
  50% {
    background-color: #7FFFD4;
    transform: scale(1.4) translateX(2px);
    box-shadow: 0px 4px 4px 0px #aaa;
  }
  75% {
    transform: scale(1.2) translateX(1px);
  }
  100% {
    background-color: #2F4F4F;
    transform: scale(1) translateX(0px);
    box-shadow: 0px 0px 1px 0px #aaa;
  }
}

/* 4th animation */
.wrapper-3 {
  position: relative;
  width: 250px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.animation-item-3 {
  position:relative;
  margin: 1px;
  float: left;
  background-color: #7FFFD4;
  border-radius: 0% 50% 0% 50%;
  border-color: #2F4F4F;
  border-width: 5px;
  border-style: inset;
  box-shadow: 0px 0px 8px 0px #555;
}

.item-10 {
  animation-delay: 0s;
}

.item-11 {
  animation-delay: 0.15s;
}

.item-12 {
  animation-delay: 0.3s;
}

.rotate {
  width: 5px;
  height: 5px;
  animation-duration: 2.5s;
  animation-name: rotate;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: scale(1) rotate(-135deg);
  }
  50% {
    transform: scale(0.6) rotate(225deg);
  }
  100% {
    transform: scale(1) rotate(-135deg);
  }
}

/* 5th animation */
.wrapper-4 {
  position: relative;
  width: 250px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.animation-item-4 {
  position:relative;
  margin: 1px;
  float: left;
  background-color: #7FFFD4;
  border-radius: 50% 0% 50% 0%;
  border-color: #2F4F4F;
  border-width: 5px;
  border-style: inset;
  box-shadow: 0px 0px 8px 0px #555;
}

.item-13 {
  animation-delay: 0s;
}

.scale {
  width: 10px;
  height: 10px;
  animation-duration: 3s;
  animation-name: scale;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes scale {
  0% {
    transform: scale(1) rotate(45deg);
  }
  50% {
    transform: scale(0.7) rotate(45deg);
    background-color: #2F4F4F;
    width: 5px;
    height: 5px;
  }
  100% {
    transform: scale(1) rotate(45deg);
  }
}

/* 6th animation */
.wrapper-5 {
  position: relative;
  width: 250px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.animation-item-5 {
  position:absolute;
  margin: 5px;
  float: left;
  background: linear-gradient(to bottom right, #2F4F4F, #7FFFD4);
  border-radius: 100%;
  box-shadow: 0px 0px 8px 0px #444;
  border-radius: 50px 50px 50px 50px;
  border-top: 2px solid #ad9;
  transform: rotate(0deg) translate(0px, -8px);
}

.item-14 {
  animation-delay: 0s;
}

.item-142 {
  animation-delay: .25s;
}

.item-143 {
  animation-delay: .5s;
}


.spinner {
  width: 12px;
  height: 8px;
  animation-duration: .75s;
  animation-name: spinner;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg) translate(0px, -8px);
  }
  100% {
    transform: rotate(360deg) translate(0px, -8px);
  }
}

/* 7th animation */
.wrapper-6 {
  position: relative;
  width: 250px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.animation-item-6 {
  position:relative;
  margin: 1px;
  float: left;
  background: linear-gradient(to bottom right, #2F4F4F, #7FFFD4);
  border-radius: 50% 50% 50% 50%;
  box-shadow: 0px 0px 8px 0px #555;
  transform: rotate(45deg);
  border-color: #fff;
  border-width: 4px;
  border-style: inset;
  border-left-style: groove;
  border-right-style: groove;
}

.item-15 {
  animation-delay: 0s;
}

.item-16 {
  animation-delay: .25s;
}

.item-17 {
  animation-delay: .5s;
}

.item-18 {
  animation-delay: .75s;
}

.twist {
  width: 15px;
  height: 15px;
  animation-duration: 1.25s;
  animation-name: twist;
  animation-fill-mode: none;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes twist {
  0% {
    transform: scale(1) rotate(0deg) ;
  }
  100% {
    transform: scale(.5) rotate(365deg) ;
  }
}

/* 8th animation */
.wrapper-7 {
  position: relative;
  width: 250px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.animation-item-7 {
  position:relative;
  margin: 1px;
  float: left;
  background: linear-gradient(to bottom right, #2F4F4F, #7FFFD4);
  border-radius: 100%;
  box-shadow: 0px 0px 8px 0px #555;
  border-left-color: #eee;
  border-right-color: #fff;
  border-style: inset;
}

.item-20 {
  animation-delay: 0s;
}

.item-21 {
  animation-delay: .5s;
}

.item-22 {
  animation-delay: 1s;
}

.item-23 {
  animation-delay: 1.5s;
}

.item-24 {
  animation-delay: 2s;
}

.rotate3 {
  width: 6px;
  height: 6px;
  animation-duration: 2.5s;
  animation-name: rotate3;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes rotate3 {
  0% {
    transform: scale(.5) rotate(0deg);
  }
  50% {
    transform: scale(1) rotate(-365deg);
  }
  100% {
    transform: scale(.5) rotate(-730deg);
  }
}

/* 9th animation */
.wrapper-8 {
  position: relative;
  width: 250px;
  left: calc(50% - (50px / 2));
  min-height: 50px;
  margin-top: 50px;
}

.moon {
  position:absolute;
  margin: 0px;
  background-image: url(https://static.pexels.com/photos/47367/full-moon-moon-bright-sky-47367.jpeg);
  background-attachment: inherit;
  background-size: 30px;
  background-position: -10px -10px;
  border-radius: 100%;
  box-shadow: 0px 0px 28px 0px #555;
  border-color: #fff;
  animation-delay: 0s;
  margin-left: 5px;
  margin-top: 5px;
  width: 15px;
  height: 15px;
}

.earth {
  width: 60px;
  height: 60px;
  position:absolute;
  margin-left: 0px;
  margin-top: -5px;
  background-image: url(https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg);
  background-attachment: inherit;
  background-size: 90px;
  background-position: -10px -10px;
  border-radius: 100%;
  box-shadow: 0px 0px 18px 0px #8888ff;
  border-color: #ddf;
}

.moon-anim {
  animation-duration: 10s;
  animation-name: moon;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes moon {
  0% {
    transform: rotate(0deg) translate(0px, -90px);
  }
  100% {
    transform: rotate(-360deg) translate(0px, -90px);
  }
}

.earth-anim {
  animation-duration: 10s;
  animation-name: earth;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes earth {
  0% {
    transform: rotate(0deg) translate(5px, -10px);
  }
  100% {
    transform: rotate(-360deg) translate(5px, -10px);
  }
}