/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
.animation {
  margin: 50px;
  text-align: center;
}
.animation span {
  margin-top: 32px;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Montserrat';
}
.animation span span {
  color: rgba(255, 255, 255, 0.2);
  margin-top: 4px;
  font-size: 15px;
	font-weight: 600;
}
.animation.animation2 .dot {
  box-shadow: none;
}
.animation.animation2 .dot:before,
.animation.animation2 .dot:after {
  animation: none;
  display: none;
}
.animation.animation3 .dot {
  /* Oval: */
  /* Oval: */
  background-image: linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 -6px 14px 4px rgba(255, 237, 186, 0.5), 0 6px 14px 4px rgba(242, 141, 185, 0.5), inset 0 1px 3px 0 rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(255, 245, 217, 0.4);
}
.animation.animation3 .dot:before,
.animation.animation3 .dot:after {
  animation: none;
  display: none;
}
.dot {
  margin: 0 auto;
  height: 10px;
  position: relative;
  width: 10px;
  border-radius: 100%;
  /* Oval: */
  background-image: linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: 0 -2px 4px 0 rgba(255, 237, 186, 0.7), 0 2px 4px 0 rgba(242, 141, 185, 0.7), inset 0 1px 0 0 rgba(255, 245, 217, 0.4);
  transition: transform 200ms ease-out;
}
.dot:hover {
  cursor: pointer;
  transform: scale(1.4);
}
.dot:before {
  content: "";
  animation: ripple 4s infinite;
  animation-timing-function: ease-out;
  height: 1000%;
  width: 1000%;
  position: absolute;
  top: -45px;
  left: -45px;
  display: block;
  box-sizing: border-box;
  border-radius: 100%;
  box-shadow: 0 0 3px 3px #ffffff;
}
.dot:after {
  content: "";
  animation: ripple-delayed 4s infinite;
  animation-timing-function: ease-out;
  height: 1000%;
  width: 1000%;
  position: absolute;
  top: -45px;
  left: -45px;
  display: block;
  box-sizing: border-box;
  border-radius: 100%;
  box-shadow: 0 0 3px 3px #ffffff;
}
@keyframes ripple {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  2.5% {
    opacity: 0.6;
  }
  50% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}
@keyframes ripple-delayed {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  6% {
    opacity: 0.6;
    transform: scale(0.1);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}