/* ==================================
  05.16 Ripple Effects
================================== */

.ripples {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.ripples > div {
  background-color: var(--main-color);
  border-radius: 50%;
  /* height: 180vh;
  width: 180vh;
  height: 100vh;
  width: 100vh; */
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 52.5%;
  transform: scale(1) translateX(-50%) translateY(-50%);
  animation: growAndFade 6s infinite ease-out;
  -webkit-animation: growAndFade 6s infinite ease-out;
}

.ripples .ripple1 {
  animation-delay: .5s;
}
.ripples .ripple2 {
  animation-delay: 2s;
}
.ripples .ripple3 {
  animation-delay: 3s;
}
.ripples .ripple4 {
  animation-delay: 4s;
}
.ripples .ripple5 {
  animation-delay: 5s;
}

@keyframes growAndFade {
  0% {
    opacity: 0.5;
    height: 0vh;
    width: 0vh;
  }
  100% {
    opacity: 0;
    /* height: 180vh;
    width: 180vh; */
    height: 90vh;
    width: 90vh;
  }
}

/* LG Device :992px. */
@media screen and (min-width: 992px) and (max-width: 1199px) {

  @keyframes growAndFade {
    0% {
      opacity: 0.2;
      height: 0vh;
      width: 0vh;
    }
    100% {
      opacity: 0;
      height: 100%;
      width: 65%;
    }
  }
  
}