// Footer Styles

.footer__margin {
  margin-top: 20px;
}

.footer {
  background-color: $grey-4;
  margin-bottom: -56px;
  margin-top: 60px;
  padding-bottom: 40px;
  padding-top: 40px;
  width: 100%;
  border-top-color: $color-black-light;
  border-top-style: solid;
  border-top-width: thin;
}

// Footer's "athletics.kcc.edu link"
a.footer-link {
  color: $primary-blue;

  &:hover {
    text-decoration: none !important;
    color: $primary-red;
  }
}

.footer-heading {
  transition-property: color;
  transition-timing-function: ease;
  transition-duration: .3s;
}

.footer-icons {
  background-color: $primary-red;
  border-radius: 50%;
  transition-property: background-color;
  transition-timing-function: ease;
  transition-duration: .3s;
  height: 33px;
  margin: 4px;
  padding: 2px;
  width: 33px;
}

@media screen and (min-width: 330px) {
  .footer-icons {
    height: 40px;
    width: 40px;
  }
}

@media screen and (min-width: 360px) {
  .footer-icons {
    height: 40px;
    margin: 5px;
    width: 40px;
  }
}

@media screen and (min-width: 412px) {
  .footer-icons {
    height: 45px;
    width: 45px;
  }
}

@media screen and (min-width: 576px) {
  .footer-icons {
    height: 50px;
    width: 50px;
  }
}

@media screen and (min-width: 992px) {
  .footer-icons {
    height: 45px;
    margin: 3px;
    width: 45px;
  }
}

@media screen and (min-width: 1053px) {
  .footer-icons {
    height: 45px;
    margin: 5px;
    width: 45px;
  }
}

@media screen and (min-width: 1200px) {
  .footer-icons {
    height: 50px;
    width: 50px;
  }
}

a.footer-social-links,
a.footer-social-links .footer-icons {
  text-decoration: none !important; // Get rid of default link-underline on hover
}

a.footer-social-links:hover .footer-icons {
  text-decoration: none !important;
  background-color: $primary-blue;
}

.footer__mobile--margin-bottom {
  margin-bottom: 20px;
}

@media screen and (min-width: 992px) {
  .footer__mobile--margin-bottom {
    margin-bottom: 0;
  }
}

.footer__svg--logo {
  height: 36px; // Needed for IE
  max-width: 100%;
}