/* ==========================================================================
   Footer
   ========================================================================== */

footer
  background-color: $euroDarkGrey
  color: $lightBlue

  a
    color: #C8CDD7
    text-decoration: none
    &:hover
      color: lighten(#C8CDD7, 10%)

  p
    color: #C8CDD7

  h4
    margin-top: 0
    margin-bottom: 30px
    color: $euroYellow
    text-transform: uppercase

    a
      color: $euroYellow

  .footer-top
    height: 200px
    background-color: #E1E6EB
    width: 100%

    color: #3A414C
    font-size: 16px
    line-height: 22px
    text-align: center

    +respond-to-width(425)
      height: 350px

    .col-12
      height: 100%
      .grid-row
        height: 100%
        +respond-to-width(640)
          width: 100%

        a
          color: #3A414C
          cursor: pointer
          height: 100%
          .grid-col
            height: 100%
            border-right: 1px solid rgba(#848D9B, 0.2)
            vertical-align: top
            font-size: 16px
            line-height: 22px
            padding: 0 column(0.75, 6)
            +inline-flex(center, center)
            flex-direction: column
            cursor: pointer

            &:hover
              background-color: rgba(0,0,0,0.1)

            +respond-to-width(1280)
              padding: 0 column(0.6, 6)

            +respond-to-width(950)
              padding: 0 6%

            +respond-to-width(640)
              padding: 0 5%

            +respond-to-width(550)
              padding: 0 2%

            +respond-to-width(425)
              height: 33%

            svg
              width: 40px
              height: 48px
              margin-bottom: 8px

          &:last-child
            .grid-col
              border-right: none



  .menu
    padding-top: 60px
    .grid-row
      .grid-col
        font-size: 16px
        line-height: 2em
        vertical-align: top
        overflow: visible

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

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

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

          a[href^="tel:"]
            color: white
            font-weight: bold

          a[href^="mailto:"]
            color: $euroYellow

          strong
            color: white
            text-transform: uppercase

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

          ul
            margin-bottom: 15px

          a.button
            min-width: 155px
            margin-top: 15px
            padding: 7px 40px 7px 20px

            &:hover
              color: $euroDarkGrey

            &:last-of-type
              position: relative
              background: transparent
              border: solid 1px white
              box-shadow: 1px 1px 20px 2px rgba(0,0,0,0.08)
              color: white
              transition: color 0.2s, border 0.2s
              &:hover
                border: solid 1px darken(white, 20%)
                color: darken(white, 20%)
                > svg
                  .cls-1
                    fill: darken(white, 20%)

              svg
                position: absolute
                right: 15px
                top: 15px
                .cls-1
                  transition: fill 0.2s

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

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

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


  .subfooter
    .top
      text-align: right
      a.komma
        position: relative
        +flex(space-between, center)
        font-size: 16px
        line-height: 34px
        //width: 280px
        text-decoration: none
        opacity: 0.7
        color: #A5AAB4
        transition: color 0.2s

        &:hover
          color: white
          span
            opacity: 1

        span

          opacity: 0.8
          position: relative
          top: 0
          display: inline-block
          width: 100px
          height: 25px
          background-image: url('/img/komma.svg')
          background-position: center
          background-size: contain
          background-repeat: no-repeat
          transition: opacity 0.2s


        +respond-to-width(400)
          display: block
          text-align: center

          span
            display: block
            margin: 10px auto 0

    hr
      border-color: #696E78


    .bottom
      padding: 30px 0
      .logo
        +inline-flex(flex-start, center)
        width: 70%
        color: #696E78

        svg
          margin-right: 30px

      .language-menu
        width: 28%
        .bar
          +inline-flex(flex-end, center)
          width: 100%
          justify-content: flex-end

          svg
            margin-left: 10px

        .dropdown
          width: 40px
          right: -10px
          left: auto
          bottom: 40px
          top: auto
          border-radius: 5px 5px 0px 0px

+respond-to-width(1150)
  footer
    .menu
      .grid-row
        width: 100%
        padding: 0 20px
        .grid-col
          &.cat-container
            width: column(2.5, 12)

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

+respond-to-width(1000)
  footer
    .menu
      .grid-row
        .grid-col
          &.contact-container
            width: column(2.9, 12)
          &.cat-container
            width: column(2.2, 12)

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



+respond-to-width(950)
  footer
    .menu
      padding-top: 0
      .grid-row
        padding: 0
        +flex()
        flex-direction: column-reverse
        .grid-col
          &.cat-container, &.service-container, &.generic-container
            display: none

          &.menu-container
            width: 100%
            > h4, > a
              display: none

            ul
              margin: 0
              li
                position: relative
                border-bottom: 1px solid #696E78
                font-size: 16px
                font-weight: 600
                line-height: 24px

                &:after
                  position: absolute
                  top: 0
                  right: 20px
                  width: 7px
                  height: 12px

                  padding-top: 2em
                  content: ""
                  background-position: 0 center
                  background-repeat: no-repeat
                  background-image: url("/img/svg/arrow/arrow_yellow.svg")
                  transition: background-position 0.2s

                a
                  display: inline-block
                  width: 100%
                  height: 100%
                  color: white
                  padding: 10px 20px

          &.contact-container
            width: 100%
            text-align: center
            padding: 30px 0

    .subfooter
      .top
        display: none

      .bottom
        padding: 0
        > .grid-row
          flex-direction: row
          .logo
            width: 90%
            padding: 0 20px 10px 20px
            +flex(space-between, center)
            height: 50px
            svg
              margin: 0
            span
              display: none
          .language-menu
            width: 8%
            margin-right: 0
            .dropdown
              right: 0
            .bar
              height: 100%
              +flex(center, center)
              label, &:after
                display: none

+respond-to-width(425)
  footer
    .footer-top
      .col-12
        .grid-row
          background-color: $euroYellow
          .grid-col
            +flex(flex-start, center)
            height: column(4,12)
            width: 100%
            flex-direction: row
            border-bottom: 1px solid #DCB400
            text-transform: uppercase
            font-weight: bold

            br
              display: none

            svg
              height: 25px
              margin-bottom: 0
              margin-right: 5px

    .subfooter
      .bottom
        padding: 0
        .logo
          font-size: 12px
          svg
            width: 120px