@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideFromTop {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideFromBottom {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.am_left,
.am_right,
.am_bottom,
.am_top {
  opacity: 0;
}

.am_left.active {
  animation: slideFromLeft 0.8s ease-out forwards;
}

.am_right.active {
  animation: slideFromRight 0.8s ease-out forwards;
}

.am_top.active {
  animation: slideFromTop 0.8s ease-out forwards;
}

.am_bottom.active {
  animation: slideFromBottom 0.8s ease-out forwards;
}

@keyframes callRing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(25deg);
  }
  20% {
    transform: rotate(-25deg);
  }
  30% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-15deg);
  }
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-10deg);
  }
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}