.content-menu-row
  position: relative
  z-index: 2

  .background
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-color: $darkBrown

    &:before
      content: ''
      position: absolute
      height: 100%
      width: 50%
      background-color: $blue
      left: 0
      top: 0

      // ---------------------------- Site specific styling
      .lacom-machinefabriek &
        background-color: $flatRed

      .rols-machineonderdelen &
        background-color: $rollsYellow

      .vdb-machinefabriek &
        background-color: $vdbGreen

    .overview-page-background
      position: absolute
      left: 50%
      height: 100%
      width: calc(100vw / 14 * 3)
      max-width: 360px
      background-color: $darkerBrown

      &:after
        content: ''
        position: absolute
        opacity: 0.08
        right: 0
        top: 0
        width: 40px
        height: 100%
        background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 65%,  rgba(0,0,0,1) 100%)

  .grid-row
    position: relative
    z-index: 3
    padding: calc(100vw / 12) 0

    +respond-to-width-beyond(1440)
      padding: 120px 0

    +respond-to-width(1350)
      padding: calc(100vw / 12) 0 calc(100vw / 12 * 3)

    .content, .overview-page, .other-models, .menu-wrapper
      display: inline-block
      vertical-align: top

    .content
      width: column(6, 12)
      padding: 0  column(1, 12)

      .kms-content

        >*:first-child
          margin-top: 0

        >*:last-child
          margin-bottom: 0

        h1, h2, h3, h4, p, li, a
          color: white

        li:before
          color: white

        a:hover
          color: rgba(white, 0.6)


    .menu-wrapper
      width: 50%

    .overview-page
      width: 50%
      padding: 0 column(0.25, 12)
      text-align: right

      a
        +flex(flex-end, center)
        color: $lightBrown
        transition: color 0.3s
        font-size: 0.9rem
        line-height: 1.4
        font-weight: medium()
        text-decoration: none

        .icon
          display: inline-block
          margin-right: 10px
          opacity: 1
          +sprite(335px 87px, 16px, 16px)
          transition: opacity 0.3s

        &:hover
          color: rgba($lightBrown, 0.5)

          .icon
            opacity: 0.5

    .other-models
      width: 50%
      padding: 0 column(0.5, 12)
      ul
        list-style: none
        padding: 0
        margin: 0

        li
          font-size: 0.9rem
          line-height: 1.4

          + li
            margin-top: 5px

          a
            color: $lightBrown
            transition: color 0.3s
            text-decoration: none

            &:hover
              color: rgba($lightBrown, 0.5)

          &.active
            a
              color: white
              font-weight: bold()

  +respond-to-width(1200)

    .background
      &:before
        display: none

      .overview-page-background
        left: 0
        width: 50%
        max-width: none

    .grid-row
      width: 100%
      padding: 0
      background-color: $blue

      &:after
        content: ''
        width: 100%
        height: 1px
        display: block
        margin-top: -1px

      // ---------------------------- Site specific styling
      .lacom-machinefabriek &
        background-color: $flatRed

      .rols-machineonderdelen &
        background-color: $rollsYellow

      .vdb-machinefabriek &
        background-color: $vdbGreen


      .content
        width: 100%
        background-color: transparent
        padding: calc(100vw / 12 * 1.5) column(2, 14) calc(100vw / 12 * 1)

      .menu-wrapper
        width: 100%
        background-color: $darkerBrown


      .overview-page
        width: 50%
        padding: calc(100vw / 12 * 1) column(1, 14) calc(100vw / 12 * 1) column(2, 14)
        background-color: transparent

      .other-models
        width: 50%
        padding: calc(100vw / 12 * 1) column(2, 14) calc(100vw / 12 * 1) column(1, 14)
        background-color: $darkBrown

    #reference-block, #work-at-block
      //display: none

      position: relative
      width: calc(100% - 40px)
      max-width: 700px
      //height: 200px
      margin-left: auto
      margin-right: auto
      margin-bottom: calc(100vw / 12 * 1)

      .content
        background-color: transparent

    #reference-block
      figure
        width: 240px

      .content
        width: calc(100% - 240px)



  +respond-to-width(800)
    .background
      .overview-page-background
        width: column(5 ,12)

    .grid-row
      .overview-page
        width: column(5 ,12)

      .other-models
        width: column(7 ,12)


  +respond-to-width(700)
    .grid-row
      .content
        padding: 80px 20px

    .grid-row
      .overview-page
        padding-left: 20px

      .other-models
        padding-right: 20px

        ul
          li
            + li
              margin-top: 10px

    #reference-block, #work-at-block
      width: 100%
      max-width: 700px
      margin-bottom: 0

      .content
        background-color: transparent

    #work-at-block
      display: block
      height: auto
      padding: 30px 20px

      .content
        width: 100%
        padding: 0

      .icon
        display: none

      .button
        +flex(space-between, flex-start)
        margin-top: 30px
        position: relative
        bottom: 0
        left: 0

    #reference-block
      //TODO dit zal zo zijn
      figure
        width: 240px

      .content
        width: calc(100% - 240px)

  +respond-to-width(550)
    .background
      display: none

    .grid-row
      .overview-page
        width: 100%
        padding: 0
        text-align: left
        a
          +flex(flex-start, center)
          padding: 30px 20px

      .other-models
        width: 100%
        padding: 30px 20px

        //ul
        //  padding: 40px 0 40px 26px