.activities-row
  background-color: $lightGray05
  padding: 100px 0 85px

  .grid-row
    position: relative

  .activities-slider
    position: relative
    width: column(10, 12)
    margin: auto
    height: 950px

    .nav-item
      position: absolute
      top: 485px
      cursor: pointer
      z-index: 6
      width: 20%
      height: 50px
      padding: 0 25px
      +flex(flex-start, center)

      &.previous
        left: 0
        padding-left: 0
        +flex(flex-end, center)
        span
          +order(2)
          &:after
            transform: rotate(180deg)

        p
          +order(1)

      &.next
        right: 0
        padding-right: 0

      &:hover
        span
          background-color: rgba($blue, 0.35)

      p
        font-size: 0.9rem
        line-height: 1.2
        color: $blue
        margin: 0
        padding: 0 15px




      span
        +flex(center, center)
        width: 50px
        height: 50px
        border: 1px solid $blue
        border-radius: 5px
        background-color: transparent
        transition: background 0.4s

        &:after
          content: ''
          position: relative
          +arrowBlue

      +respond-to-width(1160)
        margin-top: 8px
        p
          display: none

    article
      position: absolute
      z-index: 1
      top: 0
      left: column(2, 10)
      width: column(6, 10)
      margin: auto
      font-size: 0.8rem
      line-height: 1.5
      opacity: 0
      pointer-events: none
      cursor: move

      transition: left 0.6s, right 0.6s, opacity 0.6s

      &.active
        z-index: 3
        opacity: 1
        pointer-events: all
        .information
          //max-height: 325px
          opacity: 1

        figure
          span
            filter: blur(0px)

      figure
        position: relative
        width: 100%
        height: 0
        padding-bottom: 66.67%
        margin-bottom: 65px
        transform: scale3d(1,1,1)
        transition: transform 0.5s

        span
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          border-radius: 10px
          filter: blur(5px)
          background-size: cover
          background-position: center
          background-repeat: no-repeat

          &.medium, &.small
            display: none

          +respond-to-width(1350)
            &.large
              display: none

            &.medium
              display: block

      .information
        +flex(space-between, flex-start)
        overflow: hidden
        max-height: none
        opacity: 0
        user-select: none
        transition: opacity 0.6s

        h3
          width: column(4, 12)
          font-size: 1.4rem
          line-height: 1.25
          color: $brown

        .content
          width: column(8, 12)
          padding-left: column(1, 12)
          background-color: $lightGray05

          *:first-child
            margin-top: 0

          *:last-child
            margin-bottom: 0


          a
            margin-top: 45px

      +respond-to-width(1000)
        .information
          display: block

          h3
            width: 100%

          .content
            width: 100%
            padding-left: 0
            margin-top: 20px

      &.next, &.previous
        pointer-events: all
        opacity: 0.65
        figure
          transform: scale3d(0.75, 0.75, 1)

      &.next
        left: 40%
        right: 0
        figure
          transform-origin: 100% 25%

      &.previous
        left: 0
        figure
          transform-origin: 0 25%


  .waves
    position: absolute
    left: column(-1, 12)
    bottom: 0
    width: 500px
    height: 200px
    .wave
      height: 72px

      &:nth-child(2)
        transform: translate3d(200px, 0, 0)
        .wave-line
          path
            transition-delay: -1s

      .wave-line
        .st0
          stroke: $lightBlue

  +respond-to-width(1350)
    .activities-slider
      width: 100%

    .waves
      width: 280px

      .wave:nth-child(2)
        transform: translate3d(115px, 0,0)

  +respond-to-width(600)
    padding: 80px 0 40px

    .grid-row
      width: 100%

    .waves
      display: none

    .activities-slider
      height: auto !important
      overflow: hidden

      .nav-item
        display: none !important

      article
        position: relative
        left: 0 !important
        width: 100% !important
        cursor: auto
        opacity: 1 !important
        pointer-events: all !important
        background-color: white
        margin-bottom: 50px

        figure
          margin-bottom: 0
          transform: scale3d(1,1,1) !important

          span
            border-radius: 0
            filter: none !important

        .information
          padding: 40px column(1, 12)
          opacity: 1 !important

          .content
            background-color: transparent