#footer {
  @include font-face(400, 13px, normal, $secondary-grey);
  background: $bg-lightgrey;
  bottom: 0;
  padding: 50px 0;
  position: relative;
  width: 100%;
  @include breakpoint(xsmall) { position: relative;}

  img {
    padding: 20px 0;
    width: 12em;
  }

  a {
    color: $secondary-grey;
    display: block;
    text-decoration: none;
  }

  p {
    color: $primary-grey;
    margin-bottom: 20px;
  }

// column 1
  .footer-logo {
    padding: 40px 0;
    @include breakpoint(tiny) { margin: 20px 0; }
    @include breakpoint(xsmall) { margin: 20px 0; }
    @include breakpoint(small) { margin: 0; padding: 0 0 40px; }
    @include breakpoint(xmedium) { margin: 0; padding: 0 0 40px; }
    @include breakpoint(medium) { margin: 0; padding: 0 0 40px; }
    @include breakpoint(large) { margin: 0; padding: 40px 0; }
    a {display: inline-block; }
    p {margin: 0; }
  }

// column 2
  .footer-languages {
    @include breakpoint(tiny) { margin: 20px 0; }
    @include breakpoint(xsmall) { margin: 20px 0; }
    @include breakpoint(small) { margin: 0 0 20px; }
    @include breakpoint(xmedium) { margin: 0 0 20px; }
    a {padding-bottom: 10px; }
    a.selected_language {font-weight: bold}
  }

// column 3
  .footer-links {
    @include breakpoint(tiny) { margin: 20px 0; }
    @include breakpoint(xsmall) { margin: 20px 0; }
    @include breakpoint(small) { margin: 0 0 20px; }
    @include breakpoint(xmedium) { margin: 0 0 20px; }
    a {padding-bottom: 10px; }
  }

// column 4
  .footer-social {

    a {display: inline-block;}
    .fa, .fab, .fas {font-size: 20px; padding-right: 10px;}
  }

  .footer-icons {
    @include breakpoint(tiny) {
      .fa, .fab, .fas {padding: 0 5px;}
    }

    @include breakpoint(xsmall) {
      .fa, .fab, .fas {padding: 0 5px;}
     }

    @include breakpoint(small) {
      .fa, .fab, .fas {padding: 0 5px;}
    }

    @include breakpoint(xmedium) {
      .fa, .fab, .fas {padding: 0 5px;}
    }
  }

// bottom sponsor section
  .footer-sponsor {
    @include breakpoint(tiny) { margin: 30px 0; }
    @include breakpoint(xsmall) { margin: 30px 0; }
    @include breakpoint(small) { margin: 30px 0 30px; }
    @include breakpoint(xmedium) { margin: 30px 0 30px; }

    a {display: inline-block; }
    p > strong { color:$primary-grey;}
    p {color: $secondary-grey; }
  }

  a:hover {
    color: #333;
  }

// media queries
  @include breakpoint(tiny) {
    padding: 0;
    text-align: center !important;
  }

  @include breakpoint(xsmall) {
    padding: 0;
    text-align: center !important;
  }

  @include breakpoint(small) {
    padding: 50px 0;
    text-align: center !important;
  }

  @include breakpoint(xmedium) {
    text-align: center !important;
  }

}
