#image-slider
  width: 100%
  overflow: visible

  .placeholder
    position: relative
    width: 100%
    cursor: move
    height: 0
    padding-bottom: 100%

    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

  .controllers
    position: relative
    z-index: 3
    height: 120px
    width: 100%
    display: -ms-flexbox
    display: -webkit-box
    display: flex
    overflow: hidden

    .thumb-holder
      white-space: nowrap
      width: 60%
      height: 135px
      overflow-x: scroll
      overflow-y: hidden
      background-color: $douvBlue
      +flex(center, center)

      figure
        position: relative
        z-index: 1
        top: 0
        left: 0
        width: 120px
        height: 120px
        display: inline-block
        flex-shrink: 0

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

        &.active
          z-index: 2
          opacity: 1
          border: solid 4px $douvYellow

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

    .nav-item
      position: relative
      +flex(center, center)
      width: 20%
      height: 100%
      cursor: pointer
      transition: background 0.3s
      flex-shrink: 0

      span
        width: 8px
        transition: transform 0.3s

        .arrow-icon
          position: relative
          top: -1px
          left: 6px
          width: 100%
          transform-origin: center
          .st0
            fill: white

      &:after
        content: ''
        //+arrowWhite


      &.previous
        background: $douvDarkBlue url(/img/svg/arrow_right.svg) no-repeat 50% 50%
        background-size: 16.6667%
        transform: rotate(180deg)

        &:hover
          background-color: lighten($douvDarkBlue, 10%)

      &.next
        background: $douvDarkBlue url(/img/svg/arrow_right.svg) no-repeat 50% 50%
        background-size: 16.6667%

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

        &:hover
          background-color: lighten($douvDarkBlue, 10%)