/* Social Top-Bar Stylings
------------------------------------------------------------------- */

.social-media-section {
  //color: #3FA9F5 !important;
  .social-icons li a {
    font-size: rem-calc(23);
    display: block;
    width: 36px;
    border-radius: 50%;
    color: #fff;
    background: #3FA9F5;
    text-align: center;
  }
  .social-icons li a:hover {
    color:  #3FA9F5;
    background: #fff;
  }
}

/* Social Top-Bar Stylings
------------------------------------------------------------------- */

.social-media-top {
  .social-icons {
    margin-bottom: 0;
    li {
      padding-top: 15px;
    }
    a {
      color: $primary-color;
      background: #ddd;
      font-size: rem-calc(23);
      display: block;
      width: 36px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.1s ease-out;
      &:hover,
      &:active,
      &:focus {
        color: $body-bg;
        background: $primary-color;
      }
    }
  }
}

Refactor styles according to markup changes
Refactor styles according to markup changes

- reformat styles for better inheritance
- set pseudo-classes for link behavior
- swap hover and default colors
- set color variables instead of fixed values
