/*------------------------------------
    #VISIBILITY CLASSES
------------------------------------*/

/**
 * Is Hidden
 * 1) Completely remove from the flow and screen readers.
 */
.u-is-hidden, [hidden] {
  display: none !important;
  visibility: hidden !important;
}

/**
 * Is Visibly Hidden
 * 1) Completely remove from the flow but leave available to screen readers.
 */
.sr-only,
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;

  /*
  * Extends the .sr-only class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  // */
  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
}

@media all and (max-width: 559px) {
  .hide-for-small-only {
    display: none !important;
  }
}

@media only screen and (min-width: 35em) {
  .show-for-small-only {
    display: none !important;
  }
}

@media all and (min-width: 47em) {
  .hide-for-medium {
    display: none !important;
  }
}

@media all and (max-width: 751px) {
  .show-for-medium {
    display: none !important;
  }
}

@media all and (min-width: 47em) and (max-width: 959px) {
  .hide-for-medium-only {
    display: none !important;
  }
}

@media all and (max-width: 751px), all and (min-width: 60em) {
  .show-for-medium-only {
    display: none !important;
  }
}

@media all and (min-width: 60em) {
  .hide-for-large {
    display: none !important;
  }
}

@media all and (max-width: 959px) {
  .show-for-large {
    display: none !important;
  }
}

@media all and (min-width: 60em) and (max-width: 70em) {
  .hide-for-large-only {
    display: none !important;
  }
}

@media all and (max-width: 959px), all and (min-width: 70em) {
  .show-for-large-only {
    display: none !important;
  }
}