html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: #fcfcfc;
}
.wrapper {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 750px;
          perspective: 750px;
}
.square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2000px;
  height: 2000px;
  -webkit-transform: translate3d(-50%, -64%, -1500px) rotateX(65deg) rotateZ(-45deg);
          transform: translate3d(-50%, -64%, -1500px) rotateX(65deg) rotateZ(-45deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.row {
  width: 100%;
  height: 10%;
  font-size: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.dot {
  position: relative;
  display: inline-block;
  width: 10%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  -webkit-transform: translate3d(0, 0, 0) rotateX(-70deg) rotateY(-45deg);
          transform: translate3d(0, 0, 0) rotateX(-70deg) rotateY(-45deg);
}
.row:nth-child(1) {
  -webkit-animation: row-bounce 2s 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(1) {
  -webkit-animation: dot-bounce 2s 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(1)::after {
  -webkit-animation: dot-color 8s 0.5s linear alternate infinite;
          animation: dot-color 8s 0.5s linear alternate infinite;
}
.row:nth-child(2) {
  -webkit-animation: row-bounce 2s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(2) {
  -webkit-animation: dot-bounce 2s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(2)::after {
  -webkit-animation: dot-color 8s 1s linear alternate infinite;
          animation: dot-color 8s 1s linear alternate infinite;
}
.row:nth-child(3) {
  -webkit-animation: row-bounce 2s 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(3) {
  -webkit-animation: dot-bounce 2s 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(3)::after {
  -webkit-animation: dot-color 8s 1.5s linear alternate infinite;
          animation: dot-color 8s 1.5s linear alternate infinite;
}
.row:nth-child(4) {
  -webkit-animation: row-bounce 2s 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(4) {
  -webkit-animation: dot-bounce 2s 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(4)::after {
  -webkit-animation: dot-color 8s 2s linear alternate infinite;
          animation: dot-color 8s 2s linear alternate infinite;
}
.row:nth-child(5) {
  -webkit-animation: row-bounce 2s 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(5) {
  -webkit-animation: dot-bounce 2s 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(5)::after {
  -webkit-animation: dot-color 8s 2.5s linear alternate infinite;
          animation: dot-color 8s 2.5s linear alternate infinite;
}
.row:nth-child(6) {
  -webkit-animation: row-bounce 2s 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(6) {
  -webkit-animation: dot-bounce 2s 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(6)::after {
  -webkit-animation: dot-color 8s 3s linear alternate infinite;
          animation: dot-color 8s 3s linear alternate infinite;
}
.row:nth-child(7) {
  -webkit-animation: row-bounce 2s 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(7) {
  -webkit-animation: dot-bounce 2s 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(7)::after {
  -webkit-animation: dot-color 8s 3.5s linear alternate infinite;
          animation: dot-color 8s 3.5s linear alternate infinite;
}
.row:nth-child(8) {
  -webkit-animation: row-bounce 2s 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(8) {
  -webkit-animation: dot-bounce 2s 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(8)::after {
  -webkit-animation: dot-color 8s 4s linear alternate infinite;
          animation: dot-color 8s 4s linear alternate infinite;
}
.row:nth-child(9) {
  -webkit-animation: row-bounce 2s 4.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 4.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(9) {
  -webkit-animation: dot-bounce 2s 4.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 4.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(9)::after {
  -webkit-animation: dot-color 8s 4.5s linear alternate infinite;
          animation: dot-color 8s 4.5s linear alternate infinite;
}
.row:nth-child(10) {
  -webkit-animation: row-bounce 2s 5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(10) {
  -webkit-animation: dot-bounce 2s 5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(10)::after {
  -webkit-animation: dot-color 8s 5s linear alternate infinite;
          animation: dot-color 8s 5s linear alternate infinite;
}
.row:nth-child(11) {
  -webkit-animation: row-bounce 2s 5.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 5.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(11) {
  -webkit-animation: dot-bounce 2s 5.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 5.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(11)::after {
  -webkit-animation: dot-color 8s 5.5s linear alternate infinite;
          animation: dot-color 8s 5.5s linear alternate infinite;
}
.row:nth-child(12) {
  -webkit-animation: row-bounce 2s 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(12) {
  -webkit-animation: dot-bounce 2s 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(12)::after {
  -webkit-animation: dot-color 8s 6s linear alternate infinite;
          animation: dot-color 8s 6s linear alternate infinite;
}
.row:nth-child(13) {
  -webkit-animation: row-bounce 2s 6.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 6.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(13) {
  -webkit-animation: dot-bounce 2s 6.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 6.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(13)::after {
  -webkit-animation: dot-color 8s 6.5s linear alternate infinite;
          animation: dot-color 8s 6.5s linear alternate infinite;
}
.row:nth-child(14) {
  -webkit-animation: row-bounce 2s 7s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 7s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(14) {
  -webkit-animation: dot-bounce 2s 7s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 7s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(14)::after {
  -webkit-animation: dot-color 8s 7s linear alternate infinite;
          animation: dot-color 8s 7s linear alternate infinite;
}
.row:nth-child(15) {
  -webkit-animation: row-bounce 2s 7.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 7.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(15) {
  -webkit-animation: dot-bounce 2s 7.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 7.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(15)::after {
  -webkit-animation: dot-color 8s 7.5s linear alternate infinite;
          animation: dot-color 8s 7.5s linear alternate infinite;
}
.row:nth-child(16) {
  -webkit-animation: row-bounce 2s 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(16) {
  -webkit-animation: dot-bounce 2s 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(16)::after {
  -webkit-animation: dot-color 8s 8s linear alternate infinite;
          animation: dot-color 8s 8s linear alternate infinite;
}
.row:nth-child(17) {
  -webkit-animation: row-bounce 2s 8.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 8.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(17) {
  -webkit-animation: dot-bounce 2s 8.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 8.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(17)::after {
  -webkit-animation: dot-color 8s 8.5s linear alternate infinite;
          animation: dot-color 8s 8.5s linear alternate infinite;
}
.row:nth-child(18) {
  -webkit-animation: row-bounce 2s 9s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 9s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(18) {
  -webkit-animation: dot-bounce 2s 9s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 9s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(18)::after {
  -webkit-animation: dot-color 8s 9s linear alternate infinite;
          animation: dot-color 8s 9s linear alternate infinite;
}
.row:nth-child(19) {
  -webkit-animation: row-bounce 2s 9.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 9.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(19) {
  -webkit-animation: dot-bounce 2s 9.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 9.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(19)::after {
  -webkit-animation: dot-color 8s 9.5s linear alternate infinite;
          animation: dot-color 8s 9.5s linear alternate infinite;
}
.row:nth-child(20) {
  -webkit-animation: row-bounce 2s 10s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: row-bounce 2s 10s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(20) {
  -webkit-animation: dot-bounce 2s 10s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
          animation: dot-bounce 2s 10s cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.dot:nth-child(20)::after {
  -webkit-animation: dot-color 8s 10s linear alternate infinite;
          animation: dot-color 8s 10s linear alternate infinite;
}
@-webkit-keyframes row-bounce {
  0% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
  100% {
    -webkit-transform: translateZ(80px);
            transform: translateZ(80px);
  }
}
@keyframes row-bounce {
  0% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
  100% {
    -webkit-transform: translateZ(80px);
            transform: translateZ(80px);
  }
}
@-webkit-keyframes dot-bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0px);
            transform: translate3d(0, 0, 0px);
  }
  100% {
    -webkit-transform: translate3d(0, 0, -80px);
            transform: translate3d(0, 0, -80px);
  }
}
@keyframes dot-bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0px);
            transform: translate3d(0, 0, 0px);
  }
  100% {
    -webkit-transform: translate3d(0, 0, -80px);
            transform: translate3d(0, 0, -80px);
  }
}
@-webkit-keyframes dot-color {
  0% {
    background-color: #0040e4;
  }
  100% {
    background-color: #ff0064;
  }
}
@keyframes dot-color {
  0% {
    background-color: #0040e4;
  }
  100% {
    background-color: #ff0064;
  }
}