/* ==========================================================================
   Main footer
   ========================================================================== */

footer.main

  width: 100%
  background: #001E2E
  color: $lightBlue

  a
    color: $lightBlue
    text-decoration: none
    text-transform: lowercase
    +transition(color 100ms ease-out)

    &:hover
      color: #fff

  .grid-row
    .grid-col
      font-size: 16px
      line-height: 2em
      vertical-align: top

      p
        line-height: 2em
        margin-top: 18px

      ul
        list-style: none
        padding: 0
        margin: 0
        margin-top: 18px

        &.refs
          +flex(space-between, center)
          flex-wrap: wrap
          height: 200px
          margin-top: 0

          li
            flex-shrink: 0
            width: 95px
            text-align: center
            color: #CED5D9
            margin-bottom: 0

            .ref-holder
              display: block
              width: 95px
              height: 58px
              background: url('/img/svg/refs_blue.svg') no-repeat left top
              background-size: 290px
              cursor: pointer

              &:hover
                background: url('/img/svg/refs_yellow.svg') no-repeat left top
                background-size: 290px

            &.ref-0
              .ref-holder
                background-position: 18.5px top

            &.ref-1
              .ref-holder
                background-position: -95px top

            &.ref-2
              .ref-holder
                background-position: -207px top

            &.ref-3
              .ref-holder
                background-position: 18.5px -87px

            &.ref-4
              .ref-holder
                background-position: -91px -87px

            &.ref-5
              .ref-holder
                background-position: -195px -87px

            &.ref-6
              .ref-holder
                background: url('/img/svg/referenties/bavaria.svg') no-repeat left top
                background-size: 200px
                background-position: 25px 0px

                &:hover
                  background-position: -125px 0px

            &.ref-7
              .ref-holder
                background: url('/img/svg/referenties/fresh-grooves.svg') no-repeat left top
                background-size: 290px
                background-position: 0px 0px

                &:hover
                  background-position:  -218px 0px

      // Position logo at the bottom left
      &.logo-container
        width: column(3.5, 12)

        .logo
          display: block
          background: transparent url('/img/svg/logo_footer.svg') no-repeat
          width: 100%
          height: 75px

          &:hover
            fill: #fff

          +respond-to-width($mdGridBreakpoint)
            width: column(3,4)

      &.menu-container
        width: column(1, 12)

      &.cat-container
        width: column(1.5, 12)

      &.contact-container
        width: column(2, 12)

      &.ref-container
        width: column(3, 12)

  .menu
    padding: 60px 0

    h4
      margin-top: 0
      margin-bottom: 0
      color: $douvYellow

  .subfooter
    padding: 16px 0
    background-color: #050504

    a
      opacity: 0.5
      transition: opacity 0.2s

      &:hover
        opacity: 1

    .ref-container
      margin-left: column(0.5,12)

    .komma
      position: relative

      span
        position: relative
        top: 8px
        display: inline-block
        width: 88px
        height: 25px
        background-image: url('/img/komma.svg')
        background-position: center
        background-size: contain
        background-repeat: no-repeat

  ///*
  // * Small breakpoint
  // * Align footer in column direction
  // */
  //+respond-to-width($smGridBreakpoint)
  //  padding-top: columnVw(1,12) 0
  //  .flexable-layout
  //    flex-direction: column
  //
  //  .footer-col
  //    width: 100%
  //    margin-bottom: 30px
  //    &.button-container
  //      align-items: flex-start
  //      order: 1
  //    &.contact-container
  //      align-items: flex-start
  //      order: 2
  //      padding-top: 0
  //      text-align: left
  //      .social-media .icon
  //        margin-left: 0
  //        margin-right: 10px
  //    &.logo-container
  //      order: 3
  //      margin-bottom: 0

html.ie
  footer.main
    .grid-row
      .grid-col
        ul.refs
          li
            &.ref-3
              .ref-holder
                background-position: 18.5px -67px

            &.ref-4
              .ref-holder
                background-position: -91px -67px

            &.ref-5
              .ref-holder
                background-position: -195px -67px

+respond-to-width(1150)
  footer.main
    a
      display: block
    .menu
      .grid-row
        .logo-container
          width: 20%
        .menu-container
          width: 12.5%
        .cat-container
          width: 18%
        .contact-container
          width: 22%
        .ref-container
          width: 27%

+respond-to-width(840)
  footer.main
    a
      display: block
    .menu
      .grid-row
        .logo-container,
        .menu-container,
        .cat-container
          display: none

        .grid-col.contact-container
          width: 48%
        .grid-col.ref-container
          width: 52%

    .subfooter
      .grid-row
        +flex()
        .ref-container
          width: 40%
        .contact-container
          width: 30%
        .cat-container,
        .menu-container
          width: 15%
        .logo-container
          display: none


+respond-to-width(425)
  footer.main
    .menu
      .grid-row
        .grid-col.contact-container,
        .grid-col.ref-container
          width: 100%

    .subfooter
      .grid-row
        display: block
        .grid-col
          width: 100%
          margin-left: 0