.aboutSwiper
  .panel
    +row-height(19.25) 

    //+respond-to-width(1280)
    //  +row-height(14)
    //
    //+respond-to-width(560)
    //  +row-height(16)
    //
    //+respond-to-width(400)
    //  +row-height(16)

  /*
    |--------------------------------------------------------------------------
    | Images
    |--------------------------------------------------------------------------

  .images
    position: relative
    overflow: hidden
    +row-height(12)

    +respond-to-width(1280)
      +row-height(10)

    +respond-to-width(1024)
      +row-height(8)

    +respond-to(mobileNavigation)
      +row-height(12)

    +respond-to-width(640)
      +row-height(8)

    +respond-to-width(480)
      +row-height(6)

    .swiper-image-holder
      height: 100%

    .swiper-container-visible
      overflow: visible

      .valign-parent
        +position(absolute, 0 null null 40px)
        z-index: 10
        opacity: 0

        +row-height(12)
        width: 50%

        +respond-to-width(1280)
          +row-height(10)

        +respond-to-width(1024)
          +row-height(8)

        +respond-to-width(480)
          display: none

        &.animating
          +transition(opacity 500ms ease-out)

        &.active
          opacity: 1

    .swiper-slide
      overflow: hidden

      width: 50% !important
      height: 50% !important

      &.swiper-slide-active
        width: 100% !important
        height: 100% !important

      &.animate
        +transition(width 500ms ease-out, height 500ms ease-out)

  /*
    |--------------------------------------------------------------------------
    | Buttons
    |--------------------------------------------------------------------------

  .swiper-button
    position: relative
    height: 100%
    z-index: 10
    cursor: pointer
    +transition(background 500ms ease-out)

    +respond-to(mobileNavigation)
      display: none

    .plane
      +position(absolute, null null 0 0)
      width: 100%
      height: 50%
      text-align: center
      +transition(background 500ms ease-out)

      .arrow
        +position(absolute, null null 50% 50%)
        margin: -15px 0 0 -18px
        +transition(opacity 500ms ease-out,transform 200ms ease-out)

    &.green
      background: rgba(156,231,163,.5)
      .plane
        background: $green

      &:not(.disabled) .plane:hover
        background: darken($green,10)
    &.blue
      background: rgba(149,207,231,.5)
      .plane
        background: $blue

      &:not(.disabled) .plane:hover
        background: darken($blue,10)

    &.disabled
      cursor: default
      background: $purpleDark
      .plane
        background: $purpleDark
        .arrow
          opacity: 0

  .swiper-button-prev
    .plane
      .arrow
        +sprite(-520px, -180px, 36px, 30px)
      &:hover
        .arrow
          +transform(translateX(-10px))

  .swiper-button-next
    .plane
      .arrow
        +sprite(-580px, -180px, 36px, 30px)
      &:hover
        .arrow
          +transform(translateX(10px))

  /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------

  .navigation
    height: 100%
    background: $purpleWhite

    +respond-to(mobileNavigation)
      display: none

    .title
      display: block
      padding: 0 40px

      +row-height(2)
      width: 100%

      background: $purple
      color: #fff

      +RalewayBold
      text-transform: uppercase
      font-size: .888888889em
      letter-spacing: .15em
      +row-line-height(2)

      +respond-to-width(1280)
        font-size: .833333333em
        letter-spacing: .1em

      +respond-to-width(1024)
        font-size: .777777778em

    li
      padding: 12px 40px
      display: block
      height: auto
      line-height: 1.222222222
      cursor: pointer
      +transition(background 200ms ease-out)

      &.active
        background: #C5C2CB

      &:not(.active):hover
        background: #D7D6DD

      +respond-to-width(1280)
        padding: 8px 40px
        height: auto

    .name
      display: block
      +RalewayBold

    .function
      display: block

  /*
    |--------------------------------------------------------------------------
    | Story
    |--------------------------------------------------------------------------

  .swiper-container
    height: 100%

  .person
    padding: 80px 0 80px 4.166666667%
    line-height: 2.111111111

    +respond-to(mobileNavigation)
      width: 100%
      padding-left: 14.2857143%
      padding-right: 14.2857143%
      padding-bottom: 1.33333em

    +respond-to-width(480)
      padding-top: 40px

    .name
      display: block

      +RobotoSlab
      font-size: 2.111111111em
      line-height: 1

    .function
      display: block
      margin-top: 5px
      +RalewayExtraBold
      text-transform: uppercase
      letter-spacing: .15em
      font-size: .8em

  .story
    padding: 80px 0

    +respond-to(mobileNavigation)
      width: 100%
      padding-top: 0
      padding-left: 14.2857143%
      padding-right: 14.2857143%