@keyframes full-circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes rotateLeft {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateRight {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes zoomInBottom {
  0% {
      transform: scale(0.5) translateY(100%);
      opacity: 0;
  }
  60% {
      transform: scale(1.1) translateY(-10%);
      opacity: 1;
  }
  100% {
      transform: scale(1) translateY(0);
  }
}

/* Zoom in Keyframes */
@-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */

/* Zoom out Keyframes */
@-webkit-keyframes zoomout {
  0% {transform: scale(1);}
  50% {transform: scale(0.9);}
  100% {transform: scale(1);}
}
@keyframes zoomout {
    0% {transform: scale(1);}
  50% {transform: scale(0.9);}
  100% {transform: scale(1);}
}/*End of Zoom out Keyframes */

@keyframes slideRightToLeft {
  from {
    transform: translateX(10px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideRightToRight {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes slideRightToLeftBack {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10);
  }
}
/*animation bubbles*/
.glowing {
  position: relative;
  min-width: 700px;
  height: 550px;
  margin: -150px;
  transform-origin: right;
  animation: colorChange 10s linear infinite;
}

.glowing:nth-child(even) {
  transform-origin: left;
}

@keyframes colorChange {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glowing span {
  position: absolute;
  top: calc(80px * var(--i));
  left: calc(80px * var(--i));
  bottom: calc(80px * var(--i));
  right: calc(80px * var(--i));
}

.glowing span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
}

.glowing span:nth-child(3n + 1)::before {
  background: rgb(0, 68, 255);
  box-shadow: 0 0 20px rgba(0, 68, 255,1),
    0 0 40px rgba(0, 68, 255,1),
    0 0 60px rgba(0, 68, 255,1),
    0 0 80px rgba(0, 68, 255,1),
    0 0 0 8px rgba(134,255,0,.1);
}

.glowing span:nth-child(3n + 2)::before {
  background: rgba(0, 68, 255,1);
  box-shadow: 0 0 20px rgba(0, 68, 255,1),
    0 0 40px rgba(0, 68, 255,1),
    0 0 60px rgba(0, 68, 255,1),
    0 0 80px rgba(0, 68, 255,1),
    0 0 0 8px rgba(255,214,0,.1);
}

.glowing span:nth-child(3n + 3)::before {
  background: rgba(0,226,255,1);
  box-shadow: 0 0 20px rgba(0,226,255,1),
    0 0 40px rgba(0,226,255,1),
    0 0 60px rgba(0,226,255,1),
    0 0 80px rgba(0,226,255,1),
    0 0 0 8px rgba(0,226,255,.1);
}

.glowing span:nth-child(3n + 1) {
  animation: animate 10s alternate infinite;
}

.glowing span:nth-child(3n + 2) {
  animation: animate-reverse 10s alternate infinite;
}

.glowing span:nth-child(3n + 3) {
  animation: animate 10s alternate infinite; 
}

@keyframes animate {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-reverse {
  0% {
    transform: rotate(360deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  100% {
    transform: rotate(0deg);
  }
}
/*END animation bubbles*/

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes slideInFromLeft {
  from {
      transform: translateX(-100%);
      opacity: 1;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
} 

@keyframes waves {
  0% {
      -webkit-transform: scale(0.2, 0.2);
      transform: scale(0.2, 0.2);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  50% {
      opacity: 0.9;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  }
  100% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  }