/**
 * A mixin to add custom focus styles when elements are keyboard focused.
 * It adds a blue border pill shape via the `::after` pseudo element.
 */

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Viewport-specific custom aspect ratio modifiers
 */

/* stylelint-disable plugin/selector-bem-pattern */

/* stylelint-enable */

/**
 * We define groove as a set of mixins so we can easily use it to style headings
 * in CMS prose blocks as well as elements with the class `Groove`.
 * To apply groove styling you need to combine the two mixins. For example:
 *
 * .Groove {
 *   @mixin groove-content;
 * }
 *
 * .Groove::after {
 *   @mixin groove-rule;
 * }
 */

/**
  * 1. In case this is an `<hr>` element, we override some of its default
  *    appearance.
  * 2. If this element is used on its own, it may not respect margin rules
  *    without some sort of height.
  * 3. Containing element needs to support absolute positioning, which will
  *    prevent the pseudo element from unintentionally disrupting layout.
  */

/**
* Pseudo element that actually visually displays. 👀
*
* 1. By using `currentColor` and `opacity` we can make this pattern work in
*    many different scenarios without needing overrides.
*/

/**
 * Do not edit directly
 * Generated on Tue, 08 Apr 2025 17:55:41 GMT
 */

:root { /* Size of the navigation bar elements on small screens. */ /* Used to decorate an edge of "current" navigation items. */ /* Size of the upward pointer affordance of the search form on small screens. */ /* Size of the sidebar navigation element on large screens. */ /* The easing function here is a subtler version of easeInOutBack. This modified version is meant to give items a slight "bounce" as they are shown without being too in-your-face about it. */ /* This easing function starts slow and speeds up at the end. Can be useful for a delayed transition after other transitions complete. */
}

/*
  A shorthand for both hover and focus pseudo-classes.
  @TODO This shouldn't need to be here. Revisit later.
  @see https://github.com/cloudfour/baptist-health-patterns/pull/129
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
 * Custom selectors
 */

/**
* https://goo.gl/pYtbK7
*/

*,
*::before,
*::after {
  box-sizing: inherit;
}

/**
* 1. Prevent padding and border from affecting element width
* 2. Force body to always meet viewport height
* 3. Restricts horizontal scrolling and hides scroll bars when using 100vw
*/

html {
  box-sizing: border-box; /* 1 */
  height: 100%; /* 2 */
}

body {
  min-height: 100%; /* 2 */
  overflow-x: hidden; /* 3 */
}

/**
* Removes the default spacing and border for appropriate elements.
*/

body,
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ul,ol,dl {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
* Links
*/

:link,:visited {
  color: #000;
  color: initial;
  text-decoration: none;
}

:any-link {
  color: #000;
  color: initial;
  text-decoration: none;
}

:link:hover,:visited:hover,:link:focus,:visited:focus {
  color: inherit;
}

:any-link:hover,:any-link:focus {
  color: inherit;
}

/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers.
*/

a:active,
a:hover {
  outline-width: 0;
}

/**
* Change the font styles in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

/**
* Rules
*/

hr {
  background-color: currentColor;
  border: none;
  height: 1px;
  opacity: 1;
}

/**
* Suppress the focus outline on elements that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
*/

[tabindex="-1"]:focus {
  outline: none !important;
}

svg {
  fill: currentColor;
}

img,
object {
  max-width: 100%;
}

@media print {
  img {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
}

/**
  * The `main` tag isn't supported in IE11. Adding `display: block` to fix any
  * issues that may occur as a result.
  */

main {
  display: block;
}

/**
 * Horizontal Rules
 */

/**
 * 1. Can be used to round points
 * 2. Override default margin and center if sized less than 100%
 *
 * Note: I'm not sure why our hr rules are duplicated, but I don't have
 * time to troubleshoot right now, so disabling the stylelint rule.
 */

/* stylelint-disable-next-line no-duplicate-selectors */

hr {
  background-color: currentColor;
  border: none;
  border-radius: 1rem; /* 1 */
  height: 2px;
  margin: 0 auto; /* 2 */
  opacity: 0.2;
}

/**
 * Overrides list "normalization"
 */

/* stylelint-disable-next-line no-duplicate-selectors */

ul,ol,dl {
  padding-left: 1.125rem;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

ul li::marker {
  color: inherit;
}

/**
 * Force hidden elements to not display. Polyfills the `hidden` attribute for
 * IE11
 * @see https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/
 */

[hidden] {
  display: none !important;
}

/**
 * For users who prefer reduced motion we disable transitions globally.
 * Before using `transitionend` event listeners in your JS code, please check
 * this setting in your JS and provide a fallback. For example:
 *
 * if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
 *   doSomething();
 * } else {
 *   element.addEventListener('transitionend', () => {
 *     doSomething();
 *   });
 * }
 */

@media(prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/**
 * Custom selectors
 */

/**
 * WCH uses viewport based responsive typography:
 * https://zellwk.com/blog/viewport-based-typography/
 */

@media (min-width: 47em) {
  html {
    font-size: medium;
    font-size: initial;
  }
}

body {
  color: #48453f;
  font-size: 1rem;
  line-height: 1.44;
  font-family: sans-serif;
}

.wf-active body {
  font-family: Noto Sans;
}

h1,h2,h3,h4,h5,h6 {
  font-family: inherit;
  font-weight: 400;
}

h1,h2,h3 {
  line-height: 1.2;
}

/**
 * Set our default link color. Override the Baptist Components rule that sets
 * link colors to `inherit` on focus.
 */

:link,:visited,
:link:focus,
:visited:focus {
  color: #0055a5;
}

:any-link,
:any-link:focus {
  color: #0055a5;
}

:link:hover,:visited:hover {
  color: #00748c;
  text-decoration: underline;
}

:any-link:hover {
  color: #00748c;
  text-decoration: underline;
}

h1 {
  font-size: 2.02729rem;
}

h2,
h3 {
  font-style: italic;
}

@media print {
  h2,
  h3 {
    font-style: normal;
    font-weight: 700;
  }
}

h2 {
  font-size: 1.60181rem;
}

h3 {
  font-size: 1.125rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 1rem;
}

blockquote {
  padding: 0.49327rem 1.26563rem;
  position: relative;
}

blockquote > * + * {
  margin-top: 1rem;
}

blockquote::before {
  background: currentColor;
  border-radius: 1.5px;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 3px;
}

/* stylelint-disable-next-line selector-type-no-unknown */

quote,
q {
  font-style: normal;
}

@media print {
  p,
  li {
    orphans: 3;
    widows: 3;
  }
}

/**
 * STOP! ✋
 *
 * Don't put components here!
 *
 * Instead, store them with their associated templates:
 * 📁 src/_includes/components/component-name/index.css
 *
 * Components will be included based on the brand's `components` tokens.
 */

/**
 * @define Input
 */

/**
 * 1. Override webkit styles to ensure component styles persist.
 * 2. Fixes an issue where an input may not shrink with its container
 *    in Firefox.
 * 3. Most of the time these will be full width, block elements.
 */

.Input {
  -webkit-appearance: none;
          appearance: none; /* 1 */
  background-color: #ffffff;
  border-color: #dddddd;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box;
  color: currentColor;
  display: block; /* 2 */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  min-width: 0;
  padding: 1ex 1em;
  transition-duration: 0.2s;
  transition-property: all; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  transition-timing-function: ease;
  width: 100%; /* 3 */
}

.Input:hover {
  border-color: #dddddd;
}

.Input:focus {
  border: 2px solid #0055a5;
  box-shadow: 0 0 0 3px #dddddd;
  outline: none;
}

/**
 * Fixes unusably short date inputs in iOS Safari
 * @TODO: figure out why this is happening and address it at the root cause.
 */

.Input[type="date"] {
  min-height: 2.75em;
}

.Input:disabled {
  opacity: 0.5;
}

.Input:disabled,
.Input[readonly]:not(:hover):not(:focus) {
  background: #efefef;
  border-color: #dddddd;
  color: #797482;
}

.Input:not(:focus).has-error {
  border-color: #d12323;
}

.Input--light {
  border-color: hsl(206.75159235668792, 57.3502304147%, 82.5490196078%);
}

.Input--light:hover {
  border-color: hsl(206.75159235668792, 57.3502304147%, 72.5490196078%);
}

.Input--light:focus {
  border: 2px solid hsl(206.75159235668792, 57.3502304147%, 72.5490196078%);
}

/**
 * @define Alert
 */

.Alert {
  background-color: #efefef;
  border-radius: 3px;
  padding: 0.88889rem 1.125rem;
}

/**
 * Style: Emergency
 *
 * To communicate information for use in case of emergency, or high-priority
 * error or danger messaging.
 */

.Alert--emergency {
  background-color: hsl(0, 71.3114754098%, 95.8431372549%);
  color: #d12323;
}

@media print {
  .Alert {
    background: none !important;
    border: 1px solid currentColor;
    margin-bottom: 1rem;
  }
}

/**
 * @define Announcement
 */

.Announcement {
  background-color: #0055a5;
  color: #ffffff;
  padding: 1rem;
}

.Announcement--emergency {
  background-color: #d12323;
}

@media print {
  .Announcement,
  .Announcement--emergency {
    background-color: transparent;
    color: inherit;
  }
}

.Announcement-content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 72rem
}

@media (min-width: 47em) {

.Announcement-content {
    flex-wrap: nowrap
}
  }

.Announcement-message {
  flex: 1
}

@media (min-width: 30em) {

.Announcement-message {
    margin-left: 1rem
}
  }

/**
 * Changes the default styles for any links within
 * the announcement message. These links come from the CMS via
 * markdown, so they will not have a class attribute. We initially
 * used an attribute selector (`a:not([class])`) but this strategy
 * conflicted with the polyfill that programmatically adds a
 * `.focus-visible` class when an element is focused via keyboard
 * input. After losing focus, the element retains an empty class
 * attribute (even though it initially did not have one). For this
 * reason, we need to remember that _any_ focusable element might
 * end up with a class attribute even if it's absent initially.
 *
 * We are violating our typical specificity guidelines here
 * to better support links in content without requiring classes
 * in our HTML. Because this triggers an error with stylelint,
 * it has been disabled here.
 */

/* stylelint-disable */

.Announcement-message a,
.Announcement-message a:focus,
.Announcement-message a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

@media print {
  .Announcement-message a {
    color: inherit;
  }
}

/* stylelint-enable */

/**
 * Creates space between multiple announcements.
 * We are violating our typical specificity guidelines here
 * to create space between content without requiring classes
 * in our HTML. Because this triggers an error with styleslint,
 * it has been disabled here.
 */

/* stylelint-disable */

.Announcement-message > * + * {
  margin-top: 1rem;
}

/* stylelint-enable */

/**
 * @define Band
 */

/**
 * 1. Ideally we would use CSS properties for the start and end values of this
 *    gradient, but this isn't yet supported in the easing-gradients plugin.
 * 2. For best results, choose a number that's divisible by 2.
 *
 * @see https://github.com/larsenwork/postcss-easing-gradients/issues/7
 */

:root { /* 1 */ /* 1 */ /* 2 */ /* 1 */
}

/* stylelint-disable plugin/selector-bem-pattern */

/* stylelint-enable */

/**
 * 1. Make sure the band occupies the full width by default.
 * 2. Allow child elements to position themselves absolutely relative to this
 *    parent element. This will be useful for wave modifiers that overlap inner
 *    or outer content.
 * 3. We need to manage the stack order of waves relative to content. If we
 *    don't also set a `z-index` for the parent element, then those elemetns we
 *    do set it for will overlap in unexpected ways when more than one Band
 *    is adjacent.
 */

.Band {
  color: inherit;
  display: block; /* 1 */
  position: relative; /* 2 */
  width: 100%; /* 1 */
  z-index: 1; /* 3 */
}

/**
 * Invert default text color for dark modifiers.
 *
 * We do this here instead of on `Band-content` to decrease the selector depth
 * by 1, which makes it easier to override.
 * We only apply this for screen and don't want light colors to print.
 */

@media screen {
  .Band--black,
  .Band--dark,
  .Band--darkAlt1,
  .Band--darkAlt2,
  .Band--textureDark {
    color: rgba(255, 255, 255, 0.8);
  }
}

@media screen {
  .Band--texture {
    color: #48453f;
  }
}

.Band--bright,
.Band--white {
  color: #48453f;
}

/**
 * Special responsive band that is silver above the md breakpoint.
 *
 * 1. In case a light text color is established below the md breakpoint.
 */

@media (min-width: 47em) {
  .Band--defaultMd {
    color: inherit; /* 1 */
  }
}

/**
 * Added to bands with a badge.
 *
 * 1. Make sure the band and badge appear above any adjacent bands.
 */

.Band--withBadge {
  z-index: 2; /* 1 */
}

/**
 * Content container. This is a separate element because we want the waves to be
 * able to push it up or down (to avoid having to add a bunch of complicated
 * margins or anything like that).
 *
 * 1. Set some sensible background positioning and sizing defaults so we don't
 *    have to set them for modifiers individually.
 */

.Band-content {
  background-color: #efefef;
  background-repeat: no-repeat; /* 1 */
  background-size: cover; /* 1 */
  position: relative;
}

@media print {
  .Band-content {
    background: none !important;
  }
}

/**
 * Simple style modifiers
 */

.Band--black .Band-content {
  background-color: #363636;
}

.Band--bright .Band-content {
  background-color: #f7dc34;
}

.Band--dark .Band-content {
  background-color: #364958;
}

.Band--darkAlt1 .Band-content {
  background-color: #057a5f;
}

.Band--darkAlt2 .Band-content {
  background-color: #8f528d;
}

.Band--white .Band-content {
  background-color: #ffffff;
}

/**
 * Complex style modifiers
 */

.Band--texture .Band-content {
  background: #efefef;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' opacity='0.025' fill='%23008fc4' stroke='%23008fc4'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E"), linear-gradient(to bottom, hsl(0, 0%, 100%), hsl(0, 0%, 99.78%) 9.99%, hsl(0, 0%, 99.15%) 19.07%, hsl(0, 0%, 98.2%) 27.44%, hsl(0, 0%, 96.99%) 35.26%, hsl(0, 0%, 95.61%) 42.72%, hsl(0, 0%, 94.12%) 50%, hsl(0, 0%, 92.6%) 57.28%, hsl(0, 0%, 91.15%) 64.74%, hsl(0, 0%, 89.85%) 72.56%, hsl(0, 0%, 88.8%) 80.93%, hsl(0, 0%, 88.1%) 90.01%, hsl(0, 0%, 87.84%));
}

.Band--textureDark .Band-content {
  background-color: #364958;
  background-image: linear-gradient(to bottom, hsla(212.4, 31.65%, 30.98%, 0), hsla(212.4, 31.65%, 30.98%, 0.01968) 9.99%, hsla(212.4, 31.65%, 30.98%, 0.07407) 19.07%, hsla(212.4, 31.65%, 30.98%, 0.15625) 27.44%, hsla(212.4, 31.65%, 30.98%, 0.25926) 35.26%, hsla(212.4, 31.65%, 30.98%, 0.37616) 42.72%, hsla(212.4, 31.65%, 30.98%, 0.5) 50%, hsla(212.4, 31.65%, 30.98%, 0.62384) 57.28%, hsla(212.4, 31.65%, 30.98%, 0.74074) 64.74%, hsla(212.4, 31.65%, 30.98%, 0.84375) 72.56%, hsla(212.4, 31.65%, 30.98%, 0.92593) 80.93%, hsla(212.4, 31.65%, 30.98%, 0.98032) 90.01%, hsl(212.4, 31.65%, 30.98%)), url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' opacity='0.05' fill='%23000' stroke='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E");
}

/**
 * Images are sized to maintain their aspect ratio while filling the band.
 * If the image's aspect ratio doesn't match the aspect ratio of its
 * container then the image will be clipped to fit. Can be combined with
 * `band-overlay` to prevent overlay content from overflowing the band.
 */

.Band--allowOverflow .Band-content {
  background-color: transparent;
  overflow: hidden;
  position: relative;
}

/**
 * The image aligns to the top of its container. It is designed this way
 * to accommodate images where the focal point is towards the top so it
 * doesn't get cut off.
 * 1. Horizontally centers the image.
 * 2. Makes the image fill its container.
 * 3. Aligns the image to the top of its container.
 */

.Band--allowOverflow .Band-backdrop {
  left: 50%; /* 1 */
  min-height: 100%; /* 2 */
  -o-object-fit: cover;
     object-fit: cover;  /* 2 */
  position: absolute;  /* 2 */
  top: 0; /* 3 */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); /* 1 */
  width: 100%;  /* 2 */
  z-index: -1;
}

/**
 * Waves are optional, and are intended for before or after the Band-content
 * element.
 *
 * 1. Squash and stretch wave to exactly fit the parent element.
 * 2. Fill all available width.
 * 3. Allow child elements to position themselves relative to this container.
 *    We'll use this to position an element that will fill in any visible seams
 *    caused by browser rounding of the wave SVG.
 */

.Band-wave {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23efefef'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
  background-size: 100% 100%; /* 1 */
  display: block; /* 2 */
  position: relative; /* 3 */
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 100%; /* 2 */
}

@media print {
  .Band-wave {
    display: none !important;
  }
}

/**
 * We assume that a wave that follows the content will be the bottom, so we
 * flip the element.
 */

.Band-content ~ .Band-wave {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/**
 * Layout and direction modifiers
 *
 * These change how the waves affect the content around them, and what direction
 * they flow.
 */

/**
 * Flip waves horizontally
 *
 * We're defining these first because we'll have to account for these transforms
 * in other modifiers as well. (Why oh why didn't transforms get implemented as
 * separate properties?)
 */

.Band-wave--flip {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.Band-content ~ .Band-wave--flip {
  -webkit-transform: scaleX(-1) rotate(180deg);
          transform: scaleX(-1) rotate(180deg);
}

/**
 * Outward waves cover adjacent content.
 *
 * 1. Stop pushing down adjacent content.
 * 2. For the top wave, we move it upward by its height. This is simpler than
 *    pushing up from the bottom because it retains the existing overlap
 *    adjustments.
 * 3. We give outward waves a higher depth than inward ones so they'll overlap
 *    correctly when adjacent.
 */

.Band-wave--out {
  position: absolute; /* 1 */
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%); /* 2 */
  z-index: 2; /* 3 */
}

.Band-wave--flip.Band-wave--out {
  -webkit-transform: scaleX(-1) translateY(-100%);
          transform: scaleX(-1) translateY(-100%);
}

/**
 * Bottom outward waves will be positioned correctly by default, so all we
 * have to do for them is re-apply the rotation that was overridden.
 */

.Band-content ~ .Band-wave--out {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.Band-content ~ .Band-wave--flip.Band-wave--out {
  -webkit-transform: scaleX(-1) rotate(180deg);
          transform: scaleX(-1) rotate(180deg);
}

/**
 * Inward waves will pass over the Band-content element.
 *
 * 1. We set a new default color to be the same as the default body background
 *    color, giving the illusion that the inner content has been masked.
 * 2. Stop the wave from pushing down adjacent elements. This is the only real
 *    positioning logic required for the top wave.
 * 3. Because this now asks as a visual mask, we are inverting its direction,
 *    which means rotating the element.
 * 4. Make sure the waves are over the Band-content element, but not over any
 *    adjacent Band-wave--out elements.
 */

.Band-wave--in {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23ffffff'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E"); /* 1 */
  position: absolute; /* 2 */
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); /* 3 */
  z-index: 1; /* 4 */
}

.Band-wave--flip.Band-wave--in {
  -webkit-transform: scaleX(-1) rotate(180deg);
          transform: scaleX(-1) rotate(180deg);
}

/**
 * Rather than setting `bottom: 0` and making some more complex margin and
 * layout adjustments, we just move the element visually so that it overlaps by
 * its height.
 */

.Band-content ~ .Band-wave--in {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.Band-content ~ .Band-wave--flip.Band-wave--in {
  -webkit-transform: scaleX(-1) translateY(-100%);
          transform: scaleX(-1) translateY(-100%);
}

/**
 * Wave style modifiers
 *
 * We want to support styling of waves individually so that inward waves may
 * be colored to match adjacent content. We also need to maintain the default
 * color of inward waves so that it doesn't match the content element, in which
 * case they would be invisible.
 */

.Band-wave--silver,
.Band--silver .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23efefef'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--black,
.Band--black .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23363636'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--blueLight,
.Band--blueLight .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23efefef'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--bright,
.Band--bright .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23f7dc34'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--dark,
.Band--dark .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23364958'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--darkAlt1,
.Band--darkAlt1 .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23057a5f'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--darkAlt2,
.Band--darkAlt2 .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%238f528d'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--white,
.Band--white .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23ffffff'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

/**
 * Special responsive band that is silver above the md breakpoint.
 */

@media (min-width: 47em) {
  .Band--defaultMd .Band-wave:not(.Band-wave--in) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23efefef'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
  }
}

/**
 * The texture waves are more complex because they have to match the top and
 * bottom of the background gradient.
 */

.Band-wave--texture,
.Band--texture .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23ffffff'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-content ~ .Band-wave--texture,
.Band--texture .Band-content ~ .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23e0e0e0'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-wave--textureDark,
.Band--textureDark .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23364958'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

.Band-content ~ .Band-wave--textureDark,
.Band--textureDark .Band-content ~ .Band-wave:not(.Band-wave--in) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 200 80' preserveAspectRatio='none' fill='%23364d68'%3E %3Cpath d='M 0,50 Q 50,0 100,50 T 200,50 L 200,100 L 0,100 Z'/%3E %3C/svg%3E");
}

/**
 * Wave pseudo element styles
 */

/**
 * We use a padding hack to size the element based on an aspect ratio instead
 * of a fixed height. In supported browsers, we also include a more advanced
 * ratio that makes the height of the wave slightly shallower as the viewport
 * width increases. We do this so that the wave will be nicely proportioned
 * for as many varied viewport sizes as possible, without having to rely on
 * hard "jumps" in size across breakpoints.
 *
 * @see https://css-tricks.com/aspect-ratio-boxes/
 */

.Band-wave::before {
  content: "";
  display: block;
  padding-bottom: 3.125%;
  padding-bottom: calc(3.90625% - 1vw); /* stylelint-disable-line declaration-block-no-duplicate-properties */
}

/**
 * We use a separate pseudo element to position over the seam, where the wave
 * meets the adjacent content. Without this, some browsers at some sizes will
 * show a 1px gap between the wave and the content element. We could overlap
 * the elements themselves, but this wasn't always reliable and led to some
 * tricky layout consequences.
 */

.Band-wave::after {
  background-color: #efefef;
  content: "";
  height: 4px;
  position: absolute;
  top: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}

/**
 * We must re-color this element to match whatever modifier is applied.
 */

.Band-wave--in::after {
  background-color: #ffffff;
}

.Band-wave--silver::after,
.Band--silver .Band-wave:not(.Band-wave--in)::after {
  background-color: #efefef;
}

.Band-wave--bright::after,
.Band--bright .Band-wave:not(.Band-wave--in)::after {
  background-color: #f7dc34;
}

.Band-wave--black::after,
.Band--black .Band-wave:not(.Band-wave--in)::after {
  background-color: #363636;
}

.Band-wave--blueLight::after,
.Band--blueLight .Band-wave:not(.Band-wave--in)::after {
  background-color: #efefef;
}

.Band-wave--dark::after,
.Band--dark .Band-wave:not(.Band-wave--in)::after {
  background-color: #364958;
}

.Band-wave--darkAlt1::after,
.Band--darkAlt1 .Band-wave:not(.Band-wave--in)::after {
  background-color: #057a5f;
}

.Band-wave--darkAlt2::after,
.Band--darkAlt2 .Band-wave:not(.Band-wave--in)::after {
  background-color: #8f528d;
}

.Band-wave--white::after,
.Band--white .Band-wave:not(.Band-wave--in)::after {
  background-color: #ffffff;
}

.Band-wave--texture::after,
.Band--texture .Band-wave:not(.Band-wave--in)::after {
  background-color: #ffffff;
}

.Band-content ~ .Band-wave--texture::after,
.Band--texture .Band-content ~ .Band-wave:not(.Band-wave--in)::after {
  background-color: #e0e0e0;
}

.Band-wave--textureDark::after,
.Band--textureDark .Band-wave:not(.Band-wave--in)::after {
  background-color: #364958;
}

.Band-content ~ .Band-wave--textureDark::after,
.Band--textureDark .Band-content ~ .Band-wave:not(.Band-wave--in)::after {
  background-color: #364d68;
}

/**
 * Special responsive band that is silver above the md breakpoint.
 */

@media (min-width: 47em) {
  .Band--defaultMd .Band-content,
  .Band--defaultMd .Band-wave:not(.Band-wave--in)::after {
    background-color: #efefef;
  }
}

/**
 * Optional overlay content container
 *
 * 1. Center child elements on both axes, excluding padding (4).
 * 2. Optimize text for dark backgrounds.
 * 3. Position on top of content.
 * 4. Since the overlay background fades out from right to left, we want the
 *    content to center itself within the right half.
 */

.Band-overlay {
  align-items: center; /* 1 */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='3600' height='1800' viewBox='0 0 3600 1800'%3E %3Cdefs%3E %3ClinearGradient id='hueGradient' y1='0.66' y2='0.33'%3E %3Cstop offset='33%25' stop-color='%23ab62a9'/%3E %3Cstop offset='60%25' stop-color='%23198199'/%3E %3Cstop offset='85%25' stop-color='%23364d68'/%3E %3Cstop offset='100%25' stop-color='%2329394b'/%3E %3C/linearGradient%3E %3ClinearGradient id='maskFade' y1='0.6' y2='0.4'%3E %3Cstop offset='33%25' stop-color='%23000'/%3E %3Cstop offset='66%25' stop-color='%23fff'/%3E %3C/linearGradient%3E %3ClinearGradient id='textureFade' x2='0' y2='1'%3E %3Cstop offset='0%25' stop-color='%23fff'/%3E %3Cstop offset='100%25' stop-color='%23333'/%3E %3C/linearGradient%3E %3Cmask id='textureMask'%3E %3Crect width='100%25' height='100%25' fill='url(%23textureFade)'/%3E %3C/mask%3E %3Csvg id='texture' viewBox='0 0 850 265' stroke='%23000' fill='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E %3Cmask id='mask'%3E %3Crect width='100%25' height='100%25' fill='url(%23maskFade)'/%3E %3Cg mask='url(%23textureMask)' opacity='0.15'%3E %3Cuse xlink:href='%23texture' width='110%25' x='-5%25' y='-20%25'/%3E %3Cuse xlink:href='%23texture' width='110%25' y='40%25'/%3E %3C/g%3E %3C/mask%3E %3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23hueGradient)' mask='url(%23mask)'/%3E %3C/svg%3E");
  background-position: right;
  background-size: cover;
  color: rgba(255, 255, 255, 0.8); /* 2 */
  display: flex; /* 1 */
  height: 100%; /* 3 */
  justify-content: center; /* 1 */
  left: 0; /* 3 */
  padding-left: 50%; /* 4 */
  position: absolute; /* 3 */
  text-shadow: 0 0.0625em 1em rgba(54, 73, 88, 0.9); /* 2 */
  top: 0; /* 3 */
  width: 100%; /* 3 */
}

@media print {
  .Band-overlay {
    color: inherit;
    text-shadow: none;
  }
}

/**
 * 1. Resets the default padding, allowing for more flexible layouts.
 * 2. Resets the position so that content doesn't overflow.
 */

.Band--allowOverflow .Band-overlay {
  padding-left: 0; /* 1 */
  position: static; /* 2 */
}

.Band-overlay--alignCenter {
  padding-left: 0;
}

/**
 * 1. This overlay style does not darken the background, so we revert some
 *    of the text styles.
 */

.Band-overlay--bright {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='3600' height='1800' viewBox='0 0 3600 1800'%3E %3Cdefs%3E %3ClinearGradient id='hueGradient' y1='0.66' y2='0.33'%3E %3Cstop offset='33%25' stop-color='rgb(255, 255, 255)'/%3E %3Cstop offset='60%25' stop-color='rgb(255, 255, 255)'/%3E %3Cstop offset='85%25' stop-color='rgb(221, 221, 221)'/%3E %3Cstop offset='100%25' stop-color='rgb(213, 214, 214)'/%3E %3C/linearGradient%3E %3ClinearGradient id='maskFade' y1='0.6' y2='0.4'%3E %3Cstop offset='33%25' stop-color='%23000'/%3E %3Cstop offset='66%25' stop-color='%23fff'/%3E %3C/linearGradient%3E %3ClinearGradient id='textureFade' x2='0' y2='1'%3E %3Cstop offset='0%25' stop-color='%23fff'/%3E %3Cstop offset='100%25' stop-color='%23333'/%3E %3C/linearGradient%3E %3Cmask id='textureMask'%3E %3Crect width='100%25' height='100%25' fill='url(%23textureFade)'/%3E %3C/mask%3E %3Csvg id='texture' viewBox='0 0 850 265' stroke='%23000' fill='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E %3Cmask id='mask'%3E %3Crect width='100%25' height='100%25' fill='url(%23maskFade)'/%3E %3Cg mask='url(%23textureMask)' opacity='0.15'%3E %3Cuse xlink:href='%23texture' width='110%25' x='-5%25' y='-20%25'/%3E %3Cuse xlink:href='%23texture' width='110%25' y='40%25'/%3E %3C/g%3E %3C/mask%3E %3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23hueGradient)' mask='url(%23mask)'/%3E %3C/svg%3E");
  color: inherit; /* 1 */
  text-shadow: inherit; /* 1 */
}

.Band-overlay--dark {
  background: rgba(54, 54, 54, 0.5);
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0.0625em 1em rgba(54, 73, 88, 0.9);
}

/**
 * 1. Content is on the left, requiring these overrides.
 * 2. This overlay style does not darken the background, so we revert some
 *    of the text styles.
 */

.Band-overlay--flippedPlain {
  background-image: linear-gradient(70deg, hsl(0, 0%, 97%) 0%, hsl(0, 0%, 94%) 45%, hsla(0, 0%, 90%, 0.8) 55%, hsla(254, 32%, 31%, 0) 70%);
  background-position: left; /* 1 */
  color: inherit; /* 2 */
  justify-content: left; /* 1 */
  padding-left: 0; /* 1 */
  text-shadow: inherit; /* 2 */
}

.Band-overlay--juice {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='3600' height='1800' viewBox='0 0 3600 1800'%3E %3Cdefs%3E %3ClinearGradient id='hueGradient' y1='0.66' y2='0.33'%3E %3Cstop offset='33%25' stop-color='rgb(242, 112, 38)'/%3E %3Cstop offset='60%25' stop-color='hsl(161.25, 71.9101123596%25, 29.9019607843%25)'/%3E %3Cstop offset='85%25' stop-color='hsl(171.25, 71.9101123596%25, 24.9019607843%25)'/%3E %3Cstop offset='100%25' stop-color='hsl(181.25, 71.9101123596%25, 19.9019607843%25)'/%3E %3C/linearGradient%3E %3ClinearGradient id='maskFade' y1='0.6' y2='0.4'%3E %3Cstop offset='33%25' stop-color='%23000'/%3E %3Cstop offset='66%25' stop-color='%23fff'/%3E %3C/linearGradient%3E %3ClinearGradient id='textureFade' x2='0' y2='1'%3E %3Cstop offset='0%25' stop-color='%23fff'/%3E %3Cstop offset='100%25' stop-color='%23333'/%3E %3C/linearGradient%3E %3Cmask id='textureMask'%3E %3Crect width='100%25' height='100%25' fill='url(%23textureFade)'/%3E %3C/mask%3E %3Csvg id='texture' viewBox='0 0 850 265' stroke='%23000' fill='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E %3Cmask id='mask'%3E %3Crect width='100%25' height='100%25' fill='url(%23maskFade)'/%3E %3Cg mask='url(%23textureMask)' opacity='0.15'%3E %3Cuse xlink:href='%23texture' width='110%25' x='-5%25' y='-20%25'/%3E %3Cuse xlink:href='%23texture' width='110%25' y='40%25'/%3E %3C/g%3E %3C/mask%3E %3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23hueGradient)' mask='url(%23mask)'/%3E %3C/svg%3E");
}

.Band-overlay--pebble {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='3600' height='1800' viewBox='0 0 3600 1800'%3E %3Cdefs%3E %3ClinearGradient id='hueGradient' y1='0.66' y2='0.33'%3E %3Cstop offset='33%25' stop-color='hsl(203.33333333333334, 0%25, 53.7254901961%25)'/%3E %3Cstop offset='60%25' stop-color='hsl(203.33333333333334, 18.6440677966%25, 43.7254901961%25)'/%3E %3Cstop offset='85%25' stop-color='hsl(206.47058823529414, 28.9436619718%25, 27.8431372549%25)'/%3E %3Cstop offset='100%25' stop-color='%23364958'/%3E %3C/linearGradient%3E %3ClinearGradient id='maskFade' y1='0.6' y2='0.4'%3E %3Cstop offset='33%25' stop-color='%23000'/%3E %3Cstop offset='66%25' stop-color='%23fff'/%3E %3C/linearGradient%3E %3ClinearGradient id='textureFade' x2='0' y2='1'%3E %3Cstop offset='0%25' stop-color='%23fff'/%3E %3Cstop offset='100%25' stop-color='%23333'/%3E %3C/linearGradient%3E %3Cmask id='textureMask'%3E %3Crect width='100%25' height='100%25' fill='url(%23textureFade)'/%3E %3C/mask%3E %3Csvg id='texture' viewBox='0 0 850 265' stroke='%23000' fill='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E %3Cmask id='mask'%3E %3Crect width='100%25' height='100%25' fill='url(%23maskFade)'/%3E %3Cg mask='url(%23textureMask)' opacity='0.15'%3E %3Cuse xlink:href='%23texture' width='110%25' x='-5%25' y='-20%25'/%3E %3Cuse xlink:href='%23texture' width='110%25' y='40%25'/%3E %3C/g%3E %3C/mask%3E %3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23hueGradient)' mask='url(%23mask)'/%3E %3C/svg%3E");
}

.Band-overlay--sunrise {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='3600' height='1800' viewBox='0 0 3600 1800'%3E %3Cdefs%3E %3ClinearGradient id='hueGradient' y1='0.66' y2='0.33'%3E %3Cstop offset='33%25' stop-color='%23c55c20'/%3E %3Cstop offset='60%25' stop-color='hsl(326.1460957178841, 33.5021097046%25, 51.5294117647%25)'/%3E %3Cstop offset='85%25' stop-color='hsl(290.0452488687783, 27.4534161491%25, 47.6470588235%25)'/%3E %3Cstop offset='100%25' stop-color='hsl(276.62337662337666, 25.6666666667%25, 42.9411764706%25)'/%3E %3C/linearGradient%3E %3ClinearGradient id='maskFade' y1='0.6' y2='0.4'%3E %3Cstop offset='33%25' stop-color='%23000'/%3E %3Cstop offset='66%25' stop-color='%23fff'/%3E %3C/linearGradient%3E %3ClinearGradient id='textureFade' x2='0' y2='1'%3E %3Cstop offset='0%25' stop-color='%23fff'/%3E %3Cstop offset='100%25' stop-color='%23333'/%3E %3C/linearGradient%3E %3Cmask id='textureMask'%3E %3Crect width='100%25' height='100%25' fill='url(%23textureFade)'/%3E %3C/mask%3E %3Csvg id='texture' viewBox='0 0 850 265' stroke='%23000' fill='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E %3Cmask id='mask'%3E %3Crect width='100%25' height='100%25' fill='url(%23maskFade)'/%3E %3Cg mask='url(%23textureMask)' opacity='0.15'%3E %3Cuse xlink:href='%23texture' width='110%25' x='-5%25' y='-20%25'/%3E %3Cuse xlink:href='%23texture' width='110%25' y='40%25'/%3E %3C/g%3E %3C/mask%3E %3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23hueGradient)' mask='url(%23mask)'/%3E %3C/svg%3E");
}

/**
 * Band styling for Juice pages that includes 3 different layers.
 * 1. The first layer is an orange to silver layer that provides contrast
 * for the topmost items in case the picture fails to load.
 * 2. The second layer is the SVG of the orange/yellow geometric background.
 * 3. The third layer is a silver gradient to smooth the transition of the wave.
 */

.Band--juice .Band-content {
  background-image: linear-gradient(to top, #efefef, rgba(239, 239, 239, 0) 10rem), url("/images/prototypes/juice/band-juice-alt.svg"), linear-gradient(to bottom, #e75b07, rgb(239, 239, 239) 15rem);
  background-position: top;
  background-size: auto, auto 100vh, auto;
}

/**
 * This snippet is used to make sure the Juice background is large
 * enough to provide adequate contrast for the topmost items.
 */

@media (orientation: landscape) {
  .Band--juice .Band-content {
    background-size: auto, 100vw auto, auto;
  }
}

/**
 * Badges originate from the WCH library. They are an optional circle with
 * nested icon centered at the bottom of the band.
 * 1. Gives the `div` a circular shape.
 * 2. Icons will inherit this text color.
 * 3. Positions the circle at the bottom center of the band.
 * 4. Make sure that the badge is placed above the band and band waves.
 */

.Band-badge {
  background-color: #d12323;
  border: 2px solid #ffffff;
  border-radius: 50%; /* 1 */
  color: #ffffff; /* 2 */
  display: block;
  height: 4.10989rem;
  left: 50%; /* 3 */
  overflow: hidden;
  position: absolute; /* 3 */
  top: 0; /* 3 */
  width: 4.10989rem;
  z-index: 3; /* 4 */
}

/**
 * In the WCH brand, the badge has a different color when used
 * with `Band--dark`. Instead of manually changing the color
 * with a utility every time badge is used with this modifier,
 * we change the background color here.
 */

.Band--dark .Band-badge {
  background-color: #d12323;
}

/**
 * Top wave badges or bottom inward badges don't need rotation
 */

.Band-badge,
.Band-content ~ .Band-wave--in .Band-badge {
  -webkit-transform: translate(-50%, calc(-53.90625% + 1vw));
          transform: translate(-50%, calc(-53.90625% + 1vw));
}

/**
 * Bottom wave badges or top inward badges do need rotation
 */

.Band-wave--in .Band-badge,
.Band-content ~ .Band-wave:not(.Band-wave--in) .Band-badge {
  -webkit-transform: translate(-50%, calc(-53.90625% + 1vw)) rotate(180deg);
          transform: translate(-50%, calc(-53.90625% + 1vw)) rotate(180deg);
}

/**
 * Centers the icon in the circle using absolute positioning and
 * transformation because it results in the fewest pixel shifts
 * in browsers.
 *
 * @see https://cloudfour.com/thinks/css-circles/#centering-content
 */

.Band-badgeContent {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/**
 * @define Breadcrumbs
 */

/**
 * 1. Visual separation between Breadcrumbs and page content.
 * 2. Easier to tap links on small screens when Breadcrumbs wrap.
 * 3. In order to allow for truncation, items must be display block and
 *    floating. This expands the height of the Breadcrumbs div.
 */

.Breadcrumbs {
  color: #797482;
  display: block;
  font-size: 0.79012rem;
  line-height: 1.77778; /* 2 */
  margin-bottom: 1rem; /* 1 */
  overflow: hidden; /* 3 */
  padding: 0 0 1rem; /* 1 */
}

/**
 * On wider screens, this provides some space between
 * breadcrumbs and page content.
 */

@media (min-width: 64em) {
  .Breadcrumbs {
    margin-bottom: 1.42383rem;
  }
}

/**
 * 1. Getting items all on one line.
 * 2. Keeps the item's text on the same line as its arrow.
 */

.Breadcrumbs-item {
  display: block;
  float: left; /* 1 */
  padding-right: 0.43846rem;
  white-space: nowrap; /* 2 */
}

.Breadcrumbs-link {
  color: inherit;
  text-decoration: underline;
}

.Breadcrumbs-link:hover,
.Breadcrumbs-link:focus,
.Breadcrumbs-link:active {
  color: inherit;
  text-decoration: underline;
}

/**
 * Controls the color of the breadcrumb for the current page.
 */

.Breadcrumbs-active {
  color: #797482;
}

/**
 * Modifications from shared component's styling needed because of switch from
 * display: flex to display: block.
 */

.Breadcrumbs-separator {
  color: #389bda;
  display: inline-block;
  height: 0.88889rem;
  margin-left: 0.43846rem;
  stroke: currentColor;
  stroke-width: 0;
  vertical-align: middle;
  width: 0.88889rem;
}

/**
 * Only the last item in Breadcrumbs is likely to be inordinately long.
 * This truncates it to 80% of the available space.
 */

.Breadcrumbs-item:last-of-type {
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * For use on dark backgrounds.
 */

.Breadcrumbs--dark {
  color: #efefef;
}

.Breadcrumbs--dark .Breadcrumbs-active {
  color: #efefef;
}

.Breadcrumbs--dark .Breadcrumbs-link:hover,.Breadcrumbs--dark .Breadcrumbs-link:focus {
  color: #ffffff;
}

.Breadcrumbs--dark .Breadcrumbs-separator {
  color: #efefef;
}

/**
 * @define Button
 *
 * The `Button` component.
 *
 * Inspired by SUIT CSS button component
 * @see: https://github.com/suitcss/components-button
 */

/**
 * The button classes are best applied to links and buttons.
 * These components can be used in forms, as calls to action, or as part of the
 * general UI of the site/app.
 *
 * 1. Normalize `box-sizing` across all elements that this component could be
 *    applied to.
 * 2. Inherit font styles from ancestor.
 * 3. Normalize `line-height`. For `input`, it can't be changed from `normal` in
 *    Firefox 4+.
 * 4. Prevent button text from being selectable.
 */

.Button {
  background: transparent;
  border-color: currentColor;
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box; /* 1 */
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit; /* 2 */
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  line-height: normal; /* 3 */
  margin: 0;
  padding: 0.88889rem 1.125rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition-duration: 0.2s;
  transition-property: background-color, border-color, color, opacity;
  transition-timing-function: ease;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none; /* 4 */
}

.Button:disabled,
.Button.is-disabled {
  cursor: default;
  opacity: 0.5;
}

/**
 * Hovered links get an underline. If a link has the `Button` class
 * we suppress the underline. (There's an exception for the `Button--link`
 * modifier below.)
 */

.Button:not(:disabled):hover {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

/**
 * Remove excess padding and border in Firefox 4+
 */

.Button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

.Button:focus {
  outline: 1px dotted;
  outline: 4px auto -webkit-focus-ring-color;
}

/**
* Use the focus-visible polyfill to replace the default focus styles on buttons.
* These styles are only shown when elements are focused by the keyboard.
* @see https://github.com/WICG/focus-visible
* The focus-visible class triggers an error with stylelint so it
* has been disabled here.
*
* 1. Remove the outline for all buttons except `Button--link` so that it retains
*    the default focus style.
* 2. Apply custom focus style to all buttons except `Button--link`
*/

/* stylelint-disable plugin/selector-bem-pattern */

/* .js-focus-visible .Button:not(.Button--link):focus {
  outline: none;
}

.js-focus-visible .Button:not(.Button--link)::-moz-focus-inner {
  border: 0;
}

.js-focus-visible .Button:not(.Button--link).focus-visible {
  background-color: var(--color-background-button-default-focus);
  border-color: var(--color-border-button-default-focus);
  box-shadow: 0 0 0 var(--size-focus-outline-width-button) var(--color-border-button-default-focus-shadow);
  color: var(--color-text-button-default-focus);
} */

/**
 * Different brands use different focus styles. The focus styles for each
 * modifier are identified here.
 */

/* .js-focus-visible .Button.Button--primary.focus-visible {
  background-color: var(--color-background-button-primary-focus);
  border-color: var(--color-border-button-primary-focus);
  color: var(--color-text-button-primary);
}

.js-focus-visible .Button.Button--secondary.focus-visible {
  background-color: var(--color-background-button-secondary-focus);
  border-color: var(--color-border-button-secondary-focus);
  color: var(--color-text-button-secondary);
}

.js-focus-visible .Button.Button--tertiary.focus-visible {
  background-color: var(--color-background-button-tertiary-focus);
  border-color: var(--color-border-button-tertiary-focus);
  color: var(--color-text-button-tertiary-focus);
}

.js-focus-visible .Button.Button--subtle.focus-visible {
  background-color: var(--color-background-button-subtle-focus);
  border-color: var(--color-border-button-subtle-focus);
  color: var(--color-text-button-subtle-focus);
}

.js-focus-visible .Button.Button--primaryDark.focus-visible {
  background-color: var(--color-background-button-primary-dark);
  border-color: var(--color-border-button-primary-dark-focus);
  color: var(--color-text-button-primary-dark-base);
}

.js-focus-visible .Button.Button--secondaryDark.focus-visible {
  background-color: var(--color-background-button-secondary-dark-focus);
  border-color: var(--color-border-button-secondary-dark-focus);
  color: var(--color-text-button-secondary-dark);
}

.js-focus-visible .Button.Button--subtleDark.focus-visible {
  background-color: var(--color-background-button-subtle-dark-focus);
  border-color: var(--color-border-button-subtle-dark-focus);
  color: var(--color-text-button-subtle-dark);
}

.js-focus-visible .Button.Button--link.focus-visible {
  color: var(--color-text-button-link-focus);
} */

/* stylelint-enable plugin/selector-bem-pattern */

/**
 * Layout modifiers
 */

.Button--compact {
  padding: 0.49327rem 0.79012rem;
}

/**
 * Stylistic modifiers
 *
 * We use the `:any-link` selector to simplify overriding default link hover
 * styles when we aren't setting color, etc. for various states.
 */

/* To give buttons a consistent appearance on print pages, We use a media
 * query so modifier styles are visible only on screens.
 */

@media screen {
  /* Modifier: Primary */

  .Button--primary,
  .Button--primary:link,
  .Button--primary:visited {
    background-color: #1e75bb;
    border-color: transparent;
    color: #ffffff;
  }

  .Button--primary,
  .Button--primary:any-link {
    background-color: #1e75bb;
    border-color: transparent;
    color: #ffffff;
  }

  .Button--primary:not(:disabled):hover {
    background-color: hsl(206.75159235668792, 72.3502304147%, 47.5490196078%);
    border-color: transparent;
    color: #ffffff;
  }

  .Button--primary:not(:disabled):active {
    background-color: hsl(206.75159235668792, 72.3502304147%, 37.5490196078%);
    border-color: transparent;
  }

  /* Modifier: Secondary */

  .Button--secondary,
  .Button--secondary:link,
  .Button--secondary:visited {
    background-color: #198199;
    border-color: transparent;
    color: #ffffff;
  }

  .Button--secondary,
  .Button--secondary:any-link {
    background-color: #198199;
    border-color: transparent;
    color: #ffffff;
  }

  .Button--secondary:not(:disabled):hover {
    background-color: hsl(191.25, 71.9101123596%, 39.9019607843%);
    color: #ffffff;
  }

  .Button--secondary:not(:disabled):active {
    background-color: hsl(191.25, 71.9101123596%, 29.9019607843%);
  }

  /* Modifier: Tertiary */

  .Button--tertiary,
  .Button--tertiary:link,
  .Button--tertiary:visited {
    background-color: rgba(0, 116, 140, 0);
    border-color: #0055a5;
    color: #0055a5;
  }

  .Button--tertiary,
  .Button--tertiary:any-link {
    background-color: rgba(0, 116, 140, 0);
    border-color: #0055a5;
    color: #0055a5;
  }

  .Button--tertiary:not(:disabled):hover {
    background-color: rgba(0, 116, 140, 0);
    border-color: #00748c;
    color: #00748c;
  }

  .Button--tertiary:not(:disabled):active {
    background-color: rgba(0, 116, 140, 0.05);
    border-color: #0055a5;
  }

  /* Modifier: Subtle */

  .Button--subtle,
  .Button--subtle:link,
  .Button--subtle:visited {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
    color: #0055a5;
  }

  .Button--subtle,
  .Button--subtle:any-link {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
    color: #0055a5;
  }

  .Button--subtle:not(:disabled):hover {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.2);
    color: #00748c;
  }

  .Button--subtle:not(:disabled):active {
    background-color: rgba(0, 116, 140, 0.05);
    color: #0055a5;
  }

  /* Modifier: Primary Dark */

  .Button--primaryDark,
  .Button--primaryDark:link,
  .Button--primaryDark:visited {
    background-color: #ffffff;
    border-color: transparent;
    color: #1e75bb;
  }

  .Button--primaryDark,
  .Button--primaryDark:any-link {
    background-color: #ffffff;
    border-color: transparent;
    color: #1e75bb;
  }

  .Button--primaryDark:not(:disabled):hover {
    background-color: #ffffff;
    color: hsl(206.75159235668792, 72.3502304147%, 57.5490196078%);
  }

  .Button--primaryDark:not(:disabled):active {
    opacity: 0.6;
  }

  /* Modifier: Secondary Dark */

  .Button--secondaryDark,
  .Button--secondaryDark:link,
  .Button--secondaryDark:visited {
    background-color: rgba(255, 255, 255, 0);
    border-color: #ffffff;
    color: #ffffff;
  }

  .Button--secondaryDark,
  .Button--secondaryDark:any-link {
    background-color: rgba(255, 255, 255, 0);
    border-color: #ffffff;
    color: #ffffff;
  }

  .Button--secondaryDark:not(:disabled):not(:active):hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  .Button--secondaryDark:not(:disabled):active {
    background-color: rgba(255, 255, 255, 0);
    color: #ffffff;
    opacity: 0.6;
  }

  /* Modifier: Subtle Dark */

  .Button--subtleDark,
  .Button--subtleDark:link,
  .Button--subtleDark:visited {
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
  }

  .Button--subtleDark,
  .Button--subtleDark:any-link {
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
  }

  .Button--subtleDark:not(:disabled):not(:active):hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
  }

  .Button--subtleDark:not(:disabled):active {
    background-color: rgba(255, 255, 255, 0);
    color: #ffffff;
    opacity: var(--number-opacity-button-subtle-dark);
  }
}

/**
 * Modifier: Link
 *
 * Make Button look more like a link. Useful for when we want link
 * styles but a button is a more appropriate semantic element.
 *
 * 1. Just in case they wish to restore the border with utilities, we only
 *    override the width.
 * 2. We reset all font properties to make sure it mimics surrounding content.
 * 3. Match the interactive behavior of links by changing colors and adding an
 *    underline when hovered.
 * 4. With only text to distinguish themselves, link buttons don't look
 *    particularly disabled without some additional desaturation.
 */

.Button--link {
  border-width: 0; /* 1 */
  color: #0055a5;
  font: inherit; /* 2 */
  padding: 0;
}

.Button--link:not(:disabled):hover {
  background-color: transparent;
  color: #00748c; /* 3 */
  text-decoration: underline; /* 3 */
}

.Button--link:disabled {
  color: #797482; /* 4 */
}

/**
 * Modifier: Blank
 *
 * Make Button visually blank, essentially creating a spacer button
 * to maintain alignment with other, selectable buttons.
 */

.Button--blank {
  background: #efefef;
  border-color: #efefef;
  color: #efefef;
  cursor: default;
  opacity: 0.5;
}

.Button--blank:not(:disabled):hover,
.Button--blank:not(:disabled):active {
  background-color: #efefef;
  color: #efefef;
}

/**
 * @define CalendarDate
 */

/**
 * 1. It's a little redundant to declare border-radius here, but without it the
 *    box-shadow will appear incorrect.
 * 2. Allow this element to flow inline with surrounding content.
 * 3. Disallow text selection, which looks awkward on this element.
 * 4. Prevent long text from disrupting size of element.
 */

.CalendarDate {
  border-radius: 3px; /* 1 */
  box-shadow: 0 1px 1px rgba(54, 54, 54, 0.09);
  display: inline-flex; /* 2 */
  flex-direction: column;
  height: 2.88651em;
  transition: box-shadow 0.2s ease;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none; /* 3 */
  vertical-align: middle;
  white-space: nowrap; /* 4 */
  width: 2.88651em;
}

/**
 * The `<time>` element is the most appropriate semantic element to use, so we
 * have to support this being _inside_ of a link rather than the link itself.
 */

:link:hover .CalendarDate,:visited:hover .CalendarDate,:link:focus .CalendarDate,:visited:focus .CalendarDate {
  box-shadow: 0 1px 6px 2px rgba(54, 54, 54, 0.1);
}

:any-link:hover .CalendarDate,:any-link:focus .CalendarDate {
  box-shadow: 0 1px 6px 2px rgba(54, 54, 54, 0.1);
}

/**
 * Styles common to both month and day containers.
 *
 * 1. Center content within this element. We use this instead of `text-align`
 *    because it takes fewer properties than managing padding, height, etc.
 */

.CalendarDate-month,
.CalendarDate-day {
  align-items: center; /* 1 */
  display: flex; /* 1 */
  justify-content: center; /* 1 */
  line-height: 1;
  overflow: hidden;
}

/**
 * Month container (top)
 *
 * 1. Stick to a specific size.
 * 2. We capitalize this element so it will be more readable at a small size,
 *    and to align better in a long, short container (no long descenders).
 */

.CalendarDate-month {
  background-color: #1e75bb;
  border: 1px solid transparent;
  border-bottom-color: #0055a5;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #ffffff;
  flex: 0 0 1.60181em; /* 1 */
  font-size: 0.79012em;
  text-transform: uppercase; /* 2 */
  transition: background-color 0.2s ease;
}

:link:hover .CalendarDate-month,:visited:hover .CalendarDate-month,:link:focus .CalendarDate-month,:visited:focus .CalendarDate-month {
  background-color: #00748c;
}

:any-link:hover .CalendarDate-month,:any-link:focus .CalendarDate-month {
  background-color: #00748c;
}

@media print {
  .CalendarDate-month {
    border: 1px solid #0055a5;
    color: #0055a5;
  }
}

/**
 * Day container (bottom)
 *
 * 1. Occupy all available space without overloading container.
 * 2. Text balance looks somewhat off without this "magic" number of padding.
 *    ¯\_(ツ)_/¯
 */

.CalendarDate-day {
  background: #ffffff;
  border: 1px solid rgb(206, 205, 207);
  border-bottom-color: rgb(196, 195, 198);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top-width: 0;
  color: #0055a5;
  flex: 1 1 0%; /* 1 */
  padding-bottom: 0.1em; /* 2 */
  transition: color 0.2s ease;
}

:link:hover .CalendarDate-day,:visited:hover .CalendarDate-day,:link:focus .CalendarDate-day,:visited:focus .CalendarDate-day {
  color: #00748c;
}

:any-link:hover .CalendarDate-day,:any-link:focus .CalendarDate-day {
  color: #00748c;
}

/**
 * @define Card
 */

:root {
  /* stylelint-disable custom-property-empty-line-before */

  /* stylelint-enable custom-property-empty-line-before */
}

/**
 * Apply color to the base class and the `:any-link` pseudo class to ensure
 * base color is applied even if the element is a link. Use `Card-linkHint` to
 * communicate key link text via color.
 */

.Card,
.Card:link,
.Card:visited {
  color: #000000;
}

.Card,
.Card:any-link {
  color: #000000;
}

/**
 * 1. Although these elements would stack even as blocks, we want the content
 *    area to stretch when inside of a flex container.
 * 2. Helps to prevent moving Cards unnecessarily to the next page in print
 *    while avoiding page breaks within a Card, especially when using the
 *    article element.
 * 3. Some descendents may benefit from relative positioning. This also makes it
 *    easier if content needs to position itself absolutely.
 * 4. If the element is inside of a flex container but has narrow content, this
 *    prevents it from visually collapsing to one side.
 */

.Card {
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(54, 54, 54, 0.09);
  display: flex; /* 1 */
  flex-direction: column; /* 1 */
  page-break-before: avoid; /* 2 */
  page-break-inside: avoid; /* 2 */
  position: relative; /* 3 */
  transition: box-shadow 0.2s ease;
  width: 100%; /* 4 */
}

@media print {
  .Card {
    background: none !important;
    border: 1px solid currentColor;
    box-shadow: none;
  }
}

/**
 * Prevent accidental and unattractive text selection for clumsy fingers.
 */

.Card:link,.Card:visited {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.Card:any-link {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/**
 * Subtle modifiers
 */

.Card--filled {
  background-color: #efefef;
}

/**
 * This modifier does not have a box shadow because the box shadow will
 * show through the semi-transparent background.
 */

.Card--glassy {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
}

/**
 * Stylized modifiers
 */

.Card--aqua,
.Card--aqua:link,
.Card--aqua:visited,
.Card--juice,
.Card--juice:link,
.Card--juice:visited,
.Card--pebble,
.Card--pebble:link,
.Card--pebble:visited,
.Card--sunrise,
.Card--sunrise:link,
.Card--sunrise:visited {
  color: rgba(255, 255, 255, 0.8);
}

.Card--aqua,
.Card--aqua:any-link,
.Card--juice,
.Card--juice:any-link,
.Card--pebble,
.Card--pebble:any-link,
.Card--sunrise,
.Card--sunrise:any-link {
  color: rgba(255, 255, 255, 0.8);
}

/**
 * 1. These modifiers overlay images with content, so we need to add some top
 *    padding to allow the imagery to "peek" out above the content.
 * 2. We add a text shadow to improve readability of the light text on a
 *    varied background.
 */

.Card--aqua,
.Card--juice,
.Card--pebble,
.Card--sunrise {
  padding-top: 33.33333%; /* 1 */
  text-shadow: 0 0.0625em 1em rgba(54, 73, 88, 0.9); /* 2 */
}

@media print {
  /**
  * 1. Eliminates space for hero image that isn't shown in print.
  */

  .Card--aqua,
  .Card--juice,
  .Card--pebble,
  .Card--sunrise {
    color: #000000;
    padding-top: 0; /* 1 */
    text-shadow: none;
  }
}

.Card--aqua {
  background-color: rgb(98, 114, 161);
}

.Card--juice {
  background-color: rgb(245, 166, 45);
}

.Card--pebble {
  background-color: hsl(203.33333333333334, 18.6440677966%, 53.7254901961%);
}

.Card--sunrise {
  background-color: hsl(51.692307692307686, 92.4170616114%, 68.6274509804%);
}

/**
 * We use a pseudo element for positioning a gradient/image overlay so that it
 * will overlap all content elements (since multiple are supported).
 */

.Card--aqua::after,
.Card--juice::after,
.Card--pebble::after,
.Card--sunrise::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.Card--aqua::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' opacity='0.05' fill='%23000' stroke='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E"), linear-gradient(190deg, rgba(171, 98, 169, 0), rgba(171, 98, 169, 0.4) 25%, rgba(25, 129, 153, 0.85), #364958);
}

.Card--juice::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' opacity='0.05' fill='%23000' stroke='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E"), linear-gradient(190deg, rgba(242, 112, 38, 0), rgba(242, 112, 38, 0.4) 25%, hsla(161.25, 71.9101123596%, 29.9019607843%, 0.85), hsl(181.25, 71.9101123596%, 19.9019607843%));
}

.Card--pebble::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' opacity='0.05' fill='%23fff' stroke='%23fff'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E"), linear-gradient(190deg, hsla(203.33333333333334, 58.6440677966%, 53.7254901961%, 0), hsla(203.33333333333334, 48.6440677966%, 53.7254901961%, 0.4) 25%, hsla(206.47058823529414, 28.9436619718%, 27.8431372549%, 0.85), #364958);
}

.Card--sunrise::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' opacity='0.05' fill='%23000' stroke='%23000'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E"), linear-gradient(190deg, rgba(197, 92, 32, 0), rgba(197, 92, 32, 0.3) 25%, rgba(171, 98, 169, 0.85), hsl(225.23809523809524, 25.0996015936%, 40.7843137255%));
}

/**
 * The WCH flag is larger than the other brands. We're adding padding to the top
 * of the card to avoid overlap. If the card has an image we don't need the
 * extra padding, so we only add it when `Card-content` comes first.
 */

.Card--withFlag .Card-content:first-child {
  padding-top: 1.125em;
}

/**
 * Optional header container
 */

.Card-header {
  background-color: #0055a5;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  color: #ffffff;
  flex: 1 0 auto;
  padding: 1.125em 1.125em;
}

.Card-header--bright {
  background-color: #d12323;
}

.Card-header--brightAlt {
  background-color: #f7dc34;
  color: #48453f;
}

.Card-header--dark {
  background-color: #057a5f;
}

.Card-header--darkAlt {
  background-color: #ab62a9;
}

/**
 * Required content container
 *
 * 1. Grow to fill available space. All three shorthand values are specified
 *    because some browsers freak out when `flex-basis` is not defined.
 * 2. Needed so that text in aqua, juice and pebble cards will be legible.
 */

.Card-content {
  border-radius: inherit;
  flex: 1 0 auto; /* 1 */
  padding: 1.125em 1.125em;
  z-index: 1; /* 2 */
}

/**
 * Adjacent content elements
 *
 * 1. Separate with a slight border visually.
 * 2. Prevents the border between content sections from rounding when the
      card has rounded corners.
 * 3. Prevent subsequent content elements from stretching evenly, since
 *    subsequent content elements are often used for secondary or tertiary
 *    content.
 * 4. The dates for article cards would not respond to the hover effects,
      changing the z-index fixes this.
 */

.Card-content + .Card-content {
  border-top: 1px solid rgba(54, 54, 54, 0.06); /* 1 */
  border-top-left-radius: 0; /* 2 */
  border-top-right-radius: 0; /* 2 */
  flex: 0 0 auto; /* 3 */
  z-index: auto; /* 4 */
}

/**
 * This class is applied to a link within the card. The hover and focus effects
 * will appear to apply to the entire card.
 *
 * 1. In order for the link to appear to "cover" the entire card, it must be
 *    positioned relative to the card. This overrides any positioning gained
 *    from other classes applied to the same element, in particular .Button's
 *    position of relative.
 */

.Card-primaryAction {
  position: static; /* 1 */
  transition: color 0.2s ease;
}

.Card-primaryAction:hover {
  text-decoration: none;
}

.Card-primaryAction::after {
  border-radius: 3px;
  box-shadow: 0 1px 6px 2px rgba(54, 54, 54, 0.1);
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 2;
}

.Card-primaryAction:hover::after,.Card-primaryAction:focus::after {
  opacity: 1;
}

/**
 * Can be used to make other elements in the card interactive
 * when there is already a primary action.
 */

.Card-content .Card-secondaryAction {
  position: relative;
  z-index: 3;
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Since we want other links in the card to still function as links, we need to
 * disable the above for all links that do not have the `Card-primaryAction`
 * class. Disabling stylelint so we can sneak in a child element selector.
 */

.Card-content a:not(.Card-primaryAction) {
  position: relative;
  z-index: 3;
}

/* stylelint-enable */

.Card--aqua .Card-content + .Card-content,
.Card--juice .Card-content + .Card-content,
.Card--pebble .Card-content + .Card-content,
.Card--sunrise .Card-content + .Card-content {
  border-top-color: rgba(54, 54, 54, 0.2);
}

/**
 * Optional hero element
 *
 * 1. The hover/focus effect of the link modifier prevents us from setting
 *    `overflow` to `hidden` on the containing element, so we need to do so
 *    here while inheriting the relevant border radii so corners are consistent.
 * 2. Prevent this cell from growing or shrinking past what its size would be
 *    if it were not in a flex container. Keeps sizing of cards more consistent.
 */

.Card-hero {
  border-top-left-radius: inherit; /* 1 */
  border-top-right-radius: inherit; /* 1 */
  flex: 0 0 auto; /* 2 */
  overflow: hidden; /* 1 */
}

/**
 * Stylized modifies overlay content, so we need to position the image so that
 * it will fill the background of its container.
 */

.Card--aqua .Card-hero,
.Card--juice .Card-hero,
.Card--pebble .Card-hero,
.Card--sunrise .Card-hero {
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * The actual image/embed/whatever representing the hero should be full-width
 * and with none of the gaps inherent in `inline-block` elements.
 */

.Card-heroObject {
  display: block;
  width: 100%;
}

/**
 * 1. For stylized modifiers, we want the images to fill all available space.
 * 2. Prevent the image from squashing or stretching awkwardly.
 */

.Card--aqua .Card-heroObject,
.Card--juice .Card-heroObject,
.Card--pebble .Card-heroObject,
.Card--sunrise .Card-heroObject {
  height: 100%; /* 1 */
  -o-object-fit: cover;
     object-fit: cover; /* 2 */
}

@media screen {
  .Card--aqua .Card-primaryAction,
  .Card--juice .Card-primaryAction,
  .Card--pebble .Card-primaryAction,
  .Card--sunrise .Card-primaryAction {
    color: rgba(255, 255, 255, 0.8);
  }

  .Card--aqua .Card-primaryAction:hover,.Card--aqua .Card-primaryAction:focus,
  .Card--juice .Card-primaryAction:hover,
  .Card--juice .Card-primaryAction:focus,
  .Card--pebble .Card-primaryAction:hover,
  .Card--pebble .Card-primaryAction:focus,
  .Card--sunrise .Card-primaryAction:hover,
  .Card--sunrise .Card-primaryAction:focus {
    color: #ffffff;
  }
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Disabling stylelint to use a child element selector for all links without
 * this class. Specifying screen so we won't have to disable stylelint twice
 * for print which should not get these styles.
 */

@media screen {
  .Card--aqua a:not([class]),
  .Card--juice a:not([class]),
  .Card--pebble a:not([class]),
  .Card--sunrise a:not([class]) {
    color: #ffffff;
    text-decoration: underline;
  }
}

/* stylelint-enable */

/**
 * A small flag/badge displayed in the corner of a card to call attention
 */

.Card-flag {
  background-color: #198199;
  border-radius: 3px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.6243rem;
  font-weight: 600;
  left: auto;
  left: initial;
  padding: 0.2rem 0.4rem;
  position: absolute;
  right: 0.5rem;
  text-transform: uppercase;
  top: 0.5rem;
  z-index: 1;
}

.Card--stories .Card-flag {
  background-color: #057a5f;
}

.Card--charity .Card-flag {
  background-color: #d12323;
}

.Card--quality .Card-flag {
  background-color: #ab62a9;
}

/** @define Checklist */

.Checklist {
  list-style: none;
  padding-left: 0;
}

/**
 * 1. De-emphasize checkmark icon to keep attention on text.
 */

/**
 * Child items
 *
 * We disable our selector warnings because it makes the pattern simpler to use
 * without requiring a class, and because we're applying layout on the parent
 * element it's really a bad idea to override these styles anyway.
 */

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * 1. Arrange checkmark icon with list item horizontally.
 * 2. Match size of checkmark icon to list item's text size.
 * 3. Makes sure the checkmarks are printed even though they're background
 *    images.
 */

.Checklist > * {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' opacity='0.5' stroke='%23363636'%3E %3Ccircle cx='12' cy='12' r='10' fill='none' stroke-width='2'/%3E %3Cpolyline stroke-width='2' fill='none' points='6,13 11,17 17,7'/%3E %3C/svg%3E");
  background-position: 0 0.19487rem; /* 1 */
  background-repeat: no-repeat;
  background-size: 1rem auto; /* 2 */
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  display: block;
  padding-left: 1.42383rem;
}

/* stylelint-enable */

/** @define Circle */

/**
 * 1. Establish a background color in case the element isn't filled by an image
 *    (or while image is loading).
 * 2. Round the corners by half the element's size, resulting in a circle.
 * 3. Set the text color, preferably to something with contrast against the
 *    background color.
 * 4. Make behavior consistent between block and inline elements.
 * 5. Hide any content that extends outside the circle.
 * 6. Allow children to position themselves relative to this element.
 * 7. Add CSS shape properties so that content flows around shape when `Circle`
 *    has a float applied.
 * 8. Hack: Helps prevent overflow issues that can arise by transforming any
 *    parent elements.
 */

.Circle,
.Circle--map {
  background-color: #389bda; /* 1 */
  border-radius: 50%; /* 2 */
  color: #ffffff; /* 3 */
  display: block; /* 4 */
  overflow: hidden; /* 5 */
  position: relative; /* 6 */
  shape-margin: 1rem; /* 7 */
  shape-outside: circle(); /* 7 */
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0); /* 8 */
}

/**
 * Modifier: with shadow
 *
 * 1. Inherit circular shape of parent.
 * 2. First shadow minimizes edge pixels, second applies inner shadow.
 * 3. Forces pseudo element visibility.
 * 4. Dimensions.
 * 5. Positioning.
 */

.Circle--withShadow::after {
  border-radius: inherit; /* 1 */
  box-shadow: 0 0 0 1px rgba(54, 54, 54, 0.2), inset 0 0 0 0.49327rem rgba(54, 54, 54, 0.2); /* 2 */
  content: ""; /* 3 */
  height: 100%; /* 4 */
  left: 0; /* 5 */
  position: absolute; /* 5 */
  top: 0; /* 5 */
  width: 100%; /* 4 */
}

/**
 * Modifier: fill
 *
 * No background so color doesn't show through edges.
 */

.Circle--fill {
  background-color: transparent;
}

/**
 * Hack: Maintain 1:1 aspect ratio regardless of width.
 */

.Circle::before {
  content: "";
  display: block;
  padding-bottom: 100%;
  width: 100%;
}

/**
 * Removing the padding for styling inteded for Google Maps intigration
 */

.Circle--map::before {
  content: "";
  display: block;
  padding-bottom: 0;
  width: 100%;
}

.Circle--map {
  height: 0;
  padding-bottom: 100%;
}

/**
 * Centered content
 */

.Circle-content {
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/**
 * Fill content
 */

.Circle--fill .Circle-content {
  height: 100%;
  max-width: none;
  min-width: 100%;
  width: auto;
}

/**
 * @define Collapse
 */

/**
 * Heading Element
 *
 * disable native heading styles
 */

/* stylelint-disable */

.Collapse-heading,
.wf-active .Collapse-heading {
  font: inherit;
}

/* stylelint-enable */

.Collapse-heading {
  color: inherit;
  margin: 0;
}

/**
 * Button Element
 *
 * disable native button styles
 */

.Collapse-button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  width: 100%;
}

.Collapse-button:disabled {
  cursor: default;
}

/**
 * Add custom focus styles to the collapse buttons.
 *
 * These styles use our addFocusRing mixin to add a colored ring around the
 * button when it is keyboard focused. We override the mixin's bottom, top,
 * left, and right properties to improve the positioning of this ring.
 */

/**
   * If the element is `position: static` then the absolutely positioned
   * pseudo-element will display in the wrong spot.
   */

.Collapse-button {
    position: relative;
  }

/**
   * Disable default focus styles
   */

.js-focus-visible .Collapse-button:focus {
    outline: 0;
  }

/**
   * Disable Firefox's special focus styles
   * @see https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
   */

.Collapse-button::-moz-focus-inner {
    border: none;
  }

/**
   * Add our focus ring!
   *
   * We use a pseudo element instead of applying a border directly so we can add
   * visually attractive focus rings without havin to change the element's
   * tap target.
   *
   * By default the pseudo element's width and height matches the parent
   * element's size. You can easily adjust this on a specific element by
   * changing its bottom/top/left/right properties.
   */

.js-focus-visible .Collapse-button.focus-visible::after {
    border: 1px solid #00748c;
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

/* stylelint-disable plugin/selector-bem-pattern */

.js-focus-visible .Collapse-button.focus-visible::after {
  border: 1px solid #00748c;
  border-radius: 8px;
  bottom: -0.49327rem;
  left: -0.34644rem;
  right: -0.34644rem;
  top: -0.49327rem;
}

/* stylelint-enable */

/**
 * Make Collapse Icon Inflexible
 *
 * Typically the icon in the Collapse header is part of a flex layout. This
 * prevents the icon from shrinking below it's intended size.
 */

/* stylelint-disable plugin/selector-bem-pattern */

.Collapse-heading .Icon {
  flex: none;
}

/* stylelint-enable */

/**
 * Modifier: Divider
 *
 * Using a semi-transparent border color so it will show up on white and silver
 * backgrounds, the most common use cases.
 *
 * We switch the element the border applies to depending on the state to
 * maintain the appearance of the item expanding.
 */

.Collapse:not(.is-open) .Collapse-label--divider,
.Collapse.is-open  .Collapse-label--divider ~ .Collapse-content {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/**
 * Unlike the other brands, WCH doesn't have a divider beneath the last
 * Collapse section. We hide it by setting the border width to 0.
 */

.Collapse:not(.is-open):last-child .Collapse-label--divider,
.Collapse.is-open:last-child  .Collapse-label--divider ~ .Collapse-content {
  border-bottom-width: 1px;
}

/**
 * Hides the label's bottom border when Collapse is disabled
 * because its content is now always visible.
 * The option to never have a bottom border was added for the WCH
 * brand, but the styles to accommodate that could overrule these
 * styles. The :last-child portion of this selector was added to
 * address that.
 */

@media (min-width: 47em) {
  .Collapse.is-disabled .Collapse-label--divider,
  .Collapse.is-disabled .Collapse-label--divider ~ .Collapse-content,
  .Collapse.is-disabled:last-child .Collapse-label--divider ~ .Collapse-content {
    border-bottom-width: 0;
  }
}

@media (min-width: 64em) {
  .Collapse.is-disabled .Collapse-label--divider,
  .Collapse.is-disabled .Collapse-label--divider ~ .Collapse-content,
  .Collapse.is-disabled:last-child .Collapse-label--divider ~ .Collapse-content {
    border-bottom-width: 0;
  }
}

/**
 * Optional footnote that is hidden via an opacity change when the Collapse is
 * open.
 */

.Collapse-footnote {
  opacity: 0;
  transition: opacity 0.2s;
}

.Collapse-footnote.is-shown {
  opacity: 1;
}

/**
 * Ensures all content on the page is visible when printed.
 */

@media print {
  .Collapse-content[hidden] {
    display: block !important;
  }
}

/** @define Comparison */

/**
 * A modifier can be used to specify the breakpoint at which
 * the layout should change.
 */

@media (min-width: 30em) {

.Comparison--horizontalSm {
    display: flex
}
  }

@media (min-width: 47em) {

.Comparison--horizontalMd {
    display: flex
}
  }

@media (min-width: 64em) {

.Comparison--horizontalLg {
    display: flex
}
  }

.Comparison-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/**
 * Wraps the divider
 */

.Comparison-divider {
  align-items: center;
  display: flex;
  margin: 1.80203rem 0;
}

/**
 * Creates a dividing line between the two sections.
 * The divider has a horizontal orientation by default.
 */

.Comparison-divider::before,
.Comparison-divider::after {
  background: #dddddd;
  content: "";
  display: block;
  flex: 1;
  height: 2px;
}

/**
 * When the layout changes, the orientation of the divider also
 * changes. We are violating our typical specificity guidelines
 * here to make the divider vertical. We use a mixin to change
 * the orientation of the divider. Because this triggers an
 * error with stylelint, it has been disabled here.
 */

/* stylelint-disable */

@media (min-width: 30em) {

.Comparison--horizontalSm .Comparison-divider {
    flex-direction: column;
    margin: 0 1.80203rem
}
  }

@media (min-width: 47em) {

.Comparison--horizontalMd .Comparison-divider {
    flex-direction: column;
    margin: 0 1.80203rem
}
  }

@media (min-width: 64em) {

.Comparison--horizontalLg .Comparison-divider {
    flex-direction: column;
    margin: 0 1.80203rem
}
  }

/**
 * We use a mixin to change the height and width properties of
 * the divider.
 */

@media (min-width: 30em) {

.Comparison--horizontalSm .Comparison-divider::before,
.Comparison--horizontalSm .Comparison-divider::after {
    height: auto;
    width: 2px
}
  }

@media (min-width: 47em) {

.Comparison--horizontalMd .Comparison-divider::before,
.Comparison--horizontalMd .Comparison-divider::after {
    height: auto;
    width: 2px
}
  }

@media (min-width: 64em) {

.Comparison--horizontalLg .Comparison-divider::before,
.Comparison--horizontalLg .Comparison-divider::after {
    height: auto;
    width: 2px
}
  }

/* stylelint-enable */

/**
 * 1. Centers the text.
 * 2. Creates a circular container around the text.
 */

.Comparison-dividerInner {
  align-items: center; /* 1 */
  background: #dddddd; /* 2 */
  border-radius: 50%; /* 2 */
  display: flex; /* 1 */
  height: 2.2807rem; /* 2 */
  justify-content: center; /* 1 */
  margin: 0.70233rem;
  width: 2.2807rem; /* 2 */
}

/** @define DotLeader */

.DotLeader {
  align-items: flex-end;
  display: flex;
}

/**
 * Slightly nicer alignment for Dot Leader sets with one or
 * both items being long enough to wrap in browsers that support grid.
 */

@supports (display: grid) {
  .DotLeader {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(-webkit-min-content, 1fr) minmax(-webkit-min-content, -webkit-max-content);
    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, max-content);
  }
}

/**
 * 1. Using pseudo content to create the dots between items and we need this
 *    keep the dots from running into the second item in the pair.
 */

.DotLeader-start {
  flex: 1;
  overflow-x: hidden; /* 1 */
}

.DotLeader-between {
  position: relative;
  white-space: nowrap;
}

.DotLeader-between::after {
  content:
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024"
    "\2024\2024\2024\2024\2024\2024\2024\2024\2024\2024";
  left: 0.34644rem;
  position: absolute;
}

.DotLeader-end {
  padding-left: 0.34644rem;
  text-align: right;
}

/**
 * Error is usually used in combination with the input element to style
 * error messages.
 * 1. Make sure field message is full width in case parent element
 *    uses `display: flex`.
 * 2. Make line-height the size of the text for tighter spacing.
 * 3. Make sure message comes last when using flex ordering
 *    utilites on other `Field` elements.
 */

.Error {
  color: #d12323;
  flex: none;
  font-size: inherit;
  line-height: inherit; /* 1 */
  order: initial; /* 2 */
}

/** @define FlexEmbed */

/** @define FlexEmbed */

/**
 * Flexible media embeds
 *
 * For use with media embeds – such as videos, slideshows, or even images –
 * that need to retain a specific aspect ratio but adapt to the width of their
 * containing element.
 *
 * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 */

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

/**
 * The aspect-ratio hack is applied to an empty element because it allows
 * the component to respect `max-height`. Default aspect ratio is 1:1.
 */

.FlexEmbed-ratio {
  display: block;
  padding-bottom: 100%;
  width: 100%;
}

/**
 * Modifier: 3:1 aspect ratio
 */

.FlexEmbed-ratio--3by1 {
  padding-bottom: 33.33333%;
}

/**
 * Modifier: 2:1 aspect ratio
 */

.FlexEmbed-ratio--2by1 {
  padding-bottom: 50%;
}

/**
 * Modifier: 16:9 aspect ratio
 */

.FlexEmbed-ratio--16by9 {
  padding-bottom: 56.25%;
}

/**
 * Modifier: 4:3 aspect ratio
 */

.FlexEmbed-ratio--4by3 {
  padding-bottom: 75%;
}

/**
 * Fit the content to the aspect ratio
 */

.FlexEmbed-content {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 30em) {
  /**
   * Modifier: 3:1 aspect ratio
   */
  .FlexEmbed-ratio--sm-3by1 {
    padding-bottom: 33.33333%;
  }
  /**
   * Modifier: 2:1 aspect ratio
   */
  .FlexEmbed-ratio--sm-2by1 {
    padding-bottom: 50%;
  }
  /**
   * Modifier: 16:9 aspect ratio
   */
  .FlexEmbed-ratio--sm-16by9 {
    padding-bottom: 56.25%;
  }
  /**
   * Modifier: 4:3 aspect ratio
   */
  .FlexEmbed-ratio--sm-4by3 {
    padding-bottom: 75%;
  }
}

@media (min-width: 47em) {
  /**
   * Modifier: 3:1 aspect ratio
   */
  .FlexEmbed-ratio--md-3by1 {
    padding-bottom: 33.33333%;
  }
  /**
   * Modifier: 2:1 aspect ratio
   */
  .FlexEmbed-ratio--md-2by1 {
    padding-bottom: 50%;
  }
  /**
   * Modifier: 16:9 aspect ratio
   */
  .FlexEmbed-ratio--md-16by9 {
    padding-bottom: 56.25%;
  }
  /**
   * Modifier: 4:3 aspect ratio
   */
  .FlexEmbed-ratio--md-4by3 {
    padding-bottom: 75%;
  }
}

@media (min-width: 64em) {
  /**
   * Modifier: 3:1 aspect ratio
   */
  .FlexEmbed-ratio--lg-3by1 {
    padding-bottom: 33.33333%;
  }
  /**
   * Modifier: 2:1 aspect ratio
   */
  .FlexEmbed-ratio--lg-2by1 {
    padding-bottom: 50%;
  }
  /**
   * Modifier: 16:9 aspect ratio
   */
  .FlexEmbed-ratio--lg-16by9 {
    padding-bottom: 56.25%;
  }
  /**
   * Modifier: 4:3 aspect ratio
   */
  .FlexEmbed-ratio--lg-4by3 {
    padding-bottom: 75%;
  }
}

/**
 * Modifier: with shadow
 *
 * 1. Inherit shape of parent.
 * 2. First shadow minimizes edge pixels, second applies inner shadow.
 * 3. Forces pseudo element visibility.
 * 4. Dimensions.
 * 5. Positioning.
 * 6. Avoid covering up interactive content.
 */

.FlexEmbed--withShadow::after {
  border-radius: inherit; /* 1 */
  box-shadow: 0 0 0 1px rgba(54, 54, 54, 0.2), inset 0 0 0 0.49327rem rgba(54, 54, 54, 0.2); /* 2 */
  content: ""; /* 3 */
  height: 100%; /* 4 */
  left: 0; /* 5 */
  pointer-events: none; /* 6 */
  position: absolute; /* 5 */
  top: 0; /* 5 */
  width: 100%; /* 4 */
}

/**
 * Modifier: Wave
 *
 * Masks flex embed content with a wave.
 */

.FlexEmbed--wave {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E %3Cpath d='M2.4,0H157.6A2.4,2.4,0,0,1,160,2.4V86.14a2.39,2.39,0,0,1-2.14,2.38c-7.1.76-31.86,3-76-.26-43.45-3.25-71-1-79.24-.27A2.4,2.4,0,0,1,0,85.61V2.4A2.4,2.4,0,0,1,2.4,0Z'/%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E %3Cpath d='M2.4,0H157.6A2.4,2.4,0,0,1,160,2.4V86.14a2.39,2.39,0,0,1-2.14,2.38c-7.1.76-31.86,3-76-.26-43.45-3.25-71-1-79.24-.27A2.4,2.4,0,0,1,0,85.61V2.4A2.4,2.4,0,0,1,2.4,0Z'/%3E %3C/svg%3E");
}

/**
 * Content customizations
 *
 * 1. Will cause images to "fill" the available space visually instead of
 *    stretching awkwardly.
 * 2. Since patterns in this project tend to prefer right-aligned overlays, we
 *    make oversized images position themselves off-center to avoid figures
 *    being smack-dab in the center line where objects intersect.
 */

.FlexEmbed-content {
  -o-object-fit: cover;
     object-fit: cover; /* 1 */
  -o-object-position: 33% 33%;
     object-position: 33% 33%; /* 2 */
}

/**
 * IE ≤ 11 does not support the aforementioned `object-fit` properties.
 * Originally we considered distored images a reasonable compromise for those
 * browsers, but later it was requested to change the behavior to prioritize
 * the image dimensions over the image composition.
 *
 * To do that, we are resetting the content height to `auto` for `<img loading="lazy">`
 * elements only, then re-applying the intended height only when `object-fit`
 * is supported.
 *
 * As of this writing, IE11 usage is down to 1.44% globally (less than half
 * what it was a year ago). These styles can and should be removed once its
 * usage drops even further.
 *
 * @see https://caniuse.com/#feat=object-fit
 */

/* stylelint-disable plugin/selector-bem-pattern */

img.FlexEmbed-content {
  height: auto;
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  img.FlexEmbed-content {
    height: 100%;
  }
}

/* stylelint-enable */

/**
 * Useful for overlays with content on the left.
 */

.FlexEmbed-content--alignRight {
  -o-object-position: right;
     object-position: right;
}

/**
 * Responsive "hero" ratio
 */

.FlexEmbed-ratio--hero {
  padding-bottom: 40vh;
}

@media (min-width: 47em) {
  .FlexEmbed-ratio--hero {
    padding-bottom: 50%;
  }
}

@media (min-width: 72em) {
  .FlexEmbed-ratio--hero {
    padding-bottom: 40.98361%;
  }
}

/**
 * Responsive "shorter hero" ratio that starts at 2-1 and grows to 3-1.
 */

.FlexEmbed-ratio--heroSecondary {
  padding-bottom: 50%;
}

@media (min-width: 47em) {
  .FlexEmbed-ratio--heroSecondary {
    padding-bottom: 40%;
  }
}

@media (min-width: 64em) {
  .FlexEmbed-ratio--heroSecondary {
    padding-bottom: 33.33333%;
  }
}

/** @define FocusControl */

/**
 * Centers the focus contol element horizontally and vertically, with the
 * highest z-index.
 */

.FocusControl {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 300;
}

/**
 * When not focused, the element should be hidden visually but not hidden from
 * screen readers.
 */

.FocusControl:not(:focus) {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
}

/** @define Grid */

/** @define Grid; weak */

/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 */

/* Grid container
   ========================================================================== */

/**
 * All content must be contained within child elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 */

.Grid {
  box-sizing: border-box;
  display: flex; /* 1 */
  flex-flow: row wrap;
  margin: 0; /* 1 */
  padding: 0; /* 1 */
}

/**
 * No explicit width by default. Rely on combining a cell with a dimension
 * utility or a component class that extends 'Grid'.
 *
 * 1. Set flex items to full width by default
 * 2. Fix issue where elements with overflow extend past the
 *    `.Grid > *` container - https://git.io/vw5oF
 */

.Grid > * {
  box-sizing: inherit;
  flex-basis: 100%; /* 1 */
  min-width: 0; /* 2 */
}

/**
 * Modifier: center align all grid cells
 */

.Grid--alignCenter {
  justify-content: center;
}

/**
 * Modifier: right align all grid cells
 */

.Grid--alignRight {
  justify-content: flex-end;
}

/**
 * Modifier: middle-align grid cells
 */

.Grid--alignMiddle {
  align-items: center;
}

/**
 * Modifier: bottom-align grid cells
 */

.Grid--alignBottom {
  align-items: flex-end;
}

/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
 *    http://git.io/vllWx
 */

.Grid--fill > * {
  flex: 1 1 0%; /* 1 */
}

/**
 * Modifier: fit cells to their content
 */

.Grid--fit > * {
  flex-basis: auto;
}

/**
 * Modifier: all cells match height of tallest cell in a row
 */

.Grid--equalHeight > * {
  display: flex;
}

/**
 * Modifier: gutters
 */

.Grid--withGutter {
  margin: 0 -0.5rem;
}

.Grid--withGutter > * {
  padding: 0 0.5rem;
}

/**
 * Modifier: gaps
 *
 * Works like Grid--withGutter, but with gaps all the way around adjacent cells
 * (not just left and right).
 */

.Grid--withGap {
  margin: -0.5rem;
}

.Grid--withGap > .Grid-cell {
  padding: 0.5rem;
}

/**
 * Modifier: borders
 */

.Grid--withBorder > .Grid-cell + .Grid-cell {
  border-left: 1px solid rgba(239, 239, 239, 0.25);
}

/**
 * @define Groove
 */

.Groove {
  background-color: transparent;
  /* 1 */
  border-width: 0;
  /* 1 */
  min-height: 2px;
  /* 2 */
  position: relative;
  /* 3 */
}

.Groove::after {
  background: currentColor;
  /* 1 */
  border-radius: 1px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  max-width: 50%;
  opacity: 0.5;
  /* 1 */
  position: absolute;
  width: 1.42383rem;
}

@media (min-width: 64em) {

.Groove::after {
    width: 1.42383rem;
}
  }

.Groove--center {
  text-align: center;
}

.Groove--center::after {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.Groove--right {
  text-align: right;
}

.Groove--right::after {
  bottom: 0;
  left: auto;
  left: initial;
  right: 0;
}

/**
* @define Icon
*
* The core `Icon` component.
*/

/**
 * These values are the values that can be overridden when extended.
 *
 * Used for the size modifiers.
 */

/**
 * 1. Most SVG elements default to `fill="black"`. This is a friendlier default.
 * 2. Dimensions match type size.
 */

.Icon {
  fill: currentColor; /* 1 */
  height: 1em; /* 2 */
  stroke: currentColor; /* 1 */
  stroke-width: 0;
  width: 1em; /* 2 */
}

/**
 * Apply inline defaults without requiring overrides for block occurrences.
 *
 * 1. Flow with text content.
 * 2. Fine-tune vertical alignment (5).
 * 3. Align with middle of x-height.
 */

.Icon:not(.Icon--block) {
  display: inline-block; /* 1 */
  position: relative; /* 2 */
  top: -1px; /* 2 */
  vertical-align: middle; /* 3 */
}

/**
 * Modifier: Block
 */

.Icon--block {
  display: block;
}

/**
 * Dimensions are determined by element font size.
 */

.Icon--grow1 {
  font-size: 1.5em;
}

/**
 * 1. We minimize impact on the bounding box by applying negative margin equal
 *    to the amount we've increased the element's size.
 * 2. We've minimized the icon's bounding box (2) but it will appear off-center.
 *    This step offsets it visually without impacting layout using both the
 *    size and offset proportions.
 */

.Icon--grow1:not(.Icon--block) {
  margin-bottom: -0.5em; /* 1 */
  top: -0.33333em; /* 2 */
}

.Icon--grow2 {
  font-size: 1.8em;
}

.Icon--grow2:not(.Icon--block) {
  margin-bottom: -0.8em;
  top: -0.44444em;
}

/**
 * Dynamic Icon Descendants
 *
 * Animate individual SVG elements when the `is-on` class is toggled on the
 * containing `Icon` element.
 *
 * Intended use: animate a hamburger icon (parallel lines)
 * to a close icon (crossed lines) via the `is-on` modifier.
 */

.Icon-rotate1of8,
.Icon-rotateCounter1of8,
.Icon-scaleIn,
.Icon-scaleOut {
  -webkit-transform-origin: center;
          transform-origin: center;
  transition: 0.25s easeInOutQuart;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.Icon.is-on .Icon-hide,
.Icon:not(.is-on) .Icon-show {
  opacity: 0;
}

.Icon.is-on .Icon-rotate1of8 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.Icon.is-on .Icon-rotateCounter1of8 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.Icon.is-on .Icon-scaleOut,
.Icon:not(.is-on) .Icon-scaleIn {
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* stylelint-disable-next-line no-duplicate-selectors */

/** @define InlineList */

/**
 * 1. Arrange items horizontally.
 * 2. Allow items to wrap to a new line.
 * 3. Apply half the gap as negative inverse margin in all directions. This
 *    allows inner content to align with the edges of its container.
 */

.InlineList {
  list-style: none;
  padding-left: 0;
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.24664rem; /* 3 */
}

/**
 * Modifier: Scrollable
 *
 * Only applied at small sizes because at large sizes it isn't as critical to
 * condense information, and it's also more likely that the user has an
 * alternative pointing device (like a mouse) that could make horizontal
 * scrolling awkward.
 */

@media (max-width: 46.999em) {
  /**
   * 1. Prevent items from wrapping.
   * 2. Increase negative margin to negate the padding we'll be adding (5).
   *    Without this, padding/margin would have to be manually adjusted past
   *    this modifier's viewport since it would be inconsistent with the default
   *    `InlineList`.
   * 3. Allow scrollbars when content overflows.
   * 4. In Webkit-based browsers, enable elastic scrolling for a more natural,
   *    app-like feel.
   * 5. Add padding along the outer edge. This is to provide room for the
   *    scrollbar, but also to make it obvious when scrolling has reached either
   *    end by having more space there than between.
   * 6. In certain browsers right padding is not respected on overflowing
   *    elements. To prevent the appearance of double padding on the rightmost
   *    element when scrolling is unnecessary, we negate that edge here. See
   *    the item styles for where that padding gets reapplied.
   */

  .InlineList--scrollable {
    flex-wrap: nowrap; /* 1 */
    margin: -1.125rem; /* 2 */
    overflow: auto; /* 3 */
    -webkit-overflow-scrolling: touch; /* 4 */
    padding: 1.125rem; /* 5 */
    padding-right: 0; /* 6 */
  }
}

/**
 * Child items
 *
 * We disable our selector warnings because it makes the pattern simpler to use
 * without requiring a class, and because we're applying layout on the parent
 * element it's really a bad idea to override these styles anyway.
 */

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * 1. Each item should occupy its natural width.
 * 2. Apply half-gaps to all edges. When two items line up, there will be one
 *    full gap between. We use padding so if items are ever sized, the gutter
 *    space will be taken into account.
 */

.InlineList > * {
  flex: 0 0 auto; /* 1 */
  padding: 0.24664rem; /* 2 */
}

/**
 * Scrollable items
 *
 * See `InlineList--scrollable` comments for context.
 */

@media (max-width: 46.999em) {
  /**
   * 1. We use a transparent border for the gap on the elements themselves
   *    because it's the only whitespace property that will retain its spacing
   *    even when its content is overflowing. Without this, the rightmost item
   *    will not retain any padding.
   * 2. Override the padding-based gap we use by default.
   */

  .InlineList--scrollable > * {
    border-right: 0.49327rem solid transparent; /* 1 */
    padding: 0; /* 2 */
  }

  /**
   * Because the inset whitespace is larger than the gap between items, we need
   * to apply _that_ amount of whitespace to the very last item.
   */

  .InlineList--scrollable > *:last-child {
    border-right-width: 1.125rem;
  }
}

/* stylelint-enable */

/**
 * @define InputExtra
 */

/**
 * Provide a relative positioning context
 * for aligning a symbol within the .Input
 */

.InputExtra {
  position: relative;
}

/**
 * Make room for the symbol
 */

.InputExtra-input {
  padding-left: 2em;
}

/**
 * 1. Offset from Input edge.
 * 2. Passes clicks/taps on this element to the input itself.
 * 3. Vertically center.
 * 4. Horizontally center.
 */

.InputExtra-glyph {
  left: 0.8em; /* 1 */
  pointer-events: none; /* 2 */
  position: absolute; /* 3 */
  text-align: center; /* 4 */
  top: 50%; /* 3 */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); /* 3 */
  width: 1em; /* 4 */
}

/** @define InputGroup */

/**
 * 1. Enforce equal heights among cells.
 * 2. Fill width and smoosh cells together.
 */

.InputGroup {
  align-items: stretch; /* 1 */
  display: flex; /* 2 */
}

/**
 * Cells (probably inputs and buttons)
 *
 * 1. Clear rounded corners for most cells (assuming adjacent).
 * 2. Allow overlap z-index to be manipulated for pseudo states.
 */

.InputGroup-cell {
  border-radius: 0; /* 1 */
  position: relative; /* 2 */
}

/**
 * Apply consistent rounded corners to first and last cells.
 */

.InputGroup-cell:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.InputGroup-cell:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

/**
 * Overlap adjacent borders.
 */

.InputGroup-cell + .InputGroup-cell {
  margin-left: -2px;
}

/**
* Focus-visible has been implemented for buttons and inputs but because of how
* focus-visible behaves, I have not implemented it here. If the user provides
* any input with the keyboard, it will draw a focus indicator regardless.
*/

.InputGroup.is-focused {
  border-radius: 5px;
  box-shadow: 0 0 0 3px #dddddd;
}

.InputGroup.is-focused > .InputGroup-cell:focus {
  border: 2px solid #0055a5;
  outline: none;
}

/** @define InputReveal */

.InputReveal.is-revealed .InputReveal-toggle,
.InputReveal:not(.is-revealed) .InputReveal-input {
  display: none;
}

/**
 * @define ListGroup
 */

/**
 * Core component styles
 */

.ListGroup {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * 1. Add a top border to adjacent items
 */

.ListGroup-item + .ListGroup-item {
  border-top:
    solid
    rgba(54, 54, 54, 0.1)
    1px; /* 1 */
}

/**
 * 1. Make inline elements fill the space
 * 2. Cell space
 */

.ListGroup-itemContent {
  display: block; /* 1 */
  padding-bottom: 0.6243rem; /* 2 */
  padding-top: 0.6243rem; /* 2 */
}

/**
 *  Provides an alt version for dark backgrounds
 */

/* stylelint-disable-next-line no-duplicate-selectors */

/**
 * Modifier intended for dark backgrounds.
 */

.ListGroup--dark {
  color: rgba(255, 255, 255, 0.7);
}

.ListGroup--dark .ListGroup-item + .ListGroup-item {
  border-top-color: rgba(239, 239, 239, 0.25);
}

.ListGroup--dark .ListGroup-itemContent {
  color: #ffffff;
}

/**
 * Current items should not have as vibrant of a link color.
 */

.ListGroup-itemContent[aria-current],
.ListGroup-itemContent.is-current {
  color: inherit;
}

/**
 * @define Media
 *
 * @see http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 */

/**
 * The topmost container only needs styles when CSS Grid Layout support is
 * available. We check for this using the `@supports` query, which is
 * conveniently supported everywhere Grid Layout is! 🎉
 */

@supports (display: grid) {
  /**
   * 1. Set gaps between content areas based on properties.
   * 2. Arrange children with the visual object (probably a photo or avatar)
   *    to the left, all other content to the right filling available space.
   */

  .Media {
    grid-column-gap: 0.88889rem;
    -webkit-column-gap: 0.88889rem;
       -moz-column-gap: 0.88889rem;
            column-gap: 0.88889rem; /* 1 */
    display: grid;
    grid-template-columns: auto 1fr; /* 2 */
    grid-row-gap: 0.70233rem;
    row-gap: 0.70233rem; /* 1 */
  }
}

/**
 * We rely on floats when CSS Grid Layout is not supported, which means the
 * outer container is in danger of collapsing if the content is shorter than
 * the object. While `overflow: hidden` would solve this problem, it might also
 * hide portions of content we _want_ to overflow, for example a scrollable
 * `InlineList`. So we fall back to a classic clearfix hack!
 *
 * @see http://nicolasgallagher.com/micro-clearfix-hack/
 */

.Media::before,
.Media::after {
  content: " ";
  display: table;
}

.Media::after {
  clear: both;
}

/**
 * We don't need the clearfix when CSS Grid Layout is supported, so we hide
 * those elements when that's the case.
 */

@supports (display: grid) {
  .Media::before,
  .Media::after {
    display: none;
  }
}

/**
 * The media object displays to the left of the content, and its width is
 * constrained. This is the classic Nicole Sullivan media object composition.
 */

.Media-object {
  float: left;
  width: var(--ProfilePortrait-size);
}

@media (min-width: 47em) {
  /**
   * Slightly increase size for consistency with the `ProfilePortrait` pattern,
   * which is very likely to be used here.
   */

  .Media-object {
    width: var(--ProfilePortrait-md-size);
  }

  /**
   * When Grid is supported, we want the object to fill the available height,
   * but if we always set `span 2`, it will create an unnecessary `row-gap` when
   * extended content is not present. We alleviate this by using an
   * `:nth-last-child` selector to specify that you should only span 2 rows when
   * there are three elements in the container.
   *
   * @see https://stackoverflow.com/a/49076465/5175805
   * @see https://alistapart.com/article/quantity-queries-for-css
   */

  @supports (display: grid) {
    .Media-object:nth-last-child(n+3) {
      grid-row: span 2;
    }
  }
}

/**
 * The content element contains the content accompanying the visual object. So
 * if this were a blog comment, this would be the name of the commentor and
 * the message they provided.
 *
 * We apply enough left margin to cover the size of the visual object _and_
 * the necessary gap between it and the content. The margin will pass beneath
 * the floating object, and the element will retain its natural size otherwise
 * (which won't happen if we float it).
 */

.Media-content {
  margin-left: calc(var(--ProfilePortrait-size) + 0.88889rem);
}

@media (min-width: 47em) {
  .Media-content {
    margin-left: calc(var(--ProfilePortrait-md-size) + 0.88889rem);
  }
}

/**
 * When Grid Layout is supported…
 *
 * 1. We can center-align this content with the object if is shorter, but keep
 *    it top-aligned if it is longer. This is honestly the only perceivable
 *    feature reason to even have a Grid enhancement here, but seriously, it
 *    looks a zillion times better when this happens.
 * 2. The margin isn't necessary because Grid is good.
 */

@supports (display: grid) {
  .Media-content {
    align-self: center; /* 1 */
    margin-left: 0;
    margin-left: initial; /* 2 */
  }
}

/**
 * The extended content element is the biggest deviation from Nicole Sullivan's
 * original component. It allows us to include additional content below both the
 * object and content at small sizes, but at large sizes it will append directly
 * below the content (to the right of the object).
 *
 * 1. We apply a gap between it and the content above.
 */

.Media-extendedContent {
  margin-top: 0.70233rem; /* 1 */
}

/**
 * At small sizes, we want to make sure this always clears both the object
 * and content. Without this, the element would not meet its full parent width
 * if the content were ever shorter than the object.
 */

@media (max-width: 46.999em) {
  .Media-extendedContent {
    clear: both;
  }
}

/**
 * At larger sizes, we want to apply the same margin-based spacing as the
 * content element. This will make it follow that element directly.
 */

@media (min-width: 47em) {
  .Media-extendedContent {
    margin-left: calc(var(--ProfilePortrait-md-size) + 0.88889rem);
  }
}

/**
 * When Grid Layout is supported…
 */

@supports (display: grid) {
  /**
   * 1. Put this element on the second row, below the photo and content.
   * 2. Override the unnecessary margins, since these are handled by gaps.
   * 3. Set a `max-width` to insure compatibility with `InlineList--scrolling`.
   *    Without this, content could exceed the bounds of the container.
   */

  .Media-extendedContent {
    grid-row: 2; /* 1 */
    margin-left: 0;
    margin-left: initial; /* 2 */
    margin-top: 0;
    margin-top: initial; /* 2 */
    max-width: 100%; /* 3 */
  }

  /**
   * At small sizes, have this element span both the object and content columns.
   */

  @media (max-width: 46.999em) {
    .Media-extendedContent {
      grid-column: span 2;
    }
  }

  /**
   * At larger sizes, put the expanded content in the second column below the
   * main content.
   */

  @media (min-width: 47em) {
    .Media-extendedContent {
      grid-column: 2;
    }
  }
}

/** @define MegaMenu */

/**
 * This file houses styles for the account section of the mega menu.
 */

.MegaMenu-account {
  padding: 1.125rem;
  padding-top: 2.25rem
}

@media (min-width: 57em) {

.MegaMenu-account {
    padding: 0;
    padding-top: 2.2807rem
}
  }

/** @define MegaMenu */

/**
 * This file houses custom properties used for styling the mega menu.
 *
 * There are a number of magic numbers used in the MegaMenu layout.
 * These numbers were chosen for aesthetic reasons and map to the approved
 * prototype design.
 */

:root {

  /**
   * The Mega Menu has many elements that transition in our out when the menu
   * is shown or hidden. We define a base speed here that can be referenced in
   * the CSS for these elements. The CSS may use this to calculate other
   * specific speeds (e.g. animate at 2/3 the base speed).
   *
   * Storying this in one place allows us to tweak the overall speed of the
   * transitions without affecting the relationships between different
   * transitions.
   *
   * You can also increase this number to slow down transitions, which can be
   * helpful when debugging
   */

  /**
   * Some of our transitions are staggered. This is the amount of time to
   * stagger these transitions by. MegaMenu--length is defined inline in the
   * HTML based on the number of items in our menu
   */

  /* Useful for compressing a focus ring _inside_ its container */

  /* Useful for expanding a focus ring _outside_ its container */
}

/**
 * We implemented a special breakpoint for the mega menu.
 * This breakpoint maps to when the screen is large enough to display all links
 * without hiding them behind a hamburger menu.
 */

/** @define MegaMenu */

/**
 * This file accounts for the "bar" of the MegaMenu — content that is visible
 * without opening any menus: A horizontal bar with a logo and some special
 * button controls for small screens.
 */

/**
 * This is our primary wrapper, responsible for positioning the Mega Menu
 *
 * 1. Some brands use heavier font weights for the mega menu
 * 2. The height of the menu bar varies across screen sizes and brands
 * 3. On small screens we pad the left edge to align the logo with content,
 *    without affecting the placement of buttons on the right edge of the
 *    screen. On larger screens we pad each end for symmetry
 *
 */

.MegaMenu {
  background: #ffffff;
  border-bottom: 2px solid #efefef;
  font-weight: 400; /* 1 */
  height: 4.10989rem; /* 2 */
  padding-left: 1rem; /* 3 */
  position: relative;
  z-index: 100;
}

.MegaMenu.is-open {
  position: fixed;
  top: 0;
  width: 100%;
}

@media (min-width: 57em) {
  .MegaMenu {
    height: 5.20158rem; /* 2 */
    padding-right: 1rem; /* 3 */
  }
}

/**
 * An inner element constrains the max width of the mega menu contents, and uses
 * flexbox to correctly position its children. Different screen sizes call for
 * different flex justifications.
 */

.MegaMenu-inner {
  align-items: stretch;
  display: flex;
  height: 100%;
  margin: 0 auto;
  max-width: 72rem;
  padding: 0 0 0;
}

@media(min-width: 57em) {
  .MegaMenu-inner {
    justify-content: space-between;
    padding: 0 0;
  }
}

/**
 * This home link houses a logo.
 * It uses flexbox to ensure the logo is centered vertically.
 * It aligns itself to the left in the overall flex layout.
 */

.MegaMenu-home {
  align-items: center;
  display: flex; /* 1 */
  margin-right: auto;
}

/**
 * We apply special styles to the home link when it is keyboard focused.
 * We use a mixin that adds a blue bordered pseudo element. We then customize
 * the placement of that pseudo element slightly.
 */

/**
   * If the element is `position: static` then the absolutely positioned
   * pseudo-element will display in the wrong spot.
   */

.MegaMenu-home {
    position: relative;
  }

/**
   * Disable default focus styles
   */

.js-focus-visible .MegaMenu-home:focus {
    outline: 0;
  }

/**
   * Disable Firefox's special focus styles
   * @see https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
   */

.MegaMenu-home::-moz-focus-inner {
    border: none;
  }

/**
   * Add our focus ring!
   *
   * We use a pseudo element instead of applying a border directly so we can add
   * visually attractive focus rings without havin to change the element's
   * tap target.
   *
   * By default the pseudo element's width and height matches the parent
   * element's size. You can easily adjust this on a specific element by
   * changing its bottom/top/left/right properties.
   */

.js-focus-visible .MegaMenu-home.focus-visible::after {
    border: 1px solid #00748c;
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

.MegaMenu-home::after {
  bottom: 1rem !important;
  left: -0.6243rem !important;
  right: -0.6243rem !important;
  top: 1rem !important;
}

/**
 * Our logo - either an inline SVG or an img tag
 *
 * 1. We need to set a max height for the WCH logo. It's an SVG with orientation
 *    media queries. Assigning a max height forces the correct orientation
 * 2. The width of the logo varies across screen sizes and brands
 */

.MegaMenu-logo {
  max-height: 3em; /* 1 */
  width: 9em; /* 2 */
}

@media (min-width: 57em) {
  .MegaMenu-logo {
    width: 9em; /* 2 */
  }
}

@media (min-width: 64em) {
  .MegaMenu-logo {
    width: 12em; /* 2 */
  }
}

/**
 * A wrapper class that wraps an individual nav and the small screen control
 * used to toggle it.
 */

.MegaMenu-navWrapper {
  display: flex;
  justify-content: center;
}

/**
 * These controls are only displayed on small screens.
 * They each house an icon and a text label and use flexbox to center their
 * content vertically and horizontally.
 */

.MegaMenu-smallScreenControl {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 4em;
}

@media (min-width: 57em) {
  .MegaMenu-smallScreenControl {
    display: none;
  }
}

/**
 * We apply special styles to these controls when they are keyboard focused.
 */

/**
   * If the element is `position: static` then the absolutely positioned
   * pseudo-element will display in the wrong spot.
   */

.MegaMenu-smallScreenControl {
    position: relative;
  }

/**
   * Disable default focus styles
   */

.js-focus-visible .MegaMenu-smallScreenControl:focus {
    outline: 0;
  }

/**
   * Disable Firefox's special focus styles
   * @see https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
   */

.MegaMenu-smallScreenControl::-moz-focus-inner {
    border: none;
  }

/**
   * Add our focus ring!
   *
   * We use a pseudo element instead of applying a border directly so we can add
   * visually attractive focus rings without havin to change the element's
   * tap target.
   *
   * By default the pseudo element's width and height matches the parent
   * element's size. You can easily adjust this on a specific element by
   * changing its bottom/top/left/right properties.
   */

.js-focus-visible .MegaMenu-smallScreenControl.focus-visible::after {
    border: 1px solid #00748c;
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

/** @define MegaMenu */

/**
 * This file houses styles that apply to links and link groups in the mega menu
 * submenus.
 */

.MegaMenu-secondaryLinks {
  padding: 1rem;
  padding-top: 2.25rem;
}

/**
 * Once you reach our small breakpoint the secondary links are split into two
 * columns.
 */

@media (min-width: 30em) {
  .MegaMenu-secondaryLinks {
    grid-column-gap: 1.125rem;
    -webkit-column-gap: 1.125rem;
       -moz-column-gap: 1.125rem;
            column-gap: 1.125rem;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }
}

/**
 * When the screen gets even larger we position content to the right of these
 * link columns. To do so we constrain this containers width and pad its sides.
 */

@media (min-width: 57em) {
  .MegaMenu-secondaryLinks {
    padding: 0 2.2807rem;
    width: 75%;
  }

  /**
   * If there is no promo element adjacent to our secondary links then we have
   * extra space. In this case we'll make it full width, and break to 3 columns.
   *
   * (Ideally we'd use `:only-child`, but this is not well supported)
   */

  .MegaMenu-secondaryLinks:first-child:last-child {
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
    width: 100%;
  }
}

/**
 * These columns can contain groups of links. We try to prevent the column
 * breaking mid-group, though this doesn't always work perfectly.
 *
 * 1. A small hack to encourage Firefox to avoid breaks inside.
 */

.MegaMenu-linkGroup {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
  overflow: hidden; /* 1 */
  padding-bottom: 1rem;
}

.MegaMenu-linkList {
  list-style: none;
  padding-left: 0;
}

/**
 * Link groups can have headings. As screen real estate increases we take
 * advantage of the extra space by bumping up font sizes and padding.
 * On large screens we pad the top so it aligns with the padding of links.
 */

.MegaMenu-linkHeading {
  color: inherit;
  font-family: inherit;
  font-weight: 700;
  text-transform: none;
}

@media (min-width: 30em) {
  .MegaMenu-linkHeading {
    font-size: 1.125rem;
    padding-bottom: 0.34644rem;
    padding-top: 0.49327rem;
  }
}

/**
 * The links themselves. It's important for these to be inline block. If they're
 * block then their bottom padding can carry over to the next column and push
 * that column's content down in some browsers.
 */

.MegaMenu-link {
  color: #0055a5;
  display: inline-block;
  font-family: inherit;
  padding: 0.49327rem 0;
}

.MegaMenu-link:hover {
  color: #00748c;
}

/**
 * We apply special styles to the mega menu links when they are keyboard
 * focused.
 * We use a mixin that adds a blue bordered pseudo element. We then customize
 * the placement of that pseudo element slightly.
 *
 * 1. This is a hacky, hacky hack hack. These links are displayed within CSS
 *    columns. Safari has a bug where any overflowing content in columns gets
 *    clipped. This led to these focus rings being clipped.
 *    Adding this transform rule forces Safari to reconsider, and allow these
 *    pseudo elements to overflow.
 *    @see https://stackoverflow.com/a/55110789/7816145
 */

/**
   * If the element is `position: static` then the absolutely positioned
   * pseudo-element will display in the wrong spot.
   */

.MegaMenu-link {
    position: relative;
  }

/**
   * Disable default focus styles
   */

.js-focus-visible .MegaMenu-link:focus {
    outline: 0;
  }

/**
   * Disable Firefox's special focus styles
   * @see https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
   */

.MegaMenu-link::-moz-focus-inner {
    border: none;
  }

/**
   * Add our focus ring!
   *
   * We use a pseudo element instead of applying a border directly so we can add
   * visually attractive focus rings without havin to change the element's
   * tap target.
   *
   * By default the pseudo element's width and height matches the parent
   * element's size. You can easily adjust this on a specific element by
   * changing its bottom/top/left/right properties.
   */

.js-focus-visible .MegaMenu-link.focus-visible::after {
    border: 1px solid #00748c;
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

.MegaMenu-link::after {
  left: -0.6243rem !important;
  right: -0.6243rem !important;
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* 1 */
}

/**
 * Each secondary link section can optionally have a "footnote" which displays
 * after the list of links in a smaller font with a top border.
 */

.MegaMenu-footnote {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.88889rem;
  margin-top: 1.125rem;
  padding-top: 1.125rem;
}

.MegaMenu-overviewLink {
  font-family: inherit;
  font-weight: 700;
  text-transform: none;
}

/** @define MegaMenu */

/**
 * This file houses styles for our top level nav. Styles for submenus are housed
 * elsewhere.
 */

/**
 * Our primary nav element.
 *
 * 1. On small screens it starts off hidden, but can be shown
 * 2. When it becomes shown it sits below the menu bar
 * 4. Prevent a horizontal scrollbar from showing. This can happen when opening
 *    the nav
 */

.MegaMenu-nav {
  bottom: 0;
  display: none; /* 1 */
  left: 0; /* 2 */
  overflow: hidden; /* 4 */
  position: fixed; /* 2 */
  top: 4.10989rem; /* 2 */
  width: 100%; /* 2 */
}

.MegaMenu-nav.is-transitioning {
  display: block; /* 1 */
}

/**
 * A mega menu can have a secondary nav. If one is opening while the other is
 * closing, ensure the opening one is on top.
 */

.MegaMenu-nav.is-open {
  z-index: 1;
}

/**
 * On large screens we need to unset some of the small screen styles.
 */

@media (min-width: 57em) {
  .MegaMenu-nav {
    display: flex;
    position: static;
    width: auto;
  }

  /**
   * The secondary nav is always hidden on large screens
   *
   * On small screens we'll be toggling classes like `is-open` which reset
   * `display`. Because of that we need to use `!important` to overrule those
   * classes on large screens.
   */

  .MegaMenu-nav--secondary {
    display: none !important;
  }
}

/**
 * On small screens we use an element to display a backdrop behind the
 * expanded nav. This is a separate element from the nav so it can be animated
 * separately. It used to be a pseudo element but IE11 can't fire the
 * `transitioned` event on pseudo elements.
 *
 * 1. It covers the whole screen below the mega menu header bar.
 * 2. It starts off hidden and slides down when the nav opens
 * 3. When exiting it is delayed until the other items transition. When entering
 *    it is not delayed
 * 4. When exiting it uses special easing (ease-in-quart) so that it appears to
 *    start slow and speed up to catch up with the other animated elements. When
 *    entering it uses a normal ease-out.
 * 5. Make sure this overlay doesn't block and hide scrollbars.
 */

@media(max-width: 56.999em) {
  .MegaMenu-navUnderlay {
    background: #ffffff;
    bottom: 0; /* 1 */
    content: "";
    left: 0; /* 1 */
    position: fixed; /* 1 */
    top: 4.10989rem; /* 1 */
    -webkit-transform: scaleY(0);
            transform: scaleY(0); /* 2 */
    -webkit-transform-origin: top;
            transform-origin: top; /* 2 */

    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
    transition-delay: calc(var(--MegaMenu-length)*0.25s/var(--MegaMenu-length)); /* 3 */
    transition-duration: 0.25s; /* 2 */
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform; /* 2 */
    transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); /* 4 */

    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
    width: 100%; /* 1 */
    z-index: -1; /* 5 */
  }

  .MegaMenu-nav.is-open .MegaMenu-navUnderlay {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); /* 2 */
    transition-delay: 0s; /* 3 */
    transition-timing-function: ease-out; /* 4 */
  }
}

/**
 * Within the nav is a list of primary links. This element is scrollable when it
 * overflows. (If this were done directly on the nav, the nav's ::before element
 * would hide the scrollbars.)
 *
 * 1. Initially we used `overflow: auto` instead of scroll. Unfortunately old
 *    versions of Safari have a bug where auto doesn't work correctly. To ensure
 *    scrolling works we use scroll instead. The downside is that if someone is
 *    on a small screen with their scrollbars set to always show (a rare combo)
 *    then the hamburger menu scrollbar will show even if it's not scrollable.
 *    @see https://stackoverflow.com/questions/35469227/overflow-y-not-working-in-safari-inside-a-modal
 */

.MegaMenu-primaryLinks {
  list-style: none;
  padding-left: 0;
  font-family: inherit;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll; /* 1 */
}

/**
 * On large screen this is displayed horizontally, and takes up all available
 * vertical space so we can fit larger click targets in it.
 *
 * 1. On larger screens the primary links do not need to be scrollable and can
 *    safely overflow.
 */

@media (min-width: 57em) {
  .MegaMenu-primaryLinks {
    display: flex;
    flex-direction: row;
    overflow-y: visible; /* 1 */
  }
}

/**
 * On small screens we animate the top level nav links in one by one when the
 * hamburger menu opens. They are staggered so they start animating one after
 * another.
 * `--MegaMenu-length` and `--MegaMenu-index` are defined inline in the HTML
 *
 * 1. They scale up slightly and fade in
 * 2. When exiting the last one animates first. When entering the first one
 *    animates first
 * 3. They use a special easing so that they appear to bounce slightly when
 *    entering. This adds some fun without feeling overwhelming
 */

@media(max-width: 56.999em) {
  .MegaMenu-submenuWrapper {
    background: #ffffff;
    opacity: 0; /* 1 */
    -webkit-transform: scale(0.66);
            transform: scale(0.66); /* 1 */
    -webkit-transform-origin: center;
            transform-origin: center; /* 1 */

    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
    transition-delay: calc((var(--MegaMenu-length) - var(--MegaMenu-index))*0.25s/var(--MegaMenu-length)); /* 2 */
    transition-duration: 0.25s; /* 1 */
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform; /* 1 */
    transition-timing-function: cubic-bezier(0.56, -0.24, 0.51, 1.29); /* 3 */

    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
  }

  .MegaMenu-nav.is-open .MegaMenu-submenuWrapper {
    opacity: 1; /* 1 */
    -webkit-transform: scale(1);
            transform: scale(1); /* 1 */
    transition-delay: calc((var(--MegaMenu-index) + 1)*0.25s/var(--MegaMenu-length)); /* 2 */
  }
}

/**
 * Our primary links. These are progressively enhanced to be buttons.
 * Their display varies across screen sizes.
 *
 * 1. On small screens icons are shown which are positioned via flexbox
 * 2. On large screens they stretch vertically for large click targets
 * 3. On large screens they contain absolutely positioned carets when open.
 * 4. The carets can overflow. We want to prevent this impacting the layout
 */

.MegaMenu-submenuToggle {
  align-items: center; /* 1 */
  border-bottom: 1px solid #efefef;
  color: inherit;
  display: flex; /* 1 */
  font-family: inherit;
  padding: 1.26563rem;
  text-transform: none;
}

.MegaMenu-submenuToggle:hover {
  color: inherit;
}

@media (min-width: 57em) {
  .MegaMenu-submenuToggle {
    border-bottom: none;
    height: 100%; /* 2 */
    overflow: hidden; /* 4 */
    padding: 1.26563rem 0.70233rem;
    position: relative; /* 3 */
  }
}

/**
 * Replaces browser-default outlines with a more attractive border only for
 * navigation via tabbing.
 * We use a mixin that adds a blue bordered pseudo element. We then customize
 * the placement of that pseudo element slightly.
 */

/**
   * If the element is `position: static` then the absolutely positioned
   * pseudo-element will display in the wrong spot.
   */

.MegaMenu-submenuToggle {
    position: relative;
  }

/**
   * Disable default focus styles
   */

.js-focus-visible .MegaMenu-submenuToggle:focus {
    outline: 0;
  }

/**
   * Disable Firefox's special focus styles
   * @see https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
   */

.MegaMenu-submenuToggle::-moz-focus-inner {
    border: none;
  }

/**
   * Add our focus ring!
   *
   * We use a pseudo element instead of applying a border directly so we can add
   * visually attractive focus rings without havin to change the element's
   * tap target.
   *
   * By default the pseudo element's width and height matches the parent
   * element's size. You can easily adjust this on a specific element by
   * changing its bottom/top/left/right properties.
   */

.js-focus-visible .MegaMenu-submenuToggle.focus-visible::after {
    border: 1px solid #00748c;
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

.MegaMenu-submenuToggle::after {
  bottom: 1rem !important;
  left: 1rem !important;
  right: 1rem !important;
  top: 1rem !important;
}

@media (min-width: 57em) {
  .MegaMenu-submenuToggle::after {
    left: 0 !important;
    right: 0 !important;
  }
}

/**
 * This is the pseudo element used to display a caret on active toggles.
 * In order to make a triangular caret shape, we build a CSS rectangle and then
 * rotate it 45 degrees and position it at the bottom center of its container.
 *
 * We add transitions so the caret will animate in and out as menus open
 * and close.
 */

@media (min-width: 57em) {
  .MegaMenu-submenuToggle::before {
    background: #efefef;
    content: "";
    height: 0.88889rem;
    left: calc(50% - 0.44444rem);
    position: absolute;
    top: calc(100% - 0.44444rem);
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
    transition-duration: 0.25s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: ease-out;
    width: 0.88889rem;
  }

  .MegaMenu-submenuToggle[aria-expanded="true"]::before {
    -webkit-transform: rotate(45deg) scale(1);
            transform: rotate(45deg) scale(1);
  }
}

/**
 * For semantic reasons the toggles are housed within heading elements. For our
 * toggles to be 100% height on large screens, we need to force the height of
 * these wrapper headers as well.
 */

@media (min-width: 57em) {
  .MegaMenu-submenuTitle {
    height: 100%;
  }
}

/**
 * On small screens menu toggles contain a couple icons.
 *
 * 1. The "plus" icon is aligned to the right.
 * 2. All of these icons are hidden on large screens. We need to use !important
 *    to override the `.Icon:not(.Icon--block)` rule
 */

.MegaMenu-submenuExpandIcon {
  margin-left: auto; /* 1 */
}

@media (min-width: 57em) {
  .MegaMenu-submenuToggleIcon {
    display: none !important; /* 2 */
  }
}

/**
 * Some of our icons (like compact/plus) come with build-in CSS rotation
 * classes. Others need rotation to be applied in our mega menu CSS.
 * Standardizing this would require adding additional CSS in the Baptist
 * Components repo, so for now I've made a workaround here.
 */

.MegaMenu-submenuExpandIcon--rotate {
  transition: -webkit-transform cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.25s;
  transition: transform cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.25s;
  transition: transform cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.25s, -webkit-transform cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.25s;
}

.MegaMenu-submenuExpandIcon--rotate.is-on {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/**
 * Depending on screen size we show one of two icons representing the submenu
 * category. e.g. the Account submenu shows our account icon.
 *
 * The sizing and margins of these originally relied on utility classes, but we
 * added new pattern-specific classes so we could alter their layout based on
 * theme-specific design tokens.
 *
 * 1. Some icons were getting clipped in Firefox
 */

.MegaMenu-navCategoryIcon,
.MegaMenu-overviewCategoryIcon {
  margin-right: 0.49327rem;
  overflow: visible; /* 1 */
}

.MegaMenu-navCategoryIcon {
  font-size: 1.42383em;
}

.MegaMenu-overviewCategoryIcon {
  font-size: 1.60181em;
}

/** @define MegaMenu */

/**
 * Mega Menu promo styles are housed here. Many of the styles change at our
 * `--sm-viewport` breakpoint, and then again at our
 * `--mega-menu-wide-viewport` breakpoint.
 */

/**
 * Control the mega menu's position in the wrapping flex container.
 * The percentage sign is necessary for IE11.
 */

.MegaMenu-promo {
  flex: 1 0 0%;
}

/**
 * On large screens we add vertical padding so it aligns with padded links.
 */

@media (min-width: 57em) {
  .MegaMenu-promo {
    padding-top: 0.49327rem;
  }
}

/**
 * For small screen styling we wrap our promo content in a band. However, on
 * large screens we want to override the background and color properties of
 * the band content since the band looks awkward stacking horizontally instead
 * of vertically.
 *
 * The second level of specificity is required to override the band styles.
 */

@media (min-width: 57em) {
  .MegaMenu .MegaMenu-promoBandContent {
    background: transparent;
    color: #363636;
  }
}

/**
 * A promo is comprised of two main chunks: a graphic and a text container.
 * Depending on screen size these will be stacked in a column or a row.
 * This container uses flexbox to control the stacking order.
 *
 * It also constrains the max width of the content and adds padding.
 */

.MegaMenu-promoContent {
  align-items: center;
  background: transparent;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  max-width: 35em;
  padding: 2.88651rem 2.02729rem;
}

@media (min-width: 30em) {
  .MegaMenu-promoContent {
    flex-direction: row;
  }
}

@media (min-width: 57em) {
  .MegaMenu-promoContent {
    background: transparent;
    flex-direction: column;
    padding: 0;
  }
}

/**
 * Class is applied to graphics in circles, which are used in BH and WCH brands.
 */

.MegaMenu-graphic {
  display: none;
}

@media (min-width: 30em) {
  .MegaMenu-graphic {
    display: block;
    min-width: 10em;
  }
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * If a picture srcset is used, we can't apply classes directly to the image
 * so we are using this child selector instead
 */

.MegaMenu-promoImg img {
  display: block;
}

/* stylelint-enable */

/**
 * Promos also contain some textual content. The alignment varies across
 * screen sizes and brands
 */

.MegaMenu-promoText {
  font-family: inherit;
  padding: 0 0;
  text-align: center;
}

@media (min-width: 30em) {
  .MegaMenu-promoText {
    padding-left: 1rem;
    text-align: left;
  }
}

@media (min-width: 57em) {
  /**
   * 1. Unfortunately IE11 clobbers this layout if we don't include these width
   *    declarations.
   *    @see https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11
   */

  .MegaMenu-promoText {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding: 0;
    text-align: center;
    width: 100%; /* 1 */
  }

  .MegaMenu-promoTextElement {
    width: 100%; /* 1 */
  }
}

/**
 * At small screens we make this heading white so it stands out from the other
 * text content. On larger screens the background and text colors change and we
 * no longer want this to apply.
 */

.MegaMenu-promoHeading {
  color: #ffffff;
}

@media (min-width: 57em) {
  .MegaMenu-promoHeading {
    color: inherit;
  }
}

/**
 * The background color of promos varies drastically across screen sizes.
 * Because of this we need to use two opposite button styles at different
 * breakpoints.
 *
 * Instead of duplicating all of our button styling CSS in the promo component
 * we have 2 buttons in the markup that we show and hide at different
 * breakpoints. This is not ideal but we'd rather have a little repetitive HMTL
 * over adding a CSS maintenance burden.
 */

.MegaMenu-promoLargeScreenButton {
  display: none;
}

@media (min-width: 57em) {
  .MegaMenu-promoLargeScreenButton {
    display: block;
  }

  .MegaMenu-promoSmallScreenButton {
    display: none;
  }
}

/** @define MegaMenu */

/**
 * Due to the structure of the mega menu, there are a variety of objects that
 * need to be shown and hidden at our custom mega menu breakpoint.
 *
 * I considered making a single utility-like class to handle this, but thought
 * these class names might help to provide context to future devs.
 *
 * 1. The Mega Menu uses a number of Band Waves that are only meant to show at
 *    certain screen sizes. These classes help to show and hide these waves
 *    depending on the screen size.
 * 2. The placement of the search input is different on small and large screens.
 *    In order to maintain a reasonable tab order on all screen sizes we ended
 *    up including 2 different search forms, one for small screens and one for
 *    large screens.
 * 3. The button that toggles visibility of the account submenu, displays
 *    different content depending on the screen size.
 */

.MegaMenu-largeScreenWave,
.MegaMenu-largeScreenSearch,
.MegaMenu-largeScreenAccount {
  display: none;
}

@media(min-width: 57em) {
  .MegaMenu-largeScreenWave,
  .MegaMenu-largeScreenSearch,
  .MegaMenu-largeScreenAccount {
    display: block;
  }

  .MegaMenu-smallScreenWave,
  .MegaMenu-smallScreenSearch,
  .MegaMenu-smallScreenAccount {
    display: none;
  }
}

/** @define MegaMenu */

/**
 * Here are the styles for animating the opening and closing of submenus.
 * The transitions on `.MegaMenu-submenu`, `.MegaMenu-overviewLink` and
 * `.MegaMenu-submenuBody` are tightly coupled to create a cohesive animation.
 *
 * On all screen sizes the submenus scale up and down vertically when showing
 * and hiding. For performance reasons we animate `transform` instead
 * of `height`
 *
 * Depending on screen size, and whether the submenus are entering, exiting, or
 * swapping these elements transition delays and durations vary. The delays and
 * durations are defined further down in the file.
 */

.MegaMenu-submenu {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-timing-function: ease-out;
}

.MegaMenu-submenu.is-shown {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  transition-delay: 0s;
}

/**
 * We also transition the content of submenus. We animate this separately so
 * that the content is not "squashed" and the animation's momentum carries
 * across elements.
 *
 * 1. This content fades in
 * 2. It also slides in, though the distance and direction varies across screen
 *    sizes. These are defined in media queries below.
 *
 * Depending on screen size, and whether the submenus are entering, exiting, or
 * swapping these elements transition delays and durations vary. These are
 * defined further down in the file.
 */

.MegaMenu-submenuBody,
.MegaMenu-overviewLink,
.MegaMenu-largeScreenSearchForm {
  opacity: 0; /* 1 */
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform; /* 2 */
  transition-timing-function: ease-out;
}

.MegaMenu-submenu.is-shown .MegaMenu-submenuBody,
.MegaMenu-submenu.is-shown .MegaMenu-overviewLink,
.MegaMenu-submenu.is-shown .MegaMenu-largeScreenSearchForm {
  opacity: 1; /* 1 */
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0); /* 2 */
}

/**
 * The small screen animations differ slightly from large screens.
 * We define special durations, delays and transform directions for
 * small screens.
 *
 * In order to more easily reason about the speed and order of animations,
 * we define all of the durations in custom properties. These are the small
 * screen props.
 */

@media (max-width: 56.999em) {
  /**
   * 1. When hiding the submenu we wait for the animations on
   *    `.MegaMenu-submenuBody` to complete before starting these transitions
   */

  .MegaMenu-submenu {
    transition-delay: 0.05556s; /* 1 */
    transition-duration: 0.11111s;
  }

  /**
   * 1. On small screens the content slides slightly down or up when entering or
   *    exiting.
   * 2. We keep this transition quick since it happens on top of another
   *    transition
   * 3. When showing the content we wait for the `.MegaMenu-submenu`'s transform
   *    transition to complete before starting this transition. This prevents
   *    visible text squishing.
   */

  .MegaMenu-submenuBody {
    -webkit-transform: translate(0, -2%);
            transform: translate(0, -2%); /* 1 */
    transition-duration: 0.05556s; /* 2 */
  }

  .MegaMenu-submenu.is-shown .MegaMenu-submenuBody {
    transition-delay: 0.11111s; /* 3 */
  }
}

/**
 * The large screen animations differ slightly from small screens.
 * We define special durations, delays and transform directions for
 * large screens.
 *
 * The primary animation for submenus on large screen is sliding up and down.
 * Here is the speed and ordering/delays of those transitions.
 */

/* stylelint-disable-next-line no-duplicate-selectors */

@media (min-width: 57em) {
  /**
   * 1. When hiding a submenu we wait for its content's transitions to complete
   *    before beginning our transform.
   *    (When showing a submenu there's no delay)
   */

  .MegaMenu-submenu {
    transition-delay: 0.11111s; /* 1 */
    transition-duration: 0.16667s;
  }

  /**
   * 1. When showing and hiding submenus we slide their content vertically to
   *    continue the momentum of the submenu's animation
   */

  .MegaMenu-submenuBody,
  .MegaMenu-overviewLink,
  .MegaMenu-largeScreenSearchForm {
    -webkit-transform: translate(0, -1.26562rem);
            transform: translate(0, -1.26562rem); /* 1 */
    transition-duration: 0.11111s;
  }

  /**
   * We wait to animate the submenu content until the submenu is shown. This
   * prevents the content from squishing and creates a cohesive, staggered
   * animation. (When hiding submenus there's no delay.)
   *
   * To enhance the staggered feeling of this animation, the overview link
   * transitions in slightly before the body content.
   */

  .MegaMenu-submenu.is-shown .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-shown .MegaMenu-largeScreenSearchForm {
    transition-delay: 0.16667s;
  }

  .MegaMenu-submenu.is-shown .MegaMenu-submenuBody {
    transition-delay: 0.25s;
  }
}

/**
 * On large screens when we transition from one submenu to another, we slide
 * their content horizontally to connect the animation to the submenu's
 * relative positions in the nav.
 *
 * This is a complex animation with a lot of moving pieces. These props help
 * us to track the animation speed, order, and delays. For the delays, the
 * custom properties are ordered by the order they run in.
 */

/* stylelint-disable-next-line no-duplicate-selectors */

:root {

  /* First we'll slide out out old content */

  /**
   * Then the entering submenu panel slides in before the exiting panel
   * leaves. This ensures there's always a background behind our content.
   */

  /* Once the new panel is showing we can hide the old one */

  /* Then we'll slide in our new content. */
}

@media (min-width: 57em) {
  /**
   * We add the `is-left` and `is-right` classes to control which directions
   * the content scrolls.
   */

  .MegaMenu-submenu.is-left:not(.is-shown) .MegaMenu-submenuBody,
  .MegaMenu-submenu.is-left:not(.is-shown) .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-left:not(.is-shown) .MegaMenu-largeScreenSearchForm {
    -webkit-transform: translate(-2.88651rem, 0);
            transform: translate(-2.88651rem, 0);
  }

  .MegaMenu-submenu.is-right:not(.is-shown) .MegaMenu-submenuBody,
  .MegaMenu-submenu.is-right:not(.is-shown) .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-right:not(.is-shown) .MegaMenu-largeScreenSearchForm {
    -webkit-transform: translate(2.88651rem, 0);
            transform: translate(2.88651rem, 0);
  }

  /**
   * We add the `is-entering` and `is-exiting` classes when we're swapping from
   * one submenu to another. These classes go hand in hand with `is-left` and
   * `is-right`.
   *
   * While `is-left` and `is-right` control the direction of our animations,
   * `is-entering` and `is-exiting` controls the order and speed that elements
   * transition in.
   */

  /**
   * When swapping from one menu to another we don't want to transform the
   * entire submenu, since we want the submenu header to stay fixed if it has a
   * background.
   *
   * 1. We'll disable the transitions on the main submenu,
   *    and instead apply transitions to to submenu body wrapper.
   * 2. We'll wait for those other animations to complete before hiding/showing
   *    these submenus
   */

  .MegaMenu-submenu.is-entering,
  .MegaMenu-submenu.is-exiting {
    transition-delay: 0.08333s; /* 2 */
    transition-duration: 0s; /* 1 */
  }

  .MegaMenu-submenu.is-entering .MegaMenu-submenuBodyWrapper,
  .MegaMenu-submenu.is-exiting .MegaMenu-submenuBodyWrapper {
    transition-duration: 0.08333s; /* 1 */
  }

  .MegaMenu-submenu.is-exiting .MegaMenu-submenuBody,
  .MegaMenu-submenu.is-entering .MegaMenu-submenuBody,
  .MegaMenu-submenu.is-exiting .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-entering .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-exiting .MegaMenu-largeScreenSearchForm,
  .MegaMenu-submenu.is-entering .MegaMenu-largeScreenSearchForm {
    transition-duration: 0.11111s;
  }

  .MegaMenu-submenu.is-exiting .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-exiting .MegaMenu-largeScreenSearchForm {
    transition-delay: 0s;
  }

  .MegaMenu-submenu.is-exiting .MegaMenu-submenuBody {
    transition-delay: 0.05556s;
  }

  .MegaMenu-submenu.is-entering .MegaMenu-submenuBodyWrapper {
    transition-delay: 0.16667s;
  }

  .MegaMenu-submenu.is-exiting .MegaMenu-submenuBodyWrapper {
    transition-delay: 0.25s;
  }

  .MegaMenu-submenu.is-entering .MegaMenu-overviewLink,
  .MegaMenu-submenu.is-entering .MegaMenu-largeScreenSearchForm {
    transition-delay: 0.33333s;
  }

  .MegaMenu-submenu.is-entering .MegaMenu-submenuBody {
    transition-delay: 0.38889s;
  }

  /**
   * Add Animation for Submenu Headers
   *
   * When switching between panels with and without submenu headers with
   * background colors, this animates the opacity of the header to avoid
   * it "snapping" in, ruining the effect of the menu transitions.
   *
   * The `is-headerTransition` class is only applied when switching between
   * panels that have a mismatch between containing a header.
   */

  .MegaMenu-submenu.is-headerTransition .MegaMenu-submenuHeader {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-out;
  }

  .MegaMenu-submenu.is-headerTransition.is-shown .MegaMenu-submenuHeader {
    opacity: 1;
  }

  .MegaMenu-submenu.is-headerTransition.is-entering .MegaMenu-submenuHeader {
    transition-delay: 0.33333s;
    transition-duration: 0.11111s;
  }

  .MegaMenu-submenu.is-headerTransition.is-exiting .MegaMenu-submenuHeader {
    transition-delay: 0s;
    transition-duration: 0.11111s;
  }
}

/** @define MegaMenu */

/**
 * This file houses styles for the content sections within mega menu submenus.
 * The styles are almost all for large screens
 */

/**
 * There is a header bar at the top of submenus.
 * Depending on theme and modifiers it may have a background color.
 *
 * 1. It is hidden on small screens and shown on large
 */

.MegaMenu-submenuHeader {
  display: none; /* 1 */
}

@media (min-width: 57em) {
  .MegaMenu-submenuHeader {
    display: block; /* 1 */
    font-size: 1.125rem;
  }

  /**
   * Within that header bar is an overview link
   * It contains icons and multiple text spans, and uses flexbox to position
   * them.
   */

  .MegaMenu-overviewLink {
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    padding-bottom: 0.70233rem;
    padding-top: 2.88651rem;
  }

  /**
   * We apply special styles to this overview link when it is keyboard focused.
   * We use a mixin that adds a blue bordered pseudo element. We then customize
   * the placement of that pseudo element slightly.
   */

  /**
   * If the element is `position: static` then the absolutely positioned
   * pseudo-element will display in the wrong spot.
   */

  .MegaMenu-overviewLink {
    position: relative;
  }

  /**
   * Disable default focus styles
   */

  .js-focus-visible .MegaMenu-overviewLink:focus {
    outline: 0;
  }

  /**
   * Disable Firefox's special focus styles
   * @see https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
   */

  .MegaMenu-overviewLink::-moz-focus-inner {
    border: none;
  }

  /**
   * Add our focus ring!
   *
   * We use a pseudo element instead of applying a border directly so we can add
   * visually attractive focus rings without havin to change the element's
   * tap target.
   *
   * By default the pseudo element's width and height matches the parent
   * element's size. You can easily adjust this on a specific element by
   * changing its bottom/top/left/right properties.
   */

  .js-focus-visible .MegaMenu-overviewLink.focus-visible::after {
    border: 1px solid #00748c;
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .MegaMenu-overviewLink::after {
    bottom: -0.6243rem !important;
    left: -0.6243rem !important;
    right: -0.6243rem !important;
    top: -0.6243rem !important;
  }

  /**
   * On large screens the submenu has a fixed position taking up all space
   * below the header bar.
   */

  .MegaMenu-submenu {
    bottom: 0;
    left: 0;
    position: fixed;
    top: calc(5.20158rem - 2px);
    width: 100%;
  }

  /**
   * The submenus display a colored, translucent overlay behind them.
   */

  .MegaMenu-submenuUnderlay {
    background: rgba(0, 85, 165, 0.6);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    top: calc(5.20158rem - 2px);
    transition: opacity 0.16667s ease-out;
    transition-delay: 0.16667s; /* 4 */
    width: 100%;
    z-index: -1;
  }

  .MegaMenu-submenuUnderlay.is-shown {
    opacity: 1;
    transition-delay: 0s;
  }

  /**
   * We apply some padding to wrapper elements
   *
   * Both of these elements are necessary since some special menu items (like
   * Search) only use one of them and require the padding from that element.
   * In the future we may want to explore simplifying this.
   */

  .MegaMenu-submenuContent {
    padding-bottom: 2.2807rem;
  }

  .MegaMenu-submenuBodyWrapper {
    padding-top: 1.125rem;
  }

  /**
   * On large screens the main submenu content is centered with a max width
   * and padding.
   */

  .MegaMenu-overviewLink,
  .MegaMenu-submenuBody {
    margin: 0 auto;
    max-width: 64rem;
    padding-left: 1.60181rem;
    padding-right: 1.60181rem;
  }

  /**
   * If a submenu's contents is taller than the viewport we use a special
   * "scrollable" container to allow overflow scrolling of the content without
   * scrolling the overlay, or the band wave at the bottom of submenus.
   * In general using 100vh to calculate the viewport height is unreliable
   * since this value changes on mobile devices, but it should work on larger
   * screens. (Where these styles are applied.)
   *
   * This container holds animated content that can overflow horizontally. To
   * avoid flashing scroll bars during animations we hide horizontal overflow.
   */

  .MegaMenu-scrollable {
    max-height: calc(100vh - 5.20158rem + 2px);
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /**
   * This houses the main links in the submenu as well as a promo. It lays
   * them out using flexbox.
   */

  .MegaMenu-submenuBody {
    display: flex;
  }
}

/**
 * A modifier to reorder the content of the header on small screens.
 * Unfortunately this can mess up the tab order on small screens.
 * I couldn't think of a way to avoid that without having two copies of the
 * menu: one for small screens and one for large.
 */

@media(max-width: 56.999em) {
  .MegaMenu--centeredLogo {
    padding: 0;
  }

  .MegaMenu--centeredLogo .MegaMenu-inner {
    justify-content: space-between;
  }

  .MegaMenu--centeredLogo .MegaMenu-home {
    margin-right: 0;
  }

  .MegaMenu--centeredLogo .MegaMenu-navWrapper--main {
    order: -1;
  }
}

/**
 * An optional modifier to allow submenus to have colored headers.
 * This was originally designed for the WCH theme but can be used with any theme
 *
 * 1. Apply a background and text color
 * 2. Apply even spacing around the bar content
 * 3. Unset a border that's normally applied
 * 4. Adjust the color of the "caret" shown when a submenu is opened to match
 *    the header bar (if there is a header. Some submenus like search have no
 *    header.)
 */

@media (min-width: 57em) {
  .MegaMenu--submenusHaveHeaders .MegaMenu-submenuHeader {
    background: #efefef; /* 1 */
  }

  .MegaMenu--submenusHaveHeaders .MegaMenu-overviewLink {
    border-bottom: none; /* 3 */
    color: #ffffff; /* 1 */
    padding: 1.26563rem; /* 2 */
  }

  .MegaMenu--submenusHaveHeaders .MegaMenu-submenuToggle:not(.MegaMenu-submenuToggle--noHeader)::before {
    background: #efefef; /* 4 */
  }
}

/**
 * The MegaMenu--texturedHeader modifier adds a subtle textured background
 * on large screens.
 */

@media (min-width: 57em) {
  .MegaMenu--texturedHeader {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850 265' fill='%23389bda' opacity='0.025' stroke='%23389bda'%3E %3Cpath d='M-4.9924,157.66s189.6391-29.7407,310.8535,11.11,229.6424,20.3517,342.6756,12.2475,211.6651,44.0836,211.6651,44.0836' fill='none' stroke-width='3'/%3E %3Cpath d='M94.2873,160.5122c6.229,0.2225,11.4414-5.2,11.6422-12.1118s-4.687-12.6953-10.9168-12.9179-11.4414,5.2-11.6421,12.1117S88.0575,160.2895,94.2873,160.5122Z'/%3E %3Cpath d='M421.5664,197.2649c2.99,0.1069,5.4921-2.496,5.5883-5.8136s-2.25-6.0937-5.24-6.2006-5.4922,2.496-5.5883,5.8136S418.5762,197.1581,421.5664,197.2649Z'/%3E %3Cpath d='M659.4078,187.7255c3.4885,0.1247,6.4075-2.9119,6.52-6.7825s-2.6247-7.1093-6.1132-7.2341-6.4075,2.912-6.52,6.7826S655.9193,187.6009,659.4078,187.7255Z'/%3E %3Cpath d='M397.2394,33.1215c4.1732-.0134,7.5855-3.7726,7.6215-8.3964s-3.3177-8.3612-7.491-8.3478-7.5854,3.7726-7.6215,8.3964S393.0663,33.1349,397.2394,33.1215Z'/%3E %3Cpath d='M166.2076,21.06c3.4368-.011,6.2468-3.1068,6.2765-6.9147s-2.7322-6.8857-6.169-6.8747-6.2468,3.1069-6.2765,6.9147S162.7709,21.0709,166.2076,21.06Z'/%3E %3Cpath d='M-23.4108,56.0578S92.11,12.4336,212.5943,12.0464,452.94,36.4147,549.3474,36.1049,784.8623,23.8484,866.73,16.7649' fill='none' stroke-width='3'/%3E %3Cellipse cx='446.1794' cy='230.9704' rx='7.5538' ry='8.3746'/%3E %3Cellipse cx='677.2379' cy='242.3007' rx='6.2208' ry='6.8967'/%3E %3Cpath d='M866.528,201.0045s-115.1467,43.2666-235.593,43.2666S390.47,219.1225,294.0927,219.1225,58.742,230.6258-23.0468,237.4484' fill='none' stroke-width='3'/%3E %3Cpath d='M394.0508,169.91c4.141-.5633,7.0871-4.7414,6.58-9.3323s-4.2742-7.8558-8.4152-7.2925-7.087,4.7415-6.58,9.3323S389.91,170.4734,394.0508,169.91Z'/%3E %3Cpath d='M163.3044,188.393c3.41-.4639,5.8364-3.9047,5.4191-7.6854s-3.52-6.4695-6.93-6.0056-5.8364,3.9048-5.4191,7.6854S159.8942,188.8569,163.3044,188.393Z'/%3E %3Cpath d='M-20.8125,248.0939S88.74,189.602,208.2922,173.34s241.4354-7.5041,337.097-20.5162,232.3436-43.1934,312.778-61.008' fill='none' stroke-width='3'/%3E %3Cpath d='M875.452,142.5487s-192.1069,35.1245-316.1535-3.2608-233.8122-14.751-348.5181-3.5946S-5.2588,96.3591-5.2588,96.3591' fill='none' stroke-width='3'/%3E %3Cpath d='M774.495,142.2146c-6.3357-.0653-11.5194,5.58-11.5783,12.61s5.03,12.7811,11.3652,12.8465,11.5194-5.58,11.5782-12.61S780.8306,142.28,774.495,142.2146Z'/%3E %3Cpath d='M441.11,113.3174c-3.0412-.0313-5.5294,2.6785-5.5576,6.0528s2.4142,6.135,5.4553,6.1663,5.5293-2.6785,5.5576-6.0528S444.1515,113.3488,441.11,113.3174Z'/%3E %3Cpath d='M199.592,129.1566c-3.548-.0366-6.4509,3.125-6.4838,7.0615s2.8165,7.1574,6.3645,7.194,6.4509-3.125,6.4838-7.0615S203.14,129.1932,199.592,129.1566Z'/%3E %3Cpath d='M867.5323,53.2257S677.1211,96.6122,551.5328,63.6188,317.3017,58.9772,203.1846,75.0759-14.3516,45.1066-14.3516,45.1066' fill='none' stroke-width='3'/%3E %3Cpath d='M766.6549,57.2511c-6.3326.2083-11.2677,6.0725-11.023,13.0981s5.5767,12.552,11.9093,12.3438S778.809,76.62,778.5642,69.5949,772.9875,57.0428,766.6549,57.2511Z'/%3E %3Cpath d='M432.3335,42.7758c-3.04.1-5.4085,2.9148-5.2911,6.2871s2.6768,6.025,5.7165,5.925,5.4085-2.9148,5.291-6.2871S435.3731,42.6759,432.3335,42.7758Z'/%3E %3Cpath d='M239.7243,215.439c-3.5463.1166-6.31,3.4006-6.1729,7.3349s3.123,7.0292,6.6692,6.9125,6.31-3.4006,6.1729-7.3349S243.27,215.3223,239.7243,215.439Z'/%3E %3Cpath d='M-18.9983,91.1959s191.2523-40.4666,316.1276-5.55,234.0721,8.231,348.49-6.1182,216.8606,33.3017,216.8606,33.3017' fill='none' stroke-width='3'/%3E %3Cpath d='M81.9345,88.7166c6.3352-.1112,11.39-5.9,11.29-12.9285S87.9071,63.1511,81.572,63.2624s-11.39,5.9-11.2894,12.9285S75.5994,88.8279,81.9345,88.7166Z'/%3E %3Cpath d='M319.8675,98.2469c3.0409-.0534,5.4671-2.8318,5.419-6.2057s-2.5521-6.0658-5.593-6.0124-5.467,2.8318-5.419,6.2057S316.8266,98.3,319.8675,98.2469Z'/%3E %3Cpath d='M656.9517,85.7505c3.5477-.0623,6.3782-3.3037,6.3221-7.24s-2.9775-7.0767-6.5251-7.0144-6.3782,3.3037-6.3221,7.24S653.404,85.8128,656.9517,85.7505Z'/%3E %3C/svg%3E");
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/** @define Ordered */

/**
 * Ordered lists with stylized counter increments.
 */

.Ordered {
  list-style: none;
  padding-left: 0;
  counter-reset: orderFancy;
  list-style: none;
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Using direct child instead of list item so this class could be applied
 * to something other than an ordered list (ol).
 */

.Ordered > * {
  padding-left: 2.8382rem;
  position: relative;
}

.Ordered > *::before {
  background: #ffffff;
  border: 2px solid #dddddd;
  border-radius: 1.01364rem;
  content: counter(orderFancy);
  counter-increment: orderFancy;
  display: block;
  height: 2.02729rem;
  left: 0;
  line-height: 1.80203rem;
  position: absolute;
  text-align: center;
  top: -0.29364rem;
  width: 2.02729rem;
}

/**
 * Adds a bit of space above the counter, for use in lists of items that are
 * taller than standard text line height such as form inputs.
 */

.Ordered--offset > *::before {
  top: 0.34644rem;
}

/* stylelint-enable */

/**
 * @define Overlay
 */

/**
 * 1. If there is an inset content, assume it is a spinner or other visual
 *    indicator and center-align it on both axes.
 */

.Overlay {
  align-items: center; /* 1 */
  background-color: rgba(255, 255, 255, 0.6);
  display: flex; /* 1 */
  height: 100%;
  justify-content: center; /* 1 */
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.2s ease-in-out;
  width: 100%;
  z-index: 200;
}

.Overlay:not(.is-shown) {
  opacity: 0;
}

/**
 * Dark Overlay modifier
 */

.Overlay--dark {
  background-color: rgba(54, 54, 54, 0.9);
}

/**
 * The PageContent pattern is tightly coupled with the MegaMenu pattern.
 * When the MegaMenu opens it becomes `position: fixed` instead of `static`.
 * Because of this the PageContent shifts up when the MegaMenu is open.
 * To counteract that we push the PageContent back down.
 */

.PageContent.is-underMegaMenu {
  margin-top: 4.10989rem;
}

@media(min-width: 57em) {
  .PageContent.is-underMegaMenu {
    margin-top: 5.20158rem;
  }
}

/** @define Pager */

/**
 * We inline carets via SVG. This is more performant and results in a smaller
 * file than base64, but less so than an inline icon. But it would be really
 * difficult to pull off this sort of stuff with a lot of markup fenagling
 * in templates.
 */

/**
 * We have to output caret stuff in a few different places, so I made a mixin
 * to keep things slightly more DRY.
 *
 * 1. Size and position icon within element.
 * 2. Force visiblity of element.
 * 3. Prevent element from squishing or expanding in a flex container.
 * 4. Element dimensions (ideally slightly larger than adjacent text).
 *
 * @see https://csswizardry.com/2016/02/mixins-better-for-performance/
 */

/**
 * Containing element. This may contain the pagination items directly, or it
 * may contain both a summary and a nested list of items.
 *
 * 1. Middle-align elements vertically, because it looks nice. 🌻
 * 2. This isn't strictly necessary, but it makes a nice fallback in case we
 *    forget to include a direction modifier to define which item is "previous"
 *    and which is "next."
 * 3. We sometimes need to position something absolutely relative to this
 *    container. This lets us do that!
 * 4. Removes default list styling (left padding specifically).
 */

.Pager {
  align-items: center; /* 1 */
  display: flex; /* 1, 2 */
  justify-content: space-between; /* 2 */
  position: relative; /* 3 */
  list-style: none;
  padding-left: 0; /* 4 */
}

/**
 * An optional "summary" element that will display _between_ the next/previous
 * items. Useful for communicating current page, a heading, a "load more"
 * control, etc.
 *
 * 1. Center visually within container. Otherwise, this would be left-aligned.
 * 2. If `Pager-items` is present, it will be absolutely positioned. To avoid
 *    elements overlapping this one, we make sure it's always on top.
 * 3. Constrain width based on assumption that there will be stuff to the left
 *    and the right.
 */

.Pager-summary {
  margin: auto; /* 1 */
  position: relative; /* 2 */
  text-align: center;
  width: 33.33333%; /* 3 */
  z-index: 1; /* 2 */
}

.Pager--compact .Pager-summary {
  width: 80%;
}

/**
 * The `Pager` element can be a `<ul>` or `<ol>` and container `Pager-item`
 * elements directly, but when a `Pager-summary` is present we'll need an
 * additional list element to separate the next/previous controls from that
 * element.
 *
 * 1. Arrange items the same way `Pager` would.
 * 2. Take up the full element width no matter what.
 * 3. Removes default list styling (left padding specifically).
 */

.Pager-items {
  align-items: inherit; /* 1 */
  display: inherit; /* 1 */
  flex: 0 0 auto; /* 2 */
  justify-content: inherit; /* 1 */
  width: 100%; /* 2 */
  list-style: none;
  padding-left: 0; /* 3 */
}

/**
 * If a `Pager-summary` precedes `Pager-items`, position `Pager-items`
 * absolutely. We do this because it's a lot more likely that `Pager-summary`
 * will have _taller_ content (esp. if it contains a heading), so letting it
 * dictate the height prevents that content from overlapping adjacent elements.
 *
 * We don't do this by default because if someone is using `Pager-items` but
 * has omitted `Pager-summary` for some reason, then `Pager` would have no
 * `height` and would appear broken.
 */

.Pager-summary ~ .Pager-items {
  position: absolute;
}

/**
 * Represents a list item within `Pager` or `Pager-items`. Contains an action.
 *
 * 1. Maintain alignment of child elements (caret, label) defined by parent(s)
 *    for visual consistency.
 * 2. Occupy the full width by default to maximize touch targets. We'll
 *    constrain the width later when we know more about what surrounds this
 *    element.
 */

.Pager-item {
  align-items: inherit; /* 1 */
  display: inherit; /* 1 */
  flex: 0 0 auto;
  width: 100%; /* 2 */
}

.Pager--compact .Pager-item {
  width: 10%;
}

/**
 * If the `Pager-item` is not the only child, then we can assume a second link
 * is present ("next" or "previous"), so we should restrict the size to allow
 * for two elements side-by-side.
 */

.Pager-item:not(:only-child) {
  max-width: 50%;
}

/**
 * If a `Pager-summary` element is present, then we should restrict the size
 * even further to allow for _three_ elements ("previous," "summary," "next").
 */

.Pager-summary ~ .Pager-items .Pager-item:not(:only-child) {
  max-width: 33.33333%;
}

/**
 * A "previous" item should always be visually first in the list.
 */

.Pager-item--previous {
  order: -1;
}

/**
 * A "next" item should always be visually last in the list.
 */

.Pager-item--next {
  justify-content: flex-end;
  margin-left: auto;
  order: 1;
  text-align: right;
}

/**
 * We push these placeholder carets to the opposite ends of their container
 * from the link that is present.
 *
 * In the case of the "previous" caret, we flip the icon horizontally. This is
 * so we don't have to import separate "left" and "right" carets.
 */

.Pager-item--previous:only-child::after {
  margin-left: auto;
}

.Pager-item--next:only-child::before {
  margin-right: auto;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/**
 * Actions are the actual "previous" and "next" elements. Intended to be an
 * interactive element like an `<a>` or `<button>`.
 *
 * 1. Maintain alignment for visual consistency.
 * 2. Overrides for opinionated elements like `<button>` or `<input>`.
 * 3. Make the element feel and behave like a more native control.
 * 4. Maximize that touch target size!
 */

.Pager-action {
  align-items: inherit; /* 1 */
  background: transparent; /* 2 */
  border: 0; /* 2 */
  color: #0055a5;
  cursor: pointer; /* 3 */
  display: inherit; /* 1 */
  flex: inherit; /* 1 */
  font: inherit; /* 2 */
  justify-content: inherit; /* 1 */
  line-height: normal; /* 2 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  text-align: inherit; /* 1 */
  text-decoration: none; /* 2 */
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none; /* 3 */
  width: 100%; /* 4 */
}

/**
 * If the parent `Pager-item` is an only child, it will be full-width to allow
 * for the opposite element's placeholder caret to position itself to the
 * opposing side, so we need to constrain widths here instead.
 */

.Pager-item:only-child .Pager-action {
  max-width: 50%;
}

.Pager-summary ~ .Pager-items .Pager-item:only-child .Pager-action {
  max-width: 33.33333%;
}

/**
 * When an action's direction is known, we add some padding to keep it from
 * running into adjacent elements.
 */

.Pager-item--previous .Pager-action {
  padding-right: 0.49327em;
}

.Pager-item--next .Pager-action {
  padding-left: 0.49327em;
}

/**
 * We also include caret (`›`) icons to reenforce direction.
 */

.Pager-item--previous .Pager-action::before,
.Pager-item--next .Pager-action::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' color='%230055a5'%3E %3Cpolyline points='8,5 16,12 8,19' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none'/%3E %3C/svg%3E");

  background-position: center;

  /* 1 */

  background-repeat: no-repeat;

  /* 1 */

  background-size: contain;

  /* 1 */

  content: "";

  /* 2 */

  display: block;

  /* 2 */

  flex: 0 0 auto;

  /* 3 */

  height: 1.125em;

  /* 4 */

  width: 1.125em;

  /* 4 */
}

/**
 * We flip the previous icon (again, so we only need to import one), adding
 * slight gaps between the icon and adjacent content.
 */

.Pager-item--previous .Pager-action::before {
  margin-right: 0.16442em;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.Pager-item--next .Pager-action::after {
  margin-left: 0.16442em;
}

/**
 * Hover state (matches base link styles)
 */

.Pager-action:hover {
  color: #00748c;
  text-decoration: underline;
}

.Pager-item--previous .Pager-action:hover::before,
.Pager-item--next .Pager-action:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' color='%2300748c'%3E %3Cpolyline points='8,5 16,12 8,19' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none'/%3E %3C/svg%3E");
}

/**
 * Disabled state
 */

.Pager-action:disabled,
.Pager-action.is-disabled {
  color: #797482;
  pointer-events: none;
}

.Pager-item--previous .Pager-action:disabled::before,
.Pager-item--previous .Pager-action.is-disabled::before,
.Pager-item--next .Pager-action:disabled::after,
.Pager-item--next .Pager-action.is-disabled::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' color='%23797482'%3E %3Cpolyline points='8,5 16,12 8,19' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none'/%3E %3C/svg%3E");
  opacity: 0.5;
}

/**
 * Label container
 *
 * To prevent text from wrapping or overlapping, we want to truncate it.
 * Because of the way Flexbox layouts are calculated, this requires an
 * additional element.
 *
 * @see https://css-tricks.com/flexbox-truncated-text/
 */

.Pager-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * Hide label content in actions when Pager is compact, using the same technique
 * as the `u-hiddenVisually` utility class.
 */

.Pager--compact .Pager-action .Pager-label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/** @define Pagination */

/**
 * Change the caret color based on brand.
 */

/**
 * 1. Arrange items in a horizontally-centered row.
 * 2. Hide overflowing items by wrapping them to a new line outside this
 *    element's bounding box.
 * 3. Condense line heights for easier alignment.
 * 4. Set aside space for next/previous controls.
 * 5. Allow next/previous controls to position themselves relative to this
 *    containing element.
 */

.Pagination {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  height: calc(2em + 1rem); /* 2 */
  justify-content: center; /* 1 */
  line-height: 1; /* 3 */
  overflow: hidden; /* 2 */
  padding-left: 3em; /* 4 */
  padding-right: 3em; /* 4 */
  position: relative; /* 5 */
}

/**
 * Purely cosmetic adjustment; keeps items aligned without extra whitespace
 * between.
 */

.Pagination-item {
  align-items: baseline;
  display: flex;
}

/**
 * Include a horizontal ellipsis before or after links that jump to first or
 * last page outside the current pagination bounds.
 */

.Pagination-item--first::after,
.Pagination-item--last::before {
  color: #808080;
  content: "…";
  display: inline-block;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/**
 * Though these are called links, they can also be applied to other elements
 * for consistent spacing.
 */

.Pagination-link {
  display: inline-block;
  padding: 1em;
}

.Pagination-link:link,.Pagination-link:visited {
  color: #0055a5;
  text-decoration: none;
}

.Pagination-link:any-link {
  color: #0055a5;
  text-decoration: none;
}

.Pagination-link:link:focus, .Pagination-link:link:hover, .Pagination-link:visited:focus, .Pagination-link:visited:hover {
  color: #00748c;
  text-decoration: underline;
}

.Pagination-link:any-link:focus, .Pagination-link:any-link:hover {
  color: #00748c;
  text-decoration: underline;
}

/**
 * To avoid duplicating elements, next/back controls are actually just children
 * of their respective pages. To maintain inactive controls even when these
 * are absent, we also apply most of the same styles to pseudo elements.
 *
 * 1. Show the pagination icon (rightward by default).
 * 2. Absolute position the control relative to the container.
 * 3. Force visibility for pseudo elements.
 */

.Pagination:not(.Pagination--withPrevious)::before,
.Pagination:not(.Pagination--withNext)::after,
.Pagination-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' color='currentColor'%3E %3Cpolyline points='8,5 16,12 8,19' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none'/%3E %3C/svg%3E"); /* 1 */
  background-position: right center; /* 1 */
  background-repeat: no-repeat; /* 1 */
  background-size: 1em; /* 1 */
  bottom: 0; /* 2 */
  content: ""; /* 3 */
  opacity: 0.6;
  position: absolute; /* 2 */
  right: 0; /* 2 */
  top: 0; /* 2 */
  width: 3em; /* 2 */
}

/**
 * Mimic link hover/focus color.
 */

.Pagination-control:hover, .Pagination-control:focus {
  opacity: 1;
}

/**
 * Because pseudo elements should only be visible when there is no next or
 * back link, color these with a different inactive style.
 */

.Pagination:not(.Pagination--withPrevious)::before,
.Pagination:not(.Pagination--withNext)::after {
  opacity: 0.3;
}

/**
 * 1. Position the "previous" control opposite the "next" control.
 * 2. Flip this element so it will face the opposite direction.
 */

.Pagination:not(.Pagination--withPrevious)::before,
.Pagination-control--previous {
  left: 0; /* 1 */
  right: auto; /* 1 */
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1); /* 2 */
}

/**
 * @define PrimarySecondarySummary
 */

.PrimarySecondarySummary {
  border: 0 solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-flow: column wrap;
  grid-row-gap: 0.49327rem;
  row-gap: 0.49327rem
}

@media (min-width: 47em), print {

.PrimarySecondarySummary {
    flex-direction: row;
    justify-content: space-between
}
  }

@media print {

.PrimarySecondarySummary {
    border-color: currentColor;
    font-size: 0.79012rem
}
  }

/**
 * 1. Smaller viewports renders a full-width stacked layout
 * 2. At medium viewport widths, the content is split 50/50 with the given gap
 *    size split between the two.
 */

.PrimarySecondarySummary-primaryHeader,
.PrimarySecondarySummary-primaryContent,
.PrimarySecondarySummary-secondaryHeader,
.PrimarySecondarySummary-secondaryContent {
  flex-basis: 100% /* 1 */
}

@media (min-width: 47em) {

.PrimarySecondarySummary-primaryHeader,
.PrimarySecondarySummary-primaryContent,
.PrimarySecondarySummary-secondaryHeader,
.PrimarySecondarySummary-secondaryContent {
    flex-basis: calc(50% - 1.01364rem) /* 2 */
}
  }

/**
 * 1. At larger viewport widths and for print, the Primary heading and content
 *    take up ~66% of the size. The gap size is split in half between the
 *    Primary and Secondary headings/content containers.
 */

@media (min-width: 64em), print {

.PrimarySecondarySummary-primaryHeader,
.PrimarySecondarySummary-primaryContent {
    flex-basis: calc(66.66667% - 1.01364rem) /* 1 */
}
  }

/**
 * 1. At larger viewport widths and for print, the Secondary heading and content
 *    take up ~33% of the size. The gap size is split in half between the
 *    Primary and Secondary headings/content containers.
 */

@media (min-width: 64em), print {

.PrimarySecondarySummary-secondaryHeader,
.PrimarySecondarySummary-secondaryContent {
    flex-basis: calc(33.33333% - 1.01364rem)
}
  }

/**
 * 1. Place headers at the bottom of their containers to match design intent.
 */

@media (min-width: 47em), print {

.PrimarySecondarySummary-primaryHeader,
.PrimarySecondarySummary-secondaryHeader {
    align-self: end /* 1 */
}
  }

/**
 * 1. Order:
 *    - Primary Heading
 *    - Secondary Heading
 *    - Primary Content
 *    - Secondary Content
 *
 *    With the flex wrap applied, allows for a creative way to reconstruct the
 *    CSS Grid layout from the prototype designs.
 */

@media (min-width: 47em), print {

.PrimarySecondarySummary-primaryHeader {
    order: -2 /* 1 */
}
  }

/**
 * 1. Order:
 *    - Primary Heading
 *    - Secondary Heading
 *    - Primary Content
 *    - Secondary Content
 *
 *    With the flex wrap applied, allows for a creative way to reconstruct the
 *    CSS Grid layout from the prototype designs.
 */

.PrimarySecondarySummary-secondaryHeader {
  margin-top: 0.63173rem
}

@media (min-width: 47em), print {

.PrimarySecondarySummary-secondaryHeader {
    margin-top: 0;
    order: -1 /* 1 */
}
  }

/**
 * Group styles
 *
 * Unique styles are added when multiple PrimarySecondarySummary components
 * are placed next to each other.
 */

.PrimarySecondarySummary + .PrimarySecondarySummary {
  border-top-width: 1px;
  margin-top: 2.02729rem;
  padding-top: 2.02729rem
}

@media print {

.PrimarySecondarySummary + .PrimarySecondarySummary {
    margin-top: 1.125rem;
    padding-top: 1.125rem
}
  }

/**
 * @define ProfileHero
 */

/**
 * These styles are separate from the root element so a separate container can
 * (optionally) contain the content therein.
 *
 * 1. We only apply horizontal padding so horizontal padding can be coordinated
 *    with surrounding content.
 */

.ProfileHero {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-bottom: 1.60181rem; /* 1 */
  padding-top: 1.60181rem; /* 1 */
}

@media (min-width: 47em) {
  /**
   * At larger sizes, we arrange children in a horizontal row
   */

  .ProfileHero {
    flex-direction: row;
  }
}

.ProfileHero-name {
  color: #ffffff;
  font-size: 1.26563em;
}

@media (min-width: 64em) {
  .ProfileHero-name {
    font-size: 1.42383em;
  }
}

.ProfileHero-type {
  color: inherit;
  font-size: 1em;
  font-weight: 400;
  text-transform: none;
  font-family: sans-serif;
}

.wf-active .ProfileHero-type {
  font-family: Noto Sans;
}

@media (min-width: 64em) {
  .ProfileHero-type {
    font-size: 1em;
  }
}

/**
 * Portrait (contains img or other media representing profile visually)
 *
 * 1. Crop stuff that exceeds the container size.
 * 2. Allow child elements to position themselves absolutely.
 */

.ProfileHero-portrait {
  overflow: hidden; /* 1 */
  position: relative; /* 2 */
}

@media (max-width: 46.999em) {
  /**
   * At small sizes, we show the portrait in a little circle.
   *
   * 1. Background color must match image bg if JPG is used
   *    (with cloudinary, this is set in the URL)
   * 2. Round corners.
   * 3. Cap the size so it's a circle and not an oval or something.
   * 4. Center horizontally within container.
   * 5. Inset used to fit image inside heavy borders so that BH "badge"
   *    remains visible on jacket breast
   * 6. Hack to get webkit browsers to respect `overflow: hidden`. Unfortunately
   *    not foolproof… ¯\_(ツ)_/¯
   */

  .ProfileHero-portrait {
    background-color: #efefef; /* 1 */
    border: 0.49327rem solid hsl(206.47058823529414, 23.9436619718%, 20.8431372549%);
    border-radius: 100%; /* 2 */
    height: 8rem; /* 3 */

    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
    margin-bottom: 0;
    margin-left: auto; /* 4 */
    margin-right: auto; /* 4 */
    margin-top: 0;

    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
    order: initial;
    padding: 0.2rem; /* 5 */
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); /* 6 */
    width: 8rem; /* 3 */
  }
}

@media (min-width: 47em) {
  /**
   * At larger sizes, we don't crop the image, instead showing it to the side
   * of adjacent content.
   *
   * 1. Content is centered by default, but if the content is taller we want
   *    this element to align itself to the bottom to reenforce the crop of
   *    the portrait relative to the container.
   * 2. Kinda like setting width but with the benefit of restricting crazy
   *    flex scaling.
   * 3. Counteract the vertical container padding. Doing this one negative
   *    margin lets us avoid resetting padding on the container and adding it to
   *    other child elements.
   * 4. Keep the basis (2) from overwhelming the container or exceeding the
   *    image size past the intent of the design.
   * 5. Show after content.
   */

  .ProfileHero-portrait {
    align-self: flex-end; /* 1 */
    flex: 0 0 50%; /* 2 */
    margin-bottom: -1.60181rem; /* 3 */
    max-width: 500px; /* 4 */
    order: 1; /* 5 */
    position: relative; /* 3 */
  }
}

/**
 * The actual portrait `<img loading="lazy">` element.
 *
 * 1. Helps minimize any vertical gaps.
 */

.ProfileHero-portraitObject {
  display: block; /* 1 */
}

@media (max-width: 46.999em) {
  /**
   * At small sizes, we position a pre-cropped thumbnail
   *
   * 1. Offset from container's top border when zoom/crop is tight around face
   */

  .ProfileHero-portraitObject {
    height: 100%;
    margin-top: 0.2rem; /* 1 */
    max-width: none;
    width: auto;
  }
}

/**
 * Content container
 */

@media (max-width: 46.999em) {
  /**
   * At small sizes, center-align text to match alignment of portrait.
   */

  .ProfileHero-content {
    text-align: center;
  }

  /**
   * When portrait is present, add a gap between.
   */

  .ProfileHero-portrait + .ProfileHero-content {
    margin-top: 0.79012rem;
  }
}

@media (min-width: 47em) {
  .ProfileHero-content {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 1.125rem;
  }
}

@media (min-width: 64em) {
  .ProfileHero-content {
    font-size: 1.26563rem;
  }
}

/**
 * @define ProfilePortrait
 */

/**
 * The wrapper for our photo and optional flag
 *
 * 1. Make this inline block in case it's a link or other inline tag.
 * 2. Make it position relative so we can absolutely position its flag
 */

.ProfilePortrait {
  display: inline-block; /* 1 */
  position: relative; /* 2 */
}

/* stylelint-disable plugin/selector-bem-pattern */

a.ProfilePortrait {
  cursor: pointer;
}

/* stylelint-enable */

/**
 * 1. Pad by the border size to prevent content crop
 * 2. Circular
 * 3. Designed for square content
 * 4. For Webkit; see .ProfileHero-portrait
 */

.ProfilePortrait-frame {
  background-color: #efefef;
  border: 0.25rem solid #dddddd; /* 1 */
  border-radius: 100%; /* 2 */
  display: block;
  height: 4.5rem; /* 3 */
  overflow: hidden;
  padding: 0.25rem; /* 1 */
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); /* 4 */
  width: 4.5rem; /* 3 */
}

/**
 * Link effect on hover/focus. If a parent link is hovered or focused
 * we also apply the styles.
 * We disable our selector pattern here so we don’t have to change background
 * and border colors separately depending on whether or not a portrait
 * is highlighted.
 */

/* stylelint-disable plugin/selector-bem-pattern */

a:hover .ProfilePortrait-frame,a:focus .ProfilePortrait-frame {
  -webkit-filter: brightness(1.05);
          filter: brightness(1.05);
}

/* stylelint-enable */

@media(min-width: 47em) {
  .ProfilePortrait-frame {
    height: 5rem;
    width: 5rem;
  }
}

.ProfilePortrait.is-highlighted .ProfilePortrait-frame {
  background-color: #1e75bb;
  border-color: #0055a5;
}

/**
 * 1. Fill container height
 * 2. ...and center
 * 3. Push down to offset the parent's inset
 */

.ProfilePortrait-object {
  height: 100%; /* 1 */
  margin-left: auto; /* 2 */
  margin-right: auto; /* 2 */
  margin-top: 0.25rem; /* 3 */
  max-width: none;
  width: auto;
}

/**
 * Optional flag positioned below and to the left of the portrait.
 *
 * 1. Circular
 */

.ProfilePortrait-flag {
  background: #057a5f;
  border: 1px solid #ffffff;
  border-radius: 100%; /* 1 */
  bottom: -0.43846rem;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 0.70233rem;
  height: 3.25em;
  left: -0.43846rem;
  line-height: 3.25em;
  position: absolute;
  text-align: center;
  width: 3.25em;
}

/**
 * The flag should also get a hover effect if the profile is hovered
 * or a parent link is hovered.
 */

/* stylelint-disable plugin/selector-bem-pattern */

a:hover .ProfilePortrait-flag,a:focus .ProfilePortrait-flag {
  background: hsl(166.15384615384616, 92.125984252%, 27.9019607843%);
}

/* stylelint-enable */

/**
 * @define ProfilePortraitGroup
 */

.ProfilePortraitGroup {
  align-items: center;
  display: flex;
  position: relative;
}

.ProfilePortraitGroup-item {
  margin-right: -0.49327rem;
}

.ProfilePortraitGroup-item:first-of-type {
  z-index: 1;
}

.ProfilePortraitGroup-item:nth-child(3) {
  z-index: -1;
}

.ProfilePortraitGroup-extra {
  align-items: center;
  background-color: hsl(209.0909090909091, 100%, 92.3529411765%);
  border-radius: 50%;
  color: #0055a5;
  display: flex;
  font-size: 1.26563rem;
  font-weight: 700;
  height: 3.5rem;
  justify-content: center;
  line-height: 1;
  width: 3.5rem;
  z-index: -2;
}

@media(min-width: 47em) {
  .ProfilePortraitGroup-extra {
    font-size: 1.42383rem;
  }
}

/**
 * 1. Pad by the border size to prevent content crop
 * 2. Circular
 * 3. Designed for square content
 * 4. Makes it more likely for Webkit to respect our overflow setting;
      see .ProfileHero-portrait
 */

.ProfilePortraitGroup-frame {
  background-color: #1e75bb;
  border: 0.25rem solid #0055a5; /* 1 */
  border-radius: 100%; /* 2 */
  display: block;
  height: 3.5rem; /* 3 */
  overflow: hidden;
  padding: 0.25rem; /* 1 */
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); /* 4 */
  width: 3.5rem; /* 3 */
}

@media(min-width: 47em) {
  .ProfilePortraitGroup-frame,
  .ProfilePortraitGroup-extra {
    height: 4rem;
    width: 4rem;
  }
}

/**
 * 1. Fill container height
 * 2. ...and center
 * 3. Push down to offset the parent's inset
 */

.ProfilePortraitGroup-object {
  height: 100%; /* 1 */
  margin-left: auto; /* 2 */
  margin-right: auto; /* 2 */
  margin-top: 0.25rem; /* 3 */
  max-width: none;
  width: auto;
}

/**
 * @define PullQuote
 */

.PullQuote {
  color: #363636;
}

.PullQuote-content {
  font-size: 1rem;
  line-height: 1.44;
  font-family: sans-serif;
}

.wf-active .PullQuote-content {
  font-family: Noto Sans;
}

.PullQuote-cite {
  font-size: 0.8888888888888888rem;
  margin-left: 1rem;
  margin-top: 1rem;
  font-family: sans-serif;
}

.wf-active .PullQuote-cite {
  font-family: Noto Sans;
}

.PullQuote-cite::before {
  content: "–\00a0";
}

.PullQuote-source {
  text-transform: none;
}

.PullQuote-position {
  white-space: normal;
}

/**
 * Custom selectors
 */

/**
 * The Prose pattern applies basic spacing and styling to text elements.
 * It is used to wrap CMS generated content
 */

.Prose > * + * {
  margin-bottom: 0;
  margin-top: 1.125em;
}

@media (min-width: 47em) {
  .Prose ul {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: auto;
       -moz-columns: auto;
            columns: auto;
    -webkit-columns: initial;
       -moz-columns: initial;
            columns: initial;
  }

  .Prose ul > * {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
}

.Prose ul > * + *,
.Prose ol > * + * {
  margin-bottom: 0;
  margin-top: 0.70233em;
}

.Prose h1 {
  color: inherit;
}

/**
 * Removes underline from linked headings unless specified
 * with a utility class.
 */

.Prose h1 a:not([class]),.Prose h2 a:not([class]),.Prose h3 a:not([class]),.Prose h4 a:not([class]),.Prose h5 a:not([class]),.Prose h6 a:not([class]) {
  text-decoration: none;
}

/**
 * Adds an arrow icon after linked headings in the WCH brand.
 */

.Prose h1 a::after,.Prose h2 a::after,.Prose h3 a::after,.Prose h4 a::after,.Prose h5 a::after,.Prose h6 a::after {
  content: none;
  vertical-align: middle;
}

.Prose h1 a:hover::after,.Prose h2 a:hover::after,.Prose h3 a:hover::after,.Prose h4 a:hover::after,.Prose h5 a:hover::after,.Prose h6 a:hover::after {
  content: none;
}

/**
 * This selector underlines links without a defined class so we
 * don't get any unexpected underlines.
 */

.Prose a:not([class]) {
  text-decoration: underline;
}

.Prose--groovedHeadings > h1,
.Prose--groovedHeadings > h2,
.Prose--groovedHeadings > h3,
.Prose--groovedHeadings > h4,
.Prose--groovedHeadings > h5,
.Prose--groovedHeadings > h6 {
  background-color: transparent;
  /* 1 */
  border-width: 0;
  /* 1 */
  min-height: 2px;
  /* 2 */
  position: relative;
  /* 3 */

  padding-bottom: 0.55493rem;
}

.Prose--groovedHeadings > h1::after,
.Prose--groovedHeadings > h2::after,
.Prose--groovedHeadings > h3::after,
.Prose--groovedHeadings > h4::after,
.Prose--groovedHeadings > h5::after,
.Prose--groovedHeadings > h6::after {
  background: currentColor;
  /* 1 */
  border-radius: 1px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  max-width: 50%;
  opacity: 0.5;
  /* 1 */
  position: absolute;
  width: 1.42383rem;
}

@media (min-width: 64em) {

.Prose--groovedHeadings > h1::after,
.Prose--groovedHeadings > h2::after,
.Prose--groovedHeadings > h3::after,
.Prose--groovedHeadings > h4::after,
.Prose--groovedHeadings > h5::after,
.Prose--groovedHeadings > h6::after {
    width: 1.42383rem;
}
  }

/**
 * The following styles headings to match Welcome Packets.
 */

.Prose--welcome-packet-flow h1 {
  font-size: 2.02729rem;
}

.Prose--welcome-packet-flow h2 {
  font-size: 1.26563rem;
  font-style: normal;
  font-weight: 700;
}

.Prose--welcome-packet-flow h3 {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
}

/**
 * @define Range
 */

/*
 * Explicit width required for Firefox.
 */

.Range {
  width: 100%;
}

/*
 * The pseudo element used to style the track part of the range
 * element isn't visible on printed pages. To make sure the
 * entire element is visible when printed, custom styles are
 * limited to the screen.
 */

@media screen {
  /**
  * 1. Resets appearance.
  * 2. Otherwise defaults to white in Chrome.
  * 3. Remove default margin in some browsers.
  * 4. Remove default padding in some browsers.
  * 5. Set up focus transition.
  */

  .Range {
    -webkit-appearance: none;
            appearance: none; /* 1 */
    background: transparent; /* 2 */
    margin: 0; /* 3 */
    padding: 0; /* 4 */
    transition: -webkit-filter 0.2s 0.2s;
    transition: filter 0.2s 0.2s;
    transition: filter 0.2s 0.2s, -webkit-filter 0.2s 0.2s; /* 5 */
  }

  /**
  * Custom simplified focus styles
  */

  .Range:focus {
    outline: none;
  }

  /**
  * Track: Webkit
  */

  .Range::-webkit-slider-runnable-track {
    background-color: currentColor;
    border-radius: 3px;
    cursor: pointer;
    height: 4px;
    width: 100%;
  }

  .Range:focus::-webkit-slider-runnable-track {
    background-color: #000000;
    box-shadow: 0 0 0 3px #dddddd;
    outline: none;
  }

  /**
  * Track: Firefox
  */

  .Range::-moz-range-track {
    background-color: currentColor;
    border-radius: 3px;
    cursor: pointer;
    height: 4px;
    width: 100%;
  }

  .Range:focus::-moz-range-track {
    background-color: #000000;
    box-shadow: 0 0 0 3px #dddddd;
  }

  /**
  * Track: IE/Edge
  */

  .Range::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 0.75em 0;
    color: transparent;
    cursor: pointer;
    height: 4px;
    width: 100%;
  }

  .Range::-ms-fill-lower,
  .Range::-ms-fill-upper {
    background-color: currentColor;
    border-radius: 6px;
  }

  .Range:focus::-ms-fill-lower,
  .Range:focus::-ms-fill-upper {
    background-color: #000000;
    box-shadow: 0 0 0 3px #dddddd;
  }

  /**
  * Thumb
  */

  /**
  * Thumb: Webkit
  *
  * 1. Adjust visual height.
  */

  .Range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%); /* 1 */
    background: #ffffff;
    border: 2px solid #389bda;
    border-radius: 50%;
    cursor: pointer;
    height: 1.5em;
    width: 1.5em;
  }
    @media (min-width: 47em) {

  .Range::-webkit-slider-thumb {
      height: 1msu;
      width: 1msu;
  }
    }

  .Range:focus::-webkit-slider-thumb {
    border-color: hsl(203.33333333333334, 98.6440677966%, 63.7254901961%);
  }

  /**
  * Thumb: Firefox
  */

  .Range::-moz-range-thumb {
    background: #ffffff;
    border: 2px solid #389bda;
    border-radius: 50%;
    cursor: pointer;
    height: 1.5em;
    width: 1.5em;
  }
    @media (min-width: 47em) {

  .Range::-moz-range-thumb {
      height: 1msu;
      width: 1msu;
  }
    }

  .Range:focus::-moz-range-thumb {
    border-color: hsl(203.33333333333334, 98.6440677966%, 63.7254901961%);
  }

  /**
  * Thumb: IE/Edge
  *
  * 1. Override inexplicably default positioning.
  */

  .Range::-ms-thumb {
    transform: none; /* 1 */
    background: #ffffff;
    border: 2px solid #389bda;
    border-radius: 50%;
    cursor: pointer;
    height: 1.5em;
    width: 1.5em;
  }
    @media (min-width: 47em) {

  .Range::-ms-thumb {
      height: 1msu;
      width: 1msu;
  }
    }

  .Range:focus::-ms-thumb {
    border-color: hsl(203.33333333333334, 98.6440677966%, 63.7254901961%);
  }
}

/**
 * @define Row
 */

/**
 * 1. Keeps text of differing sizes and line heights nicely aligned within
 *    the Row.
 * 2. Although these elements would stack even as blocks, we want the content
 *    area to stretch when inside of a flex container.
 * 3. Some descendents may benefit from relative positioning. This also makes it
 *    easier if content needs to position itself absolutely.
 * 4. If the element is inside of a flex container but has narrow content, this
 *    prevents it from visually collapsing to one side.
 */

.Row {
  align-items: baseline; /* 1 */
  background-color: #ffffff;
  color: #363636;
  display: flex; /* 2 */
  flex-flow: row wrap;
  font-size: 0.88889rem;
  padding: 0.70233rem 0.49327rem;
  position: relative; /* 3 */
  transition: background-color 0.2s ease;
  width: 100%; /* 4 */
}

.Row:nth-child(even) {
  background-color: hsl(0, 0%, 97.7254901961%);
}

/**
 * The Row--linked modifier is added to rows with a Primary Action. This hover
 * state gives the appearance of the entire row being linked.
 */

.Row--linked:hover {
  background-color: hsl(209.0909090909091, 100%, 92.3529411765%);
  color: hsl(209.0909090909091, 100%, 22.3529411765%);
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Similar to Grid, we want a little side padding for all direct child elements.
 */

.Row > * {
  padding: 0 0.49327rem;
}

/* stylelint-enable */

/**
 * This pattern is designed for a very dense presentation of data, so on large
 * screens, the padding on each Row should be minimal.
 */

@media (min-width: 64em) {
  .Row {
    padding: 0.49327rem;
  }
}

/**
 * A little trick from the Card pattern that makes the entire Row appear to be
 * part of the Primary Action link.
 *
 * 1. In case there are any other links in the row, we want the primary action
 *    link "under" them so they'll still function as links.
 */

.Row-primaryAction::after {
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 2; /* 1 */
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Replaces browser-default focus outlines with a more attractive border on the
 * entire row for navigation via tabbing.
 */

.js-focus-visible .Row-primaryAction:focus {
  outline: none;
}

.js-focus-visible .Row-primaryAction.focus-visible::after {
  border: 2px solid #389bda;
}

.js-focus-visible .Row-primaryAction.focus-visible:focus::after {
  opacity: 1;
}

/**
 * Since we're adding a very light gray background to even rows for readability,
 * our default link --enter color fails contrast tests.
 */

.Row :link,.Row :visited {
  color: #0055a5;
}

.Row :any-link {
  color: #0055a5;
}

.Row :link:hover,.Row :visited:hover,.Row :link:focus,.Row :visited:focus {
  color: var(--color-text-row-enter);
}

.Row :any-link:hover,.Row :any-link:focus {
  color: var(--color-text-row-enter);
}

/**
 * Since we want other links in the Row to still function as links, we need to
 * disable the above for all links that do not have the `Row-primaryAction`
 * class. Disabling stylelint so we can sneak in a child element selector.
 */

.Row a:not(.Row-primaryAction) {
  position: relative;
  z-index: 3;
}

/**
 * If there's a row flag, the class 'Row--flagged' is added to the row. This
 * adds right padding to the second-to-last item in the row (the last item being
 * the flag) to provide room for the absolutely-positioned flag. The flag is
 * absolutely positioned so that it can be easily moved to the top right corner
 * when the Row is displayed as a column and so that the widths of sibling
 * elements aren't affected, which is critical for aligning columns with their
 * headings.
 */

.Row--flagged > *:nth-last-child(2) {
  padding-right: 2.02729rem;
}

/* stylelint-enable */

/**
 * 1. Ensures the flag width doesn't exceed the space provided to it by the
 *    padding added to its previous sibling.
 * 2. Vertically centers the flag within the Row.
 */

.Row-flag {
  max-width: 2.02729rem; /* 1 */
  padding: 0;
  position: absolute;
  right: 0.49327rem;
  top: 50%; /* 2 */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); /* 2 */
}

/**
 * The Row aligns as a column below the md breakpoint.
 */

@media (max-width: 46.999em) {
  .Row--aboveMd {
    flex-direction: column;
  }
}

/**
 * When the Row's content is stacked in a column, the flag looks better
 * positioned relative to the top of the Row.
 */

@media (max-width: 46.999em) {
  .Row--aboveMd .Row-flag {
    right: 0.49327rem;
    top: 0.70233rem;
    -webkit-transform: none;
            transform: none;
  }
}

/**
 * When aligned as a column instead of a row, the primary action acts as
 * heading and should be a little larger.
 */

@media (max-width: 46.999em) {
  .Row--aboveMd .Row-primaryAction {
    font-size: 1rem;
  }
}

/** @define Select */

/**
 * 1. Remove default select appearance
 * 2. Using the `postcss-inline-svg` helper so we can specify its color
 *    independent of text color.
 * 3. Position the caret offset right and center
 * 4. Size the caret relative to font-size
 * 5. Most of the time these will be full width, block elements.
 * 6. Add extra padding on the right to account for caret
 */

.Select {
  -webkit-appearance: none;
          appearance: none; /* 1 */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' stroke='%231e75bb'%3E %3Cpolyline transform='rotate(90,12,12)' points='8,5 16,12 8,19' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none'/%3E %3C/svg%3E"); /* 2 */
  background-position: right 0.79012rem center;
  background-repeat: no-repeat; /* 3 */
  background-size: 1rem 1rem; /* 4 */
  border-color: #dddddd;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box;
  color: currentColor;
  display: block; /* 5 */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 1ex 1em;
  padding-right: 1.79012rem; /* 6 */
  transition-duration: 0.2s;
  transition-property: all; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  transition-timing-function: ease;
  width: 100%; /* 5 */
}

.Select:hover {
  border-color: #dddddd;
}

.Select:disabled {
  background-color: #ffffff;
  border-color: #dddddd;
  opacity: 0.5;
}

.Select:focus {
  border-color: #0055a5;
  box-shadow: 0 0 0 3px #dddddd;
  outline: none;
}

.Select:not(:focus).has-error {
  border-color: #d12323;
}

/**
 * 1. Override the extra right padding given to .Select, and ensure left matches
 */

.Select--multiple {
  background-image: none;
  padding-left: 1rem; /* 1 */
  padding-right: 1rem; /* 1 */
}

/**
 * 1. Disable scrolling
 */

.Select--multiple:disabled {
  overflow-y: hidden; /* 1 */
}

/**
 * Removes dotted outline on focus for Firefox
 */

.Select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/**
 * Hide redundant arrow in IE10+
 */

.Select::-ms-expand {
  display: none;
}

/**
 * @define Spinner
 */

@-webkit-keyframes SpinnerRotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes SpinnerRotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/**
 * 1. Appear as a three-quarter stroked circle.
 * 2. Displaying inline makes it easier to drop into a button or some other
 *    unexpected context.
 */

.Spinner {
  -webkit-animation: SpinnerRotate 1s linear infinite;
          animation: SpinnerRotate 1s linear infinite;
  border: 0.125em solid currentColor; /* 1 */
  border-radius: 50%; /* 1 */
  border-right-color: transparent; /* 1 */
  display: inline-block; /* 2 */
  height: 1em;
  vertical-align: middle; /* 2 */
  width: 1em;
}

/**
 * @define StarRating
 */

/**
 * 1. Make sure the parent and fill elements have the same background size and
 *    positioning properties so the stars will line up precisely.
 * 2. Size the height of both elements on the current text size.
 */

.StarRating,
.StarRating-fill {
  background-position: left center; /* 1 */
  background-repeat: repeat-x; /* 1 */
  background-size: auto 100%; /* 1 */
  height: 1em; /* 2 */
}

/**
 * Parent element
 *
 * 1. Background is the "off" state.
 * 2. Ratings will often be accompanied by review counts and the like, so they
 *    should flow with inline text nicely. We apply the same sort of vertical
 *    adjustment that we do with the `Icon` pattern, since it will feel a tad
 *    low visually without some adjustment.
 * 3. If contained within a flex element, we want to prevent this element from
 *    flexing as it could visually change the value of the rating.
 * 4. Base the width on the height but multiplied by the maximum number of
 *    stars. (This only works if the icons are square!)
 */

.StarRating {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E %3Cpath fill='%23dddddd' stroke='%23000000' stroke-width='1' stroke-opacity='0.4' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z '/%3E %3C/svg%3E"); /* 1 */
  display: inline-block; /* 2 */
  flex: 0 0 auto; /* 3 */
  position: relative; /* 2 */
  top: -1px; /* 2 */
  transition: -webkit-filter 0.2s ease;
  transition: filter 0.2s ease;
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
  vertical-align: middle; /* 2 */
  width: 5em; /* 4 */
}

/**
 * The "fill" element represents the stars that are "on." It may also contain
 * fallback text for screen readers.
 *
 * 1. Here's the filled/on star.
 * 2. Makes sure the stars are printed even though they're background images.
 * 3. Position the filled stars directly on top of the parent element, starting
 *    from the left.
 * 4. Don't allow this element to exceed the parent element in size. This is
 *    just a precaution in case a developer forgets to check the max size or
 *    something. 🙂
 * 5. Hide any content that exceeds the bounds of the container, and set a
 *    very large negative text indent. This hides any text within visually,
 *    but not from screen readers.
 * 6. Default to no filled stars.
 */

.StarRating-fill {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E %3Cpath fill='%23f2c626' stroke='%23000000' stroke-width='1' stroke-opacity='0.4' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z '/%3E %3C/svg%3E"); /* 1 */
  -webkit-print-color-adjust: exact !important;
          color-adjust: exact !important; /* 2 */
  left: 0; /* 3 */
  max-width: 100%; /* 4 */
  overflow: hidden; /* 5 */
  position: absolute; /* 3 */
  text-indent: -999em; /* 5 */
  top: 0; /* 3 */
  width: 0%; /* 6 */
}

/**
 * Link effect on hover/focus
 *
 * We use CSS filters here so we don't have to include two more inlined image
 * assets within the stylesheet (or override as much).
 *
 * We disable our selector pattern here because `filter` is an uncommon pattern
 * to need to override, and attaching this to the anchor is a lot simpler in
 * use than requiring additional modifiers or parent classes in templates.
 */

/* stylelint-disable plugin/selector-bem-pattern */

a.StarRating:hover,a.StarRating:focus,
a:hover .StarRating,
a:focus .StarRating {
  -webkit-filter: saturate(2) brightness(1.05);
          filter: saturate(2) brightness(1.05);
}

/* stylelint-enable */

/**
 * @define Sticker
 */

.Sticker {
  align-items: center;
  background: #0055a5;
  border-radius: 50%;
  box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.2), 2px 2px 0 rgba(0, 0, 0, 0.1);
  color: #ffffff;
  display: flex;
  font: inherit;
  height: 5.20158em;
  justify-content: center;
  line-height: 1.125;
  padding: 1.125rem;
  text-align: center;
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
  width: 5.20158em;
}

.Sticker--juice {
  background-color: #368600;
  background-image: linear-gradient(-40deg, hsl(95.82089552238806, 100%, 28.2745098039%), hsl(170.51020408163265, 65.3076923077%, 28.862745098%) 66%);
}

@media print {
  .Sticker,
  .Sticker--juice {
    background: transparent;
    border: 1px solid currentColor;
    box-shadow: none;
    color: inherit;
  }
}

/**
 * @define StickyBar
 */

.StickyBar {
  background-color: #ffffff;
  bottom: 0;
  padding: 0.88889rem 1.125rem;
  position: sticky;
  top: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
}

.StickyBar:not(.is-shown) {
  opacity: 0;
}

/**
 * Directional modifiers
 *
 * Border radii styles allow rounded corners to inherit when direction is known,
 * shadow to offset from adjacent content.
 */

.StickyBar--bottom {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  box-shadow: 0 -1px 0 0 rgba(54, 54, 54, 0.08);
}

.StickyBar--top {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  box-shadow: 0 1px 0 0 rgba(54, 54, 54, 0.08);
}

/**
 * Responsive modifier
 *
 * The sticky bar is only sticky above the md breakpoint.
 */

@media (max-width: 46.999em) {
  .StickyBar--aboveMd {
    position: relative;
  }
}

/**
 * @define ThreadedContent
 */

.ThreadedContent {
  list-style: none;
  padding-left: 1.125rem;
  position: relative;
}

/**
 * The magic sauce to create the thread line
 */

.ThreadedContent::before {
  border: 2px solid currentColor;
  border-bottom-left-radius: 0.34644rem;
  border-right-width: 0;
  border-top-width: 0;
  bottom: 0.5em;
  content: "";
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(16.666%);
          transform: translateX(16.666%);
  width: 0.6243rem;
}

/** @define Toggle */

/**
 * 1. Custom cursor style.
 * 2. Display flex for easy management of multiline toggle content.
 * 3. Allow nested elements to position themselves absolutely relative to this
 *    container.
 */

.Toggle {
  cursor: pointer; /* 1 */
  display: flex; /* 2 */
  line-height: 1.5;
  position: relative; /* 3 */
}

/**
 * Hide input without disabling keyboard focus.
 *
 * 1. Practice the ninja art of invisibility.
 * 2. Don't change layout of surrounding elements.
 * 3. Don't overlap other elements.
 */

.Toggle-input {
  opacity: 0; /* 1 */
  position: absolute; /* 2 */
  z-index: -1; /* 3 */
}

/**
 * The visible toggle element. Unopinionated by default, real magic happens
 * in modifiers.
 *
 * 1. Default border.
 * 2. Make sure indicator does not shrink.
 * 3. Size relative to type size and using our modular scale.
 * 4. Define consistent spacing between indicator and content.
 * 5. Allow nested elements to position themselves absolutely relative to this
 *    container.
 * 6. Adjust position for better alignment.
 */

.Toggle-indicator {
  background-color: #ffffff;
  border: 2px solid hsl(0, 0%, 52.6666666667%); /* 1 */
  border-radius: 3px; /* 1 */
  flex-shrink: 0; /* 2 */
  height: 1.5em; /* 3 */
  margin-right: 0.4em; /* 4 */
  position: relative; /* 5 */
  top: -2px; /* 6 */
  width: 1.5em; /* 3 */
}

/**
 * The toggle indicator "fill." Uses a pseudo-element instead of background
 * so we can animate its scale (where supported).
 *
 * 1. Pre-set necessary background properties.
 * 2. Fill should have rounded corners if parent does.
 * 3. Position in the center of the containing element with padding.
 * 4. Forces element to display.
 * 5. Start at 0 scale and opacity for animation.
 * 6. Animate property changes.
 */

.Toggle-indicator::after {
  background-color: #389bda; /* 1 */
  background-position: center; /* 1 */
  background-size: contain; /* 1 */
  border-radius: inherit; /* 2 */
  bottom: 2px; /* 3 */
  content: ""; /* 4 */
  left: 2px; /* 3 */
  opacity: 0; /* 5 */
  position: absolute; /* 3 */
  right: 2px; /* 3 */
  top: 2px; /* 3 */
  -webkit-transform: scale(0);
          transform: scale(0); /* 5 */
  -webkit-transform-origin: center;
          transform-origin: center; /* 5 */
  transition-duration: 0.2s; /* 6 */
  transition-property: all; /* 6 */
  transition-timing-function: cubic-bezier(1, 0, 0, 1); /* 6 */
}

/**
 * Checked state of indicator fill.
 */

.Toggle-input:checked ~ .Toggle-indicator::after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/**
 * Disabled state
 */

.Toggle-input:disabled ~ .Toggle-indicator {
  background-color: #dddddd;
  border-color: hsl(0, 0%, 52.6666666667%);
  cursor: default;
}

/**
 * Customize disabled indicator fill, making it appear a bit more washed out
 * in supported browsers.
 */

.Toggle-input:disabled ~ .Toggle-indicator::after {
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
  opacity: 1;
}

/* stylelint-disable plugin/selector-bem-pattern */

.Toggle-input.has-error ~ .Toggle-indicator {
  border-color: #d12323;
}

/**
 * Use the focus-visible polyfill to replace the default focus styles on inputs.
 * These styles are only shown when elements are focused by the keyboard.
 * The focus-visible class triggers an error with stylelint so it
 * has been disabled here.
 *
 * @see https://github.com/WICG/focus-visible
 */

/* .js-focus-visible .Toggle > .Toggle-input.focus-visible ~ .Toggle-indicator {
  border-color: var(--color-border-toggle-focus);
  box-shadow: var(--box-shadow-toggle-focus);
} */

/* stylelint-enable */

/**
 * Modifier: Radio
 *
 * Indicator is circular.
 */

.Toggle--radio .Toggle-indicator {
  border-radius: 50%;
}

/**
 * Modifier: Checkbox
 *
 * Uses a checkmark (✓) icon (with the help of `postcss-inline-svg`).
 */

.Toggle--checkbox .Toggle-indicator::after {
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23389bda'%3E %3Cpath d='M18.5,4.5L9.6,16.5c-0.5,0.7-0.4,1.6,0.3,2.1c0.7,0.5,1.6,0.4,2.1-0.3l8.9-12.1c0.5-0.7,0.4-1.6-0.3-2.1C19.9,3.7,19,3.8,18.5,4.5'/%3E %3Cpath d='M3.4,13.9l6.4,4.8c0.7,0.5,1.6,0.4,2.1-0.3c0.5-0.7,0.4-1.6-0.3-2.1l-6.4-4.8c-0.7-0.5-1.6-0.4-2.1,0.3S2.8,13.4,3.4,13.9'/%3E %3C/svg%3E");
}

/**
 * Toggle delegates: display a secondary input when a Toggle-delegate's
 * radio or checkbox is checked.
 *
 * In order to toggle visibility of "other" text input based on status of
 * the radio input, it needs to be outside of the label.
 */

/**
 * 1. Override cursor:pointer from .Toggle, since this may be applied to
 *    elements other than <label>s
 */

.Toggle--delegated {
  cursor: default; /* 1 */
}

/**
 * 1. This is made to flex to ensure that a contained .Toggle-indicator
 *    is rendered appropriately, and not collapsed to zero-width inline element.
 */

.Toggle-delegate {
  cursor: pointer;
  display: flex; /* 1 */
}

.Toggle-input:checked ~ .Toggle-delegate .Toggle-indicator::after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/**
 * Hide or show this element based on toggle state
 */

.Toggle-input:not(:checked) ~ .Toggle-expand {
  display: none;
}

/** @define ToggleCard */

.ToggleCard {
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  padding: 0.88889rem;
  position: relative;
}

/**
 * Hiding the default browser input without removing it for
 * screen reader users.
 */

.ToggleCard-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

/**
 * Creating a custom indicator to replace the visually hidden
 * default input.
 */

.ToggleCard-indicator {
  align-self: flex-start;
  background-color: #ffffff;
  border: 2px solid #dddddd;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  height: 1.5rem;
  margin-right: 0.55493rem;
  position: relative;
  width: 1.5rem;
}

.ToggleCard-indicator::after {
  background-color: #389bda;
  background-position: center;
  background-size: contain;
  border-radius: inherit;
  bottom: 2px;
  content: "";
  left: 2px;
  opacity: 0;
  position: absolute;
  right: 2px;
  top: 2px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: center;
          transform-origin: center;
  transition-duration: 0.2s;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-timing-function: cubic-bezier(0.56, -0.24, 0.51, 1.29);
}

/**
 * Show indicator based on checked state
 */

.ToggleCard-input:checked ~ .ToggleCard-indicator::after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/**
 * 1. Center aligns the text and indicator
 */

.ToggleCard-content {
  flex: auto;
  line-height: 1.26563rem;
  padding-top: 0.11719rem; /* 1 */
}

/**
 * Adding border and hover styles to a pseudo element so we can
 * change them based on input state, like checked or disabled.
 */

.ToggleCard-content::after {
  border: 2px solid #dddddd;
  border-radius: 8px;
  bottom: 0;
  content: "";
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: box-shadow 0.2s ease;
}

.ToggleCard:hover .ToggleCard-content::after {
  box-shadow: 0 1px 6px 2px rgba(54, 54, 54, 0.1);
}

/**
 * Change border color when input is checked
 */

.ToggleCard-input:checked ~ .ToggleCard-content::after {
  border-color: #1e75bb;
}

/* stylelint-disable */

/**
 * Use the focus-visible polyfill to replace the default focus styles on inputs.
 * These styles are only shown when elements are focused by the keyboard.
 * The focus-visible class triggers an error with stylelint so it
 * has been disabled here.
 *
 * @see https://github.com/WICG/focus-visible
 */

/* .js-focus-visible .ToggleCard > .ToggleCard-input.focus-visible ~ .ToggleCard-content::after {
  border-color: var(--color-brand-default);
  box-shadow: 0 0 0 calc(var(--ToggleCard-border-width) * 1.25) var(--color-base-silver-alt);
} */

/* stylelint-enable */

/**
 * 1. Places child elements at opposite ends of the container
 */

.ToggleCard-detail {
  display: flex;
  justify-content: space-between; /* 1 */
}

/**
 * Adds a border and space between detail items
 */

.ToggleCard-detail + .ToggleCard-detail {
  border-top: 1px solid #efefef;
  margin-top: 0.55493rem;
  padding: 0.55493rem 0;
}

/**
 * Disabled state
 */

.ToggleCard-input:disabled ~ .ToggleCard-indicator {
  background-color: #dddddd;
  border-color: #dddddd;
}

.ToggleCard-input:disabled ~ .ToggleCard-content::after {
  cursor: default;
}

.ToggleCard-input:disabled ~ .ToggleCard-content {
  cursor: default;
  opacity: 0.5;
}

.ToggleCard:hover .ToggleCard-input:disabled ~ .ToggleCard-content::after {
  box-shadow: none;
}

/* stylelint-disable */

/**
 * The has-error class triggers an error with stylelint so it has
 * been disabled here.
 *
 */

.ToggleCard-input.has-error ~ .ToggleCard-indicator {
  border-color: #d12323;
}

.ToggleCard-input.has-error ~ .ToggleCard-content::after {
  border-color: #d12323;
}

/* stylelint-enable */

/**
 * 1. Lets us add padding to the title
 * 2. Adds space between title and `ToggleCard-detail`
 */

.ToggleCard-title {
  display: inline-block; /* 1 */
  font-weight: bold;
  padding-bottom: 0.55493rem; /* 2 */
}

/**
 * @define ToggleStep
 *
 * Provides supporting visibility settings for the JS component.
 */

/**
 * 1. JS marks each ToggleStep as completable when initialized.
 *    Only hide if JS is running.
 */

.ToggleStep.is-completable {
  display: none; /* 1 */
}

/**
 * 1. ToggleStep is shown once the previous step is completed (or always,
 *    if its the first).
 */

.ToggleStep:nth-child(1),
.ToggleStep.is-completed + .ToggleStep {
  display: block; /* 1 */
}

/** @define JuiceBrand */

.JuiceBrand {
  align-items: center;
  display: inline-flex;
}

.JuiceBrand:hover {
  text-decoration: none;
}

.JuiceBrand-logo {
  color: #e65709;
  display: block;
  flex: none;
  height: 3em;
  margin-left: -0.75em;
  position: relative;
  width: 7em;
}

.JuiceBrand--dark .JuiceBrand-logo {
  color: #ffffff;
}

@media (min-width: 47em) {
  .JuiceBrand-logo {
    height: 3.5em;
    width: 8.16667em;
  }
}

.JuiceBrand-slogan {
  padding-left: 0.88889rem;
}

.JuiceBrand-balloon {
  background-color: #368600;
  border-radius: 8px;
  color: #fff;
  font-size: 0.88889rem;
  line-height: 1.265625;
  padding: 0.6243rem;
  position: relative;
  text-align: center;
}

@media (min-width: 30em) {
  .JuiceBrand-balloon {
    padding: 0.79012rem 1.125rem;
    white-space: nowrap;
  }
}

/**
 * Darkening the background color allows the balloon to suggest transparency
 * with the Juice background while still meeting contrast requirements.
 */

.JuiceBrand--dark .JuiceBrand-balloon {
  background-color: hsl(23.176470588235293, 100%, 39.862745098%);
}

/**
 * This is the little triangle on the left of the balloon to look like
 * a text bubble.
 */

.JuiceBrand-balloon::before {
  background-color: inherit;
  content: "";
  height: 0.49327rem;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  width: 0.49327rem;
}

/**
 * @define Letter
 */

@media print {
  .Letter {
    margin-left: auto;
    margin-right: auto;
    width: 36rem;
  }

  .Letter-head {
    margin: 5em 0;
  }
}

/**
 * @define Reader
 */

/**
 * Block: Reader
 *
 * On small screens, we reserve space at the top and bottom of the container for
 * the top and bottom bar. Where supported, we add necessary inset area to the
 * bottom in case the browser chrome overlaps the content area.
 *
 * We specify `screen` in the media query so these styles will not apply to
 * print, where the sitewide UI serves no function.
 */

@media screen and (max-width: 63.999em) {
  .Reader {
    padding-bottom: 3.75em;
    padding-bottom: calc(3.75em + env(safe-area-inset-bottom));
    padding-top: 3.75em;
  }
}

/**
 * At large sizes, we shift to two side-by-side columns. We specify `screen` in
 * the media query so these styles will not apply to print where the sitewide UI
 * serves no function.
 *
 * 1. We want to make sure the sidebar fills the entire viewport…
 * 2. … but we use `dvh` where available in case the browser chrome changes its
 *    size on scroll.
 * 3. Make room for the fixed sidebar.
 */

@media screen and (min-width: 64em) {
  .Reader {
    min-height: 100vh; /* 1 */
    min-height: 100dvh; /* 2 */
    padding-left: clamp(20em, 25%, 25em); /* 3 */
  }
}

/**
 * Element: Header
 *
 * On small screens, the header is merely a container element for the top and
 * bottom bars. We can set `z-index` here for convenience, but it really isn't
 * visible as a unit.
 */

.Reader-header {
  position: relative;
  z-index: 100;
}

/**
 * At large sizes, the content of the two bars is displayed as a single solid
 * sidebar, so the header becomes more visible and apparent.
 */

@media (min-width: 64em) {
  .Reader-header {
    background-color: #efefef;
    bottom: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    grid-gap: 0.70233em;
    gap: 0.70233em;
    left: 0;
    overflow-y: auto;
    padding: 0.70233em 0;
    position: fixed;
    top: 0;
    width: clamp(20em, 25%, 25em);
  }
}

/**
 * In print, we hide the header completely.
 */

@media print {
  .Reader-header {
    display: none;
  }
}

/**
 * Element: Masthead
 *
 * Displayed as a top bar on small screens, and as the topmost nav content on
 * large screens.
 */

.Reader-masthead {
  display: grid;
  flex: none;
  grid-template-areas: ". home action";
  grid-template-columns: minmax(3.75em, auto) 1fr minmax(3.75em, auto);
  height: 3.75em;
  position: relative;
}

@media (max-width: 63.999em) {
  .Reader-masthead {
    background-color: #efefef;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 2em rgba(0, 0, 0, 0.15);
    left: 0;
    position: fixed;
    top: 0;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    width: 100%;
  }

  /**
   * We use a customized version of headsup.js to hide the masthead on small
   * screens on scroll. Because that library adds the class to the body element,
   * we need to break our selector conventions momentarily.
   *
   * We do not hide the masthead if the search menu is shown or if something
   * inside the element currently has focus.
   *
   * The complicated `translateY` is so the element and its shadows will be
   * fully out of view. We could animate the `box-shadow` separately, but that
   * would perform worse than just using a transform. And an `opacity`
   * transition would draw too much attention to the elements beneath.
   */

  /* stylelint-disable plugin/selector-bem-pattern */

  .is-readerHiddenMasthead .Reader:not(.is-searchShown):not(.is-fullNavShown) .Reader-masthead:not(:focus-within) {
    -webkit-transform: translateY(calc(-100% - 1px - 2em));
            transform: translateY(calc(-100% - 1px - 2em));
  }

  /* stylelint-enable */
}

/**
 * Element: Masthead Home
 *
 * A link back to the homepage of the current experience. Intended to contain a
 * logo.
 */

.Reader-mastheadHome {
  align-items: center;
  display: flex;
  grid-area: home;
  justify-content: center;
  justify-self: center;
  text-align: center;
}

/**
 * Element: Masthead Logo
 *
 * Intended to be nested within the Masthead Home element.
 */

.Reader-mastheadLogo {
  max-height: 2.5em;
  width: auto;
}

/**
 * Element: Masthead Action
 *
 * An iconographic button shown on small screens in the masthead adjacent to the
 * Masthead Home.
 */

.Reader-mastheadAction {
  align-items: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  grid-area: action;
  height: 3.75em;
  justify-content: center;
  margin: 0;
  min-width: 3.75em;
  padding: 0;
  position: relative;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.Reader-mastheadAction:hover {
  color: #0055a5;
}

/**
 * Element: Masthead Action Icon
 */

.Reader-mastheadActionIcon {
  font-size: 1.42383em;
}

/**
 * Element: Search
 *
 * Contains a search form, initially hidden on small screens but always visible
 * on large screens.
 *
 * This has two containers so that the upward caret affordance to connect this
 * element to its toggle button is not intersected by its own box shadow.
 */

@media (max-width: 63.999em) {
  .Reader-search {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    left: 0;
    position: fixed;
    top: 3.75em;
    width: 100%;
    z-index: 100;
  }

  .Reader:not(.is-searchShown) .Reader-search {
    display: none;
  }

  .Reader-search::before {
    background-color: #ffffff;
    bottom: 100%;
    box-shadow: inherit;
    content: "";
    height: 0.88889em;
    position: absolute;
    right: 1.875em;
    -webkit-transform: translate(50%, 50%) rotate(45deg);
            transform: translate(50%, 50%) rotate(45deg);
    width: 0.88889em;
  }
}

/**
 * Element: Search Inner
 */

.Reader-searchInner {
  padding: 0.70233em;
  position: relative;
  width: 100%;
}

@media (max-width: 63.999em) {
  .Reader-searchInner {
    background-color: #ffffff;
  }
}

@media (min-width: 64em) {
  .Reader-searchInner {
    padding-bottom: 0;
    padding-top: 0;
  }
}

/**
 * Element: Quick Nav
 *
 * On small screens, this displays as a bar fixed to the bottom of the viewport.
 * On large screens, it displays beneath the Masthead and Search elements.
 */

@media (max-width: 63.999em) {
  .Reader-quickNav {
    background-color: #efefef;
    bottom: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 2em rgba(0, 0, 0, 0.15);
    left: 0;
    position: fixed;
    width: 100%;
  }

  /* change to a solid color to prevent background bleeding through */
  .Reader.is-fullNavShown .Reader-quickNav {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/**
 * Element: Quick Nav Items
 *
 * The containing list of quick nav items. Displays everything in equally sized
 * columns (side by side).
 */

.Reader-quickNavItems {
  display: grid;
  grid-auto-flow: column;
  list-style: none;
  padding-left: 0;
}

/**
 * Element: Quick Nav Action
 *
 * The iconographic, tab-like buttons that comprise the quick nav.
 */

.Reader-quickNavAction,
.Reader-quickNavAction:link,
.Reader-quickNavAction:visited {
  color: inherit;
  text-decoration: none;
}

.Reader-quickNavAction,
.Reader-quickNavAction:any-link {
  color: inherit;
  text-decoration: none;
}

.Reader-quickNavAction {
  align-items: center;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  height: 3.75em;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-width: 3.75em;
  padding: 0;
  position: relative;
  text-align: center;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
}

/**
 * At small sizes, the Quick Nav is fixed to the bottom, so we must add some
 * additional space to account for any browser chrome overlap.
 */

@media (max-width: 63.999em) {
  .Reader-quickNavAction {
    height: calc(3.75em + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .Reader-quickNavItem--more {
    position: relative;
  }

  /* Add a small triangle indicating the More button is active */
  .Reader.is-fullNavShown .Reader-quickNavItem--more::after {
    background-color: #fafafa;
    bottom: calc(3.75em + 1px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    content: "";
    height: 0.88889em;
    position: absolute;
    right: 50%;
    -webkit-transform: translate(50%, 50%) rotate(45deg);
            transform: translate(50%, 50%) rotate(45deg);
    width: 0.88889em;
  }
}

.Reader-quickNavAction:hover {
  color: #0055a5;
}

@media (max-width: 63.999em) {
  .Reader-quickNavAction[aria-current] {
    color: #0055a5;
  }

  .Reader-quickNavAction[aria-current]::after {
    background: currentColor;
    content: "";
    height: 3px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -1px;
  }
}

/**
 * Element: Quick Nav Icon
 */

.Reader-quickNavIcon {
  flex: none;
  font-size: 1.42383em;
}

/**
 * Element: Quick Nav Label
 */

.Reader-quickNavLabel {
  font-size: 0.79012em;
  margin-top: 0.34644em;
}

/**
 * Element: Full Nav
 */

.Reader-fullNav {
  flex: 1;
}

@media (max-width: 63.999em) {
  .Reader:not(.is-fullNavShown) .Reader-fullNav {
    display: none;
  }

  .Reader-fullNav {
    background-color: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    bottom: calc(3.75em + 1px);
    display: block;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 3.75em;
    width: 100%;
  }

  /*
    1px white border to cover last list group border
    to avoid appearance of double border against quicknav.
  */
  .Reader-fullNav::after {
    border-bottom: 1px solid #fafafa;
    bottom: calc(3.75em + 1px);
    content: "";
    display: block;
    left: 0;
    position: fixed;
    right: 0;
  }
}

/**
 * Element: Full Nav Group
 *
 * These contain a top-level collapse toggle representing a content section
 * followed by that section's links.
 *
 * The Full Nav uses a lot of overlapping borders for a few reasons. It prevents
 * little gaps in interactivity between menu items, it promotes consistent
 * alignment, and it allows the "current" state of menu items to overlap
 * adjacent borders instead of having a fuzzy edge.
 */

.Reader-fullNavGroup {
  border: 0 solid hsl(0, 0%, 76.6666666667%);
  border-width: 1px 0;
  margin: -1px 0;
  position: relative;
}

/**
 * Element: Full Nav Toggle
 *
 * This is the interactive Collapse toggle for the section.
 */

.Reader-fullNavToggle {
  align-items: center;
  border: 0 solid transparent;
  border-width: 1px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  line-height: 1.125;
  margin: -1px 0;
  min-height: 3em;
  padding: 0.70233em 1.60181em;
}

/**
 * Element: Full Nav Items
 *
 * Contains the list of links that is expanded/collapsed.
 */

.Reader-fullNavItems {
  list-style: none;
  padding-left: 0;
}

/**
 * Element: Full Nav Action
 *
 * Represents a link to a page of content.
 */

.Reader-fullNavAction {
  align-items: center;
  border: 0 solid #dddddd;
  border-width: 1px 0;
  display: flex;
  line-height: 1.125;
  margin: -1px 0;
  min-height: 3em;
  padding: 0.70233em 1.60181em;
  position: relative;
}

.Reader-fullNavAction.is-external {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

/**
 * If a Full Nav Action is within the first or last Full Nav Item, we render
 * its border transparent. This prevents overlap with section borders (which are
 * slightly darker) and associates the first item with the preceding Full Nav
 * Toggle. We avoid doing this for the "current" state because that state is
 * visually filled, so losing its edges would appear awkward and inconsistent.
 */

.Reader-fullNavItem:first-child > .Reader-fullNavAction:not([aria-current]) {
  border-top-color: transparent;
}

.Reader-fullNavItem:last-child > .Reader-fullNavAction:not([aria-current]) {
  border-bottom-color: transparent;
}

/**
 * Current state appears filled and has a marker arranged on the right edge.
 */

.Reader-fullNavAction[aria-current] {
  background: #ffffff;
}

.Reader-fullNavAction[aria-current]::after {
  background: currentColor;
  bottom: -1px;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -1px;
  width: 3px;
  z-index: 1;
}

/**
 * Element: Extra Nav
 */

.Reader-extraNav {
  padding: 0 0.70233em;
}

@media (max-width: 63.999em) {
  .Reader-extraNav {
    display: none;
  }
}

/**
 * Element: Overlay
 *
 * Used to offset the search form from the body content when visible. Only
 * relevant on small screens and not in print.
 *
 * 1. Must be one higher than common content patterns like Band, which tend to
 *    use `z-index: 1` for certain elements.
 */

.Reader-overlay {
  -webkit-backdrop-filter: blur(0.125em);
          backdrop-filter: blur(0.125em);
  background-color: rgba(0, 85, 165, 0.6);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2; /* 1 */
}

.Reader:not(.is-searchShown) .Reader-overlay {
  display: none;
}

@media print, (min-width: 64em) {
  .Reader-overlay {
    display: none;
  }
}

.hideShowPassword-field::-ms-reveal,
.hideShowPassword-field::-ms-clear {
  display: none !important;
}

.hideShowPassword-toggle {
  background: #efefef;
  border-radius: 3px;
  color: #0055a5;
  font-size: 0.79012rem;
  margin-right: 0.49327rem;
  min-width: 4.25em;
  padding: 0.34644rem;
  text-transform: uppercase;
}

.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
  border-color: #389bda;
  outline: transparent;
}

/**
 * Highcharts theme
 *
 * @see http://www.highcharts.com/docs/chart-design-and-style/style-by-css
 */

/**
 * @license Highcharts
 *
 * (c) 2009-2022 Torstein Honsi
 *
 * License: www.highcharts.com/license
 */

:root,
.highcharts-light {
    /* Colors for data series and points */
    --highcharts-color-0: #2caffe;
    --highcharts-color-1: #544fc5;
    --highcharts-color-2: #00e272;
    --highcharts-color-3: #fe6a35;
    --highcharts-color-4: #6b8abc;
    --highcharts-color-5: #d568fb;
    --highcharts-color-6: #2ee0ca;
    --highcharts-color-7: #fa4b42;
    --highcharts-color-8: #feb56a;
    --highcharts-color-9: #91e8e1;

    /* Chart background, point stroke for markers and columns etc */
    --highcharts-background-color: #ffffff;

    /*
    Neutral colors, grayscale by default. The default colors are defined by
    mixing the background-color with neutral, with a weight corresponding to
    the number in the name.

    https://www.highcharts.com/samples/highcharts/css/palette-helper
    */

    /* Strong text. */
    --highcharts-neutral-color-100: #000000;

    /* Main text, axis labels and some strokes. */
    --highcharts-neutral-color-80: #333333;

    /* Axis title, connector fallback. */
    --highcharts-neutral-color-60: #666666;

    /* Credits text, export menu stroke. */
    --highcharts-neutral-color-40: #999999;

    /* Disabled texts, button strokes, crosshair etc. */
    --highcharts-neutral-color-20: #cccccc;

    /* Grid lines etc. */
    --highcharts-neutral-color-10: #e6e6e6;

    /* Minor grid lines etc. */
    --highcharts-neutral-color-5: #f2f2f2;

    /* Tooltip backgroud, button fills, map null points. */
    --highcharts-neutral-color-3: #f7f7f7;

    /*
    Highlights, shades of blue by default
    */

    /* Drilldown clickable labels, color axis max color. */
    --highcharts-highlight-color-100: #0022ff;

    /* Selection marker, menu hover, button hover, chart border, navigator
    series. */
    --highcharts-highlight-color-80: #334eff;

    /* Navigator mask fill. */
    --highcharts-highlight-color-60: #667aff;

    /* Ticks and axis line. */
    --highcharts-highlight-color-20: #ccd3ff;

    /* Pressed button, color axis min color. */
    --highcharts-highlight-color-10: #e6e9ff;

    /* Indicators */
    --highcharts-positive-color: #06b535;
    --highcharts-negative-color: #f21313;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* UI colors */
        --highcharts-background-color: rgb(48, 48, 48);

        /*
            Neutral color variations
            https://www.highcharts.com/samples/highcharts/css/palette-helper
        */
        --highcharts-neutral-color-100: rgb(255, 255, 255);
        --highcharts-neutral-color-80: rgb(214, 214, 214);
        --highcharts-neutral-color-60: rgb(173, 173, 173);
        --highcharts-neutral-color-40: rgb(133, 133, 133);
        --highcharts-neutral-color-20: rgb(92, 92, 92);
        --highcharts-neutral-color-10: rgb(71, 71, 71);
        --highcharts-neutral-color-5: rgb(61, 61, 61);
        --highcharts-neutral-color-3: rgb(57, 57, 57);

        /* Highlight color variations */
        --highcharts-highlight-color-100: rgb(122, 167, 255);
        --highcharts-highlight-color-80: rgb(108, 144, 214);
        --highcharts-highlight-color-60: rgb(94, 121, 173);
        --highcharts-highlight-color-20: rgb(65, 74, 92);
        --highcharts-highlight-color-10: rgb(58, 63, 71);
    }
}

.highcharts-dark {
    /* UI colors */
    --highcharts-background-color: rgb(48, 48, 48);

    /* Neutral color variations */
    --highcharts-neutral-color-100: rgb(255, 255, 255);
    --highcharts-neutral-color-80: rgb(214, 214, 214);
    --highcharts-neutral-color-60: rgb(173, 173, 173);
    --highcharts-neutral-color-40: rgb(133, 133, 133);
    --highcharts-neutral-color-20: rgb(92, 92, 92);
    --highcharts-neutral-color-10: rgb(71, 71, 71);
    --highcharts-neutral-color-5: rgb(61, 61, 61);
    --highcharts-neutral-color-3: rgb(57, 57, 57);

    /* Highlight color variations */
    --highcharts-highlight-color-100: rgb(122, 167, 255);
    --highcharts-highlight-color-80: rgb(108, 144, 214);
    --highcharts-highlight-color-60: rgb(94, 121, 173);
    --highcharts-highlight-color-20: rgb(65, 74, 92);
    --highcharts-highlight-color-10: rgb(58, 63, 71);
}

.highcharts-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: normal;
    z-index: 0; /* #1072 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    touch-action: manipulation;
    outline: none;
}

.highcharts-root {
    display: block;
}

.highcharts-root text {
    stroke-width: 0;
}

.highcharts-strong {
    font-weight: bold;
}

.highcharts-emphasized {
    font-style: italic;
}

.highcharts-anchor {
    cursor: pointer;
}

.highcharts-background {
    fill: var(--highcharts-background-color);
}

.highcharts-plot-border,
.highcharts-plot-background {
    fill: none;
}

.highcharts-label-box {
    fill: none;
}

.highcharts-label text {
    fill: var(--highcharts-neutral-color-80);
    font-size: 0.8em;
}

.highcharts-button-box {
    fill: inherit;
}

.highcharts-tracker-line {
    stroke-linejoin: round;
    stroke: rgba(192, 192, 192, 0.0001);
    stroke-width: 22;
    fill: none;
}

.highcharts-tracker-area {
    fill: rgba(192, 192, 192, 0.0001);
    stroke-width: 0;
}

/* Titles */

.highcharts-title {
    fill: var(--highcharts-neutral-color-80);
    font-size: 1.2em;
    font-weight: bold;
}

.highcharts-subtitle {
    fill: var(--highcharts-neutral-color-60);
    font-size: 0.8em;
}

/* Axes */

.highcharts-axis-line {
    fill: none;
    stroke: var(--highcharts-neutral-color-80);
}

.highcharts-yaxis .highcharts-axis-line {
    stroke-width: 0;
}

.highcharts-axis-title {
    fill: var(--highcharts-neutral-color-60);
    font-size: 0.8em;
}

.highcharts-axis-labels {
    fill: var(--highcharts-neutral-color-80);
    cursor: default;
    font-size: 0.8em;
}

.highcharts-grid-line {
    fill: none;
    stroke: var(--highcharts-neutral-color-10);
}

.highcharts-xaxis-grid .highcharts-grid-line {
    stroke-width: 0;
}

.highcharts-tick {
    stroke: var(--highcharts-neutral-color-80);
}

.highcharts-yaxis .highcharts-tick {
    stroke-width: 0;
}

.highcharts-minor-grid-line {
    stroke: var(--highcharts-neutral-color-5);
}

.highcharts-crosshair-thin {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-20);
}

.highcharts-crosshair-category {
    stroke: var(--highcharts-highlight-color-20);
    stroke-opacity: 0.25;
}

/* Credits */

.highcharts-credits {
    cursor: pointer;
    fill: var(--highcharts-neutral-color-40);
    font-size: 0.6em;
    transition: fill 250ms, font-size 250ms;
}

.highcharts-credits:hover {
    fill: var(--highcharts-neutral-color-100);
    font-size: 0.7em;
}

/* Tooltip */

.highcharts-tooltip {
    cursor: default;
    pointer-events: none;
    white-space: nowrap;
    transition: stroke 150ms;
}

.highcharts-tooltip text {
    fill: var(--highcharts-neutral-color-80);
    font-size: 0.8em;
}

.highcharts-tooltip .highcharts-header {
    font-size: 0.8em;
}

.highcharts-tooltip-box {
    stroke-width: 1px;
    fill: var(--highcharts-background-color);
}

.highcharts-tooltip-box {
    stroke-width: 0;
    fill: var(--highcharts-background-color);
}

.highcharts-tooltip-box .highcharts-label-box {
    fill: var(--highcharts-background-color);
}

div.highcharts-tooltip {
    -webkit-filter: none;
            filter: none;
    font-size: 0.8em;
}

.highcharts-selection-marker {
    fill: var(--highcharts-highlight-color-80);
    fill-opacity: 0.25;
}

.highcharts-graph {
    fill: none;
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.highcharts-empty-series {
    stroke-width: 1px;
    fill: none;
    stroke: var(--highcharts-neutral-color-20);
}

.highcharts-state-hover .highcharts-graph {
    stroke-width: 3;
}

.highcharts-point-inactive {
    opacity: 0.2;
    transition: opacity 50ms; /* quick in */
}

.highcharts-series-inactive {
    opacity: 0.2;
    transition: opacity 50ms; /* quick in */
}

.highcharts-state-hover path {
    transition: stroke-width 50ms; /* quick in */
}

.highcharts-state-normal path {
    transition: stroke-width 250ms; /* slow out */
}

/* Legend hover affects points and series */

g.highcharts-series,
.highcharts-point,
.highcharts-markers,
.highcharts-data-labels {
    transition: opacity 250ms;
}

.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
    opacity: 0.2;
}

/* Series options */

/* Default colors */

.highcharts-color-0 {
    fill: #0179a5;
    stroke: #0179a5;
}

.highcharts-color-1 {
    fill: #389bda;
    stroke: #389bda;
}

.highcharts-color-2 {
    fill: #057a5f;
    stroke: #057a5f;
}

.highcharts-color-3 {
    fill: #f7dc34;
    stroke: #f7dc34;
}

.highcharts-color-4 {
    fill: #d12323;
    stroke: #d12323;
}

.highcharts-color-5 {
    fill: #364958;
    stroke: #364958;
}

.highcharts-color-6 {
    fill: #f27026;
    stroke: #f27026;
}

.highcharts-color-7 {
    fill: #797482;
    stroke: #797482;
}

.highcharts-color-8 {
    fill: #ab62a9;
    stroke: #ab62a9;
}

.highcharts-color-9 {
    fill: #dddddd;
    stroke: #dddddd;
}

/* Various series-specific */

.highcharts-area {
    fill-opacity: 0.75;
    stroke-width: 0;
}

.highcharts-markers {
    stroke-width: 1px;
    stroke: var(--highcharts-background-color);
}

.highcharts-a11y-markers-hidden .highcharts-point:not(.highcharts-point-hover):not(.highcharts-a11y-marker-visible),
.highcharts-a11y-marker-hidden {
    opacity: 0;
}

.highcharts-point {
    stroke-width: 1px;
}

.highcharts-dense-data .highcharts-point {
    stroke-width: 0;
}

.highcharts-data-label text,
text.highcharts-data-label {
    font-size: 0.7em;
    font-weight: bold;
}

.highcharts-data-label-box {
    fill: none;
    stroke-width: 0;
}

.highcharts-data-label text,
text.highcharts-data-label {
    fill: var(--highcharts-neutral-color-80);
}

.highcharts-data-label-connector {
    fill: none;
}

.highcharts-data-label-hidden {
    pointer-events: none;
}

.highcharts-halo {
    fill-opacity: 0.25;
    stroke-width: 0;
}

.highcharts-series-label text {
    fill: inherit;
    font-weight: bold;
}

.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
.highcharts-markers .highcharts-point-select {
    fill: var(--highcharts-neutral-color-20);
    stroke: var(--highcharts-neutral-color-100);
}

.highcharts-column-series rect.highcharts-point {
    /* rect to prevent stroke on 3D columns */
    stroke: var(--highcharts-background-color);
}

.highcharts-column-series .highcharts-point {
    transition: fill-opacity 250ms;
}

.highcharts-column-series .highcharts-point-hover {
    fill-opacity: 0.75;
    transition: fill-opacity 50ms;
}

.highcharts-pie-series .highcharts-point {
    stroke-linejoin: round;
    stroke: var(--highcharts-background-color);
}

.highcharts-pie-series .highcharts-point-hover {
    fill-opacity: 0.75;
    transition: fill-opacity 50ms;
}

.highcharts-funnel-series .highcharts-point {
    stroke-linejoin: round;
    stroke: var(--highcharts-background-color);
}

.highcharts-funnel-series .highcharts-point-hover {
    fill-opacity: 0.75;
    transition: fill-opacity 50ms;
}

.highcharts-funnel-series .highcharts-point-select {
    fill: inherit;
    stroke: inherit;
}

.highcharts-pyramid-series .highcharts-point {
    stroke-linejoin: round;
    stroke: var(--highcharts-background-color);
}

.highcharts-pyramid-series .highcharts-point-hover {
    fill-opacity: 0.75;
    transition: fill-opacity 50ms;
}

.highcharts-pyramid-series .highcharts-point-select {
    fill: inherit;
    stroke: inherit;
}

.highcharts-solidgauge-series .highcharts-point {
    stroke-width: 0;
}

.highcharts-treemap-series .highcharts-point {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-10);
    transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}

.highcharts-treemap-series .highcharts-point-hover {
    stroke: var(--highcharts-neutral-color-40);
    transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}

.highcharts-treemap-series .highcharts-above-level {
    display: none;
}

.highcharts-treemap-series .highcharts-internal-node {
    fill: none;
}

.highcharts-treemap-series .highcharts-internal-node-interactive {
    fill-opacity: 0.15;
    cursor: pointer;
}

.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
    fill-opacity: 0.75;
}

.highcharts-vector-series .highcharts-point {
    fill: none;
    stroke-width: 2px;
}

.highcharts-windbarb-series .highcharts-point {
    fill: none;
    stroke-width: 2px;
}

.highcharts-lollipop-stem {
    stroke: var(--highcharts-neutral-color-100);
}

.highcharts-focus-border {
    fill: none;
    stroke-width: 2px;
}

.highcharts-legend-item-hidden .highcharts-focus-border {
    fill: none !important;
}

/* Legend */

.highcharts-legend-box {
    fill: none;
    stroke-width: 0;
}

.highcharts-legend-item > text {
    fill: var(--highcharts-neutral-color-80);
    font-weight: bold;
    font-size: 0.8em;
    cursor: pointer;
    stroke-width: 0;
}

.highcharts-legend-item:hover text {
    fill: var(--highcharts-neutral-color-100);
}

.highcharts-legend-item-hidden * {
    fill: var(--highcharts-neutral-color-60) !important;
    stroke: var(--highcharts-neutral-color-60) !important;
    transition: fill 250ms;
    text-decoration: line-through;
}

.highcharts-legend-nav-active {
    fill: var(--highcharts-highlight-color-100);
    cursor: pointer;
}

.highcharts-legend-nav-inactive {
    fill: var(--highcharts-neutral-color-20);
}

circle.highcharts-legend-nav-active,
circle.highcharts-legend-nav-inactive { /* tracker */
    fill: rgba(192, 192, 192, 0.0001);
}

.highcharts-legend-title-box {
    fill: none;
    stroke-width: 0;
}

/* Bubble legend */

.highcharts-bubble-legend-symbol {
    stroke-width: 2;
    fill-opacity: 0.5;
}

.highcharts-bubble-legend-connectors {
    stroke-width: 1;
}

.highcharts-bubble-legend-labels {
    fill: var(--highcharts-neutral-color-80);
    font-size: 0.7em;
}

/* Loading */

.highcharts-loading {
    position: absolute;
    background-color: var(--highcharts-background-color);
    opacity: 0.5;
    text-align: center;
    z-index: 10;
    transition: opacity 250ms;
}

.highcharts-loading-hidden {
    height: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: opacity 250ms, height 250ms step-end;
}

.highcharts-loading-inner {
    font-weight: bold;
    position: relative;
    top: 45%;
}

/* Plot bands and polar pane backgrounds */

.highcharts-plot-band,
.highcharts-pane {
    fill: var(--highcharts-neutral-color-100);
    fill-opacity: 0.05;
}

.highcharts-plot-line {
    fill: none;
    stroke: var(--highcharts-neutral-color-40);
    stroke-width: 1px;
}

.highcharts-plot-line-label {
    font-size: 0.8em;
}

/* Highcharts More and modules */

.highcharts-boxplot-box {
    fill: var(--highcharts-background-color);
}

.highcharts-boxplot-median {
    stroke-width: 2px;
}

.highcharts-bubble-series .highcharts-point {
    fill-opacity: 0.5;
}

.highcharts-errorbar-series .highcharts-point {
    stroke: var(--highcharts-neutral-color-100);
}

.highcharts-gauge-series .highcharts-data-label-box {
    stroke: var(--highcharts-neutral-color-20);
    stroke-width: 1px;
}

.highcharts-gauge-series .highcharts-dial {
    fill: var(--highcharts-neutral-color-100);
    stroke-width: 0;
}

.highcharts-polygon-series .highcharts-graph {
    fill: inherit;
    stroke-width: 0;
}

.highcharts-waterfall-series .highcharts-graph {
    stroke: var(--highcharts-neutral-color-80);
    stroke-dasharray: 1, 3;
}

.highcharts-sankey-series .highcharts-point {
    stroke-width: 0;
}

.highcharts-sankey-series .highcharts-link {
    transition: fill 250ms, fill-opacity 250ms;
    fill-opacity: 0.5;
}

.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
    transition: fill 50ms, fill-opacity 50ms;
    fill-opacity: 1;
}

.highcharts-venn-series .highcharts-point {
    fill-opacity: 0.75;
    stroke: var(--highcharts-neutral-color-20);
    transition: stroke 250ms, fill-opacity 250ms;
}

.highcharts-venn-series .highcharts-point-hover {
    fill-opacity: 1;
    stroke: var(--highcharts-neutral-color-20);
}

.highcharts-timeline-series .highcharts-graph {
    stroke: var(--highcharts-neutral-color-20);
}

/* Highstock */

.highcharts-navigator-mask-outside {
    fill-opacity: 0;
}

.highcharts-navigator-mask-inside {
    fill: var(--highcharts-highlight-color-60); /* navigator.maskFill option */
    fill-opacity: 0.25;
    cursor: ew-resize;
}

.highcharts-navigator-outline {
    stroke: var(--highcharts-neutral-color-40);
    fill: none;
}

.highcharts-navigator-handle {
    stroke: var(--highcharts-neutral-color-40);
    fill: var(--highcharts-neutral-color-5);
    cursor: ew-resize;
}

.highcharts-navigator-series {
    fill: var(--highcharts-highlight-color-80);
    stroke: var(--highcharts-highlight-color-80);
}

.highcharts-navigator-series .highcharts-graph {
    stroke-width: 1px;
}

.highcharts-navigator-series .highcharts-area {
    fill-opacity: 0.05;
}

.highcharts-navigator-xaxis .highcharts-axis-line {
    stroke-width: 0;
}

.highcharts-navigator-xaxis .highcharts-grid-line {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-10);
}

.highcharts-navigator-xaxis.highcharts-axis-labels {
    fill: var(--highcharts-neutral-color-100);
    font-size: 0.7em;
    opacity: 0.6;
}

.highcharts-navigator-yaxis .highcharts-grid-line {
    stroke-width: 0;
}

.highcharts-scrollbar-thumb {
    fill: var(--highcharts-neutral-color-20);
    stroke: var(--highcharts-neutral-color-20);
    stroke-width: 0;
}

.highcharts-scrollbar-button {
    fill: var(--highcharts-neutral-color-10);
    stroke: var(--highcharts-neutral-color-20);
    stroke-width: 1px;
}

.highcharts-scrollbar-arrow {
    fill: var(--highcharts-neutral-color-60);
}

.highcharts-scrollbar-rifles {
    stroke: none;
    stroke-width: 1px;
}

.highcharts-scrollbar-track {
    fill: rgba(255, 255, 255, 0.001);
    stroke: var(--highcharts-neutral-color-20);
    stroke-width: 1px;
}

.highcharts-button {
    fill: var(--highcharts-neutral-color-3);
    stroke: var(--highcharts-neutral-color-20);
    cursor: default;
    stroke-width: 1px;
    transition: fill 250ms;
}

.highcharts-button text {
    fill: var(--highcharts-neutral-color-80);
    font-size: 0.8em;
}

.highcharts-button-hover {
    transition: fill 0ms;
    fill: var(--highcharts-neutral-color-10);
    stroke: var(--highcharts-neutral-color-20);
}

.highcharts-button-hover text {
    fill: var(--highcharts-neutral-color-80);
}

.highcharts-button-pressed {
    font-weight: bold;
    fill: var(--highcharts-highlight-color-10);
    stroke: var(--highcharts-neutral-color-20);
}

.highcharts-button-pressed text {
    fill: var(--highcharts-neutral-color-80);
    font-weight: bold;
}

.highcharts-button-disabled text {
    fill: var(--highcharts-neutral-color-80);
}

.highcharts-range-selector-buttons .highcharts-button {
    stroke-width: 0;
}

.highcharts-range-label rect {
    fill: none;
}

.highcharts-range-label text {
    fill: var(--highcharts-neutral-color-60);
}

.highcharts-range-input rect {
    fill: none;
}

.highcharts-range-input text {
    fill: var(--highcharts-neutral-color-80);
    font-size: 0.8em;
}

.highcharts-range-input {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-20);
}

input.highcharts-range-selector {
    position: absolute;
    border: 0;
    width: 1px; /* Chrome needs a pixel to see it */
    height: 1px;
    padding: 0;
    text-align: center;
    left: -9em; /* #4798 */
}

.highcharts-crosshair-label text {
    fill: var(--highcharts-background-color);
    font-size: 1.7em;
}

.highcharts-crosshair-label .highcharts-label-box {
    fill: inherit;
}

.highcharts-candlestick-series .highcharts-point {
    stroke: var(--highcharts-neutral-color-100);
    stroke-width: 1px;
}

.highcharts-candlestick-series .highcharts-point-up {
    fill: var(--highcharts-background-color);
}

.highcharts-hollowcandlestick-series .highcharts-point-down {
    fill: var(--highcharts-negative-color);
    stroke: var(--highcharts-negative-color);
}

.highcharts-hollowcandlestick-series .highcharts-point-down-bearish-up {
    fill: var(--highcharts-positive-color);
    stroke: var(--highcharts-positive-color);
}

.highcharts-hollowcandlestick-series .highcharts-point-up {
    fill: transparent;
    stroke: var(--highcharts-positive-color);
}

.highcharts-ohlc-series .highcharts-point-hover {
    stroke-width: 3px;
}

.highcharts-flags-series .highcharts-point .highcharts-label-box {
    stroke: var(--highcharts-neutral-color-40);
    fill: var(--highcharts-background-color);
    transition: fill 250ms;
}

.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
    stroke: var(--highcharts-neutral-color-100);
    fill: var(--highcharts-highlight-color-20);
}

.highcharts-flags-series .highcharts-point text {
    fill: var(--highcharts-neutral-color-100);
    font-size: 0.9em;
    font-weight: bold;
}

/* Highcharts Maps */

.highcharts-map-series .highcharts-point {
    transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
    stroke: var(--highcharts-neutral-color-20);
    stroke-width: inherit;
}

.highcharts-map-series .highcharts-point-hover {
    transition: fill 0ms, fill-opacity 0ms;
    fill-opacity: 0.5;
}

.highcharts-mapline-series .highcharts-point {
    fill: none;
}

.highcharts-heatmap-series .highcharts-point {
    stroke-width: 0;
}

.highcharts-map-navigation {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
}

.highcharts-map-navigation.highcharts-button {
    fill: var(--highcharts-background-color);
    stroke: var(--highcharts-neutral-color-10);
}

.highcharts-map-navigation.highcharts-button:hover {
    fill: var(--highcharts-neutral-color-10);
}

.highcharts-map-navigation.highcharts-button .highcharts-button-symbol {
    stroke-width: 2px;
}

.highcharts-mapview-inset-border {
    stroke: var(--highcharts-neutral-color-20);
    stroke-width: 1px;
    fill: none;
}

.highcharts-coloraxis {
    stroke-width: 0;
}

.highcharts-coloraxis-marker {
    fill: var(--highcharts-neutral-color-40);
}

.highcharts-null-point {
    fill: var(--highcharts-neutral-color-3);
}

/* 3d charts */

.highcharts-3d-frame {
    fill: transparent;
}

/* Exporting module */

.highcharts-contextbutton {
    /* Fill is needed to capture hover */
    fill: var(--highcharts-background-color);
    stroke: none;
    stroke-linecap: round;
}

.highcharts-contextbutton:hover {
    fill: var(--highcharts-neutral-color-10);
    stroke: var(--highcharts-neutral-color-10);
}

.highcharts-button-symbol {
    stroke: var(--highcharts-neutral-color-60);
    stroke-width: 3px;
}

.highcharts-menu {
    border: none;
    background: var(--highcharts-background-color);
    border-radius: 3px;
    padding: 0.5em;
    box-shadow: 3px 3px 10px #888888;
}

.highcharts-menu-item {
    background: none;
    border-radius: 3px;
    color: var(--highcharts-neutral-color-80);
    cursor: pointer;
    font-size: 0.8em;
    list-style-type: none;
    padding: 0.5em;
    transition: background 250ms, color 250ms;
}

.highcharts-menu-item:hover {
    background: var(--highcharts-neutral-color-5);
}

/* Breadcrumbs */

.highcharts-breadcrumbs-button {
    fill: none;
    stroke-width: 0;
    cursor: pointer;
}

.highcharts-breadcrumbs-separator {
    fill: var(--highcharts-neutral-color-60);
}

/* Drilldown module */

.highcharts-drilldown-point {
    cursor: pointer;
}

.highcharts-drilldown-data-label text,
text.highcharts-drilldown-data-label,
.highcharts-drilldown-axis-label {
    cursor: pointer;
    fill: var(--highcharts-highlight-color-100);
    font-weight: bold;
    text-decoration: underline;
}

/* No-data module */

.highcharts-no-data text {
    font-weight: bold;
    font-size: 0.8em;
    fill: var(--highcharts-neutral-color-60);
}

/* Drag-panes module */

.highcharts-axis-resizer {
    cursor: ns-resize;
    stroke: var(--highcharts-neutral-color-100);
    stroke-width: 2px;
}

/* Bullet type series */

.highcharts-bullet-target {
    stroke-width: 0;
}

/* Lineargauge type series */

.highcharts-lineargauge-target {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-80);
}

.highcharts-lineargauge-target-line {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-80);
}

/* Annotations module */

.highcharts-annotation-label-box {
    stroke-width: 1px;
    stroke: var(--highcharts-neutral-color-100);
    fill: var(--highcharts-neutral-color-100);
    fill-opacity: 0.75;
}

.highcharts-annotation-label text {
    fill: var(--highcharts-neutral-color-10);
    font-size: 0.8em;
}

/* A11y module */

.highcharts-a11y-proxy-button {
    border-width: 0;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    opacity: 0.001;
    z-index: 999;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: block;
    position: absolute;
}

.highcharts-a11y-proxy-group li {
    list-style: none;
}

.highcharts-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(1px, 1px, 1px, 1px);
    margin-top: -3px;
    opacity: 0.01;
}

.highcharts-a11y-invisible {
    visibility: hidden;
}

.highcharts-a11y-proxy-container,
.highcharts-a11y-proxy-container-before,
.highcharts-a11y-proxy-container-after {
    position: absolute;
    white-space: nowrap;
}

g.highcharts-series,
.highcharts-markers,
.highcharts-point {
    outline: none;
}

/* Gantt */

.highcharts-treegrid-node-collapsed,
.highcharts-treegrid-node-expanded {
    cursor: pointer;
}

.highcharts-point-connecting-path {
    fill: none;
}

.highcharts-grid-axis .highcharts-tick {
    stroke-width: 1px;
}

.highcharts-grid-axis .highcharts-axis-line {
    stroke-width: 1px;
}

.highcharts-container {
  font-size: 1rem;
  font-family: sans-serif;
}

.wf-active .highcharts-container {
  font-family: Noto Sans;
}

.highcharts-data-label {
  font-weight: inherit;
}

.highcharts-title {
  font-family: inherit;
  font-weight: normal;
}

.highcharts-strong,
.highcharts-container tspan[style*="bold"] {
  font-family: inherit;
  font-weight: bold;
}

.highcharts-legend-item text {
  font-family: inherit;
  font-weight: normal;
}

.highcharts-background {
  fill: none;
}

.highcharts-title,
.highcharts-subtitle,
.highcharts-axis-title,
.highcharts-axis-labels,
.highcharts-credits,
.highcharts-credits:hover,
.highcharts-data-label text,
.highcharts-legend-item text,
.highcharts-legend-item:hover text {
  fill: currentColor;
}

/* stylelint-disable-next-line no-duplicate-selectors */

.highcharts-title {
  font-size: 1.125rem;
}

.highcharts-axis-labels,
.highcharts-tooltip text,
.highcharts-tooltip .highcharts-header,
.highcharts-data-label {
  font-size: 0.88889rem;
}

.highcharts-axis-line,
.highcharts-grid-line,
.highcharts-tick,
.highcharts-minor-grid-line {
  stroke: currentColor;
}

.highcharts-axis-line,
.highcharts-tick {
  opacity: 0.75;
}

.highcharts-grid-line,
.highcharts-credits:not(:hover) {
  opacity: 0.25;
}

.highcharts-minor-grid-line {
  opacity: 0.125;
}

/**
* Tooltips
*/

.highcharts-tooltip text {
  fill: #363636;
}

.highcharts-tooltip-box {
  fill: #ffffff;
  fill-opacity: 0.9;
}

/**
* Colors (Default)
*/

.highcharts-color-0,
.highcharts-column-series .highcharts-color-0,
.highcharts-pie-series .highcharts-point.highcharts-color-0 {
  fill: #0179a5;
  stroke: #0179a5;
}

.highcharts-color-1,
.highcharts-column-series .highcharts-color-1,
.highcharts-pie-series .highcharts-point.highcharts-color-1 {
  fill: #389bda;
  stroke: #389bda;
}

.highcharts-color-2,
.highcharts-column-series .highcharts-color-2,
.highcharts-pie-series .highcharts-point.highcharts-color-2 {
  fill: #057a5f;
  stroke: #057a5f;
}

.highcharts-color-3,
.highcharts-column-series .highcharts-color-3,
.highcharts-pie-series .highcharts-point.highcharts-color-3 {
  fill: #f7dc34;
  stroke: #f7dc34;
}

.highcharts-color-4,
.highcharts-column-series .highcharts-color-4,
.highcharts-pie-series .highcharts-point.highcharts-color-4 {
  fill: #d12323;
  stroke: #d12323;
}

.highcharts-color-5,
.highcharts-column-series .highcharts-color-5,
.highcharts-pie-series .highcharts-point.highcharts-color-5 {
  fill: #364958;
  stroke: #364958;
}

.highcharts-color-6,
.highcharts-column-series .highcharts-color-6,
.highcharts-pie-series .highcharts-point.highcharts-color-6 {
  fill: #f27026;
  stroke: #f27026;
}

.highcharts-color-7,
.highcharts-column-series .highcharts-color-7,
.highcharts-pie-series .highcharts-point.highcharts-color-7 {
  fill: #797482;
  stroke: #797482;
}

.highcharts-color-8,
.highcharts-column-series .highcharts-color-8,
.highcharts-pie-series .highcharts-point.highcharts-color-8 {
  fill: #ab62a9;
  stroke: #ab62a9;
}

.highcharts-color-9,
.highcharts-column-series .highcharts-color-9,
.highcharts-pie-series .highcharts-point.highcharts-color-9 {
  fill: #dddddd;
  stroke: #dddddd;
}

.highcharts-data-label-connector {
  fill: none;
}

/**
* Legend
*/

.highcharts-legend-item:not(:hover) text {
  opacity: 0.9;
}

.dp-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
}

.dp {
  position: relative;
  background: #FFF;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
  line-height: 1.4;
  border-radius: 4px;
  max-height: 400px;
  z-index: 1000;
  padding-top: 6px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.dp:before {
  content: ' ';
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #3B99FC;
  background: linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%);
}

.dp-permanent .dp {
  padding-top: 0;
  border: 1px solid #EEE;
  box-shadow: none;
}

.dp-permanent .dp:before {
  display: none;
}

.dp-cal {
  min-height: 300px;
}

.dp-below {
  position: absolute;
  font-size: 0.8em;
  width: 400px;
  max-width: 100vw;
}

.dp-permanent {
  position: relative;
  font-size: 0.8em;
  width: 400px;
  max-width: 100vw;
}

.dp-permanent .dp{
  z-index: 0;
}

.dp-modal .dp {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  width: calc(100% - 4em);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: slide-up 0.3s forwards;
          animation: slide-up 0.3s forwards;
}

.dp-months {
  padding: 24px;
}

.dp-years {
  box-sizing: border-box;
  max-height: 400px;
  padding: 8px 0;
  overflow: auto !important; /* HACK for Chrome on Android */
}

.dp-cal-month,
.dp-cal-year,
.dp-day,
.dp-month,
.dp-year {
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  position: relative;
  color: #3B404D;
  border-radius: 2px;
  border: 0;
  background: transparent;
}

.dp-cal-header {
  position: relative;
  text-align: center;
  padding-bottom: 16px;
  background: #f5f5f5;
}

.dp-next,
.dp-prev {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  top: 14px;
  color: #777;
  border-radius: 2px;
  border: 0;
  background: transparent;
}

.dp-next:focus,
.dp-prev:focus,
.dp-next:hover,
.dp-prev:hover {
  outline: none;
  color: inherit;
}

.dp-prev {
  left: 24px;
}

.dp-next {
  right: 24px;
}

.dp-prev:before,
.dp-next:before {
  content: '';
  border: 2px solid;
  width: 10px;
  height: 10px;
  display: inline-block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  transition: border-color 0.2s;
  margin: 9px 0 40px 4px;
}

.dp-prev:before {
  border-right: 0;
  border-bottom: 0;
}

.dp-next:before {
  border-left: 0;
  border-top: 0;
  margin-left: 0;
  margin-right: 4px;
}

.dp-cal-month,
.dp-cal-year {
  display: inline-block;
  font-size: 1.4em;
  padding: 16px 8px 8px;
  outline: none;
}

.dp-cal-footer {
  text-align: center;
  background: #f5f5f5;
}

.dp-day-today:after {
  content: '';
  height: 0;
  width: 0;
  border: 7px solid #227BD7;
  border-bottom-color: transparent;
  border-left-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
}

.dp-close,
.dp-clear,
.dp-today {
  box-sizing: border-box;
  display: inline-block;
  width: 33%;
  padding: 8px;
  text-decoration: none;
  color: inherit;
  border: 0;
  background: transparent;
}

.dp-permanent .dp-close,
.dp-permanent .dp-clear {
  display: none;
}

.dp-close:active,
.dp-clear:active,
.dp-today:active,
.dp-next:active,
.dp-prev:active,
.dp-cal-month:active,
.dp-cal-year:active {
  background: #75BCFC;
  color: white;
}

@media screen and (min-device-width: 1200px) {
  .dp-close:hover,
  .dp-close:focus,
  .dp-clear:hover,
  .dp-clear:focus,
  .dp-today:hover,
  .dp-today:focus,
  .dp-next:hover,
  .dp-next:focus,
  .dp-prev:hover,
  .dp-prev:focus,
  .dp-cal-month:focus,
  .dp-cal-month:hover,
  .dp-cal-year:hover,
  .dp-cal-year:focus {
    background: #75BCFC;
    color: white;
  }
}

.dp-col-header,
.dp-day {
  width: 14.28571429%;
  display: inline-block;
  padding: 8px;
  text-align: center;
}

.dp-col-header {
  color: #AAA;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.8em;
  padding: 8px 0;
}

.dp-month {
  width: 33%;
  display: inline-block;
  padding: 8px;
}

.dp-year {
  display: block;
  padding: 8px 40px;
  width: 100%;
}

.dp-edge-day {
  color: #AAA;
}

.dp-day:hover,
.dp-month:hover,
.dp-year:hover,
.dp-current:focus,
.dp-current,
.dp-day:focus,
.dp-month:focus,
.dp-year:focus {
  outline: none;
  background: #75BCFC;
  color: white;
}

.dp-selected:hover,
.dp-selected:focus,
.dp-selected {
  background: #3B99FC;
  color: #FFF;
}

.dp-day-disabled {
  background: transparent;
  color: #DDD;
}

.dp-day-disabled:focus,
.dp-day-disabled:hover {
  background: #DDD;
}

.dp-focuser {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
}

/* Responsive overrides */

@media (max-width: 480px), (max-height: 480px) {
  .dp-modal .dp {
    font-size: 0.9em;
    width: auto;
    width: 100%;
  }

  .dp-day-of-week,
  .dp-day {
    padding: 8px;
  }
}

@-webkit-keyframes slide-up {
  0% {
    -webkit-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@keyframes slide-up {
  0% {
    -webkit-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

/**
 * Customizations to match the Tiny Date Picker calendar to the site.
 * Documentation: https://github.com/chrisdavies/tiny-date-picker
 */

.dp-modal {
  z-index: 200;
}

.dp-cal button {
  cursor: pointer;
}

.dp-cal-header {
  background: #1e75bb;
  color: #ffffff;
  padding: 0.70233rem 0;
}

.dp-cal-month,
.dp-cal-year,
.dp-next,
.dp-prev {
  color: #ffffff;
}

.dp-cal-month,
.dp-cal-year,
.dp-day,
.dp-month,
.dp-year {
  border-radius: 3px;
}

.dp-cal-month,
.dp-cal-year {
  padding: 0.70233rem;
}

.dp-days {
  padding: 0.49327rem;
}

.dp-day {
  color: #0055a5;
}

.dp-edge-day {
  color: #389bda;
}

.dp-current,
.dp-current:hover,
.dp-current:focus,
.dp-day:hover,
.dp-day:focus,
.dp-month:hover,
.dp-month:focus,
.dp-year:hover,
.dp-year:focus,
.dp-cal-month:hover,
.dp-cal-month:focus,
.dp-cal-year:hover,
.dp-cal-year:focus,
.dp-edge-day:hover,
.dp-edge-day:focus,
.dp-close:hover,
.dp-close:focus,
.dp-today:hover,
.dp-today:focus {
  background: #389bda;
  color: #ffffff;
}

/**
 * Hides a decorative top border that doesn't mesh well with the brand.
 */

.dp::before {
  display: none;
}

.dp {
  padding-top: 0;
}

/**
 * Vertically centers the next and previous arrows regardless of how tall the
 * header is.
 */

.dp-next,
.dp-prev {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/**
 * Allows for the calendar's footer links to take up equal space regardless
 * of many are showing.
 */

.dp-cal-footer {
  align-items: stretch;
  display: flex;
  flex-direction: row;
}

.dp-close,
.dp-today {
  color: #0055a5;
  display: unset;
  flex-grow: 1;
  padding: 0.70233rem;
}

/**
 * Hides the "Clear" footer link since we're not returning the value to an
 * input.
 */

.dp-clear {
  display: none;
}

/**
 * Days in the past should appear to be unselectable.
 */

.dp-day-disabled,
.dp-day-disabled:active,
.dp-day-disabled:focus,
.dp-day-disabled:hover {
  background: #ffffff;
  color: #dddddd;
  cursor: default;
}

/** @define utilities */

/**
 * Imports background color utilities
 */

.u-bgBlack { background-color: #363636 !important; }

.u-bgBlackAlt { background-color: #48453f !important; }

.u-bgBlackTransparent { background-color: rgba(0, 0, 0, 0.15) !important; }

.u-bgBlue { background-color: #389bda !important; }

.u-bgBlueDark { background-color: #0179a5 !important; }

.u-bgBlueDarker { background-color: #006588 !important; }

.u-bgGray { background-color: #797482 !important; }

.u-bgGreen { background-color: #057a5f !important; }

.u-bgLightTranslucent { background-color: rgba(239, 239, 239, 0.25) !important; }

.u-bgOrange { background-color: #f27026 !important; }

.u-bgOrangeAlt { background-color: #c55c20 !important; }

.u-bgPurple { background-color: #ab62a9 !important; }

.u-bgPurpleAlt { background-color: #8f528d !important; }

.u-bgRed { background-color: #d12323 !important; }

.u-bgSilver { background-color: #efefef !important; }

.u-bgSilverAlt { background-color: #dddddd !important; }

.u-bgSlate { background-color: #364958 !important; }

.u-bgTeal { background-color: #198199 !important; }

.u-bgTealAlt { background-color: #00748c !important; }

.u-bgWhite { background-color: #ffffff !important; }

.u-bgWhiteAlt { background-color: #fafafa !important; }

.u-bgWhiteTransparent { background-color: rgba(255, 255, 255, 0.5) !important; }

.u-bgYellow { background-color: #f7dc34 !important; }

.u-bgGreenJuice { background-color: #368600 !important; }

.u-bgOrangeJuice { background-color: #e65709 !important; }

.u-bgSocialTwitter { background-color: #00acee !important; }

.u-bgSocialFacebook { background-color: #3b5998 !important; }

.u-bgSocialLinkedin { background-color: #0e76a8 !important; }

.u-bgBrand { background-color: #0055a5 !important; }

.u-bgBrandAlt { background-color: #1e75bb !important; }

.u-bgLink { background-color: #0055a5 !important; }

.u-bgLinkHover { background-color: #00748c !important; }

.u-bgTransparent {
  background-color: transparent !important;
}

/**
 * Breakpoint-dependent background color classes.
 */

@media (min-width: 30em) {
  .u-sm-bgTransparent {
    background-color: transparent !important;
  }
  .u-sm-bgSilver {
    background: #efefef !important;
  }
  .u-sm-bgWhite {
    background: #ffffff !important;
  }
}

@media (min-width: 47em) {
  .u-md-bgTransparent {
    background-color: transparent !important;
  }
  .u-md-bgSilver {
    background: #efefef !important;
  }
  .u-md-bgWhite {
    background: #ffffff !important;
  }
}

@media (min-width: 64em) {
  .u-lg-bgTransparent {
    background-color: transparent !important;
  }
  .u-lg-bgSilver {
    background: #efefef !important;
  }
  .u-lg-bgWhite {
    background: #ffffff !important;
  }
}

@media (min-width: 72em) {
  .u-xl-bgTransparent {
    background-color: transparent !important;
  }
  .u-xl-bgSilver {
    background: #efefef !important;
  }
  .u-xl-bgWhite {
    background: #ffffff !important;
  }
}

/**
 * Print-specific background utilities
 */

@media print {
  .u-print-bgNone {
    background: none !important;
  }
}

/** @define utilities */

/**
 * Imports border color utilities
 */

.u-borderColorBlack { border-color: #363636 !important; }

.u-borderColorBlackAlt { border-color: #48453f !important; }

.u-borderColorBlackTransparent { border-color: rgba(0, 0, 0, 0.15) !important; }

.u-borderColorBlue { border-color: #389bda !important; }

.u-borderColorBlueDark { border-color: #0179a5 !important; }

.u-borderColorBlueDarker { border-color: #006588 !important; }

.u-borderColorGray { border-color: #797482 !important; }

.u-borderColorGreen { border-color: #057a5f !important; }

.u-borderColorLightTranslucent { border-color: rgba(239, 239, 239, 0.25) !important; }

.u-borderColorOrange { border-color: #f27026 !important; }

.u-borderColorOrangeAlt { border-color: #c55c20 !important; }

.u-borderColorPurple { border-color: #ab62a9 !important; }

.u-borderColorPurpleAlt { border-color: #8f528d !important; }

.u-borderColorRed { border-color: #d12323 !important; }

.u-borderColorSilver { border-color: #efefef !important; }

.u-borderColorSilverAlt { border-color: #dddddd !important; }

.u-borderColorSlate { border-color: #364958 !important; }

.u-borderColorTeal { border-color: #198199 !important; }

.u-borderColorTealAlt { border-color: #00748c !important; }

.u-borderColorWhite { border-color: #ffffff !important; }

.u-borderColorWhiteAlt { border-color: #fafafa !important; }

.u-borderColorWhiteTransparent { border-color: rgba(255, 255, 255, 0.5) !important; }

.u-borderColorYellow { border-color: #f7dc34 !important; }

.u-borderColorGreenJuice { border-color: #368600 !important; }

.u-borderColorOrangeJuice { border-color: #e65709 !important; }

.u-borderColorSocialTwitter { border-color: #00acee !important; }

.u-borderColorSocialFacebook { border-color: #3b5998 !important; }

.u-borderColorSocialLinkedin { border-color: #0e76a8 !important; }

.u-borderColorBrand { border-color: #0055a5 !important; }

.u-borderColorBrandAlt { border-color: #1e75bb !important; }

.u-borderColorLink { border-color: #0055a5 !important; }

.u-borderColorLinkHover { border-color: #00748c !important; }

/**
 * Style and dimensions
 */

.u-border,
.u-borderTop,
.u-borderEnds {
  border-top-style: solid !important;
  border-top-width: 1px !important;
}

.u-border,
.u-borderBottom,
.u-borderEnds {
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
}

.u-border,
.u-borderLeft,
.u-borderSides {
  border-left-style: solid !important;
  border-left-width: 1px !important;
}

.u-border,
.u-borderRight,
.u-borderSides {
  border-right-style: solid !important;
  border-right-width: 1px !important;
}

/**
 * Border radii
 */

/* stylelint-disable plugin/selector-bem-pattern */

.u-borderRadiusSm {
    border-radius: 3px;
  }

.u-borderRadiusTopSm {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

.u-borderRadiusBottomSm {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

.u-borderRadiusLeftSm {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }

.u-borderRadiusRightSm {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
  }

.u-borderRadiusMd {
    border-radius: 8px;
  }

.u-borderRadiusTopMd {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

.u-borderRadiusBottomMd {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

.u-borderRadiusLeftMd {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }

.u-borderRadiusRightMd {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }

.u-borderRadiusLg {
    border-radius: 24px;
  }

.u-borderRadiusTopLg {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }

.u-borderRadiusBottomLg {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

.u-borderRadiusLeftLg {
    border-bottom-left-radius: 24px;
    border-top-left-radius: 24px;
  }

.u-borderRadiusRightLg {
    border-bottom-right-radius: 24px;
    border-top-right-radius: 24px;
  }

.u-borderRadiusNone {
    border-radius: 0;
  }

.u-borderRadiusTopNone {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

.u-borderRadiusBottomNone {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.u-borderRadiusLeftNone {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

.u-borderRadiusRightNone {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

@media (min-width: 30em) {
  .u-sm-borderRadiusSm {
    border-radius: 3px;
  }
  .u-sm-borderRadiusTopSm {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .u-sm-borderRadiusBottomSm {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .u-sm-borderRadiusLeftSm {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }
  .u-sm-borderRadiusRightSm {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
  }
  .u-sm-borderRadiusMd {
    border-radius: 8px;
  }
  .u-sm-borderRadiusTopMd {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .u-sm-borderRadiusBottomMd {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .u-sm-borderRadiusLeftMd {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  .u-sm-borderRadiusRightMd {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }
  .u-sm-borderRadiusLg {
    border-radius: 24px;
  }
  .u-sm-borderRadiusTopLg {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .u-sm-borderRadiusBottomLg {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
  .u-sm-borderRadiusLeftLg {
    border-bottom-left-radius: 24px;
    border-top-left-radius: 24px;
  }
  .u-sm-borderRadiusRightLg {
    border-bottom-right-radius: 24px;
    border-top-right-radius: 24px;
  }
  .u-sm-borderRadiusNone {
    border-radius: 0;
  }
  .u-sm-borderRadiusTopNone {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .u-sm-borderRadiusBottomNone {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .u-sm-borderRadiusLeftNone {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .u-sm-borderRadiusRightNone {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

@media (min-width: 47em) {
  .u-md-borderRadiusSm {
    border-radius: 3px;
  }
  .u-md-borderRadiusTopSm {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .u-md-borderRadiusBottomSm {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .u-md-borderRadiusLeftSm {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }
  .u-md-borderRadiusRightSm {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
  }
  .u-md-borderRadiusMd {
    border-radius: 8px;
  }
  .u-md-borderRadiusTopMd {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .u-md-borderRadiusBottomMd {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .u-md-borderRadiusLeftMd {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  .u-md-borderRadiusRightMd {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }
  .u-md-borderRadiusLg {
    border-radius: 24px;
  }
  .u-md-borderRadiusTopLg {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .u-md-borderRadiusBottomLg {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
  .u-md-borderRadiusLeftLg {
    border-bottom-left-radius: 24px;
    border-top-left-radius: 24px;
  }
  .u-md-borderRadiusRightLg {
    border-bottom-right-radius: 24px;
    border-top-right-radius: 24px;
  }
  .u-md-borderRadiusNone {
    border-radius: 0;
  }
  .u-md-borderRadiusTopNone {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .u-md-borderRadiusBottomNone {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .u-md-borderRadiusLeftNone {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .u-md-borderRadiusRightNone {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

@media (min-width: 64em) {
  .u-lg-borderRadiusSm {
    border-radius: 3px;
  }
  .u-lg-borderRadiusTopSm {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .u-lg-borderRadiusBottomSm {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .u-lg-borderRadiusLeftSm {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }
  .u-lg-borderRadiusRightSm {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
  }
  .u-lg-borderRadiusMd {
    border-radius: 8px;
  }
  .u-lg-borderRadiusTopMd {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .u-lg-borderRadiusBottomMd {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .u-lg-borderRadiusLeftMd {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  .u-lg-borderRadiusRightMd {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }
  .u-lg-borderRadiusLg {
    border-radius: 24px;
  }
  .u-lg-borderRadiusTopLg {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .u-lg-borderRadiusBottomLg {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
  .u-lg-borderRadiusLeftLg {
    border-bottom-left-radius: 24px;
    border-top-left-radius: 24px;
  }
  .u-lg-borderRadiusRightLg {
    border-bottom-right-radius: 24px;
    border-top-right-radius: 24px;
  }
  .u-lg-borderRadiusNone {
    border-radius: 0;
  }
  .u-lg-borderRadiusTopNone {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .u-lg-borderRadiusBottomNone {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .u-lg-borderRadiusLeftNone {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .u-lg-borderRadiusRightNone {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

/* stylelint-enable */

/** @define utilities */

/**
 * BHP-specific color classes. Augments colors shared across brands.
 */

.u-textBlack { color: #363636 !important; }

.u-textBlackAlt { color: #48453f !important; }

.u-textBlackTransparent { color: rgba(0, 0, 0, 0.15) !important; }

.u-textBlue { color: #389bda !important; }

.u-textBlueDark { color: #0179a5 !important; }

.u-textBlueDarker { color: #006588 !important; }

.u-textGray { color: #797482 !important; }

.u-textGreen { color: #057a5f !important; }

.u-textLightTranslucent { color: rgba(239, 239, 239, 0.25) !important; }

.u-textOrange { color: #f27026 !important; }

.u-textOrangeAlt { color: #c55c20 !important; }

.u-textPurple { color: #ab62a9 !important; }

.u-textPurpleAlt { color: #8f528d !important; }

.u-textRed { color: #d12323 !important; }

.u-textSilver { color: #efefef !important; }

.u-textSilverAlt { color: #dddddd !important; }

.u-textSlate { color: #364958 !important; }

.u-textTeal { color: #198199 !important; }

.u-textTealAlt { color: #00748c !important; }

.u-textWhite { color: #ffffff !important; }

.u-textWhiteAlt { color: #fafafa !important; }

.u-textWhiteTransparent { color: rgba(255, 255, 255, 0.5) !important; }

.u-textYellow { color: #f7dc34 !important; }

.u-textGreenJuice { color: #368600 !important; }

.u-textOrangeJuice { color: #e65709 !important; }

.u-textSocialTwitter { color: #00acee !important; }

.u-textSocialFacebook { color: #3b5998 !important; }

.u-textSocialLinkedin { color: #0e76a8 !important; }

.u-textBrand { color: #0055a5 !important; }

.u-textBrandAlt { color: #1e75bb !important; }

.u-textLink { color: #0055a5 !important; }

.u-textLinkHover { color: #00748c !important; }

/**
 * Inherit the text color from the parent. Useful for links that you
 * don't want to use the standard link color.
 */

.u-textInherit {
  color: inherit;
}

/**
 * Using a screen media query because some of the text color utilities provide
 * insufficient contrast with a white background and should be hidden from
 * print.
 */

@media screen {
  .u-textCyan {
    color: cyan !important;
  }

  .u-textCyanLight {
    color: lightcyan !important;
  }

  .u-textGreenDark {
    color: darkgreen !important;
  }

  .u-textPurpleLight {
    color: violet !important;
  }
}

/**
 * Light colors provide insufficient contrast to white backgrounds, hiding from
 * print.
 */

@media print {
  .u-textSilver,
  .u-textSilverAlt {
    color: inherit !important;
  }
}

@media (min-width: 30em) {
  .u-sm-textInheritColor {
    color: inherit !important;
  }
}

@media (min-width: 47em) {
  .u-md-textInheritColor {
    color: inherit !important;
  }
}

@media (min-width: 64em) {
  .u-lg-textInheritColor {
    color: inherit !important;
  }
}

/**
 * Print-specific styles
 */

@media print {
  .u-print-textInherit {
    color: inherit !important;
  }
}

/** @define utilities */

.u-columns2 {
  grid-column-gap: 1.42383rem;
  -webkit-column-gap: 1.42383rem;
     -moz-column-gap: 1.42383rem;
          column-gap: 1.42383rem;
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
}

.u-columns3 {
  grid-column-gap: 1.42383rem;
  -webkit-column-gap: 1.42383rem;
     -moz-column-gap: 1.42383rem;
          column-gap: 1.42383rem;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
}

@media (min-width: 30em) {
  .u-sm-columns1 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 1;
       -moz-columns: 1;
            columns: 1;
  }

  .u-sm-columns2 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }
}

@media (min-width: 47em) {
  .u-md-columns1 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 1;
       -moz-columns: 1;
            columns: 1;
  }

  .u-md-columns2 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }

  .u-md-columns3 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
  }
}

@media (min-width: 64em) {
  .u-lg-columns1 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 1;
       -moz-columns: 1;
            columns: 1;
  }

  .u-lg-columns2 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }

  .u-lg-columns3 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
  }
}

@media (min-width: 72em) {
  .u-xl-columns2 {
    grid-column-gap: 2.84766rem;
    -webkit-column-gap: 2.84766rem;
       -moz-column-gap: 2.84766rem;
            column-gap: 2.84766rem;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }

  .u-xl-columns3 {
    grid-column-gap: 2.84766rem;
    -webkit-column-gap: 2.84766rem;
       -moz-column-gap: 2.84766rem;
            column-gap: 2.84766rem;
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
  }
}

@media print {
  .u-print-columns1 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 1;
       -moz-columns: 1;
            columns: 1;
  }

  .u-print-columns2 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }

  .u-print-columns3 {
    grid-column-gap: 1.42383rem;
    -webkit-column-gap: 1.42383rem;
       -moz-column-gap: 1.42383rem;
            column-gap: 1.42383rem;
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
  }
}

/**
 * Column breaks
 * 1. legacy for Firefox. Autoprefixer does not correctly
 *    handle this (as of 10/2017).
 */

.u-breakInsideAvoid {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
  page-break-inside: avoid; /* 1 */
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * 1. legacy for Firefox; see above.
 */

.u-breakInsideAvoidItems > * {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
  page-break-inside: avoid; /* 1 */
}

/* stylelint-enable */

/** @define utilities */

/**
 * Constrain width and center page content
 * Scoped to `screen` so that the `print` version can be full width by default.
 */

@media screen {
  .u-containSpread {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 72rem !important;
  }
}

/**
 * These media queries set the content max width at different breakpoints.
 * This creates repetitive, unnecessary code when the max width value
 * doesn't change. While this isn't ideal, it's a compromise with brands
 * that do rely on the max-width value changing.
 */

@media screen and (min-width: 30em) {
  .u-containSpread {
    max-width: 72rem !important;
  }
}

@media screen and (min-width: 47em) {
  .u-containSpread {
    max-width: 72rem !important;
  }
}

@media screen and (min-width: 64em) {
  .u-containSpread {
    max-width: 72rem !important;
  }
}

@media screen and (min-width: 72em) {
  .u-containSpread {
    max-width: 72rem !important;
  }
}

@media screen and (--xxl-viewport) {
  .u-containSpread {
    max-width: 72rem !important;
  }
}

/**
 * Constrain width and center page content at xl breakpoint
 */

@media (min-width: 72em) {
  .u-xl-containSpread {
    max-width: var(--size-max-width-spread) !important;
  }
}

/**
 * Constrain width at half the size of `u-containSpread` from the medium
 * breakpoint up.
 *
 * These media queries set the content max width at different breakpoints.
 * This is because the BMDA brand changes the content max width at each
 * breakpoint. In the future, it would be nice to use percentages instead of
 * hard value jumps.
 */

.u-containHalfSpread {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 72rem;
}

@media (min-width: 30em) {
  .u-containHalfSpread {
    max-width: 72rem !important;
  }
}

@media (min-width: 47em) {
  .u-containHalfSpread {
    max-width: 36rem !important;
  }
}

@media (min-width: 64em) {
  .u-containHalfSpread {
    max-width: 36rem !important;
  }
}

@media (min-width: 72em) {
  .u-containHalfSpread {
    max-width: 36rem !important;
  }
}

@media (--xxl-viewport) {
  .u-containHalfSpread {
    max-width: 36rem !important;
  }
}

/**
 * Contains content at an increased width and centers page content
 */

.u-containPanorama {
  margin-left: auto;
  margin-right: auto;
  max-width: 100rem !important;
}

/**
 * Contains content at an smaller width and centers page content
 */

.u-containNarrow {
  margin-left: auto;
  margin-right: auto;
  max-width: 15rem !important;
}

/**
 * Contains content at an even smaller width than `u-containNarrow`
 * and centers page content
 */

.u-containTiny {
  margin-left: auto;
  margin-right: auto;
  max-width: 7rem !important;
}

/**
 * Constrain width and center prose content
 * Scoped to `screen` so that the `print` version can be full width by default.
 */

@media screen {
  .u-containProse {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 40rem !important;
  }
}

/**
 * Constrain width and center prose content at medium breakpoint
 * Scoped to `screen` so that the `print` version can be full width by default.
 */

@media screen and (min-width: 47em) {
  .u-md-containProse {
    max-width: 40rem !important;
  }
}

/* stylelint-disable plugin/selector-bem-pattern */

/**
 * Does the same thing as u-containProse but allows images and other elements
 * to float outside the max width without compromising readability.
 */

.u-containProseChildren > p {
  max-width: 40rem;
}

/* stylelint-enable */

/**
 * Break out of a container utility, expanding to take up the full available
 * viewport width.
 */

.u-release {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/** @define utilities */

/**
* We alternate imports so that responsive `u-flex` will work intuitively with
* other responsive display utilities.
*/

/**
 * @define utilities
 * Display-type utilities
 */

.u-block {
  display: block !important;
}

.u-hidden {
  display: none !important;
}

/**
 * Completely remove from the flow but leave available to screen readers.
 */

.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.u-inline {
  display: inline !important;
}

/**
 * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
 * inline-block will display at its default size, and not limit its width to
 * 100% of an ancestral container.
 */

.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%; /* 1 */
}

.u-table {
  display: table !important;
}

.u-tableCell {
  display: table-cell !important;
}

.u-tableRow {
  display: table-row !important;
}

/** @define utilities */

/* Applies to flex container
   ========================================================================== */

/**
 * Container
 */

.u-flex {
  display: flex !important;
}

.u-flexInline {
  display: inline-flex !important;
}

/**
 * Direction: row
 */

.u-flexRow {
  flex-direction: row !important;
}

.u-flexRowReverse {
  flex-direction: row-reverse !important;
}

/**
 * Direction: column
 */

.u-flexCol {
  flex-direction: column !important;
}

.u-flexColReverse {
  flex-direction: column-reverse !important;
}

/**
 * Wrap
 */

.u-flexWrap {
  flex-wrap: wrap !important;
}

.u-flexNoWrap {
  flex-wrap: nowrap !important;
}

.u-flexWrapReverse {
  flex-wrap: wrap-reverse !important;
}

/**
 * Align items along the main axis of the current line of the flex container
 */

.u-flexJustifyStart {
  justify-content: flex-start !important;
}

.u-flexJustifyEnd {
  justify-content: flex-end !important;
}

.u-flexJustifyCenter {
  justify-content: center !important;
}

.u-flexJustifyBetween {
  justify-content: space-between !important;
}

.u-flexJustifyAround {
  justify-content: space-around !important;
}

/**
 * Align items in the cross axis of the current line of the flex container
 * Similar to `justify-content` but in the perpendicular direction
 */

.u-flexAlignItemsStart {
  align-items: flex-start !important;
}

.u-flexAlignItemsEnd {
  align-items: flex-end !important;
}

.u-flexAlignItemsCenter {
  align-items: center !important;
}

.u-flexAlignItemsStretch {
  align-items: stretch !important;
}

.u-flexAlignItemsBaseline {
  align-items: baseline !important;
}

/**
 * Aligns items within the flex container when there is extra
 * space in the cross-axis
 *
 * Has no effect when there is only one line of flex items.
 */

.u-flexAlignContentStart {
  align-content: flex-start !important;
}

.u-flexAlignContentEnd {
  align-content: flex-end !important;
}

.u-flexAlignContentCenter {
  align-content: center !important;
}

.u-flexAlignContentStretch {
  align-content: stretch !important;
}

.u-flexAlignContentBetween {
  align-content: space-between !important;
}

.u-flexAlignContentAround {
  align-content: space-around !important;
}

/* Applies to flex items
   ========================================================================== */

/**
 * Override default alignment of single item when specified by `align-items`
 */

.u-flexAlignSelfStart {
  align-self: flex-start !important;
}

.u-flexAlignSelfEnd {
  align-self: flex-end !important;
}

.u-flexAlignSelfCenter {
  align-self: center !important;
}

.u-flexAlignSelfStretch {
  align-self: stretch !important;
}

.u-flexAlignSelfBaseline {
  align-self: baseline !important;
}

.u-flexAlignSelfAuto {
  align-self: auto !important;
}

/**
 * Change order without editing underlying HTML
 */

.u-flexOrderFirst {
  order: -1 !important;
}

.u-flexOrderLast {
  order: 1 !important;
}

.u-flexOrderNone {
  order: 0 !important;
}

/**
 * Specify the flex grow factor, which determines how much the flex item will
 * grow relative to the rest of the flex items in the flex container.
 *
 * Supports 1-5 proportions
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    - http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
 *    instead of `auto` as this matches what the default would be with `flex`
 *    shorthand - http://git.io/vllWx
 */

.u-flexGrow1 {
  flex: 1 1 0% !important; /* 1 */
}

.u-flexGrow2 {
  flex: 2 1 0% !important;
}

.u-flexGrow3 {
  flex: 3 1 0% !important;
}

.u-flexGrow4 {
  flex: 4 1 0% !important;
}

.u-flexGrow5 {
  flex: 5 1 0% !important;
}

/**
 * Specify the flex shrink factor, which determines how much the flex item will
 * shrink relative to the rest of the flex items in the flex container.
 */

.u-flexShrink0 {
  flex-shrink: 0 !important;
}

.u-flexShrink1 {
  flex-shrink: 1 !important;
}

.u-flexShrink2 {
  flex-shrink: 2 !important;
}

.u-flexShrink3 {
  flex-shrink: 3 !important;
}

.u-flexShrink4 {
  flex-shrink: 4 !important;
}

.u-flexShrink5 {
  flex-shrink: 5 !important;
}

/**
 * Aligning with `auto` margins
 * http://www.w3.org/TR/css-flexbox-1/#auto-margins
 */

.u-flexExpand {
  margin: auto !important;
}

.u-flexExpandLeft {
  margin-left: auto !important;
}

.u-flexExpandRight {
  margin-right: auto !important;
}

.u-flexExpandTop {
  margin-top: auto !important;
}

.u-flexExpandBottom {
  margin-bottom: auto !important;
}

/**
 * Basis
 */

.u-flexBasisAuto {
  flex-basis: auto !important;
}

.u-flexBasis0 {
  flex-basis: 0 !important;
}

/*
 * Shorthand
 *
 * Declares all values instead of keywords like 'initial' to work around IE10
 * https://www.w3.org/TR/css-flexbox-1/#flex-common
 *
 * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
 *    This ensures it overrides flex-basis set in other utilities.
 */

/*
 * Sizes the item based on the width/height properties
 */

.u-flexInitial {
  flex: 0 1 auto !important;
  flex-basis: auto !important; /* 1 */
}

/*
 * Sizes the item based on the width/height properties, but makes them fully
 * flexible, so that they absorb any free space along the main axis.
 */

.u-flexAuto {
  flex: 1 1 auto !important;
  flex-basis: auto !important; /* 1 */
}

/*
 * Sizes the item according to the width/height properties, but makes the flex
 * item fully inflexible. Similar to initial, except that flex items are
 * not allowed to shrink, even in overflow situations.
 */

.u-flexNone {
  flex: 0 0 auto !important;
  flex-basis: auto !important; /* 1 */
}

/**
 * @define utilities
 * Size: breakpoint 1 (small)
 */

@media (min-width: 30em) {

  /* Applies to flex container
     ======================================================================== */

  /**
   * Container
   */

  .u-sm-flex {
    display: flex !important;
  }

  .u-sm-flexInline {
    display: inline-flex !important;
  }

  /**
   * Direction: row
   */

  .u-sm-flexRow {
    flex-direction: row !important;
  }

  .u-sm-flexRowReverse {
    flex-direction: row-reverse !important;
  }

  /**
   * Direction: column
   */

  .u-sm-flexCol {
    flex-direction: column !important;
  }

  .u-sm-flexColReverse {
    flex-direction: column-reverse !important;
  }

  /**
   * Wrap
   */

  .u-sm-flexWrap {
    flex-wrap: wrap !important;
  }

  .u-sm-flexNoWrap {
    flex-wrap: nowrap !important;
  }

  .u-sm-flexWrapReverse {
    flex-wrap: wrap-reverse !important;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .u-sm-flexJustifyStart {
    justify-content: flex-start !important;
  }

  .u-sm-flexJustifyEnd {
    justify-content: flex-end !important;
  }

  .u-sm-flexJustifyCenter {
    justify-content: center !important;
  }

  .u-sm-flexJustifyBetween {
    justify-content: space-between !important;
  }

  .u-sm-flexJustifyAround {
    justify-content: space-around !important;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .u-sm-flexAlignItemsStart {
    align-items: flex-start !important;
  }

  .u-sm-flexAlignItemsEnd {
    align-items: flex-end !important;
  }

  .u-sm-flexAlignItemsCenter {
    align-items: center !important;
  }

  .u-sm-flexAlignItemsStretch {
    align-items: stretch !important;
  }

  .u-sm-flexAlignItemsBaseline {
    align-items: baseline !important;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .u-sm-flexAlignContentStart {
    align-content: flex-start !important;
  }

  .u-sm-flexAlignContentEnd {
    align-content: flex-end !important;
  }

  .u-sm-flexAlignContentCenter {
    align-content: center !important;
  }

  .u-sm-flexAlignContentStretch {
    align-content: stretch !important;
  }

  .u-sm-flexAlignContentBetween {
    align-content: space-between !important;
  }

  .u-sm-flexAlignContentAround {
    align-content: space-around !important;
  }

  /* Applies to flex items
     ======================================================================== */

  /**
   * Override default alignment of single item when specified by `align-items`
   */

  .u-sm-flexAlignSelfStart {
    align-self: flex-start !important;
  }

  .u-sm-flexAlignSelfEnd {
    align-self: flex-end !important;
  }

  .u-sm-flexAlignSelfCenter {
    align-self: center !important;
  }

  .u-sm-flexAlignSelfStretch {
    align-self: stretch !important;
  }

  .u-sm-flexAlignSelfBaseline {
    align-self: baseline !important;
  }

  .u-sm-flexAlignSelfAuto {
    align-self: auto !important;
  }

  /**
   * Change order without editing underlying HTML
   */

  .u-sm-flexOrderFirst {
    order: -1 !important;
  }

  .u-sm-flexOrderLast {
    order: 1 !important;
  }

  .u-sm-flexOrderNone {
    order: 0 !important;
  }

  /**
   * Specify the flex grow factor, which determines how much the flex item will
   * grow relative to the rest of the flex items in the flex container.
   *
   * Supports 1-5 proportions
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */

  .u-sm-flexGrow1 {
    flex: 1 1 0% !important; /* 1 */
  }

  .u-sm-flexGrow2 {
    flex: 2 1 0% !important;
  }

  .u-sm-flexGrow3 {
    flex: 3 1 0% !important;
  }

  .u-sm-flexGrow4 {
    flex: 4 1 0% !important;
  }

  .u-sm-flexGrow5 {
    flex: 5 1 0% !important;
  }

  /**
   * Specify the flex shrink factor, which determines how much the flex item
   * will shrink relative to the rest of the flex items in the flex container.
   */

  .u-sm-flexShrink0 {
    flex-shrink: 0 !important;
  }

  .u-sm-flexShrink1 {
    flex-shrink: 1 !important;
  }

  .u-sm-flexShrink2 {
    flex-shrink: 2 !important;
  }

  .u-sm-flexShrink3 {
    flex-shrink: 3 !important;
  }

  .u-sm-flexShrink4 {
    flex-shrink: 4 !important;
  }

  .u-sm-flexShrink5 {
    flex-shrink: 5 !important;
  }

  /**
   * Aligning with `auto` margins
   * http://www.w3.org/TR/css-flexbox-1/#auto-margins
   */

  .u-sm-flexExpand {
    margin: auto !important;
  }

  .u-sm-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-sm-flexExpandRight {
    margin-right: auto !important;
  }

  .u-sm-flexExpandTop {
    margin-top: auto !important;
  }

  .u-sm-flexExpandBottom {
    margin-bottom: auto !important;
  }

  /**
   * Basis
   */

  .u-sm-flexBasisAuto {
    flex-basis: auto !important;
  }

  .u-sm-flexBasis0 {
    flex-basis: 0 !important;
  }

  /*
   * Shorthand
   *
   * Declares all values instead of keywords like 'initial' to work around IE10
   * https://www.w3.org/TR/css-flexbox-1/#flex-common
   *
   * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
   *    This ensures it overrides flex-basis set in other utilities.
   */

  /*
   * Sizes the item based on the width/height properties
   */

  .u-sm-flexInitial {
    flex: 0 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  /*
   * Sizes the item based on the width/height properties, but makes them fully
   * flexible, so that they absorb any free space along the main axis.
   */

  .u-sm-flexAuto {
    flex: 1 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  /*
   * Sizes the item according to the width/height properties, but makes the flex
   * item fully inflexible. Similar to initial, except that flex items are
   * not allowed to shrink, even in overflow situations.
   */

  .u-sm-flexNone {
    flex: 0 0 auto !important;
    flex-basis: auto !important; /* 1 */
  }

}

/** @define utilities */

@media (min-width: 30em) {
  .u-sm-hidden {
    display: none !important;
  }

  .u-sm-block {
    display: block !important;
  }

  .u-sm-inline {
    display: inline !important;
  }

  .u-sm-inlineBlock {
    display: inline-block !important;
  }
}

/**
 * @define utilities
 * Size: breakpoint 2 (medium)
 */

@media (min-width: 47em) {

  /* Applies to flex container
     ======================================================================== */

  /**
   * Container
   */

  .u-md-flex {
    display: flex !important;
  }

  .u-md-flexInline {
    display: inline-flex !important;
  }

  /**
   * Direction: row
   */

  .u-md-flexRow {
    flex-direction: row !important;
  }

  .u-md-flexRowReverse {
    flex-direction: row-reverse !important;
  }

  /**
   * Direction: column
   */

  .u-md-flexCol {
    flex-direction: column !important;
  }

  .u-md-flexColReverse {
    flex-direction: column-reverse !important;
  }

  /**
   * Wrap
   */

  .u-md-flexWrap {
    flex-wrap: wrap !important;
  }

  .u-md-flexNoWrap {
    flex-wrap: nowrap !important;
  }

  .u-md-flexWrapReverse {
    flex-wrap: wrap-reverse !important;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .u-md-flexJustifyStart {
    justify-content: flex-start !important;
  }

  .u-md-flexJustifyEnd {
    justify-content: flex-end !important;
  }

  .u-md-flexJustifyCenter {
    justify-content: center !important;
  }

  .u-md-flexJustifyBetween {
    justify-content: space-between !important;
  }

  .u-md-flexJustifyAround {
    justify-content: space-around !important;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .u-md-flexAlignItemsStart {
    align-items: flex-start !important;
  }

  .u-md-flexAlignItemsEnd {
    align-items: flex-end !important;
  }

  .u-md-flexAlignItemsCenter {
    align-items: center !important;
  }

  .u-md-flexAlignItemsStretch {
    align-items: stretch !important;
  }

  .u-md-flexAlignItemsBaseline {
    align-items: baseline !important;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .u-md-flexAlignContentStart {
    align-content: flex-start !important;
  }

  .u-md-flexAlignContentEnd {
    align-content: flex-end !important;
  }

  .u-md-flexAlignContentCenter {
    align-content: center !important;
  }

  .u-md-flexAlignContentStretch {
    align-content: stretch !important;
  }

  .u-md-flexAlignContentBetween {
    align-content: space-between !important;
  }

  .u-md-flexAlignContentAround {
    align-content: space-around !important;
  }

  /* Applies to flex items
     ======================================================================== */

  /**
   * Override default alignment of single item when specified by `align-items`
   */

  .u-md-flexAlignSelfStart {
    align-self: flex-start !important;
  }

  .u-md-flexAlignSelfEnd {
    align-self: flex-end !important;
  }

  .u-md-flexAlignSelfCenter {
    align-self: center !important;
  }

  .u-md-flexAlignSelfStretch {
    align-self: stretch !important;
  }

  .u-md-flexAlignSelfBaseline {
    align-self: baseline !important;
  }

  .u-md-flexAlignSelfAuto {
    align-self: auto !important;
  }

  /**
   * Change order without editing underlying HTML
   */

  .u-md-flexOrderFirst {
    order: -1 !important;
  }

  .u-md-flexOrderLast {
    order: 1 !important;
  }

  .u-md-flexOrderNone {
    order: 0 !important;
  }

  /**
   * Specify the flex grow factor, which determines how much the flex item will
   * grow relative to the rest of the flex items in the flex container.
   *
   * Supports 1-5 proportions
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */

  .u-md-flexGrow1 {
    flex: 1 1 0% !important; /* 1 */
  }

  .u-md-flexGrow2 {
    flex: 2 1 0% !important;
  }

  .u-md-flexGrow3 {
    flex: 3 1 0% !important;
  }

  .u-md-flexGrow4 {
    flex: 4 1 0% !important;
  }

  .u-md-flexGrow5 {
    flex: 5 1 0% !important;
  }

  /**
   * Specify the flex shrink factor, which determines how much the flex item
   * will shrink relative to the rest of the flex items in the flex container.
   */

  .u-md-flexShrink0 {
    flex-shrink: 0 !important;
  }

  .u-md-flexShrink1 {
    flex-shrink: 1 !important;
  }

  .u-md-flexShrink2 {
    flex-shrink: 2 !important;
  }

  .u-md-flexShrink3 {
    flex-shrink: 3 !important;
  }

  .u-md-flexShrink4 {
    flex-shrink: 4 !important;
  }

  .u-md-flexShrink5 {
    flex-shrink: 5 !important;
  }

  /**
   * Aligning with `auto` margins
   * http://www.w3.org/TR/css-flexbox-1/#auto-margins
   */

  .u-md-flexExpand {
    margin: auto !important;
  }

  .u-md-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-md-flexExpandRight {
    margin-right: auto !important;
  }

  .u-md-flexExpandTop {
    margin-top: auto !important;
  }

  .u-md-flexExpandBottom {
    margin-bottom: auto !important;
  }

  /**
   * Basis
   */

  .u-md-flexBasisAuto {
    flex-basis: auto !important;
  }

  .u-md-flexBasis0 {
    flex-basis: 0 !important;
  }

  /*
   * Shorthand
   *
   * Declares all values instead of keywords like 'initial' to work around IE10
   * https://www.w3.org/TR/css-flexbox-1/#flex-common
   *
   * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
   *    This ensures it overrides flex-basis set in other utilities.
   */

  /*
   * Sizes the item based on the width/height properties
   */

  .u-md-flexInitial {
    flex: 0 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  /*
   * Sizes the item based on the width/height properties, but makes them fully
   * flexible, so that they absorb any free space along the main axis.
   */

  .u-md-flexAuto {
    flex: 1 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  /*
   * Sizes the item according to the width/height properties, but makes the flex
   * item fully inflexible. Similar to initial, except that flex items are
   * not allowed to shrink, even in overflow situations.
   */

  .u-md-flexNone {
    flex: 0 0 auto !important;
    flex-basis: auto !important; /* 1 */
  }

}

/** @define utilities */

@media (min-width: 47em) {
  .u-md-hidden {
    display: none !important;
  }

  .u-md-block {
    display: block !important;
  }

  .u-md-inline {
    display: inline !important;
  }

  .u-md-inlineBlock {
    display: inline-block !important;
  }
}

/**
 * @define utilities
 * Size: breakpoint 3 (large)
 */

@media (min-width: 64em) {

  /* Applies to flex container
     ======================================================================== */

  /**
   * Container
   */

  .u-lg-flex {
    display: flex !important;
  }

  .u-lg-flexInline {
    display: inline-flex !important;
  }

  /**
   * Direction: row
   */

  .u-lg-flexRow {
    flex-direction: row !important;
  }

  .u-lg-flexRowReverse {
    flex-direction: row-reverse !important;
  }

  /**
   * Direction: column
   */

  .u-lg-flexCol {
    flex-direction: column !important;
  }

  .u-lg-flexColReverse {
    flex-direction: column-reverse !important;
  }

  /**
   * Wrap
   */

  .u-lg-flexWrap {
    flex-wrap: wrap !important;
  }

  .u-lg-flexNoWrap {
    flex-wrap: nowrap !important;
  }

  .u-lg-flexWrapReverse {
    flex-wrap: wrap-reverse !important;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .u-lg-flexJustifyStart {
    justify-content: flex-start !important;
  }

  .u-lg-flexJustifyEnd {
    justify-content: flex-end !important;
  }

  .u-lg-flexJustifyCenter {
    justify-content: center !important;
  }

  .u-lg-flexJustifyBetween {
    justify-content: space-between !important;
  }

  .u-lg-flexJustifyAround {
    justify-content: space-around !important;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .u-lg-flexAlignItemsStart {
    align-items: flex-start !important;
  }

  .u-lg-flexAlignItemsEnd {
    align-items: flex-end !important;
  }

  .u-lg-flexAlignItemsCenter {
    align-items: center !important;
  }

  .u-lg-flexAlignItemsStretch {
    align-items: stretch !important;
  }

  .u-lg-flexAlignItemsBaseline {
    align-items: baseline !important;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .u-lg-flexAlignContentStart {
    align-content: flex-start !important;
  }

  .u-lg-flexAlignContentEnd {
    align-content: flex-end !important;
  }

  .u-lg-flexAlignContentCenter {
    align-content: center !important;
  }

  .u-lg-flexAlignContentStretch {
    align-content: stretch !important;
  }

  .u-lg-flexAlignContentBetween {
    align-content: space-between !important;
  }

  .u-lg-flexAlignContentAround {
    align-content: space-around !important;
  }

  /* Applies to flex items
     ======================================================================== */

  /**
   * Override default alignment of single item when specified by `align-items`
   */

  .u-lg-flexAlignSelfStart {
    align-self: flex-start !important;
  }

  .u-lg-flexAlignSelfEnd {
    align-self: flex-end !important;
  }

  .u-lg-flexAlignSelfCenter {
    align-self: center !important;
  }

  .u-lg-flexAlignSelfStretch {
    align-self: stretch !important;
  }

  .u-lg-flexAlignSelfBaseline {
    align-self: baseline !important;
  }

  .u-lg-flexAlignSelfAuto {
    align-self: auto !important;
  }

  /**
   * Change order without editing underlying HTML
   */

  .u-lg-flexOrderFirst {
    order: -1 !important;
  }

  .u-lg-flexOrderLast {
    order: 1 !important;
  }

  .u-lg-flexOrderNone {
    order: 0 !important;
  }

  /**
   * Specify the flex grow factor, which determines how much the flex item will
   * grow relative to the rest of the flex items in the flex container.
   *
   * Supports 1-5 proportions
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */

  .u-lg-flexGrow1 {
    flex: 1 1 0% !important; /* 1 */
  }

  .u-lg-flexGrow2 {
    flex: 2 1 0% !important;
  }

  .u-lg-flexGrow3 {
    flex: 3 1 0% !important;
  }

  .u-lg-flexGrow4 {
    flex: 4 1 0% !important;
  }

  .u-lg-flexGrow5 {
    flex: 5 1 0% !important;
  }

  /**
   * Specify the flex shrink factor, which determines how much the flex item
   * will shrink relative to the rest of the flex items in the flex container.
   */

  .u-lg-flexShrink0 {
    flex-shrink: 0 !important;
  }

  .u-lg-flexShrink1 {
    flex-shrink: 1 !important;
  }

  .u-lg-flexShrink2 {
    flex-shrink: 2 !important;
  }

  .u-lg-flexShrink3 {
    flex-shrink: 3 !important;
  }

  .u-lg-flexShrink4 {
    flex-shrink: 4 !important;
  }

  .u-lg-flexShrink5 {
    flex-shrink: 5 !important;
  }

  /**
   * Aligning with `auto` margins
   * http://www.w3.org/TR/css-flexbox-1/#auto-margins
   */

  .u-lg-flexExpand {
    margin: auto !important;
  }

  .u-lg-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-lg-flexExpandRight {
    margin-right: auto !important;
  }

  .u-lg-flexExpandTop {
    margin-top: auto !important;
  }

  .u-lg-flexExpandBottom {
    margin-bottom: auto !important;
  }

  /**
   * Basis
   */

  .u-lg-flexBasisAuto {
    flex-basis: auto !important;
  }

  .u-lg-flexBasis0 {
    flex-basis: 0 !important;
  }

  /*
   * Shorthand
   *
   * Declares all values instead of keywords like 'initial' to work around IE10
   * https://www.w3.org/TR/css-flexbox-1/#flex-common
   *
   * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
   *    This ensures it overrides flex-basis set in other utilities.
   */

  /*
   * Sizes the item based on the width/height properties
   */

  .u-lg-flexInitial {
    flex: 0 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  /*
   * Sizes the item based on the width/height properties, but makes them fully
   * flexible, so that they absorb any free space along the main axis.
   */

  .u-lg-flexAuto {
    flex: 1 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  /*
   * Sizes the item according to the width/height properties, but makes the flex
   * item fully inflexible. Similar to initial, except that flex items are
   * not allowed to shrink, even in overflow situations.
   */

  .u-lg-flexNone {
    flex: 0 0 auto !important;
    flex-basis: auto !important; /* 1 */
  }

}

/** @define utilities */

@media (min-width: 64em) {
  .u-lg-hidden {
    display: none !important;
  }

  .u-lg-block {
    display: block !important;
  }

  .u-lg-inline {
    display: inline !important;
  }

  .u-lg-inlineBlock {
    display: inline-block !important;
  }
}

/**
* Custom classes
*/

.u-flexExpandSides {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u-flexExpandEnds {
  margin-bottom: auto !important;
  margin-top: auto !important;
}

@media print {
  .u-print-hidden {
    display: none !important;
  }

  .u-print-block {
    display: block !important;
  }
}

@media (min-width: 30em) {
  .u-sm-unset {
    display: unset !important;
  }
}

@media (min-width: 47em) {
  .u-md-unset {
    display: unset !important;
  }
}

@media (min-width: 64em) {
  .u-lg-unset {
    display: unset !important;
  }
}

@media print {
  .u-print-unset {
    display: unset !important;
  }
}

@media (min-width: 30em) {
  .u-sm-hiddenVisually {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }
}

@media (min-width: 47em) {
  .u-md-hiddenVisually {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }
}

@media (min-width: 64em) {
  .u-lg-hiddenVisually {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }
}

@media (min-width: 72em) {
  .u-xl-hiddenVisually {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }
}

/** @define utilities */

@media (min-width: 72em) {
  /**
   * Change order without editing underlying HTML. The SUIT CSS
   * utilities have 3 standard breakpoints, this adds additional
   * utilities at the XL breakpoint.
   */

  .u-xl-flexOrderFirst {
    order: -1 !important;
  }

  .u-xl-flexOrderLast {
    order: 1 !important;
  }

  .u-xl-flexOrderNone {
    order: 0 !important;
  }
}

/**
 * Print
 * Note: These are copied directly from SUIT
 * because they're not generated with a mixin.
 * @see https://github.com/suitcss/utils-flex/blob/master/lib/flex.css
 */

@media print {
  .u-print-flex {
    display: flex !important;
  }

  .u-print-flexInline {
    display: inline-flex !important;
  }

  .u-print-flexRow {
    flex-direction: row !important;
  }

  .u-print-flexRowReverse {
    flex-direction: row-reverse !important;
  }

  .u-print-flexCol {
    flex-direction: column !important;
  }

  .u-print-flexColReverse {
    flex-direction: column-reverse !important;
  }

  .u-print-flexWrap {
    flex-wrap: wrap !important;
  }

  .u-print-flexNoWrap {
    flex-wrap: nowrap !important;
  }

  .u-print-flexWrapReverse {
    flex-wrap: wrap-reverse !important;
  }

  .u-print-flexJustifyStart {
    justify-content: flex-start !important;
  }

  .u-print-flexJustifyEnd {
    justify-content: flex-end !important;
  }

  .u-print-flexJustifyCenter {
    justify-content: center !important;
  }

  .u-print-flexJustifyBetween {
    justify-content: space-between !important;
  }

  .u-print-flexJustifyAround {
    justify-content: space-around !important;
  }

  .u-print-flexAlignItemsStart {
    align-items: flex-start !important;
  }

  .u-print-flexAlignItemsEnd {
    align-items: flex-end !important;
  }

  .u-print-flexAlignItemsCenter {
    align-items: center !important;
  }

  .u-print-flexAlignItemsStretch {
    align-items: stretch !important;
  }

  .u-print-flexAlignItemsBaseline {
    align-items: baseline !important;
  }

  .u-print-flexAlignContentStart {
    align-content: flex-start !important;
  }

  .u-print-flexAlignContentEnd {
    align-content: flex-end !important;
  }

  .u-print-flexAlignContentCenter {
    align-content: center !important;
  }

  .u-print-flexAlignContentStretch {
    align-content: stretch !important;
  }

  .u-print-flexAlignContentBetween {
    align-content: space-between !important;
  }

  .u-print-flexAlignContentAround {
    align-content: space-around !important;
  }

  .u-print-flexAlignSelfStart {
    align-self: flex-start !important;
  }

  .u-print-flexAlignSelfEnd {
    align-self: flex-end !important;
  }

  .u-print-flexAlignSelfCenter {
    align-self: center !important;
  }

  .u-print-flexAlignSelfStretch {
    align-self: stretch !important;
  }

  .u-print-flexAlignSelfBaseline {
    align-self: baseline !important;
  }

  .u-print-flexAlignSelfAuto {
    align-self: auto !important;
  }

  .u-print-flexOrderFirst {
    order: -1 !important;
  }

  .u-print-flexOrderLast {
    order: 1 !important;
  }

  .u-print-flexOrderNone {
    order: 0 !important;
  }

  .u-print-flexGrow1 {
    flex: 1 1 0% !important; /* 1 */
  }

  .u-print-flexGrow2 {
    flex: 2 1 0% !important;
  }

  .u-print-flexGrow3 {
    flex: 3 1 0% !important;
  }

  .u-print-flexGrow4 {
    flex: 4 1 0% !important;
  }

  .u-print-flexGrow5 {
    flex: 5 1 0% !important;
  }

  .u-print-flexShrink0 {
    flex-shrink: 0 !important;
  }

  .u-print-flexShrink1 {
    flex-shrink: 1 !important;
  }

  .u-print-flexShrink2 {
    flex-shrink: 2 !important;
  }

  .u-print-flexShrink3 {
    flex-shrink: 3 !important;
  }

  .u-print-flexShrink4 {
    flex-shrink: 4 !important;
  }

  .u-print-flexShrink5 {
    flex-shrink: 5 !important;
  }

  .u-print-flexExpand {
    margin: auto !important;
  }

  .u-print-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-print-flexExpandRight {
    margin-right: auto !important;
  }

  .u-print-flexExpandTop {
    margin-top: auto !important;
  }

  .u-print-flexExpandBottom {
    margin-bottom: auto !important;
  }

  .u-print-flexBasisAuto {
    flex-basis: auto !important;
  }

  .u-print-flexBasis0 {
    flex-basis: 0 !important;
  }

  .u-print-flexInitial {
    flex: 0 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  .u-print-flexAuto {
    flex: 1 1 auto !important;
    flex-basis: auto !important; /* 1 */
  }

  .u-print-flexNone {
    flex: 0 0 auto !important;
    flex-basis: auto !important; /* 1 */
  }
}

/** @define utilities */

/**
 * Print-specific styles
 */

@media print {
  .u-print-desaturate {
    -webkit-filter: grayscale(100%) contrast(110%);
            filter: grayscale(100%) contrast(110%);
  }
}

.u-heightAuto {
  height: auto !important;
}

/** @define utilities */

/**
 * @define utilities
 * Contain floats
 *
 * Make an element expand to contain floated children.
 * Uses pseudo-elements (micro clearfix).
 *
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of the
 *    element.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.u-cf::before,
.u-cf::after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.u-cf::after {
  clear: both;
}

/**
 * New block formatting context
 *
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.

 * N.B. This will clip overflow. Use the alternative method below if this is
 * problematic.
 */

.u-nbfc {
  overflow: hidden !important;
}

/**
 * New block formatting context (alternative)
 *
 * Alternative method when overflow must not be clipped.
 *
 * 1. Create a new block formatting context (NBFC).
 * 2. Avoid shrink-wrap behaviour of table-cell.
 *
 * N.B. This breaks down in some browsers when elements within this element
 * exceed its width.
 */

.u-nbfcAlt {
  display: table-cell !important; /* 1 */
  width: 10000px !important; /* 2 */
}

/**
 * Floats
 */

.u-floatLeft {
  float: left !important;
}

.u-floatRight {
  float: right !important;
}

/**
 * Responsive float classes
 */

@media(min-width: 30em) {
  .u-sm-floatRight {
    float: right !important;
  }

  .u-sm-floatLeft {
    float: left !important;
  }
}

@media(min-width: 47em) {
  .u-md-floatRight {
    float: right !important;
  }

  .u-md-floatLeft {
    float: left !important;
  }
}

@media(min-width: 64em) {
  .u-lg-floatRight {
    float: right !important;
  }

  .u-lg-floatLeft {
    float: left !important;
  }
}

@media print {
  .u-print-floatRight {
    float: right !important;
  }

  .u-print-floatLeft {
    float: left !important;
  }
}

/** @define utilities */

/**
 * @define utilities
 * Clean link
 *
 * A link without any text-decoration at all.
 */

.u-linkClean,
.u-linkClean:hover,
.u-linkClean:focus,
.u-linkClean:active {
  text-decoration: none !important;
}

/**
 * Link complex
 *
 * A common pattern is to have a link with several pieces of text and/or an
 * icon, where only one piece of text should display the underline when the
 * link is the subject of user interaction.
 *
 * Example HTML:
 *
 * <a class="u-linkComplex" href="#">
 *   Link complex
 *   <span class="u-linkComplexTarget">target</span>
 * </a>
 */

.u-linkComplex,
.u-linkComplex:hover,
.u-linkComplex:focus,
.u-linkComplex:active {
  text-decoration: none !important;
}

.u-linkComplex:hover .u-linkComplexTarget,
.u-linkComplex:focus .u-linkComplexTarget,
.u-linkComplex:active .u-linkComplexTarget {
  text-decoration: underline !important;
}

/**
 * Block-level link
 *
 * Combination of traits commonly used in vertical navigation lists.
 */

.u-linkBlock,
.u-linkBlock:hover,
.u-linkBlock:focus,
.u-linkBlock:active {
  display: block !important;
  text-decoration: none !important;
}

/**
 * Override here as needed.
 */

.u-linkUnderline:hover {
  text-decoration: underline !important;
}

/**
 * Print-specific link styles
 */

@media print {
  /**
   * Default back to the text color when printed
   */

  .u-print-linkUrls :link,
  .u-print-linkUrls :visited {
    color: currentColor;
  }

  /**
   * Link URLs should be visible when printed
   */

  /* stylelint-disable-next-line plugin/selector-bem-pattern */
  .u-print-linkUrls a:not([href^="tel:"])::after {
    content: " (" attr(href) ") ";
  }
}

/** @define utilities */

.u-listBulleted {
  list-style-type: disc;
  padding-left: 1rem;
}

.u-listNumbered {
  list-style-type: decimal;
  padding-left: 1rem;
}

.u-listReset {
  list-style: none;
  padding-left: 0;
}

/* stylelint-disable-next-line plugin/selector-bem-pattern */

.u-listMarkersBold > *::marker {
  font-weight: bold;
}

/** @define utilities */

/** @define utilities */

.u-posFit,
.u-posAbsoluteCenter,
.u-posAbsolute {
  position: absolute !important;
}

/**
 * Element will be centered to its nearest relatively-positioned
 * ancestor.
 */

.u-posFixedCenter,
.u-posAbsoluteCenter {
  left: 50% !important;
  top: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
          transform: translate(-50%, -50%) !important;
}

.u-posFit,
.u-posFullScreen {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFullScreen,
.u-posFixedCenter,
.u-posFixed {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* 1 */
  position: fixed !important;
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

.u-posAbsoluteBottomLeft,
.u-posAbsoluteBottomRight,
.u-posAbsoluteTopLeft,
.u-posAbsoluteTopRight {
  position: absolute !important;
}

.u-posAbsoluteBottomLeft {
  bottom: 0 !important;
  left: 0 !important;
}

.u-posAbsoluteBottomRight {
  bottom: 0 !important;
  right: 0 !important;
}

.u-posAbsoluteTopLeft {
  left: 0 !important;
  top: 0 !important;
}

.u-posAbsoluteTopRight {
  right: 0 !important;
  top: 0 !important;
}

.u-posAbsoluteBottom {
  bottom: 0 !important;
  position: absolute !important;
}

.u-posAbsoluteLeft {
  left: 0 !important;
  position: absolute !important;
}

.u-posAbsoluteRight {
  position: absolute !important;
  right: 0 !important;
}

.u-posAbsoluteTop {
  position: absolute !important;
  top: 0 !important;
}

/** @define utilities */

/**
 * @define utilities
 * Sizing utilities
 */

/* Proportional widths
   ========================================================================== */

/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 *    http://git.io/vllMD
 */

.u-size1of12 {
  flex-basis: auto !important;
  width: 8.33333% !important;
}

.u-size1of10 {
  flex-basis: auto !important;
  width: 10% !important;
}

.u-size1of8 {
  flex-basis: auto !important;
  width: 12.5% !important;
}

.u-size1of6,
.u-size2of12 {
  flex-basis: auto !important;
  width: 16.66667% !important;
}

.u-size1of5,
.u-size2of10 {
  flex-basis: auto !important;
  width: 20% !important;
}

.u-size1of4,
.u-size2of8,
.u-size3of12 {
  flex-basis: auto !important;
  width: 25% !important;
}

.u-size3of10 {
  flex-basis: auto !important;
  width: 30% !important;
}

.u-size1of3,
.u-size2of6,
.u-size4of12 {
  flex-basis: auto !important;
  width: 33.33333% !important;
}

.u-size3of8 {
  flex-basis: auto !important;
  width: 37.5% !important;
}

.u-size2of5,
.u-size4of10 {
  flex-basis: auto !important;
  width: 40% !important;
}

.u-size5of12 {
  flex-basis: auto !important;
  width: 41.66667% !important;
}

.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  flex-basis: auto !important;
  width: 50% !important;
}

.u-size7of12 {
  flex-basis: auto !important;
  width: 58.33333% !important;
}

.u-size3of5,
.u-size6of10 {
  flex-basis: auto !important;
  width: 60% !important;
}

.u-size5of8 {
  flex-basis: auto !important;
  width: 62.5% !important;
}

.u-size2of3,
.u-size4of6,
.u-size8of12 {
  flex-basis: auto !important;
  width: 66.66667% !important;
}

.u-size7of10 {
  flex-basis: auto !important;
  width: 70% !important;
}

.u-size3of4,
.u-size6of8,
.u-size9of12 {
  flex-basis: auto !important;
  width: 75% !important;
}

.u-size4of5,
.u-size8of10 {
  flex-basis: auto !important;
  width: 80% !important;
}

.u-size5of6,
.u-size10of12 {
  flex-basis: auto !important;
  width: 83.33333% !important;
}

.u-size7of8 {
  flex-basis: auto !important;
  width: 87.5% !important;
}

.u-size9of10 {
  flex-basis: auto !important;
  width: 90% !important;
}

.u-size11of12 {
  flex-basis: auto !important;
  width: 91.66667% !important;
}

/* Intrinsic widths
   ========================================================================== */

/**
 * Make an element shrink wrap its content.
 */

.u-sizeFit {
  flex-basis: auto !important;
}

/**
 * Make an element fill the remaining space.
 *
 * 1. Be explicit to work around IE10 bug with shorthand flex
 *    http://git.io/vllC7
 * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
 *    http://git.io/vllMt
 */

.u-sizeFill {
  flex: 1 1 0% !important; /* 1 */
  flex-basis: 0% !important; /* 2 */
}

/**
 * An alternative method to make an element fill the remaining space.
 * Distributes space based on the initial width and height of the element
 *
 * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
 */

.u-sizeFillAlt {
  flex: 1 1 auto !important;
  flex-basis: auto !important;
}

/**
 * Make an element the width of its parent.
 */

.u-sizeFull {
  width: 100% !important;
}

/**
 * @define utilities
 * Size: breakpoint 1 (small)
 */

@media (min-width: 30em) {

  /* Proportional widths: breakpoint 1 (small)
     ======================================================================== */

  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */

  .u-sm-size1of12 {
    flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-sm-size1of10 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-sm-size1of8 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-sm-size1of6,
  .u-sm-size2of12 {
    flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-sm-size1of5,
  .u-sm-size2of10 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-sm-size1of4,
  .u-sm-size2of8,
  .u-sm-size3of12 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-sm-size3of10 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-sm-size1of3,
  .u-sm-size2of6,
  .u-sm-size4of12 {
    flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-sm-size3of8 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-sm-size2of5,
  .u-sm-size4of10 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-sm-size5of12 {
    flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-sm-size1of2,
  .u-sm-size2of4,
  .u-sm-size3of6,
  .u-sm-size4of8,
  .u-sm-size5of10,
  .u-sm-size6of12 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-sm-size7of12 {
    flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-sm-size3of5,
  .u-sm-size6of10 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-sm-size5of8 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-sm-size2of3,
  .u-sm-size4of6,
  .u-sm-size8of12 {
    flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-sm-size7of10 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-sm-size3of4,
  .u-sm-size6of8,
  .u-sm-size9of12 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-sm-size4of5,
  .u-sm-size8of10 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-sm-size5of6,
  .u-sm-size10of12 {
    flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-sm-size7of8 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-sm-size9of10 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-sm-size11of12 {
    flex-basis: auto !important;
    width: 91.66667% !important;
  }

  /* Intrinsic widths
     ======================================================================== */

  /**
   * Make an element shrink wrap its content.
   */

  .u-sm-sizeFit {
    flex-basis: auto !important;
    width: auto !important;
  }

  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */

  .u-sm-sizeFill {
    flex: 1 1 0% !important; /* 1 */
    flex-basis: 0% !important; /* 2 */
  }

  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */

  .u-sm-sizeFillAlt {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
  }

  /**
   * Make an element the width of its parent.
   */

  .u-sm-sizeFull {
    width: 100% !important;
  }

}

/**
 * @define utilities
 * Size: breakpoint 2 (medium)
 */

@media (min-width: 47em) {

  /* Proportional widths: breakpoint 2 (medium)
     ======================================================================== */

  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */

  /* postcss-bem-linter: ignore */

  .u-md-size1of12 {
    flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-md-size1of10 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-md-size1of8 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-md-size1of6,
  .u-md-size2of12 {
    flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-md-size1of5,
  .u-md-size2of10 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-md-size1of4,
  .u-md-size2of8,
  .u-md-size3of12 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-md-size3of10 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-md-size1of3,
  .u-md-size2of6,
  .u-md-size4of12 {
    flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-md-size3of8 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-md-size2of5,
  .u-md-size4of10 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-md-size5of12 {
    flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-md-size1of2,
  .u-md-size2of4,
  .u-md-size3of6,
  .u-md-size4of8,
  .u-md-size5of10,
  .u-md-size6of12 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-md-size7of12 {
    flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-md-size3of5,
  .u-md-size6of10 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-md-size5of8 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-md-size2of3,
  .u-md-size4of6,
  .u-md-size8of12 {
    flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-md-size7of10 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-md-size3of4,
  .u-md-size6of8,
  .u-md-size9of12 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-md-size4of5,
  .u-md-size8of10 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-md-size5of6,
  .u-md-size10of12 {
    flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-md-size7of8 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-md-size9of10 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-md-size11of12 {
    flex-basis: auto !important;
    width: 91.66667% !important;
  }

  /* Intrinsic widths
     ======================================================================== */

  /**
   * Make an element shrink wrap its content.
   */

  .u-md-sizeFit {
    flex-basis: auto !important;
    width: auto !important;
  }

  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */

  .u-md-sizeFill {
    flex: 1 1 0% !important; /* 1 */
    flex-basis: 0% !important; /* 2 */
  }

  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */

  .u-md-sizeFillAlt {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
  }

  /**
   * Make an element the width of its parent.
   */

  .u-md-sizeFull {
    width: 100% !important;
  }

}

/**
 * @define utilities
 * Size: breakpoint 3 (large)
 */

@media (min-width: 64em) {

  /* Proportional widths: breakpoint 3 (large)
     ======================================================================== */

  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */

  .u-lg-size1of12 {
    flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-lg-size1of10 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-lg-size1of8 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-lg-size1of6,
  .u-lg-size2of12 {
    flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-lg-size1of5,
  .u-lg-size2of10 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-lg-size1of4,
  .u-lg-size2of8,
  .u-lg-size3of12 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-lg-size3of10 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-lg-size1of3,
  .u-lg-size2of6,
  .u-lg-size4of12 {
    flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-lg-size3of8 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-lg-size2of5,
  .u-lg-size4of10 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-lg-size5of12 {
    flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-lg-size1of2,
  .u-lg-size2of4,
  .u-lg-size3of6,
  .u-lg-size4of8,
  .u-lg-size5of10,
  .u-lg-size6of12 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-lg-size7of12 {
    flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-lg-size3of5,
  .u-lg-size6of10 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-lg-size5of8 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-lg-size2of3,
  .u-lg-size4of6,
  .u-lg-size8of12 {
    flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-lg-size7of10 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-lg-size3of4,
  .u-lg-size6of8,
  .u-lg-size9of12 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-lg-size4of5,
  .u-lg-size8of10 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-lg-size5of6,
  .u-lg-size10of12 {
    flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-lg-size7of8 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-lg-size9of10 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-lg-size11of12 {
    flex-basis: auto !important;
    width: 91.66667% !important;
  }

  /* Intrinsic widths
     ======================================================================== */

  /**
   * Make an element shrink wrap its content.
   */

  .u-lg-sizeFit {
    flex-basis: auto !important;
    width: auto !important;
  }

  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */

  .u-lg-sizeFill {
    flex: 1 1 0% !important; /* 1 */
    flex-basis: 0% !important; /* 2 */
  }

  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */

  .u-lg-sizeFillAlt {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
  }

  /**
   * Make an element the width of its parent.
   */

  .u-lg-sizeFull {
    width: 100% !important;
  }

}

/**
 * Additional size utility that makes an element revert to its intrinsic width
 */

.u-sizeAuto {
  flex-basis: auto !important;
  width: auto !important;
}

@media print {
  .u-print-sizeAuto {
    flex-basis: auto !important;
    width: auto !important;
  }
}

/**
 * Special size utility for weekly calendars
 */

.u-size1of7 {
  flex-basis: auto !important;
  width: 14.28571% !important;
}

@media (min-width: 30em) {
  .u-sm-sizeAuto {
    flex-basis: auto !important;
    width: auto !important;
  }

  .u-sm-size1of7 {
    flex-basis: auto !important;
    width: 14.28571% !important;
  }
}

@media (min-width: 47em) {
  .u-md-sizeAuto {
    flex-basis: auto !important;
    width: auto !important;
  }

  .u-md-size1of7 {
    flex-basis: auto !important;
    width: 14.28571% !important;
  }
}

@media (min-width: 64em) {
  .u-lg-sizeAuto {
    flex-basis: auto !important;
    width: auto !important;
  }

  .u-lg-size1of7 {
    flex-basis: auto !important;
    width: 14.28571% !important;
  }
}

@media (min-width: 72em) {
  .u-xl-sizeAuto {
    flex-basis: auto !important;
    width: auto !important;
  }

  .u-xl-size1of7 {
    flex-basis: auto !important;
    width: 14.28571% !important;
  }
}

/**
 * Fixed sizing based on modular scale
 */

.u-sizeMs1 {
  flex-basis: auto !important;
  width: 1.125rem !important;
}

.u-sizeMs2 {
  flex-basis: auto !important;
  width: 1.26563rem !important;
}

.u-sizeMs3 {
  flex-basis: auto !important;
  width: 1.42383rem !important;
}

.u-sizeMs4 {
  flex-basis: auto !important;
  width: 1.60181rem !important;
}

.u-sizeMs5 {
  flex-basis: auto !important;
  width: 1.80203rem !important;
}

.u-sizeMs6 {
  flex-basis: auto !important;
  width: 2.02729rem !important;
}

.u-sizeMs7 {
  flex-basis: auto !important;
  width: 2.2807rem !important;
}

.u-sizeMs8 {
  flex-basis: auto !important;
  width: 2.56578rem !important;
}

.u-sizeMs9 {
  flex-basis: auto !important;
  width: 2.88651rem !important;
}

.u-sizeMs10 {
  flex-basis: auto !important;
  width: 3.24732rem !important;
}

.u-sizeMs11 {
  flex-basis: auto !important;
  width: 3.65324rem !important;
}

.u-sizeMs12 {
  flex-basis: auto !important;
  width: 4.10989rem !important;
}

.u-sizeMs13 {
  flex-basis: auto !important;
  width: 4.62363rem !important;
}

.u-sizeMs14 {
  flex-basis: auto !important;
  width: 5.20158rem !important;
}

/**
 * Print
 * Note: These are copied directly from SUIT,
 * because they're not generated with a mixin.
 * @see https://github.com/suitcss/utils-size/blob/master/lib/size.css
 */

@media print {
  .u-print-size1of12 {
    flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-print-size1of10 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-print-size1of8 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-print-size1of6,
  .u-print-size2of12 {
    flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-print-size1of5,
  .u-print-size2of10 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-print-size1of4,
  .u-print-size2of8,
  .u-print-size3of12 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-print-size3of10 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-print-size1of3,
  .u-print-size2of6,
  .u-print-size4of12 {
    flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-print-size3of8 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-print-size2of5,
  .u-print-size4of10 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-print-size5of12 {
    flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-print-size1of2,
  .u-print-size2of4,
  .u-print-size3of6,
  .u-print-size4of8,
  .u-print-size5of10,
  .u-print-size6of12 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-print-size7of12 {
    flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-print-size3of5,
  .u-print-size6of10 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-print-size5of8 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-print-size2of3,
  .u-print-size4of6,
  .u-print-size8of12 {
    flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-print-size7of10 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-print-size3of4,
  .u-print-size6of8,
  .u-print-size9of12 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-print-size4of5,
  .u-print-size8of10 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-print-size5of6,
  .u-print-size10of12 {
    flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-print-size7of8 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-print-size9of10 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-print-size11of12 {
    flex-basis: auto !important;
    width: 91.66667% !important;
  }

  .u-print-sizeFit {
    flex-basis: auto !important;
  }

  .u-print-sizeFill {
    flex: 1 1 0% !important; /* 1 */
    flex-basis: 0% !important; /* 2 */
  }

  .u-print-sizeFillAlt {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
  }

  .u-print-sizeFull {
    width: 100% !important;
  }
}

/** @define utilities */

/**
 * Custom Mixins for Spacing
 *
 * These definitions do not produce any generated rules, but provide a base set
 * of templates for creating sizing utilities such as .u-space1 (to increase
 * margin) and .u-pad-2 (to decrease padding).
 *
 * `makeSingleSpaceUtilities` may be extended with additional sizes before
 * including the mixins.
 *
 * Example usage, with postcss-custom-media:
 *
 * @media screen and (--large-desktop) {
 *   @mixin makeSingleSpaceUtilities large-;
 * }
 *
 */

/* stylelint-disable plugin/selector-bem-pattern */

/* stylelint-enable */

/* stylelint-disable plugin/selector-bem-pattern */

/* stylelint-enable */

.u-space09,
  .u-spaceEnds09,
  .u-spaceTop09 {
    margin-top: 0.34644rem !important;
  }

.u-space09,
  .u-spaceEnds09,
  .u-spaceBottom09 {
    margin-bottom: 0.34644rem !important;
  }

.u-space09,
  .u-spaceSides09,
  .u-spaceLeft09 {
    margin-left: 0.34644rem !important;
  }

.u-space09,
  .u-spaceSides09,
  .u-spaceRight09 {
    margin-right: 0.34644rem !important;
  }

.u-pad09,
  .u-padEnds09,
  .u-padTop09 {
    padding-top: 0.34644rem !important;
  }

.u-pad09,
  .u-padEnds09,
  .u-padBottom09 {
    padding-bottom: 0.34644rem !important;
  }

.u-pad09,
  .u-padSides09,
  .u-padLeft09 {
    padding-left: 0.34644rem !important;
  }

.u-pad09,
  .u-padSides09,
  .u-padRight09 {
    padding-right: 0.34644rem !important;
  }

.u-space08,
  .u-spaceEnds08,
  .u-spaceTop08 {
    margin-top: 0.38974rem !important;
  }

.u-space08,
  .u-spaceEnds08,
  .u-spaceBottom08 {
    margin-bottom: 0.38974rem !important;
  }

.u-space08,
  .u-spaceSides08,
  .u-spaceLeft08 {
    margin-left: 0.38974rem !important;
  }

.u-space08,
  .u-spaceSides08,
  .u-spaceRight08 {
    margin-right: 0.38974rem !important;
  }

.u-pad08,
  .u-padEnds08,
  .u-padTop08 {
    padding-top: 0.38974rem !important;
  }

.u-pad08,
  .u-padEnds08,
  .u-padBottom08 {
    padding-bottom: 0.38974rem !important;
  }

.u-pad08,
  .u-padSides08,
  .u-padLeft08 {
    padding-left: 0.38974rem !important;
  }

.u-pad08,
  .u-padSides08,
  .u-padRight08 {
    padding-right: 0.38974rem !important;
  }

.u-space07,
  .u-spaceEnds07,
  .u-spaceTop07 {
    margin-top: 0.43846rem !important;
  }

.u-space07,
  .u-spaceEnds07,
  .u-spaceBottom07 {
    margin-bottom: 0.43846rem !important;
  }

.u-space07,
  .u-spaceSides07,
  .u-spaceLeft07 {
    margin-left: 0.43846rem !important;
  }

.u-space07,
  .u-spaceSides07,
  .u-spaceRight07 {
    margin-right: 0.43846rem !important;
  }

.u-pad07,
  .u-padEnds07,
  .u-padTop07 {
    padding-top: 0.43846rem !important;
  }

.u-pad07,
  .u-padEnds07,
  .u-padBottom07 {
    padding-bottom: 0.43846rem !important;
  }

.u-pad07,
  .u-padSides07,
  .u-padLeft07 {
    padding-left: 0.43846rem !important;
  }

.u-pad07,
  .u-padSides07,
  .u-padRight07 {
    padding-right: 0.43846rem !important;
  }

.u-space06,
  .u-spaceEnds06,
  .u-spaceTop06 {
    margin-top: 0.49327rem !important;
  }

.u-space06,
  .u-spaceEnds06,
  .u-spaceBottom06 {
    margin-bottom: 0.49327rem !important;
  }

.u-space06,
  .u-spaceSides06,
  .u-spaceLeft06 {
    margin-left: 0.49327rem !important;
  }

.u-space06,
  .u-spaceSides06,
  .u-spaceRight06 {
    margin-right: 0.49327rem !important;
  }

.u-pad06,
  .u-padEnds06,
  .u-padTop06 {
    padding-top: 0.49327rem !important;
  }

.u-pad06,
  .u-padEnds06,
  .u-padBottom06 {
    padding-bottom: 0.49327rem !important;
  }

.u-pad06,
  .u-padSides06,
  .u-padLeft06 {
    padding-left: 0.49327rem !important;
  }

.u-pad06,
  .u-padSides06,
  .u-padRight06 {
    padding-right: 0.49327rem !important;
  }

.u-space05,
  .u-spaceEnds05,
  .u-spaceTop05 {
    margin-top: 0.55493rem !important;
  }

.u-space05,
  .u-spaceEnds05,
  .u-spaceBottom05 {
    margin-bottom: 0.55493rem !important;
  }

.u-space05,
  .u-spaceSides05,
  .u-spaceLeft05 {
    margin-left: 0.55493rem !important;
  }

.u-space05,
  .u-spaceSides05,
  .u-spaceRight05 {
    margin-right: 0.55493rem !important;
  }

.u-pad05,
  .u-padEnds05,
  .u-padTop05 {
    padding-top: 0.55493rem !important;
  }

.u-pad05,
  .u-padEnds05,
  .u-padBottom05 {
    padding-bottom: 0.55493rem !important;
  }

.u-pad05,
  .u-padSides05,
  .u-padLeft05 {
    padding-left: 0.55493rem !important;
  }

.u-pad05,
  .u-padSides05,
  .u-padRight05 {
    padding-right: 0.55493rem !important;
  }

.u-space04,
  .u-spaceEnds04,
  .u-spaceTop04 {
    margin-top: 0.6243rem !important;
  }

.u-space04,
  .u-spaceEnds04,
  .u-spaceBottom04 {
    margin-bottom: 0.6243rem !important;
  }

.u-space04,
  .u-spaceSides04,
  .u-spaceLeft04 {
    margin-left: 0.6243rem !important;
  }

.u-space04,
  .u-spaceSides04,
  .u-spaceRight04 {
    margin-right: 0.6243rem !important;
  }

.u-pad04,
  .u-padEnds04,
  .u-padTop04 {
    padding-top: 0.6243rem !important;
  }

.u-pad04,
  .u-padEnds04,
  .u-padBottom04 {
    padding-bottom: 0.6243rem !important;
  }

.u-pad04,
  .u-padSides04,
  .u-padLeft04 {
    padding-left: 0.6243rem !important;
  }

.u-pad04,
  .u-padSides04,
  .u-padRight04 {
    padding-right: 0.6243rem !important;
  }

.u-space03,
  .u-spaceEnds03,
  .u-spaceTop03 {
    margin-top: 0.70233rem !important;
  }

.u-space03,
  .u-spaceEnds03,
  .u-spaceBottom03 {
    margin-bottom: 0.70233rem !important;
  }

.u-space03,
  .u-spaceSides03,
  .u-spaceLeft03 {
    margin-left: 0.70233rem !important;
  }

.u-space03,
  .u-spaceSides03,
  .u-spaceRight03 {
    margin-right: 0.70233rem !important;
  }

.u-pad03,
  .u-padEnds03,
  .u-padTop03 {
    padding-top: 0.70233rem !important;
  }

.u-pad03,
  .u-padEnds03,
  .u-padBottom03 {
    padding-bottom: 0.70233rem !important;
  }

.u-pad03,
  .u-padSides03,
  .u-padLeft03 {
    padding-left: 0.70233rem !important;
  }

.u-pad03,
  .u-padSides03,
  .u-padRight03 {
    padding-right: 0.70233rem !important;
  }

.u-space02,
  .u-spaceEnds02,
  .u-spaceTop02 {
    margin-top: 0.79012rem !important;
  }

.u-space02,
  .u-spaceEnds02,
  .u-spaceBottom02 {
    margin-bottom: 0.79012rem !important;
  }

.u-space02,
  .u-spaceSides02,
  .u-spaceLeft02 {
    margin-left: 0.79012rem !important;
  }

.u-space02,
  .u-spaceSides02,
  .u-spaceRight02 {
    margin-right: 0.79012rem !important;
  }

.u-pad02,
  .u-padEnds02,
  .u-padTop02 {
    padding-top: 0.79012rem !important;
  }

.u-pad02,
  .u-padEnds02,
  .u-padBottom02 {
    padding-bottom: 0.79012rem !important;
  }

.u-pad02,
  .u-padSides02,
  .u-padLeft02 {
    padding-left: 0.79012rem !important;
  }

.u-pad02,
  .u-padSides02,
  .u-padRight02 {
    padding-right: 0.79012rem !important;
  }

.u-space01,
  .u-spaceEnds01,
  .u-spaceTop01 {
    margin-top: 0.88889rem !important;
  }

.u-space01,
  .u-spaceEnds01,
  .u-spaceBottom01 {
    margin-bottom: 0.88889rem !important;
  }

.u-space01,
  .u-spaceSides01,
  .u-spaceLeft01 {
    margin-left: 0.88889rem !important;
  }

.u-space01,
  .u-spaceSides01,
  .u-spaceRight01 {
    margin-right: 0.88889rem !important;
  }

.u-pad01,
  .u-padEnds01,
  .u-padTop01 {
    padding-top: 0.88889rem !important;
  }

.u-pad01,
  .u-padEnds01,
  .u-padBottom01 {
    padding-bottom: 0.88889rem !important;
  }

.u-pad01,
  .u-padSides01,
  .u-padLeft01 {
    padding-left: 0.88889rem !important;
  }

.u-pad01,
  .u-padSides01,
  .u-padRight01 {
    padding-right: 0.88889rem !important;
  }

.u-space,
  .u-spaceEnds,
  .u-spaceTop {
    margin-top: 1rem !important;
  }

.u-space,
  .u-spaceEnds,
  .u-spaceBottom {
    margin-bottom: 1rem !important;
  }

.u-space,
  .u-spaceSides,
  .u-spaceLeft {
    margin-left: 1rem !important;
  }

.u-space,
  .u-spaceSides,
  .u-spaceRight {
    margin-right: 1rem !important;
  }

.u-pad,
  .u-padEnds,
  .u-padTop {
    padding-top: 1rem !important;
  }

.u-pad,
  .u-padEnds,
  .u-padBottom {
    padding-bottom: 1rem !important;
  }

.u-pad,
  .u-padSides,
  .u-padLeft {
    padding-left: 1rem !important;
  }

.u-pad,
  .u-padSides,
  .u-padRight {
    padding-right: 1rem !important;
  }

.u-space1,
  .u-spaceEnds1,
  .u-spaceTop1 {
    margin-top: 1.125rem !important;
  }

.u-space1,
  .u-spaceEnds1,
  .u-spaceBottom1 {
    margin-bottom: 1.125rem !important;
  }

.u-space1,
  .u-spaceSides1,
  .u-spaceLeft1 {
    margin-left: 1.125rem !important;
  }

.u-space1,
  .u-spaceSides1,
  .u-spaceRight1 {
    margin-right: 1.125rem !important;
  }

.u-pad1,
  .u-padEnds1,
  .u-padTop1 {
    padding-top: 1.125rem !important;
  }

.u-pad1,
  .u-padEnds1,
  .u-padBottom1 {
    padding-bottom: 1.125rem !important;
  }

.u-pad1,
  .u-padSides1,
  .u-padLeft1 {
    padding-left: 1.125rem !important;
  }

.u-pad1,
  .u-padSides1,
  .u-padRight1 {
    padding-right: 1.125rem !important;
  }

.u-space2,
  .u-spaceEnds2,
  .u-spaceTop2 {
    margin-top: 1.26563rem !important;
  }

.u-space2,
  .u-spaceEnds2,
  .u-spaceBottom2 {
    margin-bottom: 1.26563rem !important;
  }

.u-space2,
  .u-spaceSides2,
  .u-spaceLeft2 {
    margin-left: 1.26563rem !important;
  }

.u-space2,
  .u-spaceSides2,
  .u-spaceRight2 {
    margin-right: 1.26563rem !important;
  }

.u-pad2,
  .u-padEnds2,
  .u-padTop2 {
    padding-top: 1.26563rem !important;
  }

.u-pad2,
  .u-padEnds2,
  .u-padBottom2 {
    padding-bottom: 1.26563rem !important;
  }

.u-pad2,
  .u-padSides2,
  .u-padLeft2 {
    padding-left: 1.26563rem !important;
  }

.u-pad2,
  .u-padSides2,
  .u-padRight2 {
    padding-right: 1.26563rem !important;
  }

.u-space3,
  .u-spaceEnds3,
  .u-spaceTop3 {
    margin-top: 1.42383rem !important;
  }

.u-space3,
  .u-spaceEnds3,
  .u-spaceBottom3 {
    margin-bottom: 1.42383rem !important;
  }

.u-space3,
  .u-spaceSides3,
  .u-spaceLeft3 {
    margin-left: 1.42383rem !important;
  }

.u-space3,
  .u-spaceSides3,
  .u-spaceRight3 {
    margin-right: 1.42383rem !important;
  }

.u-pad3,
  .u-padEnds3,
  .u-padTop3 {
    padding-top: 1.42383rem !important;
  }

.u-pad3,
  .u-padEnds3,
  .u-padBottom3 {
    padding-bottom: 1.42383rem !important;
  }

.u-pad3,
  .u-padSides3,
  .u-padLeft3 {
    padding-left: 1.42383rem !important;
  }

.u-pad3,
  .u-padSides3,
  .u-padRight3 {
    padding-right: 1.42383rem !important;
  }

.u-space4,
  .u-spaceEnds4,
  .u-spaceTop4 {
    margin-top: 1.60181rem !important;
  }

.u-space4,
  .u-spaceEnds4,
  .u-spaceBottom4 {
    margin-bottom: 1.60181rem !important;
  }

.u-space4,
  .u-spaceSides4,
  .u-spaceLeft4 {
    margin-left: 1.60181rem !important;
  }

.u-space4,
  .u-spaceSides4,
  .u-spaceRight4 {
    margin-right: 1.60181rem !important;
  }

.u-pad4,
  .u-padEnds4,
  .u-padTop4 {
    padding-top: 1.60181rem !important;
  }

.u-pad4,
  .u-padEnds4,
  .u-padBottom4 {
    padding-bottom: 1.60181rem !important;
  }

.u-pad4,
  .u-padSides4,
  .u-padLeft4 {
    padding-left: 1.60181rem !important;
  }

.u-pad4,
  .u-padSides4,
  .u-padRight4 {
    padding-right: 1.60181rem !important;
  }

.u-space5,
  .u-spaceEnds5,
  .u-spaceTop5 {
    margin-top: 1.80203rem !important;
  }

.u-space5,
  .u-spaceEnds5,
  .u-spaceBottom5 {
    margin-bottom: 1.80203rem !important;
  }

.u-space5,
  .u-spaceSides5,
  .u-spaceLeft5 {
    margin-left: 1.80203rem !important;
  }

.u-space5,
  .u-spaceSides5,
  .u-spaceRight5 {
    margin-right: 1.80203rem !important;
  }

.u-pad5,
  .u-padEnds5,
  .u-padTop5 {
    padding-top: 1.80203rem !important;
  }

.u-pad5,
  .u-padEnds5,
  .u-padBottom5 {
    padding-bottom: 1.80203rem !important;
  }

.u-pad5,
  .u-padSides5,
  .u-padLeft5 {
    padding-left: 1.80203rem !important;
  }

.u-pad5,
  .u-padSides5,
  .u-padRight5 {
    padding-right: 1.80203rem !important;
  }

.u-space6,
  .u-spaceEnds6,
  .u-spaceTop6 {
    margin-top: 2.02729rem !important;
  }

.u-space6,
  .u-spaceEnds6,
  .u-spaceBottom6 {
    margin-bottom: 2.02729rem !important;
  }

.u-space6,
  .u-spaceSides6,
  .u-spaceLeft6 {
    margin-left: 2.02729rem !important;
  }

.u-space6,
  .u-spaceSides6,
  .u-spaceRight6 {
    margin-right: 2.02729rem !important;
  }

.u-pad6,
  .u-padEnds6,
  .u-padTop6 {
    padding-top: 2.02729rem !important;
  }

.u-pad6,
  .u-padEnds6,
  .u-padBottom6 {
    padding-bottom: 2.02729rem !important;
  }

.u-pad6,
  .u-padSides6,
  .u-padLeft6 {
    padding-left: 2.02729rem !important;
  }

.u-pad6,
  .u-padSides6,
  .u-padRight6 {
    padding-right: 2.02729rem !important;
  }

.u-space7,
  .u-spaceEnds7,
  .u-spaceTop7 {
    margin-top: 2.2807rem !important;
  }

.u-space7,
  .u-spaceEnds7,
  .u-spaceBottom7 {
    margin-bottom: 2.2807rem !important;
  }

.u-space7,
  .u-spaceSides7,
  .u-spaceLeft7 {
    margin-left: 2.2807rem !important;
  }

.u-space7,
  .u-spaceSides7,
  .u-spaceRight7 {
    margin-right: 2.2807rem !important;
  }

.u-pad7,
  .u-padEnds7,
  .u-padTop7 {
    padding-top: 2.2807rem !important;
  }

.u-pad7,
  .u-padEnds7,
  .u-padBottom7 {
    padding-bottom: 2.2807rem !important;
  }

.u-pad7,
  .u-padSides7,
  .u-padLeft7 {
    padding-left: 2.2807rem !important;
  }

.u-pad7,
  .u-padSides7,
  .u-padRight7 {
    padding-right: 2.2807rem !important;
  }

.u-space8,
  .u-spaceEnds8,
  .u-spaceTop8 {
    margin-top: 2.56578rem !important;
  }

.u-space8,
  .u-spaceEnds8,
  .u-spaceBottom8 {
    margin-bottom: 2.56578rem !important;
  }

.u-space8,
  .u-spaceSides8,
  .u-spaceLeft8 {
    margin-left: 2.56578rem !important;
  }

.u-space8,
  .u-spaceSides8,
  .u-spaceRight8 {
    margin-right: 2.56578rem !important;
  }

.u-pad8,
  .u-padEnds8,
  .u-padTop8 {
    padding-top: 2.56578rem !important;
  }

.u-pad8,
  .u-padEnds8,
  .u-padBottom8 {
    padding-bottom: 2.56578rem !important;
  }

.u-pad8,
  .u-padSides8,
  .u-padLeft8 {
    padding-left: 2.56578rem !important;
  }

.u-pad8,
  .u-padSides8,
  .u-padRight8 {
    padding-right: 2.56578rem !important;
  }

.u-space9,
  .u-spaceEnds9,
  .u-spaceTop9 {
    margin-top: 2.88651rem !important;
  }

.u-space9,
  .u-spaceEnds9,
  .u-spaceBottom9 {
    margin-bottom: 2.88651rem !important;
  }

.u-space9,
  .u-spaceSides9,
  .u-spaceLeft9 {
    margin-left: 2.88651rem !important;
  }

.u-space9,
  .u-spaceSides9,
  .u-spaceRight9 {
    margin-right: 2.88651rem !important;
  }

.u-pad9,
  .u-padEnds9,
  .u-padTop9 {
    padding-top: 2.88651rem !important;
  }

.u-pad9,
  .u-padEnds9,
  .u-padBottom9 {
    padding-bottom: 2.88651rem !important;
  }

.u-pad9,
  .u-padSides9,
  .u-padLeft9 {
    padding-left: 2.88651rem !important;
  }

.u-pad9,
  .u-padSides9,
  .u-padRight9 {
    padding-right: 2.88651rem !important;
  }

.u-space10,
  .u-spaceEnds10,
  .u-spaceTop10 {
    margin-top: 3.24732rem !important;
  }

.u-space10,
  .u-spaceEnds10,
  .u-spaceBottom10 {
    margin-bottom: 3.24732rem !important;
  }

.u-space10,
  .u-spaceSides10,
  .u-spaceLeft10 {
    margin-left: 3.24732rem !important;
  }

.u-space10,
  .u-spaceSides10,
  .u-spaceRight10 {
    margin-right: 3.24732rem !important;
  }

.u-pad10,
  .u-padEnds10,
  .u-padTop10 {
    padding-top: 3.24732rem !important;
  }

.u-pad10,
  .u-padEnds10,
  .u-padBottom10 {
    padding-bottom: 3.24732rem !important;
  }

.u-pad10,
  .u-padSides10,
  .u-padLeft10 {
    padding-left: 3.24732rem !important;
  }

.u-pad10,
  .u-padSides10,
  .u-padRight10 {
    padding-right: 3.24732rem !important;
  }

.u-space11,
  .u-spaceEnds11,
  .u-spaceTop11 {
    margin-top: 3.65324rem !important;
  }

.u-space11,
  .u-spaceEnds11,
  .u-spaceBottom11 {
    margin-bottom: 3.65324rem !important;
  }

.u-space11,
  .u-spaceSides11,
  .u-spaceLeft11 {
    margin-left: 3.65324rem !important;
  }

.u-space11,
  .u-spaceSides11,
  .u-spaceRight11 {
    margin-right: 3.65324rem !important;
  }

.u-pad11,
  .u-padEnds11,
  .u-padTop11 {
    padding-top: 3.65324rem !important;
  }

.u-pad11,
  .u-padEnds11,
  .u-padBottom11 {
    padding-bottom: 3.65324rem !important;
  }

.u-pad11,
  .u-padSides11,
  .u-padLeft11 {
    padding-left: 3.65324rem !important;
  }

.u-pad11,
  .u-padSides11,
  .u-padRight11 {
    padding-right: 3.65324rem !important;
  }

.u-space12,
  .u-spaceEnds12,
  .u-spaceTop12 {
    margin-top: 4.10989rem !important;
  }

.u-space12,
  .u-spaceEnds12,
  .u-spaceBottom12 {
    margin-bottom: 4.10989rem !important;
  }

.u-space12,
  .u-spaceSides12,
  .u-spaceLeft12 {
    margin-left: 4.10989rem !important;
  }

.u-space12,
  .u-spaceSides12,
  .u-spaceRight12 {
    margin-right: 4.10989rem !important;
  }

.u-pad12,
  .u-padEnds12,
  .u-padTop12 {
    padding-top: 4.10989rem !important;
  }

.u-pad12,
  .u-padEnds12,
  .u-padBottom12 {
    padding-bottom: 4.10989rem !important;
  }

.u-pad12,
  .u-padSides12,
  .u-padLeft12 {
    padding-left: 4.10989rem !important;
  }

.u-pad12,
  .u-padSides12,
  .u-padRight12 {
    padding-right: 4.10989rem !important;
  }

.u-spaceNone,
  .u-spaceEndsNone,
  .u-spaceTopNone {
    margin-top: 0 !important;
  }

.u-spaceNone,
  .u-spaceEndsNone,
  .u-spaceBottomNone {
    margin-bottom: 0 !important;
  }

.u-spaceNone,
  .u-spaceSidesNone,
  .u-spaceLeftNone {
    margin-left: 0 !important;
  }

.u-spaceNone,
  .u-spaceSidesNone,
  .u-spaceRightNone {
    margin-right: 0 !important;
  }

.u-padNone,
  .u-padEndsNone,
  .u-padTopNone {
    padding-top: 0 !important;
  }

.u-padNone,
  .u-padEndsNone,
  .u-padBottomNone {
    padding-bottom: 0 !important;
  }

.u-padNone,
  .u-padSidesNone,
  .u-padLeftNone {
    padding-left: 0 !important;
  }

.u-padNone,
  .u-padSidesNone,
  .u-padRightNone {
    padding-right: 0 !important;
  }

.u-pull09,
  .u-pullEnds09,
  .u-pullTop09 {
    margin-top: -0.34644rem !important;
  }

.u-pull09,
  .u-pullEnds09,
  .u-pullBottom09 {
    margin-bottom: -0.34644rem !important;
  }

.u-pull09,
  .u-pullSides09,
  .u-pullLeft09 {
    margin-left: -0.34644rem !important;
  }

.u-pull09,
  .u-pullSides09,
  .u-pullRight09 {
    margin-right: -0.34644rem !important;
  }

.u-pull08,
  .u-pullEnds08,
  .u-pullTop08 {
    margin-top: -0.38974rem !important;
  }

.u-pull08,
  .u-pullEnds08,
  .u-pullBottom08 {
    margin-bottom: -0.38974rem !important;
  }

.u-pull08,
  .u-pullSides08,
  .u-pullLeft08 {
    margin-left: -0.38974rem !important;
  }

.u-pull08,
  .u-pullSides08,
  .u-pullRight08 {
    margin-right: -0.38974rem !important;
  }

.u-pull07,
  .u-pullEnds07,
  .u-pullTop07 {
    margin-top: -0.43846rem !important;
  }

.u-pull07,
  .u-pullEnds07,
  .u-pullBottom07 {
    margin-bottom: -0.43846rem !important;
  }

.u-pull07,
  .u-pullSides07,
  .u-pullLeft07 {
    margin-left: -0.43846rem !important;
  }

.u-pull07,
  .u-pullSides07,
  .u-pullRight07 {
    margin-right: -0.43846rem !important;
  }

.u-pull06,
  .u-pullEnds06,
  .u-pullTop06 {
    margin-top: -0.49327rem !important;
  }

.u-pull06,
  .u-pullEnds06,
  .u-pullBottom06 {
    margin-bottom: -0.49327rem !important;
  }

.u-pull06,
  .u-pullSides06,
  .u-pullLeft06 {
    margin-left: -0.49327rem !important;
  }

.u-pull06,
  .u-pullSides06,
  .u-pullRight06 {
    margin-right: -0.49327rem !important;
  }

.u-pull05,
  .u-pullEnds05,
  .u-pullTop05 {
    margin-top: -0.55493rem !important;
  }

.u-pull05,
  .u-pullEnds05,
  .u-pullBottom05 {
    margin-bottom: -0.55493rem !important;
  }

.u-pull05,
  .u-pullSides05,
  .u-pullLeft05 {
    margin-left: -0.55493rem !important;
  }

.u-pull05,
  .u-pullSides05,
  .u-pullRight05 {
    margin-right: -0.55493rem !important;
  }

.u-pull04,
  .u-pullEnds04,
  .u-pullTop04 {
    margin-top: -0.6243rem !important;
  }

.u-pull04,
  .u-pullEnds04,
  .u-pullBottom04 {
    margin-bottom: -0.6243rem !important;
  }

.u-pull04,
  .u-pullSides04,
  .u-pullLeft04 {
    margin-left: -0.6243rem !important;
  }

.u-pull04,
  .u-pullSides04,
  .u-pullRight04 {
    margin-right: -0.6243rem !important;
  }

.u-pull03,
  .u-pullEnds03,
  .u-pullTop03 {
    margin-top: -0.70233rem !important;
  }

.u-pull03,
  .u-pullEnds03,
  .u-pullBottom03 {
    margin-bottom: -0.70233rem !important;
  }

.u-pull03,
  .u-pullSides03,
  .u-pullLeft03 {
    margin-left: -0.70233rem !important;
  }

.u-pull03,
  .u-pullSides03,
  .u-pullRight03 {
    margin-right: -0.70233rem !important;
  }

.u-pull02,
  .u-pullEnds02,
  .u-pullTop02 {
    margin-top: -0.79012rem !important;
  }

.u-pull02,
  .u-pullEnds02,
  .u-pullBottom02 {
    margin-bottom: -0.79012rem !important;
  }

.u-pull02,
  .u-pullSides02,
  .u-pullLeft02 {
    margin-left: -0.79012rem !important;
  }

.u-pull02,
  .u-pullSides02,
  .u-pullRight02 {
    margin-right: -0.79012rem !important;
  }

.u-pull01,
  .u-pullEnds01,
  .u-pullTop01 {
    margin-top: -0.88889rem !important;
  }

.u-pull01,
  .u-pullEnds01,
  .u-pullBottom01 {
    margin-bottom: -0.88889rem !important;
  }

.u-pull01,
  .u-pullSides01,
  .u-pullLeft01 {
    margin-left: -0.88889rem !important;
  }

.u-pull01,
  .u-pullSides01,
  .u-pullRight01 {
    margin-right: -0.88889rem !important;
  }

.u-pull,
  .u-pullEnds,
  .u-pullTop {
    margin-top: -1rem !important;
  }

.u-pull,
  .u-pullEnds,
  .u-pullBottom {
    margin-bottom: -1rem !important;
  }

.u-pull,
  .u-pullSides,
  .u-pullLeft {
    margin-left: -1rem !important;
  }

.u-pull,
  .u-pullSides,
  .u-pullRight {
    margin-right: -1rem !important;
  }

.u-pull1,
  .u-pullEnds1,
  .u-pullTop1 {
    margin-top: -1.125rem !important;
  }

.u-pull1,
  .u-pullEnds1,
  .u-pullBottom1 {
    margin-bottom: -1.125rem !important;
  }

.u-pull1,
  .u-pullSides1,
  .u-pullLeft1 {
    margin-left: -1.125rem !important;
  }

.u-pull1,
  .u-pullSides1,
  .u-pullRight1 {
    margin-right: -1.125rem !important;
  }

.u-pull2,
  .u-pullEnds2,
  .u-pullTop2 {
    margin-top: -1.26562rem !important;
  }

.u-pull2,
  .u-pullEnds2,
  .u-pullBottom2 {
    margin-bottom: -1.26562rem !important;
  }

.u-pull2,
  .u-pullSides2,
  .u-pullLeft2 {
    margin-left: -1.26562rem !important;
  }

.u-pull2,
  .u-pullSides2,
  .u-pullRight2 {
    margin-right: -1.26562rem !important;
  }

.u-pull3,
  .u-pullEnds3,
  .u-pullTop3 {
    margin-top: -1.42383rem !important;
  }

.u-pull3,
  .u-pullEnds3,
  .u-pullBottom3 {
    margin-bottom: -1.42383rem !important;
  }

.u-pull3,
  .u-pullSides3,
  .u-pullLeft3 {
    margin-left: -1.42383rem !important;
  }

.u-pull3,
  .u-pullSides3,
  .u-pullRight3 {
    margin-right: -1.42383rem !important;
  }

.u-pull4,
  .u-pullEnds4,
  .u-pullTop4 {
    margin-top: -1.60181rem !important;
  }

.u-pull4,
  .u-pullEnds4,
  .u-pullBottom4 {
    margin-bottom: -1.60181rem !important;
  }

.u-pull4,
  .u-pullSides4,
  .u-pullLeft4 {
    margin-left: -1.60181rem !important;
  }

.u-pull4,
  .u-pullSides4,
  .u-pullRight4 {
    margin-right: -1.60181rem !important;
  }

.u-pull5,
  .u-pullEnds5,
  .u-pullTop5 {
    margin-top: -1.80203rem !important;
  }

.u-pull5,
  .u-pullEnds5,
  .u-pullBottom5 {
    margin-bottom: -1.80203rem !important;
  }

.u-pull5,
  .u-pullSides5,
  .u-pullLeft5 {
    margin-left: -1.80203rem !important;
  }

.u-pull5,
  .u-pullSides5,
  .u-pullRight5 {
    margin-right: -1.80203rem !important;
  }

.u-pull6,
  .u-pullEnds6,
  .u-pullTop6 {
    margin-top: -2.02729rem !important;
  }

.u-pull6,
  .u-pullEnds6,
  .u-pullBottom6 {
    margin-bottom: -2.02729rem !important;
  }

.u-pull6,
  .u-pullSides6,
  .u-pullLeft6 {
    margin-left: -2.02729rem !important;
  }

.u-pull6,
  .u-pullSides6,
  .u-pullRight6 {
    margin-right: -2.02729rem !important;
  }

.u-pull7,
  .u-pullEnds7,
  .u-pullTop7 {
    margin-top: -2.2807rem !important;
  }

.u-pull7,
  .u-pullEnds7,
  .u-pullBottom7 {
    margin-bottom: -2.2807rem !important;
  }

.u-pull7,
  .u-pullSides7,
  .u-pullLeft7 {
    margin-left: -2.2807rem !important;
  }

.u-pull7,
  .u-pullSides7,
  .u-pullRight7 {
    margin-right: -2.2807rem !important;
  }

.u-pull8,
  .u-pullEnds8,
  .u-pullTop8 {
    margin-top: -2.56578rem !important;
  }

.u-pull8,
  .u-pullEnds8,
  .u-pullBottom8 {
    margin-bottom: -2.56578rem !important;
  }

.u-pull8,
  .u-pullSides8,
  .u-pullLeft8 {
    margin-left: -2.56578rem !important;
  }

.u-pull8,
  .u-pullSides8,
  .u-pullRight8 {
    margin-right: -2.56578rem !important;
  }

.u-pull9,
  .u-pullEnds9,
  .u-pullTop9 {
    margin-top: -2.88651rem !important;
  }

.u-pull9,
  .u-pullEnds9,
  .u-pullBottom9 {
    margin-bottom: -2.88651rem !important;
  }

.u-pull9,
  .u-pullSides9,
  .u-pullLeft9 {
    margin-left: -2.88651rem !important;
  }

.u-pull9,
  .u-pullSides9,
  .u-pullRight9 {
    margin-right: -2.88651rem !important;
  }

.u-pull10,
  .u-pullEnds10,
  .u-pullTop10 {
    margin-top: -3.24732rem !important;
  }

.u-pull10,
  .u-pullEnds10,
  .u-pullBottom10 {
    margin-bottom: -3.24732rem !important;
  }

.u-pull10,
  .u-pullSides10,
  .u-pullLeft10 {
    margin-left: -3.24732rem !important;
  }

.u-pull10,
  .u-pullSides10,
  .u-pullRight10 {
    margin-right: -3.24732rem !important;
  }

.u-pull11,
  .u-pullEnds11,
  .u-pullTop11 {
    margin-top: -3.65324rem !important;
  }

.u-pull11,
  .u-pullEnds11,
  .u-pullBottom11 {
    margin-bottom: -3.65324rem !important;
  }

.u-pull11,
  .u-pullSides11,
  .u-pullLeft11 {
    margin-left: -3.65324rem !important;
  }

.u-pull11,
  .u-pullSides11,
  .u-pullRight11 {
    margin-right: -3.65324rem !important;
  }

.u-pull12,
  .u-pullEnds12,
  .u-pullTop12 {
    margin-top: -4.10989rem !important;
  }

.u-pull12,
  .u-pullEnds12,
  .u-pullBottom12 {
    margin-bottom: -4.10989rem !important;
  }

.u-pull12,
  .u-pullSides12,
  .u-pullLeft12 {
    margin-left: -4.10989rem !important;
  }

.u-pull12,
  .u-pullSides12,
  .u-pullRight12 {
    margin-right: -4.10989rem !important;
  }

.u-spaceItems09 > * + * {
    margin-top: 0.34644rem;
  }

.u-staggerItems09 > * + * {
    margin-top: 0.34644em;
  }

.u-spaceItems08 > * + * {
    margin-top: 0.38974rem;
  }

.u-staggerItems08 > * + * {
    margin-top: 0.38974em;
  }

.u-spaceItems07 > * + * {
    margin-top: 0.43846rem;
  }

.u-staggerItems07 > * + * {
    margin-top: 0.43846em;
  }

.u-spaceItems06 > * + * {
    margin-top: 0.49327rem;
  }

.u-staggerItems06 > * + * {
    margin-top: 0.49327em;
  }

.u-spaceItems05 > * + * {
    margin-top: 0.55493rem;
  }

.u-staggerItems05 > * + * {
    margin-top: 0.55493em;
  }

.u-spaceItems04 > * + * {
    margin-top: 0.6243rem;
  }

.u-staggerItems04 > * + * {
    margin-top: 0.6243em;
  }

.u-spaceItems03 > * + * {
    margin-top: 0.70233rem;
  }

.u-staggerItems03 > * + * {
    margin-top: 0.70233em;
  }

.u-spaceItems02 > * + * {
    margin-top: 0.79012rem;
  }

.u-staggerItems02 > * + * {
    margin-top: 0.79012em;
  }

.u-spaceItems01 > * + * {
    margin-top: 0.88889rem;
  }

.u-staggerItems01 > * + * {
    margin-top: 0.88889em;
  }

.u-spaceItems > * + * {
    margin-top: 1rem;
  }

.u-staggerItems > * + * {
    margin-top: 1em;
  }

.u-spaceItems1 > * + * {
    margin-top: 1.125rem;
  }

.u-staggerItems1 > * + * {
    margin-top: 1.125em;
  }

.u-spaceItems2 > * + * {
    margin-top: 1.26563rem;
  }

.u-staggerItems2 > * + * {
    margin-top: 1.26563em;
  }

.u-spaceItems3 > * + * {
    margin-top: 1.42383rem;
  }

.u-staggerItems3 > * + * {
    margin-top: 1.42383em;
  }

.u-spaceItems4 > * + * {
    margin-top: 1.60181rem;
  }

.u-staggerItems4 > * + * {
    margin-top: 1.60181em;
  }

.u-spaceItems5 > * + * {
    margin-top: 1.80203rem;
  }

.u-staggerItems5 > * + * {
    margin-top: 1.80203em;
  }

.u-spaceItems6 > * + * {
    margin-top: 2.02729rem;
  }

.u-staggerItems6 > * + * {
    margin-top: 2.02729em;
  }

.u-spaceItems7 > * + * {
    margin-top: 2.2807rem;
  }

.u-staggerItems7 > * + * {
    margin-top: 2.2807em;
  }

.u-spaceItems8 > * + * {
    margin-top: 2.56578rem;
  }

.u-staggerItems8 > * + * {
    margin-top: 2.56578em;
  }

.u-spaceItems9 > * + * {
    margin-top: 2.88651rem;
  }

.u-staggerItems9 > * + * {
    margin-top: 2.88651em;
  }

.u-spaceItems10 > * + * {
    margin-top: 3.24732rem;
  }

.u-staggerItems10 > * + * {
    margin-top: 3.24732em;
  }

.u-spaceItems11 > * + * {
    margin-top: 3.65324rem;
  }

.u-staggerItems11 > * + * {
    margin-top: 3.65324em;
  }

.u-spaceItems12 > * + * {
    margin-top: 4.10989rem;
  }

.u-staggerItems12 > * + * {
    margin-top: 4.10989em;
  }

.u-spaceItemsNone > * + * {
    margin-top: 0rem;
  }

.u-staggerItemsNone > * + * {
    margin-top: 0em;
  }

@media (min-width: 30em) {
  .u-sm-space09,
  .u-sm-spaceEnds09,
  .u-sm-spaceTop09 {
    margin-top: 0.34644rem !important;
  }
  .u-sm-space09,
  .u-sm-spaceEnds09,
  .u-sm-spaceBottom09 {
    margin-bottom: 0.34644rem !important;
  }
  .u-sm-space09,
  .u-sm-spaceSides09,
  .u-sm-spaceLeft09 {
    margin-left: 0.34644rem !important;
  }
  .u-sm-space09,
  .u-sm-spaceSides09,
  .u-sm-spaceRight09 {
    margin-right: 0.34644rem !important;
  }
  .u-sm-pad09,
  .u-sm-padEnds09,
  .u-sm-padTop09 {
    padding-top: 0.34644rem !important;
  }
  .u-sm-pad09,
  .u-sm-padEnds09,
  .u-sm-padBottom09 {
    padding-bottom: 0.34644rem !important;
  }
  .u-sm-pad09,
  .u-sm-padSides09,
  .u-sm-padLeft09 {
    padding-left: 0.34644rem !important;
  }
  .u-sm-pad09,
  .u-sm-padSides09,
  .u-sm-padRight09 {
    padding-right: 0.34644rem !important;
  }
  .u-sm-space08,
  .u-sm-spaceEnds08,
  .u-sm-spaceTop08 {
    margin-top: 0.38974rem !important;
  }
  .u-sm-space08,
  .u-sm-spaceEnds08,
  .u-sm-spaceBottom08 {
    margin-bottom: 0.38974rem !important;
  }
  .u-sm-space08,
  .u-sm-spaceSides08,
  .u-sm-spaceLeft08 {
    margin-left: 0.38974rem !important;
  }
  .u-sm-space08,
  .u-sm-spaceSides08,
  .u-sm-spaceRight08 {
    margin-right: 0.38974rem !important;
  }
  .u-sm-pad08,
  .u-sm-padEnds08,
  .u-sm-padTop08 {
    padding-top: 0.38974rem !important;
  }
  .u-sm-pad08,
  .u-sm-padEnds08,
  .u-sm-padBottom08 {
    padding-bottom: 0.38974rem !important;
  }
  .u-sm-pad08,
  .u-sm-padSides08,
  .u-sm-padLeft08 {
    padding-left: 0.38974rem !important;
  }
  .u-sm-pad08,
  .u-sm-padSides08,
  .u-sm-padRight08 {
    padding-right: 0.38974rem !important;
  }
  .u-sm-space07,
  .u-sm-spaceEnds07,
  .u-sm-spaceTop07 {
    margin-top: 0.43846rem !important;
  }
  .u-sm-space07,
  .u-sm-spaceEnds07,
  .u-sm-spaceBottom07 {
    margin-bottom: 0.43846rem !important;
  }
  .u-sm-space07,
  .u-sm-spaceSides07,
  .u-sm-spaceLeft07 {
    margin-left: 0.43846rem !important;
  }
  .u-sm-space07,
  .u-sm-spaceSides07,
  .u-sm-spaceRight07 {
    margin-right: 0.43846rem !important;
  }
  .u-sm-pad07,
  .u-sm-padEnds07,
  .u-sm-padTop07 {
    padding-top: 0.43846rem !important;
  }
  .u-sm-pad07,
  .u-sm-padEnds07,
  .u-sm-padBottom07 {
    padding-bottom: 0.43846rem !important;
  }
  .u-sm-pad07,
  .u-sm-padSides07,
  .u-sm-padLeft07 {
    padding-left: 0.43846rem !important;
  }
  .u-sm-pad07,
  .u-sm-padSides07,
  .u-sm-padRight07 {
    padding-right: 0.43846rem !important;
  }
  .u-sm-space06,
  .u-sm-spaceEnds06,
  .u-sm-spaceTop06 {
    margin-top: 0.49327rem !important;
  }
  .u-sm-space06,
  .u-sm-spaceEnds06,
  .u-sm-spaceBottom06 {
    margin-bottom: 0.49327rem !important;
  }
  .u-sm-space06,
  .u-sm-spaceSides06,
  .u-sm-spaceLeft06 {
    margin-left: 0.49327rem !important;
  }
  .u-sm-space06,
  .u-sm-spaceSides06,
  .u-sm-spaceRight06 {
    margin-right: 0.49327rem !important;
  }
  .u-sm-pad06,
  .u-sm-padEnds06,
  .u-sm-padTop06 {
    padding-top: 0.49327rem !important;
  }
  .u-sm-pad06,
  .u-sm-padEnds06,
  .u-sm-padBottom06 {
    padding-bottom: 0.49327rem !important;
  }
  .u-sm-pad06,
  .u-sm-padSides06,
  .u-sm-padLeft06 {
    padding-left: 0.49327rem !important;
  }
  .u-sm-pad06,
  .u-sm-padSides06,
  .u-sm-padRight06 {
    padding-right: 0.49327rem !important;
  }
  .u-sm-space05,
  .u-sm-spaceEnds05,
  .u-sm-spaceTop05 {
    margin-top: 0.55493rem !important;
  }
  .u-sm-space05,
  .u-sm-spaceEnds05,
  .u-sm-spaceBottom05 {
    margin-bottom: 0.55493rem !important;
  }
  .u-sm-space05,
  .u-sm-spaceSides05,
  .u-sm-spaceLeft05 {
    margin-left: 0.55493rem !important;
  }
  .u-sm-space05,
  .u-sm-spaceSides05,
  .u-sm-spaceRight05 {
    margin-right: 0.55493rem !important;
  }
  .u-sm-pad05,
  .u-sm-padEnds05,
  .u-sm-padTop05 {
    padding-top: 0.55493rem !important;
  }
  .u-sm-pad05,
  .u-sm-padEnds05,
  .u-sm-padBottom05 {
    padding-bottom: 0.55493rem !important;
  }
  .u-sm-pad05,
  .u-sm-padSides05,
  .u-sm-padLeft05 {
    padding-left: 0.55493rem !important;
  }
  .u-sm-pad05,
  .u-sm-padSides05,
  .u-sm-padRight05 {
    padding-right: 0.55493rem !important;
  }
  .u-sm-space04,
  .u-sm-spaceEnds04,
  .u-sm-spaceTop04 {
    margin-top: 0.6243rem !important;
  }
  .u-sm-space04,
  .u-sm-spaceEnds04,
  .u-sm-spaceBottom04 {
    margin-bottom: 0.6243rem !important;
  }
  .u-sm-space04,
  .u-sm-spaceSides04,
  .u-sm-spaceLeft04 {
    margin-left: 0.6243rem !important;
  }
  .u-sm-space04,
  .u-sm-spaceSides04,
  .u-sm-spaceRight04 {
    margin-right: 0.6243rem !important;
  }
  .u-sm-pad04,
  .u-sm-padEnds04,
  .u-sm-padTop04 {
    padding-top: 0.6243rem !important;
  }
  .u-sm-pad04,
  .u-sm-padEnds04,
  .u-sm-padBottom04 {
    padding-bottom: 0.6243rem !important;
  }
  .u-sm-pad04,
  .u-sm-padSides04,
  .u-sm-padLeft04 {
    padding-left: 0.6243rem !important;
  }
  .u-sm-pad04,
  .u-sm-padSides04,
  .u-sm-padRight04 {
    padding-right: 0.6243rem !important;
  }
  .u-sm-space03,
  .u-sm-spaceEnds03,
  .u-sm-spaceTop03 {
    margin-top: 0.70233rem !important;
  }
  .u-sm-space03,
  .u-sm-spaceEnds03,
  .u-sm-spaceBottom03 {
    margin-bottom: 0.70233rem !important;
  }
  .u-sm-space03,
  .u-sm-spaceSides03,
  .u-sm-spaceLeft03 {
    margin-left: 0.70233rem !important;
  }
  .u-sm-space03,
  .u-sm-spaceSides03,
  .u-sm-spaceRight03 {
    margin-right: 0.70233rem !important;
  }
  .u-sm-pad03,
  .u-sm-padEnds03,
  .u-sm-padTop03 {
    padding-top: 0.70233rem !important;
  }
  .u-sm-pad03,
  .u-sm-padEnds03,
  .u-sm-padBottom03 {
    padding-bottom: 0.70233rem !important;
  }
  .u-sm-pad03,
  .u-sm-padSides03,
  .u-sm-padLeft03 {
    padding-left: 0.70233rem !important;
  }
  .u-sm-pad03,
  .u-sm-padSides03,
  .u-sm-padRight03 {
    padding-right: 0.70233rem !important;
  }
  .u-sm-space02,
  .u-sm-spaceEnds02,
  .u-sm-spaceTop02 {
    margin-top: 0.79012rem !important;
  }
  .u-sm-space02,
  .u-sm-spaceEnds02,
  .u-sm-spaceBottom02 {
    margin-bottom: 0.79012rem !important;
  }
  .u-sm-space02,
  .u-sm-spaceSides02,
  .u-sm-spaceLeft02 {
    margin-left: 0.79012rem !important;
  }
  .u-sm-space02,
  .u-sm-spaceSides02,
  .u-sm-spaceRight02 {
    margin-right: 0.79012rem !important;
  }
  .u-sm-pad02,
  .u-sm-padEnds02,
  .u-sm-padTop02 {
    padding-top: 0.79012rem !important;
  }
  .u-sm-pad02,
  .u-sm-padEnds02,
  .u-sm-padBottom02 {
    padding-bottom: 0.79012rem !important;
  }
  .u-sm-pad02,
  .u-sm-padSides02,
  .u-sm-padLeft02 {
    padding-left: 0.79012rem !important;
  }
  .u-sm-pad02,
  .u-sm-padSides02,
  .u-sm-padRight02 {
    padding-right: 0.79012rem !important;
  }
  .u-sm-space01,
  .u-sm-spaceEnds01,
  .u-sm-spaceTop01 {
    margin-top: 0.88889rem !important;
  }
  .u-sm-space01,
  .u-sm-spaceEnds01,
  .u-sm-spaceBottom01 {
    margin-bottom: 0.88889rem !important;
  }
  .u-sm-space01,
  .u-sm-spaceSides01,
  .u-sm-spaceLeft01 {
    margin-left: 0.88889rem !important;
  }
  .u-sm-space01,
  .u-sm-spaceSides01,
  .u-sm-spaceRight01 {
    margin-right: 0.88889rem !important;
  }
  .u-sm-pad01,
  .u-sm-padEnds01,
  .u-sm-padTop01 {
    padding-top: 0.88889rem !important;
  }
  .u-sm-pad01,
  .u-sm-padEnds01,
  .u-sm-padBottom01 {
    padding-bottom: 0.88889rem !important;
  }
  .u-sm-pad01,
  .u-sm-padSides01,
  .u-sm-padLeft01 {
    padding-left: 0.88889rem !important;
  }
  .u-sm-pad01,
  .u-sm-padSides01,
  .u-sm-padRight01 {
    padding-right: 0.88889rem !important;
  }
  .u-sm-space,
  .u-sm-spaceEnds,
  .u-sm-spaceTop {
    margin-top: 1rem !important;
  }
  .u-sm-space,
  .u-sm-spaceEnds,
  .u-sm-spaceBottom {
    margin-bottom: 1rem !important;
  }
  .u-sm-space,
  .u-sm-spaceSides,
  .u-sm-spaceLeft {
    margin-left: 1rem !important;
  }
  .u-sm-space,
  .u-sm-spaceSides,
  .u-sm-spaceRight {
    margin-right: 1rem !important;
  }
  .u-sm-pad,
  .u-sm-padEnds,
  .u-sm-padTop {
    padding-top: 1rem !important;
  }
  .u-sm-pad,
  .u-sm-padEnds,
  .u-sm-padBottom {
    padding-bottom: 1rem !important;
  }
  .u-sm-pad,
  .u-sm-padSides,
  .u-sm-padLeft {
    padding-left: 1rem !important;
  }
  .u-sm-pad,
  .u-sm-padSides,
  .u-sm-padRight {
    padding-right: 1rem !important;
  }
  .u-sm-space1,
  .u-sm-spaceEnds1,
  .u-sm-spaceTop1 {
    margin-top: 1.125rem !important;
  }
  .u-sm-space1,
  .u-sm-spaceEnds1,
  .u-sm-spaceBottom1 {
    margin-bottom: 1.125rem !important;
  }
  .u-sm-space1,
  .u-sm-spaceSides1,
  .u-sm-spaceLeft1 {
    margin-left: 1.125rem !important;
  }
  .u-sm-space1,
  .u-sm-spaceSides1,
  .u-sm-spaceRight1 {
    margin-right: 1.125rem !important;
  }
  .u-sm-pad1,
  .u-sm-padEnds1,
  .u-sm-padTop1 {
    padding-top: 1.125rem !important;
  }
  .u-sm-pad1,
  .u-sm-padEnds1,
  .u-sm-padBottom1 {
    padding-bottom: 1.125rem !important;
  }
  .u-sm-pad1,
  .u-sm-padSides1,
  .u-sm-padLeft1 {
    padding-left: 1.125rem !important;
  }
  .u-sm-pad1,
  .u-sm-padSides1,
  .u-sm-padRight1 {
    padding-right: 1.125rem !important;
  }
  .u-sm-space2,
  .u-sm-spaceEnds2,
  .u-sm-spaceTop2 {
    margin-top: 1.26563rem !important;
  }
  .u-sm-space2,
  .u-sm-spaceEnds2,
  .u-sm-spaceBottom2 {
    margin-bottom: 1.26563rem !important;
  }
  .u-sm-space2,
  .u-sm-spaceSides2,
  .u-sm-spaceLeft2 {
    margin-left: 1.26563rem !important;
  }
  .u-sm-space2,
  .u-sm-spaceSides2,
  .u-sm-spaceRight2 {
    margin-right: 1.26563rem !important;
  }
  .u-sm-pad2,
  .u-sm-padEnds2,
  .u-sm-padTop2 {
    padding-top: 1.26563rem !important;
  }
  .u-sm-pad2,
  .u-sm-padEnds2,
  .u-sm-padBottom2 {
    padding-bottom: 1.26563rem !important;
  }
  .u-sm-pad2,
  .u-sm-padSides2,
  .u-sm-padLeft2 {
    padding-left: 1.26563rem !important;
  }
  .u-sm-pad2,
  .u-sm-padSides2,
  .u-sm-padRight2 {
    padding-right: 1.26563rem !important;
  }
  .u-sm-space3,
  .u-sm-spaceEnds3,
  .u-sm-spaceTop3 {
    margin-top: 1.42383rem !important;
  }
  .u-sm-space3,
  .u-sm-spaceEnds3,
  .u-sm-spaceBottom3 {
    margin-bottom: 1.42383rem !important;
  }
  .u-sm-space3,
  .u-sm-spaceSides3,
  .u-sm-spaceLeft3 {
    margin-left: 1.42383rem !important;
  }
  .u-sm-space3,
  .u-sm-spaceSides3,
  .u-sm-spaceRight3 {
    margin-right: 1.42383rem !important;
  }
  .u-sm-pad3,
  .u-sm-padEnds3,
  .u-sm-padTop3 {
    padding-top: 1.42383rem !important;
  }
  .u-sm-pad3,
  .u-sm-padEnds3,
  .u-sm-padBottom3 {
    padding-bottom: 1.42383rem !important;
  }
  .u-sm-pad3,
  .u-sm-padSides3,
  .u-sm-padLeft3 {
    padding-left: 1.42383rem !important;
  }
  .u-sm-pad3,
  .u-sm-padSides3,
  .u-sm-padRight3 {
    padding-right: 1.42383rem !important;
  }
  .u-sm-space4,
  .u-sm-spaceEnds4,
  .u-sm-spaceTop4 {
    margin-top: 1.60181rem !important;
  }
  .u-sm-space4,
  .u-sm-spaceEnds4,
  .u-sm-spaceBottom4 {
    margin-bottom: 1.60181rem !important;
  }
  .u-sm-space4,
  .u-sm-spaceSides4,
  .u-sm-spaceLeft4 {
    margin-left: 1.60181rem !important;
  }
  .u-sm-space4,
  .u-sm-spaceSides4,
  .u-sm-spaceRight4 {
    margin-right: 1.60181rem !important;
  }
  .u-sm-pad4,
  .u-sm-padEnds4,
  .u-sm-padTop4 {
    padding-top: 1.60181rem !important;
  }
  .u-sm-pad4,
  .u-sm-padEnds4,
  .u-sm-padBottom4 {
    padding-bottom: 1.60181rem !important;
  }
  .u-sm-pad4,
  .u-sm-padSides4,
  .u-sm-padLeft4 {
    padding-left: 1.60181rem !important;
  }
  .u-sm-pad4,
  .u-sm-padSides4,
  .u-sm-padRight4 {
    padding-right: 1.60181rem !important;
  }
  .u-sm-space5,
  .u-sm-spaceEnds5,
  .u-sm-spaceTop5 {
    margin-top: 1.80203rem !important;
  }
  .u-sm-space5,
  .u-sm-spaceEnds5,
  .u-sm-spaceBottom5 {
    margin-bottom: 1.80203rem !important;
  }
  .u-sm-space5,
  .u-sm-spaceSides5,
  .u-sm-spaceLeft5 {
    margin-left: 1.80203rem !important;
  }
  .u-sm-space5,
  .u-sm-spaceSides5,
  .u-sm-spaceRight5 {
    margin-right: 1.80203rem !important;
  }
  .u-sm-pad5,
  .u-sm-padEnds5,
  .u-sm-padTop5 {
    padding-top: 1.80203rem !important;
  }
  .u-sm-pad5,
  .u-sm-padEnds5,
  .u-sm-padBottom5 {
    padding-bottom: 1.80203rem !important;
  }
  .u-sm-pad5,
  .u-sm-padSides5,
  .u-sm-padLeft5 {
    padding-left: 1.80203rem !important;
  }
  .u-sm-pad5,
  .u-sm-padSides5,
  .u-sm-padRight5 {
    padding-right: 1.80203rem !important;
  }
  .u-sm-space6,
  .u-sm-spaceEnds6,
  .u-sm-spaceTop6 {
    margin-top: 2.02729rem !important;
  }
  .u-sm-space6,
  .u-sm-spaceEnds6,
  .u-sm-spaceBottom6 {
    margin-bottom: 2.02729rem !important;
  }
  .u-sm-space6,
  .u-sm-spaceSides6,
  .u-sm-spaceLeft6 {
    margin-left: 2.02729rem !important;
  }
  .u-sm-space6,
  .u-sm-spaceSides6,
  .u-sm-spaceRight6 {
    margin-right: 2.02729rem !important;
  }
  .u-sm-pad6,
  .u-sm-padEnds6,
  .u-sm-padTop6 {
    padding-top: 2.02729rem !important;
  }
  .u-sm-pad6,
  .u-sm-padEnds6,
  .u-sm-padBottom6 {
    padding-bottom: 2.02729rem !important;
  }
  .u-sm-pad6,
  .u-sm-padSides6,
  .u-sm-padLeft6 {
    padding-left: 2.02729rem !important;
  }
  .u-sm-pad6,
  .u-sm-padSides6,
  .u-sm-padRight6 {
    padding-right: 2.02729rem !important;
  }
  .u-sm-space7,
  .u-sm-spaceEnds7,
  .u-sm-spaceTop7 {
    margin-top: 2.2807rem !important;
  }
  .u-sm-space7,
  .u-sm-spaceEnds7,
  .u-sm-spaceBottom7 {
    margin-bottom: 2.2807rem !important;
  }
  .u-sm-space7,
  .u-sm-spaceSides7,
  .u-sm-spaceLeft7 {
    margin-left: 2.2807rem !important;
  }
  .u-sm-space7,
  .u-sm-spaceSides7,
  .u-sm-spaceRight7 {
    margin-right: 2.2807rem !important;
  }
  .u-sm-pad7,
  .u-sm-padEnds7,
  .u-sm-padTop7 {
    padding-top: 2.2807rem !important;
  }
  .u-sm-pad7,
  .u-sm-padEnds7,
  .u-sm-padBottom7 {
    padding-bottom: 2.2807rem !important;
  }
  .u-sm-pad7,
  .u-sm-padSides7,
  .u-sm-padLeft7 {
    padding-left: 2.2807rem !important;
  }
  .u-sm-pad7,
  .u-sm-padSides7,
  .u-sm-padRight7 {
    padding-right: 2.2807rem !important;
  }
  .u-sm-space8,
  .u-sm-spaceEnds8,
  .u-sm-spaceTop8 {
    margin-top: 2.56578rem !important;
  }
  .u-sm-space8,
  .u-sm-spaceEnds8,
  .u-sm-spaceBottom8 {
    margin-bottom: 2.56578rem !important;
  }
  .u-sm-space8,
  .u-sm-spaceSides8,
  .u-sm-spaceLeft8 {
    margin-left: 2.56578rem !important;
  }
  .u-sm-space8,
  .u-sm-spaceSides8,
  .u-sm-spaceRight8 {
    margin-right: 2.56578rem !important;
  }
  .u-sm-pad8,
  .u-sm-padEnds8,
  .u-sm-padTop8 {
    padding-top: 2.56578rem !important;
  }
  .u-sm-pad8,
  .u-sm-padEnds8,
  .u-sm-padBottom8 {
    padding-bottom: 2.56578rem !important;
  }
  .u-sm-pad8,
  .u-sm-padSides8,
  .u-sm-padLeft8 {
    padding-left: 2.56578rem !important;
  }
  .u-sm-pad8,
  .u-sm-padSides8,
  .u-sm-padRight8 {
    padding-right: 2.56578rem !important;
  }
  .u-sm-space9,
  .u-sm-spaceEnds9,
  .u-sm-spaceTop9 {
    margin-top: 2.88651rem !important;
  }
  .u-sm-space9,
  .u-sm-spaceEnds9,
  .u-sm-spaceBottom9 {
    margin-bottom: 2.88651rem !important;
  }
  .u-sm-space9,
  .u-sm-spaceSides9,
  .u-sm-spaceLeft9 {
    margin-left: 2.88651rem !important;
  }
  .u-sm-space9,
  .u-sm-spaceSides9,
  .u-sm-spaceRight9 {
    margin-right: 2.88651rem !important;
  }
  .u-sm-pad9,
  .u-sm-padEnds9,
  .u-sm-padTop9 {
    padding-top: 2.88651rem !important;
  }
  .u-sm-pad9,
  .u-sm-padEnds9,
  .u-sm-padBottom9 {
    padding-bottom: 2.88651rem !important;
  }
  .u-sm-pad9,
  .u-sm-padSides9,
  .u-sm-padLeft9 {
    padding-left: 2.88651rem !important;
  }
  .u-sm-pad9,
  .u-sm-padSides9,
  .u-sm-padRight9 {
    padding-right: 2.88651rem !important;
  }
  .u-sm-space10,
  .u-sm-spaceEnds10,
  .u-sm-spaceTop10 {
    margin-top: 3.24732rem !important;
  }
  .u-sm-space10,
  .u-sm-spaceEnds10,
  .u-sm-spaceBottom10 {
    margin-bottom: 3.24732rem !important;
  }
  .u-sm-space10,
  .u-sm-spaceSides10,
  .u-sm-spaceLeft10 {
    margin-left: 3.24732rem !important;
  }
  .u-sm-space10,
  .u-sm-spaceSides10,
  .u-sm-spaceRight10 {
    margin-right: 3.24732rem !important;
  }
  .u-sm-pad10,
  .u-sm-padEnds10,
  .u-sm-padTop10 {
    padding-top: 3.24732rem !important;
  }
  .u-sm-pad10,
  .u-sm-padEnds10,
  .u-sm-padBottom10 {
    padding-bottom: 3.24732rem !important;
  }
  .u-sm-pad10,
  .u-sm-padSides10,
  .u-sm-padLeft10 {
    padding-left: 3.24732rem !important;
  }
  .u-sm-pad10,
  .u-sm-padSides10,
  .u-sm-padRight10 {
    padding-right: 3.24732rem !important;
  }
  .u-sm-space11,
  .u-sm-spaceEnds11,
  .u-sm-spaceTop11 {
    margin-top: 3.65324rem !important;
  }
  .u-sm-space11,
  .u-sm-spaceEnds11,
  .u-sm-spaceBottom11 {
    margin-bottom: 3.65324rem !important;
  }
  .u-sm-space11,
  .u-sm-spaceSides11,
  .u-sm-spaceLeft11 {
    margin-left: 3.65324rem !important;
  }
  .u-sm-space11,
  .u-sm-spaceSides11,
  .u-sm-spaceRight11 {
    margin-right: 3.65324rem !important;
  }
  .u-sm-pad11,
  .u-sm-padEnds11,
  .u-sm-padTop11 {
    padding-top: 3.65324rem !important;
  }
  .u-sm-pad11,
  .u-sm-padEnds11,
  .u-sm-padBottom11 {
    padding-bottom: 3.65324rem !important;
  }
  .u-sm-pad11,
  .u-sm-padSides11,
  .u-sm-padLeft11 {
    padding-left: 3.65324rem !important;
  }
  .u-sm-pad11,
  .u-sm-padSides11,
  .u-sm-padRight11 {
    padding-right: 3.65324rem !important;
  }
  .u-sm-space12,
  .u-sm-spaceEnds12,
  .u-sm-spaceTop12 {
    margin-top: 4.10989rem !important;
  }
  .u-sm-space12,
  .u-sm-spaceEnds12,
  .u-sm-spaceBottom12 {
    margin-bottom: 4.10989rem !important;
  }
  .u-sm-space12,
  .u-sm-spaceSides12,
  .u-sm-spaceLeft12 {
    margin-left: 4.10989rem !important;
  }
  .u-sm-space12,
  .u-sm-spaceSides12,
  .u-sm-spaceRight12 {
    margin-right: 4.10989rem !important;
  }
  .u-sm-pad12,
  .u-sm-padEnds12,
  .u-sm-padTop12 {
    padding-top: 4.10989rem !important;
  }
  .u-sm-pad12,
  .u-sm-padEnds12,
  .u-sm-padBottom12 {
    padding-bottom: 4.10989rem !important;
  }
  .u-sm-pad12,
  .u-sm-padSides12,
  .u-sm-padLeft12 {
    padding-left: 4.10989rem !important;
  }
  .u-sm-pad12,
  .u-sm-padSides12,
  .u-sm-padRight12 {
    padding-right: 4.10989rem !important;
  }
  .u-sm-spaceNone,
  .u-sm-spaceEndsNone,
  .u-sm-spaceTopNone {
    margin-top: 0 !important;
  }
  .u-sm-spaceNone,
  .u-sm-spaceEndsNone,
  .u-sm-spaceBottomNone {
    margin-bottom: 0 !important;
  }
  .u-sm-spaceNone,
  .u-sm-spaceSidesNone,
  .u-sm-spaceLeftNone {
    margin-left: 0 !important;
  }
  .u-sm-spaceNone,
  .u-sm-spaceSidesNone,
  .u-sm-spaceRightNone {
    margin-right: 0 !important;
  }
  .u-sm-padNone,
  .u-sm-padEndsNone,
  .u-sm-padTopNone {
    padding-top: 0 !important;
  }
  .u-sm-padNone,
  .u-sm-padEndsNone,
  .u-sm-padBottomNone {
    padding-bottom: 0 !important;
  }
  .u-sm-padNone,
  .u-sm-padSidesNone,
  .u-sm-padLeftNone {
    padding-left: 0 !important;
  }
  .u-sm-padNone,
  .u-sm-padSidesNone,
  .u-sm-padRightNone {
    padding-right: 0 !important;
  }
  .u-sm-pull09,
  .u-sm-pullEnds09,
  .u-sm-pullTop09 {
    margin-top: -0.34644rem !important;
  }
  .u-sm-pull09,
  .u-sm-pullEnds09,
  .u-sm-pullBottom09 {
    margin-bottom: -0.34644rem !important;
  }
  .u-sm-pull09,
  .u-sm-pullSides09,
  .u-sm-pullLeft09 {
    margin-left: -0.34644rem !important;
  }
  .u-sm-pull09,
  .u-sm-pullSides09,
  .u-sm-pullRight09 {
    margin-right: -0.34644rem !important;
  }
  .u-sm-pull08,
  .u-sm-pullEnds08,
  .u-sm-pullTop08 {
    margin-top: -0.38974rem !important;
  }
  .u-sm-pull08,
  .u-sm-pullEnds08,
  .u-sm-pullBottom08 {
    margin-bottom: -0.38974rem !important;
  }
  .u-sm-pull08,
  .u-sm-pullSides08,
  .u-sm-pullLeft08 {
    margin-left: -0.38974rem !important;
  }
  .u-sm-pull08,
  .u-sm-pullSides08,
  .u-sm-pullRight08 {
    margin-right: -0.38974rem !important;
  }
  .u-sm-pull07,
  .u-sm-pullEnds07,
  .u-sm-pullTop07 {
    margin-top: -0.43846rem !important;
  }
  .u-sm-pull07,
  .u-sm-pullEnds07,
  .u-sm-pullBottom07 {
    margin-bottom: -0.43846rem !important;
  }
  .u-sm-pull07,
  .u-sm-pullSides07,
  .u-sm-pullLeft07 {
    margin-left: -0.43846rem !important;
  }
  .u-sm-pull07,
  .u-sm-pullSides07,
  .u-sm-pullRight07 {
    margin-right: -0.43846rem !important;
  }
  .u-sm-pull06,
  .u-sm-pullEnds06,
  .u-sm-pullTop06 {
    margin-top: -0.49327rem !important;
  }
  .u-sm-pull06,
  .u-sm-pullEnds06,
  .u-sm-pullBottom06 {
    margin-bottom: -0.49327rem !important;
  }
  .u-sm-pull06,
  .u-sm-pullSides06,
  .u-sm-pullLeft06 {
    margin-left: -0.49327rem !important;
  }
  .u-sm-pull06,
  .u-sm-pullSides06,
  .u-sm-pullRight06 {
    margin-right: -0.49327rem !important;
  }
  .u-sm-pull05,
  .u-sm-pullEnds05,
  .u-sm-pullTop05 {
    margin-top: -0.55493rem !important;
  }
  .u-sm-pull05,
  .u-sm-pullEnds05,
  .u-sm-pullBottom05 {
    margin-bottom: -0.55493rem !important;
  }
  .u-sm-pull05,
  .u-sm-pullSides05,
  .u-sm-pullLeft05 {
    margin-left: -0.55493rem !important;
  }
  .u-sm-pull05,
  .u-sm-pullSides05,
  .u-sm-pullRight05 {
    margin-right: -0.55493rem !important;
  }
  .u-sm-pull04,
  .u-sm-pullEnds04,
  .u-sm-pullTop04 {
    margin-top: -0.6243rem !important;
  }
  .u-sm-pull04,
  .u-sm-pullEnds04,
  .u-sm-pullBottom04 {
    margin-bottom: -0.6243rem !important;
  }
  .u-sm-pull04,
  .u-sm-pullSides04,
  .u-sm-pullLeft04 {
    margin-left: -0.6243rem !important;
  }
  .u-sm-pull04,
  .u-sm-pullSides04,
  .u-sm-pullRight04 {
    margin-right: -0.6243rem !important;
  }
  .u-sm-pull03,
  .u-sm-pullEnds03,
  .u-sm-pullTop03 {
    margin-top: -0.70233rem !important;
  }
  .u-sm-pull03,
  .u-sm-pullEnds03,
  .u-sm-pullBottom03 {
    margin-bottom: -0.70233rem !important;
  }
  .u-sm-pull03,
  .u-sm-pullSides03,
  .u-sm-pullLeft03 {
    margin-left: -0.70233rem !important;
  }
  .u-sm-pull03,
  .u-sm-pullSides03,
  .u-sm-pullRight03 {
    margin-right: -0.70233rem !important;
  }
  .u-sm-pull02,
  .u-sm-pullEnds02,
  .u-sm-pullTop02 {
    margin-top: -0.79012rem !important;
  }
  .u-sm-pull02,
  .u-sm-pullEnds02,
  .u-sm-pullBottom02 {
    margin-bottom: -0.79012rem !important;
  }
  .u-sm-pull02,
  .u-sm-pullSides02,
  .u-sm-pullLeft02 {
    margin-left: -0.79012rem !important;
  }
  .u-sm-pull02,
  .u-sm-pullSides02,
  .u-sm-pullRight02 {
    margin-right: -0.79012rem !important;
  }
  .u-sm-pull01,
  .u-sm-pullEnds01,
  .u-sm-pullTop01 {
    margin-top: -0.88889rem !important;
  }
  .u-sm-pull01,
  .u-sm-pullEnds01,
  .u-sm-pullBottom01 {
    margin-bottom: -0.88889rem !important;
  }
  .u-sm-pull01,
  .u-sm-pullSides01,
  .u-sm-pullLeft01 {
    margin-left: -0.88889rem !important;
  }
  .u-sm-pull01,
  .u-sm-pullSides01,
  .u-sm-pullRight01 {
    margin-right: -0.88889rem !important;
  }
  .u-sm-pull,
  .u-sm-pullEnds,
  .u-sm-pullTop {
    margin-top: -1rem !important;
  }
  .u-sm-pull,
  .u-sm-pullEnds,
  .u-sm-pullBottom {
    margin-bottom: -1rem !important;
  }
  .u-sm-pull,
  .u-sm-pullSides,
  .u-sm-pullLeft {
    margin-left: -1rem !important;
  }
  .u-sm-pull,
  .u-sm-pullSides,
  .u-sm-pullRight {
    margin-right: -1rem !important;
  }
  .u-sm-pull1,
  .u-sm-pullEnds1,
  .u-sm-pullTop1 {
    margin-top: -1.125rem !important;
  }
  .u-sm-pull1,
  .u-sm-pullEnds1,
  .u-sm-pullBottom1 {
    margin-bottom: -1.125rem !important;
  }
  .u-sm-pull1,
  .u-sm-pullSides1,
  .u-sm-pullLeft1 {
    margin-left: -1.125rem !important;
  }
  .u-sm-pull1,
  .u-sm-pullSides1,
  .u-sm-pullRight1 {
    margin-right: -1.125rem !important;
  }
  .u-sm-pull2,
  .u-sm-pullEnds2,
  .u-sm-pullTop2 {
    margin-top: -1.26562rem !important;
  }
  .u-sm-pull2,
  .u-sm-pullEnds2,
  .u-sm-pullBottom2 {
    margin-bottom: -1.26562rem !important;
  }
  .u-sm-pull2,
  .u-sm-pullSides2,
  .u-sm-pullLeft2 {
    margin-left: -1.26562rem !important;
  }
  .u-sm-pull2,
  .u-sm-pullSides2,
  .u-sm-pullRight2 {
    margin-right: -1.26562rem !important;
  }
  .u-sm-pull3,
  .u-sm-pullEnds3,
  .u-sm-pullTop3 {
    margin-top: -1.42383rem !important;
  }
  .u-sm-pull3,
  .u-sm-pullEnds3,
  .u-sm-pullBottom3 {
    margin-bottom: -1.42383rem !important;
  }
  .u-sm-pull3,
  .u-sm-pullSides3,
  .u-sm-pullLeft3 {
    margin-left: -1.42383rem !important;
  }
  .u-sm-pull3,
  .u-sm-pullSides3,
  .u-sm-pullRight3 {
    margin-right: -1.42383rem !important;
  }
  .u-sm-pull4,
  .u-sm-pullEnds4,
  .u-sm-pullTop4 {
    margin-top: -1.60181rem !important;
  }
  .u-sm-pull4,
  .u-sm-pullEnds4,
  .u-sm-pullBottom4 {
    margin-bottom: -1.60181rem !important;
  }
  .u-sm-pull4,
  .u-sm-pullSides4,
  .u-sm-pullLeft4 {
    margin-left: -1.60181rem !important;
  }
  .u-sm-pull4,
  .u-sm-pullSides4,
  .u-sm-pullRight4 {
    margin-right: -1.60181rem !important;
  }
  .u-sm-pull5,
  .u-sm-pullEnds5,
  .u-sm-pullTop5 {
    margin-top: -1.80203rem !important;
  }
  .u-sm-pull5,
  .u-sm-pullEnds5,
  .u-sm-pullBottom5 {
    margin-bottom: -1.80203rem !important;
  }
  .u-sm-pull5,
  .u-sm-pullSides5,
  .u-sm-pullLeft5 {
    margin-left: -1.80203rem !important;
  }
  .u-sm-pull5,
  .u-sm-pullSides5,
  .u-sm-pullRight5 {
    margin-right: -1.80203rem !important;
  }
  .u-sm-pull6,
  .u-sm-pullEnds6,
  .u-sm-pullTop6 {
    margin-top: -2.02729rem !important;
  }
  .u-sm-pull6,
  .u-sm-pullEnds6,
  .u-sm-pullBottom6 {
    margin-bottom: -2.02729rem !important;
  }
  .u-sm-pull6,
  .u-sm-pullSides6,
  .u-sm-pullLeft6 {
    margin-left: -2.02729rem !important;
  }
  .u-sm-pull6,
  .u-sm-pullSides6,
  .u-sm-pullRight6 {
    margin-right: -2.02729rem !important;
  }
  .u-sm-pull7,
  .u-sm-pullEnds7,
  .u-sm-pullTop7 {
    margin-top: -2.2807rem !important;
  }
  .u-sm-pull7,
  .u-sm-pullEnds7,
  .u-sm-pullBottom7 {
    margin-bottom: -2.2807rem !important;
  }
  .u-sm-pull7,
  .u-sm-pullSides7,
  .u-sm-pullLeft7 {
    margin-left: -2.2807rem !important;
  }
  .u-sm-pull7,
  .u-sm-pullSides7,
  .u-sm-pullRight7 {
    margin-right: -2.2807rem !important;
  }
  .u-sm-pull8,
  .u-sm-pullEnds8,
  .u-sm-pullTop8 {
    margin-top: -2.56578rem !important;
  }
  .u-sm-pull8,
  .u-sm-pullEnds8,
  .u-sm-pullBottom8 {
    margin-bottom: -2.56578rem !important;
  }
  .u-sm-pull8,
  .u-sm-pullSides8,
  .u-sm-pullLeft8 {
    margin-left: -2.56578rem !important;
  }
  .u-sm-pull8,
  .u-sm-pullSides8,
  .u-sm-pullRight8 {
    margin-right: -2.56578rem !important;
  }
  .u-sm-pull9,
  .u-sm-pullEnds9,
  .u-sm-pullTop9 {
    margin-top: -2.88651rem !important;
  }
  .u-sm-pull9,
  .u-sm-pullEnds9,
  .u-sm-pullBottom9 {
    margin-bottom: -2.88651rem !important;
  }
  .u-sm-pull9,
  .u-sm-pullSides9,
  .u-sm-pullLeft9 {
    margin-left: -2.88651rem !important;
  }
  .u-sm-pull9,
  .u-sm-pullSides9,
  .u-sm-pullRight9 {
    margin-right: -2.88651rem !important;
  }
  .u-sm-pull10,
  .u-sm-pullEnds10,
  .u-sm-pullTop10 {
    margin-top: -3.24732rem !important;
  }
  .u-sm-pull10,
  .u-sm-pullEnds10,
  .u-sm-pullBottom10 {
    margin-bottom: -3.24732rem !important;
  }
  .u-sm-pull10,
  .u-sm-pullSides10,
  .u-sm-pullLeft10 {
    margin-left: -3.24732rem !important;
  }
  .u-sm-pull10,
  .u-sm-pullSides10,
  .u-sm-pullRight10 {
    margin-right: -3.24732rem !important;
  }
  .u-sm-pull11,
  .u-sm-pullEnds11,
  .u-sm-pullTop11 {
    margin-top: -3.65324rem !important;
  }
  .u-sm-pull11,
  .u-sm-pullEnds11,
  .u-sm-pullBottom11 {
    margin-bottom: -3.65324rem !important;
  }
  .u-sm-pull11,
  .u-sm-pullSides11,
  .u-sm-pullLeft11 {
    margin-left: -3.65324rem !important;
  }
  .u-sm-pull11,
  .u-sm-pullSides11,
  .u-sm-pullRight11 {
    margin-right: -3.65324rem !important;
  }
  .u-sm-pull12,
  .u-sm-pullEnds12,
  .u-sm-pullTop12 {
    margin-top: -4.10989rem !important;
  }
  .u-sm-pull12,
  .u-sm-pullEnds12,
  .u-sm-pullBottom12 {
    margin-bottom: -4.10989rem !important;
  }
  .u-sm-pull12,
  .u-sm-pullSides12,
  .u-sm-pullLeft12 {
    margin-left: -4.10989rem !important;
  }
  .u-sm-pull12,
  .u-sm-pullSides12,
  .u-sm-pullRight12 {
    margin-right: -4.10989rem !important;
  }
  .u-sm-spaceItemsNone > * + * {
    margin-top: 0rem;
  }
  .u-sm-staggerItemsNone > * + * {
    margin-top: 0em;
  }
}

@media (min-width: 47em) {
  .u-md-space09,
  .u-md-spaceEnds09,
  .u-md-spaceTop09 {
    margin-top: 0.34644rem !important;
  }
  .u-md-space09,
  .u-md-spaceEnds09,
  .u-md-spaceBottom09 {
    margin-bottom: 0.34644rem !important;
  }
  .u-md-space09,
  .u-md-spaceSides09,
  .u-md-spaceLeft09 {
    margin-left: 0.34644rem !important;
  }
  .u-md-space09,
  .u-md-spaceSides09,
  .u-md-spaceRight09 {
    margin-right: 0.34644rem !important;
  }
  .u-md-pad09,
  .u-md-padEnds09,
  .u-md-padTop09 {
    padding-top: 0.34644rem !important;
  }
  .u-md-pad09,
  .u-md-padEnds09,
  .u-md-padBottom09 {
    padding-bottom: 0.34644rem !important;
  }
  .u-md-pad09,
  .u-md-padSides09,
  .u-md-padLeft09 {
    padding-left: 0.34644rem !important;
  }
  .u-md-pad09,
  .u-md-padSides09,
  .u-md-padRight09 {
    padding-right: 0.34644rem !important;
  }
  .u-md-space08,
  .u-md-spaceEnds08,
  .u-md-spaceTop08 {
    margin-top: 0.38974rem !important;
  }
  .u-md-space08,
  .u-md-spaceEnds08,
  .u-md-spaceBottom08 {
    margin-bottom: 0.38974rem !important;
  }
  .u-md-space08,
  .u-md-spaceSides08,
  .u-md-spaceLeft08 {
    margin-left: 0.38974rem !important;
  }
  .u-md-space08,
  .u-md-spaceSides08,
  .u-md-spaceRight08 {
    margin-right: 0.38974rem !important;
  }
  .u-md-pad08,
  .u-md-padEnds08,
  .u-md-padTop08 {
    padding-top: 0.38974rem !important;
  }
  .u-md-pad08,
  .u-md-padEnds08,
  .u-md-padBottom08 {
    padding-bottom: 0.38974rem !important;
  }
  .u-md-pad08,
  .u-md-padSides08,
  .u-md-padLeft08 {
    padding-left: 0.38974rem !important;
  }
  .u-md-pad08,
  .u-md-padSides08,
  .u-md-padRight08 {
    padding-right: 0.38974rem !important;
  }
  .u-md-space07,
  .u-md-spaceEnds07,
  .u-md-spaceTop07 {
    margin-top: 0.43846rem !important;
  }
  .u-md-space07,
  .u-md-spaceEnds07,
  .u-md-spaceBottom07 {
    margin-bottom: 0.43846rem !important;
  }
  .u-md-space07,
  .u-md-spaceSides07,
  .u-md-spaceLeft07 {
    margin-left: 0.43846rem !important;
  }
  .u-md-space07,
  .u-md-spaceSides07,
  .u-md-spaceRight07 {
    margin-right: 0.43846rem !important;
  }
  .u-md-pad07,
  .u-md-padEnds07,
  .u-md-padTop07 {
    padding-top: 0.43846rem !important;
  }
  .u-md-pad07,
  .u-md-padEnds07,
  .u-md-padBottom07 {
    padding-bottom: 0.43846rem !important;
  }
  .u-md-pad07,
  .u-md-padSides07,
  .u-md-padLeft07 {
    padding-left: 0.43846rem !important;
  }
  .u-md-pad07,
  .u-md-padSides07,
  .u-md-padRight07 {
    padding-right: 0.43846rem !important;
  }
  .u-md-space06,
  .u-md-spaceEnds06,
  .u-md-spaceTop06 {
    margin-top: 0.49327rem !important;
  }
  .u-md-space06,
  .u-md-spaceEnds06,
  .u-md-spaceBottom06 {
    margin-bottom: 0.49327rem !important;
  }
  .u-md-space06,
  .u-md-spaceSides06,
  .u-md-spaceLeft06 {
    margin-left: 0.49327rem !important;
  }
  .u-md-space06,
  .u-md-spaceSides06,
  .u-md-spaceRight06 {
    margin-right: 0.49327rem !important;
  }
  .u-md-pad06,
  .u-md-padEnds06,
  .u-md-padTop06 {
    padding-top: 0.49327rem !important;
  }
  .u-md-pad06,
  .u-md-padEnds06,
  .u-md-padBottom06 {
    padding-bottom: 0.49327rem !important;
  }
  .u-md-pad06,
  .u-md-padSides06,
  .u-md-padLeft06 {
    padding-left: 0.49327rem !important;
  }
  .u-md-pad06,
  .u-md-padSides06,
  .u-md-padRight06 {
    padding-right: 0.49327rem !important;
  }
  .u-md-space05,
  .u-md-spaceEnds05,
  .u-md-spaceTop05 {
    margin-top: 0.55493rem !important;
  }
  .u-md-space05,
  .u-md-spaceEnds05,
  .u-md-spaceBottom05 {
    margin-bottom: 0.55493rem !important;
  }
  .u-md-space05,
  .u-md-spaceSides05,
  .u-md-spaceLeft05 {
    margin-left: 0.55493rem !important;
  }
  .u-md-space05,
  .u-md-spaceSides05,
  .u-md-spaceRight05 {
    margin-right: 0.55493rem !important;
  }
  .u-md-pad05,
  .u-md-padEnds05,
  .u-md-padTop05 {
    padding-top: 0.55493rem !important;
  }
  .u-md-pad05,
  .u-md-padEnds05,
  .u-md-padBottom05 {
    padding-bottom: 0.55493rem !important;
  }
  .u-md-pad05,
  .u-md-padSides05,
  .u-md-padLeft05 {
    padding-left: 0.55493rem !important;
  }
  .u-md-pad05,
  .u-md-padSides05,
  .u-md-padRight05 {
    padding-right: 0.55493rem !important;
  }
  .u-md-space04,
  .u-md-spaceEnds04,
  .u-md-spaceTop04 {
    margin-top: 0.6243rem !important;
  }
  .u-md-space04,
  .u-md-spaceEnds04,
  .u-md-spaceBottom04 {
    margin-bottom: 0.6243rem !important;
  }
  .u-md-space04,
  .u-md-spaceSides04,
  .u-md-spaceLeft04 {
    margin-left: 0.6243rem !important;
  }
  .u-md-space04,
  .u-md-spaceSides04,
  .u-md-spaceRight04 {
    margin-right: 0.6243rem !important;
  }
  .u-md-pad04,
  .u-md-padEnds04,
  .u-md-padTop04 {
    padding-top: 0.6243rem !important;
  }
  .u-md-pad04,
  .u-md-padEnds04,
  .u-md-padBottom04 {
    padding-bottom: 0.6243rem !important;
  }
  .u-md-pad04,
  .u-md-padSides04,
  .u-md-padLeft04 {
    padding-left: 0.6243rem !important;
  }
  .u-md-pad04,
  .u-md-padSides04,
  .u-md-padRight04 {
    padding-right: 0.6243rem !important;
  }
  .u-md-space03,
  .u-md-spaceEnds03,
  .u-md-spaceTop03 {
    margin-top: 0.70233rem !important;
  }
  .u-md-space03,
  .u-md-spaceEnds03,
  .u-md-spaceBottom03 {
    margin-bottom: 0.70233rem !important;
  }
  .u-md-space03,
  .u-md-spaceSides03,
  .u-md-spaceLeft03 {
    margin-left: 0.70233rem !important;
  }
  .u-md-space03,
  .u-md-spaceSides03,
  .u-md-spaceRight03 {
    margin-right: 0.70233rem !important;
  }
  .u-md-pad03,
  .u-md-padEnds03,
  .u-md-padTop03 {
    padding-top: 0.70233rem !important;
  }
  .u-md-pad03,
  .u-md-padEnds03,
  .u-md-padBottom03 {
    padding-bottom: 0.70233rem !important;
  }
  .u-md-pad03,
  .u-md-padSides03,
  .u-md-padLeft03 {
    padding-left: 0.70233rem !important;
  }
  .u-md-pad03,
  .u-md-padSides03,
  .u-md-padRight03 {
    padding-right: 0.70233rem !important;
  }
  .u-md-space02,
  .u-md-spaceEnds02,
  .u-md-spaceTop02 {
    margin-top: 0.79012rem !important;
  }
  .u-md-space02,
  .u-md-spaceEnds02,
  .u-md-spaceBottom02 {
    margin-bottom: 0.79012rem !important;
  }
  .u-md-space02,
  .u-md-spaceSides02,
  .u-md-spaceLeft02 {
    margin-left: 0.79012rem !important;
  }
  .u-md-space02,
  .u-md-spaceSides02,
  .u-md-spaceRight02 {
    margin-right: 0.79012rem !important;
  }
  .u-md-pad02,
  .u-md-padEnds02,
  .u-md-padTop02 {
    padding-top: 0.79012rem !important;
  }
  .u-md-pad02,
  .u-md-padEnds02,
  .u-md-padBottom02 {
    padding-bottom: 0.79012rem !important;
  }
  .u-md-pad02,
  .u-md-padSides02,
  .u-md-padLeft02 {
    padding-left: 0.79012rem !important;
  }
  .u-md-pad02,
  .u-md-padSides02,
  .u-md-padRight02 {
    padding-right: 0.79012rem !important;
  }
  .u-md-space01,
  .u-md-spaceEnds01,
  .u-md-spaceTop01 {
    margin-top: 0.88889rem !important;
  }
  .u-md-space01,
  .u-md-spaceEnds01,
  .u-md-spaceBottom01 {
    margin-bottom: 0.88889rem !important;
  }
  .u-md-space01,
  .u-md-spaceSides01,
  .u-md-spaceLeft01 {
    margin-left: 0.88889rem !important;
  }
  .u-md-space01,
  .u-md-spaceSides01,
  .u-md-spaceRight01 {
    margin-right: 0.88889rem !important;
  }
  .u-md-pad01,
  .u-md-padEnds01,
  .u-md-padTop01 {
    padding-top: 0.88889rem !important;
  }
  .u-md-pad01,
  .u-md-padEnds01,
  .u-md-padBottom01 {
    padding-bottom: 0.88889rem !important;
  }
  .u-md-pad01,
  .u-md-padSides01,
  .u-md-padLeft01 {
    padding-left: 0.88889rem !important;
  }
  .u-md-pad01,
  .u-md-padSides01,
  .u-md-padRight01 {
    padding-right: 0.88889rem !important;
  }
  .u-md-space,
  .u-md-spaceEnds,
  .u-md-spaceTop {
    margin-top: 1rem !important;
  }
  .u-md-space,
  .u-md-spaceEnds,
  .u-md-spaceBottom {
    margin-bottom: 1rem !important;
  }
  .u-md-space,
  .u-md-spaceSides,
  .u-md-spaceLeft {
    margin-left: 1rem !important;
  }
  .u-md-space,
  .u-md-spaceSides,
  .u-md-spaceRight {
    margin-right: 1rem !important;
  }
  .u-md-pad,
  .u-md-padEnds,
  .u-md-padTop {
    padding-top: 1rem !important;
  }
  .u-md-pad,
  .u-md-padEnds,
  .u-md-padBottom {
    padding-bottom: 1rem !important;
  }
  .u-md-pad,
  .u-md-padSides,
  .u-md-padLeft {
    padding-left: 1rem !important;
  }
  .u-md-pad,
  .u-md-padSides,
  .u-md-padRight {
    padding-right: 1rem !important;
  }
  .u-md-space1,
  .u-md-spaceEnds1,
  .u-md-spaceTop1 {
    margin-top: 1.125rem !important;
  }
  .u-md-space1,
  .u-md-spaceEnds1,
  .u-md-spaceBottom1 {
    margin-bottom: 1.125rem !important;
  }
  .u-md-space1,
  .u-md-spaceSides1,
  .u-md-spaceLeft1 {
    margin-left: 1.125rem !important;
  }
  .u-md-space1,
  .u-md-spaceSides1,
  .u-md-spaceRight1 {
    margin-right: 1.125rem !important;
  }
  .u-md-pad1,
  .u-md-padEnds1,
  .u-md-padTop1 {
    padding-top: 1.125rem !important;
  }
  .u-md-pad1,
  .u-md-padEnds1,
  .u-md-padBottom1 {
    padding-bottom: 1.125rem !important;
  }
  .u-md-pad1,
  .u-md-padSides1,
  .u-md-padLeft1 {
    padding-left: 1.125rem !important;
  }
  .u-md-pad1,
  .u-md-padSides1,
  .u-md-padRight1 {
    padding-right: 1.125rem !important;
  }
  .u-md-space2,
  .u-md-spaceEnds2,
  .u-md-spaceTop2 {
    margin-top: 1.26563rem !important;
  }
  .u-md-space2,
  .u-md-spaceEnds2,
  .u-md-spaceBottom2 {
    margin-bottom: 1.26563rem !important;
  }
  .u-md-space2,
  .u-md-spaceSides2,
  .u-md-spaceLeft2 {
    margin-left: 1.26563rem !important;
  }
  .u-md-space2,
  .u-md-spaceSides2,
  .u-md-spaceRight2 {
    margin-right: 1.26563rem !important;
  }
  .u-md-pad2,
  .u-md-padEnds2,
  .u-md-padTop2 {
    padding-top: 1.26563rem !important;
  }
  .u-md-pad2,
  .u-md-padEnds2,
  .u-md-padBottom2 {
    padding-bottom: 1.26563rem !important;
  }
  .u-md-pad2,
  .u-md-padSides2,
  .u-md-padLeft2 {
    padding-left: 1.26563rem !important;
  }
  .u-md-pad2,
  .u-md-padSides2,
  .u-md-padRight2 {
    padding-right: 1.26563rem !important;
  }
  .u-md-space3,
  .u-md-spaceEnds3,
  .u-md-spaceTop3 {
    margin-top: 1.42383rem !important;
  }
  .u-md-space3,
  .u-md-spaceEnds3,
  .u-md-spaceBottom3 {
    margin-bottom: 1.42383rem !important;
  }
  .u-md-space3,
  .u-md-spaceSides3,
  .u-md-spaceLeft3 {
    margin-left: 1.42383rem !important;
  }
  .u-md-space3,
  .u-md-spaceSides3,
  .u-md-spaceRight3 {
    margin-right: 1.42383rem !important;
  }
  .u-md-pad3,
  .u-md-padEnds3,
  .u-md-padTop3 {
    padding-top: 1.42383rem !important;
  }
  .u-md-pad3,
  .u-md-padEnds3,
  .u-md-padBottom3 {
    padding-bottom: 1.42383rem !important;
  }
  .u-md-pad3,
  .u-md-padSides3,
  .u-md-padLeft3 {
    padding-left: 1.42383rem !important;
  }
  .u-md-pad3,
  .u-md-padSides3,
  .u-md-padRight3 {
    padding-right: 1.42383rem !important;
  }
  .u-md-space4,
  .u-md-spaceEnds4,
  .u-md-spaceTop4 {
    margin-top: 1.60181rem !important;
  }
  .u-md-space4,
  .u-md-spaceEnds4,
  .u-md-spaceBottom4 {
    margin-bottom: 1.60181rem !important;
  }
  .u-md-space4,
  .u-md-spaceSides4,
  .u-md-spaceLeft4 {
    margin-left: 1.60181rem !important;
  }
  .u-md-space4,
  .u-md-spaceSides4,
  .u-md-spaceRight4 {
    margin-right: 1.60181rem !important;
  }
  .u-md-pad4,
  .u-md-padEnds4,
  .u-md-padTop4 {
    padding-top: 1.60181rem !important;
  }
  .u-md-pad4,
  .u-md-padEnds4,
  .u-md-padBottom4 {
    padding-bottom: 1.60181rem !important;
  }
  .u-md-pad4,
  .u-md-padSides4,
  .u-md-padLeft4 {
    padding-left: 1.60181rem !important;
  }
  .u-md-pad4,
  .u-md-padSides4,
  .u-md-padRight4 {
    padding-right: 1.60181rem !important;
  }
  .u-md-space5,
  .u-md-spaceEnds5,
  .u-md-spaceTop5 {
    margin-top: 1.80203rem !important;
  }
  .u-md-space5,
  .u-md-spaceEnds5,
  .u-md-spaceBottom5 {
    margin-bottom: 1.80203rem !important;
  }
  .u-md-space5,
  .u-md-spaceSides5,
  .u-md-spaceLeft5 {
    margin-left: 1.80203rem !important;
  }
  .u-md-space5,
  .u-md-spaceSides5,
  .u-md-spaceRight5 {
    margin-right: 1.80203rem !important;
  }
  .u-md-pad5,
  .u-md-padEnds5,
  .u-md-padTop5 {
    padding-top: 1.80203rem !important;
  }
  .u-md-pad5,
  .u-md-padEnds5,
  .u-md-padBottom5 {
    padding-bottom: 1.80203rem !important;
  }
  .u-md-pad5,
  .u-md-padSides5,
  .u-md-padLeft5 {
    padding-left: 1.80203rem !important;
  }
  .u-md-pad5,
  .u-md-padSides5,
  .u-md-padRight5 {
    padding-right: 1.80203rem !important;
  }
  .u-md-space6,
  .u-md-spaceEnds6,
  .u-md-spaceTop6 {
    margin-top: 2.02729rem !important;
  }
  .u-md-space6,
  .u-md-spaceEnds6,
  .u-md-spaceBottom6 {
    margin-bottom: 2.02729rem !important;
  }
  .u-md-space6,
  .u-md-spaceSides6,
  .u-md-spaceLeft6 {
    margin-left: 2.02729rem !important;
  }
  .u-md-space6,
  .u-md-spaceSides6,
  .u-md-spaceRight6 {
    margin-right: 2.02729rem !important;
  }
  .u-md-pad6,
  .u-md-padEnds6,
  .u-md-padTop6 {
    padding-top: 2.02729rem !important;
  }
  .u-md-pad6,
  .u-md-padEnds6,
  .u-md-padBottom6 {
    padding-bottom: 2.02729rem !important;
  }
  .u-md-pad6,
  .u-md-padSides6,
  .u-md-padLeft6 {
    padding-left: 2.02729rem !important;
  }
  .u-md-pad6,
  .u-md-padSides6,
  .u-md-padRight6 {
    padding-right: 2.02729rem !important;
  }
  .u-md-space7,
  .u-md-spaceEnds7,
  .u-md-spaceTop7 {
    margin-top: 2.2807rem !important;
  }
  .u-md-space7,
  .u-md-spaceEnds7,
  .u-md-spaceBottom7 {
    margin-bottom: 2.2807rem !important;
  }
  .u-md-space7,
  .u-md-spaceSides7,
  .u-md-spaceLeft7 {
    margin-left: 2.2807rem !important;
  }
  .u-md-space7,
  .u-md-spaceSides7,
  .u-md-spaceRight7 {
    margin-right: 2.2807rem !important;
  }
  .u-md-pad7,
  .u-md-padEnds7,
  .u-md-padTop7 {
    padding-top: 2.2807rem !important;
  }
  .u-md-pad7,
  .u-md-padEnds7,
  .u-md-padBottom7 {
    padding-bottom: 2.2807rem !important;
  }
  .u-md-pad7,
  .u-md-padSides7,
  .u-md-padLeft7 {
    padding-left: 2.2807rem !important;
  }
  .u-md-pad7,
  .u-md-padSides7,
  .u-md-padRight7 {
    padding-right: 2.2807rem !important;
  }
  .u-md-space8,
  .u-md-spaceEnds8,
  .u-md-spaceTop8 {
    margin-top: 2.56578rem !important;
  }
  .u-md-space8,
  .u-md-spaceEnds8,
  .u-md-spaceBottom8 {
    margin-bottom: 2.56578rem !important;
  }
  .u-md-space8,
  .u-md-spaceSides8,
  .u-md-spaceLeft8 {
    margin-left: 2.56578rem !important;
  }
  .u-md-space8,
  .u-md-spaceSides8,
  .u-md-spaceRight8 {
    margin-right: 2.56578rem !important;
  }
  .u-md-pad8,
  .u-md-padEnds8,
  .u-md-padTop8 {
    padding-top: 2.56578rem !important;
  }
  .u-md-pad8,
  .u-md-padEnds8,
  .u-md-padBottom8 {
    padding-bottom: 2.56578rem !important;
  }
  .u-md-pad8,
  .u-md-padSides8,
  .u-md-padLeft8 {
    padding-left: 2.56578rem !important;
  }
  .u-md-pad8,
  .u-md-padSides8,
  .u-md-padRight8 {
    padding-right: 2.56578rem !important;
  }
  .u-md-space9,
  .u-md-spaceEnds9,
  .u-md-spaceTop9 {
    margin-top: 2.88651rem !important;
  }
  .u-md-space9,
  .u-md-spaceEnds9,
  .u-md-spaceBottom9 {
    margin-bottom: 2.88651rem !important;
  }
  .u-md-space9,
  .u-md-spaceSides9,
  .u-md-spaceLeft9 {
    margin-left: 2.88651rem !important;
  }
  .u-md-space9,
  .u-md-spaceSides9,
  .u-md-spaceRight9 {
    margin-right: 2.88651rem !important;
  }
  .u-md-pad9,
  .u-md-padEnds9,
  .u-md-padTop9 {
    padding-top: 2.88651rem !important;
  }
  .u-md-pad9,
  .u-md-padEnds9,
  .u-md-padBottom9 {
    padding-bottom: 2.88651rem !important;
  }
  .u-md-pad9,
  .u-md-padSides9,
  .u-md-padLeft9 {
    padding-left: 2.88651rem !important;
  }
  .u-md-pad9,
  .u-md-padSides9,
  .u-md-padRight9 {
    padding-right: 2.88651rem !important;
  }
  .u-md-space10,
  .u-md-spaceEnds10,
  .u-md-spaceTop10 {
    margin-top: 3.24732rem !important;
  }
  .u-md-space10,
  .u-md-spaceEnds10,
  .u-md-spaceBottom10 {
    margin-bottom: 3.24732rem !important;
  }
  .u-md-space10,
  .u-md-spaceSides10,
  .u-md-spaceLeft10 {
    margin-left: 3.24732rem !important;
  }
  .u-md-space10,
  .u-md-spaceSides10,
  .u-md-spaceRight10 {
    margin-right: 3.24732rem !important;
  }
  .u-md-pad10,
  .u-md-padEnds10,
  .u-md-padTop10 {
    padding-top: 3.24732rem !important;
  }
  .u-md-pad10,
  .u-md-padEnds10,
  .u-md-padBottom10 {
    padding-bottom: 3.24732rem !important;
  }
  .u-md-pad10,
  .u-md-padSides10,
  .u-md-padLeft10 {
    padding-left: 3.24732rem !important;
  }
  .u-md-pad10,
  .u-md-padSides10,
  .u-md-padRight10 {
    padding-right: 3.24732rem !important;
  }
  .u-md-space11,
  .u-md-spaceEnds11,
  .u-md-spaceTop11 {
    margin-top: 3.65324rem !important;
  }
  .u-md-space11,
  .u-md-spaceEnds11,
  .u-md-spaceBottom11 {
    margin-bottom: 3.65324rem !important;
  }
  .u-md-space11,
  .u-md-spaceSides11,
  .u-md-spaceLeft11 {
    margin-left: 3.65324rem !important;
  }
  .u-md-space11,
  .u-md-spaceSides11,
  .u-md-spaceRight11 {
    margin-right: 3.65324rem !important;
  }
  .u-md-pad11,
  .u-md-padEnds11,
  .u-md-padTop11 {
    padding-top: 3.65324rem !important;
  }
  .u-md-pad11,
  .u-md-padEnds11,
  .u-md-padBottom11 {
    padding-bottom: 3.65324rem !important;
  }
  .u-md-pad11,
  .u-md-padSides11,
  .u-md-padLeft11 {
    padding-left: 3.65324rem !important;
  }
  .u-md-pad11,
  .u-md-padSides11,
  .u-md-padRight11 {
    padding-right: 3.65324rem !important;
  }
  .u-md-space12,
  .u-md-spaceEnds12,
  .u-md-spaceTop12 {
    margin-top: 4.10989rem !important;
  }
  .u-md-space12,
  .u-md-spaceEnds12,
  .u-md-spaceBottom12 {
    margin-bottom: 4.10989rem !important;
  }
  .u-md-space12,
  .u-md-spaceSides12,
  .u-md-spaceLeft12 {
    margin-left: 4.10989rem !important;
  }
  .u-md-space12,
  .u-md-spaceSides12,
  .u-md-spaceRight12 {
    margin-right: 4.10989rem !important;
  }
  .u-md-pad12,
  .u-md-padEnds12,
  .u-md-padTop12 {
    padding-top: 4.10989rem !important;
  }
  .u-md-pad12,
  .u-md-padEnds12,
  .u-md-padBottom12 {
    padding-bottom: 4.10989rem !important;
  }
  .u-md-pad12,
  .u-md-padSides12,
  .u-md-padLeft12 {
    padding-left: 4.10989rem !important;
  }
  .u-md-pad12,
  .u-md-padSides12,
  .u-md-padRight12 {
    padding-right: 4.10989rem !important;
  }
  .u-md-spaceNone,
  .u-md-spaceEndsNone,
  .u-md-spaceTopNone {
    margin-top: 0 !important;
  }
  .u-md-spaceNone,
  .u-md-spaceEndsNone,
  .u-md-spaceBottomNone {
    margin-bottom: 0 !important;
  }
  .u-md-spaceNone,
  .u-md-spaceSidesNone,
  .u-md-spaceLeftNone {
    margin-left: 0 !important;
  }
  .u-md-spaceNone,
  .u-md-spaceSidesNone,
  .u-md-spaceRightNone {
    margin-right: 0 !important;
  }
  .u-md-padNone,
  .u-md-padEndsNone,
  .u-md-padTopNone {
    padding-top: 0 !important;
  }
  .u-md-padNone,
  .u-md-padEndsNone,
  .u-md-padBottomNone {
    padding-bottom: 0 !important;
  }
  .u-md-padNone,
  .u-md-padSidesNone,
  .u-md-padLeftNone {
    padding-left: 0 !important;
  }
  .u-md-padNone,
  .u-md-padSidesNone,
  .u-md-padRightNone {
    padding-right: 0 !important;
  }
  .u-md-pull09,
  .u-md-pullEnds09,
  .u-md-pullTop09 {
    margin-top: -0.34644rem !important;
  }
  .u-md-pull09,
  .u-md-pullEnds09,
  .u-md-pullBottom09 {
    margin-bottom: -0.34644rem !important;
  }
  .u-md-pull09,
  .u-md-pullSides09,
  .u-md-pullLeft09 {
    margin-left: -0.34644rem !important;
  }
  .u-md-pull09,
  .u-md-pullSides09,
  .u-md-pullRight09 {
    margin-right: -0.34644rem !important;
  }
  .u-md-pull08,
  .u-md-pullEnds08,
  .u-md-pullTop08 {
    margin-top: -0.38974rem !important;
  }
  .u-md-pull08,
  .u-md-pullEnds08,
  .u-md-pullBottom08 {
    margin-bottom: -0.38974rem !important;
  }
  .u-md-pull08,
  .u-md-pullSides08,
  .u-md-pullLeft08 {
    margin-left: -0.38974rem !important;
  }
  .u-md-pull08,
  .u-md-pullSides08,
  .u-md-pullRight08 {
    margin-right: -0.38974rem !important;
  }
  .u-md-pull07,
  .u-md-pullEnds07,
  .u-md-pullTop07 {
    margin-top: -0.43846rem !important;
  }
  .u-md-pull07,
  .u-md-pullEnds07,
  .u-md-pullBottom07 {
    margin-bottom: -0.43846rem !important;
  }
  .u-md-pull07,
  .u-md-pullSides07,
  .u-md-pullLeft07 {
    margin-left: -0.43846rem !important;
  }
  .u-md-pull07,
  .u-md-pullSides07,
  .u-md-pullRight07 {
    margin-right: -0.43846rem !important;
  }
  .u-md-pull06,
  .u-md-pullEnds06,
  .u-md-pullTop06 {
    margin-top: -0.49327rem !important;
  }
  .u-md-pull06,
  .u-md-pullEnds06,
  .u-md-pullBottom06 {
    margin-bottom: -0.49327rem !important;
  }
  .u-md-pull06,
  .u-md-pullSides06,
  .u-md-pullLeft06 {
    margin-left: -0.49327rem !important;
  }
  .u-md-pull06,
  .u-md-pullSides06,
  .u-md-pullRight06 {
    margin-right: -0.49327rem !important;
  }
  .u-md-pull05,
  .u-md-pullEnds05,
  .u-md-pullTop05 {
    margin-top: -0.55493rem !important;
  }
  .u-md-pull05,
  .u-md-pullEnds05,
  .u-md-pullBottom05 {
    margin-bottom: -0.55493rem !important;
  }
  .u-md-pull05,
  .u-md-pullSides05,
  .u-md-pullLeft05 {
    margin-left: -0.55493rem !important;
  }
  .u-md-pull05,
  .u-md-pullSides05,
  .u-md-pullRight05 {
    margin-right: -0.55493rem !important;
  }
  .u-md-pull04,
  .u-md-pullEnds04,
  .u-md-pullTop04 {
    margin-top: -0.6243rem !important;
  }
  .u-md-pull04,
  .u-md-pullEnds04,
  .u-md-pullBottom04 {
    margin-bottom: -0.6243rem !important;
  }
  .u-md-pull04,
  .u-md-pullSides04,
  .u-md-pullLeft04 {
    margin-left: -0.6243rem !important;
  }
  .u-md-pull04,
  .u-md-pullSides04,
  .u-md-pullRight04 {
    margin-right: -0.6243rem !important;
  }
  .u-md-pull03,
  .u-md-pullEnds03,
  .u-md-pullTop03 {
    margin-top: -0.70233rem !important;
  }
  .u-md-pull03,
  .u-md-pullEnds03,
  .u-md-pullBottom03 {
    margin-bottom: -0.70233rem !important;
  }
  .u-md-pull03,
  .u-md-pullSides03,
  .u-md-pullLeft03 {
    margin-left: -0.70233rem !important;
  }
  .u-md-pull03,
  .u-md-pullSides03,
  .u-md-pullRight03 {
    margin-right: -0.70233rem !important;
  }
  .u-md-pull02,
  .u-md-pullEnds02,
  .u-md-pullTop02 {
    margin-top: -0.79012rem !important;
  }
  .u-md-pull02,
  .u-md-pullEnds02,
  .u-md-pullBottom02 {
    margin-bottom: -0.79012rem !important;
  }
  .u-md-pull02,
  .u-md-pullSides02,
  .u-md-pullLeft02 {
    margin-left: -0.79012rem !important;
  }
  .u-md-pull02,
  .u-md-pullSides02,
  .u-md-pullRight02 {
    margin-right: -0.79012rem !important;
  }
  .u-md-pull01,
  .u-md-pullEnds01,
  .u-md-pullTop01 {
    margin-top: -0.88889rem !important;
  }
  .u-md-pull01,
  .u-md-pullEnds01,
  .u-md-pullBottom01 {
    margin-bottom: -0.88889rem !important;
  }
  .u-md-pull01,
  .u-md-pullSides01,
  .u-md-pullLeft01 {
    margin-left: -0.88889rem !important;
  }
  .u-md-pull01,
  .u-md-pullSides01,
  .u-md-pullRight01 {
    margin-right: -0.88889rem !important;
  }
  .u-md-pull,
  .u-md-pullEnds,
  .u-md-pullTop {
    margin-top: -1rem !important;
  }
  .u-md-pull,
  .u-md-pullEnds,
  .u-md-pullBottom {
    margin-bottom: -1rem !important;
  }
  .u-md-pull,
  .u-md-pullSides,
  .u-md-pullLeft {
    margin-left: -1rem !important;
  }
  .u-md-pull,
  .u-md-pullSides,
  .u-md-pullRight {
    margin-right: -1rem !important;
  }
  .u-md-pull1,
  .u-md-pullEnds1,
  .u-md-pullTop1 {
    margin-top: -1.125rem !important;
  }
  .u-md-pull1,
  .u-md-pullEnds1,
  .u-md-pullBottom1 {
    margin-bottom: -1.125rem !important;
  }
  .u-md-pull1,
  .u-md-pullSides1,
  .u-md-pullLeft1 {
    margin-left: -1.125rem !important;
  }
  .u-md-pull1,
  .u-md-pullSides1,
  .u-md-pullRight1 {
    margin-right: -1.125rem !important;
  }
  .u-md-pull2,
  .u-md-pullEnds2,
  .u-md-pullTop2 {
    margin-top: -1.26562rem !important;
  }
  .u-md-pull2,
  .u-md-pullEnds2,
  .u-md-pullBottom2 {
    margin-bottom: -1.26562rem !important;
  }
  .u-md-pull2,
  .u-md-pullSides2,
  .u-md-pullLeft2 {
    margin-left: -1.26562rem !important;
  }
  .u-md-pull2,
  .u-md-pullSides2,
  .u-md-pullRight2 {
    margin-right: -1.26562rem !important;
  }
  .u-md-pull3,
  .u-md-pullEnds3,
  .u-md-pullTop3 {
    margin-top: -1.42383rem !important;
  }
  .u-md-pull3,
  .u-md-pullEnds3,
  .u-md-pullBottom3 {
    margin-bottom: -1.42383rem !important;
  }
  .u-md-pull3,
  .u-md-pullSides3,
  .u-md-pullLeft3 {
    margin-left: -1.42383rem !important;
  }
  .u-md-pull3,
  .u-md-pullSides3,
  .u-md-pullRight3 {
    margin-right: -1.42383rem !important;
  }
  .u-md-pull4,
  .u-md-pullEnds4,
  .u-md-pullTop4 {
    margin-top: -1.60181rem !important;
  }
  .u-md-pull4,
  .u-md-pullEnds4,
  .u-md-pullBottom4 {
    margin-bottom: -1.60181rem !important;
  }
  .u-md-pull4,
  .u-md-pullSides4,
  .u-md-pullLeft4 {
    margin-left: -1.60181rem !important;
  }
  .u-md-pull4,
  .u-md-pullSides4,
  .u-md-pullRight4 {
    margin-right: -1.60181rem !important;
  }
  .u-md-pull5,
  .u-md-pullEnds5,
  .u-md-pullTop5 {
    margin-top: -1.80203rem !important;
  }
  .u-md-pull5,
  .u-md-pullEnds5,
  .u-md-pullBottom5 {
    margin-bottom: -1.80203rem !important;
  }
  .u-md-pull5,
  .u-md-pullSides5,
  .u-md-pullLeft5 {
    margin-left: -1.80203rem !important;
  }
  .u-md-pull5,
  .u-md-pullSides5,
  .u-md-pullRight5 {
    margin-right: -1.80203rem !important;
  }
  .u-md-pull6,
  .u-md-pullEnds6,
  .u-md-pullTop6 {
    margin-top: -2.02729rem !important;
  }
  .u-md-pull6,
  .u-md-pullEnds6,
  .u-md-pullBottom6 {
    margin-bottom: -2.02729rem !important;
  }
  .u-md-pull6,
  .u-md-pullSides6,
  .u-md-pullLeft6 {
    margin-left: -2.02729rem !important;
  }
  .u-md-pull6,
  .u-md-pullSides6,
  .u-md-pullRight6 {
    margin-right: -2.02729rem !important;
  }
  .u-md-pull7,
  .u-md-pullEnds7,
  .u-md-pullTop7 {
    margin-top: -2.2807rem !important;
  }
  .u-md-pull7,
  .u-md-pullEnds7,
  .u-md-pullBottom7 {
    margin-bottom: -2.2807rem !important;
  }
  .u-md-pull7,
  .u-md-pullSides7,
  .u-md-pullLeft7 {
    margin-left: -2.2807rem !important;
  }
  .u-md-pull7,
  .u-md-pullSides7,
  .u-md-pullRight7 {
    margin-right: -2.2807rem !important;
  }
  .u-md-pull8,
  .u-md-pullEnds8,
  .u-md-pullTop8 {
    margin-top: -2.56578rem !important;
  }
  .u-md-pull8,
  .u-md-pullEnds8,
  .u-md-pullBottom8 {
    margin-bottom: -2.56578rem !important;
  }
  .u-md-pull8,
  .u-md-pullSides8,
  .u-md-pullLeft8 {
    margin-left: -2.56578rem !important;
  }
  .u-md-pull8,
  .u-md-pullSides8,
  .u-md-pullRight8 {
    margin-right: -2.56578rem !important;
  }
  .u-md-pull9,
  .u-md-pullEnds9,
  .u-md-pullTop9 {
    margin-top: -2.88651rem !important;
  }
  .u-md-pull9,
  .u-md-pullEnds9,
  .u-md-pullBottom9 {
    margin-bottom: -2.88651rem !important;
  }
  .u-md-pull9,
  .u-md-pullSides9,
  .u-md-pullLeft9 {
    margin-left: -2.88651rem !important;
  }
  .u-md-pull9,
  .u-md-pullSides9,
  .u-md-pullRight9 {
    margin-right: -2.88651rem !important;
  }
  .u-md-pull10,
  .u-md-pullEnds10,
  .u-md-pullTop10 {
    margin-top: -3.24732rem !important;
  }
  .u-md-pull10,
  .u-md-pullEnds10,
  .u-md-pullBottom10 {
    margin-bottom: -3.24732rem !important;
  }
  .u-md-pull10,
  .u-md-pullSides10,
  .u-md-pullLeft10 {
    margin-left: -3.24732rem !important;
  }
  .u-md-pull10,
  .u-md-pullSides10,
  .u-md-pullRight10 {
    margin-right: -3.24732rem !important;
  }
  .u-md-pull11,
  .u-md-pullEnds11,
  .u-md-pullTop11 {
    margin-top: -3.65324rem !important;
  }
  .u-md-pull11,
  .u-md-pullEnds11,
  .u-md-pullBottom11 {
    margin-bottom: -3.65324rem !important;
  }
  .u-md-pull11,
  .u-md-pullSides11,
  .u-md-pullLeft11 {
    margin-left: -3.65324rem !important;
  }
  .u-md-pull11,
  .u-md-pullSides11,
  .u-md-pullRight11 {
    margin-right: -3.65324rem !important;
  }
  .u-md-pull12,
  .u-md-pullEnds12,
  .u-md-pullTop12 {
    margin-top: -4.10989rem !important;
  }
  .u-md-pull12,
  .u-md-pullEnds12,
  .u-md-pullBottom12 {
    margin-bottom: -4.10989rem !important;
  }
  .u-md-pull12,
  .u-md-pullSides12,
  .u-md-pullLeft12 {
    margin-left: -4.10989rem !important;
  }
  .u-md-pull12,
  .u-md-pullSides12,
  .u-md-pullRight12 {
    margin-right: -4.10989rem !important;
  }
  .u-md-spaceItemsNone > * + * {
    margin-top: 0rem;
  }
  .u-md-staggerItemsNone > * + * {
    margin-top: 0em;
  }
}

@media (min-width: 64em) {
  .u-lg-space09,
  .u-lg-spaceEnds09,
  .u-lg-spaceTop09 {
    margin-top: 0.34644rem !important;
  }
  .u-lg-space09,
  .u-lg-spaceEnds09,
  .u-lg-spaceBottom09 {
    margin-bottom: 0.34644rem !important;
  }
  .u-lg-space09,
  .u-lg-spaceSides09,
  .u-lg-spaceLeft09 {
    margin-left: 0.34644rem !important;
  }
  .u-lg-space09,
  .u-lg-spaceSides09,
  .u-lg-spaceRight09 {
    margin-right: 0.34644rem !important;
  }
  .u-lg-pad09,
  .u-lg-padEnds09,
  .u-lg-padTop09 {
    padding-top: 0.34644rem !important;
  }
  .u-lg-pad09,
  .u-lg-padEnds09,
  .u-lg-padBottom09 {
    padding-bottom: 0.34644rem !important;
  }
  .u-lg-pad09,
  .u-lg-padSides09,
  .u-lg-padLeft09 {
    padding-left: 0.34644rem !important;
  }
  .u-lg-pad09,
  .u-lg-padSides09,
  .u-lg-padRight09 {
    padding-right: 0.34644rem !important;
  }
  .u-lg-space08,
  .u-lg-spaceEnds08,
  .u-lg-spaceTop08 {
    margin-top: 0.38974rem !important;
  }
  .u-lg-space08,
  .u-lg-spaceEnds08,
  .u-lg-spaceBottom08 {
    margin-bottom: 0.38974rem !important;
  }
  .u-lg-space08,
  .u-lg-spaceSides08,
  .u-lg-spaceLeft08 {
    margin-left: 0.38974rem !important;
  }
  .u-lg-space08,
  .u-lg-spaceSides08,
  .u-lg-spaceRight08 {
    margin-right: 0.38974rem !important;
  }
  .u-lg-pad08,
  .u-lg-padEnds08,
  .u-lg-padTop08 {
    padding-top: 0.38974rem !important;
  }
  .u-lg-pad08,
  .u-lg-padEnds08,
  .u-lg-padBottom08 {
    padding-bottom: 0.38974rem !important;
  }
  .u-lg-pad08,
  .u-lg-padSides08,
  .u-lg-padLeft08 {
    padding-left: 0.38974rem !important;
  }
  .u-lg-pad08,
  .u-lg-padSides08,
  .u-lg-padRight08 {
    padding-right: 0.38974rem !important;
  }
  .u-lg-space07,
  .u-lg-spaceEnds07,
  .u-lg-spaceTop07 {
    margin-top: 0.43846rem !important;
  }
  .u-lg-space07,
  .u-lg-spaceEnds07,
  .u-lg-spaceBottom07 {
    margin-bottom: 0.43846rem !important;
  }
  .u-lg-space07,
  .u-lg-spaceSides07,
  .u-lg-spaceLeft07 {
    margin-left: 0.43846rem !important;
  }
  .u-lg-space07,
  .u-lg-spaceSides07,
  .u-lg-spaceRight07 {
    margin-right: 0.43846rem !important;
  }
  .u-lg-pad07,
  .u-lg-padEnds07,
  .u-lg-padTop07 {
    padding-top: 0.43846rem !important;
  }
  .u-lg-pad07,
  .u-lg-padEnds07,
  .u-lg-padBottom07 {
    padding-bottom: 0.43846rem !important;
  }
  .u-lg-pad07,
  .u-lg-padSides07,
  .u-lg-padLeft07 {
    padding-left: 0.43846rem !important;
  }
  .u-lg-pad07,
  .u-lg-padSides07,
  .u-lg-padRight07 {
    padding-right: 0.43846rem !important;
  }
  .u-lg-space06,
  .u-lg-spaceEnds06,
  .u-lg-spaceTop06 {
    margin-top: 0.49327rem !important;
  }
  .u-lg-space06,
  .u-lg-spaceEnds06,
  .u-lg-spaceBottom06 {
    margin-bottom: 0.49327rem !important;
  }
  .u-lg-space06,
  .u-lg-spaceSides06,
  .u-lg-spaceLeft06 {
    margin-left: 0.49327rem !important;
  }
  .u-lg-space06,
  .u-lg-spaceSides06,
  .u-lg-spaceRight06 {
    margin-right: 0.49327rem !important;
  }
  .u-lg-pad06,
  .u-lg-padEnds06,
  .u-lg-padTop06 {
    padding-top: 0.49327rem !important;
  }
  .u-lg-pad06,
  .u-lg-padEnds06,
  .u-lg-padBottom06 {
    padding-bottom: 0.49327rem !important;
  }
  .u-lg-pad06,
  .u-lg-padSides06,
  .u-lg-padLeft06 {
    padding-left: 0.49327rem !important;
  }
  .u-lg-pad06,
  .u-lg-padSides06,
  .u-lg-padRight06 {
    padding-right: 0.49327rem !important;
  }
  .u-lg-space05,
  .u-lg-spaceEnds05,
  .u-lg-spaceTop05 {
    margin-top: 0.55493rem !important;
  }
  .u-lg-space05,
  .u-lg-spaceEnds05,
  .u-lg-spaceBottom05 {
    margin-bottom: 0.55493rem !important;
  }
  .u-lg-space05,
  .u-lg-spaceSides05,
  .u-lg-spaceLeft05 {
    margin-left: 0.55493rem !important;
  }
  .u-lg-space05,
  .u-lg-spaceSides05,
  .u-lg-spaceRight05 {
    margin-right: 0.55493rem !important;
  }
  .u-lg-pad05,
  .u-lg-padEnds05,
  .u-lg-padTop05 {
    padding-top: 0.55493rem !important;
  }
  .u-lg-pad05,
  .u-lg-padEnds05,
  .u-lg-padBottom05 {
    padding-bottom: 0.55493rem !important;
  }
  .u-lg-pad05,
  .u-lg-padSides05,
  .u-lg-padLeft05 {
    padding-left: 0.55493rem !important;
  }
  .u-lg-pad05,
  .u-lg-padSides05,
  .u-lg-padRight05 {
    padding-right: 0.55493rem !important;
  }
  .u-lg-space04,
  .u-lg-spaceEnds04,
  .u-lg-spaceTop04 {
    margin-top: 0.6243rem !important;
  }
  .u-lg-space04,
  .u-lg-spaceEnds04,
  .u-lg-spaceBottom04 {
    margin-bottom: 0.6243rem !important;
  }
  .u-lg-space04,
  .u-lg-spaceSides04,
  .u-lg-spaceLeft04 {
    margin-left: 0.6243rem !important;
  }
  .u-lg-space04,
  .u-lg-spaceSides04,
  .u-lg-spaceRight04 {
    margin-right: 0.6243rem !important;
  }
  .u-lg-pad04,
  .u-lg-padEnds04,
  .u-lg-padTop04 {
    padding-top: 0.6243rem !important;
  }
  .u-lg-pad04,
  .u-lg-padEnds04,
  .u-lg-padBottom04 {
    padding-bottom: 0.6243rem !important;
  }
  .u-lg-pad04,
  .u-lg-padSides04,
  .u-lg-padLeft04 {
    padding-left: 0.6243rem !important;
  }
  .u-lg-pad04,
  .u-lg-padSides04,
  .u-lg-padRight04 {
    padding-right: 0.6243rem !important;
  }
  .u-lg-space03,
  .u-lg-spaceEnds03,
  .u-lg-spaceTop03 {
    margin-top: 0.70233rem !important;
  }
  .u-lg-space03,
  .u-lg-spaceEnds03,
  .u-lg-spaceBottom03 {
    margin-bottom: 0.70233rem !important;
  }
  .u-lg-space03,
  .u-lg-spaceSides03,
  .u-lg-spaceLeft03 {
    margin-left: 0.70233rem !important;
  }
  .u-lg-space03,
  .u-lg-spaceSides03,
  .u-lg-spaceRight03 {
    margin-right: 0.70233rem !important;
  }
  .u-lg-pad03,
  .u-lg-padEnds03,
  .u-lg-padTop03 {
    padding-top: 0.70233rem !important;
  }
  .u-lg-pad03,
  .u-lg-padEnds03,
  .u-lg-padBottom03 {
    padding-bottom: 0.70233rem !important;
  }
  .u-lg-pad03,
  .u-lg-padSides03,
  .u-lg-padLeft03 {
    padding-left: 0.70233rem !important;
  }
  .u-lg-pad03,
  .u-lg-padSides03,
  .u-lg-padRight03 {
    padding-right: 0.70233rem !important;
  }
  .u-lg-space02,
  .u-lg-spaceEnds02,
  .u-lg-spaceTop02 {
    margin-top: 0.79012rem !important;
  }
  .u-lg-space02,
  .u-lg-spaceEnds02,
  .u-lg-spaceBottom02 {
    margin-bottom: 0.79012rem !important;
  }
  .u-lg-space02,
  .u-lg-spaceSides02,
  .u-lg-spaceLeft02 {
    margin-left: 0.79012rem !important;
  }
  .u-lg-space02,
  .u-lg-spaceSides02,
  .u-lg-spaceRight02 {
    margin-right: 0.79012rem !important;
  }
  .u-lg-pad02,
  .u-lg-padEnds02,
  .u-lg-padTop02 {
    padding-top: 0.79012rem !important;
  }
  .u-lg-pad02,
  .u-lg-padEnds02,
  .u-lg-padBottom02 {
    padding-bottom: 0.79012rem !important;
  }
  .u-lg-pad02,
  .u-lg-padSides02,
  .u-lg-padLeft02 {
    padding-left: 0.79012rem !important;
  }
  .u-lg-pad02,
  .u-lg-padSides02,
  .u-lg-padRight02 {
    padding-right: 0.79012rem !important;
  }
  .u-lg-space01,
  .u-lg-spaceEnds01,
  .u-lg-spaceTop01 {
    margin-top: 0.88889rem !important;
  }
  .u-lg-space01,
  .u-lg-spaceEnds01,
  .u-lg-spaceBottom01 {
    margin-bottom: 0.88889rem !important;
  }
  .u-lg-space01,
  .u-lg-spaceSides01,
  .u-lg-spaceLeft01 {
    margin-left: 0.88889rem !important;
  }
  .u-lg-space01,
  .u-lg-spaceSides01,
  .u-lg-spaceRight01 {
    margin-right: 0.88889rem !important;
  }
  .u-lg-pad01,
  .u-lg-padEnds01,
  .u-lg-padTop01 {
    padding-top: 0.88889rem !important;
  }
  .u-lg-pad01,
  .u-lg-padEnds01,
  .u-lg-padBottom01 {
    padding-bottom: 0.88889rem !important;
  }
  .u-lg-pad01,
  .u-lg-padSides01,
  .u-lg-padLeft01 {
    padding-left: 0.88889rem !important;
  }
  .u-lg-pad01,
  .u-lg-padSides01,
  .u-lg-padRight01 {
    padding-right: 0.88889rem !important;
  }
  .u-lg-space,
  .u-lg-spaceEnds,
  .u-lg-spaceTop {
    margin-top: 1rem !important;
  }
  .u-lg-space,
  .u-lg-spaceEnds,
  .u-lg-spaceBottom {
    margin-bottom: 1rem !important;
  }
  .u-lg-space,
  .u-lg-spaceSides,
  .u-lg-spaceLeft {
    margin-left: 1rem !important;
  }
  .u-lg-space,
  .u-lg-spaceSides,
  .u-lg-spaceRight {
    margin-right: 1rem !important;
  }
  .u-lg-pad,
  .u-lg-padEnds,
  .u-lg-padTop {
    padding-top: 1rem !important;
  }
  .u-lg-pad,
  .u-lg-padEnds,
  .u-lg-padBottom {
    padding-bottom: 1rem !important;
  }
  .u-lg-pad,
  .u-lg-padSides,
  .u-lg-padLeft {
    padding-left: 1rem !important;
  }
  .u-lg-pad,
  .u-lg-padSides,
  .u-lg-padRight {
    padding-right: 1rem !important;
  }
  .u-lg-space1,
  .u-lg-spaceEnds1,
  .u-lg-spaceTop1 {
    margin-top: 1.125rem !important;
  }
  .u-lg-space1,
  .u-lg-spaceEnds1,
  .u-lg-spaceBottom1 {
    margin-bottom: 1.125rem !important;
  }
  .u-lg-space1,
  .u-lg-spaceSides1,
  .u-lg-spaceLeft1 {
    margin-left: 1.125rem !important;
  }
  .u-lg-space1,
  .u-lg-spaceSides1,
  .u-lg-spaceRight1 {
    margin-right: 1.125rem !important;
  }
  .u-lg-pad1,
  .u-lg-padEnds1,
  .u-lg-padTop1 {
    padding-top: 1.125rem !important;
  }
  .u-lg-pad1,
  .u-lg-padEnds1,
  .u-lg-padBottom1 {
    padding-bottom: 1.125rem !important;
  }
  .u-lg-pad1,
  .u-lg-padSides1,
  .u-lg-padLeft1 {
    padding-left: 1.125rem !important;
  }
  .u-lg-pad1,
  .u-lg-padSides1,
  .u-lg-padRight1 {
    padding-right: 1.125rem !important;
  }
  .u-lg-space2,
  .u-lg-spaceEnds2,
  .u-lg-spaceTop2 {
    margin-top: 1.26563rem !important;
  }
  .u-lg-space2,
  .u-lg-spaceEnds2,
  .u-lg-spaceBottom2 {
    margin-bottom: 1.26563rem !important;
  }
  .u-lg-space2,
  .u-lg-spaceSides2,
  .u-lg-spaceLeft2 {
    margin-left: 1.26563rem !important;
  }
  .u-lg-space2,
  .u-lg-spaceSides2,
  .u-lg-spaceRight2 {
    margin-right: 1.26563rem !important;
  }
  .u-lg-pad2,
  .u-lg-padEnds2,
  .u-lg-padTop2 {
    padding-top: 1.26563rem !important;
  }
  .u-lg-pad2,
  .u-lg-padEnds2,
  .u-lg-padBottom2 {
    padding-bottom: 1.26563rem !important;
  }
  .u-lg-pad2,
  .u-lg-padSides2,
  .u-lg-padLeft2 {
    padding-left: 1.26563rem !important;
  }
  .u-lg-pad2,
  .u-lg-padSides2,
  .u-lg-padRight2 {
    padding-right: 1.26563rem !important;
  }
  .u-lg-space3,
  .u-lg-spaceEnds3,
  .u-lg-spaceTop3 {
    margin-top: 1.42383rem !important;
  }
  .u-lg-space3,
  .u-lg-spaceEnds3,
  .u-lg-spaceBottom3 {
    margin-bottom: 1.42383rem !important;
  }
  .u-lg-space3,
  .u-lg-spaceSides3,
  .u-lg-spaceLeft3 {
    margin-left: 1.42383rem !important;
  }
  .u-lg-space3,
  .u-lg-spaceSides3,
  .u-lg-spaceRight3 {
    margin-right: 1.42383rem !important;
  }
  .u-lg-pad3,
  .u-lg-padEnds3,
  .u-lg-padTop3 {
    padding-top: 1.42383rem !important;
  }
  .u-lg-pad3,
  .u-lg-padEnds3,
  .u-lg-padBottom3 {
    padding-bottom: 1.42383rem !important;
  }
  .u-lg-pad3,
  .u-lg-padSides3,
  .u-lg-padLeft3 {
    padding-left: 1.42383rem !important;
  }
  .u-lg-pad3,
  .u-lg-padSides3,
  .u-lg-padRight3 {
    padding-right: 1.42383rem !important;
  }
  .u-lg-space4,
  .u-lg-spaceEnds4,
  .u-lg-spaceTop4 {
    margin-top: 1.60181rem !important;
  }
  .u-lg-space4,
  .u-lg-spaceEnds4,
  .u-lg-spaceBottom4 {
    margin-bottom: 1.60181rem !important;
  }
  .u-lg-space4,
  .u-lg-spaceSides4,
  .u-lg-spaceLeft4 {
    margin-left: 1.60181rem !important;
  }
  .u-lg-space4,
  .u-lg-spaceSides4,
  .u-lg-spaceRight4 {
    margin-right: 1.60181rem !important;
  }
  .u-lg-pad4,
  .u-lg-padEnds4,
  .u-lg-padTop4 {
    padding-top: 1.60181rem !important;
  }
  .u-lg-pad4,
  .u-lg-padEnds4,
  .u-lg-padBottom4 {
    padding-bottom: 1.60181rem !important;
  }
  .u-lg-pad4,
  .u-lg-padSides4,
  .u-lg-padLeft4 {
    padding-left: 1.60181rem !important;
  }
  .u-lg-pad4,
  .u-lg-padSides4,
  .u-lg-padRight4 {
    padding-right: 1.60181rem !important;
  }
  .u-lg-space5,
  .u-lg-spaceEnds5,
  .u-lg-spaceTop5 {
    margin-top: 1.80203rem !important;
  }
  .u-lg-space5,
  .u-lg-spaceEnds5,
  .u-lg-spaceBottom5 {
    margin-bottom: 1.80203rem !important;
  }
  .u-lg-space5,
  .u-lg-spaceSides5,
  .u-lg-spaceLeft5 {
    margin-left: 1.80203rem !important;
  }
  .u-lg-space5,
  .u-lg-spaceSides5,
  .u-lg-spaceRight5 {
    margin-right: 1.80203rem !important;
  }
  .u-lg-pad5,
  .u-lg-padEnds5,
  .u-lg-padTop5 {
    padding-top: 1.80203rem !important;
  }
  .u-lg-pad5,
  .u-lg-padEnds5,
  .u-lg-padBottom5 {
    padding-bottom: 1.80203rem !important;
  }
  .u-lg-pad5,
  .u-lg-padSides5,
  .u-lg-padLeft5 {
    padding-left: 1.80203rem !important;
  }
  .u-lg-pad5,
  .u-lg-padSides5,
  .u-lg-padRight5 {
    padding-right: 1.80203rem !important;
  }
  .u-lg-space6,
  .u-lg-spaceEnds6,
  .u-lg-spaceTop6 {
    margin-top: 2.02729rem !important;
  }
  .u-lg-space6,
  .u-lg-spaceEnds6,
  .u-lg-spaceBottom6 {
    margin-bottom: 2.02729rem !important;
  }
  .u-lg-space6,
  .u-lg-spaceSides6,
  .u-lg-spaceLeft6 {
    margin-left: 2.02729rem !important;
  }
  .u-lg-space6,
  .u-lg-spaceSides6,
  .u-lg-spaceRight6 {
    margin-right: 2.02729rem !important;
  }
  .u-lg-pad6,
  .u-lg-padEnds6,
  .u-lg-padTop6 {
    padding-top: 2.02729rem !important;
  }
  .u-lg-pad6,
  .u-lg-padEnds6,
  .u-lg-padBottom6 {
    padding-bottom: 2.02729rem !important;
  }
  .u-lg-pad6,
  .u-lg-padSides6,
  .u-lg-padLeft6 {
    padding-left: 2.02729rem !important;
  }
  .u-lg-pad6,
  .u-lg-padSides6,
  .u-lg-padRight6 {
    padding-right: 2.02729rem !important;
  }
  .u-lg-space7,
  .u-lg-spaceEnds7,
  .u-lg-spaceTop7 {
    margin-top: 2.2807rem !important;
  }
  .u-lg-space7,
  .u-lg-spaceEnds7,
  .u-lg-spaceBottom7 {
    margin-bottom: 2.2807rem !important;
  }
  .u-lg-space7,
  .u-lg-spaceSides7,
  .u-lg-spaceLeft7 {
    margin-left: 2.2807rem !important;
  }
  .u-lg-space7,
  .u-lg-spaceSides7,
  .u-lg-spaceRight7 {
    margin-right: 2.2807rem !important;
  }
  .u-lg-pad7,
  .u-lg-padEnds7,
  .u-lg-padTop7 {
    padding-top: 2.2807rem !important;
  }
  .u-lg-pad7,
  .u-lg-padEnds7,
  .u-lg-padBottom7 {
    padding-bottom: 2.2807rem !important;
  }
  .u-lg-pad7,
  .u-lg-padSides7,
  .u-lg-padLeft7 {
    padding-left: 2.2807rem !important;
  }
  .u-lg-pad7,
  .u-lg-padSides7,
  .u-lg-padRight7 {
    padding-right: 2.2807rem !important;
  }
  .u-lg-space8,
  .u-lg-spaceEnds8,
  .u-lg-spaceTop8 {
    margin-top: 2.56578rem !important;
  }
  .u-lg-space8,
  .u-lg-spaceEnds8,
  .u-lg-spaceBottom8 {
    margin-bottom: 2.56578rem !important;
  }
  .u-lg-space8,
  .u-lg-spaceSides8,
  .u-lg-spaceLeft8 {
    margin-left: 2.56578rem !important;
  }
  .u-lg-space8,
  .u-lg-spaceSides8,
  .u-lg-spaceRight8 {
    margin-right: 2.56578rem !important;
  }
  .u-lg-pad8,
  .u-lg-padEnds8,
  .u-lg-padTop8 {
    padding-top: 2.56578rem !important;
  }
  .u-lg-pad8,
  .u-lg-padEnds8,
  .u-lg-padBottom8 {
    padding-bottom: 2.56578rem !important;
  }
  .u-lg-pad8,
  .u-lg-padSides8,
  .u-lg-padLeft8 {
    padding-left: 2.56578rem !important;
  }
  .u-lg-pad8,
  .u-lg-padSides8,
  .u-lg-padRight8 {
    padding-right: 2.56578rem !important;
  }
  .u-lg-space9,
  .u-lg-spaceEnds9,
  .u-lg-spaceTop9 {
    margin-top: 2.88651rem !important;
  }
  .u-lg-space9,
  .u-lg-spaceEnds9,
  .u-lg-spaceBottom9 {
    margin-bottom: 2.88651rem !important;
  }
  .u-lg-space9,
  .u-lg-spaceSides9,
  .u-lg-spaceLeft9 {
    margin-left: 2.88651rem !important;
  }
  .u-lg-space9,
  .u-lg-spaceSides9,
  .u-lg-spaceRight9 {
    margin-right: 2.88651rem !important;
  }
  .u-lg-pad9,
  .u-lg-padEnds9,
  .u-lg-padTop9 {
    padding-top: 2.88651rem !important;
  }
  .u-lg-pad9,
  .u-lg-padEnds9,
  .u-lg-padBottom9 {
    padding-bottom: 2.88651rem !important;
  }
  .u-lg-pad9,
  .u-lg-padSides9,
  .u-lg-padLeft9 {
    padding-left: 2.88651rem !important;
  }
  .u-lg-pad9,
  .u-lg-padSides9,
  .u-lg-padRight9 {
    padding-right: 2.88651rem !important;
  }
  .u-lg-space10,
  .u-lg-spaceEnds10,
  .u-lg-spaceTop10 {
    margin-top: 3.24732rem !important;
  }
  .u-lg-space10,
  .u-lg-spaceEnds10,
  .u-lg-spaceBottom10 {
    margin-bottom: 3.24732rem !important;
  }
  .u-lg-space10,
  .u-lg-spaceSides10,
  .u-lg-spaceLeft10 {
    margin-left: 3.24732rem !important;
  }
  .u-lg-space10,
  .u-lg-spaceSides10,
  .u-lg-spaceRight10 {
    margin-right: 3.24732rem !important;
  }
  .u-lg-pad10,
  .u-lg-padEnds10,
  .u-lg-padTop10 {
    padding-top: 3.24732rem !important;
  }
  .u-lg-pad10,
  .u-lg-padEnds10,
  .u-lg-padBottom10 {
    padding-bottom: 3.24732rem !important;
  }
  .u-lg-pad10,
  .u-lg-padSides10,
  .u-lg-padLeft10 {
    padding-left: 3.24732rem !important;
  }
  .u-lg-pad10,
  .u-lg-padSides10,
  .u-lg-padRight10 {
    padding-right: 3.24732rem !important;
  }
  .u-lg-space11,
  .u-lg-spaceEnds11,
  .u-lg-spaceTop11 {
    margin-top: 3.65324rem !important;
  }
  .u-lg-space11,
  .u-lg-spaceEnds11,
  .u-lg-spaceBottom11 {
    margin-bottom: 3.65324rem !important;
  }
  .u-lg-space11,
  .u-lg-spaceSides11,
  .u-lg-spaceLeft11 {
    margin-left: 3.65324rem !important;
  }
  .u-lg-space11,
  .u-lg-spaceSides11,
  .u-lg-spaceRight11 {
    margin-right: 3.65324rem !important;
  }
  .u-lg-pad11,
  .u-lg-padEnds11,
  .u-lg-padTop11 {
    padding-top: 3.65324rem !important;
  }
  .u-lg-pad11,
  .u-lg-padEnds11,
  .u-lg-padBottom11 {
    padding-bottom: 3.65324rem !important;
  }
  .u-lg-pad11,
  .u-lg-padSides11,
  .u-lg-padLeft11 {
    padding-left: 3.65324rem !important;
  }
  .u-lg-pad11,
  .u-lg-padSides11,
  .u-lg-padRight11 {
    padding-right: 3.65324rem !important;
  }
  .u-lg-space12,
  .u-lg-spaceEnds12,
  .u-lg-spaceTop12 {
    margin-top: 4.10989rem !important;
  }
  .u-lg-space12,
  .u-lg-spaceEnds12,
  .u-lg-spaceBottom12 {
    margin-bottom: 4.10989rem !important;
  }
  .u-lg-space12,
  .u-lg-spaceSides12,
  .u-lg-spaceLeft12 {
    margin-left: 4.10989rem !important;
  }
  .u-lg-space12,
  .u-lg-spaceSides12,
  .u-lg-spaceRight12 {
    margin-right: 4.10989rem !important;
  }
  .u-lg-pad12,
  .u-lg-padEnds12,
  .u-lg-padTop12 {
    padding-top: 4.10989rem !important;
  }
  .u-lg-pad12,
  .u-lg-padEnds12,
  .u-lg-padBottom12 {
    padding-bottom: 4.10989rem !important;
  }
  .u-lg-pad12,
  .u-lg-padSides12,
  .u-lg-padLeft12 {
    padding-left: 4.10989rem !important;
  }
  .u-lg-pad12,
  .u-lg-padSides12,
  .u-lg-padRight12 {
    padding-right: 4.10989rem !important;
  }
  .u-lg-spaceNone,
  .u-lg-spaceEndsNone,
  .u-lg-spaceTopNone {
    margin-top: 0 !important;
  }
  .u-lg-spaceNone,
  .u-lg-spaceEndsNone,
  .u-lg-spaceBottomNone {
    margin-bottom: 0 !important;
  }
  .u-lg-spaceNone,
  .u-lg-spaceSidesNone,
  .u-lg-spaceLeftNone {
    margin-left: 0 !important;
  }
  .u-lg-spaceNone,
  .u-lg-spaceSidesNone,
  .u-lg-spaceRightNone {
    margin-right: 0 !important;
  }
  .u-lg-padNone,
  .u-lg-padEndsNone,
  .u-lg-padTopNone {
    padding-top: 0 !important;
  }
  .u-lg-padNone,
  .u-lg-padEndsNone,
  .u-lg-padBottomNone {
    padding-bottom: 0 !important;
  }
  .u-lg-padNone,
  .u-lg-padSidesNone,
  .u-lg-padLeftNone {
    padding-left: 0 !important;
  }
  .u-lg-padNone,
  .u-lg-padSidesNone,
  .u-lg-padRightNone {
    padding-right: 0 !important;
  }
  .u-lg-pull09,
  .u-lg-pullEnds09,
  .u-lg-pullTop09 {
    margin-top: -0.34644rem !important;
  }
  .u-lg-pull09,
  .u-lg-pullEnds09,
  .u-lg-pullBottom09 {
    margin-bottom: -0.34644rem !important;
  }
  .u-lg-pull09,
  .u-lg-pullSides09,
  .u-lg-pullLeft09 {
    margin-left: -0.34644rem !important;
  }
  .u-lg-pull09,
  .u-lg-pullSides09,
  .u-lg-pullRight09 {
    margin-right: -0.34644rem !important;
  }
  .u-lg-pull08,
  .u-lg-pullEnds08,
  .u-lg-pullTop08 {
    margin-top: -0.38974rem !important;
  }
  .u-lg-pull08,
  .u-lg-pullEnds08,
  .u-lg-pullBottom08 {
    margin-bottom: -0.38974rem !important;
  }
  .u-lg-pull08,
  .u-lg-pullSides08,
  .u-lg-pullLeft08 {
    margin-left: -0.38974rem !important;
  }
  .u-lg-pull08,
  .u-lg-pullSides08,
  .u-lg-pullRight08 {
    margin-right: -0.38974rem !important;
  }
  .u-lg-pull07,
  .u-lg-pullEnds07,
  .u-lg-pullTop07 {
    margin-top: -0.43846rem !important;
  }
  .u-lg-pull07,
  .u-lg-pullEnds07,
  .u-lg-pullBottom07 {
    margin-bottom: -0.43846rem !important;
  }
  .u-lg-pull07,
  .u-lg-pullSides07,
  .u-lg-pullLeft07 {
    margin-left: -0.43846rem !important;
  }
  .u-lg-pull07,
  .u-lg-pullSides07,
  .u-lg-pullRight07 {
    margin-right: -0.43846rem !important;
  }
  .u-lg-pull06,
  .u-lg-pullEnds06,
  .u-lg-pullTop06 {
    margin-top: -0.49327rem !important;
  }
  .u-lg-pull06,
  .u-lg-pullEnds06,
  .u-lg-pullBottom06 {
    margin-bottom: -0.49327rem !important;
  }
  .u-lg-pull06,
  .u-lg-pullSides06,
  .u-lg-pullLeft06 {
    margin-left: -0.49327rem !important;
  }
  .u-lg-pull06,
  .u-lg-pullSides06,
  .u-lg-pullRight06 {
    margin-right: -0.49327rem !important;
  }
  .u-lg-pull05,
  .u-lg-pullEnds05,
  .u-lg-pullTop05 {
    margin-top: -0.55493rem !important;
  }
  .u-lg-pull05,
  .u-lg-pullEnds05,
  .u-lg-pullBottom05 {
    margin-bottom: -0.55493rem !important;
  }
  .u-lg-pull05,
  .u-lg-pullSides05,
  .u-lg-pullLeft05 {
    margin-left: -0.55493rem !important;
  }
  .u-lg-pull05,
  .u-lg-pullSides05,
  .u-lg-pullRight05 {
    margin-right: -0.55493rem !important;
  }
  .u-lg-pull04,
  .u-lg-pullEnds04,
  .u-lg-pullTop04 {
    margin-top: -0.6243rem !important;
  }
  .u-lg-pull04,
  .u-lg-pullEnds04,
  .u-lg-pullBottom04 {
    margin-bottom: -0.6243rem !important;
  }
  .u-lg-pull04,
  .u-lg-pullSides04,
  .u-lg-pullLeft04 {
    margin-left: -0.6243rem !important;
  }
  .u-lg-pull04,
  .u-lg-pullSides04,
  .u-lg-pullRight04 {
    margin-right: -0.6243rem !important;
  }
  .u-lg-pull03,
  .u-lg-pullEnds03,
  .u-lg-pullTop03 {
    margin-top: -0.70233rem !important;
  }
  .u-lg-pull03,
  .u-lg-pullEnds03,
  .u-lg-pullBottom03 {
    margin-bottom: -0.70233rem !important;
  }
  .u-lg-pull03,
  .u-lg-pullSides03,
  .u-lg-pullLeft03 {
    margin-left: -0.70233rem !important;
  }
  .u-lg-pull03,
  .u-lg-pullSides03,
  .u-lg-pullRight03 {
    margin-right: -0.70233rem !important;
  }
  .u-lg-pull02,
  .u-lg-pullEnds02,
  .u-lg-pullTop02 {
    margin-top: -0.79012rem !important;
  }
  .u-lg-pull02,
  .u-lg-pullEnds02,
  .u-lg-pullBottom02 {
    margin-bottom: -0.79012rem !important;
  }
  .u-lg-pull02,
  .u-lg-pullSides02,
  .u-lg-pullLeft02 {
    margin-left: -0.79012rem !important;
  }
  .u-lg-pull02,
  .u-lg-pullSides02,
  .u-lg-pullRight02 {
    margin-right: -0.79012rem !important;
  }
  .u-lg-pull01,
  .u-lg-pullEnds01,
  .u-lg-pullTop01 {
    margin-top: -0.88889rem !important;
  }
  .u-lg-pull01,
  .u-lg-pullEnds01,
  .u-lg-pullBottom01 {
    margin-bottom: -0.88889rem !important;
  }
  .u-lg-pull01,
  .u-lg-pullSides01,
  .u-lg-pullLeft01 {
    margin-left: -0.88889rem !important;
  }
  .u-lg-pull01,
  .u-lg-pullSides01,
  .u-lg-pullRight01 {
    margin-right: -0.88889rem !important;
  }
  .u-lg-pull,
  .u-lg-pullEnds,
  .u-lg-pullTop {
    margin-top: -1rem !important;
  }
  .u-lg-pull,
  .u-lg-pullEnds,
  .u-lg-pullBottom {
    margin-bottom: -1rem !important;
  }
  .u-lg-pull,
  .u-lg-pullSides,
  .u-lg-pullLeft {
    margin-left: -1rem !important;
  }
  .u-lg-pull,
  .u-lg-pullSides,
  .u-lg-pullRight {
    margin-right: -1rem !important;
  }
  .u-lg-pull1,
  .u-lg-pullEnds1,
  .u-lg-pullTop1 {
    margin-top: -1.125rem !important;
  }
  .u-lg-pull1,
  .u-lg-pullEnds1,
  .u-lg-pullBottom1 {
    margin-bottom: -1.125rem !important;
  }
  .u-lg-pull1,
  .u-lg-pullSides1,
  .u-lg-pullLeft1 {
    margin-left: -1.125rem !important;
  }
  .u-lg-pull1,
  .u-lg-pullSides1,
  .u-lg-pullRight1 {
    margin-right: -1.125rem !important;
  }
  .u-lg-pull2,
  .u-lg-pullEnds2,
  .u-lg-pullTop2 {
    margin-top: -1.26562rem !important;
  }
  .u-lg-pull2,
  .u-lg-pullEnds2,
  .u-lg-pullBottom2 {
    margin-bottom: -1.26562rem !important;
  }
  .u-lg-pull2,
  .u-lg-pullSides2,
  .u-lg-pullLeft2 {
    margin-left: -1.26562rem !important;
  }
  .u-lg-pull2,
  .u-lg-pullSides2,
  .u-lg-pullRight2 {
    margin-right: -1.26562rem !important;
  }
  .u-lg-pull3,
  .u-lg-pullEnds3,
  .u-lg-pullTop3 {
    margin-top: -1.42383rem !important;
  }
  .u-lg-pull3,
  .u-lg-pullEnds3,
  .u-lg-pullBottom3 {
    margin-bottom: -1.42383rem !important;
  }
  .u-lg-pull3,
  .u-lg-pullSides3,
  .u-lg-pullLeft3 {
    margin-left: -1.42383rem !important;
  }
  .u-lg-pull3,
  .u-lg-pullSides3,
  .u-lg-pullRight3 {
    margin-right: -1.42383rem !important;
  }
  .u-lg-pull4,
  .u-lg-pullEnds4,
  .u-lg-pullTop4 {
    margin-top: -1.60181rem !important;
  }
  .u-lg-pull4,
  .u-lg-pullEnds4,
  .u-lg-pullBottom4 {
    margin-bottom: -1.60181rem !important;
  }
  .u-lg-pull4,
  .u-lg-pullSides4,
  .u-lg-pullLeft4 {
    margin-left: -1.60181rem !important;
  }
  .u-lg-pull4,
  .u-lg-pullSides4,
  .u-lg-pullRight4 {
    margin-right: -1.60181rem !important;
  }
  .u-lg-pull5,
  .u-lg-pullEnds5,
  .u-lg-pullTop5 {
    margin-top: -1.80203rem !important;
  }
  .u-lg-pull5,
  .u-lg-pullEnds5,
  .u-lg-pullBottom5 {
    margin-bottom: -1.80203rem !important;
  }
  .u-lg-pull5,
  .u-lg-pullSides5,
  .u-lg-pullLeft5 {
    margin-left: -1.80203rem !important;
  }
  .u-lg-pull5,
  .u-lg-pullSides5,
  .u-lg-pullRight5 {
    margin-right: -1.80203rem !important;
  }
  .u-lg-pull6,
  .u-lg-pullEnds6,
  .u-lg-pullTop6 {
    margin-top: -2.02729rem !important;
  }
  .u-lg-pull6,
  .u-lg-pullEnds6,
  .u-lg-pullBottom6 {
    margin-bottom: -2.02729rem !important;
  }
  .u-lg-pull6,
  .u-lg-pullSides6,
  .u-lg-pullLeft6 {
    margin-left: -2.02729rem !important;
  }
  .u-lg-pull6,
  .u-lg-pullSides6,
  .u-lg-pullRight6 {
    margin-right: -2.02729rem !important;
  }
  .u-lg-pull7,
  .u-lg-pullEnds7,
  .u-lg-pullTop7 {
    margin-top: -2.2807rem !important;
  }
  .u-lg-pull7,
  .u-lg-pullEnds7,
  .u-lg-pullBottom7 {
    margin-bottom: -2.2807rem !important;
  }
  .u-lg-pull7,
  .u-lg-pullSides7,
  .u-lg-pullLeft7 {
    margin-left: -2.2807rem !important;
  }
  .u-lg-pull7,
  .u-lg-pullSides7,
  .u-lg-pullRight7 {
    margin-right: -2.2807rem !important;
  }
  .u-lg-pull8,
  .u-lg-pullEnds8,
  .u-lg-pullTop8 {
    margin-top: -2.56578rem !important;
  }
  .u-lg-pull8,
  .u-lg-pullEnds8,
  .u-lg-pullBottom8 {
    margin-bottom: -2.56578rem !important;
  }
  .u-lg-pull8,
  .u-lg-pullSides8,
  .u-lg-pullLeft8 {
    margin-left: -2.56578rem !important;
  }
  .u-lg-pull8,
  .u-lg-pullSides8,
  .u-lg-pullRight8 {
    margin-right: -2.56578rem !important;
  }
  .u-lg-pull9,
  .u-lg-pullEnds9,
  .u-lg-pullTop9 {
    margin-top: -2.88651rem !important;
  }
  .u-lg-pull9,
  .u-lg-pullEnds9,
  .u-lg-pullBottom9 {
    margin-bottom: -2.88651rem !important;
  }
  .u-lg-pull9,
  .u-lg-pullSides9,
  .u-lg-pullLeft9 {
    margin-left: -2.88651rem !important;
  }
  .u-lg-pull9,
  .u-lg-pullSides9,
  .u-lg-pullRight9 {
    margin-right: -2.88651rem !important;
  }
  .u-lg-pull10,
  .u-lg-pullEnds10,
  .u-lg-pullTop10 {
    margin-top: -3.24732rem !important;
  }
  .u-lg-pull10,
  .u-lg-pullEnds10,
  .u-lg-pullBottom10 {
    margin-bottom: -3.24732rem !important;
  }
  .u-lg-pull10,
  .u-lg-pullSides10,
  .u-lg-pullLeft10 {
    margin-left: -3.24732rem !important;
  }
  .u-lg-pull10,
  .u-lg-pullSides10,
  .u-lg-pullRight10 {
    margin-right: -3.24732rem !important;
  }
  .u-lg-pull11,
  .u-lg-pullEnds11,
  .u-lg-pullTop11 {
    margin-top: -3.65324rem !important;
  }
  .u-lg-pull11,
  .u-lg-pullEnds11,
  .u-lg-pullBottom11 {
    margin-bottom: -3.65324rem !important;
  }
  .u-lg-pull11,
  .u-lg-pullSides11,
  .u-lg-pullLeft11 {
    margin-left: -3.65324rem !important;
  }
  .u-lg-pull11,
  .u-lg-pullSides11,
  .u-lg-pullRight11 {
    margin-right: -3.65324rem !important;
  }
  .u-lg-pull12,
  .u-lg-pullEnds12,
  .u-lg-pullTop12 {
    margin-top: -4.10989rem !important;
  }
  .u-lg-pull12,
  .u-lg-pullEnds12,
  .u-lg-pullBottom12 {
    margin-bottom: -4.10989rem !important;
  }
  .u-lg-pull12,
  .u-lg-pullSides12,
  .u-lg-pullLeft12 {
    margin-left: -4.10989rem !important;
  }
  .u-lg-pull12,
  .u-lg-pullSides12,
  .u-lg-pullRight12 {
    margin-right: -4.10989rem !important;
  }
  .u-lg-spaceItemsNone > * + * {
    margin-top: 0rem;
  }
  .u-lg-staggerItemsNone > * + * {
    margin-top: 0em;
  }
}

@media (min-width: 72em) {
  .u-xl-space09,
  .u-xl-spaceEnds09,
  .u-xl-spaceTop09 {
    margin-top: 0.34644rem !important;
  }
  .u-xl-space09,
  .u-xl-spaceEnds09,
  .u-xl-spaceBottom09 {
    margin-bottom: 0.34644rem !important;
  }
  .u-xl-space09,
  .u-xl-spaceSides09,
  .u-xl-spaceLeft09 {
    margin-left: 0.34644rem !important;
  }
  .u-xl-space09,
  .u-xl-spaceSides09,
  .u-xl-spaceRight09 {
    margin-right: 0.34644rem !important;
  }
  .u-xl-pad09,
  .u-xl-padEnds09,
  .u-xl-padTop09 {
    padding-top: 0.34644rem !important;
  }
  .u-xl-pad09,
  .u-xl-padEnds09,
  .u-xl-padBottom09 {
    padding-bottom: 0.34644rem !important;
  }
  .u-xl-pad09,
  .u-xl-padSides09,
  .u-xl-padLeft09 {
    padding-left: 0.34644rem !important;
  }
  .u-xl-pad09,
  .u-xl-padSides09,
  .u-xl-padRight09 {
    padding-right: 0.34644rem !important;
  }
  .u-xl-space08,
  .u-xl-spaceEnds08,
  .u-xl-spaceTop08 {
    margin-top: 0.38974rem !important;
  }
  .u-xl-space08,
  .u-xl-spaceEnds08,
  .u-xl-spaceBottom08 {
    margin-bottom: 0.38974rem !important;
  }
  .u-xl-space08,
  .u-xl-spaceSides08,
  .u-xl-spaceLeft08 {
    margin-left: 0.38974rem !important;
  }
  .u-xl-space08,
  .u-xl-spaceSides08,
  .u-xl-spaceRight08 {
    margin-right: 0.38974rem !important;
  }
  .u-xl-pad08,
  .u-xl-padEnds08,
  .u-xl-padTop08 {
    padding-top: 0.38974rem !important;
  }
  .u-xl-pad08,
  .u-xl-padEnds08,
  .u-xl-padBottom08 {
    padding-bottom: 0.38974rem !important;
  }
  .u-xl-pad08,
  .u-xl-padSides08,
  .u-xl-padLeft08 {
    padding-left: 0.38974rem !important;
  }
  .u-xl-pad08,
  .u-xl-padSides08,
  .u-xl-padRight08 {
    padding-right: 0.38974rem !important;
  }
  .u-xl-space07,
  .u-xl-spaceEnds07,
  .u-xl-spaceTop07 {
    margin-top: 0.43846rem !important;
  }
  .u-xl-space07,
  .u-xl-spaceEnds07,
  .u-xl-spaceBottom07 {
    margin-bottom: 0.43846rem !important;
  }
  .u-xl-space07,
  .u-xl-spaceSides07,
  .u-xl-spaceLeft07 {
    margin-left: 0.43846rem !important;
  }
  .u-xl-space07,
  .u-xl-spaceSides07,
  .u-xl-spaceRight07 {
    margin-right: 0.43846rem !important;
  }
  .u-xl-pad07,
  .u-xl-padEnds07,
  .u-xl-padTop07 {
    padding-top: 0.43846rem !important;
  }
  .u-xl-pad07,
  .u-xl-padEnds07,
  .u-xl-padBottom07 {
    padding-bottom: 0.43846rem !important;
  }
  .u-xl-pad07,
  .u-xl-padSides07,
  .u-xl-padLeft07 {
    padding-left: 0.43846rem !important;
  }
  .u-xl-pad07,
  .u-xl-padSides07,
  .u-xl-padRight07 {
    padding-right: 0.43846rem !important;
  }
  .u-xl-space06,
  .u-xl-spaceEnds06,
  .u-xl-spaceTop06 {
    margin-top: 0.49327rem !important;
  }
  .u-xl-space06,
  .u-xl-spaceEnds06,
  .u-xl-spaceBottom06 {
    margin-bottom: 0.49327rem !important;
  }
  .u-xl-space06,
  .u-xl-spaceSides06,
  .u-xl-spaceLeft06 {
    margin-left: 0.49327rem !important;
  }
  .u-xl-space06,
  .u-xl-spaceSides06,
  .u-xl-spaceRight06 {
    margin-right: 0.49327rem !important;
  }
  .u-xl-pad06,
  .u-xl-padEnds06,
  .u-xl-padTop06 {
    padding-top: 0.49327rem !important;
  }
  .u-xl-pad06,
  .u-xl-padEnds06,
  .u-xl-padBottom06 {
    padding-bottom: 0.49327rem !important;
  }
  .u-xl-pad06,
  .u-xl-padSides06,
  .u-xl-padLeft06 {
    padding-left: 0.49327rem !important;
  }
  .u-xl-pad06,
  .u-xl-padSides06,
  .u-xl-padRight06 {
    padding-right: 0.49327rem !important;
  }
  .u-xl-space05,
  .u-xl-spaceEnds05,
  .u-xl-spaceTop05 {
    margin-top: 0.55493rem !important;
  }
  .u-xl-space05,
  .u-xl-spaceEnds05,
  .u-xl-spaceBottom05 {
    margin-bottom: 0.55493rem !important;
  }
  .u-xl-space05,
  .u-xl-spaceSides05,
  .u-xl-spaceLeft05 {
    margin-left: 0.55493rem !important;
  }
  .u-xl-space05,
  .u-xl-spaceSides05,
  .u-xl-spaceRight05 {
    margin-right: 0.55493rem !important;
  }
  .u-xl-pad05,
  .u-xl-padEnds05,
  .u-xl-padTop05 {
    padding-top: 0.55493rem !important;
  }
  .u-xl-pad05,
  .u-xl-padEnds05,
  .u-xl-padBottom05 {
    padding-bottom: 0.55493rem !important;
  }
  .u-xl-pad05,
  .u-xl-padSides05,
  .u-xl-padLeft05 {
    padding-left: 0.55493rem !important;
  }
  .u-xl-pad05,
  .u-xl-padSides05,
  .u-xl-padRight05 {
    padding-right: 0.55493rem !important;
  }
  .u-xl-space04,
  .u-xl-spaceEnds04,
  .u-xl-spaceTop04 {
    margin-top: 0.6243rem !important;
  }
  .u-xl-space04,
  .u-xl-spaceEnds04,
  .u-xl-spaceBottom04 {
    margin-bottom: 0.6243rem !important;
  }
  .u-xl-space04,
  .u-xl-spaceSides04,
  .u-xl-spaceLeft04 {
    margin-left: 0.6243rem !important;
  }
  .u-xl-space04,
  .u-xl-spaceSides04,
  .u-xl-spaceRight04 {
    margin-right: 0.6243rem !important;
  }
  .u-xl-pad04,
  .u-xl-padEnds04,
  .u-xl-padTop04 {
    padding-top: 0.6243rem !important;
  }
  .u-xl-pad04,
  .u-xl-padEnds04,
  .u-xl-padBottom04 {
    padding-bottom: 0.6243rem !important;
  }
  .u-xl-pad04,
  .u-xl-padSides04,
  .u-xl-padLeft04 {
    padding-left: 0.6243rem !important;
  }
  .u-xl-pad04,
  .u-xl-padSides04,
  .u-xl-padRight04 {
    padding-right: 0.6243rem !important;
  }
  .u-xl-space03,
  .u-xl-spaceEnds03,
  .u-xl-spaceTop03 {
    margin-top: 0.70233rem !important;
  }
  .u-xl-space03,
  .u-xl-spaceEnds03,
  .u-xl-spaceBottom03 {
    margin-bottom: 0.70233rem !important;
  }
  .u-xl-space03,
  .u-xl-spaceSides03,
  .u-xl-spaceLeft03 {
    margin-left: 0.70233rem !important;
  }
  .u-xl-space03,
  .u-xl-spaceSides03,
  .u-xl-spaceRight03 {
    margin-right: 0.70233rem !important;
  }
  .u-xl-pad03,
  .u-xl-padEnds03,
  .u-xl-padTop03 {
    padding-top: 0.70233rem !important;
  }
  .u-xl-pad03,
  .u-xl-padEnds03,
  .u-xl-padBottom03 {
    padding-bottom: 0.70233rem !important;
  }
  .u-xl-pad03,
  .u-xl-padSides03,
  .u-xl-padLeft03 {
    padding-left: 0.70233rem !important;
  }
  .u-xl-pad03,
  .u-xl-padSides03,
  .u-xl-padRight03 {
    padding-right: 0.70233rem !important;
  }
  .u-xl-space02,
  .u-xl-spaceEnds02,
  .u-xl-spaceTop02 {
    margin-top: 0.79012rem !important;
  }
  .u-xl-space02,
  .u-xl-spaceEnds02,
  .u-xl-spaceBottom02 {
    margin-bottom: 0.79012rem !important;
  }
  .u-xl-space02,
  .u-xl-spaceSides02,
  .u-xl-spaceLeft02 {
    margin-left: 0.79012rem !important;
  }
  .u-xl-space02,
  .u-xl-spaceSides02,
  .u-xl-spaceRight02 {
    margin-right: 0.79012rem !important;
  }
  .u-xl-pad02,
  .u-xl-padEnds02,
  .u-xl-padTop02 {
    padding-top: 0.79012rem !important;
  }
  .u-xl-pad02,
  .u-xl-padEnds02,
  .u-xl-padBottom02 {
    padding-bottom: 0.79012rem !important;
  }
  .u-xl-pad02,
  .u-xl-padSides02,
  .u-xl-padLeft02 {
    padding-left: 0.79012rem !important;
  }
  .u-xl-pad02,
  .u-xl-padSides02,
  .u-xl-padRight02 {
    padding-right: 0.79012rem !important;
  }
  .u-xl-space01,
  .u-xl-spaceEnds01,
  .u-xl-spaceTop01 {
    margin-top: 0.88889rem !important;
  }
  .u-xl-space01,
  .u-xl-spaceEnds01,
  .u-xl-spaceBottom01 {
    margin-bottom: 0.88889rem !important;
  }
  .u-xl-space01,
  .u-xl-spaceSides01,
  .u-xl-spaceLeft01 {
    margin-left: 0.88889rem !important;
  }
  .u-xl-space01,
  .u-xl-spaceSides01,
  .u-xl-spaceRight01 {
    margin-right: 0.88889rem !important;
  }
  .u-xl-pad01,
  .u-xl-padEnds01,
  .u-xl-padTop01 {
    padding-top: 0.88889rem !important;
  }
  .u-xl-pad01,
  .u-xl-padEnds01,
  .u-xl-padBottom01 {
    padding-bottom: 0.88889rem !important;
  }
  .u-xl-pad01,
  .u-xl-padSides01,
  .u-xl-padLeft01 {
    padding-left: 0.88889rem !important;
  }
  .u-xl-pad01,
  .u-xl-padSides01,
  .u-xl-padRight01 {
    padding-right: 0.88889rem !important;
  }
  .u-xl-space,
  .u-xl-spaceEnds,
  .u-xl-spaceTop {
    margin-top: 1rem !important;
  }
  .u-xl-space,
  .u-xl-spaceEnds,
  .u-xl-spaceBottom {
    margin-bottom: 1rem !important;
  }
  .u-xl-space,
  .u-xl-spaceSides,
  .u-xl-spaceLeft {
    margin-left: 1rem !important;
  }
  .u-xl-space,
  .u-xl-spaceSides,
  .u-xl-spaceRight {
    margin-right: 1rem !important;
  }
  .u-xl-pad,
  .u-xl-padEnds,
  .u-xl-padTop {
    padding-top: 1rem !important;
  }
  .u-xl-pad,
  .u-xl-padEnds,
  .u-xl-padBottom {
    padding-bottom: 1rem !important;
  }
  .u-xl-pad,
  .u-xl-padSides,
  .u-xl-padLeft {
    padding-left: 1rem !important;
  }
  .u-xl-pad,
  .u-xl-padSides,
  .u-xl-padRight {
    padding-right: 1rem !important;
  }
  .u-xl-space1,
  .u-xl-spaceEnds1,
  .u-xl-spaceTop1 {
    margin-top: 1.125rem !important;
  }
  .u-xl-space1,
  .u-xl-spaceEnds1,
  .u-xl-spaceBottom1 {
    margin-bottom: 1.125rem !important;
  }
  .u-xl-space1,
  .u-xl-spaceSides1,
  .u-xl-spaceLeft1 {
    margin-left: 1.125rem !important;
  }
  .u-xl-space1,
  .u-xl-spaceSides1,
  .u-xl-spaceRight1 {
    margin-right: 1.125rem !important;
  }
  .u-xl-pad1,
  .u-xl-padEnds1,
  .u-xl-padTop1 {
    padding-top: 1.125rem !important;
  }
  .u-xl-pad1,
  .u-xl-padEnds1,
  .u-xl-padBottom1 {
    padding-bottom: 1.125rem !important;
  }
  .u-xl-pad1,
  .u-xl-padSides1,
  .u-xl-padLeft1 {
    padding-left: 1.125rem !important;
  }
  .u-xl-pad1,
  .u-xl-padSides1,
  .u-xl-padRight1 {
    padding-right: 1.125rem !important;
  }
  .u-xl-space2,
  .u-xl-spaceEnds2,
  .u-xl-spaceTop2 {
    margin-top: 1.26563rem !important;
  }
  .u-xl-space2,
  .u-xl-spaceEnds2,
  .u-xl-spaceBottom2 {
    margin-bottom: 1.26563rem !important;
  }
  .u-xl-space2,
  .u-xl-spaceSides2,
  .u-xl-spaceLeft2 {
    margin-left: 1.26563rem !important;
  }
  .u-xl-space2,
  .u-xl-spaceSides2,
  .u-xl-spaceRight2 {
    margin-right: 1.26563rem !important;
  }
  .u-xl-pad2,
  .u-xl-padEnds2,
  .u-xl-padTop2 {
    padding-top: 1.26563rem !important;
  }
  .u-xl-pad2,
  .u-xl-padEnds2,
  .u-xl-padBottom2 {
    padding-bottom: 1.26563rem !important;
  }
  .u-xl-pad2,
  .u-xl-padSides2,
  .u-xl-padLeft2 {
    padding-left: 1.26563rem !important;
  }
  .u-xl-pad2,
  .u-xl-padSides2,
  .u-xl-padRight2 {
    padding-right: 1.26563rem !important;
  }
  .u-xl-space3,
  .u-xl-spaceEnds3,
  .u-xl-spaceTop3 {
    margin-top: 1.42383rem !important;
  }
  .u-xl-space3,
  .u-xl-spaceEnds3,
  .u-xl-spaceBottom3 {
    margin-bottom: 1.42383rem !important;
  }
  .u-xl-space3,
  .u-xl-spaceSides3,
  .u-xl-spaceLeft3 {
    margin-left: 1.42383rem !important;
  }
  .u-xl-space3,
  .u-xl-spaceSides3,
  .u-xl-spaceRight3 {
    margin-right: 1.42383rem !important;
  }
  .u-xl-pad3,
  .u-xl-padEnds3,
  .u-xl-padTop3 {
    padding-top: 1.42383rem !important;
  }
  .u-xl-pad3,
  .u-xl-padEnds3,
  .u-xl-padBottom3 {
    padding-bottom: 1.42383rem !important;
  }
  .u-xl-pad3,
  .u-xl-padSides3,
  .u-xl-padLeft3 {
    padding-left: 1.42383rem !important;
  }
  .u-xl-pad3,
  .u-xl-padSides3,
  .u-xl-padRight3 {
    padding-right: 1.42383rem !important;
  }
  .u-xl-space4,
  .u-xl-spaceEnds4,
  .u-xl-spaceTop4 {
    margin-top: 1.60181rem !important;
  }
  .u-xl-space4,
  .u-xl-spaceEnds4,
  .u-xl-spaceBottom4 {
    margin-bottom: 1.60181rem !important;
  }
  .u-xl-space4,
  .u-xl-spaceSides4,
  .u-xl-spaceLeft4 {
    margin-left: 1.60181rem !important;
  }
  .u-xl-space4,
  .u-xl-spaceSides4,
  .u-xl-spaceRight4 {
    margin-right: 1.60181rem !important;
  }
  .u-xl-pad4,
  .u-xl-padEnds4,
  .u-xl-padTop4 {
    padding-top: 1.60181rem !important;
  }
  .u-xl-pad4,
  .u-xl-padEnds4,
  .u-xl-padBottom4 {
    padding-bottom: 1.60181rem !important;
  }
  .u-xl-pad4,
  .u-xl-padSides4,
  .u-xl-padLeft4 {
    padding-left: 1.60181rem !important;
  }
  .u-xl-pad4,
  .u-xl-padSides4,
  .u-xl-padRight4 {
    padding-right: 1.60181rem !important;
  }
  .u-xl-space5,
  .u-xl-spaceEnds5,
  .u-xl-spaceTop5 {
    margin-top: 1.80203rem !important;
  }
  .u-xl-space5,
  .u-xl-spaceEnds5,
  .u-xl-spaceBottom5 {
    margin-bottom: 1.80203rem !important;
  }
  .u-xl-space5,
  .u-xl-spaceSides5,
  .u-xl-spaceLeft5 {
    margin-left: 1.80203rem !important;
  }
  .u-xl-space5,
  .u-xl-spaceSides5,
  .u-xl-spaceRight5 {
    margin-right: 1.80203rem !important;
  }
  .u-xl-pad5,
  .u-xl-padEnds5,
  .u-xl-padTop5 {
    padding-top: 1.80203rem !important;
  }
  .u-xl-pad5,
  .u-xl-padEnds5,
  .u-xl-padBottom5 {
    padding-bottom: 1.80203rem !important;
  }
  .u-xl-pad5,
  .u-xl-padSides5,
  .u-xl-padLeft5 {
    padding-left: 1.80203rem !important;
  }
  .u-xl-pad5,
  .u-xl-padSides5,
  .u-xl-padRight5 {
    padding-right: 1.80203rem !important;
  }
  .u-xl-space6,
  .u-xl-spaceEnds6,
  .u-xl-spaceTop6 {
    margin-top: 2.02729rem !important;
  }
  .u-xl-space6,
  .u-xl-spaceEnds6,
  .u-xl-spaceBottom6 {
    margin-bottom: 2.02729rem !important;
  }
  .u-xl-space6,
  .u-xl-spaceSides6,
  .u-xl-spaceLeft6 {
    margin-left: 2.02729rem !important;
  }
  .u-xl-space6,
  .u-xl-spaceSides6,
  .u-xl-spaceRight6 {
    margin-right: 2.02729rem !important;
  }
  .u-xl-pad6,
  .u-xl-padEnds6,
  .u-xl-padTop6 {
    padding-top: 2.02729rem !important;
  }
  .u-xl-pad6,
  .u-xl-padEnds6,
  .u-xl-padBottom6 {
    padding-bottom: 2.02729rem !important;
  }
  .u-xl-pad6,
  .u-xl-padSides6,
  .u-xl-padLeft6 {
    padding-left: 2.02729rem !important;
  }
  .u-xl-pad6,
  .u-xl-padSides6,
  .u-xl-padRight6 {
    padding-right: 2.02729rem !important;
  }
  .u-xl-space7,
  .u-xl-spaceEnds7,
  .u-xl-spaceTop7 {
    margin-top: 2.2807rem !important;
  }
  .u-xl-space7,
  .u-xl-spaceEnds7,
  .u-xl-spaceBottom7 {
    margin-bottom: 2.2807rem !important;
  }
  .u-xl-space7,
  .u-xl-spaceSides7,
  .u-xl-spaceLeft7 {
    margin-left: 2.2807rem !important;
  }
  .u-xl-space7,
  .u-xl-spaceSides7,
  .u-xl-spaceRight7 {
    margin-right: 2.2807rem !important;
  }
  .u-xl-pad7,
  .u-xl-padEnds7,
  .u-xl-padTop7 {
    padding-top: 2.2807rem !important;
  }
  .u-xl-pad7,
  .u-xl-padEnds7,
  .u-xl-padBottom7 {
    padding-bottom: 2.2807rem !important;
  }
  .u-xl-pad7,
  .u-xl-padSides7,
  .u-xl-padLeft7 {
    padding-left: 2.2807rem !important;
  }
  .u-xl-pad7,
  .u-xl-padSides7,
  .u-xl-padRight7 {
    padding-right: 2.2807rem !important;
  }
  .u-xl-space8,
  .u-xl-spaceEnds8,
  .u-xl-spaceTop8 {
    margin-top: 2.56578rem !important;
  }
  .u-xl-space8,
  .u-xl-spaceEnds8,
  .u-xl-spaceBottom8 {
    margin-bottom: 2.56578rem !important;
  }
  .u-xl-space8,
  .u-xl-spaceSides8,
  .u-xl-spaceLeft8 {
    margin-left: 2.56578rem !important;
  }
  .u-xl-space8,
  .u-xl-spaceSides8,
  .u-xl-spaceRight8 {
    margin-right: 2.56578rem !important;
  }
  .u-xl-pad8,
  .u-xl-padEnds8,
  .u-xl-padTop8 {
    padding-top: 2.56578rem !important;
  }
  .u-xl-pad8,
  .u-xl-padEnds8,
  .u-xl-padBottom8 {
    padding-bottom: 2.56578rem !important;
  }
  .u-xl-pad8,
  .u-xl-padSides8,
  .u-xl-padLeft8 {
    padding-left: 2.56578rem !important;
  }
  .u-xl-pad8,
  .u-xl-padSides8,
  .u-xl-padRight8 {
    padding-right: 2.56578rem !important;
  }
  .u-xl-space9,
  .u-xl-spaceEnds9,
  .u-xl-spaceTop9 {
    margin-top: 2.88651rem !important;
  }
  .u-xl-space9,
  .u-xl-spaceEnds9,
  .u-xl-spaceBottom9 {
    margin-bottom: 2.88651rem !important;
  }
  .u-xl-space9,
  .u-xl-spaceSides9,
  .u-xl-spaceLeft9 {
    margin-left: 2.88651rem !important;
  }
  .u-xl-space9,
  .u-xl-spaceSides9,
  .u-xl-spaceRight9 {
    margin-right: 2.88651rem !important;
  }
  .u-xl-pad9,
  .u-xl-padEnds9,
  .u-xl-padTop9 {
    padding-top: 2.88651rem !important;
  }
  .u-xl-pad9,
  .u-xl-padEnds9,
  .u-xl-padBottom9 {
    padding-bottom: 2.88651rem !important;
  }
  .u-xl-pad9,
  .u-xl-padSides9,
  .u-xl-padLeft9 {
    padding-left: 2.88651rem !important;
  }
  .u-xl-pad9,
  .u-xl-padSides9,
  .u-xl-padRight9 {
    padding-right: 2.88651rem !important;
  }
  .u-xl-space10,
  .u-xl-spaceEnds10,
  .u-xl-spaceTop10 {
    margin-top: 3.24732rem !important;
  }
  .u-xl-space10,
  .u-xl-spaceEnds10,
  .u-xl-spaceBottom10 {
    margin-bottom: 3.24732rem !important;
  }
  .u-xl-space10,
  .u-xl-spaceSides10,
  .u-xl-spaceLeft10 {
    margin-left: 3.24732rem !important;
  }
  .u-xl-space10,
  .u-xl-spaceSides10,
  .u-xl-spaceRight10 {
    margin-right: 3.24732rem !important;
  }
  .u-xl-pad10,
  .u-xl-padEnds10,
  .u-xl-padTop10 {
    padding-top: 3.24732rem !important;
  }
  .u-xl-pad10,
  .u-xl-padEnds10,
  .u-xl-padBottom10 {
    padding-bottom: 3.24732rem !important;
  }
  .u-xl-pad10,
  .u-xl-padSides10,
  .u-xl-padLeft10 {
    padding-left: 3.24732rem !important;
  }
  .u-xl-pad10,
  .u-xl-padSides10,
  .u-xl-padRight10 {
    padding-right: 3.24732rem !important;
  }
  .u-xl-space11,
  .u-xl-spaceEnds11,
  .u-xl-spaceTop11 {
    margin-top: 3.65324rem !important;
  }
  .u-xl-space11,
  .u-xl-spaceEnds11,
  .u-xl-spaceBottom11 {
    margin-bottom: 3.65324rem !important;
  }
  .u-xl-space11,
  .u-xl-spaceSides11,
  .u-xl-spaceLeft11 {
    margin-left: 3.65324rem !important;
  }
  .u-xl-space11,
  .u-xl-spaceSides11,
  .u-xl-spaceRight11 {
    margin-right: 3.65324rem !important;
  }
  .u-xl-pad11,
  .u-xl-padEnds11,
  .u-xl-padTop11 {
    padding-top: 3.65324rem !important;
  }
  .u-xl-pad11,
  .u-xl-padEnds11,
  .u-xl-padBottom11 {
    padding-bottom: 3.65324rem !important;
  }
  .u-xl-pad11,
  .u-xl-padSides11,
  .u-xl-padLeft11 {
    padding-left: 3.65324rem !important;
  }
  .u-xl-pad11,
  .u-xl-padSides11,
  .u-xl-padRight11 {
    padding-right: 3.65324rem !important;
  }
  .u-xl-space12,
  .u-xl-spaceEnds12,
  .u-xl-spaceTop12 {
    margin-top: 4.10989rem !important;
  }
  .u-xl-space12,
  .u-xl-spaceEnds12,
  .u-xl-spaceBottom12 {
    margin-bottom: 4.10989rem !important;
  }
  .u-xl-space12,
  .u-xl-spaceSides12,
  .u-xl-spaceLeft12 {
    margin-left: 4.10989rem !important;
  }
  .u-xl-space12,
  .u-xl-spaceSides12,
  .u-xl-spaceRight12 {
    margin-right: 4.10989rem !important;
  }
  .u-xl-pad12,
  .u-xl-padEnds12,
  .u-xl-padTop12 {
    padding-top: 4.10989rem !important;
  }
  .u-xl-pad12,
  .u-xl-padEnds12,
  .u-xl-padBottom12 {
    padding-bottom: 4.10989rem !important;
  }
  .u-xl-pad12,
  .u-xl-padSides12,
  .u-xl-padLeft12 {
    padding-left: 4.10989rem !important;
  }
  .u-xl-pad12,
  .u-xl-padSides12,
  .u-xl-padRight12 {
    padding-right: 4.10989rem !important;
  }
  .u-xl-spaceNone,
  .u-xl-spaceEndsNone,
  .u-xl-spaceTopNone {
    margin-top: 0 !important;
  }
  .u-xl-spaceNone,
  .u-xl-spaceEndsNone,
  .u-xl-spaceBottomNone {
    margin-bottom: 0 !important;
  }
  .u-xl-spaceNone,
  .u-xl-spaceSidesNone,
  .u-xl-spaceLeftNone {
    margin-left: 0 !important;
  }
  .u-xl-spaceNone,
  .u-xl-spaceSidesNone,
  .u-xl-spaceRightNone {
    margin-right: 0 !important;
  }
  .u-xl-padNone,
  .u-xl-padEndsNone,
  .u-xl-padTopNone {
    padding-top: 0 !important;
  }
  .u-xl-padNone,
  .u-xl-padEndsNone,
  .u-xl-padBottomNone {
    padding-bottom: 0 !important;
  }
  .u-xl-padNone,
  .u-xl-padSidesNone,
  .u-xl-padLeftNone {
    padding-left: 0 !important;
  }
  .u-xl-padNone,
  .u-xl-padSidesNone,
  .u-xl-padRightNone {
    padding-right: 0 !important;
  }
  .u-xl-pull09,
  .u-xl-pullEnds09,
  .u-xl-pullTop09 {
    margin-top: -0.34644rem !important;
  }
  .u-xl-pull09,
  .u-xl-pullEnds09,
  .u-xl-pullBottom09 {
    margin-bottom: -0.34644rem !important;
  }
  .u-xl-pull09,
  .u-xl-pullSides09,
  .u-xl-pullLeft09 {
    margin-left: -0.34644rem !important;
  }
  .u-xl-pull09,
  .u-xl-pullSides09,
  .u-xl-pullRight09 {
    margin-right: -0.34644rem !important;
  }
  .u-xl-pull08,
  .u-xl-pullEnds08,
  .u-xl-pullTop08 {
    margin-top: -0.38974rem !important;
  }
  .u-xl-pull08,
  .u-xl-pullEnds08,
  .u-xl-pullBottom08 {
    margin-bottom: -0.38974rem !important;
  }
  .u-xl-pull08,
  .u-xl-pullSides08,
  .u-xl-pullLeft08 {
    margin-left: -0.38974rem !important;
  }
  .u-xl-pull08,
  .u-xl-pullSides08,
  .u-xl-pullRight08 {
    margin-right: -0.38974rem !important;
  }
  .u-xl-pull07,
  .u-xl-pullEnds07,
  .u-xl-pullTop07 {
    margin-top: -0.43846rem !important;
  }
  .u-xl-pull07,
  .u-xl-pullEnds07,
  .u-xl-pullBottom07 {
    margin-bottom: -0.43846rem !important;
  }
  .u-xl-pull07,
  .u-xl-pullSides07,
  .u-xl-pullLeft07 {
    margin-left: -0.43846rem !important;
  }
  .u-xl-pull07,
  .u-xl-pullSides07,
  .u-xl-pullRight07 {
    margin-right: -0.43846rem !important;
  }
  .u-xl-pull06,
  .u-xl-pullEnds06,
  .u-xl-pullTop06 {
    margin-top: -0.49327rem !important;
  }
  .u-xl-pull06,
  .u-xl-pullEnds06,
  .u-xl-pullBottom06 {
    margin-bottom: -0.49327rem !important;
  }
  .u-xl-pull06,
  .u-xl-pullSides06,
  .u-xl-pullLeft06 {
    margin-left: -0.49327rem !important;
  }
  .u-xl-pull06,
  .u-xl-pullSides06,
  .u-xl-pullRight06 {
    margin-right: -0.49327rem !important;
  }
  .u-xl-pull05,
  .u-xl-pullEnds05,
  .u-xl-pullTop05 {
    margin-top: -0.55493rem !important;
  }
  .u-xl-pull05,
  .u-xl-pullEnds05,
  .u-xl-pullBottom05 {
    margin-bottom: -0.55493rem !important;
  }
  .u-xl-pull05,
  .u-xl-pullSides05,
  .u-xl-pullLeft05 {
    margin-left: -0.55493rem !important;
  }
  .u-xl-pull05,
  .u-xl-pullSides05,
  .u-xl-pullRight05 {
    margin-right: -0.55493rem !important;
  }
  .u-xl-pull04,
  .u-xl-pullEnds04,
  .u-xl-pullTop04 {
    margin-top: -0.6243rem !important;
  }
  .u-xl-pull04,
  .u-xl-pullEnds04,
  .u-xl-pullBottom04 {
    margin-bottom: -0.6243rem !important;
  }
  .u-xl-pull04,
  .u-xl-pullSides04,
  .u-xl-pullLeft04 {
    margin-left: -0.6243rem !important;
  }
  .u-xl-pull04,
  .u-xl-pullSides04,
  .u-xl-pullRight04 {
    margin-right: -0.6243rem !important;
  }
  .u-xl-pull03,
  .u-xl-pullEnds03,
  .u-xl-pullTop03 {
    margin-top: -0.70233rem !important;
  }
  .u-xl-pull03,
  .u-xl-pullEnds03,
  .u-xl-pullBottom03 {
    margin-bottom: -0.70233rem !important;
  }
  .u-xl-pull03,
  .u-xl-pullSides03,
  .u-xl-pullLeft03 {
    margin-left: -0.70233rem !important;
  }
  .u-xl-pull03,
  .u-xl-pullSides03,
  .u-xl-pullRight03 {
    margin-right: -0.70233rem !important;
  }
  .u-xl-pull02,
  .u-xl-pullEnds02,
  .u-xl-pullTop02 {
    margin-top: -0.79012rem !important;
  }
  .u-xl-pull02,
  .u-xl-pullEnds02,
  .u-xl-pullBottom02 {
    margin-bottom: -0.79012rem !important;
  }
  .u-xl-pull02,
  .u-xl-pullSides02,
  .u-xl-pullLeft02 {
    margin-left: -0.79012rem !important;
  }
  .u-xl-pull02,
  .u-xl-pullSides02,
  .u-xl-pullRight02 {
    margin-right: -0.79012rem !important;
  }
  .u-xl-pull01,
  .u-xl-pullEnds01,
  .u-xl-pullTop01 {
    margin-top: -0.88889rem !important;
  }
  .u-xl-pull01,
  .u-xl-pullEnds01,
  .u-xl-pullBottom01 {
    margin-bottom: -0.88889rem !important;
  }
  .u-xl-pull01,
  .u-xl-pullSides01,
  .u-xl-pullLeft01 {
    margin-left: -0.88889rem !important;
  }
  .u-xl-pull01,
  .u-xl-pullSides01,
  .u-xl-pullRight01 {
    margin-right: -0.88889rem !important;
  }
  .u-xl-pull,
  .u-xl-pullEnds,
  .u-xl-pullTop {
    margin-top: -1rem !important;
  }
  .u-xl-pull,
  .u-xl-pullEnds,
  .u-xl-pullBottom {
    margin-bottom: -1rem !important;
  }
  .u-xl-pull,
  .u-xl-pullSides,
  .u-xl-pullLeft {
    margin-left: -1rem !important;
  }
  .u-xl-pull,
  .u-xl-pullSides,
  .u-xl-pullRight {
    margin-right: -1rem !important;
  }
  .u-xl-pull1,
  .u-xl-pullEnds1,
  .u-xl-pullTop1 {
    margin-top: -1.125rem !important;
  }
  .u-xl-pull1,
  .u-xl-pullEnds1,
  .u-xl-pullBottom1 {
    margin-bottom: -1.125rem !important;
  }
  .u-xl-pull1,
  .u-xl-pullSides1,
  .u-xl-pullLeft1 {
    margin-left: -1.125rem !important;
  }
  .u-xl-pull1,
  .u-xl-pullSides1,
  .u-xl-pullRight1 {
    margin-right: -1.125rem !important;
  }
  .u-xl-pull2,
  .u-xl-pullEnds2,
  .u-xl-pullTop2 {
    margin-top: -1.26562rem !important;
  }
  .u-xl-pull2,
  .u-xl-pullEnds2,
  .u-xl-pullBottom2 {
    margin-bottom: -1.26562rem !important;
  }
  .u-xl-pull2,
  .u-xl-pullSides2,
  .u-xl-pullLeft2 {
    margin-left: -1.26562rem !important;
  }
  .u-xl-pull2,
  .u-xl-pullSides2,
  .u-xl-pullRight2 {
    margin-right: -1.26562rem !important;
  }
  .u-xl-pull3,
  .u-xl-pullEnds3,
  .u-xl-pullTop3 {
    margin-top: -1.42383rem !important;
  }
  .u-xl-pull3,
  .u-xl-pullEnds3,
  .u-xl-pullBottom3 {
    margin-bottom: -1.42383rem !important;
  }
  .u-xl-pull3,
  .u-xl-pullSides3,
  .u-xl-pullLeft3 {
    margin-left: -1.42383rem !important;
  }
  .u-xl-pull3,
  .u-xl-pullSides3,
  .u-xl-pullRight3 {
    margin-right: -1.42383rem !important;
  }
  .u-xl-pull4,
  .u-xl-pullEnds4,
  .u-xl-pullTop4 {
    margin-top: -1.60181rem !important;
  }
  .u-xl-pull4,
  .u-xl-pullEnds4,
  .u-xl-pullBottom4 {
    margin-bottom: -1.60181rem !important;
  }
  .u-xl-pull4,
  .u-xl-pullSides4,
  .u-xl-pullLeft4 {
    margin-left: -1.60181rem !important;
  }
  .u-xl-pull4,
  .u-xl-pullSides4,
  .u-xl-pullRight4 {
    margin-right: -1.60181rem !important;
  }
  .u-xl-pull5,
  .u-xl-pullEnds5,
  .u-xl-pullTop5 {
    margin-top: -1.80203rem !important;
  }
  .u-xl-pull5,
  .u-xl-pullEnds5,
  .u-xl-pullBottom5 {
    margin-bottom: -1.80203rem !important;
  }
  .u-xl-pull5,
  .u-xl-pullSides5,
  .u-xl-pullLeft5 {
    margin-left: -1.80203rem !important;
  }
  .u-xl-pull5,
  .u-xl-pullSides5,
  .u-xl-pullRight5 {
    margin-right: -1.80203rem !important;
  }
  .u-xl-pull6,
  .u-xl-pullEnds6,
  .u-xl-pullTop6 {
    margin-top: -2.02729rem !important;
  }
  .u-xl-pull6,
  .u-xl-pullEnds6,
  .u-xl-pullBottom6 {
    margin-bottom: -2.02729rem !important;
  }
  .u-xl-pull6,
  .u-xl-pullSides6,
  .u-xl-pullLeft6 {
    margin-left: -2.02729rem !important;
  }
  .u-xl-pull6,
  .u-xl-pullSides6,
  .u-xl-pullRight6 {
    margin-right: -2.02729rem !important;
  }
  .u-xl-pull7,
  .u-xl-pullEnds7,
  .u-xl-pullTop7 {
    margin-top: -2.2807rem !important;
  }
  .u-xl-pull7,
  .u-xl-pullEnds7,
  .u-xl-pullBottom7 {
    margin-bottom: -2.2807rem !important;
  }
  .u-xl-pull7,
  .u-xl-pullSides7,
  .u-xl-pullLeft7 {
    margin-left: -2.2807rem !important;
  }
  .u-xl-pull7,
  .u-xl-pullSides7,
  .u-xl-pullRight7 {
    margin-right: -2.2807rem !important;
  }
  .u-xl-pull8,
  .u-xl-pullEnds8,
  .u-xl-pullTop8 {
    margin-top: -2.56578rem !important;
  }
  .u-xl-pull8,
  .u-xl-pullEnds8,
  .u-xl-pullBottom8 {
    margin-bottom: -2.56578rem !important;
  }
  .u-xl-pull8,
  .u-xl-pullSides8,
  .u-xl-pullLeft8 {
    margin-left: -2.56578rem !important;
  }
  .u-xl-pull8,
  .u-xl-pullSides8,
  .u-xl-pullRight8 {
    margin-right: -2.56578rem !important;
  }
  .u-xl-pull9,
  .u-xl-pullEnds9,
  .u-xl-pullTop9 {
    margin-top: -2.88651rem !important;
  }
  .u-xl-pull9,
  .u-xl-pullEnds9,
  .u-xl-pullBottom9 {
    margin-bottom: -2.88651rem !important;
  }
  .u-xl-pull9,
  .u-xl-pullSides9,
  .u-xl-pullLeft9 {
    margin-left: -2.88651rem !important;
  }
  .u-xl-pull9,
  .u-xl-pullSides9,
  .u-xl-pullRight9 {
    margin-right: -2.88651rem !important;
  }
  .u-xl-pull10,
  .u-xl-pullEnds10,
  .u-xl-pullTop10 {
    margin-top: -3.24732rem !important;
  }
  .u-xl-pull10,
  .u-xl-pullEnds10,
  .u-xl-pullBottom10 {
    margin-bottom: -3.24732rem !important;
  }
  .u-xl-pull10,
  .u-xl-pullSides10,
  .u-xl-pullLeft10 {
    margin-left: -3.24732rem !important;
  }
  .u-xl-pull10,
  .u-xl-pullSides10,
  .u-xl-pullRight10 {
    margin-right: -3.24732rem !important;
  }
  .u-xl-pull11,
  .u-xl-pullEnds11,
  .u-xl-pullTop11 {
    margin-top: -3.65324rem !important;
  }
  .u-xl-pull11,
  .u-xl-pullEnds11,
  .u-xl-pullBottom11 {
    margin-bottom: -3.65324rem !important;
  }
  .u-xl-pull11,
  .u-xl-pullSides11,
  .u-xl-pullLeft11 {
    margin-left: -3.65324rem !important;
  }
  .u-xl-pull11,
  .u-xl-pullSides11,
  .u-xl-pullRight11 {
    margin-right: -3.65324rem !important;
  }
  .u-xl-pull12,
  .u-xl-pullEnds12,
  .u-xl-pullTop12 {
    margin-top: -4.10989rem !important;
  }
  .u-xl-pull12,
  .u-xl-pullEnds12,
  .u-xl-pullBottom12 {
    margin-bottom: -4.10989rem !important;
  }
  .u-xl-pull12,
  .u-xl-pullSides12,
  .u-xl-pullLeft12 {
    margin-left: -4.10989rem !important;
  }
  .u-xl-pull12,
  .u-xl-pullSides12,
  .u-xl-pullRight12 {
    margin-right: -4.10989rem !important;
  }
  .u-xl-spaceItemsNone > * + * {
    margin-top: 0rem;
  }
  .u-xl-staggerItemsNone > * + * {
    margin-top: 0em;
  }
}

@media print {
  .u-print-space09,
  .u-print-spaceEnds09,
  .u-print-spaceTop09 {
    margin-top: 0.34644rem !important;
  }
  .u-print-space09,
  .u-print-spaceEnds09,
  .u-print-spaceBottom09 {
    margin-bottom: 0.34644rem !important;
  }
  .u-print-space09,
  .u-print-spaceSides09,
  .u-print-spaceLeft09 {
    margin-left: 0.34644rem !important;
  }
  .u-print-space09,
  .u-print-spaceSides09,
  .u-print-spaceRight09 {
    margin-right: 0.34644rem !important;
  }
  .u-print-pad09,
  .u-print-padEnds09,
  .u-print-padTop09 {
    padding-top: 0.34644rem !important;
  }
  .u-print-pad09,
  .u-print-padEnds09,
  .u-print-padBottom09 {
    padding-bottom: 0.34644rem !important;
  }
  .u-print-pad09,
  .u-print-padSides09,
  .u-print-padLeft09 {
    padding-left: 0.34644rem !important;
  }
  .u-print-pad09,
  .u-print-padSides09,
  .u-print-padRight09 {
    padding-right: 0.34644rem !important;
  }
  .u-print-space08,
  .u-print-spaceEnds08,
  .u-print-spaceTop08 {
    margin-top: 0.38974rem !important;
  }
  .u-print-space08,
  .u-print-spaceEnds08,
  .u-print-spaceBottom08 {
    margin-bottom: 0.38974rem !important;
  }
  .u-print-space08,
  .u-print-spaceSides08,
  .u-print-spaceLeft08 {
    margin-left: 0.38974rem !important;
  }
  .u-print-space08,
  .u-print-spaceSides08,
  .u-print-spaceRight08 {
    margin-right: 0.38974rem !important;
  }
  .u-print-pad08,
  .u-print-padEnds08,
  .u-print-padTop08 {
    padding-top: 0.38974rem !important;
  }
  .u-print-pad08,
  .u-print-padEnds08,
  .u-print-padBottom08 {
    padding-bottom: 0.38974rem !important;
  }
  .u-print-pad08,
  .u-print-padSides08,
  .u-print-padLeft08 {
    padding-left: 0.38974rem !important;
  }
  .u-print-pad08,
  .u-print-padSides08,
  .u-print-padRight08 {
    padding-right: 0.38974rem !important;
  }
  .u-print-space07,
  .u-print-spaceEnds07,
  .u-print-spaceTop07 {
    margin-top: 0.43846rem !important;
  }
  .u-print-space07,
  .u-print-spaceEnds07,
  .u-print-spaceBottom07 {
    margin-bottom: 0.43846rem !important;
  }
  .u-print-space07,
  .u-print-spaceSides07,
  .u-print-spaceLeft07 {
    margin-left: 0.43846rem !important;
  }
  .u-print-space07,
  .u-print-spaceSides07,
  .u-print-spaceRight07 {
    margin-right: 0.43846rem !important;
  }
  .u-print-pad07,
  .u-print-padEnds07,
  .u-print-padTop07 {
    padding-top: 0.43846rem !important;
  }
  .u-print-pad07,
  .u-print-padEnds07,
  .u-print-padBottom07 {
    padding-bottom: 0.43846rem !important;
  }
  .u-print-pad07,
  .u-print-padSides07,
  .u-print-padLeft07 {
    padding-left: 0.43846rem !important;
  }
  .u-print-pad07,
  .u-print-padSides07,
  .u-print-padRight07 {
    padding-right: 0.43846rem !important;
  }
  .u-print-space06,
  .u-print-spaceEnds06,
  .u-print-spaceTop06 {
    margin-top: 0.49327rem !important;
  }
  .u-print-space06,
  .u-print-spaceEnds06,
  .u-print-spaceBottom06 {
    margin-bottom: 0.49327rem !important;
  }
  .u-print-space06,
  .u-print-spaceSides06,
  .u-print-spaceLeft06 {
    margin-left: 0.49327rem !important;
  }
  .u-print-space06,
  .u-print-spaceSides06,
  .u-print-spaceRight06 {
    margin-right: 0.49327rem !important;
  }
  .u-print-pad06,
  .u-print-padEnds06,
  .u-print-padTop06 {
    padding-top: 0.49327rem !important;
  }
  .u-print-pad06,
  .u-print-padEnds06,
  .u-print-padBottom06 {
    padding-bottom: 0.49327rem !important;
  }
  .u-print-pad06,
  .u-print-padSides06,
  .u-print-padLeft06 {
    padding-left: 0.49327rem !important;
  }
  .u-print-pad06,
  .u-print-padSides06,
  .u-print-padRight06 {
    padding-right: 0.49327rem !important;
  }
  .u-print-space05,
  .u-print-spaceEnds05,
  .u-print-spaceTop05 {
    margin-top: 0.55493rem !important;
  }
  .u-print-space05,
  .u-print-spaceEnds05,
  .u-print-spaceBottom05 {
    margin-bottom: 0.55493rem !important;
  }
  .u-print-space05,
  .u-print-spaceSides05,
  .u-print-spaceLeft05 {
    margin-left: 0.55493rem !important;
  }
  .u-print-space05,
  .u-print-spaceSides05,
  .u-print-spaceRight05 {
    margin-right: 0.55493rem !important;
  }
  .u-print-pad05,
  .u-print-padEnds05,
  .u-print-padTop05 {
    padding-top: 0.55493rem !important;
  }
  .u-print-pad05,
  .u-print-padEnds05,
  .u-print-padBottom05 {
    padding-bottom: 0.55493rem !important;
  }
  .u-print-pad05,
  .u-print-padSides05,
  .u-print-padLeft05 {
    padding-left: 0.55493rem !important;
  }
  .u-print-pad05,
  .u-print-padSides05,
  .u-print-padRight05 {
    padding-right: 0.55493rem !important;
  }
  .u-print-space04,
  .u-print-spaceEnds04,
  .u-print-spaceTop04 {
    margin-top: 0.6243rem !important;
  }
  .u-print-space04,
  .u-print-spaceEnds04,
  .u-print-spaceBottom04 {
    margin-bottom: 0.6243rem !important;
  }
  .u-print-space04,
  .u-print-spaceSides04,
  .u-print-spaceLeft04 {
    margin-left: 0.6243rem !important;
  }
  .u-print-space04,
  .u-print-spaceSides04,
  .u-print-spaceRight04 {
    margin-right: 0.6243rem !important;
  }
  .u-print-pad04,
  .u-print-padEnds04,
  .u-print-padTop04 {
    padding-top: 0.6243rem !important;
  }
  .u-print-pad04,
  .u-print-padEnds04,
  .u-print-padBottom04 {
    padding-bottom: 0.6243rem !important;
  }
  .u-print-pad04,
  .u-print-padSides04,
  .u-print-padLeft04 {
    padding-left: 0.6243rem !important;
  }
  .u-print-pad04,
  .u-print-padSides04,
  .u-print-padRight04 {
    padding-right: 0.6243rem !important;
  }
  .u-print-space03,
  .u-print-spaceEnds03,
  .u-print-spaceTop03 {
    margin-top: 0.70233rem !important;
  }
  .u-print-space03,
  .u-print-spaceEnds03,
  .u-print-spaceBottom03 {
    margin-bottom: 0.70233rem !important;
  }
  .u-print-space03,
  .u-print-spaceSides03,
  .u-print-spaceLeft03 {
    margin-left: 0.70233rem !important;
  }
  .u-print-space03,
  .u-print-spaceSides03,
  .u-print-spaceRight03 {
    margin-right: 0.70233rem !important;
  }
  .u-print-pad03,
  .u-print-padEnds03,
  .u-print-padTop03 {
    padding-top: 0.70233rem !important;
  }
  .u-print-pad03,
  .u-print-padEnds03,
  .u-print-padBottom03 {
    padding-bottom: 0.70233rem !important;
  }
  .u-print-pad03,
  .u-print-padSides03,
  .u-print-padLeft03 {
    padding-left: 0.70233rem !important;
  }
  .u-print-pad03,
  .u-print-padSides03,
  .u-print-padRight03 {
    padding-right: 0.70233rem !important;
  }
  .u-print-space02,
  .u-print-spaceEnds02,
  .u-print-spaceTop02 {
    margin-top: 0.79012rem !important;
  }
  .u-print-space02,
  .u-print-spaceEnds02,
  .u-print-spaceBottom02 {
    margin-bottom: 0.79012rem !important;
  }
  .u-print-space02,
  .u-print-spaceSides02,
  .u-print-spaceLeft02 {
    margin-left: 0.79012rem !important;
  }
  .u-print-space02,
  .u-print-spaceSides02,
  .u-print-spaceRight02 {
    margin-right: 0.79012rem !important;
  }
  .u-print-pad02,
  .u-print-padEnds02,
  .u-print-padTop02 {
    padding-top: 0.79012rem !important;
  }
  .u-print-pad02,
  .u-print-padEnds02,
  .u-print-padBottom02 {
    padding-bottom: 0.79012rem !important;
  }
  .u-print-pad02,
  .u-print-padSides02,
  .u-print-padLeft02 {
    padding-left: 0.79012rem !important;
  }
  .u-print-pad02,
  .u-print-padSides02,
  .u-print-padRight02 {
    padding-right: 0.79012rem !important;
  }
  .u-print-space01,
  .u-print-spaceEnds01,
  .u-print-spaceTop01 {
    margin-top: 0.88889rem !important;
  }
  .u-print-space01,
  .u-print-spaceEnds01,
  .u-print-spaceBottom01 {
    margin-bottom: 0.88889rem !important;
  }
  .u-print-space01,
  .u-print-spaceSides01,
  .u-print-spaceLeft01 {
    margin-left: 0.88889rem !important;
  }
  .u-print-space01,
  .u-print-spaceSides01,
  .u-print-spaceRight01 {
    margin-right: 0.88889rem !important;
  }
  .u-print-pad01,
  .u-print-padEnds01,
  .u-print-padTop01 {
    padding-top: 0.88889rem !important;
  }
  .u-print-pad01,
  .u-print-padEnds01,
  .u-print-padBottom01 {
    padding-bottom: 0.88889rem !important;
  }
  .u-print-pad01,
  .u-print-padSides01,
  .u-print-padLeft01 {
    padding-left: 0.88889rem !important;
  }
  .u-print-pad01,
  .u-print-padSides01,
  .u-print-padRight01 {
    padding-right: 0.88889rem !important;
  }
  .u-print-space,
  .u-print-spaceEnds,
  .u-print-spaceTop {
    margin-top: 1rem !important;
  }
  .u-print-space,
  .u-print-spaceEnds,
  .u-print-spaceBottom {
    margin-bottom: 1rem !important;
  }
  .u-print-space,
  .u-print-spaceSides,
  .u-print-spaceLeft {
    margin-left: 1rem !important;
  }
  .u-print-space,
  .u-print-spaceSides,
  .u-print-spaceRight {
    margin-right: 1rem !important;
  }
  .u-print-pad,
  .u-print-padEnds,
  .u-print-padTop {
    padding-top: 1rem !important;
  }
  .u-print-pad,
  .u-print-padEnds,
  .u-print-padBottom {
    padding-bottom: 1rem !important;
  }
  .u-print-pad,
  .u-print-padSides,
  .u-print-padLeft {
    padding-left: 1rem !important;
  }
  .u-print-pad,
  .u-print-padSides,
  .u-print-padRight {
    padding-right: 1rem !important;
  }
  .u-print-space1,
  .u-print-spaceEnds1,
  .u-print-spaceTop1 {
    margin-top: 1.125rem !important;
  }
  .u-print-space1,
  .u-print-spaceEnds1,
  .u-print-spaceBottom1 {
    margin-bottom: 1.125rem !important;
  }
  .u-print-space1,
  .u-print-spaceSides1,
  .u-print-spaceLeft1 {
    margin-left: 1.125rem !important;
  }
  .u-print-space1,
  .u-print-spaceSides1,
  .u-print-spaceRight1 {
    margin-right: 1.125rem !important;
  }
  .u-print-pad1,
  .u-print-padEnds1,
  .u-print-padTop1 {
    padding-top: 1.125rem !important;
  }
  .u-print-pad1,
  .u-print-padEnds1,
  .u-print-padBottom1 {
    padding-bottom: 1.125rem !important;
  }
  .u-print-pad1,
  .u-print-padSides1,
  .u-print-padLeft1 {
    padding-left: 1.125rem !important;
  }
  .u-print-pad1,
  .u-print-padSides1,
  .u-print-padRight1 {
    padding-right: 1.125rem !important;
  }
  .u-print-space2,
  .u-print-spaceEnds2,
  .u-print-spaceTop2 {
    margin-top: 1.26563rem !important;
  }
  .u-print-space2,
  .u-print-spaceEnds2,
  .u-print-spaceBottom2 {
    margin-bottom: 1.26563rem !important;
  }
  .u-print-space2,
  .u-print-spaceSides2,
  .u-print-spaceLeft2 {
    margin-left: 1.26563rem !important;
  }
  .u-print-space2,
  .u-print-spaceSides2,
  .u-print-spaceRight2 {
    margin-right: 1.26563rem !important;
  }
  .u-print-pad2,
  .u-print-padEnds2,
  .u-print-padTop2 {
    padding-top: 1.26563rem !important;
  }
  .u-print-pad2,
  .u-print-padEnds2,
  .u-print-padBottom2 {
    padding-bottom: 1.26563rem !important;
  }
  .u-print-pad2,
  .u-print-padSides2,
  .u-print-padLeft2 {
    padding-left: 1.26563rem !important;
  }
  .u-print-pad2,
  .u-print-padSides2,
  .u-print-padRight2 {
    padding-right: 1.26563rem !important;
  }
  .u-print-space3,
  .u-print-spaceEnds3,
  .u-print-spaceTop3 {
    margin-top: 1.42383rem !important;
  }
  .u-print-space3,
  .u-print-spaceEnds3,
  .u-print-spaceBottom3 {
    margin-bottom: 1.42383rem !important;
  }
  .u-print-space3,
  .u-print-spaceSides3,
  .u-print-spaceLeft3 {
    margin-left: 1.42383rem !important;
  }
  .u-print-space3,
  .u-print-spaceSides3,
  .u-print-spaceRight3 {
    margin-right: 1.42383rem !important;
  }
  .u-print-pad3,
  .u-print-padEnds3,
  .u-print-padTop3 {
    padding-top: 1.42383rem !important;
  }
  .u-print-pad3,
  .u-print-padEnds3,
  .u-print-padBottom3 {
    padding-bottom: 1.42383rem !important;
  }
  .u-print-pad3,
  .u-print-padSides3,
  .u-print-padLeft3 {
    padding-left: 1.42383rem !important;
  }
  .u-print-pad3,
  .u-print-padSides3,
  .u-print-padRight3 {
    padding-right: 1.42383rem !important;
  }
  .u-print-space4,
  .u-print-spaceEnds4,
  .u-print-spaceTop4 {
    margin-top: 1.60181rem !important;
  }
  .u-print-space4,
  .u-print-spaceEnds4,
  .u-print-spaceBottom4 {
    margin-bottom: 1.60181rem !important;
  }
  .u-print-space4,
  .u-print-spaceSides4,
  .u-print-spaceLeft4 {
    margin-left: 1.60181rem !important;
  }
  .u-print-space4,
  .u-print-spaceSides4,
  .u-print-spaceRight4 {
    margin-right: 1.60181rem !important;
  }
  .u-print-pad4,
  .u-print-padEnds4,
  .u-print-padTop4 {
    padding-top: 1.60181rem !important;
  }
  .u-print-pad4,
  .u-print-padEnds4,
  .u-print-padBottom4 {
    padding-bottom: 1.60181rem !important;
  }
  .u-print-pad4,
  .u-print-padSides4,
  .u-print-padLeft4 {
    padding-left: 1.60181rem !important;
  }
  .u-print-pad4,
  .u-print-padSides4,
  .u-print-padRight4 {
    padding-right: 1.60181rem !important;
  }
  .u-print-space5,
  .u-print-spaceEnds5,
  .u-print-spaceTop5 {
    margin-top: 1.80203rem !important;
  }
  .u-print-space5,
  .u-print-spaceEnds5,
  .u-print-spaceBottom5 {
    margin-bottom: 1.80203rem !important;
  }
  .u-print-space5,
  .u-print-spaceSides5,
  .u-print-spaceLeft5 {
    margin-left: 1.80203rem !important;
  }
  .u-print-space5,
  .u-print-spaceSides5,
  .u-print-spaceRight5 {
    margin-right: 1.80203rem !important;
  }
  .u-print-pad5,
  .u-print-padEnds5,
  .u-print-padTop5 {
    padding-top: 1.80203rem !important;
  }
  .u-print-pad5,
  .u-print-padEnds5,
  .u-print-padBottom5 {
    padding-bottom: 1.80203rem !important;
  }
  .u-print-pad5,
  .u-print-padSides5,
  .u-print-padLeft5 {
    padding-left: 1.80203rem !important;
  }
  .u-print-pad5,
  .u-print-padSides5,
  .u-print-padRight5 {
    padding-right: 1.80203rem !important;
  }
  .u-print-space6,
  .u-print-spaceEnds6,
  .u-print-spaceTop6 {
    margin-top: 2.02729rem !important;
  }
  .u-print-space6,
  .u-print-spaceEnds6,
  .u-print-spaceBottom6 {
    margin-bottom: 2.02729rem !important;
  }
  .u-print-space6,
  .u-print-spaceSides6,
  .u-print-spaceLeft6 {
    margin-left: 2.02729rem !important;
  }
  .u-print-space6,
  .u-print-spaceSides6,
  .u-print-spaceRight6 {
    margin-right: 2.02729rem !important;
  }
  .u-print-pad6,
  .u-print-padEnds6,
  .u-print-padTop6 {
    padding-top: 2.02729rem !important;
  }
  .u-print-pad6,
  .u-print-padEnds6,
  .u-print-padBottom6 {
    padding-bottom: 2.02729rem !important;
  }
  .u-print-pad6,
  .u-print-padSides6,
  .u-print-padLeft6 {
    padding-left: 2.02729rem !important;
  }
  .u-print-pad6,
  .u-print-padSides6,
  .u-print-padRight6 {
    padding-right: 2.02729rem !important;
  }
  .u-print-space7,
  .u-print-spaceEnds7,
  .u-print-spaceTop7 {
    margin-top: 2.2807rem !important;
  }
  .u-print-space7,
  .u-print-spaceEnds7,
  .u-print-spaceBottom7 {
    margin-bottom: 2.2807rem !important;
  }
  .u-print-space7,
  .u-print-spaceSides7,
  .u-print-spaceLeft7 {
    margin-left: 2.2807rem !important;
  }
  .u-print-space7,
  .u-print-spaceSides7,
  .u-print-spaceRight7 {
    margin-right: 2.2807rem !important;
  }
  .u-print-pad7,
  .u-print-padEnds7,
  .u-print-padTop7 {
    padding-top: 2.2807rem !important;
  }
  .u-print-pad7,
  .u-print-padEnds7,
  .u-print-padBottom7 {
    padding-bottom: 2.2807rem !important;
  }
  .u-print-pad7,
  .u-print-padSides7,
  .u-print-padLeft7 {
    padding-left: 2.2807rem !important;
  }
  .u-print-pad7,
  .u-print-padSides7,
  .u-print-padRight7 {
    padding-right: 2.2807rem !important;
  }
  .u-print-space8,
  .u-print-spaceEnds8,
  .u-print-spaceTop8 {
    margin-top: 2.56578rem !important;
  }
  .u-print-space8,
  .u-print-spaceEnds8,
  .u-print-spaceBottom8 {
    margin-bottom: 2.56578rem !important;
  }
  .u-print-space8,
  .u-print-spaceSides8,
  .u-print-spaceLeft8 {
    margin-left: 2.56578rem !important;
  }
  .u-print-space8,
  .u-print-spaceSides8,
  .u-print-spaceRight8 {
    margin-right: 2.56578rem !important;
  }
  .u-print-pad8,
  .u-print-padEnds8,
  .u-print-padTop8 {
    padding-top: 2.56578rem !important;
  }
  .u-print-pad8,
  .u-print-padEnds8,
  .u-print-padBottom8 {
    padding-bottom: 2.56578rem !important;
  }
  .u-print-pad8,
  .u-print-padSides8,
  .u-print-padLeft8 {
    padding-left: 2.56578rem !important;
  }
  .u-print-pad8,
  .u-print-padSides8,
  .u-print-padRight8 {
    padding-right: 2.56578rem !important;
  }
  .u-print-space9,
  .u-print-spaceEnds9,
  .u-print-spaceTop9 {
    margin-top: 2.88651rem !important;
  }
  .u-print-space9,
  .u-print-spaceEnds9,
  .u-print-spaceBottom9 {
    margin-bottom: 2.88651rem !important;
  }
  .u-print-space9,
  .u-print-spaceSides9,
  .u-print-spaceLeft9 {
    margin-left: 2.88651rem !important;
  }
  .u-print-space9,
  .u-print-spaceSides9,
  .u-print-spaceRight9 {
    margin-right: 2.88651rem !important;
  }
  .u-print-pad9,
  .u-print-padEnds9,
  .u-print-padTop9 {
    padding-top: 2.88651rem !important;
  }
  .u-print-pad9,
  .u-print-padEnds9,
  .u-print-padBottom9 {
    padding-bottom: 2.88651rem !important;
  }
  .u-print-pad9,
  .u-print-padSides9,
  .u-print-padLeft9 {
    padding-left: 2.88651rem !important;
  }
  .u-print-pad9,
  .u-print-padSides9,
  .u-print-padRight9 {
    padding-right: 2.88651rem !important;
  }
  .u-print-space10,
  .u-print-spaceEnds10,
  .u-print-spaceTop10 {
    margin-top: 3.24732rem !important;
  }
  .u-print-space10,
  .u-print-spaceEnds10,
  .u-print-spaceBottom10 {
    margin-bottom: 3.24732rem !important;
  }
  .u-print-space10,
  .u-print-spaceSides10,
  .u-print-spaceLeft10 {
    margin-left: 3.24732rem !important;
  }
  .u-print-space10,
  .u-print-spaceSides10,
  .u-print-spaceRight10 {
    margin-right: 3.24732rem !important;
  }
  .u-print-pad10,
  .u-print-padEnds10,
  .u-print-padTop10 {
    padding-top: 3.24732rem !important;
  }
  .u-print-pad10,
  .u-print-padEnds10,
  .u-print-padBottom10 {
    padding-bottom: 3.24732rem !important;
  }
  .u-print-pad10,
  .u-print-padSides10,
  .u-print-padLeft10 {
    padding-left: 3.24732rem !important;
  }
  .u-print-pad10,
  .u-print-padSides10,
  .u-print-padRight10 {
    padding-right: 3.24732rem !important;
  }
  .u-print-space11,
  .u-print-spaceEnds11,
  .u-print-spaceTop11 {
    margin-top: 3.65324rem !important;
  }
  .u-print-space11,
  .u-print-spaceEnds11,
  .u-print-spaceBottom11 {
    margin-bottom: 3.65324rem !important;
  }
  .u-print-space11,
  .u-print-spaceSides11,
  .u-print-spaceLeft11 {
    margin-left: 3.65324rem !important;
  }
  .u-print-space11,
  .u-print-spaceSides11,
  .u-print-spaceRight11 {
    margin-right: 3.65324rem !important;
  }
  .u-print-pad11,
  .u-print-padEnds11,
  .u-print-padTop11 {
    padding-top: 3.65324rem !important;
  }
  .u-print-pad11,
  .u-print-padEnds11,
  .u-print-padBottom11 {
    padding-bottom: 3.65324rem !important;
  }
  .u-print-pad11,
  .u-print-padSides11,
  .u-print-padLeft11 {
    padding-left: 3.65324rem !important;
  }
  .u-print-pad11,
  .u-print-padSides11,
  .u-print-padRight11 {
    padding-right: 3.65324rem !important;
  }
  .u-print-space12,
  .u-print-spaceEnds12,
  .u-print-spaceTop12 {
    margin-top: 4.10989rem !important;
  }
  .u-print-space12,
  .u-print-spaceEnds12,
  .u-print-spaceBottom12 {
    margin-bottom: 4.10989rem !important;
  }
  .u-print-space12,
  .u-print-spaceSides12,
  .u-print-spaceLeft12 {
    margin-left: 4.10989rem !important;
  }
  .u-print-space12,
  .u-print-spaceSides12,
  .u-print-spaceRight12 {
    margin-right: 4.10989rem !important;
  }
  .u-print-pad12,
  .u-print-padEnds12,
  .u-print-padTop12 {
    padding-top: 4.10989rem !important;
  }
  .u-print-pad12,
  .u-print-padEnds12,
  .u-print-padBottom12 {
    padding-bottom: 4.10989rem !important;
  }
  .u-print-pad12,
  .u-print-padSides12,
  .u-print-padLeft12 {
    padding-left: 4.10989rem !important;
  }
  .u-print-pad12,
  .u-print-padSides12,
  .u-print-padRight12 {
    padding-right: 4.10989rem !important;
  }
  .u-print-spaceNone,
  .u-print-spaceEndsNone,
  .u-print-spaceTopNone {
    margin-top: 0 !important;
  }
  .u-print-spaceNone,
  .u-print-spaceEndsNone,
  .u-print-spaceBottomNone {
    margin-bottom: 0 !important;
  }
  .u-print-spaceNone,
  .u-print-spaceSidesNone,
  .u-print-spaceLeftNone {
    margin-left: 0 !important;
  }
  .u-print-spaceNone,
  .u-print-spaceSidesNone,
  .u-print-spaceRightNone {
    margin-right: 0 !important;
  }
  .u-print-padNone,
  .u-print-padEndsNone,
  .u-print-padTopNone {
    padding-top: 0 !important;
  }
  .u-print-padNone,
  .u-print-padEndsNone,
  .u-print-padBottomNone {
    padding-bottom: 0 !important;
  }
  .u-print-padNone,
  .u-print-padSidesNone,
  .u-print-padLeftNone {
    padding-left: 0 !important;
  }
  .u-print-padNone,
  .u-print-padSidesNone,
  .u-print-padRightNone {
    padding-right: 0 !important;
  }
  .u-print-pull09,
  .u-print-pullEnds09,
  .u-print-pullTop09 {
    margin-top: -0.34644rem !important;
  }
  .u-print-pull09,
  .u-print-pullEnds09,
  .u-print-pullBottom09 {
    margin-bottom: -0.34644rem !important;
  }
  .u-print-pull09,
  .u-print-pullSides09,
  .u-print-pullLeft09 {
    margin-left: -0.34644rem !important;
  }
  .u-print-pull09,
  .u-print-pullSides09,
  .u-print-pullRight09 {
    margin-right: -0.34644rem !important;
  }
  .u-print-pull08,
  .u-print-pullEnds08,
  .u-print-pullTop08 {
    margin-top: -0.38974rem !important;
  }
  .u-print-pull08,
  .u-print-pullEnds08,
  .u-print-pullBottom08 {
    margin-bottom: -0.38974rem !important;
  }
  .u-print-pull08,
  .u-print-pullSides08,
  .u-print-pullLeft08 {
    margin-left: -0.38974rem !important;
  }
  .u-print-pull08,
  .u-print-pullSides08,
  .u-print-pullRight08 {
    margin-right: -0.38974rem !important;
  }
  .u-print-pull07,
  .u-print-pullEnds07,
  .u-print-pullTop07 {
    margin-top: -0.43846rem !important;
  }
  .u-print-pull07,
  .u-print-pullEnds07,
  .u-print-pullBottom07 {
    margin-bottom: -0.43846rem !important;
  }
  .u-print-pull07,
  .u-print-pullSides07,
  .u-print-pullLeft07 {
    margin-left: -0.43846rem !important;
  }
  .u-print-pull07,
  .u-print-pullSides07,
  .u-print-pullRight07 {
    margin-right: -0.43846rem !important;
  }
  .u-print-pull06,
  .u-print-pullEnds06,
  .u-print-pullTop06 {
    margin-top: -0.49327rem !important;
  }
  .u-print-pull06,
  .u-print-pullEnds06,
  .u-print-pullBottom06 {
    margin-bottom: -0.49327rem !important;
  }
  .u-print-pull06,
  .u-print-pullSides06,
  .u-print-pullLeft06 {
    margin-left: -0.49327rem !important;
  }
  .u-print-pull06,
  .u-print-pullSides06,
  .u-print-pullRight06 {
    margin-right: -0.49327rem !important;
  }
  .u-print-pull05,
  .u-print-pullEnds05,
  .u-print-pullTop05 {
    margin-top: -0.55493rem !important;
  }
  .u-print-pull05,
  .u-print-pullEnds05,
  .u-print-pullBottom05 {
    margin-bottom: -0.55493rem !important;
  }
  .u-print-pull05,
  .u-print-pullSides05,
  .u-print-pullLeft05 {
    margin-left: -0.55493rem !important;
  }
  .u-print-pull05,
  .u-print-pullSides05,
  .u-print-pullRight05 {
    margin-right: -0.55493rem !important;
  }
  .u-print-pull04,
  .u-print-pullEnds04,
  .u-print-pullTop04 {
    margin-top: -0.6243rem !important;
  }
  .u-print-pull04,
  .u-print-pullEnds04,
  .u-print-pullBottom04 {
    margin-bottom: -0.6243rem !important;
  }
  .u-print-pull04,
  .u-print-pullSides04,
  .u-print-pullLeft04 {
    margin-left: -0.6243rem !important;
  }
  .u-print-pull04,
  .u-print-pullSides04,
  .u-print-pullRight04 {
    margin-right: -0.6243rem !important;
  }
  .u-print-pull03,
  .u-print-pullEnds03,
  .u-print-pullTop03 {
    margin-top: -0.70233rem !important;
  }
  .u-print-pull03,
  .u-print-pullEnds03,
  .u-print-pullBottom03 {
    margin-bottom: -0.70233rem !important;
  }
  .u-print-pull03,
  .u-print-pullSides03,
  .u-print-pullLeft03 {
    margin-left: -0.70233rem !important;
  }
  .u-print-pull03,
  .u-print-pullSides03,
  .u-print-pullRight03 {
    margin-right: -0.70233rem !important;
  }
  .u-print-pull02,
  .u-print-pullEnds02,
  .u-print-pullTop02 {
    margin-top: -0.79012rem !important;
  }
  .u-print-pull02,
  .u-print-pullEnds02,
  .u-print-pullBottom02 {
    margin-bottom: -0.79012rem !important;
  }
  .u-print-pull02,
  .u-print-pullSides02,
  .u-print-pullLeft02 {
    margin-left: -0.79012rem !important;
  }
  .u-print-pull02,
  .u-print-pullSides02,
  .u-print-pullRight02 {
    margin-right: -0.79012rem !important;
  }
  .u-print-pull01,
  .u-print-pullEnds01,
  .u-print-pullTop01 {
    margin-top: -0.88889rem !important;
  }
  .u-print-pull01,
  .u-print-pullEnds01,
  .u-print-pullBottom01 {
    margin-bottom: -0.88889rem !important;
  }
  .u-print-pull01,
  .u-print-pullSides01,
  .u-print-pullLeft01 {
    margin-left: -0.88889rem !important;
  }
  .u-print-pull01,
  .u-print-pullSides01,
  .u-print-pullRight01 {
    margin-right: -0.88889rem !important;
  }
  .u-print-pull,
  .u-print-pullEnds,
  .u-print-pullTop {
    margin-top: -1rem !important;
  }
  .u-print-pull,
  .u-print-pullEnds,
  .u-print-pullBottom {
    margin-bottom: -1rem !important;
  }
  .u-print-pull,
  .u-print-pullSides,
  .u-print-pullLeft {
    margin-left: -1rem !important;
  }
  .u-print-pull,
  .u-print-pullSides,
  .u-print-pullRight {
    margin-right: -1rem !important;
  }
  .u-print-pull1,
  .u-print-pullEnds1,
  .u-print-pullTop1 {
    margin-top: -1.125rem !important;
  }
  .u-print-pull1,
  .u-print-pullEnds1,
  .u-print-pullBottom1 {
    margin-bottom: -1.125rem !important;
  }
  .u-print-pull1,
  .u-print-pullSides1,
  .u-print-pullLeft1 {
    margin-left: -1.125rem !important;
  }
  .u-print-pull1,
  .u-print-pullSides1,
  .u-print-pullRight1 {
    margin-right: -1.125rem !important;
  }
  .u-print-pull2,
  .u-print-pullEnds2,
  .u-print-pullTop2 {
    margin-top: -1.26562rem !important;
  }
  .u-print-pull2,
  .u-print-pullEnds2,
  .u-print-pullBottom2 {
    margin-bottom: -1.26562rem !important;
  }
  .u-print-pull2,
  .u-print-pullSides2,
  .u-print-pullLeft2 {
    margin-left: -1.26562rem !important;
  }
  .u-print-pull2,
  .u-print-pullSides2,
  .u-print-pullRight2 {
    margin-right: -1.26562rem !important;
  }
  .u-print-pull3,
  .u-print-pullEnds3,
  .u-print-pullTop3 {
    margin-top: -1.42383rem !important;
  }
  .u-print-pull3,
  .u-print-pullEnds3,
  .u-print-pullBottom3 {
    margin-bottom: -1.42383rem !important;
  }
  .u-print-pull3,
  .u-print-pullSides3,
  .u-print-pullLeft3 {
    margin-left: -1.42383rem !important;
  }
  .u-print-pull3,
  .u-print-pullSides3,
  .u-print-pullRight3 {
    margin-right: -1.42383rem !important;
  }
  .u-print-pull4,
  .u-print-pullEnds4,
  .u-print-pullTop4 {
    margin-top: -1.60181rem !important;
  }
  .u-print-pull4,
  .u-print-pullEnds4,
  .u-print-pullBottom4 {
    margin-bottom: -1.60181rem !important;
  }
  .u-print-pull4,
  .u-print-pullSides4,
  .u-print-pullLeft4 {
    margin-left: -1.60181rem !important;
  }
  .u-print-pull4,
  .u-print-pullSides4,
  .u-print-pullRight4 {
    margin-right: -1.60181rem !important;
  }
  .u-print-pull5,
  .u-print-pullEnds5,
  .u-print-pullTop5 {
    margin-top: -1.80203rem !important;
  }
  .u-print-pull5,
  .u-print-pullEnds5,
  .u-print-pullBottom5 {
    margin-bottom: -1.80203rem !important;
  }
  .u-print-pull5,
  .u-print-pullSides5,
  .u-print-pullLeft5 {
    margin-left: -1.80203rem !important;
  }
  .u-print-pull5,
  .u-print-pullSides5,
  .u-print-pullRight5 {
    margin-right: -1.80203rem !important;
  }
  .u-print-pull6,
  .u-print-pullEnds6,
  .u-print-pullTop6 {
    margin-top: -2.02729rem !important;
  }
  .u-print-pull6,
  .u-print-pullEnds6,
  .u-print-pullBottom6 {
    margin-bottom: -2.02729rem !important;
  }
  .u-print-pull6,
  .u-print-pullSides6,
  .u-print-pullLeft6 {
    margin-left: -2.02729rem !important;
  }
  .u-print-pull6,
  .u-print-pullSides6,
  .u-print-pullRight6 {
    margin-right: -2.02729rem !important;
  }
  .u-print-pull7,
  .u-print-pullEnds7,
  .u-print-pullTop7 {
    margin-top: -2.2807rem !important;
  }
  .u-print-pull7,
  .u-print-pullEnds7,
  .u-print-pullBottom7 {
    margin-bottom: -2.2807rem !important;
  }
  .u-print-pull7,
  .u-print-pullSides7,
  .u-print-pullLeft7 {
    margin-left: -2.2807rem !important;
  }
  .u-print-pull7,
  .u-print-pullSides7,
  .u-print-pullRight7 {
    margin-right: -2.2807rem !important;
  }
  .u-print-pull8,
  .u-print-pullEnds8,
  .u-print-pullTop8 {
    margin-top: -2.56578rem !important;
  }
  .u-print-pull8,
  .u-print-pullEnds8,
  .u-print-pullBottom8 {
    margin-bottom: -2.56578rem !important;
  }
  .u-print-pull8,
  .u-print-pullSides8,
  .u-print-pullLeft8 {
    margin-left: -2.56578rem !important;
  }
  .u-print-pull8,
  .u-print-pullSides8,
  .u-print-pullRight8 {
    margin-right: -2.56578rem !important;
  }
  .u-print-pull9,
  .u-print-pullEnds9,
  .u-print-pullTop9 {
    margin-top: -2.88651rem !important;
  }
  .u-print-pull9,
  .u-print-pullEnds9,
  .u-print-pullBottom9 {
    margin-bottom: -2.88651rem !important;
  }
  .u-print-pull9,
  .u-print-pullSides9,
  .u-print-pullLeft9 {
    margin-left: -2.88651rem !important;
  }
  .u-print-pull9,
  .u-print-pullSides9,
  .u-print-pullRight9 {
    margin-right: -2.88651rem !important;
  }
  .u-print-pull10,
  .u-print-pullEnds10,
  .u-print-pullTop10 {
    margin-top: -3.24732rem !important;
  }
  .u-print-pull10,
  .u-print-pullEnds10,
  .u-print-pullBottom10 {
    margin-bottom: -3.24732rem !important;
  }
  .u-print-pull10,
  .u-print-pullSides10,
  .u-print-pullLeft10 {
    margin-left: -3.24732rem !important;
  }
  .u-print-pull10,
  .u-print-pullSides10,
  .u-print-pullRight10 {
    margin-right: -3.24732rem !important;
  }
  .u-print-pull11,
  .u-print-pullEnds11,
  .u-print-pullTop11 {
    margin-top: -3.65324rem !important;
  }
  .u-print-pull11,
  .u-print-pullEnds11,
  .u-print-pullBottom11 {
    margin-bottom: -3.65324rem !important;
  }
  .u-print-pull11,
  .u-print-pullSides11,
  .u-print-pullLeft11 {
    margin-left: -3.65324rem !important;
  }
  .u-print-pull11,
  .u-print-pullSides11,
  .u-print-pullRight11 {
    margin-right: -3.65324rem !important;
  }
  .u-print-pull12,
  .u-print-pullEnds12,
  .u-print-pullTop12 {
    margin-top: -4.10989rem !important;
  }
  .u-print-pull12,
  .u-print-pullEnds12,
  .u-print-pullBottom12 {
    margin-bottom: -4.10989rem !important;
  }
  .u-print-pull12,
  .u-print-pullSides12,
  .u-print-pullLeft12 {
    margin-left: -4.10989rem !important;
  }
  .u-print-pull12,
  .u-print-pullSides12,
  .u-print-pullRight12 {
    margin-right: -4.10989rem !important;
  }
  .u-print-spaceItems09 > * + * {
    margin-top: 0.34644rem;
  }
  .u-print-staggerItems09 > * + * {
    margin-top: 0.34644em;
  }
  .u-print-spaceItems08 > * + * {
    margin-top: 0.38974rem;
  }
  .u-print-staggerItems08 > * + * {
    margin-top: 0.38974em;
  }
  .u-print-spaceItems07 > * + * {
    margin-top: 0.43846rem;
  }
  .u-print-staggerItems07 > * + * {
    margin-top: 0.43846em;
  }
  .u-print-spaceItems06 > * + * {
    margin-top: 0.49327rem;
  }
  .u-print-staggerItems06 > * + * {
    margin-top: 0.49327em;
  }
  .u-print-spaceItems05 > * + * {
    margin-top: 0.55493rem;
  }
  .u-print-staggerItems05 > * + * {
    margin-top: 0.55493em;
  }
  .u-print-spaceItems04 > * + * {
    margin-top: 0.6243rem;
  }
  .u-print-staggerItems04 > * + * {
    margin-top: 0.6243em;
  }
  .u-print-spaceItems03 > * + * {
    margin-top: 0.70233rem;
  }
  .u-print-staggerItems03 > * + * {
    margin-top: 0.70233em;
  }
  .u-print-spaceItems02 > * + * {
    margin-top: 0.79012rem;
  }
  .u-print-staggerItems02 > * + * {
    margin-top: 0.79012em;
  }
  .u-print-spaceItems01 > * + * {
    margin-top: 0.88889rem;
  }
  .u-print-staggerItems01 > * + * {
    margin-top: 0.88889em;
  }
  .u-print-spaceItems > * + * {
    margin-top: 1rem;
  }
  .u-print-staggerItems > * + * {
    margin-top: 1em;
  }
  .u-print-spaceItems1 > * + * {
    margin-top: 1.125rem;
  }
  .u-print-staggerItems1 > * + * {
    margin-top: 1.125em;
  }
  .u-print-spaceItems2 > * + * {
    margin-top: 1.26563rem;
  }
  .u-print-staggerItems2 > * + * {
    margin-top: 1.26563em;
  }
  .u-print-spaceItems3 > * + * {
    margin-top: 1.42383rem;
  }
  .u-print-staggerItems3 > * + * {
    margin-top: 1.42383em;
  }
  .u-print-spaceItems4 > * + * {
    margin-top: 1.60181rem;
  }
  .u-print-staggerItems4 > * + * {
    margin-top: 1.60181em;
  }
  .u-print-spaceItems5 > * + * {
    margin-top: 1.80203rem;
  }
  .u-print-staggerItems5 > * + * {
    margin-top: 1.80203em;
  }
  .u-print-spaceItems6 > * + * {
    margin-top: 2.02729rem;
  }
  .u-print-staggerItems6 > * + * {
    margin-top: 2.02729em;
  }
  .u-print-spaceItems7 > * + * {
    margin-top: 2.2807rem;
  }
  .u-print-staggerItems7 > * + * {
    margin-top: 2.2807em;
  }
  .u-print-spaceItems8 > * + * {
    margin-top: 2.56578rem;
  }
  .u-print-staggerItems8 > * + * {
    margin-top: 2.56578em;
  }
  .u-print-spaceItems9 > * + * {
    margin-top: 2.88651rem;
  }
  .u-print-staggerItems9 > * + * {
    margin-top: 2.88651em;
  }
  .u-print-spaceItems10 > * + * {
    margin-top: 3.24732rem;
  }
  .u-print-staggerItems10 > * + * {
    margin-top: 3.24732em;
  }
  .u-print-spaceItems11 > * + * {
    margin-top: 3.65324rem;
  }
  .u-print-staggerItems11 > * + * {
    margin-top: 3.65324em;
  }
  .u-print-spaceItems12 > * + * {
    margin-top: 4.10989rem;
  }
  .u-print-staggerItems12 > * + * {
    margin-top: 4.10989em;
  }
  .u-print-spaceItemsNone > * + * {
    margin-top: 0rem;
  }
  .u-print-staggerItemsNone > * + * {
    margin-top: 0em;
  }
}

/**
 * Miscellaneous
 */

.u-pullTopWave {
  margin-top: -5vw;
}

/** @define utilities */

/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */

.u-textBreak {
  word-wrap: break-word !important;
}

/**
 * Horizontal text alignment
 */

.u-textCenter {
  text-align: center !important;
}

.u-textLeft {
  text-align: left !important;
}

.u-textRight {
  text-align: right !important;
}

/**
 * Inherit the ancestor's text color.
 */

.u-textInheritColor {
  color: inherit !important;
}

/**
 * Enables font kerning in all browsers.
 * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
 *
 * 1. Chrome (not Windows), Firefox, IE 10+
 * 2. Safari 7 and future browsers
 * 3. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
 */

.u-textKern {
  -webkit-font-feature-settings: "kern" 1, "kern";
          font-feature-settings: "kern" 1, "kern"; /* 1 */
  -webkit-font-kerning: normal;
          font-kerning: normal; /* 2 */
  text-rendering: optimizeLegibility; /* 3 */
}

/**
 * Prevent whitespace wrapping
 */

.u-textNoWrap {
  white-space: nowrap !important;
}

/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */

.u-textTruncate {
  max-width: 100%; /* 1 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important; /* 2 */
}

/**
 * Size
 */

/* stylelint-disable plugin/selector-bem-pattern */

.u-textSize02 {
    font-size: 0.79012rem !important;
  }

.u-textSize01 {
    font-size: 0.88889rem !important;
  }

.u-textSize {
    font-size: 1rem !important;
  }

.u-textSize1 {
    font-size: 1.125rem !important;
  }

.u-textSize2 {
    font-size: 1.26563rem !important;
  }

.u-textSize3 {
    font-size: 1.42383rem !important;
  }

.u-textSize4 {
    font-size: 1.60181rem !important;
  }

.u-textSize5 {
    font-size: 1.80203rem !important;
  }

.u-textSize6 {
    font-size: 2.02729rem !important;
  }

.u-textSize7 {
    font-size: 2.2807rem !important;
  }

.u-textSize8 {
    font-size: 2.56578rem !important;
  }

.u-textSize9 {
    font-size: 2.88651rem !important;
  }

.u-textSize10 {
    font-size: 3.24732rem !important;
  }

.u-textSize11 {
    font-size: 3.65324rem !important;
  }

.u-textSize12 {
    font-size: 4.10989rem !important;
  }

.u-textSize13 {
    font-size: 4.62363rem !important;
  }

.u-textSize14 {
    font-size: 5.20158rem !important;
  }

.u-textShrink6 {
    font-size: 0.49327em !important;
  }

.u-textShrink5 {
    font-size: 0.55493em !important;
  }

.u-textShrink4 {
    font-size: 0.6243em !important;
  }

.u-textShrink3 {
    font-size: 0.70233em !important;
  }

.u-textShrink2 {
    font-size: 0.79012em !important;
  }

.u-textShrink1 {
    font-size: 0.88889em !important;
  }

.u-textShrink {
    font-size: 1em !important;
  }

.u-textGrow {
    font-size: 1em !important;
  }

.u-textGrow1 {
    font-size: 1.125em !important;
  }

.u-textGrow2 {
    font-size: 1.26563em !important;
  }

.u-textGrow3 {
    font-size: 1.42383em !important;
  }

.u-textGrow4 {
    font-size: 1.60181em !important;
  }

.u-textGrow5 {
    font-size: 1.80203em !important;
  }

.u-textGrow6 {
    font-size: 2.02729em !important;
  }

.u-textGrow7 {
    font-size: 2.2807em !important;
  }

.u-textGrow8 {
    font-size: 2.56578em !important;
  }

.u-textGrow9 {
    font-size: 2.88651em !important;
  }

.u-textGrow10 {
    font-size: 3.24732em !important;
  }

.u-textGrow11 {
    font-size: 3.65324em !important;
  }

.u-textGrow12 {
    font-size: 4.10989em !important;
  }

.u-textGrow13 {
    font-size: 4.62363em !important;
  }

.u-textGrow14 {
    font-size: 5.20158em !important;
  }

.u-textRespond {
    font-size: calc(1rem + 0.26563vw) !important;
  }

.u-textRespond1 {
    font-size: calc(1.125rem + 0.60181vw) !important;
  }

.u-textRespond2 {
    font-size: calc(1.26563rem + 1.02729vw) !important;
  }

@media (min-width: 30em) {
  .u-sm-textSize02 {
    font-size: 0.79012rem !important;
  }
  .u-sm-textSize01 {
    font-size: 0.88889rem !important;
  }
  .u-sm-textSize {
    font-size: 1rem !important;
  }
  .u-sm-textSize1 {
    font-size: 1.125rem !important;
  }
  .u-sm-textSize2 {
    font-size: 1.26563rem !important;
  }
  .u-sm-textSize3 {
    font-size: 1.42383rem !important;
  }
  .u-sm-textSize4 {
    font-size: 1.60181rem !important;
  }
  .u-sm-textSize5 {
    font-size: 1.80203rem !important;
  }
  .u-sm-textSize6 {
    font-size: 2.02729rem !important;
  }
  .u-sm-textSize7 {
    font-size: 2.2807rem !important;
  }
  .u-sm-textSize8 {
    font-size: 2.56578rem !important;
  }
  .u-sm-textSize9 {
    font-size: 2.88651rem !important;
  }
  .u-sm-textSize10 {
    font-size: 3.24732rem !important;
  }
  .u-sm-textSize11 {
    font-size: 3.65324rem !important;
  }
  .u-sm-textSize12 {
    font-size: 4.10989rem !important;
  }
  .u-sm-textSize13 {
    font-size: 4.62363rem !important;
  }
  .u-sm-textSize14 {
    font-size: 5.20158rem !important;
  }
  .u-sm-textShrink6 {
    font-size: 0.49327em !important;
  }
  .u-sm-textShrink5 {
    font-size: 0.55493em !important;
  }
  .u-sm-textShrink4 {
    font-size: 0.6243em !important;
  }
  .u-sm-textShrink3 {
    font-size: 0.70233em !important;
  }
  .u-sm-textShrink2 {
    font-size: 0.79012em !important;
  }
  .u-sm-textShrink1 {
    font-size: 0.88889em !important;
  }
  .u-sm-textShrink {
    font-size: 1em !important;
  }
  .u-sm-textGrow {
    font-size: 1em !important;
  }
  .u-sm-textGrow1 {
    font-size: 1.125em !important;
  }
  .u-sm-textGrow2 {
    font-size: 1.26563em !important;
  }
  .u-sm-textGrow3 {
    font-size: 1.42383em !important;
  }
  .u-sm-textGrow4 {
    font-size: 1.60181em !important;
  }
  .u-sm-textGrow5 {
    font-size: 1.80203em !important;
  }
  .u-sm-textGrow6 {
    font-size: 2.02729em !important;
  }
  .u-sm-textGrow7 {
    font-size: 2.2807em !important;
  }
  .u-sm-textGrow8 {
    font-size: 2.56578em !important;
  }
  .u-sm-textGrow9 {
    font-size: 2.88651em !important;
  }
  .u-sm-textGrow10 {
    font-size: 3.24732em !important;
  }
  .u-sm-textGrow11 {
    font-size: 3.65324em !important;
  }
  .u-sm-textGrow12 {
    font-size: 4.10989em !important;
  }
  .u-sm-textGrow13 {
    font-size: 4.62363em !important;
  }
  .u-sm-textGrow14 {
    font-size: 5.20158em !important;
  }
}

@media (min-width: 47em) {
  .u-md-textSize02 {
    font-size: 0.79012rem !important;
  }
  .u-md-textSize01 {
    font-size: 0.88889rem !important;
  }
  .u-md-textSize {
    font-size: 1rem !important;
  }
  .u-md-textSize1 {
    font-size: 1.125rem !important;
  }
  .u-md-textSize2 {
    font-size: 1.26563rem !important;
  }
  .u-md-textSize3 {
    font-size: 1.42383rem !important;
  }
  .u-md-textSize4 {
    font-size: 1.60181rem !important;
  }
  .u-md-textSize5 {
    font-size: 1.80203rem !important;
  }
  .u-md-textSize6 {
    font-size: 2.02729rem !important;
  }
  .u-md-textSize7 {
    font-size: 2.2807rem !important;
  }
  .u-md-textSize8 {
    font-size: 2.56578rem !important;
  }
  .u-md-textSize9 {
    font-size: 2.88651rem !important;
  }
  .u-md-textSize10 {
    font-size: 3.24732rem !important;
  }
  .u-md-textSize11 {
    font-size: 3.65324rem !important;
  }
  .u-md-textSize12 {
    font-size: 4.10989rem !important;
  }
  .u-md-textSize13 {
    font-size: 4.62363rem !important;
  }
  .u-md-textSize14 {
    font-size: 5.20158rem !important;
  }
  .u-md-textShrink6 {
    font-size: 0.49327em !important;
  }
  .u-md-textShrink5 {
    font-size: 0.55493em !important;
  }
  .u-md-textShrink4 {
    font-size: 0.6243em !important;
  }
  .u-md-textShrink3 {
    font-size: 0.70233em !important;
  }
  .u-md-textShrink2 {
    font-size: 0.79012em !important;
  }
  .u-md-textShrink1 {
    font-size: 0.88889em !important;
  }
  .u-md-textShrink {
    font-size: 1em !important;
  }
  .u-md-textGrow {
    font-size: 1em !important;
  }
  .u-md-textGrow1 {
    font-size: 1.125em !important;
  }
  .u-md-textGrow2 {
    font-size: 1.26563em !important;
  }
  .u-md-textGrow3 {
    font-size: 1.42383em !important;
  }
  .u-md-textGrow4 {
    font-size: 1.60181em !important;
  }
  .u-md-textGrow5 {
    font-size: 1.80203em !important;
  }
  .u-md-textGrow6 {
    font-size: 2.02729em !important;
  }
  .u-md-textGrow7 {
    font-size: 2.2807em !important;
  }
  .u-md-textGrow8 {
    font-size: 2.56578em !important;
  }
  .u-md-textGrow9 {
    font-size: 2.88651em !important;
  }
  .u-md-textGrow10 {
    font-size: 3.24732em !important;
  }
  .u-md-textGrow11 {
    font-size: 3.65324em !important;
  }
  .u-md-textGrow12 {
    font-size: 4.10989em !important;
  }
  .u-md-textGrow13 {
    font-size: 4.62363em !important;
  }
  .u-md-textGrow14 {
    font-size: 5.20158em !important;
  }
}

@media (min-width: 64em) {
  .u-lg-textSize02 {
    font-size: 0.79012rem !important;
  }
  .u-lg-textSize01 {
    font-size: 0.88889rem !important;
  }
  .u-lg-textSize {
    font-size: 1rem !important;
  }
  .u-lg-textSize1 {
    font-size: 1.125rem !important;
  }
  .u-lg-textSize2 {
    font-size: 1.26563rem !important;
  }
  .u-lg-textSize3 {
    font-size: 1.42383rem !important;
  }
  .u-lg-textSize4 {
    font-size: 1.60181rem !important;
  }
  .u-lg-textSize5 {
    font-size: 1.80203rem !important;
  }
  .u-lg-textSize6 {
    font-size: 2.02729rem !important;
  }
  .u-lg-textSize7 {
    font-size: 2.2807rem !important;
  }
  .u-lg-textSize8 {
    font-size: 2.56578rem !important;
  }
  .u-lg-textSize9 {
    font-size: 2.88651rem !important;
  }
  .u-lg-textSize10 {
    font-size: 3.24732rem !important;
  }
  .u-lg-textSize11 {
    font-size: 3.65324rem !important;
  }
  .u-lg-textSize12 {
    font-size: 4.10989rem !important;
  }
  .u-lg-textSize13 {
    font-size: 4.62363rem !important;
  }
  .u-lg-textSize14 {
    font-size: 5.20158rem !important;
  }
  .u-lg-textShrink6 {
    font-size: 0.49327em !important;
  }
  .u-lg-textShrink5 {
    font-size: 0.55493em !important;
  }
  .u-lg-textShrink4 {
    font-size: 0.6243em !important;
  }
  .u-lg-textShrink3 {
    font-size: 0.70233em !important;
  }
  .u-lg-textShrink2 {
    font-size: 0.79012em !important;
  }
  .u-lg-textShrink1 {
    font-size: 0.88889em !important;
  }
  .u-lg-textShrink {
    font-size: 1em !important;
  }
  .u-lg-textGrow {
    font-size: 1em !important;
  }
  .u-lg-textGrow1 {
    font-size: 1.125em !important;
  }
  .u-lg-textGrow2 {
    font-size: 1.26563em !important;
  }
  .u-lg-textGrow3 {
    font-size: 1.42383em !important;
  }
  .u-lg-textGrow4 {
    font-size: 1.60181em !important;
  }
  .u-lg-textGrow5 {
    font-size: 1.80203em !important;
  }
  .u-lg-textGrow6 {
    font-size: 2.02729em !important;
  }
  .u-lg-textGrow7 {
    font-size: 2.2807em !important;
  }
  .u-lg-textGrow8 {
    font-size: 2.56578em !important;
  }
  .u-lg-textGrow9 {
    font-size: 2.88651em !important;
  }
  .u-lg-textGrow10 {
    font-size: 3.24732em !important;
  }
  .u-lg-textGrow11 {
    font-size: 3.65324em !important;
  }
  .u-lg-textGrow12 {
    font-size: 4.10989em !important;
  }
  .u-lg-textGrow13 {
    font-size: 4.62363em !important;
  }
  .u-lg-textGrow14 {
    font-size: 5.20158em !important;
  }
}

@media (min-width: 72em) {
  .u-xl-textSize02 {
    font-size: 0.79012rem !important;
  }
  .u-xl-textSize01 {
    font-size: 0.88889rem !important;
  }
  .u-xl-textSize {
    font-size: 1rem !important;
  }
  .u-xl-textSize1 {
    font-size: 1.125rem !important;
  }
  .u-xl-textSize2 {
    font-size: 1.26563rem !important;
  }
  .u-xl-textSize3 {
    font-size: 1.42383rem !important;
  }
  .u-xl-textSize4 {
    font-size: 1.60181rem !important;
  }
  .u-xl-textSize5 {
    font-size: 1.80203rem !important;
  }
  .u-xl-textSize6 {
    font-size: 2.02729rem !important;
  }
  .u-xl-textSize7 {
    font-size: 2.2807rem !important;
  }
  .u-xl-textSize8 {
    font-size: 2.56578rem !important;
  }
  .u-xl-textSize9 {
    font-size: 2.88651rem !important;
  }
  .u-xl-textSize10 {
    font-size: 3.24732rem !important;
  }
  .u-xl-textSize11 {
    font-size: 3.65324rem !important;
  }
  .u-xl-textSize12 {
    font-size: 4.10989rem !important;
  }
  .u-xl-textSize13 {
    font-size: 4.62363rem !important;
  }
  .u-xl-textSize14 {
    font-size: 5.20158rem !important;
  }
  .u-xl-textShrink6 {
    font-size: 0.49327em !important;
  }
  .u-xl-textShrink5 {
    font-size: 0.55493em !important;
  }
  .u-xl-textShrink4 {
    font-size: 0.6243em !important;
  }
  .u-xl-textShrink3 {
    font-size: 0.70233em !important;
  }
  .u-xl-textShrink2 {
    font-size: 0.79012em !important;
  }
  .u-xl-textShrink1 {
    font-size: 0.88889em !important;
  }
  .u-xl-textShrink {
    font-size: 1em !important;
  }
  .u-xl-textGrow {
    font-size: 1em !important;
  }
  .u-xl-textGrow1 {
    font-size: 1.125em !important;
  }
  .u-xl-textGrow2 {
    font-size: 1.26563em !important;
  }
  .u-xl-textGrow3 {
    font-size: 1.42383em !important;
  }
  .u-xl-textGrow4 {
    font-size: 1.60181em !important;
  }
  .u-xl-textGrow5 {
    font-size: 1.80203em !important;
  }
  .u-xl-textGrow6 {
    font-size: 2.02729em !important;
  }
  .u-xl-textGrow7 {
    font-size: 2.2807em !important;
  }
  .u-xl-textGrow8 {
    font-size: 2.56578em !important;
  }
  .u-xl-textGrow9 {
    font-size: 2.88651em !important;
  }
  .u-xl-textGrow10 {
    font-size: 3.24732em !important;
  }
  .u-xl-textGrow11 {
    font-size: 3.65324em !important;
  }
  .u-xl-textGrow12 {
    font-size: 4.10989em !important;
  }
  .u-xl-textGrow13 {
    font-size: 4.62363em !important;
  }
  .u-xl-textGrow14 {
    font-size: 5.20158em !important;
  }
}

@media print {
  .u-print-textSize02 {
    font-size: 0.79012rem !important;
  }
  .u-print-textSize01 {
    font-size: 0.88889rem !important;
  }
  .u-print-textSize {
    font-size: 1rem !important;
  }
  .u-print-textSize1 {
    font-size: 1.125rem !important;
  }
  .u-print-textSize2 {
    font-size: 1.26563rem !important;
  }
  .u-print-textSize3 {
    font-size: 1.42383rem !important;
  }
  .u-print-textSize4 {
    font-size: 1.60181rem !important;
  }
  .u-print-textSize5 {
    font-size: 1.80203rem !important;
  }
  .u-print-textSize6 {
    font-size: 2.02729rem !important;
  }
  .u-print-textSize7 {
    font-size: 2.2807rem !important;
  }
  .u-print-textSize8 {
    font-size: 2.56578rem !important;
  }
  .u-print-textSize9 {
    font-size: 2.88651rem !important;
  }
  .u-print-textSize10 {
    font-size: 3.24732rem !important;
  }
  .u-print-textSize11 {
    font-size: 3.65324rem !important;
  }
  .u-print-textSize12 {
    font-size: 4.10989rem !important;
  }
  .u-print-textSize13 {
    font-size: 4.62363rem !important;
  }
  .u-print-textSize14 {
    font-size: 5.20158rem !important;
  }
  .u-print-textShrink6 {
    font-size: 0.49327em !important;
  }
  .u-print-textShrink5 {
    font-size: 0.55493em !important;
  }
  .u-print-textShrink4 {
    font-size: 0.6243em !important;
  }
  .u-print-textShrink3 {
    font-size: 0.70233em !important;
  }
  .u-print-textShrink2 {
    font-size: 0.79012em !important;
  }
  .u-print-textShrink1 {
    font-size: 0.88889em !important;
  }
  .u-print-textShrink {
    font-size: 1em !important;
  }
  .u-print-textGrow {
    font-size: 1em !important;
  }
  .u-print-textGrow1 {
    font-size: 1.125em !important;
  }
  .u-print-textGrow2 {
    font-size: 1.26563em !important;
  }
  .u-print-textGrow3 {
    font-size: 1.42383em !important;
  }
  .u-print-textGrow4 {
    font-size: 1.60181em !important;
  }
  .u-print-textGrow5 {
    font-size: 1.80203em !important;
  }
  .u-print-textGrow6 {
    font-size: 2.02729em !important;
  }
  .u-print-textGrow7 {
    font-size: 2.2807em !important;
  }
  .u-print-textGrow8 {
    font-size: 2.56578em !important;
  }
  .u-print-textGrow9 {
    font-size: 2.88651em !important;
  }
  .u-print-textGrow10 {
    font-size: 3.24732em !important;
  }
  .u-print-textGrow11 {
    font-size: 3.65324em !important;
  }
  .u-print-textGrow12 {
    font-size: 4.10989em !important;
  }
  .u-print-textGrow13 {
    font-size: 4.62363em !important;
  }
  .u-print-textGrow14 {
    font-size: 5.20158em !important;
  }
}

/**
 * Responsive alignment
 */

@media (min-width: 30em) {
  .u-sm-textCenter {
    text-align: center !important;
  }
  .u-sm-textLeft {
    text-align: left !important;
  }
  .u-sm-textRight {
    text-align: right !important;
  }
}

@media (min-width: 47em) {
  .u-md-textCenter {
    text-align: center !important;
  }
  .u-md-textLeft {
    text-align: left !important;
  }
  .u-md-textRight {
    text-align: right !important;
  }
}

@media (min-width: 64em) {
  .u-lg-textCenter {
    text-align: center !important;
  }
  .u-lg-textLeft {
    text-align: left !important;
  }
  .u-lg-textRight {
    text-align: right !important;
  }
}

/* stylelint-enable */

/**
 * Miscellaneous
 */

.u-textItalic {
  font-style: italic;
}

.u-textWeightNormal {
  font-weight: 400;
}

.u-textBold {
  font-weight: 700;
}

@media (min-width: 47em) {
  .u-md-textBold {
    font-weight: 700;
  }
}

.u-textSerif {
  font-family: serif;
}

.u-textSans {
 font-family: sans-serif;
}

.wf-active .u-textSans {
  font-family: Noto Sans;
}

.u-textSansSoft {
  font-family: var(--font-family-sans-soft);
}

.u-textSansCondensed {
  font-family: var(--font-family-sans-condensed);
}

@media (min-width: 47em) {
  .u-md-textItalic {
    font-style: italic;
  }
}

.u-textUpright {
  font-style: normal;
}

@media (min-width: 64em) {
  .u-lg-textTruncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.u-textUpper {
  text-transform: uppercase;
}

.u-textUnderline {
  text-decoration: underline;
}

.u-lineHeight1 {
  line-height: 1.125;
}

/** @define utilities */

.u-z1 {
  z-index: 1 !important;
}

.u-z-1 {
  z-index: -1 !important;
}

/**
 * Properties shared by multiple utilities. Kept in separate import for projects
 * that wish to import these utility classes individually.
 *
 * Note: In the future, this may be easier to maintain if utilities are broken
 * out into separate packages, a la components.
 */

/**
 * TODO: Not 100% sure where to put these yet.
 */

/* stylelint-disable-next-line no-duplicate-selectors */

/**
 * Size definitions imported here to remain at top-level
 * (outside of media query)
 *
 * 1. base & ratio define a modular scale to be used with
 *    the following scaled sizes (rem-based, by default)
 */

/* stylelint-disable-next-line no-duplicate-selectors */

:root { /* 1 */ /* 1 */
}

/**
 * Override shared vars.
 * Colors here are common definitions
 */

/* stylelint-disable-next-line no-duplicate-selectors */

/**
 * The order of these CSS imports is important!
 *
 * 1. Base styles should always come first. They should include configuration
 *    properties, normalize/reset styles, and default element styles... things
 *    that may be easily overridden or extended.
 *
 * 2. Components should come second. These should be self-contained (portable)
 *    chunks of organized CSS, optionally with descendants, states and/or
 *    modifiers.
 *
 * 3. Vendor-specific CSS should come after base and component styles. These are
 *    styles that are required by third-party resources we do not control.
 *
 * 4. Finally, utilities. Utility classes are the most specific and are not
 *    designed to be overridden. They are the template designer's last line of
 *    defense against writing brand-new CSS. But this only works if they are
 *    imported last!
 */