/* ==========================================
   FLIPBOOK NAVIGATION HINT ARROWS
   ========================================== */

.lieban-nav-hint {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2147483647;

  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;

  font-size: 42px;
  line-height: 1;

  pointer-events: none;

  animation: liebanArrowPulse 1.5s ease-in-out infinite;
}

.lieban-nav-left {
  left: 25px;
}

.lieban-nav-right {
  right: 25px;
}


/* Gentle movement toward the page */
.lieban-nav-left {
  animation-name: liebanArrowLeft;
}

.lieban-nav-right {
  animation-name: liebanArrowRight;
}


@keyframes liebanArrowLeft {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(-8px);
  }
}


@keyframes liebanArrowRight {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(8px);
  }
}


/* Mobile */
@media (max-width: 767px) {

  .lieban-nav-hint {
    width: 46px;
    height: 46px;
    font-size: 30px;
  }

  .lieban-nav-left {
    left: 10px;
  }

  .lieban-nav-right {
    right: 10px;
  }

}