.image-slider
  width: 100%
  overflow: visible
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

  .placeholder
    position: relative
    width: 100%
    cursor: move

    .controllers
      position: relative
      z-index: 3
      width: 100%
      height: 0
      padding-bottom: 66.67%

      +respond-to-width(1350)
        padding-bottom: 100%

      .nav-item
        position: absolute
        +flex(center, center)
        bottom: -50px
        width: 35px
        height: 35px
        cursor: pointer
        border: 2px solid transparent
        transition: background 0.3s, border 0.3s

        span
          +flex(center, center)
          height: 16px
          width: 16px
          transform-origin: center
          transform: translate3d(0,0,0)
          transition: transform 0.3s

          .arrow-icon
            position: relative
            width: 8px
            height: 16px
            transform-origin: center
            .st0
              fill: $turquoise

        &.previous
          border-color: $lightTurquoise
          right: 40px

          span
            .arrow-icon
              transform: rotate(90deg)

          &:hover
            span
              transform: translate3d(-2px,0,0)

        &.next
          border-color: $turquoise
          right: 0

          span
            .arrow-icon
              transform: rotate(270deg)

          &:hover
            span
              transform: translate3d(2px,0,0)



    figure
      position: absolute
      z-index: 1
      top: 0
      left: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: opacity 0.4s

      span
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background-size: cover
        background-position: center

        &.small
          display: none

        +respond-to-width(480)
          &.medium
            display: none

          &.small
            display: block

      &.active
        z-index: 2
        opacity: 1