.image-slider
  height: 1200px
  margin-top: 25px
  margin-bottom: 20px
  min-height: 425px
  position: relative
  .images
    position: relative
    height: 100%
    span
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      background-size: cover
      background-position: 50%
      opacity: 0
      z-index: 1
      +transition(opacity 0.3s)
      &.active
        opacity: 1
        z-index: 2
        &.small
          display: none

  .content
    position: absolute
    width: 100%
    height: 100%
    z-index: 5
    top: 0
    left: 0
    +flex(center, center)
    .brand
      +sprite(-384px 0, 428px, 207px)
      margin-bottom: -15%
      min-width: 428px
      display: none
    .controllers
      position: absolute
      width: calc(100% - 120px)
      height: 100%
      top: 0
      left: 60px
      +flex(space-between, center)
      .left, .right
        width: 53px
        height: 53px
        +flex(center, center)
        cursor: pointer
        position: relative
        .background
          position: absolute
          left: 0
          top: 0
          +sprite(-500px -270px, 53px, 53px)
          +transform(rotate(0deg))
          +transition(all 8s)
          +transition-timing-function(linear)
        &:before
          content: ''
          +sprite(-341px -105px, 11px, 15px)
          +translate3dRotate(3px,0,0,0deg)
          +transition(all 0.3s)
          position: relative
          z-index: 5

        &:hover
          .background
            +transform(rotate(360deg))
          &:before
            background-position: -330px -105px
      .left
        &:before
          +translate3dRotate(-3px,0,0,180deg)

+media-query(1920px)
  .image-slider
    margin-top: 42px
    margin-bottom: 38px

+media-query(1680px)
  .image-slider
    margin-bottom: 55px

+media-query(1450px)
  .image-slider
    margin-top: 75px
    margin-bottom: 70px

+media-query(1100px)
  .image-slider
    margin-top: 100px
    margin-bottom: 94px
    .content
      .brand
        +transform(scale(0.8))

+media-query(850px)
  .image-slider
    margin-top: 116px
    .images
      span.active
        &.large
          display: none
        &.small
          display: block

+media-query(780px)
  .image-slider
    margin-top: 120px
    .content
      .brand
        +transform(scale(0.65))
+media-query(600px)
  .image-slider
    .content
      .controllers
        display: none
+media-query(550px)
  .image-slider
    margin-top: 135px

+media-query(400px)
  .image-slider
    margin-top: 145px
    .content
      .brand
        margin-bottom: -30%
        +transform(scale(0.5))