/**
 * @file
 * Provides common CSS rules for 3d and extra transition effects.
 */

.slick-wrapper,
.slick *::after,
.slick *::before {
  box-sizing: border-box;
}

.slick,
.slick-wrapper {
  margin-right: auto;
  margin-left: auto;
}

.slick__arrow {
  text-align: center;
}

/** Pause animation, when interrupted, or hovered. */
.slick--autoplay .slick-track:hover,
.slick--autoplay .slick-track:hover .slide,
.slick.is-autoplay-off .slick-track,
.slick.is-autoplay-off .slide,
.slick.is-autoplay-off .slide .slide__media {
  animation-play-state: paused !important;
}

/** Stop animation, when media player is playing. */
.is-paused .slick-track,
.is-paused .slick-track .slide {
  visibility: visible;
  animation: 0 !important;
  opacity: 1;
}

.slick .slide {
  z-index: 0;
}

.slick .is-before--2,
.slick .is-after--2 {
  z-index: 1;
}

.slick .is-before--1,
.slick .is-after--1 {
  z-index: 2;
}

.slick .is-before,
.slick .is-after {
  z-index: 3;
}

.slick--thumbnail,
.slick .slide.slick-current {
  z-index: 4;
}

.slide__thumbnail {
  position: relative;
}

.slide__thumbnail img {
  color: transparent;
}

.slick .slide__media > canvas,
.slick .slide__content > canvas {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 60px;
  transition: opacity 0.6s ease-in-out 0s;
}

.slick .is-far .slide__media > canvas,
.slick .is-far .slide__content > canvas {
  opacity: 0;
}

.slick--reflection .slide__media {
  overflow: visible;
}

/** @todo: Drop and move to Slick. */
.slide--caption--center {
  text-align: center;
}

.slick .slide--caption--center-bottom .slide__caption {
  position: absolute;
  top: auto;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 80px;
  padding: 15px;
  text-align: center;
}

.slick .slide--caption--center-bottom .slide__description {
  max-width: 72%;
  margin: 0 auto;
}

.slick.slick--has-arrow-down > .slick__arrow {
  margin: 0;
  transform: translateX(-50%);
}

.slick .slick__slide:focus {
  border: 0;
}

/** Hide displays during loading time to avoid partial displays. */
.slick--loading .slick__slider,
.slick--loading .slick__arrow {
  transition: opacity 0.3s;
  opacity: 0;
}

/** Disable animations during loading time to prevent races. */
.slick--loading .slick-track,
.slick--loading .slide,
.slick--loading .slide__media {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  /* -webkit-animation: none !important;
  animation: none !important;
  transition: none !important; */
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/** Only reasonable for large monitors, left to swipe for small devices. */
@media screen and (min-width: 768px) {
  /** @todo: Drop and move to Slick. */
  .slick-wrapper.slick-wrapper--tn-over-bottom .slick--thumbnail {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: none;
  }

  .slide--caption--center .slide__link {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .slick--vertical .slide {
    float: none;
  }
}

/* Supports reduced motion for vestibular people. */
@media (prefers-reduced-motion: reduce) {
  /* .slick.slick--skin--ticker-marquee .slick-track */
  .slick .slick-track,
  .slick .slide {
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}