/**
 * 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
 */
/**
 * 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.
 */
/**
 * 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.
 */
/* Default class.  Other classes should extend %menu--follow-us. */
.menu--follow-us.follow-us-desktop {
  display: none; }
  @media only screen and (min-width: 601px) {
    .menu--follow-us.follow-us-desktop {
      display: block; } }

/**
 * Styles "follow us" links horizontally.
 */
.menu--follow-us ul:not(.contextual-links) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.menu--follow-us h2 {
  font-size: 1.875rem;
  margin-bottom: 0.75rem; }
  @media only screen and (min-width: 601px) {
    .menu--follow-us h2 {
      font-size: 1.375rem;
      margin-bottom: 1rem; } }

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

.menu--follow-us .menu-link {
  width: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  font-size: 1.3rem;
  text-decoration: none; }
  .menu--follow-us .menu-link.fa-facebook, .menu--follow-us .menu-link.fa-x-twitter, .menu--follow-us .menu-link.fa-youtube, .menu--follow-us .menu-link.fa-instagram {
    background-color: #ffffff; }
    .menu--follow-us .menu-link.fa-facebook:before, .menu--follow-us .menu-link.fa-x-twitter:before, .menu--follow-us .menu-link.fa-youtube:before, .menu--follow-us .menu-link.fa-instagram:before {
      color: #209cc0;
      font-family: "FontAwesome"; }

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