.container {
  position: relative;
  background: rgba(0, 0, 0, .1);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  outline: none;
}

.coverflow {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.stage {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  transform-style: preserve-3d;
  perspective: 500px;
}

.figure {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 600ms ease;
  backface-visibility: hidden;
  z-index: 9;
  align-self: center;
  box-shadow: 0 50px 70px rgba(0,0,0,0.5);
  // TODO: box-reflect crashing the app. Resolve issue
  -webkit-box-reflect: below 1px -webkit-linear-gradient(bottom, rgba(black, .6) , rgba(black, .1) 20%, rgba(black, 0) 30%, rgba(black, 0));
}

.cover {
  display: block;
  width: 100%;
  box-shadow:2px 2px 5px rgba(0,0,0,.5);
}

.preloader {
  display: hidden;
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .9em;
  color: white;
  padding: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, .6);
}

@keyframes prevent {
  0% { pointer-events: none; }
  100% { pointer-events: auto; }
}

.arrowWrapper {
  display: flex;
  align-items: center;
}

#arrow1 .arrow {
  $size: 50px;
  $width: 2px;
  z-index: 999;
  opacity: 1 !important;

  cursor: pointer;
  display: block;
  width: $size / 1.414;
  height: $size / 1.414 * 2;
  // width: $size;
  // height: $size;
  position: relative;
  @each $direction in 'left' 'right' {
    &.#{$direction} {
      #{$direction}: $size;
    }
  }

  & span,
  &:before,
  &:after {
    background: #fff;
    box-shadow:2px 2px 8px rgba(0,0,0,.5);
    content: '';
    display: block;
    width: $size;
    height: $width;
    position: absolute;
    top: calc(50% - (#{$width} / 2));
  }

  &:before {
    transform: rotate(-45deg);
  }
  &:after {
    transform: rotate(45deg);
  }

  & span {
    width: 0;
  }
  &:hover span {
    width: $size * 1.414;
  }

  @each $direction in 'left' 'right' {
    &.#{$direction} {
      & span,
      &:before,
      &:after {
        margin: 0 $size / 4;
        #{$direction}: 0;
        transform-origin: #{$direction} 50%;
      }

      &:before,
      &:after {
        transition: #{$direction} 0.3s 0.05s;
      }

      & span {
        transition: width 0.3s, #{$direction} 0.3s 0.05s;
      }

      &:hover {
        & span,
        &:before,
        &:after {
          #{$direction}: $size / 1.414 * -1;
        }
      }
    }
  }
}
