.slider-container
  padding: 25px 0
  background:
    color: $sliderBgColor

.slider
  +flex(center, center)
  position: relative
  width: 100%
  max-width: $textMaxWidth
  margin: 0 auto
  cursor: move
  +respond-to-width(900)
    margin: 0 auto

  background-color: transparent
  color: $sliderTextColor
  height: 300px
  text-align: center
  transition: height 0.4s

  .item
    position: absolute
    width: 100%
    padding: $paddingSmallTextBlock
    opacity: 0
    transition: all 0.3s
    pointer-events: none
    user-select: none
    top: 0
    left: 0
    &.active
      opacity: 1
      pointer-events: all
      z-index: 1
  .arrows
    position: absolute
    left: 20px
    top: 0
    height: 100%
    width: calc(100% - 40px)
    +flex(space-between, center)
    z-index: 3
    pointer-events: none
    .arrow
      color: $primaryColor
      position: relative
      height: 20px
      width: 20px
      background-image: url('/img/icons/arrow_right_icon_static.svg')
      pointer-events: all
      transition: all 0.3s
      cursor: pointer
      &.left
        +translate3dRotate(0,0,0,180deg)
        &:hover
          +translate3dRotate(-5px,0,0,180deg)
      &.right
        +translate3d(0,0,0)
        &:hover
          +translate3d(5px, 0, 0)
  .nav-items
    position: absolute
    z-index: 2
    bottom: 20px
    left: 0
    width: 100%
    ul
      list-style: none
      padding: 0
      margin: 0
      +flex(center, center)
      li
        margin: 0
        &:before
          content: '•'
          font-size: 34px !important
          margin: 0 4px
          color: $black
          cursor: pointer

        &.active
          &:before
            color: $blue