/**
 * Social media menu.
 *
 * Style rules for a menu whose items are "follow us" links for various Social
 * media sites.
 *
 * External variables uses:
 *  - $facebook
 *  - $twitter
 *  - $google
 *  - $instagram-logo-colour
 *
 * @see templates/menu--follow-us.html.twig
 */
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/**
 * Drupal core's .visually-hidden
 *
 * Note the lack of !important on the position rule.
 * This allows us to change the position property after
 * *unhidding* an element using the unset-visually-hidden
 * mixin below.
 */
/* multi line truncation */
/**
 * Placeholder for dropdown!
 *
 * Selected option is grayed out to give it the look of a placeholder text.
 * This is good for unselected dropdowns where the top item says something like
 * 'Select ...'.  But it is not ideal where a value has been selected already.
 */
/**
 * Style overrides for jQueryUI datepicker.
 */
/* Default class.  Other classes should extend %menu--follow-us. */
/**
 * Styles "follow us" links horizontally.
 */
.menu--follow-us {
  padding: 1.75em 0;
  text-align: center;
}

.menu--follow-us .menu-item {
  display: inline-block;
  list-style-type: none;
  margin-right: 0.5rem;
}

.menu--follow-us .menu-link {
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  border-radius: 0.15em;
  font-size: 1.75rem;
  font-family: FontAwesome;
  font-weight: normal;
  text-decoration: none;
}

.menu--follow-us .menu-link.fa-facebook {
  background-color: #3B5998;
}

.menu--follow-us .menu-link.fa-twitter {
  background-color: #1DA1F2;
}

.menu--follow-us .menu-link.fa-x-twitter {
  background-color: #000;
}

.menu--follow-us .menu-link.fa-youtube {
  background-color: #D41E1D;
}

.menu--follow-us .menu-link.fa-instagram {
  background-color: #E44458;
}

/*# sourceMappingURL=follow-us-menu.css.map */