/**
 * @file
 * Base Styles.
 *
 * This will be the base set of globally included styles.
 */
/**
 * @file
 * Dependencies.
 *
 * The necessary dependencies for compiling styles.
 * Nothing here should compile into CSS, helpers only.
 */
/**
 * @file
 * Color variables.
 *
 * This is imported into dependencies, therefore nothing in here should
 * output .css when compiled.
 */
/**
 * @file
 * Typography declarations.
 *
 * This is imported into dependencies, therefore nothing in here should
 * output .css when compiled.
 */
/**
 * @file
 * Custom Functions.
 *
 * This is imported into dependencies, therefore nothing in here should
 * output .css when compiled.
 */
/* Remove the unit of a length.
 * @param {Number} $number - Number to remove unit from
 * @return {Number} - Unitless number
 *
 * Reference: https://css-tricks.com/snippets/sass/strip-unit-function/
*/
/* Convert a value (raw number or pixel size) into rems. */
/**
 * @file
 * General variables.
 *
 * This is imported into dependencies, therefore nothing in here should
 * output .css when compiled.
 */
/**
 * @file
 * Custom Mixins.
 *
 * This is imported into dependencies, therefore nothing in here should
 * output .css when compiled.
 */
/**
 * Breakpoint
 *
 * usage example:
 * @include breakpoint($feature: max-width, $value: 1509px) {
 *  display: none;
 * }
 */
/* Dynamic containment mixin. */
/**
 * @file
 * Z-Indices.
 *
 * This is imported into dependencies, therefore nothing in here should
 * output .css when compiled.
 */
/**
 * @file
 * Skip link
 *
 * Allows keyboard users to quickly skip to the main content of the page.
 *
 * @see docroot/core/themes/claro/css/components/skip-link.css
 */
.skip-link {
  z-index: 99;
  left: 50%;
  padding: 0.0625rem 0.625rem 0.125rem;
  transform: translateX(-50%);
  font-size: 0.94rem;
}

.skip-link:focus {
  text-decoration: none;
}

.skip-link.visually-hidden.focusable:focus {
  position: absolute !important;
}

/**
 * @file
 * Utility classes to hide elements in different ways.
 *
 * @see docroot/core/themes/stable/css/system/components/hidden.module.css
 */
/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be collapsible details that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */
.hidden {
  display: none;
}

/**
 * Hide elements visually, but keep them available for screen readers.
 *
 * Used for information required for screen reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/**
 * The .focusable class extends the .visually-hidden class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
}

/**
 * Hide visually and from screen readers, but maintain layout.
 */
.invisible {
  visibility: hidden;
}

html {
  box-sizing: border-box;
  line-height: initial;
}

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

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

.layout-container {
  padding-top: 3.5625rem;
}

@media screen and (max-width: 87.4375rem) {
  .layout-container {
    padding-top: 3.1425625rem;
  }
}

@media screen and (max-width: 47.9375rem) {
  .layout-container {
    padding-top: 9.208125rem;
  }
}

@media screen and (max-width: 27.4375rem) {
  .layout-container {
    padding-top: 8.5rem;
  }
}

/*# sourceMappingURL=base.css.map*/