.scale-on-hover
{
  cursor: pointer;
  transition: transform .3s ease-in-out;
}

.scale-on-hover:hover
{
  transform: scale(0.9);
}

.shift-origin-left-center
{
  transform-origin: 50% 50%;
}

@media (min-width: 767px)
{
  .shift-origin-left-center
  {
    transform-origin: 0 50%;
  }
}


.page-content
{
  opacity: 0;
  transform: translateX(0);
  animation: none;
}

.page-content.animate-from-left
{
  animation: slideInFromLeft 1.27s ease-out 0.1s forwards;
}

.page-content.animate-from-right
{
  animation: slideInFromRight 1.27s ease-out 0.1s forwards;
}

.zoom-in-animation
{
  animation: zoomIn 2s ease-in-out 0.1s backwards;
}

.animation-duration-125s
{
  animation-duration: 1250ms;
}

.animation-delay-250ms
{
  animation-delay: 250ms;
}

.animation-delay-500ms
{
  animation-delay: 500ms;
}

.animation-delay-1000ms
{
  animation-delay: 1000ms;
}

.animation-delay-1050ms
{
  animation-delay: 1050ms;
}

.animation-delay-1100ms
{
  animation-delay: 1100ms;
}

.animation-delay-1150ms
{
  animation-delay: 1150ms;
}

.animation-delay-1200ms
{
  animation-delay: 1200ms;
}

.animation-delay-1250ms
{
  animation-delay: 1250ms;
}

.animation-delay-1500ms
{
  animation-delay: 1500ms;
}

.flash-animation
{
  animation: flash 2s ease-in-out 0.1s forwards;
}

.fade-in-animation
{
  animation: fadeIn var(--anim-duration, 2000ms) ease-in-out var(--anim-delay, 100ms) forwards;
}

.fade-in-animation
{
  opacity: 0;
}

.fade-and-shake-animation
{
  animation:
    fadeIn 1.25s ease-in-out 0.5s forwards,
    shake 1.25s ease-in-out 1.25s forwards;
  opacity: 0;
}

.shake-animation-dalay-16
{
  animation: shake 1.25s ease-in-out 1.6s forwards;
}

.shake-animation
{
  animation: shake 1.25s ease-in-out 0.1s forwards;
}

@keyframes shake
{

  from,
  to
  {
    transform: translate3d(0, 0, 0)
  }

  10%,
  30%,
  50%,
  70%,
  90%
  {
    transform: translate3d(-10px, 0, 0)
  }

  20%,
  40%,
  60%,
  80%
  {
    transform: translate3d(10px, 0, 0)
  }
}

fade-in-animation
{
  animation: fadeIn 1s ease-in-out 0.1s forwards;
}

@keyframes slideInFromLeft
{
  from
  {
    opacity: 0;
    transform: translateX(-100%);
  }

  to
  {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight
{
  from
  {
    opacity: 0;
    transform: translateX(100%);
  }

  to
  {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn
{
  from
  {
    opacity: 0;
    transform: scale3d(.3, .3, .3)
  }

  50%
  {
    opacity: 1
  }
}

@keyframes flash
{

  50%,
  from,
  to
  {
    opacity: 1
  }

  25%,
  75%
  {
    opacity: 0
  }
}

@keyframes fadeIn
{
  from
  {
    opacity: 0
  }

  to
  {
    opacity: 1
  }
}

.flash
{
  animation-name: flash
}