footer
  background: $black
  padding: 40px 0 20px
  height: 315px

  //https://css-tricks.com/snippets/css/sticky-footer/

  &.sticky
    +position(fixed, null 0 0 0 )

  .main-footer
    +flex(flex-start, flex-start)
    position: relative

    >.clear
      display: none

    .centered
      +flex(center, center)

    .grid2
      position: static
      float: none
      min-width: 170px
    h4
      color: white
      +font-semi-bold(15px, 20px)
      margin: 0 auto 20px
      text-align: center
      height: 50px
      width: 80%
      border-bottom: 2px solid $gray

    p
      margin: 0 0 35px

      &:last-child
        margin-bottom: 0


    p, a, span, li
      +font-light(15px)
      color: white
      opacity: 0.7
      text-align: center

      a, span
        opacity: 1
        +font-semi-bold(15px)

        &.no-bold
          +font-light(15px)

        &.underline
          text-decoration: underline

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

    .ginis
      a
        display: block

    .rights
      +sprite(-237px 0, 46px, 45px)
      display: inline-block
      margin-right: 35px

    .cib
      background: url('/img/CIBweb_be.svg') 0 50% no-repeat
      background-size: contain
      height: 50px
      width: 100px
      display: inline-block

    .ginis-icon
      +sprite(-92px -118px, 151px, 151px)
      display: inline-block
      +position(absolute, calc(50% - 75px) 0 null null)




  .sub-footer
    clear: both
    background: $black
    +flex(center, center)
    height: 50px
    margin-top: 40px

    p
      margin: 0
      color: white
      opacity: 0.7
      +font-light(15px)

+media-query(1000px)
  footer
    height: auto
    .main-footer
      display: block
      position: relative
      width: 85%

      >.clear
        display: block

      .grid3
        float: left
        width: 50%
        padding-bottom: 40px

        &:nth-child(3)
          clear: both
      .rights
        position: relative

      .ginis-icon
        +transform-origin(0% 50%)
        top: auto
        bottom: 40px

+media-query(400px)
  footer
    .main-footer
      text-align: center
      .rights
        margin: 20px auto

      .cib
        background-position: 50% 50%

      .grid3
        width: 100%

      .ginis-icon
        position: relative
        display: inline-block
        +transform-origin(50% 50%)