.spin-action {
  animation: rotate 1.5s linear forwards;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

.zoomout {
  animation: zoomout 0.7s linear forwards;
}
@keyframes zoomout {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.001);
  }
}

.zoomout1 {
  animation: zoomout1 0.3s linear forwards;
}
@keyframes zoomout1 {
  from {
    transform: scale(0.484);
  }

  to {
    transform: scale(0.001);
  }
}

.zoomin {
  animation: zoomin 0.25s linear forwards;
}
@keyframes zoomin {
  from {
    transform: scale(0.001);
  }

  to {
    transform: scale(0.484);
  }
}

.popup {
  animation: popup 0.25s linear forwards;
}
@keyframes popup {
  from {
    transform: translateX(0px) scale(0.484);
  }

  to {
    transform: translateX(-292.5px) scale(1);
  }
}

.slidein {
  animation: slidein 0.25s linear forwards;
}
@keyframes slidein {
  from {
    transform: translateX(150px) scale(0.001);
  }

  to {
    transform: translateX(0px) scale(0.484);
  }
}

/* //////////////////////////////////////////// */

/* course card */
.left-swipe {
  animation: leftSwipe .5s linear  forwards;
}
@keyframes leftSwipe {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-380px);
  }
}

.right-swipe {
  animation: rightSwipe .5s linear forwards;
}
@keyframes rightSwipe {
  0% {
    transform: translateX(-380px);
  }
  100% {
    transform: translateX(0px);
  }
}