@keyframes overBookletFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-overBookletFadeIn {
  animation: overBookletFadeIn 1s ease forwards;
}

@keyframes overBookletFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-overBookletFadeOut {
  animation: overBookletFadeIn 1s ease backwards;
}

.bookletOverContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  cursor: pointer;
  opacity: 0;
  /* Stop wheel / touch scroll from chaining to the page under the overlay */
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

.bookletOverFrame {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  border: 0;
}