/* ==========================================================================
   Main footer
   ========================================================================== */
footer
  position: relative
  z-index: 2
  background-color: $blue
  min-height: 200px

  .menu
    background-color: $offBlue
    ul
      +flex(space-between, center)
      height: calc(100vw / 12)
      max-height: 120px
      list-style: none
      padding: 0
      margin: 0

      li
        a
          +flex(flex-start, center)
          padding: 30px 0
          text-decoration: none
          color: white
          font-size: 1rem
          line-height: 1
          font-weight: medium()

          .counter
            +flex(center, center)
            margin-left: 5px
            width: 24px
            height: 24px
            text-align: center
            color: white
            font-size: 15px
            line-height: 1
            font-weight: bold()
            background-color: $red
            border-radius: 100%
            &:before
              position: relative
              top: -1px
              content: attr(data-counter)

        &.active
          a
            font-weight: bold()

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


  .main
    padding: calc(100vw / 12) 0

    ul li a, p, p a, h4, h4 a
      margin: 0
      color: $whiteBlue
      font-size: 0.8rem
      line-height: 1.4
      font-weight: medium()
      text-decoration: none

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

    .business-information
      display: inline-block
      vertical-align: top
      width: column(3, 12)

      ul li a, p, p a, a
        color: $lightBlue
        transition: color 0.3s

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

          a
            color: white
            font-weight: bold()

      p
        .prefix
          display: inline-block
          width: 80px

      p a, a
        &:hover
          color: white

      figure
        height: 3rem
        margin-bottom: 2rem

        .logo
          display: block
          +sprite(135px 1px, 131px, 50px)

      .margin-bottom
        margin-bottom: 2rem


      .locations
        +flex(flex-start, flex-start)

        p + p
          padding-left: 25px

    .lists
      display: inline-block
      vertical-align: top
      width: column(4, 12)

      &.specialism
        margin-left: column(1, 12)

        h4 .icon:before
          +sprite(355px 71px, 27px, 22px)

      &.segments
        h4 .icon:before
          +sprite(385px 81px, 25px, 25px)

      &.companies
        width: column(4, 12)
        h4 .icon:before
          +sprite(412px 81px, 26px, 25px)

      h4
        height: 2.8rem
        font-size: 1rem
        color: white
        a
          font-size: 1rem
          color: white
          +flex(flex-start, center)

        .align
          +flex(flex-start, center)


        .icon
          +flex(center, center)
          width: 30px
          height: 24px
          margin-left: -45px
          margin-right: 15px
          &:before
            content: ''
            display: inline-block
            opacity: 0.7

      ul
        padding: 0

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

        li
          a
            &:hover
              color: white

    +respond-to-width(1200)
      .business-information
        width: column(4, 12)
      .lists
        width: column(4, 12)
        &.segments
          display: none
        &.companies
          width: column(3, 12)

    +respond-to-width(1000)
      .business-information
        width: column(7, 12)

      .lists
        &.specialism
          display: none

        &.companies
          width: column(5, 12)

    +respond-to-width(700)
      padding: 40px 0
      width: 100%

      .business-information
        display: block
        width: 300px
        margin-right: auto
        margin-left: 20px

      .lists
        display: block
        width: 300px !important
        margin: 60px auto 0 20px

        h4
          .icon
            display: none

    +respond-to-width(400)
      .business-information, .lists
        margin-right: 20px
        margin-left: 20px
        width: auto !important

      .business-information
        .locations
          display: block

          p + p
            padding-left: 0
            margin-top: 20px

        p
          .prefix
            display: block
            width: 100%
            margin-top: 10px

            &:first-of-type
              margin-top: 0

  .sub-footer
    height: calc(100vw / 12)
    max-height: 120px
    +flex(space-between, center)
    border-top: 1px solid rgba(white, 0.1)

    p
      margin: 0
      color: $lightBlue
      font-weight: medium()
      font-size: 0.8rem
      line-height: 1

    .komma
      position: relative
      +flex(flex-end, center)
      font-size: 0.8rem
      line-height: 1
      width: 300px
      color: $lightBlue
      font-weight: medium()
      text-decoration: none
      transition: color 0.2s

      &:hover
        color: white !important
        span
          opacity: 1

      span
        position: relative
        top: 1px
        display: inline-block
        margin-left: 10px
        opacity: 0.4
        transition: opacity 0.2s
        +sprite(491px 1px, 93px, 31px)


    +respond-to-width(700)
      display: block
      height: auto
      width: calc(100% - 40px)
      padding: 20px 0

      p
        display: block
        width: 300px

      .komma
        +flex(flex-start, center)
        width: 300px
        margin-top: 10px

        span
          margin-left: 7px

    +respond-to-width(400)
      p
        margin-left: 0
        width: auto

      .komma
        margin-left: 0
        width: auto

    +respond-to-width(350)
      .komma
        display: block
        margin-top: 15px
        span
          display: block
          margin-top: 5px
          margin-right: auto
          margin-left: 0


  // ---------------------------- Site specific styling

  .lacom-machinefabriek &
    background-color: $flatRed

    .menu
      background-color: $lightFlatRed

    .main
      ul li a, p, p a, h4, h4 a
        color: rgba(white, 0.7)

      .business-information
        figure
          .logo
            +sprite(0px 220px, 198px, 50px)

    .sub-footer
      p, .komma
        color: rgba(white, 0.4)

  .rols-machineonderdelen &
    background-color: $rollsYellow

    .menu
      background-color: $rollsYellow2

    .main
      ul li a, p, p a, h4, h4 a
        color: rgba(white, 0.7)

      .business-information
        figure
          .logo
            +sprite(155px 110px, 151px, 51px)

    .sub-footer
      p, .komma
        color: rgba(white, 0.4)

  .vdb-machinefabriek &
    background-color: $vdbGreen

    .menu
      background-color: $vdbGreen2

    .main
      ul li a, p, p a, h4, h4 a
        color: rgba(white, 0.7)

      .business-information
        figure
          .logo
            +sprite(135px 55px, 132px, 50px)

    .sub-footer
      p, .komma
        color: rgba(white, 0.4)

  .jansen-machining-technology &
    background-color: $jansenBlue

    .menu
      background-color: $jansenBlue2

    .main
      ul li a, p, p a, h4, h4 a
        color: rgba(white, 0.7)

      .business-information
        figure
          .logo
            +sprite(1px 287px, 310px, 70px)

    .sub-footer
      p, .komma
        color: rgba(white, 0.4)