.fly-in-from-bottom {
    animation: fly-in-from-bottom 1s ease-in-out forwards;
    transform: translateY(100vh);
}

@keyframes fly-in-from-bottom {
  from {
    transform: translateY(100vh);

  }
  to {
    transform: translateY(0);

  }
}



.fly-in-from-right {
  align-self: flex-end;
  animation: fly-in-from-right 1.5s ease-in-out forwards;
  transform: translateX(100%);
}

@keyframes fly-in-from-right  {
  from {
    transform: translateX(100%);

  }
  to {
    transform: translateX(0);

  }
}

.fade-in {
	animation: fade-in 0.5s ease-in forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;

  }
  to {
    opacity: 1;

  }
}