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

footer
  background: $blueGradient
  color: white

  &:before
    content: ''
    display: block
    width: 100%
    height: 20px
    background-color: $yellow


  .grid-row
    padding: 60px 0 40px

  .grid-col
    width: column(5, 24)
    margin-right: column(1, 24)
    vertical-align: top

    p
      color: white
      opacity: 0.4
      font-size: 0.8rem
      line-height: 1.2
      margin: 0 0 1rem
      text-transform: uppercase
      letter-spacing: 5.4px
      +dubaiBold

    ul
      list-style: none
      margin: 0
      padding: 0

      li
        font-size: 0.8rem
        margin-bottom: 0.4rem
        opacity: 0.5

        a
          text-decoration: none
          color: white
          display: block

        &:hover
          opacity: 0.75

        &.active
          opacity: 1


  .news-footer
    width: column(3, 12)

  .social
    margin-right: 0

    a
      display: inline-block
      margin-left: 10px
      opacity: 0.5
      transition: opacity 0.3s

      &.facebook
        +sprite(-62px -22px, 25px, 25px)
        margin-left: 0

      &.youtube
        +sprite(-62px -49px, 36px, 25px)

      &:hover
        opacity: 0.8

  +respond-to-width(800)
    .grid-col
      width: column(5, 12)
      margin-right: column(1, 12)

      &:nth-child(2n + 2)
        margin-right: 0

      &:nth-child(1), &:nth-child(2)
        margin-bottom: 40px

  +respond-to-width(550)
    .grid-col
      width: 100%
      margin-right: 0 !important
      margin-bottom: 40px
      text-align: center

  .page-ending
    display: block
    margin-top: 60px
    +sprite(-116px -1px, 60px, 60px)

    +respond-to-width(550)
      margin-top: 20px
      margin-left: auto
      margin-right: auto

  .sub-footer
    background-color: $darkBlue

    .grid-row
      padding: 28px 0

      +flex(space-between, center)

      .nil
        font-size: 1rem
        line-height: 1.4
        color: rgba(white, 0.5)

        a
          padding: 0 10px
          font-size: 0.8em
          text-decoration: none
          color: white
          opacity: 0.5
          &:first-of-type
            padding-left: 0

          &:hover
            opacity: 0.75

        span
          display: block
          opacity: 0.5
          font-size: 0.7em
          text-transform: uppercase
          color: white
          +dubaiBold

      .komma
        display: block
        +sprite(-1px -135px, 151px, 51px)
        opacity: 0.12
        transition: opacity 0.3s
        &:hover
          opacity: 0.4

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

        .nil
          .placeholder
            +flex(center, center)

            a
              width: 85px
              &:first-of-type
                text-align: right

        .komma
          position: relative
          right: -12px
          margin: 30px auto 0