.activities-row
  background-color: #e7ecee
  padding: 200px 0 85px
  margin-top: -100px

  .grid-row
    position: relative

  .activities-slider
    position: relative
    width: calc(100% - 120px)
    margin: auto
    height: 950px
    max-width: 1400px

    +media-query(1000px)
      width: column(10, 12)

    .ie.v10 &
      height: auto !important

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

      .ie.v10 &
        display: none

      &.previous
        left: 0
        padding-left: 0
        +flex(flex-end, center)

        span
          +order(2)

          &:after
            transform: rotate(90deg)

        p
          +order(1)

      &.next
        right: 0
        padding-right: 0

        span
          &:after
            transform: rotate(270deg)

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


      p
        width: calc(100% - 40px)
        font-size: 18px
        line-height: 1.2
        color: $darkBlue
        margin: 0
        padding: 0 15px

        +media-query(900px)
          display: none

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

        &:after
          content: ''
          position: relative
          +sprite(-85px -135px, 20px, 20px)

      +media-query(1160px)
        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

      .ie.v10 &
        margin-bottom: 50px !important
        position: relative !important
        left: 0 !important
        z-index: 3 !important
        opacity: 1 !important
        pointer-events: all !important
        .information
          //max-height: 325px
          opacity: 1 !important

        figure
          span
            filter: blur(0px) !important


      &.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: 0 0 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

          +media-query(1350px)
            &.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: $beige

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

          *:first-child
            margin-top: 0

          *:last-child
            margin-bottom: 0


          a
            margin-top: 45px

      +media-query(1000px)
        .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: #c0cfd3

  +media-query(1350px)
    .waves
      width: 280px

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

  +media-query(600px)

    .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


  .more-info
    margin-top: 40px
    a p
      color: $darkBlue