/*---------------------------------------------------------
-----           ** 13. footer-social-icons **         -----
----------------------------------------------------------*/
.footer-social-icons {
  width: auto;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.social-icon {
  color: #fff;
}

ul.social-icons {
  margin-top: 10px;
  padding: 0;
}

.social-icons {
  li {
    vertical-align: top;
    display: inline;
  }
  a {
    color: #fff;
    text-decoration: none;
  }
}

.si {
  &.fa-facebook-f {
    padding: 10px 14px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #3b5998;
    }
  }
  &.fa-twitter {
    padding: 10px 12px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #6795de;
    }
  }
  &.fa-rss {
    padding: 10px 14px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #eb8231;
    }
  }
  &.fa-youtube {
    padding: 10px 14px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #ed302f;
    }
  }
  &.fa-reddit-alien {
    padding: 10px 14px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #ff4500;
    }
  }
  &.fa-github-alt {
    padding: 10px 14px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #212121;
    }
  }
  &.fa-linkedin {
    padding: 10px 14px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #0082ca;
    }
  }
  &.fa-google-plus-g {
    padding: 10px 9px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30;
    &:hover {
      background-color: #dd4b39;
    }
  }
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  &:hover {
    color: #fff;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
}