.ouddorp-row
  background-color: $lightBlue
  padding: 90px 0 80px

  .grid-row
    position: relative
    +flex(flex-start, flex-start)
    padding-bottom: 100px

    &:after
      content: ''
      position: absolute
      width: column(7, 12)
      height: calc(100% - 65px)
      bottom: 0
      right: column(5, 24)
      background-color: $lightGray2
      opacity: 0.5

      +respond-to-width(1350)
        right: column(4, 24)


  .content
    position: relative
    +order(2)
    margin-left: column(1, 24)
    width: column(5, 12)
    vertical-align: top
    z-index: 2

    h2
      color: white
      margin-bottom: 40px

      .icon
        display: inline-block
        width: 45px
        margin-left: 5px
        svg
          width: 100%
          opacity: 0.2

    p
      +metropolisLight
      font-size: 1.1rem
      color: $blue

      a
        +metropolisSemiBold
        border-bottom: 1px solid $blue

    .button
      margin-top: 30px

  .image-slider
    +order(1)
    margin-left: column(1, 24)
    width: column(5, 12)
    overflow: visible

    .placeholder
      width: 100%
      cursor: move

      .controllers
        position: relative
        z-index: 3
        width: 100%
        height: 0
        padding-bottom: 66.67%

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

        .nav-item
          position: absolute
          +flex(center, center)
          bottom: -15px
          width: 30px
          height: 30px
          cursor: pointer

          &:after
            content: ''
            +arrowWhite
            transition: transform 0.3s

          &.previous
            background-color: $blue
            right: 90px
            &:after
              +translate3dRotate(0,0,0, 180deg)

            &:hover
              &:after
                +translate3dRotate(-3px,0,0, 180deg)

          &.next
            background-color: $brown
            right: 60px
            &:after
              +translate3d(0,0,0)

            &:hover
              &:after
                +translate3d(3px,0,0)



      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

  +respond-to-width(900)
    padding-bottom: 0

    .grid-row
      display: block

      &:after
        display: none

    .content
      width: column(11, 12)


    .image-slider
      margin-top: 60px
      width: column(11, 12)

      .placeholder
        .controllers
          padding-bottom: 66.67%