/**
 * @file
 * Provides common CSS rules for slicebox transition effects.
 *
 * Tips:
 * Always use small sizes for animated elements to minimize repainting.
 * Use media queries to adjust dimensions at its dependent skins.
 */

.slick.slick--slicebox {
  overflow: visible;
  transform: translate3d(0, 0, 0);
}

.slick.slick--slicebox.is-slicing,
.slick.slick--slicebox.is-slicing .slick-track {
  overflow: visible;
}

.slick--slicebox .slick__perspective {
  font-size: inherit;
  height: 100%;
  left: 50%;
  line-height: 1;
  transform: translate3d(-50%, 0, 0);
  transition: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.slick--slicebox.is-left .slick__perspective {
  left: 0;
  transform: translateX(0) rotate(.01deg);
}

.slick--slicebox .slick__perspective > div {
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.slick--slicebox .slick__slice {
  margin: 0;
  display: block;
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
}

.slick--slicebox .slick__perspective,
.slick--slicebox .slide__caption,
.slick.slick--slicebox.is-slicing .slick__arrow,
.slick.slick--slicebox.is-slicing .slick-current .slide__caption {
  opacity: 0;
  visibility: hidden;
  /* z-index: -1; */
}

.slick--slicebox.is-slicing .slick__perspective {
  opacity: 1;
  visibility: visible;
  z-index: 6;
}

.slick.slick--slicebox .slick-current .slide__caption,
.slick.slick--slicebox.is-animated .slick__arrow {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s;
  transition-delay: .8s;
}

/**
 * Overrides Slick for Slicebox.
 */
.slick.slick--slicebox .slick-list {
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
  perspective: 1000px;
  position: relative;
}

.slick.slick--slicebox .slide {
  transform-style: preserve-3d;
}

/** Prevents blinking transition. */
.slick.slick--slicebox.is-animated .slick-current {
  opacity: 1;
}

.slick.slick--slicebox.is-transitioning .slick-current,
.slick.slick--slicebox .slick-current .slide__media > canvas,
.slick.slick--slicebox .slick-current .slide__content > canvas {
  opacity: 0;
}

/** Add shadows */
.slick.slick--slicebox .slick-list::after {
  bottom: -10px;
  box-shadow: 0 0 25px 45px rgba(0, 0, 0, 0.4);
  border-radius: 10%;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  margin-left: -35%;
  position: absolute;
  transform: rotateX(65deg);
  width: 70%;
  z-index: -1;
  /*
  transform: rotateY(0deg) rotateX(15deg);
  transform-origin: 100% 100%;
  */
}

/** Only reasonable for large monitors, left to swipe for small devices. */
@media screen and (min-width: 768px) {
  /** Layout. */
  .slick.slick--slicebox {
    min-height: 325px;
  }

  /** Adjust base 3d plane dimensions accordingly based on the image style. */
  .slick.slick--slicebox .slick-list {
    width: 640px;
    height: 325px;
  }
}

@media screen and (min-width: 1280px) {
  /** Layout. */
  .slick.slick--slicebox {
    min-height: 385px;
  }
}