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


footer
  background-color: $fontGray
  padding-top: 80px
  color: white

  h2
    margin: 50px 0 27px 0
    font-style: italic
    font-size: 30px
    letter-spacing: 0.7px

  .topLeft
    .footer-diensten-menu
      height: 730px

      .grid-col
        vertical-align: top
        display: flex
        flex-direction: column

        .button
          width: 80%
          font-size: 22px
          height: 96px
          margin-bottom: 0
          border: none
          background: none
          border-bottom: solid 1px white
          text-align: left
          border-radius: 0
          color: #F5F5F5
          padding-left: 0
          line-height: 100px

          &.arrow:after
            right: 0

          &:before
            content: ''
            transition: width .25s ease-in-out

          &:hover
            color: $lightOrange
            transition: color .25s ease-in-out

            &:before
              content: ''
              margin: 0 6% 0 0
              +translate3d(0, 0, 0)

            &:after
              background-position: -62px center

      .dakbedekking
        order: 0
        transition: width .25s ease-in-out
        &:before
          +dakbedekkingIcon
          width: 0
        &:hover:before
          width: 48px
          transition: width .25s ease-in-out

      .dakrenovatie
        order: 1
        &:before
          +dakrenovatieIcon
          width: 0
        &:hover:before
          width: 48px
          transition: width .25s ease-in-out

      .leien
        order: 2

        &:before
          +leienIcon
          width: 0
        &:hover:before
          width: 48px
          transition: width .25s ease-in-out

      .na-isolatie
        order: 3

        &:before
          +na-isolatieIcon
          width: 0
        &:hover:before
          width: 48px
          transition: width .25s ease-in-out

      .zonnepanelen
        order: 4
        &:before
          +zonnepanelenIcon
          width: 0
        &:hover:before
          width: 48px
          transition: width .25s ease-in-out

  .topRight
    p
      padding-top: 1px
      color: #F5F5F5

    a.button
      letter-spacing: 0

      &:hover
        background: none
        background-color: $buttonBlue

  .grid-col
    vertical-align: top

  .offerte-button
    position: absolute
    margin-top: -42px
    right: column(1)
    z-index: 0
    font-size: 15px
    line-height: 17.73px
    letter-spacing: -0.3px
    height: 42px
    min-width: 200px
    padding-left: 12px
    border-radius: 11px 11px 0 0
    padding-top: 12px


    &.arrow
      box-shadow: none
      &:before
        right: 10px
        font-size: 22px

  .gradientholder
    background: linear-gradient(90deg, $fontGray 0%, $fontLightGray 100%)

  .main-item
    width: 100%
    padding: 6px 0 45px 0
    position: relative
    z-index: 1
    background: rgba(0, 0, 0, 0.1)

    .menu
      margin-left: column(1)

      ul
        +flex(space-between, center)
        &.extra-margin-bellow
          margin-bottom: 100px

        li

          a
            color: white

            &:hover
              color: $lightOrange
              span
                +translate3d(5px, 0, 0)

          &.active
            a
              color: $lightOrange

        &.schools
          margin-left: column(1)

  // Header of list
  h5
    font-size: 0.97rem

  ul
    list-style: none
    padding: 0
    margin: 32px 0 0
    font-size: 14px
    letter-spacing: -0.14px
    font-weight : bold

    +respond-to-width(600)
      margin-bottom: 50px

    li
      color: white

      a
        color: white
        text-decoration: none
        text-transform: uppercase

        &:hover
          color: white

      &.active, &.active a
        color: $darkBlue
        font-weight: bold()

  .secondary-menu

    padding: 87px 0 85px 0

    > .grid-col
      width: column(3)
      font-size: 0.9rem

    .leftCol
      margin-left: column(1)

    .footerletter
      color: $lightOrange
      font-weight: bold
      margin-right: 5px
      width: 40px
      display: inline-block

    .secondCol
      width: column(3.5)

    .thirdCol
      margin-left: column(0.3)

      img
        width: 100px
        height: 100px
        float: left
        margin: 0 10px

    a
      color: white
      text-decoration: none
      padding: 5px 0 1px 0
      display: inline-block
      font-size: 16px
      line-height: 30px
      letter-spacing: -0.16px

    .lastCol
      width: column(2)
      margin-left: column(0.2)

  /* Sub footer for pay off and our branding
   ========================================================================== */

  .sub-footer
    background-color: darken($black, 10%)
    height: 55px
    padding: 15px 0

    .grid-col
      font-size: 0.9rem

    // Pay off slogan
    .pay-off
      margin-top: 0
      margin-bottom: 0
      color: $blue

    // Our branding logo
    a
      position: relative
      color: $blue
      text-align: right
      text-decoration: none

      &:hover
        color: lighten($blue, 8%)
        &:before
          transform: rotate(360deg)

      &:before
        content: ''
        position: absolute
        right: 180px
        display: inline-block
        +sprite(-95px -78px, 24px, 24px)
        transform: rotate(0deg)
        transition: all 0.5s

    +respond-to-width(840)
      .grid-row
        +flex(space-between, center)
        .grid-col
          margin-left: 0

    +respond-to-width(600)
      height: auto
      padding: 0

      .grid-row
        display: block
        width: 100%

      .pay-off, .komma
        padding: 15px column(1, 14)
        width: 100%
        text-align: center

      .komma
        &:before
          position: relative
          right: 0
          left: -16px
          top: 6px

        background-color: rgba(255, 255, 255, 0.05)

  +respond-to-width(840)
    padding-top: 35px

    > .grid-row
      +flex(flex-start, flex-start)
      +flex-rows
      margin-bottom: 100px
      width: 100%

    .main-item
      width: 100%
      padding: 0 column(1, 14)
      margin-left: auto
      margin-right: auto

      .menu
        margin-left: 0
        width: 100%

      .logo
        display: none

      &.location
        +order(2)
        border-top: 2px solid rgba($gray, 0.2)
        padding-top: 40px

      &.schools, &.menu
        display: none

      > a
        display: inline-block

      ul.extra-margin-bellow
        margin-bottom: 35px

  +respond-to-width(760)
    h2
      font-size: 24px

    .topLeft, .topRight
      width: 100%
    .topLeft
      .footer-diensten-menu
        height: auto
        .grid-col
          .button
            height: auto
            margin-bottom: 6%
            font-size: 18px
            width: 92%

            &:before
              content: normal
              transition: none

            &:hover
              color: $lightOrange
              transition: color .25s ease-in-out

              &:before
                content: none
                margin: 0

    .topRight
      padding-right: 10%

    .gradientholder
      .main-item
        display: none

    .secondary-menu
      padding: 40px 0
      .grid-col
        width: 100%
        padding-left: column(1)
        margin-left: 0
        margin-bottom: 5%



  +respond-to-width(435)
    .footer-top
      margin-bottom: 30px

    .topLeft
      .footer-diensten-menu
        .grid-col
          .button
            line-height: 80px

    .offerte-button
      position: relative
      margin-top: 30px
      right: 0
      border-radius: 11px
      min-width: 247px
      height: 53px
      padding: 0 20px
      line-height: 51px
      margin-left: column(1)