/****************************   Wating Animation    **************************************/

#wating-wrapper {
  position: relative;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}
.watingbox {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0);
  margin-right: auto;
  margin-left: auto;
  border: 4px solid #0a5bb9;
  left: 73px;
  top: 73px;
  position: absolute;
}
.watingbox1 {
  -webkit-animation: watingbox1_animate 1s infinite ease-in-out;
  animation: watingbox1_animate 1s infinite ease-in-out;
}
.watingbox2 {
  border: 4px solid #00ffff;
  -webkit-animation: watingbox2 1s forwards,
    watingbox2_animate 1s infinite ease-in-out;
  animation: watingbox2 1s forwards, watingbox2_animate 1s infinite ease-in-out;
}
.watingbox3 {
  -webkit-animation: watingbox3 1s forwards,
    watingbox3_animate 1s infinite ease-in-out;
  animation: watingbox3 1s forwards, watingbox3_animate 1s infinite ease-in-out;
}
@-webkit-keyframes watingbox2 {
  100% {
    width: 100px;
    height: 100px;
    left: 48px;
    top: 48px;
  }
}
@keyframes watingbox2 {
  100% {
    width: 100px;
    height: 100px;
    left: 48px;
    top: 48px;
  }
}
@-webkit-keyframes watingbox3 {
  100% {
    width: 150px;
    height: 150px;
    left: 23px;
    top: 23px;
  }
}
@keyframes watingbox3 {
  100% {
    width: 150px;
    height: 150px;
    left: 23px;
    top: 23px;
  }
}
@-webkit-keyframes watingbox1_animate {
  0% {
    -webkit-transform: perspective(100px);
  }
  50% {
    -webkit-transform: perspective(100px) rotateY(-180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateY(-180deg) rotateX(-180deg);
  }
}
@keyframes watingbox1_animate {
  0% {
    transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
  }
}
@-webkit-keyframes watingbox2_animate {
  0% {
    -webkit-transform: perspective(200px);
  }
  50% {
    -webkit-transform: perspective(200px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(200px) rotateY(180deg) rotateX(180deg);
  }
}
@keyframes watingbox2_animate {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(200px) rotateX(180deg) rotateY(0deg);
    -webkit-transform: perspective(200px) rotateX(180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(200px) rotateX(180deg) rotateY(180deg);
    -webkit-transform: perspective(200px) rotateX(180deg) rotateY(180deg);
  }
}
@-webkit-keyframes watingbox3_animate {
  0% {
    -webkit-transform: perspective(300px);
  }
  50% {
    -webkit-transform: perspective(300px) rotateY(-180deg);
  }
  100% {
    -webkit-transform: perspective(300px) rotateY(-180deg) rotateX(-180deg);
  }
}
@keyframes watingbox3_animate {
  0% {
    transform: perspective(300px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
  }
}