/* 
  Social media icons are links with an icon and text.
*/

.social {
  height: 24px; /* Same as material icons */
  width: auto;
  opacity: 0.65;
  transition: opacity var(--animation-time);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
}

.social:hover,
.social:focus,
.social:active {
  opacity: 1;
  color: white;
}

.social .icon {
  margin-right: 0.35rem;
  height: 100%;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive design */
/* Desktop */
@media (min-width: 1101px) {
}

/* Tablet */
@media (min-width: 651px) and (max-width: 1100px) {
  /* Hide social icon text */
  .social .icon + span {
    display: none;
  }
}

/* Phone */
@media (max-width: 650px) {
  /* Hide social icon text */
  .social .icon + span {
    display: none;
  }
}