/*-------------------
       Social
--------------------*/

.social.button {
  .icon {
    opacity: 1;
  }
}

/* Facebook */
.facebook.button {
  background-color: var(--facebook-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
  background-image: var(--button-colored-background-image);
  box-shadow: var(--button-colored-box-shadow);
}
.facebook.button:hover {
  background-color: var(--facebook-hover-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.facebook.button:active {
  background-color: var(--facebook-down-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}

/* Twitter */
.twitter.button {
  background-color: var(--twitter-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
  background-image: var(--button-colored-background-image);
  box-shadow: var(--button-colored-box-shadow);
}
.twitter.button:hover {
  background-color: var(--twitter-hover-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.twitter.button:active {
  background-color: var(--twitter-down-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}

/* Linked In */
.linkedin.button {
  background-color: var(--linked-in-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.linkedin.button:hover {
  background-color: var(--linked-in-hover-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.linkedin.button:active {
  background-color: var(--linked-in-down-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}

/* YouTube */
.youtube.button {
  background-color: var(--youtube-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
  background-image: var(--button-colored-background-image);
  box-shadow: var(--button-colored-box-shadow);
}
.youtube.button:hover {
  background-color: var(--youtube-hover-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.youtube.button:active {
  background-color: var(--youtube-down-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}

/* Instagram */
.instagram.button {
  background-color: var(--instagram-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
  background-image: var(--button-instagram-background-image);
  box-shadow: var(--button-colored-box-shadow);
}
.instagram.button:hover {
  background-color: var(--instagram-hover-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.instagram.button:active {
  background-color: var(--instagram-down-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}

/* Pinterest */
.pinterest.button {
  background-color: var(--pinterest-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
  background-image: var(--button-colored-background-image);
  box-shadow: var(--button-colored-box-shadow);
}
.pinterest.button:hover {
  background-color: var(--pinterest-hover-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}
.pinterest.button:active {
  background-color: var(--pinterest-down-color);
  color: var(--button-inverted-text-color);
  text-shadow: var(--button-inverted-text-shadow);
}