/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global-styles/main.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* ==========================================================================
   INUITCSS + RESMEDCSS
   ========================================================================== */
/**

      ___           ___           ___           ___           ___                         ___           ___           ___
     /\  \         /\__\         /\__\         /\  \         /\__\         _____         /\__\         /\__\         /\__\
    /::\  \       /:/ _/_       /:/ _/_       |::\  \       /:/ _/_       /::\  \       /:/  /        /:/ _/_       /:/ _/_
   /:/\:\__\     /:/ /\__\     /:/ /\  \      |:|:\  \     /:/ /\__\     /:/\:\  \     /:/  /        /:/ /\  \     /:/ /\  \
  /:/ /:/  /    /:/ /:/ _/_   /:/ /::\  \   __|:|\:\  \   /:/ /:/ _/_   /:/  \:\__\   /:/  /  ___   /:/ /::\  \   /:/ /::\  \
 /:/_/:/__/___ /:/_/:/ /\__\ /:/_/:/\:\__\ /::::|_\:\__\ /:/_/:/ /\__\ /:/__/ \:|__| /:/__/  /\__\ /:/_/:/\:\__\ /:/_/:/\:\__\
 \:\/:::::/  / \:\/:/ /:/  / \:\/:/ /:/  / \:\~~\  \/__/ \:\/:/ /:/  / \:\  \ /:/  / \:\  \ /:/  / \:\/:/ /:/  / \:\/:/ /:/  /
  \::/~~/~~~~   \::/_/:/  /   \::/ /:/  /   \:\  \        \::/_/:/  /   \:\  /:/  /   \:\  /:/  /   \::/ /:/  /   \::/ /:/  /
   \:\~~\        \:\/:/  /     \/_/:/  /     \:\  \        \:\/:/  /     \:\/:/  /     \:\/:/  /     \/_/:/  /     \/_/:/  /
    \:\__\        \::/  /        /:/  /       \:\__\        \::/  /       \::/  /       \::/  /        /:/  /        /:/  /
     \/__/         \/__/         \/__/         \/__/         \/__/         \/__/         \/__/         \/__/         \/__/


 * resmedcss, by jason.otis@resmed.com
 */
/****************************************************************************
 * INSTRUCTIONS
 *
 *
 * NPM Dependencies
 *   ResmedCSS is dependent on inuitcss and sassmq. The inuitcss framework and
 *   sassmq are included here manually in `/sass/modules/`. These CSS modules
 *   are available as packages. If you are using NPM, please DO NOT include and
 *   replace our included versions of these packages with the NPM versions.
 *
 *
 * inuitcss, by @csswizardry
 *   https://github.com/inuitcss/inuitcss
 *
 * SASS-MQ
 *   https://github.com/sass-mq/sass-mq
 *
 ******************************************************************************/
/******************************************************************************
 * SASS commands [http://sass-lang.com/documentation/file.SASS_REFERENCE.html]
 *
 *      !!!!!!   WATCH FOLDER AND COMPILE WITH THIS COMMAND   !!!!!!
 *
 * In a terminal window, cd to the parent of your SASS folder and type this command:
 *
 *  >>> path/to/sass-folder-parent/$  sass --watch sass:css --style compressed
 *
 * Note:
 *  You may need to change the `output` folder path depending on your project structure.
 * For example:
 *   sass --watch sass:assets/css --style compressed
 *
 ******************************************************************************/
/******************************************************************************

                        █░█░█ ▄▀█ █▀█ █▄░█ █ █▄░█ █▀▀ █
                        ▀▄▀▄▀ █▀█ █▀▄ █░▀█ █ █░▀█ █▄█ ▄

      !!!!!!   Most partial SASS files are imported by default   !!!!!!

  Comment out any SASS partials that you do not need for your project to help
  keep your outputted CSS file size down. There's no meed to include classes
  you won't be using.

 ******************************************************************************/
/**
 * CONTENTS
 *
 * FONTS
 * Cern.................Currently the corporate web font.
 *
 * SETTINGS
 * Core.................ResmedCSS core and setup settings to overwrite inuitcss defaults.
 * Core.................inuitcss’ core and setup settings.
 * Config...............Project-level configuration and feature switches.
 * Colors...............Project-wide color variables and settings.
 * Typography...........Project-wide typography variables and settings.
 * Breakpoints..........Breakpoint settings for media queries.
 * Utilities............Modify dynamically generated utility classes.
 * Global...............Project-wide variables and settings.
 *
 * THEMES
 * myAir................Style overrides for a myAir UI design.
 *
 * TOOLS
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Aliases..............Aliases to inuitcss mixins for easier typing.
 * Animation............Animation mixins that provide prefixing.
 * Color variations.....A function to mix colors on the fly.
 * Color functions......Functions to lighten or darken colors.
 * Compass..............Mixins from the Compass framework that we still use.
 * Postioning...........Mixins for positioning of elements.
 * Properties...........CSS properties, mostly for prefixing.
 * SVG..................SVG related mixins.
 * Transforms...........Prefixer mixins for CSS transforms.
 *
 * MEDIA QUERIES
 * Sass MQ..............inuitcss’ default media query manager.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 * Forms................Form input defaults for font-family, font-weight, color.
 * Page.................Our page defaults, sticky footer, inuitcss overrides.
 * Tables...............Our table defaults, inuitcss overrides.
 * Typography...........Font-family, font-weight, and color defaults for HTML,
 *                      H, B, STRONG, LABEL, A elements.
 *
 * VENDORS
 * Slick................Responsive carousel.
 * Modaal...............Accessible modal windows.
 * Ladda................Add loading indicators to your buttons.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 * Callouts.............Box element for call to action content.
 * Carousels............Layout customzations to the Flexslider carousel.
 * Flexbody.............Page body wrapper for sticky footer.
 * Inline-Group.........Group multiple singular elememts inline such as tags or anchors.
 * Tables...............Our product specific table styles for grid views.
 * Wrapper..............Mods to InuitCSS wrapper.
 * Layout...............Mods to InuitCSS layout.
 * Sections.............Define your content area, break it up in to sections.
 * Scrollable...........Scrollable container.
 *
 * ANIMATIONS
 * Custom...............Some custom CSSkeyframe animations.
 *
 * COMPONENTS
 * Alerts...............Global alerts messages, errors, warnings, and success.
 * Anchors..............Anchor component, style your links.
 * Android-Badges.......Get it on Android.
 * Apple-Badges.........Apple download badges.
 * Buttons..............Button component.
 * Cards................Content lures, Title, Image, Description.
 * Code.................Show code snippets in a nice <code> block. Uses Prism.js.
 * Directional nav......Previous Next chevron nav.
 * Dropdowns............Custom dropdown.
 * Expander.............Collapsible content.
 * Footer...............Page footers.
 * Forms................Form inputs.
 * Hero.................Custom hero banners.
 * Icons................Specific inline icons.
 * Button Icons.........Icons which interact as a button.
 * Indicators...........Little status indicators.
 * Loaders..............CSS page loading spinners.
 * Logos................Branding items.
 * Modal................Simple modal window.
 * Notifications........Site notifications.
 * Page-head............Page headers, masthead, hero.
 * Pagination...........Pagination for lists of results, wizard, stepper.
 * Popover..............Fancy tooltip that stays active so you can hover over it.
 * Progress.............Progress bar.
 * Sitenav..............Navigation component.
 * Survey...............Survey modal with stepper.
 * SVG Symbols..........SVG symbols baseline CSS.
 * Tags.................Text in a box.
 * Tooltips.............CSS only style-able tooltip option.
 * Typography...........Typography related styles, headings, labels, text.
 * Video................Video player overay.
 * Wizards..............Wizard, step-through.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacings.............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Responsive-Spacings..Enhances the function of normal spacings for
 *                      responsive usage.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content.
 * Accessibility........Accessibility related classes.
 * Border...............Border and border radius classes.
 * Color fill...........Background color classes created from color maps.
 * Float................Float or unfloat elements.
 * Percent widths.......Specific percentage widths for grid view columns.
 * Positioning..........Helper classes to position elements - float.
 * Typography...........Helper classes for specific text and font styles.
 * Visibility...........Show or hide DOM elements at/or between breakpoints.
 */
/* ==========================================================================
  #CERN
  ========================================================================== */
@font-face {
  font-family: "Vastago Grotesk";
  src: url("/assets/fonts/vastago/vastago_grotesk_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/jakarta/plus_jakarta_sans_variable_font.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto/NotoSans-VariableFont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cern";
  src: url("/assets/fonts/cern/CernUltraLight-webfont.eot");
  src: url("/assets/fonts/cern/CernUltraLight-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cern/CernUltraLight-webfont.woff") format("woff"), url("/assets/fonts/cern/CernUltraLight-webfont.ttf") format("truetype"), url("/assets/fonts/cern/CernUltraLight-webfont.svg#cern") format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Cern";
  src: url("/assets/fonts/cern/CernLight-webfont.eot");
  src: url("/assets/fonts/cern/CernLight-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cern/CernLight-webfont.woff") format("woff"), url("/assets/fonts/cern/CernLight-webfont.ttf") format("truetype"), url("/assets/fonts/cern/CernLight-webfont.svg#cern") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Cern";
  src: url("/assets/fonts/cern/CernMed-webfont.eot");
  src: url("/assets/fonts/cern/CernMed-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cern/CernMed-webfont.woff") format("woff"), url("/assets/fonts/cern/CernMed-webfont.ttf") format("truetype"), url("/assets/fonts/cern/CernMed-webfont.svg#cern") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Cern";
  src: url("/assets/fonts/cern/CernBold-webfont.eot");
  src: url("/assets/fonts/cern/CernBold-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cern/CernBold-webfont.woff") format("woff"), url("/assets/fonts/cern/CernBold-webfont.ttf") format("truetype"), url("/assets/fonts/cern/CernBold-webfont.svg#cern") format("svg");
  font-weight: 700;
  font-style: normal;
}
/* ========================================================================
   #CORE
   ======================================================================== */
/**
 * Use this file to overwrite inuitcss core settings for the global baseline
 * setting and global spacing unit.
 */
/**
 * To modify inuitcss core settings, uncomment the lines below.
 * Please proceed with caution, changing the settings can mess your sh*t up.
 */
/**
 * Baseline grid lines height. Every spacing metric should be based on this.
 */
/**
 * How many grid lines should our spacing unit variants span?
 * Each value should be an unitless integer.
 */
/**
 * Base typographical styles.
 */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/* ========================================================================
   #COLORS
   ======================================================================== */
/* Product colors
   ========================================================================== */
/* Neutral and greyscale
   ========================================================================== */
/* UI colors
   ========================================================================== */
/* Color maps
   ========================================================================== */
/* ========================================================================
   #COLORS
   ======================================================================== */
/* Product colors
   ========================================================================== */
/* Neutral and greyscale
   ========================================================================== */
/* UI colors
   ========================================================================== */
/* Color maps
   ========================================================================== */
/* ========================================================================
   #TYPOGRAPHY
   ======================================================================== */
/** 
 * The typography settings file contains all the font-families and font-weights
 * used in your project. Define some global default typography variables.
 */
/* Font stacks
   ========================================================================== */
/* Font weights
   ========================================================================== */
/* Global typography styles
   ========================================================================== */
/**
 * Override inuitcss default H1 - H6 heading sizes with our own sizes,
 */
/* ========================================================================
   #COLOR FUNCTIONS
   ======================================================================== */
/* ========================================================================
   #BREAKPOINTS
   ======================================================================== */
/**
 * A list of breakpoint sizes to use in media queries.
 * Use the ones you need as defaults in the $mq-breakpoints array for sass-mq.
 * Others can be used as custom breakpoints in any media query declaration.
 */
/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
/* ========================================================================
   #UTILITIES
   ======================================================================== */
/**
 * Use the maps below to auto-generate the utility classes you will need for
 * your project. Controlling the classes which get generated from these maps
 * will help keep the generated CSS file size down and free of classes that
 * won't get used.
 */
/**
 * Get the breakpoint keys (aka: names) from the list of $mq-breakpoint.
 * This map is used for auto-generating responsive classes.
 */
/* Width utilities
   ========================================================================== */
/**
 * Percentage based widths
 * 
 * Use:
 *    $use-res-percentages: false !default;
 *
 * Set to true to auto-generate percentage based width classes used
 * for table columns.
 *
 * Change the default percentages values for percent width classes to what you need.
 * Use:
 *    $res-percentages: 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 25 30 35 40 45 50 55 60 65 70 !default;
 *
 * This will generate classes for each value such as:
 *
 *    .u-5/percent {}
 *    .u-70/percent {}
 */
/**
 * Widths
 * File: sass/modules/inuitcss/utilities/_utilities.widths.scss'
 *
 * $inuit-fractions: 1 2 3 4 5 !default;
 * Fractions used to auto-generate width classes used primarily by the grid system.
 * e.g.:
 *  .u-1/2
 *  .u-2/5
 *  .u-3/4
 *  .u-2/3
 *
 * Responsive width classes are also auto-generated by default.
 * e.g.:
 *  .u-1/2@tablet
 *  .u-2/3@desktop
 *
 * $inuit-offsets: false !default;
 * Optionally, inuitcss can generate classes to offset items by a certain width.
*  Would you like to generate these types of class as well?
*  e.g.:
*   .u-push-1/3
*   .u-pull-2/4
*   .u-pull-1/5
*   .u-push-2/3
*/
/** Responsive Spacings
 * SEE FILE FOR FULL INSTRUCTIONS
 * File: sass/modules/inuitcss/utilities/_utilities.responsive-spacings.scss
 *
 * By default, there are not responsive spacings defined. You can generate
 * responsive spacings by adding entries to the following three Sass
 * maps, e.g.:
 *
 *   $inuit-responsive-spacing-directions: (
 *     null: null,
 *     "-bottom": "-bottom",
 *   );
 *
 *   $inuit-responsive-spacing-properties: (
 *     "margin": "margin",
 *   );
 *
 *   $inuit-responsive-spacing-sizes: (
 *     "-small": $inuit-global-spacing-unit-small,
 *   );
 *
 *   $inuit-responsive-spacing-directions: null !default;
 *
 *   $inuit-responsive-spacing-properties: null !default;
 *
 *   $inuit-responsive-spacing-sizes: null !default;
 */
/* Color fill utilities
   ========================================================================== */
/**
 * Color fills
 *
 * Use:
 *    $fill-brand-colors: $brand-colors !default;
 *    $fill-greyscale-colors: $greyscale !default;
 *
 * Or define only the ones you want to use from the color maps found in:
 *    sass/settings/_settings.colors.scss
 * Such as:
 *    $fill-brand-colors: ('primary-blue': $primary-blue) !default;
 *
 * This will generate classes for each color value:
 *    .u-fill--primary-blue {}
 *    .u-fill--grey60 {}
 *
 * Set to null for no classes.
 */
/* Float utilities
   ========================================================================== */
/**
 * Float
 *
 * Use:
 *    $float-directions: none, right, left !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each float value:
 *    .u-float-none {}
 *    .u-float-right {}
 *    .u-float-left {}
 *
 * Set to null for no classes.
 */
/** 
 * Responsive floats
 *
 * Use:
 *    $responsive-float-directions: $float-directions !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate @ and -below- classes for each float value 
 * at each breakpoint except mobile:
 *    .u-float-left@tablet {}
 *    .u-float-left-below-tablet {}
 *
 * Set to null for no classes.
 */
/* Typography utilities
   ========================================================================== */
/**
 * Font-style
 *
 * Use:
 *    $font-styles: inherit, initial, italic, normal, oblique, unset !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each font-style value:
 *    .u-font-style-italic {}
 *    .u-font-style-normal {}
 *
 * Set to null for no classes.
 */
/**
 * Font-weight
 *
 * Use:
 *    $font-weights: (
 *      'thin':   $font-weight-thin,
 *      'light':  $font-weight-light,
 *      'normal': $font-weight-normal,
 *      'medium': $font-weight-medium,
 *      'bold':   $font-weight-bold,
 *      'extra':  $font-weight-extra,
 *      'black':  $font-weight-black
 *    ) !default;
 *
 * This will generate classes for each font-weight value:
 *    .u-font-weight-thin {}
 *    .u-font-weight-normal {}
 *
 * Set to null for no classes.
 */
/**
 * Font-variant
 *
 * Use:
 *    $font-variants: normal, small-caps !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each font-variant value:
 *    .u-font-variant-normal {}
 *    .u-font-variant-small-caps {}
 *
 * Set to null for no classes.
 */
/**
 * Text-alignment
 *
 * Use:
 *    $text-alignments: left, right, center, justify !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each text-alignment value:
 *    .u-text-align-left {}
 *    .u-text-align-right {}
 *
 * Set to null for no classes.
 */
/**
 * Responsive text alignment
 *
 * Use:
 *    $responsive-text-alignment-directions: $text-alignments !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate @ and -below- classes for each text-alignment value 
 * at each breakpoint except mobile:
 *    .u-text-align-left@tablet {}
 *    .u-text-align-left-below-tablet {}
 *
 * Set to null for no classes.
 */
/**
 * Text-transform
 *
 * Use:
 *    $text-transforms: none, lowercase, uppercase, capitalize !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each text-transform value:
 *    .u-text-transform-lowercase {}
 *    .u-text-transform-uppercase {}
 *
 * Set to null for no classes.
 */
/**
 * Color
 *
 * Use:
 *    $text-brand-colors: $brand-colors;
 *    $text-greyscale-colors: $greyscale;
 *
 * Or define only the ones you want to use from the color maps found in:
 *    sass/settings/_settings.colors.scss
 * Such as:
 *    $text-brand-colors: ('primary-blue': $primary-blue);
 *
 * This will generate classes for each color value:
 *    .u-color--primary-blue {}
 *    .u-color--grey60 {}
 *
 * Set to null for no classes.
 */
/* Visibility utilities
   ========================================================================== */
/**
 * Responsive visibility
 *
 * Show an element at this breakpoint only, not below or above.
 * Use:
 *    $use-show-only: $bp-key-names !default;
 *
 * Hide an element at this breakpoint only, not below or above.
 * Use:
 *    $use-hide-only: $bp-key-names !default;
 * 
 * Show an element at this breakpoint and above. Does not include 
 * `mobile` breakpoint if present.
 * Use:
 *    $use-show-at: $bp-key-names !default;
 *
 * Show an element below this breakpoint, but not at or above. Does 
 * not include `mobile` breakpoint if present.
 * Use:
 *    $use-show-below: $bp-key-names !default;
 *
 * Hide an element below this breakpoint, but not at or above. Does 
 * not include first breakpoint which should be `mobile`.
 * Use:
 *    $use-hide-below: $bp-key-names !default;
 *
 * Or define only the ones you want to use.
 * Such as:
 *    $use-show-at: tablet, desktop !default;
 *
 * This will generate classes like so:
 *   .u-show-only-@mobile {}
 *   .u-hide-only-@tablet {}
 *   .u-show-only-@desktop {}
 *   .u-show-@x-wide {}
 *   .u-hide-below-desktop {}
 *
 * Set to null for no classes.
 */
/* Position utilities
 ========================================================================== */
/**
 * Positioning
 *
 * Use:
 *    $positions: static, relative, absolute, fixed !default; // , sticky;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each font-style value:
 *    .u-position-static {}
 *    .u-position-relative {}
 *
 * Set to null for no classes.
 */
/* ========================================================================
   #GLOBAL
   ======================================================================== */
/**
 * Set the site's max-width. This setting applies to the `.o-wrapper` element
 * which should encapsulate any elements that need to be constrained to the
 * page width.
 */
/* Global
 ========================================================================== */
/**
 * DO NOT EDIT ANYTHING BELOW
 * Private/framework-only reassignment.
 *
 * Reassigning `$inuit-global-spacing-unit` to `$global-unit` to make it
 * easier to type. Also adding a couple of in-between sizes.
 */
/* ==========================================================================
   #MYAIR THEME
   ========================================================================== */
/**
 * Apply the myAir UI styles.
 *
 * Each section below corresponds to the file structure of the SASS folder. 
 */
/******************************************************************************
 * SETTINGS
 ******************************************************************************/
/* Core
   ========================================================================== */
/**
 * Modify inuitcss core settings.
 * Please proceed with caution, changing the settings can mess your sh*t up.
 */
/**
 * PROBABLY DON'T CHANGE ANY OF THESE SETTINGS
 * Uncomment to change - but seriously, don't change them.
 * see `sass/settings/_settings.core.scss` for more details.
 */
/* Breakpoints
   ========================================================================== */
/**
 * If you need different breakpoints than the default, uncomment and update 
 * the map below.
 */
/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
/**
 * To enable support for browsers that do not support @media queries,
 * (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
 * Create a separate stylesheet served exclusively to these browsers,
 * meaning @media queries will be rasterized, relying on the cascade itself
 */
/**
 * Define the breakpoint from the $mq-breakpoints list that should
 * be used as the target width when outputting a static stylesheet
 * (i.e. when $mq-responsive is set to 'false').
 */
/* ========================================================================
   #CORE
   ======================================================================== */
/**
 * Use this file to overwrite inuitcss core settings for the global baseline
 * setting and global spacing unit.
 */
/**
 * To modify inuitcss core settings, uncomment the lines below.
 * Please proceed with caution, changing the settings can mess your sh*t up.
 */
/**
 * Baseline grid lines height. Every spacing metric should be based on this.
 */
/**
 * How many grid lines should our spacing unit variants span?
 * Each value should be an unitless integer.
 */
/**
 * Base typographical styles.
 */
/* Color pallette
   ========================================================================== */
/* ========================================================================
   #COLORS
   ======================================================================== */
/* Product colors
   ========================================================================== */
/* Neutral and greyscale
   ========================================================================== */
/* UI colors
   ========================================================================== */
/* Color maps
   ========================================================================== */
/* TYPOGRAPHY
   ======================================================================== */
/* REBRANDING 2025: Typography updates */
/* REBRANDING 2025: Typography updates */
/* ========================================================================
   #COLORS
   ======================================================================== */
/* Product colors
   ========================================================================== */
/* Neutral and greyscale
   ========================================================================== */
/* UI colors
   ========================================================================== */
/* Color maps
   ========================================================================== */
/* ========================================================================
   #TYPOGRAPHY
   ======================================================================== */
/** 
 * The typography settings file contains all the font-families and font-weights
 * used in your project. Define some global default typography variables.
 */
/* Font stacks
   ========================================================================== */
/* Font weights
   ========================================================================== */
/* Global typography styles
   ========================================================================== */
/**
 * Override inuitcss default H1 - H6 heading sizes with our own sizes,
 */
/* ========================================================================
   #COLOR FUNCTIONS
   ======================================================================== */
/* Global
 ========================================================================== */
/**
 * Set the site's max-width. This setting applies to the `.o-wrapper` element 
 * which should encapsulate any elements that need to be constrained to the 
 * page width.
 *
 * 1366px corresponds to a typical HD laptop which might be used by providers.
 * 1440px (default)
 */
/* ========================================================================
   #GLOBAL
   ======================================================================== */
/**
 * Set the site's max-width. This setting applies to the `.o-wrapper` element
 * which should encapsulate any elements that need to be constrained to the
 * page width.
 */
/* Global
 ========================================================================== */
/**
 * DO NOT EDIT ANYTHING BELOW
 * Private/framework-only reassignment.
 *
 * Reassigning `$inuit-global-spacing-unit` to `$global-unit` to make it
 * easier to type. Also adding a couple of in-between sizes.
 */
/******************************************************************************
 * ELEMENTS
 ******************************************************************************/
/* FORMS
   ========================================================================== */
/* PAGE
   ========================================================================== */
/******************************************************************************
 * COMPONENTS
 ******************************************************************************/
/* ALERTS
   ========================================================================== */
/* BUTTONS
   ========================================================================== */
/* CARDS
   ========================================================================== */
/* DIRECTIONAL NAV
   ========================================================================== */
/* DROPDOWN
   ========================================================================== */
/* EXPANDER
   ========================================================================== */
/* FOOTER
   ========================================================================== */
/* FORMS
   ========================================================================== */
/* ICON BUTTONS
   ========================================================================== */
/* PAGE HEAD
   ========================================================================== */
/* PAGINATION
   ========================================================================== */
/* POPOVER
   ========================================================================== */
/* #PROGRESS
   ========================================================================== */
/* SITENAV
   ========================================================================== */
/* SVG SYMBOLS
   ========================================================================== */
/* #TAGS
   ========================================================================== */
/* TOOLTIPS
   ========================================================================== */
/* HEADINGS
   ========================================================================== */
/******************************************************************************
 * OBJECTS
 ******************************************************************************/
/* CAROUSELS
   ========================================================================== */
/* #LISTS
   ========================================================================== */
/* SECTIONS
   ========================================================================== */
/* TABLES
   ========================================================================== */
/*******************************************************************************
 * VENDORS
 *******************************************************************************/
/* MODAAL
   ========================================================================== */
/* SLICK
   ========================================================================== */
/* ==========================================================================
   #ALIASES
   ========================================================================== */
/* ==========================================================================
   #Animation mixins 
   ========================================================================== */
/** 
 * Using the mixins looks like this:
 * 
 * @include keyframes(move-the-object) {
 *   0%   { left: 100px; }
 *   100% { left: 200px; }
 * }
 *
 * .object-to-animate {
 *   @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s');
 * } 
 */
/* ========================================================================
   #COLOR FUNCTIONS
   ======================================================================== */
/* ==========================================================================
   #COMPASS
   ========================================================================== */
/**
 * Indicates the direction you prefer to move your text when hiding it.
 * Left is more robust, especially in older browsers. right seems have
 * better runtime performance.
 */
/**
 * Hides text in an element so you can see the background.
 * The direction indicates how the text should be moved out of view.
 */
/**
 * Hides html text and replaces it with an image. If you use this on an inline
 * element, you will need to change the display to block or inline-block.
 * Also, if the size of the image differs significantly from the font size,
 * you'll need to set the width and/or height.
 */
/* ==========================================================================
   #Positioning mixins 
   ========================================================================== */
/* Top positions
   ========================================================================== */
/* Middle positions
   ========================================================================== */
/* Bottom positions
   ========================================================================== */
/* Misc
   ========================================================================== */
/* ==========================================================================
   #PROPERTIES
   ========================================================================== */
/**
 * Webkit font-smoothing
 * Values: none, antialiased (default), subpixel-antialiased
 */
/**
 * Make `a` selector a block element and make it fill the width and height of
 * its parent container
 */
/* Use ellipsis to truncate text that overflows its container
 * .simple-usage {
 *   @include truncate();
 * }
 *
 * .detailed-usage {
 *   @include truncate(<value>);
 * }
 */
/**
 * Create a text highlighting style
 *
 *   @include selection {
 *     background-color: #value;
 *     color: #value;
 *     text-shadow: none;
 *   }
 */
/**
 * Force wrap a long string of text that breaks the layout, like a URL. 
 * Can also use utility classes `.u-text-wrap` and `.u-text-wrap-nohyphen`
 * in your markup.
 */
/* ==========================================================================
   #SVG
   ========================================================================== */
/**
 *  SVG as background-image
 *  Example usage:
 *  1. Create a variable in `settings.global.scss` of just the svg's data: 
 *  2. Use that variable in the mixin, provide the width and height of the SVG's 
 *     viewbox, and define the color in HEX format without the #.
 *  
 *  $my-svg: "M7.035 15.931l16.533-15.931 1.398 1.466-15.067 14.534 15.067 14.534-1.398 1.466-16.533-16.069z";
 *
 *  @include svg-bg-img($my-svg, $global-icon-size, $global-icon-size, 'ffffff');
 *
 */
/* ==========================================================================
   #TRANSFORMS
   ========================================================================== */
/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  box-sizing: border-box;
}

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

/*! normalize.css v7.0.0 | 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
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 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
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 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 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * 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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * 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 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
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 and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0; /* [1] */
  border: 0;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 24px;
}

/**
 * Consistent indentation for lists.
 */
dd, ol, ul {
  margin-left: 24px;
}

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  font-size: 1em; /* [1] */
  line-height: 1.5; /* [1] */
  overflow-y: scroll; /* [2] */
  min-height: 100%; /* [3] */
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */
h1 {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.1666666667;
}

h2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
}

h3 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
}

h5 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}

h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%; /* [1] */
  font-style: italic; /* [2] */
  vertical-align: middle; /* [3] */
}

/**
 * If a `width` and/or `height` attribute has been explicitly defined, let’s
 * not make the image fluid.
 */
img[width],
img[height] {
  max-width: none;
}

/* ==========================================================================
   #TABLES
   ========================================================================== */
/**
 * 1. Ensure tables fill up as much space as possible.
 */
table {
  width: 100%; /* [1] */
}

/* ==========================================================================
   #FORMS
   ========================================================================== */
/**
 * Form elements are already normalized by "inuitcss/generic/generic.normalize"
 * We can assign our base font settings for form inputs here.
 */
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  font-style: normal;
  color: #d9d8d5 !important;
}

/**
 * 1. Change the normalized font-family and font-size.
 * 2. Set our default font-weight.
 * 3. Make sure the text color is black by default.
 */
/* stylelint-disable selector-list-comma-newline-after */
input, button, select, option, textarea, select option {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; /* [1] */
  font-weight: 400; /* [2] */
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  /* [1] */
  color: hsl(0, 0%, 0%); /* [3] */
}

/* stylelint-enable selector-list-comma-newline-after */
/* Change Autocomplete styles in Chrome */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  font-size: 1.125rem !important;
  line-height: 1.3333333333 !important;
  color: hsl(0, 0%, 0%) !important;
  border-color: #1788c3 !important;
  -webkit-text-fill-color: hsl(0, 0%, 0%) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(23, 136, 195, 0.12) inset !important;
  -webkit-transition: background-color 0s 5000s ease-in-out;
  transition: background-color 0s 5000s ease-in-out;
}
@media (min-width: 48em) {
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    font-size: 21px !important;
    font-size: 1.3125rem !important;
    line-height: 1.4285714286 !important;
  }
}
input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line,
select:-webkit-autofill::first-line {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  font-size: 1.125rem !important;
  line-height: 1.3333333333 !important;
  color: hsl(0, 0%, 0%) !important;
}
@media (min-width: 48em) {
  input:-webkit-autofill::first-line,
  textarea:-webkit-autofill::first-line,
  select:-webkit-autofill::first-line {
    font-size: 21px !important;
    font-size: 1.3125rem !important;
    line-height: 1.4285714286 !important;
  }
}

/**
Keeping a list in case we need to explicitly target an input by type
for setting defaults. Styling should be done with a modifier class
in `components.forms.scss`

[type="tel"],
[type="url"],
[type="text"],
[type="date"],
[type="email"],
[type="month"],
[type="button"],
[type="submit"],
[type="search"],
[type="number"],
[type="textbox"],
[type="password"]

*/
/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Related files:
 * `inuitcss/elements/elements.page.scss`
 */
html {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: hsl(0, 0%, 100%);
  overflow-x: hidden;
  overflow: -moz-scrollbars-vertical;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}
body:before {
  z-index: 1099;
}

/*
.body__page-loading {
  display: none;
}

.body__page-isLoaded {
  @include animation-name(stayHidden, fadeIn);
  @include animation-duration(250ms, 250ms);
  @include animation-delay(0s, 250ms);
  @include animation-timing-function(linear, ease-out);
  @include animation-fill-mode(forwards);
  @include animation-iteration-count(1);
}

*/
/* ==========================================================================
  #TABLES
  ========================================================================== */
/**
 * Define our own base styles for the `table` element.
 *
 * Related files:
 * /inuitcss/objects/objects.tables.scss
 * /inuitcss/elements/elements.tables.scss
 * objects/objects.tables.scss
 */
/**
 * 1. Ensure tables fill up as much space as possible.
 * 2. Set the default vertical aligment for our table cells.
 */
table {
  display: table;
  table-layout: auto;
  width: 100%; /* [1] */
  border-collapse: collapse;
}
table th {
  vertical-align: middle; /* [2] */
}
table td {
  vertical-align: top; /* [2] */
}

/* ==========================================================================
  #TYPOGRAPHY
  ========================================================================== */
html {
  font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;
  font-weight: 300;
  color: #424243;
}

/* Headings
   ========================================================================== */
/* stylelint-disable selector-list-comma-newline-after */
h1, h1 a, h1 span, h2, h2 a, h2 span, h3, h3 a, h3 span, h4, h4 a, h4 span, h5, h5 a, h5 span, h6, h6 a, h6 span {
  font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;
  font-weight: 300;
  color: #424243;
  text-rendering: optimizeLegibility;
  color: currentColor;
}

/* stylelint-enable selector-list-comma-newline-after */
h1, h1 a, h1 span {
  font-weight: 700;
}

h2, h2 a, h2 span {
  font-weight: 600;
}

h3, h3 a, h3 span {
  font-weight: 700;
}

h4, h4 a, h4 span {
  font-weight: 700;
}

h5, h5 a, h5 span {
  font-weight: 600;
}

h6, h6 a, h6 span {
  font-weight: 600;
}

/* Text elements
   ========================================================================== */
b,
strong {
  font-weight: 700;
}

a {
  transition: color 250ms ease-out;
  text-decoration: none;
}
a:link {
  color: #1788c3;
}
a:visited {
  color: #4156a6;
}
a:hover {
  color: #3392CD;
  text-decoration: underline;
}
a:active {
  color: #2d80b4;
}
a:hover, a:active {
  cursor: pointer;
}

cite {
  display: inline-block;
  margin: 12px 0;
  padding: 6px;
  border-radius: 3px;
  color: hsl(0, 0%, 10%);
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  background-color: hsl(0, 0%, 95%);
}

::selection {
  background-color: #ffde55;
  color: hsl(0, 0%, 0%);
  text-shadow: none;
}

address,
fieldset {
  font: inherit;
  margin-bottom: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

code {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

.tooltipster-fall, .tooltipster-grow.tooltipster-show {
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-base {
  display: flex;
  pointer-events: none;
  position: absolute;
}

.tooltipster-box {
  flex: 1 1 auto;
}

.tooltipster-content {
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}

.tooltipster-ruler {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
}

.tooltipster-fade {
  opacity: 0;
  transition-property: opacity;
}

.tooltipster-fade.tooltipster-show {
  opacity: 1;
}

.tooltipster-grow {
  transform: scale(0, 0);
  transition-property: transform;
  -webkit-backface-visibility: hidden;
}

.tooltipster-grow.tooltipster-show {
  transform: scale(1, 1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-swing {
  opacity: 0;
  transform: rotateZ(4deg);
  transition-property: transform;
}

.tooltipster-swing.tooltipster-show {
  opacity: 1;
  transform: rotateZ(0);
  transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
  transition-property: top;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-fall.tooltipster-initial {
  top: 0 !important;
}

.tooltipster-fall.tooltipster-dying {
  transition-property: all;
  top: 0 !important;
  opacity: 0;
}

.tooltipster-slide {
  transition-property: left;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-slide.tooltipster-initial {
  left: -40px !important;
}

.tooltipster-slide.tooltipster-dying {
  transition-property: all;
  left: 0 !important;
  opacity: 0;
}

@keyframes tooltipster-fading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tooltipster-update-fade {
  animation: tooltipster-fading 0.4s;
}

@keyframes tooltipster-rotating {
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0);
  }
}
.tooltipster-update-rotate {
  animation: tooltipster-rotating 0.6s;
}

@keyframes tooltipster-scaling {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.tooltipster-update-scale {
  animation: tooltipster-scaling 0.6s;
}

.tooltipster-sidetip .tooltipster-box {
  background: #565656;
  border: 2px solid #000;
  border-radius: 4px;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
  margin-top: 8px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-box {
  margin-right: 8px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-box {
  margin-left: 8px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-box {
  margin-bottom: 8px;
}

.tooltipster-sidetip .tooltipster-content {
  color: #fff;
  line-height: 18px;
  padding: 6px 14px;
}

.tooltipster-sidetip .tooltipster-arrow {
  overflow: hidden;
  position: absolute;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
  height: 10px;
  margin-left: -10px;
  top: 0;
  width: 20px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
  height: 20px;
  margin-top: -10px;
  right: 0;
  top: 0;
  width: 10px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
  height: 20px;
  margin-top: -10px;
  left: 0;
  top: 0;
  width: 10px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
  bottom: 0;
  height: 10px;
  margin-left: -10px;
  width: 20px;
}

.tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border {
  height: 0;
  position: absolute;
  width: 0;
}

.tooltipster-sidetip .tooltipster-arrow-background {
  border: 10px solid transparent;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #565656;
  left: 0;
  top: 3px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #565656;
  left: -3px;
  top: 0;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #565656;
  left: 3px;
  top: 0;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #565656;
  left: 0;
  top: -3px;
}

.tooltipster-sidetip .tooltipster-arrow-border {
  border: 10px solid transparent;
  left: 0;
  top: 0;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #000;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
  border-left-color: #000;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #000;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #000;
}

.tooltipster-sidetip .tooltipster-arrow-uncropped {
  position: relative;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
  top: -10px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
  left: -10px;
}

.tooltipster-sidetip {
  /* Use this next selector to style things like font-size and line-height: */
}
.tooltipster-sidetip.tooltipster-default.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #ededed;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #cccccc;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #ededed;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-left .tooltipster-arrow-border {
  border-left-color: #cccccc;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #ededed;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #cccccc;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #ededed;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #cccccc;
}
.tooltipster-sidetip.tooltipster-default .tooltipster-box {
  border: 2px solid #cccccc;
  background: #ededed;
}
.tooltipster-sidetip.tooltipster-default .tooltipster-content {
  color: #666666;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-left .tooltipster-arrow-border {
  border-left-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #1788c3;
}
.tooltipster-sidetip.tooltipster-res .tooltipster-box {
  border: 2px solid #1788c3;
  background: #1788c3;
}
.tooltipster-sidetip.tooltipster-res .tooltipster-content {
  color: hsl(0, 0%, 100%);
}
.tooltipster-sidetip.tooltipster-res .tooltipster-content p, .tooltipster-sidetip.tooltipster-res .tooltipster-content label {
  color: hsl(0, 0%, 100%);
}
.tooltipster-sidetip.tooltipster-res .tooltipster-content label {
  font-weight: 700;
}
.tooltipster-sidetip.tooltipster-default .tooltipster-box {
  border-radius: 8px;
}
.tooltipster-sidetip.tooltipster-default .tooltipster-content {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  line-height: 1.6;
  padding: 8px 10px;
  overflow: hidden;
}

/*!
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2016 Hakim El Hattab, http://hakim.se
*/
.ladda-button {
  position: relative;
}

.ladda-button .ladda-spinner {
  position: absolute;
  z-index: 2;
  display: inline-block;
  width: 32px;
  height: 32px;
  top: 50%;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}

.ladda-button .ladda-label {
  position: relative;
  z-index: 3;
}

.ladda-button .ladda-progress {
  position: absolute;
  width: 0;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: 0.1s linear all !important;
}

.ladda-button[data-loading] .ladda-progress {
  opacity: 1;
  visibility: visible;
}

.ladda-button, .ladda-button .ladda-spinner, .ladda-button .ladda-label {
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
}

.ladda-button[data-style=zoom-in], .ladda-button[data-style=zoom-in] .ladda-spinner, .ladda-button[data-style=zoom-in] .ladda-label, .ladda-button[data-style=zoom-out], .ladda-button[data-style=zoom-out] .ladda-spinner, .ladda-button[data-style=zoom-out] .ladda-label {
  transition: 0.3s ease all !important;
}

.ladda-button[data-style=expand-right] .ladda-spinner {
  right: -6px;
}

.ladda-button[data-style=expand-right][data-size=s] .ladda-spinner, .ladda-button[data-style=expand-right][data-size=xs] .ladda-spinner {
  right: -12px;
}

.ladda-button[data-style=expand-right][data-loading] {
  padding-right: 56px;
}

.ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
  opacity: 1;
}

.ladda-button[data-style=expand-right][data-loading][data-size=s], .ladda-button[data-style=expand-right][data-loading][data-size=xs] {
  padding-right: 40px;
}

.ladda-button[data-style=expand-left] .ladda-spinner {
  left: 26px;
}

.ladda-button[data-style=expand-left][data-size=s] .ladda-spinner, .ladda-button[data-style=expand-left][data-size=xs] .ladda-spinner {
  left: 4px;
}

.ladda-button[data-style=expand-left][data-loading] {
  padding-left: 56px;
}

.ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
  opacity: 1;
}

.ladda-button[data-style=expand-left][data-loading][data-size=s], .ladda-button[data-style=expand-left][data-loading][data-size=xs] {
  padding-left: 40px;
}

.ladda-button[data-style=expand-up] {
  overflow: hidden;
}

.ladda-button[data-style=expand-up] .ladda-spinner {
  top: -32px;
  left: 50%;
  margin-left: 0;
}

.ladda-button[data-style=expand-up][data-loading] {
  padding-top: 54px;
}

.ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
  opacity: 1;
  top: 26px;
  margin-top: 0;
}

.ladda-button[data-style=expand-up][data-loading][data-size=s], .ladda-button[data-style=expand-up][data-loading][data-size=xs] {
  padding-top: 32px;
}

.ladda-button[data-style=expand-up][data-loading][data-size=s] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size=xs] .ladda-spinner {
  top: 4px;
}

.ladda-button[data-style=expand-down] {
  overflow: hidden;
}

.ladda-button[data-style=expand-down] .ladda-spinner {
  top: 62px;
  left: 50%;
  margin-left: 0;
}

.ladda-button[data-style=expand-down][data-size=s] .ladda-spinner, .ladda-button[data-style=expand-down][data-size=xs] .ladda-spinner {
  top: 40px;
}

.ladda-button[data-style=expand-down][data-loading] {
  padding-bottom: 54px;
}

.ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
  opacity: 1;
}

.ladda-button[data-style=expand-down][data-loading][data-size=s], .ladda-button[data-style=expand-down][data-loading][data-size=xs] {
  padding-bottom: 32px;
}

.ladda-button[data-style=slide-left] {
  overflow: hidden;
}

.ladda-button[data-style=slide-left] .ladda-label {
  position: relative;
}

.ladda-button[data-style=slide-left] .ladda-spinner {
  left: 100%;
  margin-left: 0;
}

.ladda-button[data-style=slide-left][data-loading] .ladda-label {
  opacity: 0;
  left: -100%;
}

.ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
  opacity: 1;
  left: 50%;
}

.ladda-button[data-style=slide-right] {
  overflow: hidden;
}

.ladda-button[data-style=slide-right] .ladda-label {
  position: relative;
}

.ladda-button[data-style=slide-right] .ladda-spinner {
  right: 100%;
  margin-left: 0;
  left: 16px;
}

.ladda-button[data-style=slide-right][data-loading] .ladda-label {
  opacity: 0;
  left: 100%;
}

.ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
  opacity: 1;
  left: 50%;
}

.ladda-button[data-style=slide-up] {
  overflow: hidden;
}

.ladda-button[data-style=slide-up] .ladda-label {
  position: relative;
}

.ladda-button[data-style=slide-up] .ladda-spinner {
  left: 50%;
  margin-left: 0;
  margin-top: 1em;
}

.ladda-button[data-style=slide-up][data-loading] .ladda-label {
  opacity: 0;
  top: -1em;
}

.ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
  opacity: 1;
  margin-top: 0;
}

.ladda-button[data-style=slide-down] {
  overflow: hidden;
}

.ladda-button[data-style=slide-down] .ladda-label {
  position: relative;
}

.ladda-button[data-style=slide-down] .ladda-spinner {
  left: 50%;
  margin-left: 0;
  margin-top: -2em;
}

.ladda-button[data-style=slide-down][data-loading] .ladda-label {
  opacity: 0;
  top: 1em;
}

.ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
  opacity: 1;
  margin-top: 0;
}

.ladda-button[data-style=zoom-out] {
  overflow: hidden;
}

.ladda-button[data-style=zoom-out] .ladda-spinner {
  left: 50%;
  margin-left: 32px;
  transform: scale(2.5);
}

.ladda-button[data-style=zoom-out] .ladda-label {
  position: relative;
  display: inline-block;
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
  opacity: 0;
  transform: scale(0.5);
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
  opacity: 1;
  margin-left: 0;
  transform: none;
}

.ladda-button[data-style=zoom-in] {
  overflow: hidden;
}

.ladda-button[data-style=zoom-in] .ladda-spinner {
  left: 50%;
  margin-left: -16px;
  transform: scale(0.2);
}

.ladda-button[data-style=zoom-in] .ladda-label {
  position: relative;
  display: inline-block;
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
  opacity: 0;
  transform: scale(2.2);
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
  opacity: 1;
  margin-left: 0;
  transform: none;
}

.ladda-button[data-style=contract] {
  overflow: hidden;
  width: 100px;
}

.ladda-button[data-style=contract] .ladda-spinner {
  left: 50%;
  margin-left: 0;
}

.ladda-button[data-style=contract][data-loading] {
  border-radius: 50%;
  width: 52px;
}

.ladda-button[data-style=contract][data-loading] .ladda-label {
  opacity: 0;
}

.ladda-button[data-style=contract][data-loading] .ladda-spinner {
  opacity: 1;
}

.ladda-button[data-style=contract-overlay] {
  overflow: hidden;
  width: 100px;
  box-shadow: 0px 0px 0px 2000px transparent;
}

.ladda-button[data-style=contract-overlay] .ladda-spinner {
  left: 50%;
  margin-left: 0;
}

.ladda-button[data-style=contract-overlay][data-loading] {
  border-radius: 50%;
  width: 52px;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
  opacity: 0;
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
  opacity: 1;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("/assets/images/ajax-loader.gif") center center no-repeat;
}

/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  height: 24px;
  width: 24px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  padding: 0;
  border: none;
  outline: none;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.slick-prev:before,
.slick-next:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  transform: translateX(0);
  transition: opacity 250ms ease-out, 0.3s transform ease-out;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
  will-change: opacity, transform;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  cursor: default;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M16.95 21.192c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414l8.485-8.485c0.39-0.39 1.024-0.39 1.414 0s0.39 1.024 0 1.414l-7.778 7.778 7.778 7.778c0.39 0.39 0.39 1.024-0 1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
[dir=rtl] .slick-prev:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M7.050 2.808c0.39-0.39 1.024-0.39 1.414 0l8.485 8.485c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414-0s-0.39-1.024 0-1.414l7.778-7.778-7.778-7.778c-0.39-0.39-0.39-1.024 0-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.slick-prev:hover:not(.slick-disabled):before, .slick-prev:focus:not(.slick-disabled):before {
  transform: translateX(-3px);
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M7.050 2.808c0.39-0.39 1.024-0.39 1.414 0l8.485 8.485c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414-0s-0.39-1.024 0-1.414l7.778-7.778-7.778-7.778c-0.39-0.39-0.39-1.024 0-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
[dir=rtl] .slick-next:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M16.95 21.192c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414l8.485-8.485c0.39-0.39 1.024-0.39 1.414 0s0.39 1.024 0 1.414l-7.778 7.778 7.778 7.778c0.39 0.39 0.39 1.024-0 1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.slick-next:hover:not(.slick-disabled):before, .slick-next:focus:not(.slick-disabled):before {
  transform: translateX(3px);
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 96px;
}

.slick-dots {
  position: absolute;
  bottom: -24px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0 48px;
  margin: 0;
  width: 100%;
}
@media (min-width: 48em) {
  .slick-dots {
    padding: 0;
  }
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 100%;
  width: 100%;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.slick-dots li button:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.25;
}
.slick-dots li.slick-active button:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.75;
}

.smartbanner-show {
  margin-top: 80px;
}

.smartbanner-show .smartbanner {
  display: block;
}

/** Default **/
.smartbanner {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-family: "Helvetica Neue", sans-serif;
  background: #f4f4f4;
  z-index: 9998;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-text-size-adjust: none;
}
.lang-menu-active .smartbanner {
  display: none;
}

.smartbanner-container {
  margin: 0 auto;
  white-space: nowrap;
}

.smartbanner-close {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 5px;
  font-family: "ArialRoundedMTBold", Arial;
  font-size: 20px;
  text-align: center;
  color: #888;
  text-decoration: none;
  border: 0;
  border-radius: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
}

.smartbanner-close:active,
.smartbanner-close:hover {
  color: #aaa;
}

.smartbanner-icon {
  display: inline-block;
  vertical-align: middle;
  width: 57px;
  height: 57px;
  margin-right: 12px;
  background-size: cover;
  border-radius: 10px;
}

.smartbanner-info {
  display: inline-block;
  vertical-align: middle;
  width: 44%;
  font-size: 11px;
  line-height: 1.2em;
}

.smartbanner-title {
  font-size: 13px;
  line-height: 18px;
}

.smartbanner-button {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  color: #6a6a6a;
  text-transform: uppercase;
  text-decoration: none;
}

.smartbanner-button:active,
.smartbanner-button:hover {
  color: #aaa;
}

/** iOS **/
.smartbanner-ios {
  background: #f4f4f4;
  background: linear-gradient(to bottom, #f4f4f4, #cdcdcd);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 80px;
}

.smartbanner-ios .smartbanner-close {
  border: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  color: #888;
  text-shadow: 0 1px 0 white;
}

.smartbanner-ios .smartbanner-close:active,
.smartbanner-ios .smartbanner-close:hover {
  color: #aaa;
}

.smartbanner-ios .smartbanner-icon {
  background: rgba(0, 0, 0, 0.6);
  background-size: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.smartbanner-ios .smartbanner-info {
  color: #6a6a6a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.smartbanner-ios .smartbanner-title {
  color: #4d4d4d;
  font-weight: bold;
}

.smartbanner-ios .smartbanner-button {
  padding: 0 10px;
  min-width: 10%;
  color: #6a6a6a;
  background: #efefef;
  background: linear-gradient(to bottom, #efefef, #dcdcdc);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #bfbfbf, 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
}

.smartbanner-ios .smartbanner-button:active,
.smartbanner-ios .smartbanner-button:hover {
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #efefef);
}

/** Android **/
.smartbanner-android {
  box-shadow: inset 0 -4px 0 #ccc;
  background-color: #dedede;
  line-height: 82px;
}

.smartbanner-android .smartbanner-close {
  border: 0;
  width: 17px;
  height: 17px;
  line-height: 18px;
  margin-right: 7px;
  color: #b1b1b3;
  background: #1c1e21;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 1px rgba(255, 255, 255, 0.3);
}

.smartbanner-android .smartbanner-close:active,
.smartbanner-android .smartbanner-close:hover {
  color: #eee;
}

.smartbanner-android .smartbanner-icon {
  background-color: transparent;
  box-shadow: none;
}

.smartbanner-android .smartbanner-info {
  color: #424242;
}

.smartbanner-android .smartbanner-title {
  color: #424242;
  font-weight: bold;
}

.smartbanner-android .smartbanner-button {
  min-width: 12%;
  letter-spacing: 1px;
  padding: 0;
  padding-left: 24px;
  padding-right: 24px;
  color: hsl(0, 0%, 100%);
  background-color: #1788c3;
  border-bottom: 4px solid #3392CD;
  text-align: center;
}

.smartbanner-android .smartbanner-button:active,
.smartbanner-android .smartbanner-button:hover {
  background-color: #3392CD;
}

/*
.smartbanner-android .smartbanner-button-text {

}
.smartbanner-android .smartbanner-button-text:active,
.smartbanner-android .smartbanner-button-text:hover {

}*/
/** Windows **/
.smartbanner-windows {
  background: #f4f4f4;
  background: linear-gradient(to bottom, #f4f4f4, #cdcdcd);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 80px;
}

.smartbanner-windows .smartbanner-close {
  border: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  color: #888;
  text-shadow: 0 1px 0 white;
}

.smartbanner-windows .smartbanner-close:active,
.smartbanner-windows .smartbanner-close:hover {
  color: #aaa;
}

.smartbanner-windows .smartbanner-icon {
  background: rgba(0, 0, 0, 0.6);
  background-size: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.smartbanner-windows .smartbanner-info {
  color: #6a6a6a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.smartbanner-windows .smartbanner-title {
  color: #4d4d4d;
  font-weight: bold;
}

.smartbanner-windows .smartbanner-button {
  padding: 0 10px;
  min-width: 10%;
  color: #6a6a6a;
  background: #efefef;
  background: linear-gradient(to bottom, #efefef, #dcdcdc);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #bfbfbf, 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
}

.smartbanner-windows .smartbanner-button:active,
.smartbanner-windows .smartbanner-button:hover {
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc, #efefef);
}

/*.smartbanner-windows .smartbanner-button-text {
}

.smartbanner-windows .smartbanner-button-text:active,
.smartbanner-windows .smartbanner-button-text:hover {
}*/
/* ==========================================================================
   #INDIGO-PINK
   ========================================================================== */
/**
 * Copied from:
 * "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
 */
.mat-badge-content {
  font-weight: 600;
  font-size: 12px;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-badge-small .mat-badge-content {
  font-size: 9px;
}

.mat-badge-large .mat-badge-content {
  font-size: 24px;
}

.mat-h1, .mat-headline, .mat-typography h1 {
  font: 400 24px/32px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px;
}

.mat-h2, .mat-title, .mat-typography h2 {
  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px;
}

.mat-h3, .mat-subheading-2, .mat-typography h3 {
  font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px;
}

.mat-h4, .mat-subheading-1, .mat-typography h4 {
  font: 400 15px/24px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px;
}

.mat-h5, .mat-typography h5 {
  font: 400 11.62px/20px Roboto, "Helvetica Neue", sans-serif;
  margin: 0 0 12px;
}

.mat-h6, .mat-typography h6 {
  font: 400 9.38px/20px Roboto, "Helvetica Neue", sans-serif;
  margin: 0 0 12px;
}

.mat-body-strong, .mat-body-2 {
  font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-body, .mat-body-1, .mat-typography {
  font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-body p, .mat-body-1 p, .mat-typography p {
  margin: 0 0 12px;
}

.mat-small, .mat-caption {
  font: 400 12px/20px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-display-4, .mat-typography .mat-display-4 {
  font: 300 112px/112px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: -0.05em;
  margin: 0 0 56px;
}

.mat-display-3, .mat-typography .mat-display-3 {
  font: 400 56px/56px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 64px;
}

.mat-display-2, .mat-typography .mat-display-2 {
  font: 400 45px/48px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: -0.005em;
  margin: 0 0 64px;
}

.mat-display-1, .mat-typography .mat-display-1 {
  font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0 0 64px;
}

.mat-bottom-sheet-container {
  font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button, .mat-fab, .mat-mini-fab {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.mat-button-toggle {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-card {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-card-title {
  font-size: 24px;
  font-weight: 500;
}

.mat-card-header .mat-card-title {
  font-size: 20px;
}

.mat-card-subtitle, .mat-card-content {
  font-size: 14px;
}

.mat-checkbox {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-checkbox-layout .mat-checkbox-label {
  line-height: 24px;
}

.mat-chip {
  font-size: 14px;
  font-weight: 500;
}

.mat-chip .mat-chip-trailing-icon.mat-icon, .mat-chip .mat-chip-remove.mat-icon {
  font-size: 18px;
}

.mat-table {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-header-cell {
  font-size: 12px;
  font-weight: 500;
}

.mat-cell, .mat-footer-cell {
  font-size: 14px;
}

.mat-calendar {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-calendar-body {
  font-size: 13px;
}

.mat-calendar-body-label, .mat-calendar-period-button {
  font-size: 14px;
  font-weight: 500;
}

.mat-calendar-table-header th {
  font-size: 11px;
  font-weight: 400;
}

.mat-dialog-title {
  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-expansion-panel-header {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.mat-expansion-panel-content {
  font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-form-field {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.125;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-form-field-wrapper {
  padding-bottom: 1.34375em;
}

.mat-form-field-prefix .mat-icon, .mat-form-field-suffix .mat-icon {
  font-size: 150%;
  line-height: 1.125;
}

.mat-form-field-prefix .mat-icon-button, .mat-form-field-suffix .mat-icon-button {
  height: 1.5em;
  width: 1.5em;
}

.mat-form-field-prefix .mat-icon-button .mat-icon, .mat-form-field-suffix .mat-icon-button .mat-icon {
  height: 1.125em;
  line-height: 1.125;
}

.mat-form-field-infix {
  padding: 0.5em 0;
  border-top: 0.84375em solid transparent;
}

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.34375em) scale(0.75);
  width: 133.3333333333%;
}

.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.34374em) scale(0.75);
  width: 133.3333433333%;
}

.mat-form-field-label-wrapper {
  top: -0.84375em;
  padding-top: 0.84375em;
}

.mat-form-field-label {
  top: 1.34375em;
}

.mat-form-field-underline {
  bottom: 1.34375em;
}

.mat-form-field-subscript-wrapper {
  font-size: 75%;
  margin-top: 0.6666666667em;
  top: calc(100% - 1.7916666667em);
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
  padding-bottom: 1.25em;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
  padding: 0.4375em 0;
}

.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
  -ms-transform: translateY(-1.28125em) scale(0.75);
  width: 133.3333333333%;
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);
  -ms-transform: translateY(-1.28124em) scale(0.75);
  width: 133.3333433333%;
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);
  -ms-transform: translateY(-1.28123em) scale(0.75);
  width: 133.3333533333%;
}

.mat-form-field-appearance-legacy .mat-form-field-label {
  top: 1.28125em;
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
  bottom: 1.25em;
}

.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
  margin-top: 0.5416666667em;
  top: calc(100% - 1.6666666667em);
}

@media print {
  .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.28122em) scale(0.75);
  }
  .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.28121em) scale(0.75);
  }
  .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.2812em) scale(0.75);
  }
}
.mat-form-field-appearance-fill .mat-form-field-infix {
  padding: 0.25em 0 0.75em 0;
}

.mat-form-field-appearance-fill .mat-form-field-label {
  top: 1.09375em;
  margin-top: -0.5em;
}

.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-0.59375em) scale(0.75);
  width: 133.3333333333%;
}

.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-0.59374em) scale(0.75);
  width: 133.3333433333%;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 1em 0 1em 0;
}

.mat-form-field-appearance-outline .mat-form-field-label {
  top: 1.84375em;
  margin-top: -0.25em;
}

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.59375em) scale(0.75);
  width: 133.3333333333%;
}

.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.59374em) scale(0.75);
  width: 133.3333433333%;
}

.mat-grid-tile-header, .mat-grid-tile-footer {
  font-size: 14px;
}

.mat-grid-tile-header .mat-line, .mat-grid-tile-footer .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box;
}

.mat-grid-tile-header .mat-line:nth-child(n+2), .mat-grid-tile-footer .mat-line:nth-child(n+2) {
  font-size: 12px;
}

input.mat-input-element {
  margin-top: -0.0625em;
}

.mat-menu-item {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.mat-paginator, .mat-paginator-page-size .mat-select-trigger {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 12px;
}

.mat-radio-button {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-select {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-select-trigger {
  height: 1.125em;
}

.mat-slide-toggle-content {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-slider-thumb-label-text {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.mat-stepper-vertical, .mat-stepper-horizontal {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-step-label {
  font-size: 14px;
  font-weight: 400;
}

.mat-step-sub-label-error {
  font-weight: normal;
}

.mat-step-label-error {
  font-size: 14px;
}

.mat-step-label-selected {
  font-size: 14px;
  font-weight: 500;
}

.mat-tab-group {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-tab-label, .mat-tab-link {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {
  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0;
}

.mat-tooltip {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.mat-tooltip-handset {
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.mat-list-item {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-list-option {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-list-base .mat-list-item {
  font-size: 16px;
}

.mat-list-base .mat-list-item .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box;
}

.mat-list-base .mat-list-item .mat-line:nth-child(n+2) {
  font-size: 14px;
}

.mat-list-base .mat-list-option {
  font-size: 16px;
}

.mat-list-base .mat-list-option .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box;
}

.mat-list-base .mat-list-option .mat-line:nth-child(n+2) {
  font-size: 14px;
}

.mat-list-base .mat-subheader {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.mat-list-base[dense] .mat-list-item {
  font-size: 12px;
}

.mat-list-base[dense] .mat-list-item .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box;
}

.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2) {
  font-size: 12px;
}

.mat-list-base[dense] .mat-list-option {
  font-size: 12px;
}

.mat-list-base[dense] .mat-list-option .mat-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  box-sizing: border-box;
}

.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2) {
  font-size: 12px;
}

.mat-list-base[dense] .mat-subheader {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.mat-option {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
}

.mat-optgroup-label {
  font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
}

.mat-simple-snackbar {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
}

.mat-simple-snackbar-action {
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}

.mat-tree {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-tree-node, .mat-nested-tree-node {
  font-weight: 400;
  font-size: 14px;
}

.mat-ripple {
  overflow: hidden;
  position: relative;
}

.mat-ripple:not(:empty) {
  transform: translateZ(0);
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible;
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0);
}

.cdk-high-contrast-active .mat-ripple-element {
  display: none;
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.cdk-overlay-container, .cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: auto;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}

.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 1000;
  max-height: 90vh;
}
@media (max-width: 47.99em) {
  .cdk-overlay-pane {
    min-width: 90vw;
  }
}
@media (min-width: 48em) {
  .cdk-overlay-pane {
    max-width: 650px !important;
  }
}
.cdk-overlay-pane.is-full-screen {
  min-width: 100vw;
  min-height: 100vh;
}
@media (min-width: 48em) {
  .cdk-overlay-pane.is-full-screen {
    min-height: 100%;
    max-height: 100%;
  }
}
.cdk-overlay-pane.is-full-screen .mat-dialog-container { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 !important;
  box-shadow: none;
  flex-grow: 1;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}

@media screen and (-ms-high-contrast: active) {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0.6;
  }
}
.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.manual-scrollblock,
.cdk-global-scrollblock {
  position: static;
  width: 100%;
  overflow: visible !important;
}

@keyframes cdk-text-field-autofill-start {
  /*!*/
}
@keyframes cdk-text-field-autofill-end {
  /*!*/
}
.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms;
}

textarea.cdk-textarea-autosize {
  resize: none;
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: auto !important;
  overflow: hidden !important;
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: 0 !important;
}

.mat-focus-indicator {
  position: relative;
}

.mat-mdc-focus-indicator {
  position: relative;
}

.mat-ripple-element {
  background-color: rgba(0, 0, 0, 0.1);
}

.mat-option {
  color: rgba(0, 0, 0, 0.87);
}

.mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {
  background: rgba(0, 0, 0, 0.04);
}

.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
  background: rgba(0, 0, 0, 0.04);
}

.mat-option.mat-active {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.87);
}

.mat-option.mat-option-disabled {
  color: rgba(0, 0, 0, 0.38);
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #3f51b5;
}

.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #ff4081;
}

.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #f44336;
}

.mat-optgroup-label {
  color: rgba(0, 0, 0, 0.54);
}

.mat-optgroup-disabled .mat-optgroup-label {
  color: rgba(0, 0, 0, 0.38);
}

.mat-pseudo-checkbox {
  color: rgba(0, 0, 0, 0.54);
}

.mat-pseudo-checkbox::after {
  color: #fafafa;
}

.mat-pseudo-checkbox-disabled {
  color: #b0b0b0;
}

.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
  background: #3f51b5;
}

.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate {
  background: #ff4081;
}

.mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate {
  background: #f44336;
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {
  background: #b0b0b0;
}

.mat-app-background {
  background-color: #fafafa;
  color: rgba(0, 0, 0, 0.87);
}

.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z3 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z7 {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z10 {
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z11 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z12 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z13 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z14 {
  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z15 {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z16 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z17 {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z18 {
  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z19 {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z20 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z21 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z22 {
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z23 {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.mat-theme-loaded-marker {
  display: none;
}

.mat-autocomplete-panel {
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
}

.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
  background: #fff;
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
  color: rgba(0, 0, 0, 0.87);
}

.mat-badge-content {
  color: #fff;
  background: #3f51b5;
}

.cdk-high-contrast-active .mat-badge-content {
  outline: solid 1px;
  border-radius: 0;
}

.mat-badge-accent .mat-badge-content {
  background: #ff4081;
  color: #fff;
}

.mat-badge-warn .mat-badge-content {
  color: #fff;
  background: #f44336;
}

.mat-badge {
  position: relative;
}

.mat-badge-hidden .mat-badge-content {
  display: none;
}

.mat-badge-disabled .mat-badge-content {
  background: #b9b9b9;
  color: rgba(0, 0, 0, 0.38);
}

.mat-badge-content {
  position: absolute;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  transition: transform 200ms ease-in-out;
  transform: scale(0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.ng-animate-disabled .mat-badge-content, .mat-badge-content._mat-animation-noopable {
  transition: none;
}

.mat-badge-content.mat-badge-active {
  transform: none;
}

.mat-badge-small .mat-badge-content {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.mat-badge-small.mat-badge-above .mat-badge-content {
  top: -8px;
}

.mat-badge-small.mat-badge-below .mat-badge-content {
  bottom: -8px;
}

.mat-badge-small.mat-badge-before .mat-badge-content {
  left: -16px;
}

[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {
  left: auto;
  right: -16px;
}

.mat-badge-small.mat-badge-after .mat-badge-content {
  right: -16px;
}

[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {
  right: auto;
  left: -16px;
}

.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: -8px;
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: auto;
  right: -8px;
}

.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: -8px;
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: auto;
  left: -8px;
}

.mat-badge-medium .mat-badge-content {
  width: 22px;
  height: 22px;
  line-height: 22px;
}

.mat-badge-medium.mat-badge-above .mat-badge-content {
  top: -11px;
}

.mat-badge-medium.mat-badge-below .mat-badge-content {
  bottom: -11px;
}

.mat-badge-medium.mat-badge-before .mat-badge-content {
  left: -22px;
}

[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {
  left: auto;
  right: -22px;
}

.mat-badge-medium.mat-badge-after .mat-badge-content {
  right: -22px;
}

[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {
  right: auto;
  left: -22px;
}

.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: -11px;
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: auto;
  right: -11px;
}

.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: -11px;
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: auto;
  left: -11px;
}

.mat-badge-large .mat-badge-content {
  width: 28px;
  height: 28px;
  line-height: 28px;
}

.mat-badge-large.mat-badge-above .mat-badge-content {
  top: -14px;
}

.mat-badge-large.mat-badge-below .mat-badge-content {
  bottom: -14px;
}

.mat-badge-large.mat-badge-before .mat-badge-content {
  left: -28px;
}

[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {
  left: auto;
  right: -28px;
}

.mat-badge-large.mat-badge-after .mat-badge-content {
  right: -28px;
}

[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {
  right: auto;
  left: -28px;
}

.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: -14px;
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
  left: auto;
  right: -14px;
}

.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: -14px;
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
  right: auto;
  left: -14px;
}

.mat-bottom-sheet-container {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
}

.mat-button, .mat-icon-button, .mat-stroked-button {
  color: inherit;
  background: transparent;
}

.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {
  color: #3f51b5;
}

.mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {
  color: #ff4081;
}

.mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {
  color: #f44336;
}

.mat-button.mat-primary.mat-button-disabled, .mat-button.mat-accent.mat-button-disabled, .mat-button.mat-warn.mat-button-disabled, .mat-button.mat-button-disabled.mat-button-disabled, .mat-icon-button.mat-primary.mat-button-disabled, .mat-icon-button.mat-accent.mat-button-disabled, .mat-icon-button.mat-warn.mat-button-disabled, .mat-icon-button.mat-button-disabled.mat-button-disabled, .mat-stroked-button.mat-primary.mat-button-disabled, .mat-stroked-button.mat-accent.mat-button-disabled, .mat-stroked-button.mat-warn.mat-button-disabled, .mat-stroked-button.mat-button-disabled.mat-button-disabled {
  color: rgba(0, 0, 0, 0.26);
}

.mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay, .mat-stroked-button.mat-primary .mat-button-focus-overlay {
  background-color: #3f51b5;
}

.mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay, .mat-stroked-button.mat-accent .mat-button-focus-overlay {
  background-color: #ff4081;
}

.mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay, .mat-stroked-button.mat-warn .mat-button-focus-overlay {
  background-color: #f44336;
}

.mat-button.mat-button-disabled .mat-button-focus-overlay, .mat-icon-button.mat-button-disabled .mat-button-focus-overlay, .mat-stroked-button.mat-button-disabled .mat-button-focus-overlay {
  background-color: transparent;
}

.mat-button .mat-ripple-element, .mat-icon-button .mat-ripple-element, .mat-stroked-button .mat-ripple-element {
  opacity: 0.1;
  background-color: currentColor;
}

.mat-button-focus-overlay {
  background: #000;
}

.mat-stroked-button:not(.mat-button-disabled) {
  border-color: rgba(0, 0, 0, 0.12);
}

.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
  color: rgba(0, 0, 0, 0.87);
  background-color: #fff;
}

.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
  color: #fff;
}

.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {
  color: #fff;
}

.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {
  color: #fff;
}

.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {
  color: rgba(0, 0, 0, 0.26);
}

.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
  background-color: #3f51b5;
}

.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {
  background-color: #ff4081;
}

.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {
  background-color: #f44336;
}

.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {
  background-color: rgba(0, 0, 0, 0.12);
}

.mat-flat-button.mat-primary .mat-ripple-element, .mat-raised-button.mat-primary .mat-ripple-element, .mat-fab.mat-primary .mat-ripple-element, .mat-mini-fab.mat-primary .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.1);
}

.mat-flat-button.mat-accent .mat-ripple-element, .mat-raised-button.mat-accent .mat-ripple-element, .mat-fab.mat-accent .mat-ripple-element, .mat-mini-fab.mat-accent .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.1);
}

.mat-flat-button.mat-warn .mat-ripple-element, .mat-raised-button.mat-warn .mat-ripple-element, .mat-fab.mat-warn .mat-ripple-element, .mat-mini-fab.mat-warn .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.1);
}

.mat-stroked-button:not([class*=mat-elevation-z]), .mat-flat-button:not([class*=mat-elevation-z]) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-raised-button:not([class*=mat-elevation-z]) {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-fab:not([class*=mat-elevation-z]), .mat-mini-fab:not([class*=mat-elevation-z]) {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]), .mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mat-fab.mat-button-disabled:not([class*=mat-elevation-z]), .mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-standalone, .mat-button-toggle-group {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard {
  box-shadow: none;
}

.mat-button-toggle {
  color: rgba(0, 0, 0, 0.38);
}

.mat-button-toggle .mat-button-toggle-focus-overlay {
  background-color: rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-appearance-standard {
  color: rgba(0, 0, 0, 0.87);
  background: #fff;
}

.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
  background-color: #000;
}

.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
  border-left: solid 1px rgba(0, 0, 0, 0.12);
}

[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
  border-left: none;
  border-right: solid 1px rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle + .mat-button-toggle {
  border-left: none;
  border-right: none;
  border-top: solid 1px rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-checked {
  background-color: #e0e0e0;
  color: rgba(0, 0, 0, 0.54);
}

.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
  color: rgba(0, 0, 0, 0.87);
}

.mat-button-toggle-disabled {
  color: rgba(0, 0, 0, 0.26);
  background-color: #eee;
}

.mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
  background: #fff;
}

.mat-button-toggle-disabled.mat-button-toggle-checked {
  background-color: #bdbdbd;
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard {
  border: solid 1px rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
  line-height: 48px;
}

.mat-card {
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
}

.mat-card:not([class*=mat-elevation-z]) {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.mat-card.mat-card-flat:not([class*=mat-elevation-z]) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-card-subtitle {
  color: rgba(0, 0, 0, 0.54);
}

.mat-checkbox-frame {
  border-color: rgba(0, 0, 0, 0.54);
}

.mat-checkbox-checkmark {
  fill: #fafafa;
}

.mat-checkbox-checkmark-path {
  stroke: #fafafa !important;
}

.mat-checkbox-mixedmark {
  background-color: #fafafa;
}

.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .mat-checkbox-checked.mat-primary .mat-checkbox-background {
  background-color: #3f51b5;
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #ff4081;
}

.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background, .mat-checkbox-checked.mat-warn .mat-checkbox-background {
  background-color: #f44336;
}

.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: #b0b0b0;
}

.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {
  border-color: #b0b0b0;
}

.mat-checkbox-disabled .mat-checkbox-label {
  color: rgba(0, 0, 0, 0.54);
}

.mat-checkbox .mat-ripple-element {
  background-color: #000;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element, .mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {
  background: #3f51b5;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element, .mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
  background: #ff4081;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element, .mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element {
  background: #f44336;
}

.mat-chip.mat-standard-chip {
  background-color: #e0e0e0;
  color: rgba(0, 0, 0, 0.87);
}

.mat-chip.mat-standard-chip .mat-chip-remove {
  color: rgba(0, 0, 0, 0.87);
  opacity: 0.4;
}

.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {
  opacity: 0.54;
}

.mat-chip.mat-standard-chip.mat-chip-disabled {
  opacity: 0.4;
}

.mat-chip.mat-standard-chip::after {
  background: #000;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
  background-color: #3f51b5;
  color: #fff;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {
  color: #fff;
  opacity: 0.4;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.1);
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
  background-color: #f44336;
  color: #fff;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {
  color: #fff;
  opacity: 0.4;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.1);
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
  background-color: #ff4081;
  color: #fff;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {
  color: #fff;
  opacity: 0.4;
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.1);
}

.mat-table {
  background: #fff;
}

.mat-table thead, .mat-table tbody, .mat-table tfoot, mat-header-row, mat-row, mat-footer-row, [mat-header-row], [mat-row], [mat-footer-row], .mat-table-sticky {
  background: inherit;
}

mat-row, mat-header-row, mat-footer-row, th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.mat-header-cell {
  color: rgba(0, 0, 0, 0.54);
}

.mat-cell, .mat-footer-cell {
  color: rgba(0, 0, 0, 0.87);
}

.mat-calendar-arrow {
  border-top-color: rgba(0, 0, 0, 0.54);
}

.mat-datepicker-toggle, .mat-datepicker-content .mat-calendar-next-button, .mat-datepicker-content .mat-calendar-previous-button {
  color: rgba(0, 0, 0, 0.54);
}

.mat-calendar-table-header {
  color: rgba(0, 0, 0, 0.38);
}

.mat-calendar-table-header-divider::after {
  background: rgba(0, 0, 0, 0.12);
}

.mat-calendar-body-label {
  color: rgba(0, 0, 0, 0.54);
}

.mat-calendar-body-cell-content, .mat-date-range-input-separator {
  color: rgba(0, 0, 0, 0.87);
  border-color: transparent;
}

.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .mat-form-field-disabled .mat-date-range-input-separator {
  color: rgba(0, 0, 0, 0.38);
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background-color: rgba(0, 0, 0, 0.04);
}

.mat-calendar-body-in-preview {
  color: rgba(0, 0, 0, 0.24);
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: rgba(0, 0, 0, 0.38);
}

.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: rgba(0, 0, 0, 0.18);
}

.mat-calendar-body-in-range::before {
  background: rgba(63, 81, 181, 0.2);
}

.mat-calendar-body-in-comparison-range::before {
  background: rgba(249, 171, 0, 0.2);
}

.mat-calendar-body-comparison-bridge-start::before, [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {
  background: linear-gradient(to right, rgba(63, 81, 181, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
}

.mat-calendar-body-comparison-bridge-end::before, [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {
  background: linear-gradient(to left, rgba(63, 81, 181, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
}

.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
  background: #a8dab5;
}

.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
  background: #46a35e;
}

.mat-calendar-body-selected {
  background-color: #3f51b5;
  color: #fff;
}

.mat-calendar-body-disabled > .mat-calendar-body-selected {
  background-color: rgba(63, 81, 181, 0.4);
}

.mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff;
}

.mat-datepicker-content {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {
  background: rgba(255, 64, 129, 0.2);
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range::before {
  background: rgba(249, 171, 0, 0.2);
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-start::before, .mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {
  background: linear-gradient(to right, rgba(255, 64, 129, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-end::before, .mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {
  background: linear-gradient(to left, rgba(255, 64, 129, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
  background: #a8dab5;
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
  background: #46a35e;
}

.mat-datepicker-content.mat-accent .mat-calendar-body-selected {
  background-color: #ff4081;
  color: #fff;
}

.mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected {
  background-color: rgba(255, 64, 129, 0.4);
}

.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff;
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-range::before {
  background: rgba(244, 67, 54, 0.2);
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range::before {
  background: rgba(249, 171, 0, 0.2);
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-start::before, .mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {
  background: linear-gradient(to right, rgba(244, 67, 54, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-end::before, .mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {
  background: linear-gradient(to left, rgba(244, 67, 54, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
  background: #a8dab5;
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
  background: #46a35e;
}

.mat-datepicker-content.mat-warn .mat-calendar-body-selected {
  background-color: #f44336;
  color: #fff;
}

.mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected {
  background-color: rgba(244, 67, 54, 0.4);
}

.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff;
}

.mat-datepicker-content-touch {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-datepicker-toggle-active {
  color: #3f51b5;
}

.mat-datepicker-toggle-active.mat-accent {
  color: #ff4081;
}

.mat-datepicker-toggle-active.mat-warn {
  color: #f44336;
}

.mat-date-range-input-inner[disabled] {
  color: rgba(0, 0, 0, 0.38);
}

.mat-dialog-container {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 6px;
}

.mat-divider {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.mat-divider-vertical {
  border-right-color: rgba(0, 0, 0, 0.12);
}

.mat-expansion-panel {
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
}

.mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-action-row {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]), .mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]), .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {
  background: rgba(0, 0, 0, 0.04);
}

@media (hover: none) {
  .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
    background: #fff;
  }
}
.mat-expansion-panel-header-title {
  color: rgba(0, 0, 0, 0.87);
}

.mat-expansion-panel-header-description, .mat-expansion-indicator::after {
  color: rgba(0, 0, 0, 0.54);
}

.mat-expansion-panel-header[aria-disabled=true] {
  color: rgba(0, 0, 0, 0.26);
}

.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title, .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description {
  color: inherit;
}

.mat-expansion-panel-header {
  height: 48px;
}

.mat-expansion-panel-header.mat-expanded {
  height: 64px;
}

.mat-form-field-label {
  color: rgba(0, 0, 0, 0.6);
}

.mat-hint {
  color: rgba(0, 0, 0, 0.6);
}

.mat-form-field.mat-focused .mat-form-field-label {
  color: #3f51b5;
}

.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
  color: #ff4081;
}

.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
  color: #f44336;
}

.mat-focused .mat-form-field-required-marker {
  color: #ff4081;
}

.mat-form-field-ripple {
  background-color: rgba(0, 0, 0, 0.87);
}

.mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: #3f51b5;
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
  background-color: #ff4081;
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
  background-color: #f44336;
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after {
  color: #3f51b5;
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after {
  color: #ff4081;
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix::after {
  color: #f44336;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label {
  color: #f44336;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent, .mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
  color: #f44336;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-ripple, .mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {
  background-color: #f44336;
}

.mat-error {
  color: #f44336;
}

.mat-form-field-appearance-legacy .mat-form-field-label {
  color: rgba(0, 0, 0, 0.54);
}

.mat-form-field-appearance-legacy .mat-hint {
  color: rgba(0, 0, 0, 0.54);
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
  background-color: rgba(0, 0, 0, 0.42);
}

.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);
  background-size: 4px 100%;
  background-repeat: repeat-x;
}

.mat-form-field-appearance-standard .mat-form-field-underline {
  background-color: rgba(0, 0, 0, 0.42);
}

.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);
  background-size: 4px 100%;
  background-repeat: repeat-x;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
  background-color: rgba(0, 0, 0, 0.04);
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
  background-color: rgba(0, 0, 0, 0.02);
}

.mat-form-field-appearance-fill .mat-form-field-underline::before {
  background-color: rgba(0, 0, 0, 0.42);
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
  color: rgba(0, 0, 0, 0.38);
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {
  background-color: transparent;
}

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: rgba(0, 0, 0, 0.12);
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: rgba(0, 0, 0, 0.87);
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: #3f51b5;
}

.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
  color: #ff4081;
}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick {
  color: #f44336;
}

.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
  color: #f44336;
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
  color: rgba(0, 0, 0, 0.38);
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
  color: rgba(0, 0, 0, 0.06);
}

.mat-icon.mat-primary {
  color: #3f51b5;
}

.mat-icon.mat-accent {
  color: #ff4081;
}

.mat-icon.mat-warn {
  color: #f44336;
}

.mat-form-field-type-mat-native-select .mat-form-field-infix::after {
  color: rgba(0, 0, 0, 0.54);
}

.mat-input-element:disabled, .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
  color: rgba(0, 0, 0, 0.38);
}

.mat-input-element {
  caret-color: #3f51b5;
}

.mat-input-element::placeholder {
  color: rgba(0, 0, 0, 0.42);
}

.mat-input-element::-moz-placeholder {
  color: rgba(0, 0, 0, 0.42);
}

.mat-input-element::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.42);
}

.mat-input-element:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.42);
}

.mat-form-field.mat-accent .mat-input-element {
  caret-color: #ff4081;
}

.mat-form-field.mat-warn .mat-input-element, .mat-form-field-invalid .mat-input-element {
  caret-color: #f44336;
}

.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {
  color: #f44336;
}

.mat-list-base .mat-list-item {
  color: rgba(0, 0, 0, 0.87);
}

.mat-list-base .mat-list-option {
  color: rgba(0, 0, 0, 0.87);
}

.mat-list-base .mat-subheader {
  color: rgba(0, 0, 0, 0.54);
}

.mat-list-item-disabled {
  background-color: #eee;
}

.mat-list-option:hover, .mat-list-option:focus, .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item:focus, .mat-action-list .mat-list-item:hover, .mat-action-list .mat-list-item:focus {
  background: rgba(0, 0, 0, 0.04);
}

.mat-list-single-selected-option, .mat-list-single-selected-option:hover, .mat-list-single-selected-option:focus {
  background: rgba(0, 0, 0, 0.12);
}

.mat-menu-panel {
  background: #fff;
}

.mat-menu-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-menu-item {
  background: transparent;
  color: rgba(0, 0, 0, 0.87);
}

.mat-menu-item[disabled], .mat-menu-item[disabled]::after {
  color: rgba(0, 0, 0, 0.38);
}

.mat-menu-item .mat-icon-no-color, .mat-menu-item-submenu-trigger::after {
  color: rgba(0, 0, 0, 0.54);
}

.mat-menu-item:hover:not([disabled]), .mat-menu-item.cdk-program-focused:not([disabled]), .mat-menu-item.cdk-keyboard-focused:not([disabled]), .mat-menu-item-highlighted:not([disabled]) {
  background: rgba(0, 0, 0, 0.04);
}

.mat-paginator {
  background: #fff;
}

.mat-paginator, .mat-paginator-page-size .mat-select-trigger {
  color: rgba(0, 0, 0, 0.54);
}

.mat-paginator-decrement, .mat-paginator-increment {
  border-top: 2px solid rgba(0, 0, 0, 0.54);
  border-right: 2px solid rgba(0, 0, 0, 0.54);
}

.mat-paginator-first, .mat-paginator-last {
  border-top: 2px solid rgba(0, 0, 0, 0.54);
}

.mat-icon-button[disabled] .mat-paginator-decrement, .mat-icon-button[disabled] .mat-paginator-increment, .mat-icon-button[disabled] .mat-paginator-first, .mat-icon-button[disabled] .mat-paginator-last {
  border-color: rgba(0, 0, 0, 0.38);
}

.mat-paginator-container {
  min-height: 56px;
}

.mat-progress-bar-background {
  fill: #c5cae9;
}

.mat-progress-bar-buffer {
  background-color: #c5cae9;
}

.mat-progress-bar-fill::after {
  background-color: #3f51b5;
}

.mat-progress-bar.mat-accent .mat-progress-bar-background {
  fill: #ff80ab;
}

.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
  background-color: #ff80ab;
}

.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
  background-color: #ff4081;
}

.mat-progress-bar.mat-warn .mat-progress-bar-background {
  fill: #ffcdd2;
}

.mat-progress-bar.mat-warn .mat-progress-bar-buffer {
  background-color: #ffcdd2;
}

.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
  background-color: #f44336;
}

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: #3f51b5;
}

.mat-progress-spinner.mat-accent circle, .mat-spinner.mat-accent circle {
  stroke: #ff4081;
}

.mat-progress-spinner.mat-warn circle, .mat-spinner.mat-warn circle {
  stroke: #f44336;
}

.mat-radio-outer-circle {
  border-color: rgba(0, 0, 0, 0.54);
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
  border-color: #3f51b5;
}

.mat-radio-button.mat-primary .mat-radio-inner-circle, .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
  background-color: #3f51b5;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: #ff4081;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
  background-color: #ff4081;
}

.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {
  border-color: #f44336;
}

.mat-radio-button.mat-warn .mat-radio-inner-circle, .mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-warn:active .mat-radio-persistent-ripple {
  background-color: #f44336;
}

.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle, .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {
  border-color: rgba(0, 0, 0, 0.38);
}

.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element, .mat-radio-button.mat-radio-disabled .mat-radio-inner-circle {
  background-color: rgba(0, 0, 0, 0.38);
}

.mat-radio-button.mat-radio-disabled .mat-radio-label-content {
  color: rgba(0, 0, 0, 0.38);
}

.mat-radio-button .mat-ripple-element {
  background-color: #000;
}

.mat-select-value {
  color: rgba(0, 0, 0, 0.87);
}

.mat-select-placeholder {
  color: rgba(0, 0, 0, 0.42);
}

.mat-select-disabled .mat-select-value {
  color: rgba(0, 0, 0, 0.38);
}

.mat-select-arrow {
  color: rgba(0, 0, 0, 0.54);
}

.mat-select-panel {
  background: #fff;
}

.mat-select-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
  background: rgba(0, 0, 0, 0.12);
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
  color: #3f51b5;
}

.mat-form-field.mat-focused.mat-accent .mat-select-arrow {
  color: #ff4081;
}

.mat-form-field.mat-focused.mat-warn .mat-select-arrow {
  color: #f44336;
}

.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {
  color: #f44336;
}

.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
  color: rgba(0, 0, 0, 0.38);
}

.mat-drawer-container {
  background-color: #fafafa;
  color: rgba(0, 0, 0, 0.87);
}

.mat-drawer {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
}

.mat-drawer.mat-drawer-push {
  background-color: #fff;
}

.mat-drawer:not(.mat-drawer-side) {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.mat-drawer-side {
  border-right: solid 1px rgba(0, 0, 0, 0.12);
}

.mat-drawer-side.mat-drawer-end {
  border-left: solid 1px rgba(0, 0, 0, 0.12);
  border-right: none;
}

[dir=rtl] .mat-drawer-side {
  border-left: solid 1px rgba(0, 0, 0, 0.12);
  border-right: none;
}

[dir=rtl] .mat-drawer-side.mat-drawer-end {
  border-left: none;
  border-right: solid 1px rgba(0, 0, 0, 0.12);
}

.mat-drawer-backdrop.mat-drawer-shown {
  background-color: rgba(0, 0, 0, 0.6);
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: #ff4081;
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(255, 64, 129, 0.54);
}

.mat-slide-toggle.mat-checked .mat-ripple-element {
  background-color: #ff4081;
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
  background-color: #3f51b5;
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(63, 81, 181, 0.54);
}

.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
  background-color: #3f51b5;
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
  background-color: #f44336;
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(244, 67, 54, 0.54);
}

.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {
  background-color: #f44336;
}

.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
  background-color: #000;
}

.mat-slide-toggle-thumb {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  background-color: #fafafa;
}

.mat-slide-toggle-bar {
  background-color: rgba(0, 0, 0, 0.38);
}

.mat-slider-track-background {
  background-color: rgba(0, 0, 0, 0.26);
}

.mat-primary .mat-slider-track-fill, .mat-primary .mat-slider-thumb, .mat-primary .mat-slider-thumb-label {
  background-color: #3f51b5;
}

.mat-primary .mat-slider-thumb-label-text {
  color: #fff;
}

.mat-primary .mat-slider-focus-ring {
  background-color: rgba(63, 81, 181, 0.2);
}

.mat-accent .mat-slider-track-fill, .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label {
  background-color: #ff4081;
}

.mat-accent .mat-slider-thumb-label-text {
  color: #fff;
}

.mat-accent .mat-slider-focus-ring {
  background-color: rgba(255, 64, 129, 0.2);
}

.mat-warn .mat-slider-track-fill, .mat-warn .mat-slider-thumb, .mat-warn .mat-slider-thumb-label {
  background-color: #f44336;
}

.mat-warn .mat-slider-thumb-label-text {
  color: #fff;
}

.mat-warn .mat-slider-focus-ring {
  background-color: rgba(244, 67, 54, 0.2);
}

.mat-slider:hover .mat-slider-track-background, .cdk-focused .mat-slider-track-background {
  background-color: rgba(0, 0, 0, 0.38);
}

.mat-slider-disabled .mat-slider-track-background, .mat-slider-disabled .mat-slider-track-fill, .mat-slider-disabled .mat-slider-thumb {
  background-color: rgba(0, 0, 0, 0.26);
}

.mat-slider-disabled:hover .mat-slider-track-background {
  background-color: rgba(0, 0, 0, 0.26);
}

.mat-slider-min-value .mat-slider-focus-ring {
  background-color: rgba(0, 0, 0, 0.12);
}

.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
  background-color: rgba(0, 0, 0, 0.87);
}

.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
  background-color: rgba(0, 0, 0, 0.26);
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  border-color: rgba(0, 0, 0, 0.26);
  background-color: transparent;
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
  border-color: rgba(0, 0, 0, 0.38);
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
  border-color: rgba(0, 0, 0, 0.26);
}

.mat-slider-has-ticks .mat-slider-wrapper::after {
  border-color: rgba(0, 0, 0, 0.7);
}

.mat-slider-horizontal .mat-slider-ticks {
  background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
  background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
}

.mat-slider-vertical .mat-slider-ticks {
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
}

.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

@media (hover: none) {
  .mat-step-header:hover {
    background: none;
  }
}
.mat-step-header .mat-step-label, .mat-step-header .mat-step-optional {
  color: rgba(0, 0, 0, 0.54);
}

.mat-step-header .mat-step-icon {
  background-color: rgba(0, 0, 0, 0.54);
  color: #fff;
}

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
  background-color: #3f51b5;
  color: #fff;
}

.mat-step-header .mat-step-icon-state-error {
  background-color: transparent;
  color: #f44336;
}

.mat-step-header .mat-step-label.mat-step-label-active {
  color: rgba(0, 0, 0, 0.87);
}

.mat-step-header .mat-step-label.mat-step-label-error {
  color: #f44336;
}

.mat-stepper-horizontal, .mat-stepper-vertical {
  background-color: #fff;
}

.mat-stepper-vertical-line::before {
  border-left-color: rgba(0, 0, 0, 0.12);
}

.mat-horizontal-stepper-header::before, .mat-horizontal-stepper-header::after, .mat-stepper-horizontal-line {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.mat-horizontal-stepper-header {
  height: 72px;
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
  padding: 24px 24px;
}

.mat-stepper-vertical-line::before {
  top: -16px;
  bottom: -16px;
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before {
  top: 36px;
}

.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
  top: 36px;
}

.mat-sort-header-arrow {
  color: #757575;
}

.mat-tab-nav-bar, .mat-tab-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mat-tab-group-inverted-header .mat-tab-nav-bar, .mat-tab-group-inverted-header .mat-tab-header {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: none;
}

.mat-tab-label, .mat-tab-link {
  color: rgba(0, 0, 0, 0.87);
}

.mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {
  color: rgba(0, 0, 0, 0.38);
}

.mat-tab-header-pagination-chevron {
  border-color: rgba(0, 0, 0, 0.87);
}

.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: rgba(0, 0, 0, 0.38);
}

.mat-tab-group[class*=mat-background-] .mat-tab-header, .mat-tab-nav-bar[class*=mat-background-] {
  border-bottom: none;
  border-top: none;
}

.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(197, 202, 233, 0.3);
}

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: #3f51b5;
}

.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar {
  background-color: #fff;
}

.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 128, 171, 0.3);
}

.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar {
  background-color: #ff4081;
}

.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar {
  background-color: #fff;
}

.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 205, 210, 0.3);
}

.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar {
  background-color: #f44336;
}

.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar {
  background-color: #fff;
}

.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(197, 202, 233, 0.3);
}

.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-group.mat-background-primary .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination {
  background-color: #3f51b5;
}

.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link {
  color: #fff;
}

.mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled {
  color: rgba(255, 255, 255, 0.4);
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {
  border-color: #fff;
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: rgba(255, 255, 255, 0.4);
}

.mat-tab-group.mat-background-primary .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.12);
}

.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 128, 171, 0.3);
}

.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-group.mat-background-accent .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination {
  background-color: #ff4081;
}

.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link {
  color: #fff;
}

.mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled {
  color: rgba(255, 255, 255, 0.4);
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {
  border-color: #fff;
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: rgba(255, 255, 255, 0.4);
}

.mat-tab-group.mat-background-accent .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.12);
}

.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(255, 205, 210, 0.3);
}

.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-group.mat-background-warn .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination {
  background-color: #f44336;
}

.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link {
  color: #fff;
}

.mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled {
  color: rgba(255, 255, 255, 0.4);
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {
  border-color: #fff;
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
  border-color: rgba(255, 255, 255, 0.4);
}

.mat-tab-group.mat-background-warn .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.12);
}

.mat-toolbar {
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.87);
}

.mat-toolbar.mat-primary {
  background: #3f51b5;
  color: #fff;
}

.mat-toolbar.mat-accent {
  background: #ff4081;
  color: #fff;
}

.mat-toolbar.mat-warn {
  background: #f44336;
  color: #fff;
}

.mat-toolbar .mat-form-field-underline, .mat-toolbar .mat-form-field-ripple, .mat-toolbar .mat-focused .mat-form-field-ripple {
  background-color: currentColor;
}

.mat-toolbar .mat-form-field-label, .mat-toolbar .mat-focused .mat-form-field-label, .mat-toolbar .mat-select-value, .mat-toolbar .mat-select-arrow, .mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {
  color: inherit;
}

.mat-toolbar .mat-input-element {
  caret-color: currentColor;
}

.mat-toolbar-multiple-rows {
  min-height: 64px;
}

.mat-toolbar-row, .mat-toolbar-single-row {
  height: 64px;
}

@media (max-width: 599px) {
  .mat-toolbar-multiple-rows {
    min-height: 56px;
  }
  .mat-toolbar-row, .mat-toolbar-single-row {
    height: 56px;
  }
}
.mat-tooltip {
  background: rgba(97, 97, 97, 0.9);
}

.mat-tree {
  background: #fff;
}

.mat-tree-node, .mat-nested-tree-node {
  color: rgba(0, 0, 0, 0.87);
}

.mat-tree-node {
  min-height: 48px;
}

.mat-snack-bar-container {
  color: rgba(255, 255, 255, 0.7);
  background: #323232;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-simple-snackbar-action {
  color: #ff4081;
}

/* ==========================================================================
   #OKTA
   ========================================================================== */
.primary-auth,
.mfa-verify,
.forgot-password {
  position: relative;
}

.o-form-content.o-form-theme.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.okta-form-title.o-form-head {
  color: #424243;
  font-weight: 700;
  line-height: 1.15;
}

.o-form-fieldset {
  position: relative;
  box-sizing: border-box;
  vertical-align: top;
  margin-bottom: 24px;
}
@media (min-width: 48em) {
  .o-form-fieldset {
    display: inline-block;
    width: 100%;
  }
}

.okta-form-label.o-form-label {
  display: block;
  color: #6d6d6d;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 6px;
}
@media (min-width: 48em) {
  .okta-form-label.o-form-label {
    display: inline-block; /* [1] */
  }
  .okta-form-label.o-form-label:after { /* [2] */
    content: "\a";
    white-space: pre;
  }
}

.o-form-input {
  position: relative;
  margin: 0;
}

.o-form-control input[type=tel],
.o-form-control input[type=text],
.o-form-control input[type=password] {
  display: inline-block;
  width: 100%;
  height: 42px;
  padding: 0;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  color: #424243;
  background-color: #fafafa !important;
  border: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #b7b7b8;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
}
.o-form-control input[type=tel]:focus, .o-form-control input[type=tel]:active,
.o-form-control input[type=text]:focus,
.o-form-control input[type=text]:active,
.o-form-control input[type=password]:focus,
.o-form-control input[type=password]:active {
  outline: none;
  box-shadow: none;
  border-bottom-color: #1788c3;
}
.o-form-control input:disabled {
  cursor: default;
  opacity: 0.3;
}
@media (min-width: 48em) {
  .o-form-control input[type=text],
  .o-form-control input[type=password] {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}

.okta-form-input-error {
  position: relative;
  padding: 0;
  padding-top: 6px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: #da1f3d;
}

.mfa-send-email-content {
  margin-bottom: 48px;
}

.mfa-email-sent-content {
  margin-bottom: 24px;
}

.mfa-send-email-content .mask-email,
.mfa-email-sent-content .mask-email {
  font-weight: 700;
}

.resend-email-infobox {
  margin-bottom: 24px;
}
.resend-email-infobox .infobox span.icon {
  display: none;
}
.resend-email-infobox .infobox p {
  margin-bottom: 0;
}
.resend-email-infobox .infobox p + span {
  font-weight: 700;
}
.resend-email-infobox .infobox p .resend-email-btn {
  margin-left: 12px;
}

@media (max-width: 47.99em) {
  .auth-footer,
  .auth-footer .help-links.js-help-links .link {
    text-align: center;
  }
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .auth-footer {
    padding-top: 24px;
  }
  .auth-footer,
  .auth-footer .help-links.js-help-links .link {
    text-align: left;
  }
}
@media (min-width: 75em) {
  .auth-footer {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    transform: translate(0, -32px);
  }
  .forgot-password .auth-footer {
    transform: translate(0, -34px);
  }
}
.auth-footer .help-links.js-help-links {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding: 6px 0;
  text-align: left;
  background-color: hsl(0, 0%, 100%);
  border-radius: 3px;
  border: 1px solid #f6f6f6;
  box-shadow: 0 1px 16px -3px rgba(0, 0, 0, 0.3);
}
.auth-footer .help-links.js-help-links .link {
  display: block;
  padding: 12px;
}

.o-form-error-container > div {
  position: relative;
  display: table;
  width: 100%;
  margin-bottom: 24px;
  padding: 24px 24px 24px 96px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 600;
  border-spacing: 0;
  border-radius: 3px;
  background-color: #da1f3d;
}
.o-form-error-container > div .okta-form-infobox-error,
.o-form-error-container > div .okta-form-infobox-error p {
  margin: 0;
  color: hsl(0, 0%, 100%);
}
.o-form-error-container > div .okta-form-infobox-error .icon.error-16 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  width: 48px;
  height: 32px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: hsl(0, 0%, 100%);
}
.o-form-error-container > div .okta-form-infobox-error .icon.error-16:before {
  display: block;
  width: 48px;
  height: 32px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zM13 17h-2v-2h2v2zM13 13h-2v-6h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  /* [1] */
  background-size: unset !important;
  background-position: 0 50%;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
.o-wrapper {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1440px;
}
.o-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/1  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.o-layout` block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */
/* Default/mandatory classes
   ========================================================================== */
/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */
.o-layout {
  display: block; /* [1] */
  margin: 0; /* [2] */
  padding: 0; /* [2] */
  list-style: none; /* [1] */
  margin-left: -24px; /* [3] */
  font-size: 0;
}

/**
 * 1. Required in order to combine fluid widths with fixed gutters.
 * 2. Allows us to manipulate grids vertically, with text-level properties,
 *    etc.
 * 3. Default item alignment is with the tops of each other, like most
 *    traditional grid/layout systems.
 * 4. By default, all layout items are full-width (mobile first).
 * 5. Gutters provided by left padding:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 * 6. Fallback for old IEs not supporting `rem` values.
 */
.o-layout__item {
  box-sizing: border-box; /* [1] */
  display: inline-block; /* [2] */
  vertical-align: top; /* [3] */
  width: 100%; /* [4] */
  padding-left: 24px; /* [5] */
  font-size: 16px; /* [6] */
  font-size: 1rem;
}

/* Gutter size modifiers
   ========================================================================== */
.o-layout--flush {
  margin-left: 0;
}
.o-layout--flush > .o-layout__item {
  padding-left: 0;
}

.o-layout--tiny {
  margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
  padding-left: 6px;
}

.o-layout--small {
  margin-left: -12px;
}
.o-layout--small > .o-layout__item {
  padding-left: 12px;
}

.o-layout--large {
  margin-left: -48px;
}
.o-layout--large > .o-layout__item {
  padding-left: 48px;
}

.o-layout--huge {
  margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
  padding-left: 96px;
}

/* Vertical alignment modifiers
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 */
.o-layout--middle > .o-layout__item {
  vertical-align: middle;
}

/**
 * Align all grid items to the bottoms of each other.
 */
.o-layout--bottom > .o-layout__item {
  vertical-align: bottom;
}

/**
 * Stretch all grid items of each row to have an equal-height.
 * Please be aware that this modifier class doesn’t take any effect in IE9 and
 * below and other older browsers due to the lack of `display: flex` support.
 */
.o-layout--stretch {
  display: flex;
  flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
  display: flex;
}
.o-layout--stretch.o-layout--center {
  justify-content: center;
}
.o-layout--stretch.o-layout--right {
  justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
  justify-content: flex-start;
}

/* Fill order modifiers
   ========================================================================== */
/**
 * Fill up the layout system from the centre.
 */
.o-layout--center {
  text-align: center;
}
.o-layout--center > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the right-hand side.
 */
.o-layout--right {
  text-align: right;
}
.o-layout--right > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the left-hand side. This will likely only be
 * needed when using in conjunction with `.o-layout--reverse`.
 */
.o-layout--left {
  text-align: left;
}
.o-layout--left > .o-layout__item {
  text-align: left;
}

/**
 * Reverse the rendered order of the grid system.
 */
.o-layout--reverse {
  direction: rtl;
}
.o-layout--reverse > .o-layout__item {
  direction: ltr;
}

/* Auto-widths modifier
   ========================================================================== */
/**
 * Cause layout items to take up a non-explicit amount of width.
 */
.o-layout--auto > .o-layout__item {
  width: auto;
}

/* ==========================================================================
   #MEDIA
   ========================================================================== */
/**
 * Place any image- and text-like content side-by-side, as per:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */
.o-media {
  display: block;
}
.o-media:after {
  content: "";
  display: table;
  clear: both;
}

.o-media__img {
  float: left;
  margin-right: 24px;
}
.o-media__img > img {
  display: block;
}

.o-media__body {
  overflow: hidden;
  display: block;
}
.o-media__body,
.o-media__body > :last-child {
  margin-bottom: 0;
}

/* Size variants
   ========================================================================== */
/**
 * Modify the amount of space between our image and our text. We also have
 * reversible options for all available sizes.
 */
.o-media--flush > .o-media__img {
  margin-right: 0;
  margin-left: 0;
}

.o-media--tiny > .o-media__img {
  margin-right: 6px;
}
.o-media--tiny.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 6px;
}

.o-media--small > .o-media__img {
  margin-right: 12px;
}
.o-media--small.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 12px;
}

.o-media--large > .o-media__img {
  margin-right: 48px;
}
.o-media--large.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 48px;
}

.o-media--huge > .o-media__img {
  margin-right: 96px;
}
.o-media--huge.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 96px;
}

/* Reversed media objects
   ========================================================================== */
.o-media--reverse > .o-media__img {
  float: right;
  margin-right: 0;
  margin-left: 24px;
}

/* ==========================================================================
   #FLAG
   ========================================================================== */
/**
 * The flag object is a design pattern similar to the media object, however it
 * utilises `display: table[-cell];` to give us control over the vertical
 * alignments of the text and image.
 *
 * http://csswizardry.com/2013/05/the-flag-object/
 *
 * 1. Allows us to control vertical alignments.
 * 2. Force the object to be the full width of its parent. Combined with [1],
 *    this makes the object behave in a quasi-`display: block;` manner.
 * 3. Reset inherited `border-spacing` declarations.
 */
.o-flag {
  display: table; /* [1] */
  width: 100%; /* [2] */
  border-spacing: 0; /* [3] */
}

/**
 * Items within a flag object. There should only ever be one of each.
 *
 * 1. Default to aligning content to their middles.
 */
.o-flag__img,
.o-flag__body {
  display: table-cell;
  vertical-align: middle; /* [1] */
}

/**
 * Flag images have a space between them and the body of the object.
 *
 * 1. Force `.o-flag__img` to take up as little space as possible:
 *    https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
 */
.o-flag__img {
  width: 1px; /* [1] */
  padding-right: 24px;
  /**
   * 1. Fixes problem with images disappearing.
   *
   *    The direct child selector '>' needs to remain in order for nested flag
   *    objects to not inherit their parent’s formatting. In case the image tag
   *    is wrapped into another tag, e.g. an anchor for linking reasons, it will
   *    disappear. In that case try wrapping the whole o-flag__img object into
   *    an anchor tag.
   *
   *    E.g.:
   *
   *      <a href="/">
   *        <div class="o-flag__img">
   *          <img src="./link/to/image.jpg" alt="image alt text">
   *        </div>
   *      </a>
   */
}
.o-flag__img > img {
  max-width: none; /* [1] */
}

/**
 * The container for the main content of the flag object.
 *
 * 1. Forces the `.flag__body` to take up all remaining space.
 */
.o-flag__body {
  width: auto; /* [1] */
}
.o-flag__body,
.o-flag__body > :last-child {
  margin-bottom: 0;
}

/* Size variants
   ========================================================================== */
.o-flag--flush > .o-flag__img {
  padding-right: 0;
  padding-left: 0;
}

.o-flag--tiny > .o-flag__img {
  padding-right: 6px;
}
.o-flag--tiny.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 6px;
}

.o-flag--small > .o-flag__img {
  padding-right: 12px;
}
.o-flag--small.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 12px;
}

.o-flag--large > .o-flag__img {
  padding-right: 48px;
}
.o-flag--large.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 48px;
}

.o-flag--huge > .o-flag__img {
  padding-right: 96px;
}
.o-flag--huge.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 96px;
}

/* Reversed flag
   ========================================================================== */
/**
 * 1. Swap the rendered direction of the object…
 * 2. …and reset it.
 * 3. Reassign margins to the correct sides.
 */
.o-flag--reverse {
  direction: rtl; /* [1] */
}
.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
  direction: ltr; /* [2] */
}
.o-flag--reverse > .o-flag__img {
  padding-right: 0; /* [3] */
  padding-left: 24px; /* [3] */
}

/* Alignment variants
   ========================================================================== */
/**
 * Vertically align the image- and body-content differently. Defaults to middle.
 */
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
  vertical-align: top;
}

.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
  vertical-align: bottom;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-list-inline {
  margin-left: 0;
  list-style: none;
}

.o-list-inline__item {
  display: inline-block;
}

/* ==========================================================================
   #BOX
   ========================================================================== */
/**
 * The box object simply boxes off content. Extend with cosmetic styles in the
 * Components layer.
 *
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 */
.o-box {
  display: block; /* [1] */
  padding: 24px;
}
.o-box:after {
  content: "";
  display: table;
  clear: both;
}
.o-box > :last-child {
  margin-bottom: 0;
}

/* Size variants
   ========================================================================== */
.o-box--flush {
  padding: 0;
}

.o-box--tiny {
  padding: 6px;
}

.o-box--small {
  padding: 12px;
}

.o-box--large {
  padding: 48px;
}

.o-box--huge {
  padding: 96px;
}

/* ==========================================================================
   #BLOCK
   ========================================================================== */
/**
 * Stacked image-with-text object. A simple abstraction to cover a very commonly
 * occurring design pattern.
 */
.o-block {
  display: block;
  text-align: center;
}

.o-block__img {
  margin-bottom: 24px;
  /* Size variants
     ====================================================================== */
}
.o-block--flush > .o-block__img {
  margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
  margin-bottom: 6px;
}
.o-block--small > .o-block__img {
  margin-bottom: 12px;
}
.o-block--large > .o-block__img {
  margin-bottom: 48px;
}
.o-block--huge > .o-block__img {
  margin-bottom: 96px;
}

.o-block__body {
  display: block;
}

/* Alignment variants
   ========================================================================== */
.o-block--right {
  text-align: right;
}

.o-block--left {
  text-align: left;
}

/* ==========================================================================
   #ANCHORS
   ========================================================================== */
/**
 * The anchors object is a design pattern similar to the media object, however
 * it is used for creating links or in-page anchors, with or without icons.
 * For example, social media links, an `+ Add new` or `X Close` link, or button-y
 * style in-page anchors.
 *
    A link with an icon:

    <a href="{url}" class="o-anchor">
        <i class="o-anchor__icon my-icon--class"></i>
        <span class="o-anchor__text">Link text</span>
    </a>
 *
 *
    A button-y still anchor, could also have an icon:

    <a href="#my-target" class="o-anchor o-anchor--btn">
        <span class="o-anchor__text">Section One</span>
    </a>

 */
.o-anchor {
  position: relative;
  display: inline-block;
  transition: opacity 250ms ease-out;
  opacity: 1;
}
.o-anchor:after {
  content: "";
  display: table;
  clear: both;
}
.o-anchor, .o-anchor:link, .o-anchor:visited {
  color: hsl(0, 0%, 30%);
  font-weight: 600;
}
.o-anchor:hover {
  opacity: 0.8;
  text-decoration: none;
}

.o-anchor__icon {
  float: left;
  margin-right: 6px;
}
.o-anchor__icon:before {
  display: block;
  width: 24px;
  height: 24px;
  color: currentColor;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
}

.o-anchor__text {
  overflow: hidden;
  display: block;
}
.o-anchor__text,
.o-anchor__text > :last-child {
  margin-bottom: 0;
}

/* Group multiple anchors inline
   ========================================================================== */
/**
 * Place a bunch of `o.anchor` objects inside a group wrapper to display them
 * inline together.
 */
.o-anchor-group .o-anchor {
  margin-left: 24px;
}

.o-anchor-group-micro .o-anchor {
  margin-left: 3px;
}

.o-anchor-group-tiny .o-anchor {
  margin-left: 6px;
}

.o-anchor-group-small .o-anchor {
  margin-left: 12px;
}

.o-anchor-group-large .o-anchor {
  margin-left: 48px;
}

.o-anchor-group-huge .o-anchor {
  margin-left: 96px;
}

[class*=o-anchor-group] {
  margin-top: 48px;
  font-size: 0;
}
[class*=o-anchor-group] .o-anchor {
  font-size: 16px; /* [6] */
  font-size: 1rem;
}
[class*=o-anchor-group] .o-anchor:first-child {
  margin-left: 0;
}

/* Make the icon `knocked-out` on a solid background
   ========================================================================== */
.o-anchor__icon--ko:before {
  border-radius: 50%;
  background-color: #1788c3;
  color: hsl(0, 0%, 100%);
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 25px;
  text-align: center;
}

/* Button-y anchors
   ========================================================================== */
.o-anchor--btn {
  transition: none;
}
.o-anchor--btn .o-anchor__text {
  color: hsl(0, 0%, 0%);
  padding: 3px 12px;
  background-color: hsl(0, 0%, 90%);
  border-radius: 3px;
  transition: background-color 250ms ease-out, color 250ms ease-out;
}
.o-anchor--btn:hover {
  opacity: 1;
}
.o-anchor--btn:hover .o-anchor__text {
  color: hsl(0, 0%, 100%);
  background-color: #1788c3;
}

.o-anchor--top {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  color: hsl(0, 0%, 0%);
  background-color: hsl(0, 0%, 100%);
  transition: background-color 250ms ease-out, color 250ms ease-out;
}
.o-anchor--top span {
  display: block;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}
.o-anchor--top [class^=res-]:before,
.o-anchor--top [class*=" res-"]:before {
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  margin: 0;
  width: 30px;
  height: 30px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
  text-indent: 1px;
  color: hsl(0, 0%, 0%);
}
.o-anchor--top:hover {
  opacity: 1;
  background-color: hsl(0, 0%, 95%);
}

/* Size variants
   ========================================================================== */
/**
 * Modify the amount of space between our image and our icon. We also have
 * reversible options for all available sizes.
 */
.o-anchor--small > .o-anchor__icon {
  margin-right: 12px;
}
.o-anchor--small.o-anchor--reverse > .o-anchor__icon {
  margin-right: 0;
  margin-left: 12px;
}

.o-anchor--medium > .o-anchor__icon {
  margin-right: 24px;
}
.o-anchor--medium.o-anchor--reverse > .o-anchor__icon {
  margin-right: 0;
  margin-left: 24px;
}

.o-anchor--large > .o-anchor__icon {
  margin-right: 48px;
}
.o-anchor--large.o-anchor--reverse > .o-anchor__icon {
  margin-right: 0;
  margin-left: 48px;
}

.o-anchor--huge > .o-anchor__icon {
  margin-right: 96px;
}
.o-anchor--huge.o-anchor--reverse > .o-anchor__icon {
  margin-right: 0;
  margin-left: 96px;
}

/* Reversed anchor objects
   ========================================================================== */
.o-anchor--reverse > .o-anchor__icon {
  float: right;
  margin-right: 0;
  margin-left: 6px;
}

/* ==========================================================================
#CALLOUTS
========================================================================== */
.o-callout {
  position: relative;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.o-callout__body {
  display: inline-block;
}

/* Style modifiers.
========================================================================== */
.o-callout--need-help {
  margin-top: 72px;
  border-left: 4px solid #1788c3;
  background-color: #f6f6f6;
}
.o-callout--need-help > .o-callout__body {
  padding: 24px;
}
.o-callout--need-help p:last-of-type {
  margin: 0;
}

.o-callout--pos-right {
  margin: 0;
  margin-bottom: 24px;
  text-align: center;
}
@media (min-width: 48em) {
  .o-callout--pos-right {
    position: absolute;
    top: 6px;
    left: auto;
    right: 0;
    margin: 0;
  }
}

.o-callout--password {
  padding: 24px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  background-color: #f6f6f6;
}
.o-callout--password ul, .o-callout--password ol {
  margin-left: 18px;
  margin-bottom: 0;
}

/* ==========================================================================
   #CAROUSELS
   ========================================================================== */
/**
 * Extending and modifying the Flexslider carousel layout.
 *
 * Related files:
 * `/vendors/slick.scss`, `/vendors/slick-theme.scss`, `/js/slick.min.js`
 *
 *
 * Some standard style overrides you may want to apply to all your
 * `o-carousel` components.
 */
.o-carousel {
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.o-carousel.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.o-carousel__item {
  position: relative;
}
.o-carousel__item:focus {
  outline: none;
}

/* Carousel variants
   ========================================================================== */
/**
 * Hero area carousel - example
 *
 * 1. Move the paging control up into the carousel area.
 * 2. Larger and different color paging nav dots than our default `o-carousel`
 *    overrides above.
 */
.o-carousel--hero {
  height: 480px;
  max-height: 480px;
  overflow: hidden;
}
@media (min-width: 100em) {
  .o-carousel--hero {
    height: 540px;
    max-height: 540px;
  }
}
.o-carousel--hero.slick-dotted.slick-slider {
  margin-bottom: 0px;
}
.o-carousel--hero .slick-dots {
  bottom: 8px;
}
.o-carousel--hero .o-carousel__item {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.o-carousel--hero .slick-dots li button:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.o-carousel--hero .slick-dots li.slick-active button:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

/**
 * A thumbnail style carousel, where you see more then one slide
 * at a time and page through the "groups" of slides.
 */
.o-carousel--thumbs {
  width: auto;
  margin: 0;
  margin-left: -24px;
  margin-right: -24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.o-wrapper--tips-history .o-carousel--thumbs, .o-carousel--thumbs.slick-initialized {
  visibility: visible;
  opacity: 1;
}
@media (min-width: 48em) {
  .o-carousel--thumbs {
    margin-left: 0;
    margin-right: 0;
  }
}
.o-carousel--thumbs .slick-list {
  font-size: 0;
}
@media (min-width: 48em) {
  .o-carousel--thumbs .slick-list {
    margin-left: -24px;
  }
}
@media (min-width: 48em) {
  .o-section--tips .o-carousel--thumbs .slick-list {
    overflow: visible;
  }
}
.o-carousel--thumbs .slick-track {
  margin-left: 0;
  margin-right: 0;
}
.c-form--has-validation .o-carousel--thumbs {
  margin-left: 0;
  margin-right: 0;
}
.o-carousel--thumbs .o-carousel__item {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  font-size: 16px;
  font-size: 1rem;
  line-height: initial;
}
@media (min-width: 48em) {
  .o-carousel--thumbs .o-carousel__item {
    padding-left: 24px;
  }
}
.o-carousel--thumbs .slick-dots {
  bottom: -47px;
}
.o-carousel--thumbs .slick-prev,
.o-carousel--thumbs .slick-next {
  top: auto;
  bottom: -55px;
  height: 32px;
  width: 32px;
  transform: translate(0, 0%);
  z-index: 100;
}
@media (min-width: 62em) {
  .o-carousel--thumbs .slick-prev,
  .o-carousel--thumbs .slick-next {
    top: 50%;
    bottom: auto;
    height: 42px;
    width: 42px;
    transform: translate(0, -70%);
  }
}
@media (max-width: 61.99em) {
  .o-carousel--thumbs .slick-prev {
    left: 12px;
  }
  .c-form--has-validation .o-carousel--thumbs .slick-prev {
    left: 0;
  }
}
@media (min-width: 62em) {
  .o-carousel--thumbs .slick-prev {
    left: -72px;
  }
}
@media (max-width: 61.99em) {
  .o-carousel--thumbs .slick-next {
    right: 12px;
  }
  .c-form--has-validation .o-carousel--thumbs .slick-next {
    right: 0;
  }
}
@media (min-width: 62em) {
  .o-carousel--thumbs .slick-next {
    right: -72px;
  }
}

.o-carousel--trends {
  width: auto;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.o-carousel--trends.slick-initialized {
  visibility: visible;
  opacity: 1;
}
.o-carousel--trends .slick-prev,
.o-carousel--trends .slick-next {
  top: auto;
  bottom: -55px;
  height: 32px;
  width: 32px;
  transform: translate(0, 0%);
  z-index: 100;
}
.o-carousel--trends .slick-prev:before,
.o-carousel--trends .slick-next:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
@media (min-width: 62em) {
  .o-carousel--trends .slick-prev,
  .o-carousel--trends .slick-next {
    top: 50%;
    bottom: auto;
    height: 42px;
    width: 42px;
    transform: translate(0, -70%);
  }
}
@media (max-width: 61.99em) {
  .o-carousel--trends .slick-prev {
    left: 12px;
  }
}
@media (min-width: 62em) {
  .o-carousel--trends .slick-prev {
    left: -72px;
  }
}
@media (max-width: 61.99em) {
  .o-carousel--trends .slick-next {
    right: 12px;
  }
}
@media (min-width: 62em) {
  .o-carousel--trends .slick-next {
    right: -72px;
  }
}

/* ==========================================================================
   #FLEXBODY
   ========================================================================== */
/**
 * Use flex method for sticky footer.

  <html>
    <body class="o-flexbody__body">

      <div\form class="o-flexbody__body ">

        <header></header>

        <div class="o-flexbody__page">

            [ PAGE CONTENT GOES HERE ]

        </div>

        <footer></footer>

      </div\form>

    </body>

  </html>

 * Dependecies:
 * Body tag needs `o-flexbody__body` class.

 * Outer wrapper tag needs `o-flexbody__body` class. Some platforms require that all
 * the site content gets inserted into another tag, like a form tag in .NET or
 * and `app-root` tag in Angular2 for example, so we need to double up on our
 * `o-flexbody__body` object class.

 * IE10 requires Modernizr.addTest('flexboxtweener') method to be enabled
*/
.o-flexbody__body {
  position: relative;
  min-height: 100vh;
  /* Ye Olde Flexbox for Webkit */
  /* Tweener flexbox */
  /* Prefixed "new flexbox" */
  /* unprefixed standard "new flexbox" version */
  display: flex;
  z-index: 1;
  width: 100%;
  /* Your grandparents flexbox for Webkit */
  /* Prefixed new syntax: */
  /* Same syntax for weird IE tweener */
  /* unprefixed new syntax */
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.o-flexbody__body .page-head,
.o-flexbody__body .page-footer,
.o-flexbody__body .c-notification-pusher,
.o-flexbody__body .c-notifications-wrapper {
  flex: none;
}

.o-flexbody__page {
  position: relative;
  width: 100%;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
.o-flexbody__page:after {
  content: "";
  display: table;
  clear: both;
}

.flexboxtweener,
.flexboxtweener > body,
.flexboxtweener .o-flexbody__body {
  height: 100%;
  min-height: 100%;
}

/* Aligner */
@media (min-width: 48em) {
  .o-flex-aligner {
    display: flex;
    align-items: center;
    min-height: 60vh;
    justify-content: center;
    /**
    * Fixes the min-height bug in IE10-11.
    * This class should be added to a container element as described in
    * Flexbug #3. See http://bit.ly/1gy8OJS for details.
    */
  }
  .o-flex-aligner.o-flexbody__page--full-height {
    height: 100vh;
  }
  .o-flex-aligner .o-flex-aligner__item {
    flex: 1;
  }
  .o-flex-aligner .o-flex-aligner__item--top {
    align-self: flex-start;
  }
  .o-flex-aligner .o-flex-aligner__item--bottom {
    align-self: flex-end;
  }
  .o-flex-aligner .o-flex-aligner__item--fixed {
    flex: none;
    max-width: 50%;
  }
  .o-flex-aligner .u-ieMinHeightBugFix {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
  #INLINE GROUP
  ========================================================================== */
/**
 * Group multiple singular elements inline such as tags or anchors.
 * Place a series of the same element inside a inline-group wrapper to display them
 * inline together. Simpler than trying to use the `o-layout` object for
 * something like this.
 */
.o-inline-group {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -24px;
  font-size: 0;
}
.o-inline-group > * {
  display: inline-block !important;
  padding-left: 24px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-micro {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -3px;
  font-size: 0;
}
.o-inline-group-micro > * {
  display: inline-block !important;
  padding-left: 3px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-tiny {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -6px;
  font-size: 0;
}
.o-inline-group-tiny > * {
  display: inline-block !important;
  padding-left: 6px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-small {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -12px;
  font-size: 0;
}
.o-inline-group-small > * {
  display: inline-block !important;
  padding-left: 12px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-large {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -48px;
  font-size: 0;
}
.o-inline-group-large > * {
  display: inline-block !important;
  padding-left: 48px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-xlarge {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -72px;
  font-size: 0;
}
.o-inline-group-xlarge > * {
  display: inline-block !important;
  padding-left: 72px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-huge {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: -96px;
  font-size: 0;
}
.o-inline-group-huge > * {
  display: inline-block !important;
  padding-left: 96px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.o-inline-group-flush {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: 0px;
  font-size: 0;
}
.o-inline-group-flush > * {
  display: inline-block !important;
  padding-left: 0px !important;
  margin-bottom: 24px !important;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Vertical alignment modifiers
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 */
.o-inline-group--top > * {
  vertical-align: top;
}

/**
* Align all grid items to the bottoms of each other.
*/
.o-inline-group--bottom > * {
  vertical-align: bottom;
}

/* Variants
   ========================================================================== */
@media (max-width: 47.99em) {
  .o-inline-group--block-at-mobile > * {
    display: block !important;
  }
}

.o-inline-group--no-margin > * {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   #TABLES
   ========================================================================== */
/** inuitcss classes defined in inuitcss/objects/objects.tables that we can
 * apply to our `table` tag:
 *
 * .o-table - table object, sets width to 100% again
 *
 * .o-table--fixed - fixed width table cells
 *
 * Size variants for `th` and `td` padding based on our global spacing unit:
 * .o-table--tiny
 * .o-table--small
 * .o-table--large
 * .o-table--huge
 *
 * How to use:
 * <table class="o-table o-table--fixed o-table--small">
 *
 * Related files:
 * /inuitcss/objects/objects.tables.scss
 * /inuitcss/elements/elements.tables.scss
 * elements/elements.tables.scss
 */
/* Table themes
   ========================================================================== */
.ui-datatable-tablewrapper th, .ui-datatable-tablewrapper td {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
}

.o-table--av-gridview th, .o-table--av-gridview td {
  padding: 12px 0 12px 6px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background-color: hsl(0, 0%, 100%);
}
.o-table--av-gridview th {
  font-weight: 700;
  color: hsl(0, 0%, 20%);
  text-align: left;
  border-bottom-color: hsl(0, 0%, 60%);
}
.o-table--av-gridview td {
  font-weight: 400;
  color: hsl(0, 0%, 20%);
  border-bottom-color: hsl(0, 0%, 80%);
}

/* Legacy styles. Some hard-coded content in the RESX uses these table styles.
 * For example, some of the FAQ support content.
   ========================================================================== */
table.tbl-scoreData {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 24px auto;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  border-collapse: collapse;
}
@media (min-width: 62em) {
  table.tbl-scoreData {
    width: 600px;
  }
}
table.tbl-scoreData caption {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-style: italic;
}
table.tbl-scoreData tr th,
table.tbl-scoreData tr td {
  padding: 6px 16px;
  text-align: center;
  font-weight: 700;
  vertical-align: middle;
}
table.tbl-scoreData tr th {
  color: hsl(0, 0%, 100%);
  background-color: #1788c3;
}
table.tbl-scoreData tr td {
  color: hsl(0, 0%, 0%);
  background-color: hsl(0, 0%, 100%);
}
table.tbl-scoreData tr:nth-child(odd) td {
  background-color: hsl(0, 0%, 95%);
}

/* ==========================================================================
   #WRAPPERS
   ========================================================================== */
/**
 * Some custom overrides to the inuit wrapper.
 * 1. Removing the default padding at wider than max-width screen sizes so we
 *    can get the full max-width page.
 *
 * Related files:
 * /node_modules/inuitcss/objects/objects.wrapper
 */
@media (min-width: 100em) {
  .o-wrapper,
  .o-wrapper--tiny,
  .o-wrapper--small,
  .o-wrapper--large,
  .o-wrapper--huge {
    padding-right: 0;
    padding-left: 0;
  }
}

.o-wrapper--narrow {
  max-width: 420px !important;
}

.o-wrapper--tablet {
  max-width: 768px !important;
}

.o-wrapper--flush {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 61.99em) {
  .o-wrapper--buffer {
    padding-right: 12px;
    padding-left: 12px;
  }
}

.o-wrapper--trends {
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
}
@media (min-width: 62em) {
  .o-wrapper--trends {
    padding-right: 96px;
    padding-left: 96px;
  }
}

.o-wrapper-positioning {
  position: relative;
}

/* Size variants
   ========================================================================== */
.o-wrapper--tiny {
  padding-left: 6px;
  padding-right: 6px;
}

.o-wrapper--small {
  padding-left: 12px;
  padding-right: 12px;
}

.o-wrapper--large {
  padding-left: 48px;
  padding-right: 48px;
}

.o-wrapper--huge {
  padding-left: 96px;
  padding-right: 96px;
}

/* ==========================================================================
  #LAYOUT
  ========================================================================== */
/* Inline group.
   ========================================================================== */
/**
 * Allows us to use the `o-layout` object to group any number of items together
 * inline, such as buttons, without using the grid or column-style structure of
 * the `o-layout` object.
 *
 * 1. Remove the default width of 100% from the `.o-layout__item` class.
 * 2. Mobile-first bottom margin for each item since they will likely be stacked
 *    at mobile screen sizes.
 */
.o-layout--inline-group-always > .o-layout__item {
  width: auto; /* [1] */
  margin-bottom: 12px; /* [2] */
}
@media (min-width: 48em) {
  .o-layout--inline-group-always > .o-layout__item {
    width: auto; /* [1] */
    margin-bottom: 24px;
  }
}

/* Gutter size modifiers.
   ========================================================================== */
.o-layout--micro {
  margin-left: -3px;
}
.o-layout--micro > .o-layout__item {
  padding-left: 3px;
}

@media (min-width: 48em) {
  .o-layout--login {
    margin-left: -48px;
  }
  .o-layout--login > .o-layout__item {
    padding-left: 48px;
  }
}
@media (min-width: 62em) {
  .o-layout--login {
    margin-left: -96px;
  }
  .o-layout--login > .o-layout__item {
    padding-left: 96px;
  }
}

/* Dividers
   ========================================================================== */
.o-layout--section {
  margin-bottom: 48px;
  padding-bottom: 24px;
  margin-right: -24px;
  padding-right: 24px;
  border-bottom: 1px solid #e6e6e7;
}
.o-section .o-layout--section.o-section-repeater:last-of-type:not(:only-of-type) {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

@media (min-width: 62em) {
  .o-layout--tips-equipment {
    margin-left: -48px;
  }
}
@media (min-width: 100em) {
  .o-layout--tips-equipment {
    margin-left: -96px;
  }
}
@media (min-width: 62em) {
  .o-layout--tips-equipment > .o-layout__item {
    padding-left: 48px;
  }
}
@media (min-width: 100em) {
  .o-layout--tips-equipment > .o-layout__item {
    padding-left: 96px;
  }
}

@media (min-width: 62em) {
  .o-layout--my-equipment {
    position: relative;
  }
  .o-layout--my-equipment:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 1px;
    height: 100%;
    border-left: 1px solid #b7b7b8;
  }
}
@media (min-width: 100em) {
  .o-layout--my-equipment:before {
    left: -24px;
  }
}

.o-layout--component {
  margin-bottom: 48px;
  padding-bottom: 24px;
}

@media (min-width: 48em) {
  .o-layout--action-btns {
    text-align: right;
  }
}
.o-layout--action-btns .c-btn {
  margin-bottom: 24px;
}

@media (min-width: 62em) {
  .o-layout--sticky-left-nav {
    position: sticky;
    position: -webkit-sticky;
    top: 24px;
  }
}

.o-layout--page-nav {
  margin-bottom: 48px;
  background-color: #fafafa;
}

@media (min-width: 48em) {
  .o-layout--auto\@tablet > .o-layout__item {
    width: auto;
  }
}

/* ==========================================================================
#SECTIONS
========================================================================== */
.o-section {
  position: relative;
  padding-top: 24px;
  padding-bottom: 48px;
  background-color: hsl(0, 0%, 100%);
}
.o-section:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .o-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Size variations
========================================================================== */
.o-section--flush {
  padding: 0;
}

.o-section--flush-top {
  padding-top: 0;
}

.o-section--flush-bottom {
  padding-bottom: 0;
}

.o-section--small-top {
  padding-top: 12px;
}

.o-section--small {
  padding-top: 12px;
  padding-bottom: 12px;
}

.o-section--large {
  padding-top: 48px;
  padding-bottom: 48px;
}

.o-section--column-divider .o-wrapper {
  position: relative;
}
@media (min-width: 48em) {
  .o-section--column-divider .o-wrapper:before {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    left: -mox-calc(50% - 1px);
    left: -o-calc(50% - 1px);
    left: calc(50% - 1px);
    width: 0;
    height: 100%;
    content: "";
    border-right-style: solid;
    border-right-color: #d9d8d5;
    border-right-width: 1px;
  }
}

.o-section\@mobile {
  border-top: 1px solid #d9d8d5;
}
@media (min-width: 48em) {
  .o-section\@mobile {
    border: none;
  }
}

/* Background colors
========================================================================== */
.o-section--lightgrey {
  background-color: #f6f6f6;
}

/* Section variants
========================================================================== */
.o-section--sleep-score {
  padding-top: 60px;
  padding-bottom: 12px;
  background-color: #f6f6f6;
}
@media (min-width: 62em) {
  .o-section--sleep-score {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
@media (max-width: 47.99em) {
  .o-section--sleep-score .o-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.o-section--history-nav {
  padding-top: 24px;
  padding-bottom: 48px;
}
@media (min-width: 48em) {
  .o-section--history-nav {
    padding-top: 60px;
  }
}

.o-section--trends {
  background-color: #f6f6f6;
  overflow: hidden;
}
.o-section--trends > .o-wrapper {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 48em) {
  .o-section--trends > .o-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.o-section--tips .c-heading-main.u-h1 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 61.99em) {
  .o-section--my-equipment {
    padding-top: 0;
  }
}

.o-section--countries {
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: transparent;
}
@media (max-width: 47.99em) {
  .o-section--countries .o-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
.o-section--countries .o-section--countries__item {
  border-bottom: 1px solid #d9d8d5;
}
.o-section--countries .o-section--countries__item:first-child {
  border-top: 1px solid #d9d8d5;
}
@media (min-width: 48em) {
  .o-section--countries .o-section--countries__item, .o-section--countries .o-section--countries__item:first-child {
    border: none;
  }
}

.o-section-repeater .o-section-repeater__heading {
  vertical-align: baseline;
}
@media (max-width: 47.99em) {
  .o-section-repeater .o-section-repeater__heading {
    text-align: center;
  }
}
.o-section-repeater .o-section-repeater__heading .c-heading-section {
  margin-bottom: 0;
}
.o-section-repeater .o-section-repeater__link {
  vertical-align: baseline;
}
@media (min-width: 48em) {
  .o-section-repeater .o-section-repeater__link {
    text-align: right;
  }
}
.o-section-repeater .o-section-repeater__link .c-btn--text {
  margin-bottom: 0;
}

.o-section--feedback .o-widget--ratings {
  margin-top: 48px;
  margin-left: auto;
  margin-right: auto;
}
.o-section--feedback .o-widget--ratings .o-widget__body {
  display: none;
}
.o-section--feedback .o-widget--ratings .o-widget__btn {
  padding: 0 24px;
}
.o-section--feedback .o-widget--ratings .c-icon-btn-thumbs {
  width: 80px;
  height: 80px;
}
.o-section--feedback .o-widget--error {
  margin-bottom: 48px;
}
.o-section--feedback .c-heading-sub,
.o-section--feedback .o-widget--form {
  text-align: center;
  width: 100% !important;
}

.o-section--rmd-nav {
  padding: 0;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #232323;
}

.o-section--full-page-back-btn {
  padding: 24px;
}
@media (min-width: 48em) {
  .o-section--full-page-back-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* Content dividers
========================================================================== */
.o-section--faq-divider {
  display: block;
  margin: 0;
  margin-bottom: 48px;
  padding: 0;
  padding-top: 24px;
  width: 100%;
  height: 0;
}
.o-section--faq-divider:first-of-type {
  border-bottom: 1px solid #e6e6e7;
}

/**
 * Turn off scrolling on the body that so that the site doesn't scroll in the
 * background when the date calendar overlay is active on a mobile screen.
 */
@media (max-width: 47.99em) {
  .no-scroll {
    overflow: hidden;
    height: 100vh;
  }
}

.no-scroll--video {
  overflow: hidden;
  height: 100vh;
}

@media (min-width: 48em) {
  .o-page--countrySelection {
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(/assets/images/countryMap.png);
    background-repeat: no-repeat;
    background-position: 50% 55vh;
  }
}
@media (min-width: 48em) {
  .o-page--countrySelection form,
  .o-page--countrySelection mpp-root {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  }
}
@media (min-width: 75em) {
  .o-page--countrySelection form,
  .o-page--countrySelection mpp-root {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  }
}

.is-coaching-html .o-section {
  padding-top: 0;
  padding-bottom: 0;
}
.is-coaching-html .o-section .o-wrapper {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
 #SCROLLABLE
 ========================================================================== */
.o-scrollable {
  overflow-y: scroll;
}

.o-scrollable__body {
  padding-right: 24px;
}

.o-scrollable--h250px {
  height: 250px;
}

/* ==========================================================================
  #INSET
  ========================================================================== */
/**
 * Place an image within the flow of content and align it left or right. You
 * need to add width classes to set the width of your inset box.

    <div class="o-inset">
        Some content here...

        <div class="o-inset__img o-inset--right u-1/3@tablet">
            <img src="..." />
        </div>

        ...some more content here.
    </div>
*/
.o-inset {
  display: block;
}
.o-inset:after {
  content: "";
  display: table;
  clear: both;
}

.o-inset__img {
  margin-bottom: 48px;
}
.o-inset__img img {
  width: 100%;
  height: auto;
  max-width: 500px;
  line-height: 0;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
@media (min-width: 48em) {
  .o-inset__img.u-2\/5\@tablet img {
    max-width: 398px;
  }
}

@media (min-width: 48em) {
  .o-inset__img--left {
    display: inline;
    float: left;
    padding-right: 48px;
  }
}

@media (min-width: 48em) {
  .o-inset__img--right {
    display: inline;
    float: right;
    padding-left: 48px;
    text-align: right;
  }
}

@media (min-width: 48em) {
  .o-inset__img--small img {
    max-width: 250px;
  }
}

@media (min-width: 48em) {
  .o-inset__img--med img {
    max-width: 400px;
  }
}

@media (min-width: 48em) {
  .o-inset__img--large {
    width: 600px;
  }
}

/* Background image cases
   ========================================================================== */
/**
 * Some images are background-images so we can change the image based on region
 * without any back-end code.
 */
.o-inset--invite {
  display: block;
  width: 100%;
  max-width: 395px;
  height: 276px;
  background-image: url(/assets/images/formExample.png);
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* Languages */
}
html:lang(de) .o-inset--invite {
  background-image: url(/assets/images/formExample_de.png);
}
html:lang(es) .o-inset--invite {
  background-image: url(/assets/images/formExample_es.png);
}
html:lang(fi) .o-inset--invite {
  background-image: url(/assets/images/formExample_fi.png);
}
html:lang(fr) .o-inset--invite {
  background-image: url(/assets/images/formExample_fr.png);
}
html:lang(ja) .o-inset--invite {
  background-image: url(/assets/images/formExample_ja.png);
}
html:lang(nb) .o-inset--invite {
  background-image: url(/assets/images/formExample_nb.png);
}
html:lang(nl) .o-inset--invite {
  background-image: url(/assets/images/formExample_nl.png);
}
html:lang(pb) .o-inset--invite {
  background-image: url(/assets/images/formExample_pb.png);
}
html:lang(pl) .o-inset--invite {
  background-image: url(/assets/images/formExample_pl.png);
}
html:lang(sv) .o-inset--invite {
  background-image: url(/assets/images/formExample_sv.png);
}

/* ==========================================================================
 #WIDGETS
 ========================================================================== */
.o-widget {
  display: table;
  width: auto;
  margin-bottom: 24px;
}

.o-widget__row {
  display: block;
  width: 100%;
}
@media (min-width: 48em) {
  .o-widget__row {
    display: table-row;
  }
}

.o-widget__btns,
.o-widget__body {
  display: block;
  width: 100%;
  text-align: center;
}
@media (min-width: 48em) {
  .o-widget__btns,
  .o-widget__body {
    display: table-cell;
    width: auto;
    vertical-align: middle;
    white-space: nowrap;
    padding-right: 24px;
  }
}

.o-widget__btns {
  line-height: 0;
}
@media (min-width: 48em) {
  .o-widget__btns {
    padding: 0;
  }
}

.o-widget__btn {
  display: inline-block;
  padding-right: 6px;
}
.o-widget__btn:last-child {
  padding-right: 0;
}

/* Widget variants.
   ========================================================================== */
.o-widget--ratings {
  margin-top: 24px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 48em) {
  .o-widget--ratings {
    margin-left: 0;
    margin-right: 0;
  }
}

.o-widget--error {
  margin-bottom: 24px;
}
.o-widget--error .o-widget__body {
  text-align: center;
}
@media (min-width: 48em) {
  .o-widget--error .o-widget__body {
    width: 100%;
    white-space: unset !important;
    padding-right: 0;
  }
}

@media (min-width: 62em) {
  .o-widget--form {
    width: 58.33333% !important;
  }
}

/* ==========================================================================
   #POSITION
   ========================================================================== */
.o-position {
  position: relative;
}
.o-position:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 47.99em) {
  .o-position__object {
    display: block;
  }
}
@media (min-width: 48em) {
  .o-position__object {
    position: absolute;
  }
}

@media (max-width: 47.99em) {
  .o-position--top-left .o-position__object {
    text-align: left;
  }
}
@media (min-width: 48em) {
  .o-position--top-left .o-position__object {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }
}

@media (max-width: 47.99em) {
  .o-position--top-right {
    text-align: right;
  }
}
@media (min-width: 48em) {
  .o-position--top-right .o-position__object {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
  }
}

/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@keyframes borderscale {
  50% {
    box-shadow: 0 0 0 2px #4f8196;
  }
}
@keyframes aniBgColors {
  0% {
    background-color: #009cdc;
  }
  50% {
    background-color: #ec2c36;
  }
  100% {
    background-color: #f4a832;
  }
}
@keyframes aniDim {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@keyframes aniStayHidden {
  0%, 100% {
    opacity: 0;
  }
}
@keyframes aniFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes aniFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes aniFadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes aniFadeInDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes aniSlideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}
.ani-slideOutUp {
  animation-name: aniSlideOutUp;
}
@keyframes aniSlideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes aniSlideInDown {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 48em) {
  .ani-hideFadein\@tablet {
    animation-name: aniStayHidden, aniFadeInUp;
    animation-duration: 1500ms, 550ms;
    animation-delay: 0s, 1500ms;
    animation-timing-function: linear, ease-out;
  }
}
@keyframes aniPopIn {
  0% {
    transform: scale(1) translate(-50%, -50%);
  }
  1% {
    transform: scale(0.5) translate(-50%, -50%);
  }
  45% {
    transform: scale(1.05) translate(-50%, -50%);
  }
  80% {
    transform: scale(0.95) translate(-50%, -50%);
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
  }
}
/* ==========================================================================
   #ALERTS
   ========================================================================== */
/**
 * The alerts component is used to display a short message to the user.
 *
 *
 * 1. So we can position our alert icon.
 * 2. Allows us to control vertical alignments.
 * 3. Force the object to be the full width of its parent. Combined with [2],
 *    this makes the object behave in a quasi-`display: block;` manner.
 * 4. Mobile first padding and font-size.
 * 5. Reset inherited `border-spacing` declarations.
 * 6. Hide the alert.
 * 7. Outro animation when user dismisses an alert.
 * 8. Show alert.

  HTML:
  <div class="c-alert c-alert--error js-toggle-data-state" role="alert" data-state="is-hidden">
    <div class="c-alert__body">You have no chance to survive make your time.</div>
    <div class="c-alert__close"><button class="c-icon-btn c-icon-btn--close is-inverse js-close-btn" type="button" aria-label="Close"><svg class="c-svg c-svg--close-24"><use xlink:href="#c-svg--close-24"></use></svg></button></div>
  </div>

 */
.c-alert {
  position: relative; /* [1] */
  display: table; /* [2] */
  width: 100%; /* [3] */
  margin-bottom: 24px;
  padding: 24px 36px; /* [4] */
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.15;
  /* [4] */
  font-weight: 600;
  border-spacing: 0; /* [5] */
  border-radius: 3px;
  /* [6] */
  /* [7] */
  /* [8] */
}
@media (min-width: 48em) {
  .c-alert {
    padding: 24px 96px; /* [4] */
  }
}
.c-alert[data-state=is-hidden] {
  display: none;
  overflow: hidden;
}
.c-alert[data-state=is-dismissed] {
  animation-name: aniFadeOut, aniSlideOutUp;
  animation-duration: 250ms, 250ms;
  animation-delay: 250ms, 250ms;
  animation-timing-function: ease-out, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.c-alert[data-state=is-active] {
  animation-name: aniStayHidden, aniFadeIn;
  animation-duration: 250ms, 250ms;
  animation-delay: 0s, 250ms;
  animation-timing-function: linear, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

/**
 * Content within an alert object. There should only ever be one.
 *
 * 1. Forces the `.alert__body` to take up all remaining space.
 * 2. Default to aligning content to their middles.
 * 3. Reset inherited `p` and `a` declarations in case some markup gets
 *    inserted into our `.alert__body`.
 * 4. Make sure the last element in the alert body does not have a margin-bottom
 *    so it doesn't mess up our padding.
 */
.c-alert__body {
  display: table-cell;
  width: 100%; /* [1] */
  vertical-align: middle; /* [2] */
  text-align: center;
  /* [3] */
  /* [3] */
  /* [3] */
}
.c-alert__body p {
  margin: 0;
  margin-bottom: 12px;
}
.c-alert__body p p {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.c-alert__body a, .c-alert__body a:link, .c-alert__body a:visited, .c-alert__body a:hover, .c-alert__body a:active, .c-alert__body a:focus {
  text-decoration: underline;
  color: inherit;
  opacity: 1;
  transition: opacity 250ms ease-out;
}
.c-alert__body a:hover {
  opacity: 0.8;
}
.c-alert__body li {
  line-height: initial;
}
.c-alert__body,
.c-alert__body > :last-child {
  margin-bottom: 0; /* [4] */
}

@media (max-width: 47.99em) {
  .c-alert__view-links {
    display: block;
    padding-top: 12px;
  }
}
@media (min-width: 48em) {
  .c-alert__view-links {
    display: inline-block;
    margin-left: 4%;
  }
}

/**
 * The container for the notification component's close button.
 */
.c-alert__close {
  position: absolute;
  top: 6px;
  right: 6px;
  cursor: pointer;
  line-height: 0;
}
@media (min-width: 48em) {
  .c-alert__close {
    top: 21px;
    right: 12px;
  }
}

/* Alert types
   ========================================================================== */
/**
 * Set some defaults for the alert's icon as a pseudo element.
 * NOTE: `.alert--message` doesn't have an icon
 * 1. We want our icon to be placed to the left of the alert message.
 */
@media (max-width: 47.99em) {
  .c-alert.show-icon {
    padding-left: 96px;
  }
}
.c-alert.show-icon .c-alert__body {
  text-align: left;
}
.c-alert.show-icon:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  width: 48px;
  height: 32px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(255, 255, 255, 0.8);
  background-size: unset !important;
  background-position: 0 50%;
}
.c-alert.show-icon.is-info:before {
  border-right-color: hsl(0, 0%, 100%);
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 1.992c-5.527 0-10.008 4.481-10.008 10.008s4.481 10.008 10.008 10.008 10.008-4.481 10.008-10.008-4.481-10.008-10.008-10.008zM11.023 7.43c0.247-0.229 0.542-0.343 0.885-0.343s0.637 0.114 0.882 0.343 0.368 0.503 0.368 0.825-0.124 0.596-0.371 0.822c-0.248 0.226-0.541 0.339-0.879 0.339-0.343 0-0.638-0.113-0.885-0.339s-0.372-0.5-0.372-0.822 0.124-0.597 0.372-0.825zM14.085 16.913h-4.012v-0.463c0.11-0.008 0.218-0.019 0.324-0.032s0.197-0.034 0.273-0.063c0.135-0.051 0.23-0.124 0.286-0.219s0.083-0.221 0.083-0.378v-3.694c0-0.148-0.034-0.278-0.102-0.391s-0.152-0.202-0.254-0.27c-0.076-0.051-0.191-0.1-0.346-0.146s-0.295-0.076-0.422-0.089v-0.463l3.11-0.165 0.095 0.095v5.040c0 0.148 0.032 0.274 0.095 0.377s0.154 0.181 0.273 0.232c0.084 0.038 0.178 0.072 0.279 0.102s0.208 0.051 0.317 0.063v0.463z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  /* [2] */
}
.c-alert.show-icon.c-alert--error:before {
  border-right-color: hsl(0, 0%, 100%);
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zM13 17h-2v-2h2v2zM13 13h-2v-6h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  /* [1] */
}
.c-alert.show-icon.c-alert--warning:before {
  border-right-color: #424243;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zM13 17h-2v-2h2v2zM13 13h-2v-6h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  /* [1] */
}
.c-alert.show-icon.c-alert--success:before {
  border-right-color: hsl(0, 0%, 100%);
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zM10 17l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  /* [1] */
}

/**
 * 1. Background color of the alert box.
 */
.c-alert--message {
  background-color: #1788c3; /* [1] */
}
.c-alert--message .c-alert__body,
.c-alert--message .c-alert__body > * {
  color: hsl(0, 0%, 100%);
}

.c-alert--error {
  background-color: #da1f3d; /* [1] */
}
.c-alert--error .c-alert__body,
.c-alert--error .c-alert__body > * {
  color: hsl(0, 0%, 100%);
}

.c-alert--warning {
  background-color: #ffc344;
}
.c-alert--warning .c-alert__body,
.c-alert--warning .c-alert__body > * {
  color: #424243;
}

.c-alert--success {
  background-color: #6cb454;
}
.c-alert--success .c-alert__body,
.c-alert--success .c-alert__body > * {
  color: hsl(0, 0%, 100%);
}

/* Type variants.
  ========================================================================== */
/* Different types of alert notifications */
.c-alert--toast {
  position: absolute;
  top: 24px;
  right: 24px;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  width: 330px;
  border-radius: 0px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  z-index: 100;
}
.c-alert--toast .c-alert__body {
  text-align: left;
}
.c-alert--toast[data-state=is-active] {
  animation-name: aniStayHidden, aniFadeInDown;
  animation-duration: 250ms, 250ms;
  animation-delay: 0s, 250ms;
  animation-timing-function: linear, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.c-alert--toast-bottom-right {
  top: auto;
  left: auto;
  bottom: 24px;
}

.c-alert--toast-bottom-left {
  top: auto;
  bottom: 24px;
  left: 24px;
  right: auto;
}

.c-alert--toast-bottom-right[data-state=is-active],
.c-alert--toast-bottom-left[data-state=is-active] {
  animation-name: aniStayHidden, aniFadeInUp;
  animation-duration: 250ms, 250ms;
  animation-delay: 0s, 250ms;
  animation-timing-function: linear, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.c-alert--toast-bottom-right[data-state=is-dismissed],
.c-alert--toast-bottom-left[data-state=is-dismissed] {
  animation-name: aniFadeOut, aniSlideOutDown;
  animation-duration: 250ms, 250ms;
  animation-delay: 250ms, 250ms;
  animation-timing-function: ease-out, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

/* Alignment variants.
   ========================================================================== */
/**
 * Vertically align the body-content. Defaults to middle.
 * This will only have an effect if there is a min-height on your `c-alert`
 * component or an element in the `c-alert__body`, like an image, with a height
 * greater than the content.
 */
.c-alert--top > .c-alert__body {
  vertical-align: top;
}

.c-alert--bottom > .c-alert__body {
  vertical-align: bottom;
}

/* Size variants
   ========================================================================== */
/**
 * Change the amount of space around our alert message, between the icon and
 * the alert message, and the size of the icon. Applied @tablet size and above.
 * We probably want to keep the alerts at a standard, smaller, size for mobile.
 */
.c-alert--small {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 24px;
}
.c-alert--small:not(.show-icon) {
  padding-left: 24px;
}

.c-alert--large {
  padding-top: 48px;
  padding-bottom: 48px;
  padding-right: 48px;
}
.c-alert--large:not(.show-icon) {
  padding-left: 48px;
}

/* Position variants
   ========================================================================== */
/**
 * Set a global header style notification banner. This notification appears
 * at the very top of the page, above the site header, and is sticky.
 *
 * 1. The notifications, or alerts, are placed or loaded dynamically into the
 *    wrapper container which is fixed to the top of the viewport. The wrapper
 *    ensures proper positioning of one or more notifications.
 * 2. Remove any border-radius from the alert so it can fill in the corners of
 *    the viewport.
 * 3. Remove vertical pipe next to icon and reset text alignment to be centered
 *    on global notifications.
 */
.c-notifications-wrapper { /* [1] */ }
.c-notifications-wrapper .c-alert {
  margin-bottom: 3px;
  border-radius: 0; /* [2] */
}
@media (min-width: 48em) {
  .c-notifications-wrapper .c-alert.show-icon::before {
    border-right: 0; /* [3] */
  }
  .c-notifications-wrapper .c-alert.show-icon .c-alert__body {
    text-align: center; /* [3] */
  }
}
.c-notifications-wrapper .c-alert:last-of-type {
  margin-bottom: 0;
}
.c-notifications-wrapper .c-alert[data-state=is-active] {
  transform: translate3d(0, -100%, 0);
  animation-name: aniSlideInDown;
  animation-duration: 250ms;
  animation-delay: 0ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.smartbanner-show .c-notifications-wrapper {
  top: 80px;
}

/* ==========================================================================
  #APPLE BADGES
  ========================================================================== */
.c-apple-badge {
  display: inline-block;
  margin: 0;
  width: 135px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 135px 40px;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}
html:lang(en) .c-apple-badge.is-new-badge {
  width: 152px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 152px 48px;
}

/* ==========================================================================
 #ANDROID BADGES
 ========================================================================== */
.c-android-badge {
  display: inline-block;
  margin: 0;
  width: 135px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 135px 40px;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}
html:lang(en) .c-android-badge.is-new-badge {
  width: 152px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 152px 48px;
}

/* ==========================================================================
  #APP PROMO
  ========================================================================== */
.c-promo {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}
.c-promo:after {
  content: "";
  display: table;
  clear: both;
}
.c-promo .o-wrapper {
  position: relative;
}

.c-promo__img {
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 68px;
  height: 78px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
@media only screen and (min-width: 960px), screen and (-webkit-min-device-pixel-ratio: 1) {
  .c-promo__img {
    background-image: url(/assets/images/iPhoneApp@1x-min.png);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .c-promo__img {
    background-image: url(/assets/images/iPhoneApp@2x-min.png);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .c-promo__img {
    background-image: url(/assets/images/iPhoneApp@3x-min.png);
  }
}
@media (min-width: 100em) {
  .c-promo__img {
    left: 0;
  }
}

.c-promo__body {
  display: block;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 86px;
}
.c-promo__body:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .c-promo__body {
    padding-top: 12px;
    padding-right: 300px;
    padding-bottom: 12px;
    padding-left: 80px;
  }
}

.c-promo__heading {
  margin-bottom: 12px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.4;
}
@media (min-width: 48em) {
  .c-promo__heading {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }
}
@media (min-width: 62em) {
  .c-promo__heading {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.3333333333;
  }
}

.c-promo__disclaimer {
  color: hsl(0, 0%, 20%);
  margin: 0;
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.25;
}

.c-promo--app {
  margin-bottom: 60px;
  box-shadow: 0 -8px 10px -5px rgba(0, 0, 0, 0.2) inset;
  background-color: whitesmoke;
}
@media (min-width: 48em) {
  .c-promo--app {
    margin-bottom: 0;
  }
}

.c-promo--app_download {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  background-color: #fafafa;
}
@media (min-width: 48em) {
  .c-promo--app_download {
    top: 50%;
    left: auto;
    right: 24px;
    width: auto;
    padding: 0;
    background-color: transparent;
    transform: translateY(-50%);
  }
}
@media (min-width: 100em) {
  .c-promo--app_download {
    right: 0px;
  }
}
.c-promo--app_download .c-apple-badge {
  margin: 0 auto;
}
@media (min-width: 48em) {
  .c-promo--app_download .c-apple-badge {
    margin: 0;
  }
}
.c-promo--app_download > .o-layout__item {
  line-height: 0;
}
@media (max-width: 47.99em) {
  .c-promo--app_download > .o-layout__item {
    width: 50%;
    padding: 0 12px;
  }
  .c-promo--app_download > .o-layout__item:first-child {
    text-align: right;
  }
}

/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/**
 * HTML

  Anchor:
    <a href="#0" class="c-btn c-btn--primary" role="button">Link</a>

  Button:
    <button class="c-btn c-btn--primary">Button</button>

  Input:
    <input type="submit" value="Submit" class="c-btn c-btn--primary" />

 *
 */
/**
 * 1. Mobile first - make our buttons block elements below tablet size screens,
 *    center align them, and make them full width up to a set max-width.
 * 2. Allow us to style box model properties.
 * 3. Line different sized buttons up a little nicer.
 * 4. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 5. Reset/normalize some styles.
 * 6. Force all button-styled elements to appear clickable.
 * 7. Give the user a nice visual indication that the button is in focus.
 * 8. Make the button `pill` shaped.
 */
.auth-content .button,
.c-btn {
  position: relative;
  display: block; /* [1] */
  width: 100%; /* [1] */
  max-width: 480px; /* [1] */
  margin-bottom: 24px; /* [1] */
  margin-right: auto; /* [1] */
  margin-left: auto; /* [1] */
  padding-top: 9px; /* [1] */
  padding-bottom: 9px; /* [1] */
  padding-left: 24px; /* [1] */
  padding-right: 24px; /* [1] */
  font: inherit; /* [4] */
  text-align: center; /* [5] */
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 1px;
  background-color: transparent;
  cursor: pointer; /* [6] */
  border: 0;
  border-radius: 420px; /* [8] */
  transition: color 250ms ease-out, background-color 250ms ease-out, box-shadow 250ms ease-out;
}
.auth-content .button, .auth-content .button:link, .auth-content .button:visited, .auth-content .button:hover, .auth-content .button:active, .auth-content .button:focus,
.c-btn,
.c-btn:link,
.c-btn:visited,
.c-btn:hover,
.c-btn:active,
.c-btn:focus {
  text-decoration: none;
}
.auth-content .button:hover, .auth-content .button:focus,
.c-btn:hover,
.c-btn:focus {
  outline: 0;
  cursor: pointer;
}
.auth-content .button:hover,
.c-btn:hover {
  box-shadow: none;
}
.auth-content .button:focus, .auth-content .button.is-input-btn:focus-within, .auth-content .button.c-btn--input-combo:focus-within,
.c-btn:focus,
.c-btn.is-input-btn:focus-within,
.c-btn.c-btn--input-combo:focus-within {
  box-shadow: 0 0 1px 3px rgba(23, 136, 195, 0.3);
}
.auth-content .button:disabled, .auth-content .button.is-disabled,
.c-btn:disabled,
.c-btn.is-disabled {
  transition: none;
}
.auth-content .button:disabled, .auth-content .button:disabled:link, .auth-content .button:disabled:visited, .auth-content .button:disabled:hover, .auth-content .button:disabled:active, .auth-content .button:disabled:focus, .auth-content .button.is-disabled, .auth-content .button.is-disabled:link, .auth-content .button.is-disabled:visited, .auth-content .button.is-disabled:hover, .auth-content .button.is-disabled:active, .auth-content .button.is-disabled:focus,
.c-btn:disabled,
.c-btn:disabled:link,
.c-btn:disabled:visited,
.c-btn:disabled:hover,
.c-btn:disabled:active,
.c-btn:disabled:focus,
.c-btn.is-disabled,
.c-btn.is-disabled:link,
.c-btn.is-disabled:visited,
.c-btn.is-disabled:hover,
.c-btn.is-disabled:active,
.c-btn.is-disabled:focus {
  cursor: default;
  background-image: none;
  border: 0;
  opacity: 0.3;
}
@media (min-width: 48em) {
  .auth-content .button,
  .c-btn {
    display: inline-block; /* [2] */
    vertical-align: middle; /* [3] */
    margin-left: 0; /* [5] */
    margin-bottom: 0; /* [5] */
    margin-right: 0; /* [5] */
    padding-top: 0; /* [1] */
    padding-bottom: 0; /* [1] */
    padding-left: 48px; /* [1] */
    padding-right: 48px; /* [1] */
    width: auto;
    max-width: unset;
    height: 42px;
    line-height: 42px;
    white-space: nowrap;
  }
}

.c-btn__input {
  display: inline-block;
  width: auto;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
}
.c-btn__input:focus {
  outline: 1px dotted rgba(255, 255, 255, 0.6);
  outline-offset: -4px;
}

/* Style variants
   ========================================================================== */
.auth-content .button.button-primary,
.c-btn--primary {
  background-color: #1788c3;
}
.auth-content .button.button-primary, .auth-content .button.button-primary:link, .auth-content .button.button-primary:visited, .auth-content .button.button-primary:hover, .auth-content .button.button-primary:active, .auth-content .button.button-primary:focus,
.c-btn--primary,
.c-btn--primary:link,
.c-btn--primary:visited,
.c-btn--primary:hover,
.c-btn--primary:active,
.c-btn--primary:focus {
  color: hsl(0, 0%, 100%);
}
.auth-content .button.button-primary:hover, .auth-content .button.button-primary:focus,
.c-btn--primary:hover,
.c-btn--primary:focus {
  background-color: #3392CD;
}
.auth-content .button.button-primary:active,
.c-btn--primary:active {
  background-color: #0077c0;
}
.auth-content .button.button-primary:disabled, .auth-content .button.button-primary:disabled:link, .auth-content .button.button-primary:disabled:visited, .auth-content .button.button-primary:disabled:hover, .auth-content .button.button-primary:disabled:active, .auth-content .button.button-primary:disabled:focus, .auth-content .button.button-primary.is-disabled, .auth-content .button.button-primary.is-disabled:link, .auth-content .button.button-primary.is-disabled:visited, .auth-content .button.button-primary.is-disabled:hover, .auth-content .button.button-primary.is-disabled:active, .auth-content .button.button-primary.is-disabled:focus,
.c-btn--primary:disabled,
.c-btn--primary:disabled:link,
.c-btn--primary:disabled:visited,
.c-btn--primary:disabled:hover,
.c-btn--primary:disabled:active,
.c-btn--primary:disabled:focus,
.c-btn--primary.is-disabled,
.c-btn--primary.is-disabled:link,
.c-btn--primary.is-disabled:visited,
.c-btn--primary.is-disabled:hover,
.c-btn--primary.is-disabled:active,
.c-btn--primary.is-disabled:focus {
  background-color: #1788c3;
}
.auth-content .button.button-primary::after,
.c-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 420px;
  box-shadow: 0 0 0 3px rgba(23, 136, 195, 0.28);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  box-sizing: content-box;
  pointer-events: none;
  will-change: opacity;
}

.o-form-button-bar.focused-input .button {
  outline: none;
}
.o-form-button-bar.focused-input .button::after {
  opacity: 1;
  transform: scale(1);
}

.c-btn--secondary {
  border-width: 1px;
  border-style: solid;
  border-color: #1788c3;
  background-color: transparent;
}
.c-btn--secondary::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  padding: 1px;
  border-radius: 420px;
  box-shadow: inset 0 0 0 2px #1788c3;
  opacity: 0;
  transform: scale(1);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  box-sizing: content-box;
  pointer-events: none;
  will-change: opacity;
}
.c-btn--secondary::after {
  border-color: rgba(23, 136, 195, 0.28);
}
.c-btn--secondary, .c-btn--secondary:link, .c-btn--secondary:visited, .c-btn--secondary:hover, .c-btn--secondary:active, .c-btn--secondary:focus {
  text-decoration: none;
  color: #1788c3;
}
.c-btn--secondary:hover, .c-btn--secondary:focus {
  background-color: transparent;
}
.c-btn--secondary:active {
  background-color: transparent;
}
.c-btn--secondary:hover {
  box-shadow: 0 0 0 1px #3392CD inset;
}
.c-btn--secondary:disabled, .c-btn--secondary:disabled:link, .c-btn--secondary:disabled:visited, .c-btn--secondary:disabled:hover, .c-btn--secondary:disabled:active, .c-btn--secondary:disabled:focus, .c-btn--secondary.is-disabled, .c-btn--secondary.is-disabled:link, .c-btn--secondary.is-disabled:visited, .c-btn--secondary.is-disabled:hover, .c-btn--secondary.is-disabled:active, .c-btn--secondary.is-disabled:focus {
  border-width: 1px;
  border-style: solid;
  border-color: #1788c3;
  background-color: transparent;
}
.c-btn--secondary:disabled::before, .c-btn--secondary:disabled:link::before, .c-btn--secondary:disabled:visited::before, .c-btn--secondary:disabled:hover::before, .c-btn--secondary:disabled:active::before, .c-btn--secondary:disabled:focus::before, .c-btn--secondary.is-disabled::before, .c-btn--secondary.is-disabled:link::before, .c-btn--secondary.is-disabled:visited::before, .c-btn--secondary.is-disabled:hover::before, .c-btn--secondary.is-disabled:active::before, .c-btn--secondary.is-disabled:focus::before {
  display: none;
}
@media (max-width: 47.99em) {
  .c-btn--secondary {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media (min-width: 48em) {
  .c-btn--secondary {
    line-height: 40px;
  }
}

.c-btn--tertiary {
  border-width: 1px;
  border-style: solid;
  border-color: #424243;
  background-color: transparent;
}
.c-btn--tertiary::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  padding: 1px;
  border-radius: 420px;
  box-shadow: inset 0 0 0 2px #424243;
  opacity: 0;
  transform: scale(1);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  box-sizing: content-box;
  pointer-events: none;
  will-change: opacity;
}
.c-btn--tertiary::after {
  border-color: rgba(66, 66, 67, 0.28);
}
.c-btn--tertiary, .c-btn--tertiary:link, .c-btn--tertiary:visited, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus {
  text-decoration: none;
  color: #424243;
}
.c-btn--tertiary:hover, .c-btn--tertiary:focus {
  background-color: transparent;
}
.c-btn--tertiary:active {
  background-color: transparent;
}
.c-btn--tertiary:disabled, .c-btn--tertiary:disabled:link, .c-btn--tertiary:disabled:visited, .c-btn--tertiary:disabled:hover, .c-btn--tertiary:disabled:active, .c-btn--tertiary:disabled:focus, .c-btn--tertiary.is-disabled, .c-btn--tertiary.is-disabled:link, .c-btn--tertiary.is-disabled:visited, .c-btn--tertiary.is-disabled:hover, .c-btn--tertiary.is-disabled:active, .c-btn--tertiary.is-disabled:focus {
  border-width: 1px;
  border-style: solid;
  border-color: #424243;
  background-color: transparent;
}
.c-btn--tertiary:disabled::before, .c-btn--tertiary:disabled:link::before, .c-btn--tertiary:disabled:visited::before, .c-btn--tertiary:disabled:hover::before, .c-btn--tertiary:disabled:active::before, .c-btn--tertiary:disabled:focus::before, .c-btn--tertiary.is-disabled::before, .c-btn--tertiary.is-disabled:link::before, .c-btn--tertiary.is-disabled:visited::before, .c-btn--tertiary.is-disabled:hover::before, .c-btn--tertiary.is-disabled:active::before, .c-btn--tertiary.is-disabled:focus::before {
  display: none;
}
.c-btn--tertiary:hover {
  box-shadow: 0 0 0 1px #424243 inset;
}
.c-btn--tertiary:focus, .c-btn--tertiary.is-input-btn:focus-within, .c-btn--tertiary.c-btn--input-combo:focus-within {
  box-shadow: 0 0 1px 3px rgba(66, 66, 67, 0.3);
}
@media (max-width: 47.99em) {
  .c-btn--tertiary {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media (min-width: 48em) {
  .c-btn--tertiary {
    line-height: 40px;
  }
}

.c-btn--text {
  width: auto;
  letter-spacing: initial;
  font-weight: 600;
  border-radius: 0;
}
.c-btn--text::after {
  content: "";
  position: absolute;
  top: auto;
  left: 0;
  right: auto;
  bottom: 3px;
  width: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(23, 136, 195, 0.28);
  border-radius: 0;
  opacity: 0;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.c-btn--text, .c-btn--text:link, .c-btn--text:visited, .c-btn--text:hover, .c-btn--text:active, .c-btn--text:focus {
  color: #1788c3;
}
.c-btn--text:hover, .c-btn--text:focus {
  color: #2d80b4;
}
.c-btn--text.is-inline, .c-btn--text.is-back-btn {
  display: inline-block;
  margin: 0;
}
.c-btn--text.is-inline {
  height: auto;
  line-height: inherit;
}

.c-btn--skip-to-content {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  transform: translate(-50%, -300%);
  transition: transform 0.3s;
  z-index: 100;
}
@media (max-width: 61.99em) {
  .c-btn--skip-to-content {
    display: none;
  }
}
.c-btn--skip-to-content:focus {
  transform: translate(-50%, 24px);
}

/**
 * An icon only button butted up to a form input, like a search control.
 *
 * 1. Reset inherited `c-btn` styles that will mess up the combo button.
 * 2. Default button width that fits an icon.
 * 3. Match the height of input fields.
 * 4. Hide any button text that might be there for screen-readers etc.
 *    put it in a `span` tag.
 * HTML

    <div class="c-form-field--btn-combo">
      <input type="text" name="text" value="" class="c-input c-input--btn-combo" />

      <div class="c-btn c-btn--primary c-btn--input-combo">
          <svg class="c-svg c-svg--search-24">
            <use xlink:href="#c-svg--search-24"></use>
          </svg>
          <input type="submit" value="Search" class="c-btn__input" />
      </div>
    </div>

 */
.c-btn--input-combo {
  display: inline-block; /* [1] */
  margin: 0; /* [1] */
  width: 40px; /* [2] */
  height: 42px; /* [3] */
  padding: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  vertical-align: top;
}
.c-btn--input-combo span {
  display: none;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  /* [4] */
}
.c-btn--input-combo .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}
.c-btn--input-combo .c-btn__input {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.c-btn--input-combo:hover .c-svg {
  color: currentColor;
}

/* Inverse buttons
   ========================================================================== */
/**
 * Inverse buttons are used on dark backgrounds.
 */
.c-btn--inverse.c-btn--primary, .c-btn--inverse.c-btn--primary:link, .c-btn--inverse.c-btn--primary:visited {
  color: #1788c3;
  background-color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--primary:hover, .c-btn--inverse.c-btn--primary:focus {
  color: #3392CD;
  background-color: #e6e6e7;
}
.c-btn--inverse.c-btn--primary:active {
  color: #0077c0;
  background-color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--primary:disabled, .c-btn--inverse.c-btn--primary:disabled:link, .c-btn--inverse.c-btn--primary:disabled:visited, .c-btn--inverse.c-btn--primary:disabled:hover, .c-btn--inverse.c-btn--primary:disabled:active, .c-btn--inverse.c-btn--primary:disabled:focus, .c-btn--inverse.c-btn--primary.is-disabled, .c-btn--inverse.c-btn--primary.is-disabled:link, .c-btn--inverse.c-btn--primary.is-disabled:visited, .c-btn--inverse.c-btn--primary.is-disabled:hover, .c-btn--inverse.c-btn--primary.is-disabled:active, .c-btn--inverse.c-btn--primary.is-disabled:focus {
  background-color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--secondary::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  padding: 1px;
  border-radius: 420px;
  box-shadow: inset 0 0 0 2px hsl(0, 0%, 100%);
  opacity: 0;
  transform: scale(1);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  box-sizing: content-box;
  pointer-events: none;
  will-change: opacity;
}
.c-btn--inverse.c-btn--secondary, .c-btn--inverse.c-btn--secondary:link, .c-btn--inverse.c-btn--secondary:visited {
  color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--secondary:hover, .c-btn--inverse.c-btn--secondary:active, .c-btn--inverse.c-btn--secondary:focus {
  color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--secondary:hover::before, .c-btn--inverse.c-btn--secondary:active::before, .c-btn--inverse.c-btn--secondary:focus::before {
  opacity: 1;
}
.c-btn--inverse.c-btn--secondary:disabled, .c-btn--inverse.c-btn--secondary:disabled:link, .c-btn--inverse.c-btn--secondary:disabled:visited, .c-btn--inverse.c-btn--secondary:disabled:hover, .c-btn--inverse.c-btn--secondary:disabled:active, .c-btn--inverse.c-btn--secondary:disabled:focus, .c-btn--inverse.c-btn--secondary.is-disabled, .c-btn--inverse.c-btn--secondary.is-disabled:link, .c-btn--inverse.c-btn--secondary.is-disabled:visited, .c-btn--inverse.c-btn--secondary.is-disabled:hover, .c-btn--inverse.c-btn--secondary.is-disabled:active, .c-btn--inverse.c-btn--secondary.is-disabled:focus {
  color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--text, .c-btn--inverse.c-btn--text:link, .c-btn--inverse.c-btn--text:visited {
  color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--text:hover, .c-btn--inverse.c-btn--text:active, .c-btn--inverse.c-btn--text:focus {
  color: hsl(0, 0%, 100%);
}
.c-btn--inverse.c-btn--text:disabled, .c-btn--inverse.c-btn--text:disabled:link, .c-btn--inverse.c-btn--text:disabled:visited, .c-btn--inverse.c-btn--text:disabled:hover, .c-btn--inverse.c-btn--text:disabled:active, .c-btn--inverse.c-btn--text:disabled:focus, .c-btn--inverse.c-btn--text.is-disabled, .c-btn--inverse.c-btn--text.is-disabled:link, .c-btn--inverse.c-btn--text.is-disabled:visited, .c-btn--inverse.c-btn--text.is-disabled:hover, .c-btn--inverse.c-btn--text.is-disabled:active, .c-btn--inverse.c-btn--text.is-disabled:focus {
  color: hsl(0, 0%, 100%);
}

/* Buttons with an icon
   ========================================================================== */
/**
 * 1. Set pointer-events to none to fix issue with the parent container's
 *    :pseudo or positioned elements interfering with the submmit action of the
 *    input button.
 * 2. Reset pointer-events on submit button.
 * 3. Icons are placed on the right by default, we need to add extra padding to
 *    account for the positioning of the icon.
 * 4. We have to do some negative margin trickery so our input button looks
 *    and interacts like any other button.
 * 5. Then re-add the padding to the input element.
 */
.c-btn.is-input, .c-btn.is-input:hover, .c-btn.is-input:active,
.c-btn.is-input .c-svg {
  pointer-events: none; /* [1] */
}
.c-btn:not(.c-btn--text).has-icon .c-svg, .c-btn:not(.c-btn--text).has-icon-left .c-svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: currentColor;
  background-color: transparent;
}
.c-btn:not(.c-btn--text).has-icon .c-btn__input, .c-btn:not(.c-btn--text).has-icon-left .c-btn__input {
  height: 42px;
  pointer-events: all; /* [2] */
}
.c-btn:not(.c-btn--text).has-icon {
  padding-right: 48px; /* [3] */
}
.c-btn:not(.c-btn--text).has-icon .c-svg {
  right: 48px; /* [3] */
}
.c-btn:not(.c-btn--text).has-icon .c-btn__input {
  margin-left: -48px; /* [4] */
  margin-right: -48px; /* [4] */
  padding-left: 48px; /* [5] */
  padding-right: 48px; /* [5] */
}
.c-btn:not(.c-btn--text).has-icon-left {
  padding-left: 48px; /* [3] */
}
.c-btn:not(.c-btn--text).has-icon-left .c-svg {
  left: 48px; /* [3] */
}
.c-btn:not(.c-btn--text).has-icon-left .c-btn__input {
  margin-left: -48px; /* [4] */
  margin-right: -48px; /* [4] */
  padding-left: 48px; /* [5] */
  padding-right: 48px; /* [5] */
}
.c-btn.c-btn--text {
  padding: 0;
}
.c-btn.c-btn--text.has-icon .c-svg, .c-btn.c-btn--text.has-icon-left .c-svg {
  top: 0.125em;
}
.c-btn.c-btn--text.has-icon .c-svg {
  margin-left: 6px;
}
.c-btn.c-btn--text.has-icon-left .c-svg {
  margin-right: 6px;
}

/* Size variants
   ========================================================================== */
.c-btn--auto {
  width: auto;
  min-width: unset;
  max-width: unset;
}

.c-btn--small {
  height: 34px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 34px;
}

.c-btn--large {
  padding: 24px 48px;
}

.c-btn--small.c-btn--has-icon,
.c-btn--large.c-btn--has-icon {
  padding-left: 48px;
}
.c-btn--small.c-btn--has-icon-right,
.c-btn--large.c-btn--has-icon-right {
  padding-right: 48px;
}

@media (min-width: 48em) {
  .c-btn--min-width {
    min-width: 186px;
  }
}

@media (min-width: 48em) {
  .c-btn--short {
    width: 120px;
  }
}

@media (min-width: 48em) {
  .c-btn--wide {
    width: 240px;
  }
}

.c-btn--full {
  width: 100%;
}

.c-btn--tight {
  padding-left: 24px;
  padding-right: 24px;
}

.c-btn-app-dl {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.c-btn-app-dl:hover {
  opacity: 0.85;
}
@media (max-width: 47.99em) {
  .c-btn-app-dl {
    margin-bottom: 24px;
  }
}
.c-btn-app-dl .c-svg.c-svg--app-store-asia {
  width: 129.70071px;
  height: 40px;
}

/* ==========================================================================
  #CARDS
  ========================================================================== */
/**
 * Content tiles or lures.
 *
 * HTML

    Simple:
      <a href="#0" class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__heading">A clean title</h3>
          <p class="c-card__text">This is going to be card copy that will hold minimal amount of info.</p>
        </div>
      </a>

      <a href="#0" class="c-card c-card--vertical">
        <div class="c-card__img">
          <img ... />
        </div>
        <div class="c-card__body">
          <h3 class="c-card__heading">A clean title</h3>
          <p class="c-card__text">This is going to be card copy that will hold minimal amount of info.</p>
        </div>
      </a>

    Complex:
      <div class="c-card c-card--vertical js-eqHeight">
        <div class="c-card__body">
          <h3 class="c-card__heading">A clean title</h3>
          <p class="c-card__text">This is going to be card copy that will hold minimal amount of info.</p>
        </div>
        <div class="c-card__footer">
          <a href="#0" class="c-btn c-btn--primary">Button</a>
        </div>
      </div>

      <a href="#0" class="c-card c-card--media js-eqHeight">
        <div class="c-card__img">
          <img src="path/to/image.jpg" alt="postcard" />
        </div>
        <div class="c-card__body">
          <h3 class="c-card__heading">A nice title</h3>
          <p class="c-card__text">This is a short, punchy sentence.</p>
        </div>
      </a>
 *
 */
/**
 * 1. Cards are clickable components so we need to use an anchor tag as the
 *    container element.
 *    However, if the card has a text link or button, use a div for the container
 *    and the `.c-card__footer` element for the link or button.
 * 2. Make sure it's a block element so it fills the width of the column or give
 *    it a width.
 * 3. Override any default link styles.
 */
.c-card {
  display: block; /* [2] */
  margin-bottom: 24px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0px 2px 5px #e6e6e7;
  transition: box-shadow 250ms ease-out;
  border-radius: 6px;
  overflow: hidden;
  /* [1] */
}
.c-card:after {
  content: "";
  display: table;
  clear: both;
}
a.c-card:link, a.c-card:visited, a.c-card:hover, a.c-card:active, .c-card:link, .c-card:visited, .c-card:hover, .c-card:active {
  color: #787878; /* [3] */
  text-decoration: none; /* [3] */
}
a.c-card:hover, .c-card:hover {
  will-change: box-shadow;
  text-decoration: none; /* [3] */
  box-shadow: 0px 4px 15px #b7b7b8;
}

@media (min-width: 48em) {
  .c-card {
    margin-bottom: 24px;
  }
}

.c-card__img {
  display: block;
  overflow: hidden;
}
.c-card__img .c-svg {
  top: 0;
  color: #d9d8d5;
}

.c-card__body {
  display: block;
  padding: 24px;
}
.c-card__body,
.c-card__body > :last-child {
  margin-bottom: 0;
}

.c-card__heading {
  margin-bottom: 0;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
  color: #424243;
}

.c-card__text {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: #787878;
}

/**
 * When the card itself is not clickable, add this container
 * after the body container and place your link or button here.
 */
.c-card__footer {
  display: flex;
  padding: 24px;
  align-items: flex-end;
}
.c-card__footer .c-btn {
  margin-bottom: 0;
}

/* Style variants
   ========================================================================== */
.c-card--equipment {
  margin-bottom: 0;
}
.c-card--equipment, .c-card--equipment:hover {
  cursor: default;
  box-shadow: none;
  transition: none !important;
  opacity: 1 !important;
}
@media (min-width: 75em) {
  .c-card--equipment .c-card__img {
    min-height: 166px;
  }
}
.c-card--equipment .c-card__body,
.c-card--equipment .c-card__footer {
  text-align: center;
}

.c-card--library {
  /**
   * Setting a min-height since we can't do equal heights
   */
}
@media (min-width: 48em) {
  .c-card--library {
    min-height: 271px;
  }
}
@media (min-width: 62em) {
  .c-card--library {
    min-height: 266px;
  }
}
@media (min-width: 75em) {
  .c-card--library {
    min-height: 276px;
  }
}
@media (min-width: 100em) {
  .c-card--library {
    min-height: 322px;
  }
}
.o-section--tips .o-carousel__item .c-card--library {
  margin-left: 24px;
  margin-right: 24px;
  min-height: 313px;
}
@media (min-width: 48em) {
  .o-section--tips .o-carousel__item .c-card--library {
    margin-left: 0;
    margin-right: 0;
    min-height: 268px;
  }
}
@media (min-width: 62em) {
  .o-section--tips .o-carousel__item .c-card--library {
    min-height: 247px;
  }
}
@media (min-width: 75em) {
  .o-section--tips .o-carousel__item .c-card--library {
    min-height: 268px;
  }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .o-section--tips .o-carousel__item .c-card--library .c-card__heading {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.25;
  }
}

.c-card--empty {
  color: #6d6d6d;
  background-color: #f6f6f6 !important;
  text-shadow: 0px 1px 0px hsl(0, 0%, 100%);
  box-shadow: none;
  font-weight: 600;
}
.c-card--empty:hover {
  will-change: unset;
  cursor: default;
  box-shadow: none;
  opacity: 1;
}
.c-card--empty:focus {
  outline: none;
}

.c-card--img-only .c-card__img {
  padding: 2px;
  background-color: #6d6d6d;
}
.c-card--img-only .c-card__body {
  text-align: center;
}

/* Card variants
   ========================================================================== */
.c-card--has-icon .c-card__img {
  padding: 24px;
  float: left;
}
.c-card--has-icon .c-card__img .c-svg {
  width: 32px;
  height: 32px;
}
.c-card--has-icon .c-card__body {
  padding-left: 80px;
}

/**
 * Stack the contents of the card vertically. The content will be vertically
 * and horizontally centered. Can be used in conjunction with the
 * `.c-card--has-icon` modifier.
 */
.c-card--vertical { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.c-card--vertical .c-card__img {
  padding-top: 24px;
  padding-bottom: 0;
}
.c-card--vertical .c-card__img .c-svg {
  margin: 0 auto;
  width: 50px;
  height: 50px;
}
.c-card--vertical .c-card__body {
  display: flex;
  width: 100%;
  flex: 1 0 auto;
  justify-content: center;
  flex-direction: column;
  padding-left: 48px;
  padding-right: 48px;
  text-align: center;
}

/**
 * Card with a large image.
 * 1. Create a `window` that the image will scaled within.
 * 2. Container that will allow to crop the image as it's scaled
 *    responsively.
 * 3. Vertically and horizontally center the image within
 *    the cropped view.
 */
.c-card--media .c-card__img {
  position: relative;
  overflow: hidden;
  /* [1] */
}
.c-card--media .c-card__img:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 64%;
}
.c-card--media .c-card__img .c-icon-btn--play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.c-card--media .c-card__img .c-icon-btn--play .c-svg {
  color: hsl(0, 0%, 100%);
}
.c-card--media .c-card__img:not(.is-video) .c-icon-btn--play {
  display: none;
}
.c-card--media .c-card__heading {
  margin-bottom: 6px;
}
.c-card--media.c-card--empty > .c-card__img .c-svg {
  height: 80px;
}
.c-card--media.c-card--empty > .c-card__body {
  text-align: center;
}

/* [2] */
.c-card__media-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* [3] */
}
.c-card__media-item > img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: auto;
  height: 100%;
  max-width: initial;
}
.c-card__media-item.is-device-img > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}
.c-card__media-item > .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: auto;
  height: 100%;
  max-width: initial;
}

/* ==========================================================================
   #DIRECTIONAL NAV
   ========================================================================== */
/**
 * Previous/Next style navigation buttons (chevron icon).

    <   MONTH   >

 * HTML:

    <div class="c-directional-nav c-directional-nav--month js-dir-nav">
      <span class="c-directional-nav__label">MONTH</span>

      <a href="#prev" id="js-prevMonth" class="c-directional-nav__arrow nav--prev js-dir-nav-btn">
        <svg class="c-svg c-svg--chevron-left-24"><use xlink:href="#c-svg--chevron-left-24"></use></svg>
      </a>
      <a href="#next" id="js-nextMonth" class="c-directional-nav__arrow nav--next is-disabled js-dir-nav-btn">
        <svg class="c-svg c-svg--chevron-right-24"><use xlink:href="#c-svg--chevron-right-24"></use></svg>
      </a>
    </div>

 *
 */
.c-directional-nav {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  width: auto;
  text-align: center;
}
@media (min-width: 48em) {
  .c-directional-nav {
    animation: aniStayHidden 1s, aniFadeInDown 250ms 1s 1 ease-out;
  }
}

.c-directional-nav__label {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 46px;
  font-weight: 600;
}

.c-directional-nav__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  text-align: center;
  padding: 0;
  appearance: none;
  border: 0;
  background-color: transparent;
}
.c-directional-nav__arrow .c-svg {
  display: block;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition-duration: 0.3s;
  transition-property: transform, color;
  transition-timing-function: ease-out;
  color: #1788c3;
}
.c-directional-nav__arrow.nav--prev {
  left: -40px;
}
.c-directional-nav__arrow.nav--next {
  right: -40px;
}
.c-directional-nav__arrow:hover {
  text-decoration: none;
}
@media (min-width: 62em) {
  .c-directional-nav__arrow:hover.nav--prev .c-svg {
    transform: translateX(-20%);
  }
}
@media (min-width: 62em) {
  .c-directional-nav__arrow:hover.nav--next .c-svg {
    transform: translateX(20%);
  }
}
.c-directional-nav__arrow.is-disabled, .c-directional-nav__arrow.is-disabled:hover {
  cursor: default;
  text-decoration: none;
  background-color: transparent;
}
.c-directional-nav__arrow.is-disabled .c-svg, .c-directional-nav__arrow.is-disabled:hover .c-svg {
  color: #b7b7b8;
  transition: none;
  transform: translateX(0);
}

/* Variations
========================================================================== */
.c-directional-nav--month {
  min-width: 222px;
}

/* ==========================================================================
  #HOME
  ========================================================================== */
/* Login form
   ========================================================================== */
.c-login-form {
  display: block;
}
.c-login-form .c-btn {
  margin-bottom: 12px;
}
.c-login-form .c-form-field {
  margin-bottom: 24px;
}

.c-login-form_header {
  text-align: center;
}
@media (min-width: 48em) {
  .c-login-form_header {
    text-align: left;
  }
}
.c-login-form_header a {
  display: block;
}
.c-login-form_header a:visited {
  color: #1788c3 !important;
}
@media (min-width: 48em) {
  .c-login-form_header a {
    display: inline-block;
  }
}

/* myAir Features section of the home page
   ========================================================================== */
/**
 * 1. So stupid IE won't add extra space to the `flexbody__page` because it 
 *    can't deal with flexbody and 100% width images.
 */
.c-features {
  display: block;
  margin: 0 auto;
}
@media (min-width: 62em) {
  .c-features {
    width: 80%;
  }
}

.c-features__item {
  text-align: center;
}
.c-features__item .c-heading-main {
  margin-bottom: 12px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.1;
}
@media (min-width: 62em) {
  .c-features__item .c-heading-main {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.1;
  }
}

.c-features__img {
  position: relative;
  margin-bottom: 12px;
  line-height: 0;
}
.c-features__img img {
  width: 100%;
  max-width: 400px; /* [1] */
  height: auto;
}

.c-features__demo-dial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 278px;
  height: 278px;
  z-index: 10;
}
@media (min-width: 48em) {
  .c-features__demo-dial {
    width: 186px;
    height: 186px;
  }
}
@media (min-width: 75em) {
  .c-features__demo-dial {
    width: 278px;
    height: 278px;
  }
}
.c-features__demo-dial .demo__myair,
.c-features__demo-dial .demo__points {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .c-features__demo-dial .demo__myair,
  .c-features__demo-dial .demo__points {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5;
  }
}
.c-features__demo-dial .demo__myair {
  top: 48px;
  margin-bottom: 0;
  color: #424243;
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .c-features__demo-dial .demo__myair {
    top: 30px;
  }
}
.c-features__demo-dial .demo__points {
  top: 200px;
  padding-top: 6px;
  margin-bottom: 0;
  color: #6d6d6d;
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .c-features__demo-dial .demo__points {
    top: 128px;
  }
}
.c-features__demo-dial .demo__points:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  border-top: 1px solid #6d6d6d;
  content: "";
  height: 1px;
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .c-features__demo-dial .demo__points:before {
    width: 73px;
  }
}

.c-features__text {
  text-align: center;
}

/* MISC
   ========================================================================== */
.myair-usage-disclaimer--non-us {
  margin-top: 48px;
  text-align: center;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1.6363636364;
}
.myair-usage-disclaimer--non-us,
.myair-usage-disclaimer--non-us > :last-child {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .c-invite-text {
    text-align: center;
  }
  .c-invite-text ol {
    width: 300px;
    margin: 0 auto 48px auto;
    text-align: left;
  }
}

 .c-hero {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0; /* [1] */
  background-position: 50% 0; /* [2] */
  background-repeat: no-repeat; /* [2] */
  background-size: cover; /* [2] */
}
 .c-hero.o-carousel__item {
  width: auto;
}
 .c-hero > .o-wrapper {
  display: table; /* [3] */
  width: 100%; /* [3] */
}

/**
 * 1. Allow us to vertically align the body content within our hero area.
 *    Using flex at tablet screen size because stupid IE can't position play button
 *    absolutely if container is table-cell.
 * 2. Default align the content vertically to the middle of the hero element.
 * 3. We have to explicitly set the height of our hero for the vertical
 *    alignment to work.
 */
/**
 * 1. Allow us to vertically align the body content within our hero area.
 * 2. Default align the content vertically to the middle of the hero element.
 */
.c-hero__wrapper {
  position: relative; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  /* [1] */
  width: 100%;
  align-items: center; /* [2] */
}

.c-hero__heading {
  font-size: inherit;
  font-weight: inherit;
}

/* Vertical alignment modifiers.
   ========================================================================== */
/**
 * Align content to the top of the container.
 */
.c-hero--top > .c-hero__wrapper {
  vertical-align: top;
}

/**
 * Align content to the bottom of the container.
 */
.c-hero--bottom > .c-hero__wrapper {
  vertical-align: bottom;
}

/* Hero variants
   ========================================================================== */
/**
 * Custom hero layouts. Below are examples of a carousel style hero, and a
 * hero mastehead with a callout style block of content.
 *
 * 1. Some height setting craziness for all our mobile screen sizes and
 *    orientations.
 * 2. Set some defaults values for background image properties.
 */
.c-hero--carousel {
  /**
   * Set the background image for each slide in the carousel.
   * After optimizing your images for the web with PhotoShop, use a
   * compression tool to further reduce the file size of your images.
   * Such as Optimizzila: http://optimizilla.com/
   *
   * 1. Mobile first image.
   */
  /*.slide-2,
  &.slide-2 {
      background-image: url(/assets/images/hero-appdl-mobile-min.jpg);

      @include mq($from: tablet) {
          background-image: url(/assets/images/hero-appdl-desktop-min.jpg);
      }

  }*/
}
.c-hero--carousel,
.c-hero--carousel .o-carousel__item,
.c-hero--carousel .c-hero__wrapper {
  height: 480px; /* [1] */
}
@media (min-width: 100em) {
  .c-hero--carousel,
  .c-hero--carousel .o-carousel__item,
  .c-hero--carousel .c-hero__wrapper {
    height: 540px; /* [1] */
  }
}
.c-hero--carousel .slide-1, .c-hero--carousel.slide-1 {
  background-image: url(/assets/images/hero-home-mobile-min.jpg); /* [1] */
}
@media (min-width: 48em) {
  .c-hero--carousel .slide-1, .c-hero--carousel.slide-1 {
    background-image: url(/assets/images/hero-home-desktop-min.jpg);
  }
}
.c-hero--carousel .slide-2, .c-hero--carousel.slide-2 {
  background-image: url(/assets/images/hero-manInKitchen-mobile-min.jpg); /* [1] */
}
@media (min-width: 48em) {
  .c-hero--carousel .slide-2, .c-hero--carousel.slide-2 {
    background-image: url(/assets/images/hero-manInKitchen-desktop-min.jpg);
  }
}
.c-hero--carousel .c-icon-btn.c-icon-btn--play {
  display: block;
  margin: 24px auto 48px;
}
@media (min-width: 48em) {
  .c-hero--carousel .c-icon-btn.c-icon-btn--play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 80px;
    height: 80px;
  }
}
.c-hero--carousel .o-box {
  padding: 0;
  padding-top: 24px;
  padding-bottom: 24px;
}
.c-hero--carousel .o-box sup {
  top: -1em;
  font-size: 36%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.c-hero--carousel .o-box p {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(0, 0%, 100%);
}
@media (min-width: 48em) {
  .c-hero--carousel .o-box p {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.5;
  }
}
@media (min-width: 48em) {
  .c-hero--carousel .o-box p {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}
@media (min-width: 62em) {
  .c-hero--carousel .o-box p {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.5;
  }
}
.c-hero--carousel .o-box p.c-promo__disclaimer {
  margin: 0;
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.25;
}
.c-hero--carousel .o-box a {
  transition: opacity 250ms ease-out;
  cursor: pointer;
}
.c-hero--carousel .o-box a, .c-hero--carousel .o-box a:link, .c-hero--carousel .o-box a:visited, .c-hero--carousel .o-box a:hover, .c-hero--carousel .o-box a:active {
  color: hsl(0, 0%, 100%);
  text-decoration: none;
}
.c-hero--carousel .o-box a:hover {
  opacity: 0.8;
}
.c-hero--carousel .o-box .c-app-badges {
  display: block;
  margin-left: -24px;
  margin-right: -24px;
}
.c-hero--carousel .o-box .c-app-badges > .o-layout__item {
  width: 50%;
  padding: 0 6px;
}
.c-hero--carousel .o-box .c-app-badges > .o-layout__item:first-child {
  text-align: right;
}
@media (min-width: 48em) {
  .c-hero--carousel .o-box .c-app-badges > .o-layout__item {
    margin-bottom: 12px;
  }
}
@media (min-width: 48em) {
  .c-hero--carousel .o-box .c-app-badges {
    margin-left: 0;
    margin-right: 0;
  }
}
.c-hero--carousel .c-hero__inset {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 230px;
  height: 262px;
  margin-left: -115px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
  .c-hero--carousel .c-hero__inset {
    background-image: url(/assets/images/iPhoneApp@1x-min.png);
  }
}
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .c-hero--carousel .c-hero__inset {
    background-image: url(/assets/images/iPhoneApp@2x-min.png);
  }
}
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 3) {
  .c-hero--carousel .c-hero__inset {
    background-image: url(/assets/images/iPhoneApp@3x-min.png);
  }
}
@media (min-width: 48em) {
  .c-hero--carousel .c-hero__inset {
    display: none;
  }
}

.c-hero__heading {
  color: hsl(0, 0%, 100%);
}
.slide-1 .c-hero__heading {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
  margin-bottom: 12px;
}
@media (min-width: 48em) {
  .slide-1 .c-hero__heading {
    font-size: 32px;
    font-size: 2rem;
    line-height: 1.3125;
    margin-bottom: 12px;
  }
}
@media (min-width: 48em) {
  .slide-1 .c-hero__heading {
    font-size: 42px;
    font-size: 2.625rem;
    line-height: 1.1428571429;
    margin-bottom: 0.5em;
  }
}
.slide-2 .c-hero__heading {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  margin-bottom: 34px;
  text-align: center;
}
@media (min-width: 48em) {
  .slide-2 .c-hero__heading {
    font-size: 34px;
    font-size: 2.125rem;
    line-height: 1.2352941176;
    margin-bottom: 48px;
  }
}
@media (min-width: 62em) {
  .slide-2 .c-hero__heading {
    margin-bottom: 2em;
    text-align: left;
  }
}
.is-EU .slide-2 .c-hero__heading {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 24px;
  text-align: center;
}
@media (min-width: 48em) {
  .is-EU .slide-2 .c-hero__heading {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.2857142857;
    margin-bottom: 2em;
    text-align: left;
  }
}

@media (max-width: 61.99em) {
  .slide-2 .c-hero__cta {
    text-align: center;
  }
}

.c-hero__text-btn {
  transition: opacity 250ms ease-out;
  cursor: pointer;
}
.c-hero__text-btn, .c-hero__text-btn:link, .c-hero__text-btn:visited, .c-hero__text-btn:hover, .c-hero__text-btn:active {
  color: hsl(0, 0%, 100%);
  text-decoration: none;
}
.c-hero__text-btn:hover {
  opacity: 0.8;
}

.c-hero-parallax {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.c-hero-parallax__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 0;
}

/**
 * A hero banner with a callout style block of content.
 *
 * 1. Mobile first backgorund image.
 */
.c-hero--library {
  height: 186px;
  background-image: url(/assets/images/hero/hero-sleeplibrary-mobile.min.jpg); /* [1] */
  background-position: 50% 100%;
  background-size: cover;
}
@media (min-width: 48em) {
  .c-hero--library {
    height: 250px;
  }
}
@media (min-width: 48em) {
  .c-hero--library {
    background-image: url(/assets/images/hero/hero-sleeplibrary.min.jpg);
  }
}
@media (min-width: 100em) {
  .c-hero--library {
    height: 300px;
  }
}

.c-hero--welcome .c-hero-parallax {
  height: 130px;
}
@media (min-width: 25.875em) {
  .c-hero--welcome .c-hero-parallax {
    height: 180px;
  }
}
@media (min-width: 48em) {
  .c-hero--welcome .c-hero-parallax {
    height: 260px;
  }
}
.c-hero--welcome .c-hero-parallax__img {
  height: 260px;
  transform: translateY(-65px);
  background-image: url(/assets/images/hero-activation-mobile-min.jpg);
  background-size: cover;
}
@media (min-width: 25.875em) {
  .c-hero--welcome .c-hero-parallax__img {
    height: 320px;
    transform: translateY(-80px);
  }
}
@media (min-width: 48em) {
  .c-hero--welcome .c-hero-parallax__img {
    height: 520px;
    transform: translateY(-130px);
    background-image: url(/assets/images/hero-activation-desktop-min.jpg);
  }
}

.c-hero--devices {
  height: 204px;
  margin: 0 auto;
  background-image: url(/assets/images/myAirAppDevices.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
@media (min-width: 48em) {
  .c-hero--devices {
    height: 330px;
  }
}
@media (min-width: 62em) {
  .c-hero--devices.c-hero--devices-home {
    height: 543px;
  }
}
.c-hero--devices.c-hero--devices-welcome {
  margin-top: -100px;
}
@media (min-width: 48em) {
  .c-hero--devices.c-hero--devices-welcome {
    margin-top: -150px;
  }
}
@media (min-width: 48em) {
  .c-hero--devices.c-hero--devices-welcome {
    margin-top: -200px;
  }
}

/* ==========================================================================
   #HISTORY
   ========================================================================== */
/**
 * Components found on the sleep history page.
 */
.c-history-nav {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding: 0;
  text-align: center;
}
@media (min-width: 48em) {
  .c-history-nav {
    animation: aniStayHidden 1s, aniFadeInDown 250ms 1s 1 ease-out;
  }
}

.c-history-nav__month {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0 12px;
  width: auto;
  min-width: 222px;
  text-align: center;
}

.c-history-nav__month-name {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 46px;
  font-weight: 600;
}

/* ==========================================================================
   #EXPANDER
   ========================================================================== */
/** Custon expander -- toggling a section of UI open and closed
 * Toggling requires js method `res_expander()` to be active
 *
 * HTML

      <div class="c-expander" data-state="is-hidden">
        <label class="c-expander__label" aria-expanded="false" aria-controls="unique_id" role="button"><svg class="c-svg c-svg--chevron-right"><use xlink:href="#c-svg--chevron-right"></use></svg> Click on me to expand or collapse the content</label>
        <div id="unique_id" class="c-expander__panel">
          <div class="c-expander__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
 *
 */
/**
 *
 * 1. Make the expander default to 100% width of it's parent container.
 * 2. A little buffer between the expander and other content on the page.
 * 3. Hide the contents of the `c-expander__panel` when it's collapsed.
 * 4. Position the `c-expander__panel` up slightly so we can create a little
 *    slide down effect when it's toggled open.
 * 5. When the panel is `active`, change the color of the expander label text
 *    and rotate the arrow icon.
 * 6. Make the `c-expander__panel` visible and give it a high enough max-height
 *    to make our transition work properly.
 */
.c-expander {
  position: relative;
  display: block;
  width: 100%; /* [1] */
  margin-top: 24px; /* [2] */
  margin-bottom: 24px; /* [2] */
  /* Toggle/animation states */
  /* [3] */
}
.c-expander[data-state=is-hidden] > .c-expander__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}
.c-expander[data-state=is-animating] > .c-expander__panel {
  opacity: 0;
  visibility: visible;
}
.c-expander[data-state=is-expanded] > .c-expander__label {
  color: #1788c3; /* [5] */
}
.c-expander[data-state=is-expanded] > .c-expander__label .c-svg {
  transform: rotate(90deg) translateX(-50%);
  color: #1788c3;
}
.c-expander[data-state=is-expanded] > .c-expander__panel {
  margin-top: 0;
  max-height: 400px; /* [6] */
  overflow: visible; /* [6] */
  visibility: visible; /* [6] */
  opacity: 1; /* [6] */
  will-change: opacity;
}
.c-expander[data-state=is-expanded] > .c-expander__panel.c-expander__panel--500 {
  max-height: 500px; /* [6] */
}
.c-expander[data-state=is-expanded] > .c-expander__panel.c-expander__panel--600 {
  max-height: 600px; /* [6] */
}
.c-expander[data-state=is-expanded] > .c-expander__panel.c-expander__panel--700 {
  max-height: 700px; /* [6] */
}
.c-expander[data-state=is-expanded] > .c-expander__panel.c-expander__panel--800 {
  max-height: 800px; /* [6] */
}
.c-expander[data-state=is-expanded] > .c-expander__panel.c-expander__panel--max {
  max-height: 1800px; /* [6] */
}

/* The label which toggles the panel.
 *
 * 1. Add some left paddingto make room for the arrow icon.
 * 2. Align the icon and text vertically.
 * 3. Force the label elements to appear clickable.
 * 4. By default the arrow icon is positioned on the left and pointing right. `>`
 */
.c-expander__label {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  padding: 12px 0;
  padding-left: 30px; /* [1] */
  color: #424243;
  font-weight: 600;
  vertical-align: middle; /* [2] */
  cursor: pointer; /* [3] */
  /* [4] */
}
.c-expander__label .c-svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
  width: 16px;
  height: 16px;
  color: #424243;
  text-align: center;
  transition: transform 250ms ease-out;
  transform-origin: 50% 50%;
}

/* The content we want to reveal.
 * 1. Hide everything.
 * 2. Set up our transitions.
 * 3. Undo it all @tablet size and above if it's navigation.
 */
.c-expander__panel {
  position: relative;
  margin-top: -12px;
  margin-bottom: 12px;
  max-height: 0; /* [1] */
  overflow: hidden; /* [1] */
  opacity: 0; /* [1] */
  transition: max-height 500ms ease-out, margin-top 500ms ease-out, opacity 500ms ease-out 150ms; /* [2] */
}
.c-expander--countries[data-state=is-hidden] .c-expander__panel, .c-expander--top-nav[data-state=is-hidden] .c-expander__panel, .c-expander--navigation[data-state=is-hidden] .c-expander__panel {
  /* [3] */
}
@media (min-width: 48em) {
  .c-expander--countries[data-state=is-hidden] .c-expander__panel, .c-expander--top-nav[data-state=is-hidden] .c-expander__panel, .c-expander--navigation[data-state=is-hidden] .c-expander__panel {
    max-height: none !important;
    overflow: initial !important;
    visibility: visible !important;
    opacity: 1;
  }
}

.c-expander__body {
  padding: 12px;
  padding-left: 30px; /* [1] */
}

/* Navigation that turns into an expander at mobile screen sizes.
   ========================================================================== */
/**
 * 1. Reset some defaults.
 * 2. Force the navigation container to be full screen width @mobile sizes
 *    since it's probably inside an `o-wrapper` object. Useful only if your
 *    navigation container has a background color.
 * 3. Add some padding so the content isn't butted against the edge of the screen.
 * 4. Let the navigation be the full width of it's parent container @tablet size
 *    and above.
 * 5. In navigation mode, the label's default arrow icon position is to point down
 *    when collapsed, and to rotate 180° to point up when expanded.
 */
.c-expander--navigation {
  width: auto; /* [1] */
  margin-top: 0; /* [1] */
  margin-bottom: 48px; /* [1] */
  margin-left: -24px; /* [2] */
  margin-right: -24px; /* [2] */
  padding: 0 24px; /* [3] */
  background-color: #e6e6e7;
}
@media (min-width: 48em) {
  .c-expander--navigation {
    width: 100%; /* [4] */
    margin: 0;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
  }
}
.c-expander--navigation > .c-expander__label {
  display: block; /* [1] */
  margin-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: #424243;
  text-align: center; /* [1] */
  /* [5] */
}
@media (min-width: 48em) {
  .c-expander--navigation > .c-expander__label {
    display: block;
    padding: 0; /* [1] */
    margin-bottom: 12px; /* [1] */
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.3333333333;
    text-align: left;
  }
}
.c-expander--navigation > .c-expander__label .c-svg {
  left: auto;
  right: 4px;
}
@media (min-width: 48em) {
  .c-expander--navigation > .c-expander__label .c-svg {
    display: none;
  }
}
.c-expander--navigation > .c-expander__label.isExpanded > .c-expander__label .c-svg, .c-expander--navigation > .c-expander__label[data-state=is-expanded] > .c-expander__label .c-svg {
  transform: rotate(180deg) translateY(50%);
  /* [5] */
}
@media (min-width: 48em) {
  .c-expander--navigation.isExpanded > .c-expander__label, .c-expander--navigation[data-state=is-expanded] > .c-expander__label {
    color: #424243;
    cursor: default;
  }
}
.c-expander--navigation > .c-expander__panel {
  top: 0;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 12px;
}
@media (min-width: 48em) {
  .c-expander--navigation > .c-expander__panel {
    top: 0;
    margin: 0;
    padding: 0;
  }
}

.c-expander--top-nav {
  width: auto; /* [1] */
  margin-top: 0; /* [1] */
  margin-bottom: 0; /* [1] */
  margin-left: -24px; /* [2] */
  margin-right: -24px; /* [2] */
  padding: 0; /* [3] */
  background-color: transparent;
}
@media (min-width: 48em) {
  .c-expander--top-nav {
    width: 100%; /* [4] */
    margin: 0;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
  }
}
.c-expander--top-nav .c-expander__label {
  display: block; /* [1] */
  margin-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: #f6f6f6;
  text-align: center; /* [1] */
  /* [5] */
}
@media (min-width: 48em) {
  .c-expander--top-nav .c-expander__label {
    display: none;
  }
}
.c-expander--top-nav .c-expander__label .c-svg {
  position: absolute;
  top: 50%;
  right: 4px;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  transition: transform 250ms ease-out;
  color: #f6f6f6;
}
@media (min-width: 48em) {
  .c-expander--top-nav .c-expander__label .c-svg {
    display: none;
  }
}
.c-expander--top-nav.isExpanded .c-expander__label .c-svg, .c-expander--top-nav[data-state=is-expanded] .c-expander__label .c-svg {
  transform: rotate(180deg) translateY(50%);
  /* [5] */
}
.c-expander--top-nav .c-expander__panel {
  top: 0;
  margin-top: 0;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 48em) {
  .c-expander--top-nav .c-expander__panel {
    top: 0;
    margin: 0;
    padding: 0;
  }
}

/* Expander group --
   ========================================================================== */
/**
 * Make it work like an accordion, one on others off.
 *
 * HTML

    <div class="c-expander c-expander--group" data-state="is-hidden" data-group="my-group-name">
      <label class="c-expander__label" aria-expanded="false" aria-controls="unique_id3" role="button"><svg class="c-svg c-svg--chevron-down-24"><use xlink:href="#c-svg--chevron-down-24"></use></svg> Click on me to expand or collapse the content</label>
      <div id="unique_id3" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <div class="c-expander c-expander--group" data-state="is-hidden" data-group="my-group-name">
      <label class="c-expander__label" aria-expanded="false" aria-controls="unique_id4" role="button"><svg class="c-svg c-svg--chevron-down-24"><use xlink:href="#c-svg--chevron-down-24"></use></svg> Click on me to expand or collapse the content</label>
      <div id="unique_id4" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <div class="c-expander c-expander--group" data-state="is-hidden" data-group="my-group-name">
      <label class="c-expander__label" aria-expanded="false" aria-controls="unique_id5" role="button"><svg class="c-svg c-svg--chevron-down-24"><use xlink:href="#c-svg--chevron-down-24"></use></svg> Click on me to expand or collapse the content</label>
      <div id="unique_id5" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
 *
 */
/**
 * 1. Put a border between each item in the group.
 * 2. Add a top border to the first item.
 * 3. In accordion mode, the label's default arrow icon position is to point down
 *    when collapsed, and to rotate 180° to point up when expanded.
 */
.c-expander--group {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #e6e6e7; /* [1] */
}
.c-expander--group:first-of-type {
  border-top: 1px solid #e6e6e7; /* [2] */
}
.c-expander--group .c-expander__label {
  width: 100%;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 400;
}
.c-expander--group .c-expander__label .c-svg {
  transition: transform 250ms ease-out;
}
.c-expander--group[data-state=is-expanded] {
  /* [3] */
}
.c-expander--group[data-state=is-expanded] .c-expander__label .c-svg {
  transform: rotate(180deg) translateY(50%);
}

/* Expander icon position variant
   ========================================================================== */
.c-expander--group > .c-expander__label,
.c-expander--group > .c-expander__body,
.c-expander--icon-right > .c-expander__label,
.c-expander--icon-right > .c-expander__body {
  padding-left: 0px; /* [1] */
  padding-right: 30px; /* [2] */
}
.c-expander--group:not(.c-expander--countries) > .c-expander__label .c-svg,
.c-expander--icon-right:not(.c-expander--countries) > .c-expander__label .c-svg {
  left: auto; /* [1] */
  right: 4px; /* [2] */
}
.c-expander--group[data-state=is-expanded] > .c-expander__label .c-svg,
.c-expander--icon-right[data-state=is-expanded] > .c-expander__label .c-svg {
  transform: rotate(180deg) translateY(50%);
  /* [3] */
}
.c-expander--group.c-expander--navigation > .c-expander__label,
.c-expander--icon-right.c-expander--navigation > .c-expander__label {
  padding-left: 30px;
}
@media (min-width: 48em) {
  .c-expander--group.c-expander--navigation > .c-expander__label,
  .c-expander--icon-right.c-expander--navigation > .c-expander__label {
    padding-left: 0px;
  }
}

.c-expander--no-icon > .c-expander__label,
.c-expander--no-icon > .c-expander__panel .c-expander__body {
  padding-left: 0;
  padding-right: 0;
}
.c-expander--no-icon[data-state=is-hidden] .c-expander__label, .c-expander--no-icon[data-state=is-expanded] .c-expander__label {
  color: #424243;
}

.is-nested-nav {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 24px;
}
.is-nested-nav > .c-expander__label {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}
.is-nested-nav > .c-expander__panel {
  margin-bottom: 0;
}
.is-nested-nav > .c-expander__panel .c-expander__body {
  padding: 0;
}
.site-nav--stacked .is-nested-nav .site-nav__list {
  margin-bottom: 0;
}

/* Custom expanders
   ========================================================================== */
.c-expander--countries {
  margin: 0;
  padding: 0;
}
.c-expander--countries, .c-expander--countries:first-of-type {
  border: none;
}
@media (max-width: 47.99em) {
  .c-expander--countries:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 100%;
    content: "";
    background-image: url(/assets/images/countryMap.png);
    background-repeat: no-repeat;
    background-position: -6px 12px;
    background-size: 430px auto;
  }
  #europe .c-expander--countries:before {
    background-position: -178px 12px;
    -moz-clip-path: polygon(17% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 15%);
    -ms-clip-path: polygon(17% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 15%);
    clip-path: polygon(17% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 15%);
  }
  #apac .c-expander--countries:before {
    width: 136px;
    background-position: -287px 6px;
  }
}
@media (max-width: 47.99em) {
  #europe .c-expander--countries[data-state=is-hidden]:before {
    -moz-clip-path: polygon(17% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
    -ms-clip-path: polygon(17% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
    clip-path: polygon(17% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
  }
}
.c-expander--countries .c-expander__label {
  margin-bottom: 0;
  padding: 24px 42px;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.3636363636;
  font-weight: 700;
}
@media (min-width: 48em) {
  .c-expander--countries .c-expander__label {
    margin-bottom: 24px;
    padding: 0;
    padding-bottom: 6px;
    border-bottom: 1px dotted #ebebeb;
  }
}
@media (min-width: 75em) {
  html:lang(fi) .c-expander--countries .c-expander__label, html:lang(nb) .c-expander--countries .c-expander__label, html:lang(sv) .c-expander--countries .c-expander__label {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.3333333333;
  }
}
.c-expander--countries .c-expander__label .c-svg {
  width: 24px;
  height: 24px;
}
@media (min-width: 48em) {
  .c-expander--countries .c-expander__label .c-svg {
    display: none;
  }
}
.c-expander--countries .c-expander__panel {
  top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 12px;
}
@media (min-width: 48em) {
  .c-expander--countries .c-expander__panel {
    top: 0;
    margin: 0;
    padding: 0;
  }
}

/* Legacy accordion. Some hard-coded content in the RESX uses this accordion
 * code. For example, some of the FAQ support content.
   ========================================================================== */
.accordion {
  margin-bottom: 24px;
}
.accordion h4 {
  position: relative;
  color: #1788c3;
  margin: 0;
  padding-left: 12px;
}
.accordion h4 span {
  color: #1788c3;
}
.accordion h4 span.show {
  display: inline;
}
.accordion h4 span.hhide {
  display: none;
}
.accordion h4:hover {
  cursor: pointer;
}
.accordion h4.res-open-right {
  padding-right: 36px;
}
.accordion h4.res-open-right :before {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 24px;
  height: 18px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 250ms ease-out, transform 250ms ease-out;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
}
.accordion h4.expanded:before {
  transform: rotate(180deg) translateY(50%);
}
.accordion h4.expanded span.show {
  display: none;
}
.accordion h4.expanded span.hhide {
  display: inline;
}
@media (min-width: 48em) {
  .accordion h4 {
    padding-left: 24px;
  }
}
.accordion .panel {
  display: none;
  padding: 24px 0;
}
.accordion .tbl-scoreData {
  margin: 0 auto;
}

.expandableParagraph {
  display: none;
}

/* ==========================================================================
  #FLAGS
  ========================================================================== */
[class^=flag-]:before,
[class*=" flag-"]:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 25px;
  height: 17px;
  overflow: hidden;
  content: "";
  background-color: transparent;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 960px), screen and (-webkit-min-device-pixel-ratio: 1) {
  [class^=flag-]:before,
  [class*=" flag-"]:before {
    background-image: url(/assets/images/flags@1x-min.png);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  [class^=flag-]:before,
  [class*=" flag-"]:before {
    background-image: url(/assets/images/flags@2x-min.png);
    background-size: 460px auto;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  [class^=flag-]:before,
  [class*=" flag-"]:before {
    background-image: url(/assets/images/flags@3x-min.png);
    background-size: 460px auto;
  }
}

/*** Americas  ***/
/* United States */
[class=flag-us]:before {
  background-position: -406px -99px;
}

/* Canada */
[class=flag-ca]:before {
  background-position: -57px -99px;
}

/* Argentina */
[class=flag-ar]:before {
  background-position: -3px -99px;
}

/* Chile */
[class=flag-cl]:before {
  background-position: -57px -175px;
}

/* Colombia */
[class=flag-co]:before {
  background-position: -57px -213px;
}

/* Guatemala */
[class=flag-gt]:before {
  background-position: -137px -137px;
}

/* Mexico */
[class=flag-mx]:before {
  background-position: -244px -79px;
}

/* Brazil */
[class=flag-br]:before {
  background-position: -30px -194px;
}

/*** Europe ***/
/* Austria */
[class=flag-at]:before {
  background-position: -3px -156px;
}

/* Belgium */
[class=flag-be]:before {
  background-position: -30px -60px;
}

/* Cyprus */
[class=flag-cy]:before {
  background-position: -84px -137px;
}

/* Czech Republic */
[class=flag-cz]:before {
  background-position: -83px -156px;
}

/* Denmark */
[class=flag-dk]:before {
  background-position: -83px -175px;
}

/* Finland */
[class=flag-fi]:before {
  background-position: -110px -193px;
}

/* Germany */
[class=flag-de]:before {
  background-position: -137px -60px;
}

/* Greece */
[class=flag-gr]:before {
  background-position: -137px -99px;
}

/* Italy */
[class=flag-it]:before {
  background-position: -165px -175px;
}

/* South Africa */
[class=flag-za]:before {
  background-position: -352px -79px;
}

/* France */
[class=flag-fr]:before {
  background-position: -110px -213px;
}

/* Ireland */
[class=flag-ie]:before {
  background-position: -164px -137px;
}

/* Netherlands */
[class=flag-nl]:before {
  background-position: -271px -79px;
}

/* Norway */
[class=flag-no]:before {
  background-position: -271px -176px;
}

/* Poland */
[class=flag-pl]:before {
  background-position: -298px -117px;
}

/* Portugal */
[class=flag-pt]:before {
  background-position: -298px -137px;
}

/* Spain */
[class=flag-es]:before {
  background-position: -352px -117px;
}

/* Sweden */
[class=flag-se]:before {
  background-position: -352px -213px;
}

/* Switzerland */
[class=flag-ch]:before {
  background-position: -379px -3px;
}

/* United Kingdom */
[class=flag-gb]:before {
  background-position: -406px -79px;
}

/* Iceland */
[class=flag-is]:before {
  background-position: -164px -41px;
}

/* Malta */
[class=flag-mt]:before {
  background-position: -245px -3px;
}

/* Luxembourg */
[class=flag-lu]:before {
  background-position: -219px -99px;
}

/*** Middle East ***/
/* Saudi Arabia */
[class=flag-sa]:before {
  background-position: -325px -117px;
}

/*** APAC ***/
/* Australia */
[class=flag-au]:before {
  background-position: -3px -137px;
}

/* New Zealand */
[class=flag-nz]:before {
  background-position: -271px -99px;
}

/* Japan */
[class=flag-jp]:before {
  background-position: -165px -214px;
}

/* Hong Kong */
[class=flag-hk]:before {
  background-position: -433px -213px;
}

/* Taiwan */
[class=flag-tw]:before {
  background-position: -378px -41px;
}

/* Singapore */
[class=flag-sg]:before {
  background-position: -325px -214px;
}

/* Malaysia */
[class=flag-my]:before {
  background-position: -218px -175px;
}

/* India */
[class=flag-in]:before {
  background-position: -164px -60px;
}

/* */
[class=flag-ph]:before {
  background-position: -298px -98px;
}

/* Indonesia */
[class=flag-id]:before {
  background-position: -245px -137px;
}

/* Thailand */
[class=flag-th]:before {
  background-position: -379px -98px;
}

/* Vietnam */
[class=flag-vn]:before {
  background-position: -405px -213px;
}

/* South Korea */
[class=flag-kr]:before {
  background-position: -191px -99px;
}

/* ==========================================================================
  #GRID
  ========================================================================== */
/**
    For when a table won't do.
*/
.c-grid {
  position: relative;
  display: block;
}
@media (min-width: 48em) {
  .c-grid {
    display: table;
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
  }
}

.c-grid__row {
  display: block;
}
.c-grid__row:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .c-grid__row {
    display: table-row;
    border: none;
  }
}

.c-grid__cell {
  display: inline-block;
  float: left;
  width: 33.333333%;
  margin-bottom: 12px;
  text-align: center;
  line-height: 1.15;
}
@media (min-width: 48em) {
  .c-grid__cell {
    display: table-cell;
    float: none;
    width: auto;
    margin-bottom: 0;
    vertical-align: middle;
    padding: 12px;
    border-bottom: 1px solid #e6e6e7;
  }
}

/* Modifiers
   ========================================================================== */
.c-grid__row--thead {
  display: none;
}
@media (min-width: 48em) {
  .c-grid__row--thead {
    display: table-row;
  }
}

.c-grid__row--mobile-header {
  display: block;
  margin-bottom: 24px;
  border-bottom: 1px solid #e6e6e7;
}
@media (min-width: 48em) {
  .c-grid__row--mobile-header {
    display: none;
  }
}
.c-grid__row--mobile-header > .c-grid__cell {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.c-grid__cell--header {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  white-space: nowrap;
}

.c-grid__cell--no-option {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.15;
}

.c-grid__cell--label {
  display: block;
  margin-bottom: 24px;
  width: 100%;
  float: none;
  text-align: left;
  color: #6d6d6d;
  font-weight: 600;
}
@media (min-width: 48em) {
  .c-grid__cell--label {
    display: table-cell;
    width: auto;
    max-width: 360px;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   #FOOTER
   ========================================================================== */
/**
 * 1. By default, the text is centered (mobile first).
 * 2. Reset some defaults for text elements we might use in the footer
 * 3. Line up the footer text with the Resmed logo in this particular layout.
 */
.page-footer {
  padding: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  background-color: #424243;
  text-align: center; /* [1] */
  /* stylelint-disable selector-list-comma-newline-after */
  /* stylelint-enable selector-list-comma-newline-after */
}
.page-footer p {
  margin-bottom: 0; /* [2] */
}
.page-footer p, .page-footer a,
.page-footer ul, .page-footer li {
  color: #d9d8d5; /* [2] */
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  /* [2] */
}
.page-footer a {
  text-decoration: none; /* [2] */
}
@media (min-width: 48em) {
  .page-footer {
    padding-top: 48px;
    padding-bottom: 0;
    text-align: left;
  }
  .page-footer .o-layout__item {
    vertical-align: top; /* [3] */
    margin-bottom: 0; /* [3] */
    line-height: 1; /* [3] */
  }
}

.page-footer__copyright {
  padding-bottom: 24px;
  text-align: center;
}
@media (min-width: 62em) {
  .page-footer__copyright {
    padding-bottom: 36px;
    text-align: right;
  }
}
@media (max-width: 47.99em) {
  .page-footer__copyright p span {
    display: block;
  }
}

/* Footer link list
   ========================================================================== */
.page-footer__links {
  padding-bottom: 24px;
  text-align: center;
}
@media (min-width: 62em) {
  .page-footer__links {
    padding-bottom: 36px;
    text-align: left;
  }
}
@media (min-width: 48em) {
  .page-footer__links.page-footer__links-item:first-child {
    margin-left: 0;
  }
}

.page-footer__links-item {
  display: inline-block;
  margin-left: 6px;
  margin-right: 6px;
}
@media (min-width: 48em) {
  .page-footer__links-item {
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media (min-width: 62em) {
  .page-footer__links-item {
    margin-left: 0;
    margin-right: 24px;
    margin-bottom: 12px;
  }
}

/* Variant
   ========================================================================== */
/**
 * 1. Override the max-width on the `.o-wrapper` element so the footer will span
 *    the width of the viewport while keeping the outer gutters.
 * 2. Keep the ouside gutters in case it is being removed on the `.o-wrapper` 
 *    element at x-wide breakpoint.
 */
.page-footer--full .o-wrapper {
  width: 100% !important;
  max-width: 100% !important; /* [1] */
  padding-right: 24px; /* [2] */
  padding-left: 24px; /* [2] */
}

.page-footer__languages {
  padding-top: 12px;
  border-top: 1px solid hsl(0, 0%, 70%);
}
.page-footer__languages:after {
  content: "";
  display: table;
  clear: both;
}

.page-footer__languages-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.page-footer__languages-list:after {
  content: "";
  display: table;
  clear: both;
}

.page-footer__languages-list-item {
  list-style-type: none;
  margin: 0;
  margin-bottom: 12px;
  padding: 0;
  width: 33%;
  float: left;
  line-height: 1;
}
.page-footer__languages-list-item:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .page-footer__languages-list-item {
    width: auto;
  }
}
.page-footer__languages-list-item:first-child .page-footer__languages-link {
  border: 0;
}
@media (min-width: 48em) {
  .page-footer__languages-list-item:first-child .page-footer__languages-link span {
    padding-left: 0;
  }
}

.page-footer__languages-link {
  display: block;
  margin: 0;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1;
  color: hsl(0, 0%, 70%);
  width: 100%;
  text-align: center;
  float: left;
}
@media (min-width: 48em) {
  .page-footer__languages-link {
    width: auto;
    text-align: left;
    float: none;
    border-left: 1px solid hsl(0, 0%, 70%);
  }
}
.page-footer__languages-link.is-active {
  color: hsl(0, 0%, 100%);
  text-decoration: underline;
}
.page-footer__languages-link span {
  display: block;
  padding: 0 12px;
}

/* Layout variations
   ========================================================================== */
.page-footer--countries {
  padding-top: 0;
  background-color: transparent;
  text-align: center;
}
@media (min-width: 48em) {
  .page-footer--countries {
    animation-name: aniStayHidden, aniFadeIn;
    animation-duration: 1500ms, 550ms;
    animation-delay: 0s, 1500ms;
    animation-timing-function: linear, ease-out;
  }
}
.page-footer--countries .page-footer_country-heading {
  margin-bottom: 6px;
}
@media (max-width: 47.99em) {
  .page-footer--countries .page-footer_country-heading {
    margin: 0;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
  }
}
.page-footer--countries .page-footer_country-text {
  margin: 0;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #424243;
}
@media (min-width: 48em) {
  .page-footer--countries .page-footer_country-text {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}
.page-footer--countries .o-wrapper {
  padding-top: 24px;
  padding-bottom: 24px;
}

.page-footer--basic {
  text-align: center;
  background-color: hsl(0, 0%, 100%);
}
.page-footer--basic p,
.page-footer--basic a,
.page-footer--basic ul,
.page-footer--basic li {
  color: #424243;
}
.page-footer--basic .page-footer__links {
  padding-top: 24px;
  padding-bottom: 24px;
  text-align: center;
}
@media (min-width: 62em) {
  .page-footer--basic .page-footer__links {
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
  }
}
.page-footer--basic .page-footer__copyright {
  padding-top: 24px;
  padding-bottom: 0;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
}
@media (min-width: 62em) {
  .page-footer--basic .page-footer__copyright {
    padding-top: 24px;
    padding-bottom: 0;
    text-align: center;
  }
}
.page-footer--basic .o-wrapper {
  border-top: 1px solid #e6e6e7;
}

/* ==========================================================================
  #FORMS
  ========================================================================== */
/**
 * Define custom styles for our form inputs.
 *
 * Related files:
 * `elements/elements.forms.scss`
 */
.c-form-section {
  border-bottom: 1px solid #e6e6e7;
  margin-bottom: 24px;
}
.c-form-section:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * Wrapper for a form component. A form component is comprised at minimum of a
 * label and an input field. Other elements include hint text, error messages,
 * links or buttons.
 *
 * HTML

    <div class="c-form-field">
      <div class="c-form-field__label">Label</div>
      <div class="c-form-field__input">
        <input type="text" value="" class="c-input" />
      </div>
    </div>

 *
 */
.c-form-field {
  position: relative;
  box-sizing: border-box;
  vertical-align: top;
  margin-bottom: 24px;
}
@media (min-width: 48em) {
  .c-form-field {
    display: inline-block;
    width: 100%;
  }
}

.c-form-field--nested {
  padding-left: 24px;
}

.c-form-field--repeater-btns {
  padding-top: 32px;
  text-align: right;
}

/**
 * Form field labels.
 *
 * 1. We don't want the label to be a block element but we want to add spacing
 *    between the label and the input.
 * 2. Force a line-break after the label.
 * 3. That time when you have a form field with no label, but need it to line up
 *    horizontally with other form fields in a row. Include an empty `.c-form-field__label`
 *    with a `&nbsp;` in it and add this class to the `.c-form-field` container.
 *
 * HTML

    <div class="c-form-field c-form-field--nolabel">
      <div class="c-form-field__label">&nbsp;</div>
      <div class="c-form-field__input"><input type="text" value="" class="c-input" /></div>
    </div>

 *
 */
.c-form-field__label {
  display: block;
  color: #6d6d6d;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 6px;
  /* [3] */
}
@media (min-width: 48em) {
  .c-form-field__label {
    display: inline-block; /* [1] */
  }
  .c-form-field__label:after { /* [2] */
    content: "\a";
    white-space: pre;
  }
}
.c-form-field--nolabel .c-form-field__label {
  display: block;
}
.c-form-field__label .is-required {
  color: #da1f3d;
}
.c-form-field__label .is-optional {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: inherit;
  color: #b7b7b8;
}

.c-form-field__hint {
  display: block;
  margin: 0;
  padding-top: 6px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: #b7b7b8;
}

.c-form-field__instruction {
  display: block;
  margin-bottom: 12px;
}

.c-form-field__error {
  position: relative;
  padding: 0;
  padding-top: 6px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.125;
  color: #da1f3d;
  /*
    Use absolute positioning to display the inline error message below the form input
    without it affecting the vertical spacing. Make sure there is room below the form input
    for the error message to be displayed properly.
  */
}
.c-form-field__error a, .c-form-field__error a:link, .c-form-field__error a:visited, .c-form-field__error a:hover, .c-form-field__error a:active, .c-form-field__error a:focus {
  color: #da1f3d !important;
  text-decoration: underline !important;
}
.c-form-field__error.is-pos-bottom {
  position: absolute;
  top: 100%;
  left: 0;
}
@media (min-width: 48em) {
  .c-form-field__error.is-list-field {
    margin-top: -24px;
  }
}

/* Form input components
   ========================================================================== */
.c-form-field__input {
  position: relative;
  margin: 0;
}

/**
 * 1. Adding a height because some browsers, looking at you IE, don't add up
 *    the line-height and padding properly, so inputs can vary slightly in height.
 * 2. Remove any default browser stuff.
 */
.c-input {
  display: inline-block;
  width: 100%;
  height: 42px; /* [1] */
  padding: 0;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  color: #424243;
  background-color: transparent !important;
  border: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #b7b7b8;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  /* [2] */
}
.c-input.is-focus, .c-input:focus, .c-input:active {
  outline: none;
  box-shadow: none;
  border-bottom-color: #1788c3;
}
.c-input:disabled {
  cursor: default;
  opacity: 0.3;
}
@media (min-width: 48em) {
  .c-input {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}

.c-input-group {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: -6px;
  font-size: 0;
}
.c-input-group .c-input-group__item {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding-left: 6px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 0;
}
.c-input-group.c-input-group--dob {
  margin-left: -6px;
}
.c-input-group.c-input-group--dob .c-input-group__item {
  padding-left: 6px;
}
.c-input-group.c-input-group--dob .c-input-group__item.c-input--dob-day {
  width: 25%;
}
.c-input-group.c-input-group--dob .c-input-group__item.c-input--dob-month {
  width: 50%;
}
.c-input-group.c-input-group--dob .c-input-group__item.c-input--dob-year {
  width: 25%;
}
html:lang(ja) .c-input-group.c-input-group--dob {
  direction: rtl;
}
html:lang(ja) .c-input-group.c-input-group--dob > .c-input-group__item {
  direction: ltr;
  text-align: left;
}

.c-input-group--gender > .o-layout__item {
  margin-bottom: 0;
}

.c-input-group--middle > .c-input-group__item {
  vertical-align: middle;
}

/* Input type modifiers
   ========================================================================== */
.c-input--text.is-focus, .c-input--text:focus, .c-input--text:active {
  outline: none;
  box-shadow: none;
}

.c-input--number {
  max-width: 120px;
}

.c-input--textarea {
  width: 100%;
  min-height: 120px;
  padding: 6px;
  background-color: hsl(0, 0%, 100%) !important;
  border: 1px solid #b7b7b8;
}
@media (min-width: 48em) {
  .c-input--textarea {
    width: 600px;
  }
}

.c-input--full-width {
  width: 100% !important;
  max-width: 100% !important;
}

.c-input--bmi {
  display: inline-block;
  min-width: 60px;
  font-weight: 700;
  border-bottom: 1px solid hsl(0, 0%, 60%);
}

.c-input--search,
.c-input--search.ui-inputtext {
  width: 76%;
  width: -mox-calc(100% - 40px);
  width: -o-calc(100% - 40px);
  width: calc(100% - 40px);
  max-width: 100%;
  float: left;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.c-input--search + .c-btn,
.c-input--search.ui-inputtext + .c-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

@media (min-width: 48em) {
  .c-form-field--dob-month {
    width: 160px;
  }
}

@media (min-width: 48em) {
  .c-form-field--dob-day {
    width: 100px;
  }
}

@media (min-width: 48em) {
  .c-form-field--dob-year {
    width: 60px;
  }
}

.c-form-captcha {
  margin-top: -3px;
  padding: 4px 2px 2px;
  border: 1px solid #e6e6e7;
  background: #ebf7fd;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.c-form-captcha:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * We need to wrap select boxes so we can style them properly across browsers.
 * The select input needs to be inside a container with the `.c-input` class and
 * this modifier.
 *
 <div class="c-input c-input--select">
     <select>
         <option selected>Please select</option>
         <option>Option 1</option>
     </select>
 </div>

 * 1. Override the padding of the `.c-input` class since we're using it as a wrapper.
 *    Padding gets applied to select element instead.
 * 2. Make our custom drop-down arrow pseudo-element.
 * 3. Font-family and icon for the select input arrow.
 */
.c-input--select {
  position: relative;
  padding: 0 !important; /* [1] */
  background-color: hsl(0, 0%, 100%) !important;
  overflow: hidden;
  vertical-align: bottom;
  /**
   * 1. Reset some defaults on select just in case.
   * 2. Height of our `c-input` minus the top and bottom border height.
   * 3. Hide the native drop-down button arrow in IE10+.
   */
}
.c-input--select:before { /* [2] */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  width: 16px;
  height: 16px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 250ms ease-out;
  z-index: 0;
}
.c-input--select:hover, .c-input--select:focus, .c-input--select:active {
  cursor: pointer;
  background-color: hsl(0, 0%, 100%);
  border-bottom-color: #1788c3;
}
.c-input--select:hover:before, .c-input--select:focus:before, .c-input--select:active:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231788C3' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--select select {
  position: relative;
  display: block;
  width: 100%;
  height: 40px; /* [2] */
  padding: 0 24px 0 0;
  color: #424243;
  background-image: none; /* [1] */
  background-color: transparent; /* [1] */
  border: 0; /* [1] */
  border-color: transparent; /* [1] */
  appearance: none;
  /* [1] */
  -webkit-text-size-adjust: none; /* [1] */
  cursor: pointer; /* [1] */
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  z-index: 1;
}
.c-input--select select::-ms-expand {
  display: none; /* [3] */
}
.c-input--select select:disabled {
  cursor: default;
  opacity: 0.3;
}
.c-input--select select:focus, .c-input--select select:active {
  outline: none;
  box-shadow: none;
  border-bottom-color: #1788c3;
}
@media (min-width: 48em) {
  .c-input--select select {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}
.c-input--select select option {
  max-width: 92%;
  font-size: inherit;
  line-height: inherit;
  background-color: transparent;
}

/**
 * Custom number picker
 * HTML:

    <div class="c-form-field u-1/3@tablet" data-validation="default" data-role="group" aria-labelledby="demoNumSpinnerLabel demoNumSpinnerCurrValue">
      <label class="c-form-field__label" id="demoNumSpinnerLabel">Label</label>
      <div class="c-form-field__input">

        <div class="c-num-spinner">
          <div hidden id="demoNumSpinnerCurrValue">The current value is <span data-num-spinner="current-value">0</span></div>
          <div hidden class="js-numSpinnerStrings" data-num-spinner-decrease="Decrease amount by" data-num-spinner-increase="Increase amount by" aria-hidden="true"></div>
          <button class="c-icon-btn c-num-spinner__btn"
                  tabindex="-1"
                  data-num-spinner="decrease"
                  type="button">
            <svg class="c-svg c-svg--remove-24"><use xlink:href="#c-svg--remove-24"></use></svg>
          </button>

          <input  type="number"
                  id="demoFormInputNumperPicker1"
                  class="c-input"
                  value="0"
                  tabindex="0"
                  aria-label="Label of what this input is for" />

          <button class="c-icon-btn c-num-spinner__btn"
                  tabindex="-1"
                  data-num-spinner="increase"
                  type="button">
            <svg class="c-svg c-svg--add-24"><use xlink:href="#c-svg--add-24"></use></svg>
          </button>

        </div>

      </div>
    </div>

 */
.c-num-spinner {
  white-space: nowrap;
  font-size: 0;
}
.c-num-spinner .c-input,
.c-num-spinner .c-num-spinner__btn {
  vertical-align: middle;
}
.c-num-spinner .c-num-spinner__btn {
  display: none;
  width: 32px;
  height: 42px;
  padding-left: 0;
  padding-right: 0;
  color: #424243;
  text-align: center;
  border-radius: 3px;
}
.c-num-spinner .c-num-spinner__btn:hover, .c-num-spinner .c-num-spinner__btn:focus, .c-num-spinner .c-num-spinner__btn:active {
  color: #1788c3;
}
.c-num-spinner .c-num-spinner__btn .c-svg {
  width: 24px;
  height: 24px;
}
.c-num-spinner .c-num-spinner__btn.is-active {
  display: inline-block;
}
.c-num-spinner .c-input {
  width: auto;
  min-width: 50px;
  max-width: 120px;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #b7b7b8;
  border-radius: 3px;
}
.c-num-spinner .c-input.is-focus {
  border-color: #1788c3;
}
.c-num-spinner .c-input.c-input--num-spinner {
  text-align: center;
}
.c-num-spinner .c-input.c-input--num-spinner, .c-num-spinner .c-input.c-input--num-spinner::-webkit-inner-spin-button, .c-num-spinner .c-input.c-input--num-spinner::-webkit-outer-spin-button {
  appearance: none;
  -moz-appearance: textfield;
}

/**
 * Fancy radio buttons and checkboxes
 * 1. Undo settings from our `.c-input` class and make our radio
 *    buttons and checkboxes stack as a list by default.
 */
.custom-checkbox,
.c-input--radio,
.c-input--checkbox {
  display: block; /* [1] */
  width: auto; /* [1] */
  height: -moz-fit-content;
  height: fit-content; /* [1] */
  border: 0; /* [1] */
  margin-bottom: 12px;
}
li.custom-checkbox, .c-input--radio, .c-input--checkbox {
  height: unset;
}

.custom-checkbox input[type=radio],
.custom-checkbox input[type=checkbox],
.c-input--radio input[type=radio],
.c-input--radio input[type=checkbox],
.c-input--checkbox input[type=radio],
.c-input--checkbox input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.custom-checkbox input[type=radio] + label,
.custom-checkbox input[type=radio] + .c-form-field__label,
.custom-checkbox input[type=checkbox] + label,
.custom-checkbox input[type=checkbox] + .c-form-field__label,
.c-input--radio input[type=radio] + label,
.c-input--radio input[type=radio] + .c-form-field__label,
.c-input--radio input[type=checkbox] + label,
.c-input--radio input[type=checkbox] + .c-form-field__label,
.c-input--checkbox input[type=radio] + label,
.c-input--checkbox input[type=radio] + .c-form-field__label,
.c-input--checkbox input[type=checkbox] + label,
.c-input--checkbox input[type=checkbox] + .c-form-field__label {
  position: relative;
  display: inline-block;
  color: #424243;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  font-weight: 400;
  margin-bottom: 0;
  padding-left: 32px;
  vertical-align: middle;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}
.custom-checkbox input[type=radio] + label:before,
.custom-checkbox input[type=radio] + .c-form-field__label:before,
.custom-checkbox input[type=checkbox] + label:before,
.custom-checkbox input[type=checkbox] + .c-form-field__label:before,
.c-input--radio input[type=radio] + label:before,
.c-input--radio input[type=radio] + .c-form-field__label:before,
.c-input--radio input[type=checkbox] + label:before,
.c-input--radio input[type=checkbox] + .c-form-field__label:before,
.c-input--checkbox input[type=radio] + label:before,
.c-input--checkbox input[type=radio] + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox] + label:before,
.c-input--checkbox input[type=checkbox] + .c-form-field__label:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 20px;
  height: 20px;
  content: "";
  color: #6d6d6d;
  text-align: center;
  border: 1px solid #b7b7b8;
  box-sizing: content-box;
  transition: all 0.4s ease;
}
@media (min-width: 48em) {
  .custom-checkbox input[type=radio] + label,
  .custom-checkbox input[type=radio] + .c-form-field__label,
  .custom-checkbox input[type=checkbox] + label,
  .custom-checkbox input[type=checkbox] + .c-form-field__label,
  .c-input--radio input[type=radio] + label,
  .c-input--radio input[type=radio] + .c-form-field__label,
  .c-input--radio input[type=checkbox] + label,
  .c-input--radio input[type=checkbox] + .c-form-field__label,
  .c-input--checkbox input[type=radio] + label,
  .c-input--checkbox input[type=radio] + .c-form-field__label,
  .c-input--checkbox input[type=checkbox] + label,
  .c-input--checkbox input[type=checkbox] + .c-form-field__label {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}
.custom-checkbox input[type=radio]:focus + label:before,
.custom-checkbox input[type=radio]:focus + .c-form-field__label:before, .custom-checkbox input[type=radio]:hover + label:before,
.custom-checkbox input[type=radio]:hover + .c-form-field__label:before,
.custom-checkbox input[type=checkbox]:focus + label:before,
.custom-checkbox input[type=checkbox]:focus + .c-form-field__label:before,
.custom-checkbox input[type=checkbox]:hover + label:before,
.custom-checkbox input[type=checkbox]:hover + .c-form-field__label:before,
.c-input--radio input[type=radio]:focus + label:before,
.c-input--radio input[type=radio]:focus + .c-form-field__label:before,
.c-input--radio input[type=radio]:hover + label:before,
.c-input--radio input[type=radio]:hover + .c-form-field__label:before,
.c-input--radio input[type=checkbox]:focus + label:before,
.c-input--radio input[type=checkbox]:focus + .c-form-field__label:before,
.c-input--radio input[type=checkbox]:hover + label:before,
.c-input--radio input[type=checkbox]:hover + .c-form-field__label:before,
.c-input--checkbox input[type=radio]:focus + label:before,
.c-input--checkbox input[type=radio]:focus + .c-form-field__label:before,
.c-input--checkbox input[type=radio]:hover + label:before,
.c-input--checkbox input[type=radio]:hover + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox]:focus + label:before,
.c-input--checkbox input[type=checkbox]:focus + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox]:hover + label:before,
.c-input--checkbox input[type=checkbox]:hover + .c-form-field__label:before {
  border-color: #1788c3;
  background-color: #ebf7fd;
}
.custom-checkbox input[type=radio]:active + label:before, .custom-checkbox input[type=radio]:active + .c-form-field__label:before,
.custom-checkbox input[type=checkbox]:active + label:before,
.custom-checkbox input[type=checkbox]:active + .c-form-field__label:before,
.c-input--radio input[type=radio]:active + label:before,
.c-input--radio input[type=radio]:active + .c-form-field__label:before,
.c-input--radio input[type=checkbox]:active + label:before,
.c-input--radio input[type=checkbox]:active + .c-form-field__label:before,
.c-input--checkbox input[type=radio]:active + label:before,
.c-input--checkbox input[type=radio]:active + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox]:active + label:before,
.c-input--checkbox input[type=checkbox]:active + .c-form-field__label:before {
  transition-duration: 0s;
}
.custom-checkbox.is-consent input[type=radio] + label,
.custom-checkbox.is-consent input[type=radio] + .c-form-field__label,
.custom-checkbox.is-consent input[type=checkbox] + label,
.custom-checkbox.is-consent input[type=checkbox] + .c-form-field__label,
.c-input--radio.is-consent input[type=radio] + label,
.c-input--radio.is-consent input[type=radio] + .c-form-field__label,
.c-input--radio.is-consent input[type=checkbox] + label,
.c-input--radio.is-consent input[type=checkbox] + .c-form-field__label,
.c-input--checkbox.is-consent input[type=radio] + label,
.c-input--checkbox.is-consent input[type=radio] + .c-form-field__label,
.c-input--checkbox.is-consent input[type=checkbox] + label,
.c-input--checkbox.is-consent input[type=checkbox] + .c-form-field__label {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.custom-checkbox.is-hint input[type=radio] + label,
.custom-checkbox.is-hint input[type=radio] + .c-form-field__label,
.custom-checkbox.is-hint input[type=checkbox] + label,
.custom-checkbox.is-hint input[type=checkbox] + .c-form-field__label,
.c-input--radio.is-hint input[type=radio] + label,
.c-input--radio.is-hint input[type=radio] + .c-form-field__label,
.c-input--radio.is-hint input[type=checkbox] + label,
.c-input--radio.is-hint input[type=checkbox] + .c-form-field__label,
.c-input--checkbox.is-hint input[type=radio] + label,
.c-input--checkbox.is-hint input[type=radio] + .c-form-field__label,
.c-input--checkbox.is-hint input[type=checkbox] + label,
.c-input--checkbox.is-hint input[type=checkbox] + .c-form-field__label {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.25;
}
.custom-checkbox.align-top input[type=radio] + label:before,
.custom-checkbox.align-top input[type=radio] + .c-form-field__label:before,
.custom-checkbox.align-top input[type=checkbox] + label:before,
.custom-checkbox.align-top input[type=checkbox] + .c-form-field__label:before,
.c-input--radio.align-top input[type=radio] + label:before,
.c-input--radio.align-top input[type=radio] + .c-form-field__label:before,
.c-input--radio.align-top input[type=checkbox] + label:before,
.c-input--radio.align-top input[type=checkbox] + .c-form-field__label:before,
.c-input--checkbox.align-top input[type=radio] + label:before,
.c-input--checkbox.align-top input[type=radio] + .c-form-field__label:before,
.c-input--checkbox.align-top input[type=checkbox] + label:before,
.c-input--checkbox.align-top input[type=checkbox] + .c-form-field__label:before {
  top: 0px;
  transform: translateY(0);
}
@media (min-width: 48em) {
  .custom-checkbox.align-top input[type=radio] + label:before,
  .custom-checkbox.align-top input[type=radio] + .c-form-field__label:before,
  .custom-checkbox.align-top input[type=checkbox] + label:before,
  .custom-checkbox.align-top input[type=checkbox] + .c-form-field__label:before,
  .c-input--radio.align-top input[type=radio] + label:before,
  .c-input--radio.align-top input[type=radio] + .c-form-field__label:before,
  .c-input--radio.align-top input[type=checkbox] + label:before,
  .c-input--radio.align-top input[type=checkbox] + .c-form-field__label:before,
  .c-input--checkbox.align-top input[type=radio] + label:before,
  .c-input--checkbox.align-top input[type=radio] + .c-form-field__label:before,
  .c-input--checkbox.align-top input[type=checkbox] + label:before,
  .c-input--checkbox.align-top input[type=checkbox] + .c-form-field__label:before {
    top: 3px;
  }
}
.custom-checkbox.align-top input[type=radio] + label:after,
.custom-checkbox.align-top input[type=radio] + .c-form-field__label:after,
.custom-checkbox.align-top input[type=checkbox] + label:after,
.custom-checkbox.align-top input[type=checkbox] + .c-form-field__label:after,
.c-input--radio.align-top input[type=radio] + label:after,
.c-input--radio.align-top input[type=radio] + .c-form-field__label:after,
.c-input--radio.align-top input[type=checkbox] + label:after,
.c-input--radio.align-top input[type=checkbox] + .c-form-field__label:after,
.c-input--checkbox.align-top input[type=radio] + label:after,
.c-input--checkbox.align-top input[type=radio] + .c-form-field__label:after,
.c-input--checkbox.align-top input[type=checkbox] + label:after,
.c-input--checkbox.align-top input[type=checkbox] + .c-form-field__label:after {
  top: 11px;
}
@media (min-width: 48em) {
  .custom-checkbox.align-top input[type=radio] + label:after,
  .custom-checkbox.align-top input[type=radio] + .c-form-field__label:after,
  .custom-checkbox.align-top input[type=checkbox] + label:after,
  .custom-checkbox.align-top input[type=checkbox] + .c-form-field__label:after,
  .c-input--radio.align-top input[type=radio] + label:after,
  .c-input--radio.align-top input[type=radio] + .c-form-field__label:after,
  .c-input--radio.align-top input[type=checkbox] + label:after,
  .c-input--radio.align-top input[type=checkbox] + .c-form-field__label:after,
  .c-input--checkbox.align-top input[type=radio] + label:after,
  .c-input--checkbox.align-top input[type=radio] + .c-form-field__label:after,
  .c-input--checkbox.align-top input[type=checkbox] + label:after,
  .c-input--checkbox.align-top input[type=checkbox] + .c-form-field__label:after {
    top: 14px;
  }
}

/* Checkboxes */
.custom-checkbox input[type=checkbox] + label:before,
.custom-checkbox input[type=checkbox] + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox] + label:before,
.c-input--checkbox input[type=checkbox] + .c-form-field__label:before {
  border-radius: 4px;
}
.custom-checkbox input[type=checkbox] + label:after,
.custom-checkbox input[type=checkbox] + .c-form-field__label:after,
.c-input--checkbox input[type=checkbox] + label:after,
.c-input--checkbox input[type=checkbox] + .c-form-field__label:after {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 11px;
  height: 5px;
  border: 2px solid hsl(0, 0%, 100%);
  border-top-style: none;
  border-right-style: none;
  box-sizing: content-box;
  content: "";
  transform: scale(0) translateY(-50%) rotate(0deg);
  transform-origin: 50% 0;
  transition: transform 200ms ease-out;
  z-index: 1;
}
.custom-checkbox input[type=checkbox]:disabled + label,
.custom-checkbox input[type=checkbox]:disabled + .c-form-field__label,
.c-input--checkbox input[type=checkbox]:disabled + label,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label {
  color: #d9d8d5;
}
.custom-checkbox input[type=checkbox]:disabled + label:before,
.custom-checkbox input[type=checkbox]:disabled + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox]:disabled + label:before,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label:before {
  border-color: #d9d8d5;
}
.custom-checkbox input[type=checkbox]:disabled + label:focus:before, .custom-checkbox input[type=checkbox]:disabled + label:hover:before,
.custom-checkbox input[type=checkbox]:disabled + .c-form-field__label:focus:before,
.custom-checkbox input[type=checkbox]:disabled + .c-form-field__label:hover:before,
.c-input--checkbox input[type=checkbox]:disabled + label:focus:before,
.c-input--checkbox input[type=checkbox]:disabled + label:hover:before,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label:focus:before,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label:hover:before {
  background-color: inherit;
}
.custom-checkbox input[type=checkbox]:disabled:checked + label:before,
.custom-checkbox input[type=checkbox]:disabled:checked + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox]:disabled:checked + label:before,
.c-input--checkbox input[type=checkbox]:disabled:checked + .c-form-field__label:before {
  border-color: #d9d8d5;
  background-color: #d9d8d5;
}
.custom-checkbox input[type=checkbox]:disabled:checked + label:after,
.custom-checkbox input[type=checkbox]:disabled:checked + .c-form-field__label:after,
.c-input--checkbox input[type=checkbox]:disabled:checked + label:after,
.c-input--checkbox input[type=checkbox]:disabled:checked + .c-form-field__label:after {
  border-color: hsl(0, 0%, 100%);
}
.custom-checkbox input[type=checkbox]:checked + label:before,
.custom-checkbox input[type=checkbox]:checked + .c-form-field__label:before,
.c-input--checkbox input[type=checkbox]:checked + label:before,
.c-input--checkbox input[type=checkbox]:checked + .c-form-field__label:before {
  animation: borderscale 300ms ease-in;
  border-color: #1788c3;
  background-color: #1788c3;
}
.custom-checkbox input[type=checkbox]:checked + label:after,
.custom-checkbox input[type=checkbox]:checked + .c-form-field__label:after,
.c-input--checkbox input[type=checkbox]:checked + label:after,
.c-input--checkbox input[type=checkbox]:checked + .c-form-field__label:after {
  transform: scale(1) translateY(-50%) rotate(-45deg);
}
.custom-checkbox.is-consent input[type=checkbox] + label:before,
.custom-checkbox.is-consent input[type=checkbox] + .c-form-field__label:before,
.c-input--checkbox.is-consent input[type=checkbox] + label:before,
.c-input--checkbox.is-consent input[type=checkbox] + .c-form-field__label:before {
  top: 0;
  transform: translateY(0%);
}
.custom-checkbox.is-consent input[type=checkbox] + label:after,
.custom-checkbox.is-consent input[type=checkbox] + .c-form-field__label:after,
.c-input--checkbox.is-consent input[type=checkbox] + label:after,
.c-input--checkbox.is-consent input[type=checkbox] + .c-form-field__label:after {
  top: 7px;
  transform: scale(0) translateY(0%) rotate(0deg);
}
.custom-checkbox.is-consent input[type=checkbox]:checked + label:after,
.custom-checkbox.is-consent input[type=checkbox]:checked + .c-form-field__label:after,
.c-input--checkbox.is-consent input[type=checkbox]:checked + label:after,
.c-input--checkbox.is-consent input[type=checkbox]:checked + .c-form-field__label:after {
  transform: scale(1) translateY(0%) rotate(-45deg);
}
.custom-checkbox.has-no-label input[type=checkbox] + label,
.custom-checkbox.has-no-label input[type=checkbox] + .c-form-field__label,
.c-input--checkbox.has-no-label input[type=checkbox] + label,
.c-input--checkbox.has-no-label input[type=checkbox] + .c-form-field__label {
  padding-left: 22px;
}

.o-form-input-name-rememberDevice .custom-checkbox {
  margin-top: -20px;
}
.o-form-input-name-rememberDevice .custom-checkbox input[type=checkbox] + label {
  padding-left: 28px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.35;
}
.o-form-input-name-rememberDevice .custom-checkbox input[type=checkbox] + label::before {
  width: 16px;
  height: 16px;
}
.o-form-input-name-rememberDevice .custom-checkbox input[type=checkbox] + label::after {
  width: 9px;
  height: 3px;
}

/* Radio buttons */
.c-input--radio input[type=radio] + label:before,
.c-input--radio input[type=radio] + .c-form-field__label:before {
  border-radius: 50%;
}
.c-input--radio input[type=radio] + label:after,
.c-input--radio input[type=radio] + .c-form-field__label:after {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 12px;
  height: 12px;
  background-color: #1788c3;
  border-radius: 50%;
  content: "";
  box-sizing: content-box;
  transform: scale(0) translateY(-50%);
  transform-origin: 50% 0;
  transition: transform 200ms ease-out;
}
.c-input--radio input[type=radio]:disabled + label,
.c-input--radio input[type=radio]:disabled + .c-form-field__label {
  color: #d9d8d5;
  cursor: default;
}
.c-input--radio input[type=radio]:disabled + label:before,
.c-input--radio input[type=radio]:disabled + .c-form-field__label:before {
  border-color: #d9d8d5;
}
.c-input--radio input[type=radio]:disabled + label:focus:before, .c-input--radio input[type=radio]:disabled + label:hover:before,
.c-input--radio input[type=radio]:disabled + .c-form-field__label:focus:before,
.c-input--radio input[type=radio]:disabled + .c-form-field__label:hover:before {
  background-color: inherit;
}
.c-input--radio input[type=radio]:disabled:checked + label:after,
.c-input--radio input[type=radio]:disabled:checked + .c-form-field__label:after {
  background-color: #d9d8d5;
}
.c-input--radio input[type=radio]:checked + label:before,
.c-input--radio input[type=radio]:checked + .c-form-field__label:before {
  animation: borderscale 300ms ease-in;
  background-color: hsl(0, 0%, 100%);
}
.c-input--radio input[type=radio]:checked + label:after,
.c-input--radio input[type=radio]:checked + .c-form-field__label:after {
  transform: scale(1) translateY(-50%);
}

.is-disabled .c-sleep-icon {
  cursor: none !important;
  opacity: 0.3;
}

.sleepyface_radio > span {
  display: block;
}
.sleepyface_radio .c-sleep-icon {
  margin: 0 auto 12px auto;
  width: 80px;
  height: 80px;
  color: hsl(0, 0%, 40%);
  transition: color 250ms ease-out;
}
.sleepyface_radio .c-sleep-icon .c-svg {
  width: 100%;
  height: 100%;
}
.sleepyface_radio:hover .c-sleep-icon, .sleepyface_radio:focus .c-sleep-icon {
  will-change: color;
  color: hsl(0, 0%, 20%);
}
.sleepyface_radio[data-state=is-active] .c-sleep-icon {
  color: #1788c3;
}
.sleepyface_radio input[type=radio] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.sleepyface_radio input[type=radio] + label {
  position: relative;
  padding-left: 0;
  padding-top: 86px;
  vertical-align: bottom;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}
.sleepyface_radio input[type=radio]:checked + label {
  color: #1788c3;
}
.sleepyface_radio input[type=radio]:disabled + label {
  color: #f6f6f6;
}
.sleepyface_radio input[type=radio]:disabled:focus + label, .sleepyface_radio input[type=radio]:disabled:hover + label {
  color: inherit;
}
.sleepyface_radio input[type=radio]:disabled:checked + label {
  color: #f6f6f6;
}

.c-input--img-radio {
  border: 0;
  height: unset;
}
.c-input--img-radio .c-svg {
  width: 100%;
  height: 100%;
}
.c-input--img-radio input[type=radio] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.c-input--img-radio input[type=radio] + label {
  position: relative;
  display: block;
  max-width: 80px;
  height: 80px;
  margin: 0 auto;
  padding: 0;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
  color: hsl(0, 0%, 40%);
  transition: color 250ms ease-out;
}
.c-input--img-radio input[type=radio]:hover + label, .c-input--img-radio input[type=radio]:focus + label {
  will-change: color;
  color: hsl(0, 0%, 20%);
}
.c-input--img-radio input[type=radio]:checked + label {
  color: #1788c3;
}
.c-input--img-radio input[type=radio]:disabled + label {
  color: #f6f6f6;
}
.c-input--img-radio input[type=radio]:disabled:focus + label, .c-input--img-radio input[type=radio]:disabled:hover + label {
  color: inherit;
}
.c-input--img-radio input[type=radio]:disabled:checked + label {
  color: #f6f6f6;
}

/**
 * Combo field input and button, like a search field with an icon button next
 * to it.
 *

    <div class="c-form-field">
      <label class="c-form-field__label">Search</label>
      <div class="c-form-field--btn-combo">
        <input type="text" name="name" class="c-input c-input--btn-combo" placeholder="Search" />
        <a class="c-btn c-btn--primary  [ c-btn--input-combo ]" role="button"><span>Search</span></a>
      </div>
    </div>

 *
 * 1. Add classes to target PrimeNG controls. Remove if not using PrimeNG.
 * 2. The field is probably in a colum or container with a width, make the
 *    field full width minus the width of your button. Default is 40px for
 *    the search icon.
 * 3. Remove the border radii on the right side of the field.
 */
.c-form-field--btn-combo {
  font-size: 0;
}
.c-form-field--btn-combo .c-input--btn-combo,
.c-form-field--btn-combo .c-btn--input-combo {
  font-size: 16px;
  font-size: 1rem;
}

.c-input--btn-combo, .c-input--btn-combo.ui-inputtext { /* [1] */
  padding-left: 12px;
  padding-right: 12px;
  width: 76%;
  width: -mox-calc(100% - 40px);
  width: -o-calc(100% - 40px);
  width: calc(100% - 40px);
  /* [2] */
  max-width: 100%;
  border: 1px solid #b7b7b8;
  border-radius: 3px;
  border-top-right-radius: 0 !important; /* [3] */
  border-bottom-right-radius: 0 !important; /* [3] */
}

/* Validation styles
   ========================================================================== */
.c-form--has-validation {
  padding-left: 6px; /* [1] */
}
@media (min-width: 62em) {
  .c-form--has-validation {
    padding-left: 0;
  }
}

.c-input--validation {
  position: relative;
}
.c-input--validation:before {
  position: absolute;
  left: -24px;
  width: 24px;
  height: 24px;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--validation[data-form-field-status=completed]:before {
  top: 10px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%236CB454' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4-10.6 10.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--validation[data-form-field-status=error]:before {
  top: 9px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23DA1F3D' d='M18.369 4.216l-6.37 6.37-6.37-6.37-1.414 1.414 6.37 6.37-6.37 6.37 1.414 1.414 6.37-6.37 6.37 6.37 1.414-1.414-6.37-6.37 6.37-6.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--validation[data-form-field-status=error] .c-input {
  border-color: #da1f3d;
}
.c-input--validation[data-form-field-status=error] [type=radio],
.c-input--validation[data-form-field-status=error] [type=checkbox] {
  border: 1px solid #da1f3d;
}
.c-input--validation[data-form-field-status=warning]:before {
  top: 8px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFC344' d='M12 17c1.1 0 2 0.9 2 2s-0.9 2-2 2-2-0.9-2-2 0.9-2 2-2zM10 3h4v12h-4v-12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--validation[data-form-field-status=warning] .c-input {
  border-color: #ffc344;
  box-shadow: 0 0 4px #ffc344;
}
.c-input--validation[data-form-field*=-gender]:before {
  top: 0;
}
@media (min-width: 48em) {
  .c-input--validation[data-form-field*=-gender]:before {
    top: 4px;
  }
}
.c-input--validation[data-form-field*=-MaskType]:before, .c-input--validation[data-form-field*=-sleep-test]:before {
  top: 40px;
}
@media (min-width: 48em) {
  .c-input--validation[data-form-field*=-MaskType]:before, .c-input--validation[data-form-field*=-sleep-test]:before {
    top: 68px;
  }
}
.c-input--validation[data-form-field*=-MaskModel]:before {
  top: 0;
}
.c-input--validation[data-form-field=signup-accept-terms]:before {
  top: 23px;
}
@media (min-width: 48em) {
  .c-input--validation[data-form-field=signup-accept-terms]:before {
    top: 26px;
  }
}
.c-input--validation[data-form-field=signup-accept-terms] .c-input--checkbox input[type=checkbox] + label:before,
.c-input--validation[data-form-field=signup-accept-terms] .c-input--checkbox input[type=checkbox] + .c-form-field__label:before {
  top: -4px;
}
.c-input--validation[data-form-field=signup-accept-terms] .c-input--checkbox input[type=checkbox] + label:after,
.c-input--validation[data-form-field=signup-accept-terms] .c-input--checkbox input[type=checkbox] + .c-form-field__label:after {
  top: 3px;
}
.c-input--validation[data-form-field=signup-accept-terms-eu]:before, .c-input--validation[data-form-field=signup-accept-privacy-eu]:before {
  top: 0;
}
@media (min-width: 48em) {
  .c-input--validation[data-form-field=signup-accept-terms-eu]:before, .c-input--validation[data-form-field=signup-accept-privacy-eu]:before {
    top: 4px;
  }
}

/* Custom form controls
   ========================================================================== */
/* Phony image radio button hybrid
 *
 * 1. Default size for picker element, use modifier class to size specific controls.
*/
.c-form-img-picker {
  display: block;
  width: 80px; /* [1] */
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 25.875em) {
  .c-form-img-picker {
    width: 100px; /* [1] */
  }
}
@media (min-width: 48em) {
  .c-form-img-picker {
    width: 150px; /* [1] */
  }
}

/*.c-form-img-picker--mask-type {
    width: 100px;
    height: 100px;

    @include mq($from: tablet) {
        width: 150px;
        height: 150px;
    }

}*/
.c-form-img-picker--masks,
.c-form-img-picker--device {
  width: auto;
  height: auto;
}

.c-form-img-picker__item {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  background-color: hsl(0, 0%, 100%);
  border: none;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  appearance: none;
}
.c-form-img-picker--masks .c-form-img-picker__item, .c-form-img-picker--device .c-form-img-picker__item {
  margin: 0;
}

.c-form-img-picker__img {
  width: 100%;
  height: 100%;
  outline: none;
  line-height: 1;
  border-width: 5px;
  border-style: solid;
  border-color: #e6e6e7;
  transition: border 350ms ease;
}
.c-form-img-picker__img:hover, .c-form-img-picker__img:focus, .c-form-img-picker__img:active {
  border-color: #1788c3;
}
.is-active .c-form-img-picker__img {
  border-color: #0077c0;
}

@media (max-width: 47.99em) {
  .c-form-img-picker--device {
    margin-bottom: 24px;
  }
}
.c-form-img-picker--device .c-form-img-picker__img {
  position: relative; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  width: 200px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  align-items: center;
}
@media (min-width: 48em) {
  .c-form-img-picker--device .c-form-img-picker__img {
    width: 286px;
    height: 286px;
  }
}
.c-form-img-picker--device .c-form-img-picker__img > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: initial;
}

.c-form-img-picker__label {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #6d6d6d;
  font-weight: 300;
}
@media (min-width: 48em) {
  .c-form-img-picker__label {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }
}

.c-form-img-picker__item--round {
  border-width: 5px;
  border-style: solid;
  border-color: #e6e6e7;
  border-radius: 50%;
  transition: border 350ms ease;
}
.c-form-img-picker__item--round:hover, .c-form-img-picker__item--round:focus, .c-form-img-picker__item--round:active {
  border-color: #1788c3;
}
.c-form-img-picker__item--round.is-active {
  border-color: #0077c0;
}
.c-form-img-picker__item--round img,
.c-form-img-picker__item--round [type=image] {
  border: none;
  border-radius: 50%;
}

.c-input--dummy-radio {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  border: 1px solid hsl(0, 0%, 80%);
  box-shadow: inset 0px 0px 0px 3px white;
  border-radius: 40px;
}
.is-active .c-input--dummy-radio {
  background-color: #1788c3;
}

/* Form buttons
   ========================================================================== */
/**
 * Group your Save and Cancel buttons inline.
 * {Button} can be an anchor tag, button tag, or input.
 *
 * HTML

    <div class="c-form-buttons  [ o-layout o-layout--auto ]">
      <div class="o-layout__item">
        < {button} class="c-btn c-btn--primary" [...]>Save</>
      </div>
      <div class="o-layout__item">
        < {button} class="c-btn c-btn--secondary" [...]>Cancel</>
      </div>
    </div>

 *
 */
.c-form-buttons {
  margin-bottom: 0;
  padding-top: 24px;
}
@media (min-width: 48em) {
  .c-form-buttons {
    padding-top: 48px;
  }
}
@media (max-width: 47.99em) {
  .c-form-buttons.o-layout--auto > .o-layout__item {
    width: 100% !important;
  }
}
@media (min-width: 48em) {
  .c-form-buttons .c-btn {
    margin-bottom: 0;
  }
}

.c-form-field--buttons {
  margin-bottom: 0;
  margin-top: 24px;
}
.c-form-field--buttons .c-btn {
  margin-bottom: 0;
}

.c-form-field--buttons-wizard {
  display: block;
  padding-top: 24px;
  border-top: 1px solid #e6e6e7;
}
.c-form-field--buttons-wizard:after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 61.99em) {
  .c-form-field--buttons-wizard {
    width: auto;
    margin-right: -24px;
    margin-left: -24px;
    padding-right: 24px;
    padding-left: 24px;
  }
}

.c-form-field--buttons-wizard__next {
  margin-bottom: 24px;
}
@media (min-width: 48em) {
  .c-form-field--buttons-wizard__next {
    width: 50%;
    margin-bottom: 0;
    float: right;
    text-align: right;
  }
}

.c-form-field--buttons-wizard__back {
  margin-bottom: 24px;
}
@media (min-width: 48em) {
  .c-form-field--buttons-wizard__back {
    width: 50%;
    margin-bottom: 0;
    float: left;
  }
}

/* Hidden form control
   ========================================================================== */
/**
 * Form input that is hidden from view until a user interaction occurs.
 * Such as showning a text input field when the user select `Other` from a
 * radio button list. Works with JS to toggle data-state.
 */
.c-hidden-field .c-hidden-field__item {
  transition: max-height 500ms ease-out, opacity 500ms ease-out 150ms;
}
.c-hidden-field[data-state=is-hidden] .c-hidden-field__item {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.c-hidden-field[data-state=is-animating] .c-hidden-field__item {
  opacity: 0;
}
.c-hidden-field[data-state=is-active] .c-hidden-field__item {
  margin-top: 0;
  max-height: 400px;
  overflow: visible;
  opacity: 1;
  will-change: opacity;
}

/* Group input types
   ========================================================================== */
.c-input-rc-group {
  display: block;
}

.rc-group__item {
  display: block;
  margin: 0;
  margin-bottom: 24px;
  font-weight: 400;
  line-height: 1;
}

.rc-group--inline {
  margin-left: -24px;
  font-size: 0;
}
.rc-group--inline .rc-group__item {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding-left: 24px;
  font-size: 16px; /* [6] */
  font-size: 1rem;
}

.c-input-radio {
  vertical-align: baseline;
}
.c-input-radio label,
.c-input-radio .c-form-field__label {
  display: inline-block;
  width: 76%;
  width: -mox-calc(100% - 22px);
  width: -o-calc(100% - 22px);
  width: calc(100% - 22px);
  max-width: 100%;
  color: hsl(0, 0%, 0%);
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  font-weight: 400;
}
.c-input-radio label:after,
.c-input-radio .c-form-field__label:after {
  content: "";
  white-space: initial;
}
.c-input-radio label.is-hint,
.c-input-radio .c-form-field__label.is-hint {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 48em) {
  .c-input-radio label,
  .c-input-radio .c-form-field__label {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}

.c-input-checkbox:after {
  content: "";
  display: table;
  clear: both;
}
.c-input-checkbox label,
.c-input-checkbox .c-form-field__label {
  display: inline;
  color: hsl(0, 0%, 0%);
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  font-weight: 400;
}
.c-input-checkbox label:after,
.c-input-checkbox .c-form-field__label:after {
  content: "";
  white-space: initial;
}
.c-input-checkbox label.is-hint,
.c-input-checkbox .c-form-field__label.is-hint {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 48em) {
  .c-input-checkbox label,
  .c-input-checkbox .c-form-field__label {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}
.c-input-checkbox [type=checkbox] {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  margin-right: 6px;
}
.o-media .c-input-checkbox [type=checkbox] {
  margin-right: 0;
}

.c-input--signup-terms {
  padding-top: 48px;
}

/* ==========================================================================
 #JQUERY TABS
 ========================================================================== */
/* jQuery UI stuff */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0; /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Customizations.
  ========================================================================== */
.c-jq-tabs--faq {
  animation: aniStayHidden 500ms, aniFadeIn 500ms ease-out 500ms 1;
}
@media (max-width: 47.99em) {
  .c-jq-tabs--faq {
    margin-left: -24px;
    margin-right: -24px;
  }
}
.c-jq-tabs--faq.ui-tabs {
  position: relative;
  margin-bottom: 24px;
}
.c-jq-tabs--faq.ui-tabs:after {
  content: "";
  display: table;
  clear: both;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0;
  width: 49%;
  padding-right: 12px;
  float: left;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li {
  position: relative;
  list-style: none;
  display: block;
  top: 0;
  margin: 0;
  padding: 0;
  border-width: 0 0 1px;
  border-color: #dfdfdf;
  border-style: solid;
  white-space: nowrap;
  background-color: #f6f6f6;
  transition: background-color 250ms ease-out;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li:first-child {
  border-width: 1px 0;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li a {
  position: relative;
  cursor: default;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li a.ui-tabs-anchor {
  display: block;
  padding: 0;
  text-decoration: none;
  color: hsl(0, 0%, 60%);
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li a span {
  position: relative;
  display: block;
  padding: 12px 24px;
  padding-left: 48px;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li a .c-svg {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 6px;
  transform-origin: 50% 50%;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  background-color: hsl(0, 0%, 100%);
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li.ui-tabs-active a.ui-tabs-anchor {
  color: #2f2f2f;
}
.c-jq-tabs--faq.ui-tabs .ui-tabs-nav li.ui-tabs-active a .c-svg {
  display: block;
}
.c-jq-tabs--faq.ui-tabs .c-jq-tabs__panel {
  display: block;
  padding: 0;
  border-width: 1px 0;
  border-color: #dfdfdf;
  border-style: solid;
  width: 49%;
  padding-left: 12px;
  float: right;
}
.c-jq-tabs--faq.ui-tabs .c-jq-tabs__panel .ui-tabs-panel {
  padding: 12px 0 0 24px;
  border-width: 0;
  background: none;
  color: #2f2f2f;
}
.c-jq-tabs--faq.ui-tabs .c-jq-tabs__panel .ui-tabs-panel ul {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.c-jq-tabs--faq.ui-tabs .c-jq-tabs__panel .ui-tabs-panel ul li {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  margin-bottom: 8px;
}
.c-jq-tabs--faq.ui-tabs .c-jq-tabs__panel .ui-tabs-panel .c-svg {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 46px;
}
.c-jq-tabs--faq.ui-tabs .c-jq-tabs__panel .ui-tabs-panel.myequipment .c-svg {
  top: 5px;
  width: 72px;
  height: 54px;
}

.jQaccordion.ui-accordion {
  position: relative;
  margin-bottom: 24px;
  border-width: 0 0 1px;
  border-color: #dfdfdf;
  border-style: solid;
}
.jQaccordion.ui-accordion h3 {
  position: relative;
  border-width: 1px 0 0;
  border-color: #dfdfdf;
  border-style: solid;
  white-space: nowrap;
  background-color: hsl(0, 0%, 95%);
  margin: 0;
  color: hsl(0, 0%, 40%);
  cursor: pointer;
  outline: none;
}
.jQaccordion.ui-accordion h3 span {
  position: relative;
  display: block;
  padding: 12px 24px;
  padding-right: 48px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 48em) {
  .jQaccordion.ui-accordion h3 span {
    padding: 12px 8px;
  }
}
.jQaccordion.ui-accordion h3 .c-svg {
  display: block;
  position: absolute;
  top: 50%;
  right: 24px;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  transition: transform 250ms ease-out;
}
@media (min-width: 48em) {
  .jQaccordion.ui-accordion h3 .c-svg {
    right: 4px;
  }
}
.jQaccordion.ui-accordion h3.expanded, .jQaccordion.ui-accordion h3.ui-state-active {
  background-color: hsl(0, 0%, 100%);
  color: #2f2f2f;
}
.jQaccordion.ui-accordion h3.expanded span, .jQaccordion.ui-accordion h3.ui-state-active span {
  font-weight: 600;
}
.jQaccordion.ui-accordion h3.expanded .c-svg, .jQaccordion.ui-accordion h3.ui-state-active .c-svg {
  transform: rotate(180deg) translateY(50%);
}
.jQaccordion.ui-accordion .tab_panel {
  display: none;
  padding: 8px 24px 30px;
  background-color: hsl(0, 0%, 100%);
}
@media (min-width: 48em) {
  .jQaccordion.ui-accordion .tab_panel {
    padding: 8px 8px 30px;
  }
}
.jQaccordion.ui-accordion .tab_panel h3,
.jQaccordion.ui-accordion .tab_panel .c-svg {
  display: none;
}
.jQaccordion.ui-accordion .tab_panel ul {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.jQaccordion.ui-accordion .tab_panel ul li {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  margin-bottom: 12px;
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Define some heading styles to modify `h1` through `h6` elements
 *
 * Related files:
 * settings/settings.typography.scss
 * elements/elements.typography.scss
 */
/* Headings in the resx with no class names */
.c-heading-resx h1, .c-heading-resx h2, .c-heading-resx h3 {
  color: #424243;
}
.c-heading-resx.otp-header {
  margin-bottom: 24px;
}
.c-heading-resx.otp-header h1, .c-heading-resx.otp-header h2, .c-heading-resx.otp-header h3 {
  margin-bottom: 0;
}

.c-heading-congrats h2 {
  line-height: 1.25;
}

.c-heading-page {
  color: #424243;
  font-weight: 700;
}

.c-heading-main {
  color: #424243;
  font-weight: 700;
  line-height: 1.15;
}

.c-heading-acc {
  margin-bottom: 0;
  line-height: 1;
  color: #424243;
  font-weight: 600;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

.js-content h2,
.c-heading-sub {
  color: #424243;
  line-height: 1.25;
}

.c-heading-section {
  color: hsl(0, 0%, 10%);
  font-weight: 600;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}
.o-section--tips .c-heading-section {
  margin-bottom: 0;
  text-align: center;
}
@media (min-width: 48em) {
  .o-section--tips .c-heading-section {
    text-align: left;
  }
}

.c-heading-parent {
  margin-bottom: 6px;
  text-transform: uppercase;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.c-heading-blue {
  color: #1788c3;
}

.c-heading-icon {
  position: relative;
  margin: 0;
  text-align: center;
  color: #424243;
}
.c-heading-icon .c-svg {
  display: block;
  margin: 0 auto;
  font-size: 100px;
  font-size: 6.25rem;
  line-height: 1.08;
  color: hsl(0, 0%, 0%);
}

.c-heading-headline {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.1666666667;
  font-weight: 600;
}
@media (min-width: 48em) {
  .c-heading-headline {
    font-size: 50px;
    font-size: 3.125rem;
    line-height: 1.2;
  }
}

.c-heading-region {
  margin-bottom: 0;
  padding: 16px 42px;
  color: #424243;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.3636363636;
  font-weight: 700;
}
@media (min-width: 48em) {
  .c-heading-region {
    margin-bottom: 24px;
    padding: 0;
    padding-bottom: 6px;
    border-bottom: 1px dotted #ebebeb;
  }
}
@media (min-width: 75em) {
  html:lang(fi) .c-heading-region, html:lang(nb) .c-heading-region, html:lang(sv) .c-heading-region {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.3333333333;
  }
}

.c-heading-location {
  text-align: center;
}
@media (max-width: 47.99em) {
  .c-heading-location {
    padding: 0 24px;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.25;
  }
}

/**
 * Text and label modifiers
 */
.c-text--intro {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.75;
}
@media (min-width: 62em) {
  .c-text--intro {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2.25;
  }
}

.c-text--headline-copy {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #6d6d6d;
  font-weight: 600;
}

.c-text--greyed-out {
  font-style: italic;
  color: #b7b7b8;
}

.c-text--small {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
}

.c-text--optional {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: inherit;
  color: #6d6d6d;
}

.c-instructions {
  margin: 0;
  margin-bottom: 48px;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  font-weight: 400;
  text-align: center;
}

.c-heading-sleep-steps {
  line-height: normal;
  text-align: center;
  margin-bottom: 48px;
}
@media (min-width: 62em) {
  .c-heading-sleep-steps {
    margin-bottom: 96px;
  }
}

.c-content--sleep-steps {
  margin-bottom: 48px;
}
@media (min-width: 48em) {
  .c-content--sleep-steps {
    margin: 0;
    padding: 0 12px;
  }
}
@media (min-width: 62em) {
  .c-content--sleep-steps {
    padding: 0 48px;
  }
}

.c-text--sleep-steps {
  border-width: 0;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #dbdbdb;
}
@media (min-width: 48em) {
  .c-text--sleep-steps {
    padding-top: 48px;
    border-width: 0;
    border-top-width: 1px;
  }
}

.c-text--screen-tip {
  position: relative;
  margin-top: 12px;
  padding-left: 24px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.c-text--screen-tip .c-text--screen-tip-num {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 20px;
  color: hsl(0, 0%, 100%);
  text-align: center;
  text-indent: -1px;
  background-color: #494949;
  border-radius: 50%;
}

/* Links
  ========================================================================== */
.auth-footer .link,
.resend-email-btn,
.c-link-ui {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: 600;
  background: none;
  appearance: none;
}
.auth-footer .link, .auth-footer .link:link, .auth-footer .link:visited,
.resend-email-btn,
.resend-email-btn:link,
.resend-email-btn:visited,
.c-link-ui,
.c-link-ui:link,
.c-link-ui:visited {
  color: #1788c3 !important;
}
.auth-footer .link:hover,
.resend-email-btn:hover,
.c-link-ui:hover {
  color: #3392CD;
  text-decoration: underline;
  cursor: pointer;
}
.auth-footer .link:active,
.resend-email-btn:active,
.c-link-ui:active {
  color: #2d80b4;
}
.auth-footer .link.is-delete, .auth-footer .link.is-delete:link, .auth-footer .link.is-delete:visited,
.resend-email-btn.is-delete,
.resend-email-btn.is-delete:link,
.resend-email-btn.is-delete:visited,
.c-link-ui.is-delete,
.c-link-ui.is-delete:link,
.c-link-ui.is-delete:visited {
  color: #da1f3d !important;
}
.auth-footer .link.is-delete:hover,
.resend-email-btn.is-delete:hover,
.c-link-ui.is-delete:hover {
  color: #cd1d39;
}
.auth-footer .link.is-delete:active,
.resend-email-btn.is-delete:active,
.c-link-ui.is-delete:active {
  color: #c01b36;
}
.auth-footer .link:disabled, .auth-footer .link.is-disabled,
.resend-email-btn:disabled,
.resend-email-btn.is-disabled,
.c-link-ui:disabled,
.c-link-ui.is-disabled {
  transition: none;
}
.auth-footer .link:disabled, .auth-footer .link:disabled:link, .auth-footer .link:disabled:visited, .auth-footer .link:disabled:hover, .auth-footer .link:disabled:active, .auth-footer .link:disabled:focus, .auth-footer .link.is-disabled, .auth-footer .link.is-disabled:link, .auth-footer .link.is-disabled:visited, .auth-footer .link.is-disabled:hover, .auth-footer .link.is-disabled:active, .auth-footer .link.is-disabled:focus,
.resend-email-btn:disabled,
.resend-email-btn:disabled:link,
.resend-email-btn:disabled:visited,
.resend-email-btn:disabled:hover,
.resend-email-btn:disabled:active,
.resend-email-btn:disabled:focus,
.resend-email-btn.is-disabled,
.resend-email-btn.is-disabled:link,
.resend-email-btn.is-disabled:visited,
.resend-email-btn.is-disabled:hover,
.resend-email-btn.is-disabled:active,
.resend-email-btn.is-disabled:focus,
.c-link-ui:disabled,
.c-link-ui:disabled:link,
.c-link-ui:disabled:visited,
.c-link-ui:disabled:hover,
.c-link-ui:disabled:active,
.c-link-ui:disabled:focus,
.c-link-ui.is-disabled,
.c-link-ui.is-disabled:link,
.c-link-ui.is-disabled:visited,
.c-link-ui.is-disabled:hover,
.c-link-ui.is-disabled:active,
.c-link-ui.is-disabled:focus {
  cursor: default;
  background-image: none;
  border: 0;
  opacity: 0.3;
  text-decoration: none;
}

/* ==========================================================================
   #ICONS
   ========================================================================== */
/**
 * Create design patterns with icons.
 */
.c-icon {
  position: relative;
  display: inline-block;
}
.c-icon:before {
  display: inline-block;
  color: inherit;
}
.is-disabled .c-icon, [data-state=is-disabled] .c-icon {
  cursor: none !important;
  opacity: 0.3;
}
.c-icon span {
  display: none;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}

.c-icon--drop-down-arrow:before {
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.res-info {
  position: relative;
  cursor: pointer;
  text-align: left;
}
.res-info:before {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 2px;
  left: 0 !important;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 20px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
  border-width: 1px;
  border-style: solid;
  border-color: hsl(0, 0%, 0%);
  border-radius: 50%;
  transition: background-color 250ms ease-out, border-color 250ms ease-out;
}
.res-info:hover:before {
  background-color: #1788c3;
  color: hsl(0, 0%, 100%) !important;
  border-color: #1788c3;
}

.c-icon-otp-demo {
  font-size: 33px;
  font-size: 2.0625rem;
  line-height: 1.2727272727;
  transition: color 250ms ease-out, color 250ms ease-out;
}
.c-icon-otp-demo, .c-icon-otp-demo:link, .c-icon-otp-demo:visited, .c-icon-otp-demo:active {
  color: hsl(0, 0%, 0%);
  text-decoration: none !important;
}
.c-icon-otp-demo:hover {
  color: #0077c0;
  text-decoration: none !important;
}

.c-icon-hero {
  position: relative;
  display: inline-block;
  margin: 0 auto 48px;
  font-size: 80px;
  font-size: 5rem;
  line-height: 1.125;
}

.c-icon-hero--success {
  color: #6cb454;
}

.c-icon-hero--error {
  color: #da1f3d;
}

.c-icon-display {
  width: 32px;
  height: 32px;
}
.c-icon-display.icon-lg {
  width: 48px;
  height: 48px;
}
.c-icon-display .c-svg {
  width: 100%;
  height: 100%;
  top: 0;
}

/* ==========================================================================
   #ICON BUTTONS
   ========================================================================== */
/**
 * Icon buttons are just that, an icon which acts as buttons. For example,
 * the close button on a modal window, or the play button over a video thumbnail.
 * 
 */
.c-icon-btn {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 0;
  background-color: transparent;
  cursor: pointer;
  appearance: none;
}
.c-icon-btn, .c-icon-btn:link, .c-icon-btn:visited, .c-icon-btn:hover, .c-icon-btn:active, .c-icon-btn:focus {
  text-decoration: none;
}
.c-icon-btn:disabled {
  transition: none;
}
.c-icon-btn:disabled, .c-icon-btn:disabled:hover {
  cursor: default;
  background-image: none;
  border: 0;
  opacity: 0.3;
}
.c-icon-btn .c-svg, .c-icon-btn .c-svg.c-svg--baseline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.c-icon-btn--label {
  width: auto;
  height: auto;
  font-size: 0;
}
.c-icon-btn--label > * {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 0;
}

.c-icon-btn__icon {
  position: relative;
  margin-right: 12px;
  width: 32px;
  height: 32px;
}
.c-icon-btn__icon .c-svg {
  width: 100%;
  height: 100%;
}

.c-icon-btn__label {
  text-align: left;
  font-weight: 600;
}

.c-icon-btn-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 100;
}

.c-icon-btn--play {
  width: 80px;
  height: 80px;
  text-align: center;
  color: hsl(0, 0%, 100%);
}
.c-icon-btn--play .c-svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
  fill: currentColor;
  transition: filter 250ms ease-out;
}
.c-icon-btn--play .c-svg:hover {
  background-color: transparent;
  filter: url(#drop-shadow);
}

/**
 * 'X' type button for closing windows and overlays
 *
 * HTML

    <button class="c-icon-btn c-icon-btn--close js-close-btn">
      <svg class="c-svg c-svg--close-24"><use xlink:href="#c-svg--close-24"></use></svg>
    </button>

  Inverse - white X on dark background

    <button class="c-icon-btn c-icon-btn--close is-inverse js-close-btn">
      <svg class="c-svg c-svg--close-24"><use xlink:href="#c-svg--close-24"></use></svg>
    </button>

 */
.c-icon-btn--close {
  z-index: 0;
}
.c-icon-btn--close, .c-icon-btn--close:link, .c-icon-btn--close:visited {
  color: #424243;
}
.is-inverse.c-icon-btn--close, .c-icon-btn--close:link, .c-icon-btn--close:visited {
  color: hsl(0, 0%, 100%);
}

.c-icon-btn--close:before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-icon-btn--close:hover, .c-icon-btn--close:active, .c-icon-btn--close:focus {
  color: hsl(0, 0%, 0%);
}
.c-icon-btn--close:hover:before, .c-icon-btn--close:active:before, .c-icon-btn--close:focus:before {
  background-color: hsl(0, 0%, 100%);
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}
.c-icon-btn--close:focus, .c-icon-btn--close:focus:before {
  outline: none;
}
.c-icon-btn--close:active:before {
  border: 1px solid #d9d8d5;
}

.c-icon-btn--delete {
  border-radius: 50%;
}
.c-icon-btn--delete, .c-icon-btn--delete:link, .c-icon-btn--delete:visited {
  color: #424243;
}
.c-icon-btn--delete:hover, .c-icon-btn--delete:active, .c-icon-btn--delete:focus {
  color: #da1f3d;
}
.c-icon-btn--delete.delete-table-row {
  z-index: 0;
}
.c-icon-btn--delete.delete-table-row:before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: -6px;
  left: -6px;
  right: -6px;
  top: -6px;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-icon-btn--delete.delete-table-row:hover:before, .c-icon-btn--delete.delete-table-row:focus:before, .c-icon-btn--delete.delete-table-row:active:before {
  background-color: rgba(32, 33, 36, 0.059);
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}
.c-icon-btn--delete.delete-table-row:focus, .c-icon-btn--delete.delete-table-row:focus:before {
  outline: none;
}
.c-icon-btn--delete.delete-table-row:active:before {
  border: 1px solid #d9d8d5;
}

.c-icon-btn-thumbs {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  float: left;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/**
 * Back to Top - requires JS, find showBackToTop(); 
 *
 * HTML:

    <a class="c-icon-btn-top-link c-svg-hover-swap [ js-scrollToElem ]" href="#top" data-state="is-hidden" role="button">
      <svg class="c-svg c-svg--top-circle-outline-24 icon-default"><use xlink:href="#c-svg--top-circle-outline-24"></use></svg>
      <svg class="c-svg c-svg--atop-circle-fill-24 icon-hover"><use xlink:href="#c-svg--top-circle-fill-24"></use></svg>
      <span class="u-screen-reader-text">Back to top</span>
    </a>

 */
.c-icon-btn-top-link {
  position: fixed !important;
  bottom: 160px;
  right: 12px;
  display: inline-flex;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 420px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-in-out;
}
@media (min-width: 62em) {
  .c-icon-btn-top-link {
    right: 24px;
  }
}
.c-icon-btn-top-link.show, .c-icon-btn-top-link[data-state=is-visible] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  will-change: opacity;
}
.c-icon-btn-top-link.hide, .c-icon-btn-top-link[data-state=is-hidden] {
  visibility: hidden;
  opacity: 0;
}
.c-icon-btn-top-link .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out;
  will-change: color;
  color: #424243;
}
.c-icon-btn-top-link .c-svg:hover, .c-icon-btn-top-link .c-svg:focus {
  color: hsl(0, 0%, 0%);
}
.c-icon-btn-top-link.sticky-top-ie {
  position: fixed;
  left: auto;
  right: 24px;
  bottom: 160px;
}

/* ==========================================================================
  #LANGUAGE MENU
  ========================================================================== */
.c-language-menu {
  z-index: 9999;
  flex: none;
  position: absolute;
  top: 6px;
  right: 24px;
  padding: 0;
}
.c-language-menu:after {
  content: "";
  display: table;
  clear: both;
}
.lang-menu-active .c-language-menu {
  z-index: 100000;
}

.c-language-menu__target {
  position: fixed;
  top: 0;
  left: 0;
}
.c-language-menu__target:target + .c-language-menu__sub-menu {
  transform: none;
  opacity: 1;
  visibility: visible;
  will-change: opacity;
}

.c-language-menu__close {
  display: inline-block;
  padding: 12px;
  line-height: 1;
}
@media (min-width: 48em) {
  .c-language-menu__close {
    display: none;
  }
}
.c-language-menu__close .c-svg {
  top: 0;
  width: 24px;
  height: 24px;
  color: hsl(0, 0%, 100%);
}

.c-language-menu__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  min-width: 106px;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 2.1818181818;
  float: right;
}

.c-language-menu__item {
  list-style-type: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.c-language-menu__link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 24px;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 250ms ease-out, color 250ms ease-out;
  will-change: background-color, color;
}
.c-language-menu__link:after {
  content: "";
  display: table;
  clear: both;
}
.c-language-menu__link, .c-language-menu__link:link, .c-language-menu__link:visited {
  color: hsl(0, 0%, 100%);
}
@media (min-width: 48em) {
  .c-language-menu__link {
    padding: 12px 12px 6px;
    font-size: 11px;
    font-size: 0.6875rem;
    line-height: 1.6363636364;
    text-align: left;
  }
}
@media (min-width: 62em) {
  .c-language-menu__link {
    padding: 2px 6px;
  }
}
.c-language-menu__link:hover, .c-language-menu__link:active {
  color: #1788c3;
  background-color: #ebf7fd !important;
  text-decoration: none;
}

.c-language-menu__current {
  position: relative;
  display: block;
  padding: 0 24px 0 6px;
  border: 1px solid #f6f6f6;
  background-color: #f6f6f6;
}
.c-language-menu__current, .c-language-menu__current:link, .c-language-menu__current:visited {
  color: #6d6d6d;
}
.c-language-menu__current:before {
  position: absolute;
  top: 50%;
  right: 3px;
  transition: background-image 250ms ease-out;
  transform: translateY(-50%);
}
.c-language-menu__current:hover, .c-language-menu__current:focus, .c-language-menu__current:active, .c-language-menu__item:hover .c-language-menu__current {
  color: #1788c3;
  text-decoration: none;
  cursor: pointer;
}
.c-language-menu__current:hover.c-icon--drop-down-arrow:before, .c-language-menu__current:focus.c-icon--drop-down-arrow:before, .c-language-menu__current:active.c-icon--drop-down-arrow:before, .c-language-menu__item:hover .c-language-menu__current.c-icon--drop-down-arrow:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231788C3' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.c-language-menu__sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  white-space: nowrap;
  background-color: #3392CD;
  border: 1px solid #3392CD;
  box-shadow: 0px 15px 16px -7px rgba(0, 0, 0, 0.3);
  transform: translateY(-100%);
  transition: 0.3333333333s;
  will-change: transform;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
}
@media (max-width: 47.99em) {
  .c-language-menu__sub-menu.show-mobile-language {
    transform: none;
    opacity: 1;
    visibility: visible;
    will-change: opacity;
  }
}
@media (max-width: 47.99em) {
  .c-language-menu__sub-menu {
    overflow-x: scroll;
  }
}
@media (min-width: 48em) {
  .c-language-menu__sub-menu {
    position: absolute;
    top: 100%;
    height: auto;
    left: 0;
    z-index: 1;
    width: 100%;
    min-width: 100%;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    border-radius: 0 0 3px 3px;
    transform: translateY(-10px);
  }
  .c-language-menu__sub-menu .c-language-menu__item {
    border: none;
  }
  .c-language-menu__item:hover .c-language-menu__sub-menu {
    opacity: 1;
    visibility: visible;
    will-change: opacity;
    transform: translateY(0);
  }
}

.c-language-menu__flag {
  display: block;
  width: 25px;
  height: 24px;
  float: right;
  margin: 0 10px 0 0;
  overflow: hidden;
}
@media (min-width: 48em) {
  .c-language-menu__flag {
    height: 28px;
  }
}
.c-language-menu__flag span {
  position: relative;
  display: block;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  width: 100%;
  height: 100%;
}
.c-language-menu__flag span:before {
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   #LISTS
   ========================================================================== */
.c-list,
.c-list__sub-list,
.c-list__item {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.c-list__item-heading {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  padding: 20px 24px;
}

.c-list--categories {
  margin: 48px 0;
}
.c-list--categories .c-list__item {
  color: #1788c3;
}
.c-list--categories .c-list__item .c-list__item-heading {
  background-color: #f6f6f6;
  transition: background-color 250ms ease-out, color 250ms ease-out;
}
.c-list--categories .c-list__item .c-list__item-heading:hover {
  text-decoration: none;
  background-color: #b0b9be;
}
.c-list--categories .c-list__item .c-list__sub-list {
  margin-bottom: 48px;
}
.c-list--categories .c-list__item .c-list__sub-list .c-list__item {
  padding: 20px 24px 20px 48px;
  border-bottom: 1px solid #e6e6e7;
}

.c-list__link {
  display: block;
  width: 100%;
  height: 100%;
}

/* List type modifiers.
========================================================================== */
.c-list--round-nums {
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  *list-style: decimal; /* Keep using default numbering for IE6/7 */
}
.c-list--round-nums li {
  position: relative;
  padding-left: 1.75em;
}
.c-list--round-nums li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: 0;
  top: 0.025em;
  background: hsl(0, 0%, 100%);
  width: 1.25em;
  height: 1.25em;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.1em;
  border: 1px solid #424243;
  text-align: center;
  border-radius: 2em;
}

@media (min-width: 48em) {
  .c-list--countries .c-list__item {
    background-color: rgba(255, 255, 255, 0.85);
  }
}
.c-list--countries .c-list__link {
  color: #424243;
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.4285714286;
}
.c-list--countries .c-list__link span {
  position: relative;
  display: block;
  padding: 8px 42px 8px 80px;
}
@media (min-width: 48em) {
  .c-list--countries .c-list__link span {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    padding: 8px 0px 8px 30px;
  }
}
.c-list--countries .c-list__link span:before {
  top: 50%;
  left: 42px;
  transform: translate(0, -50%);
  transition: transform 250ms ease-out;
}
@media (min-width: 48em) {
  .c-list--countries .c-list__link span:before {
    left: 0;
  }
}
.c-list--countries .c-list__link:hover {
  text-decoration: none;
}
.c-list--countries .c-list__link:hover span:before {
  transform: translate(3px, -50%);
}

.c-list--small .c-list__item {
  margin-bottom: 12px;
}

/*

    &.comorbityList {
        list-style-type:none;
        margin:10px;
        padding:0;
        li {
                list-style-type:none;
                margin:0 0 12px;
                padding:0;
                line-height:1.2;
        }
    }

*/
.list_input-validation {
  list-style-type: none;
}
.list_input-validation > li {
  position: relative;
  text-indent: 0px;
  line-height: 1.15;
  margin-bottom: 6px;
}
.list_input-validation > li::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -15px;
  width: 16px;
  height: 16px;
  content: "•";
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 16px;
}
.list_input-validation > li.completed {
  color: #6cb454;
}
.list_input-validation > li.completed::before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%236CB454' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4-10.6 10.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  left: -20px;
}

/* ==========================================================================
   #LOADERS
   ========================================================================== */
/**
 * CSS loading animations.
 * Taken from Luke Haas (https://projects.lukehaas.me/css-loaders/). See the site for other
 * loaders and to configure foreground and background color options.
 *
    <div class="c-loader c-loader--page"></div>
 *
 */
.c-loader {
  position: relative;
  display: inline-block;
  margin: 0;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  transform: translateZ(0);
}

.mpp-spinner-backdrop {
  width: 100%;
  height: 100%;
  background-color: hsl(0, 0%, 100%);
  opacity: 0.85 !important;
}

/* Loader variants
   ========================================================================== */
.c-loader--dots {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.8;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  animation: loadDots 1.1s infinite ease;
}

.c-loader--page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.c-loader--page::before {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  border-top: 0.25em solid rgba(128, 128, 128, 0.2);
  border-right: 0.25em solid rgba(128, 128, 128, 0.2);
  border-bottom: 0.25em solid rgba(128, 128, 128, 0.2);
  border-left: 0.25em solid #1788c3;
  border-radius: 50%;
  animation: loadPage 1.1s infinite linear;
}

/* Spinner animations
   ========================================================================== */
@keyframes loadDots {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #c0c0c0, 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2), 2.5em 0em 0 0em rgba(192, 192, 192, 0.2), 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.2), 0em 2.5em 0 0em rgba(192, 192, 192, 0.2), -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.2), -2.6em 0em 0 0em rgba(192, 192, 192, 0.5), -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.7), 1.8em -1.8em 0 0em #c0c0c0, 2.5em 0em 0 0em rgba(192, 192, 192, 0.2), 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.2), 0em 2.5em 0 0em rgba(192, 192, 192, 0.2), -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.2), -2.6em 0em 0 0em rgba(192, 192, 192, 0.2), -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.5), 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.7), 2.5em 0em 0 0em #c0c0c0, 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.2), 0em 2.5em 0 0em rgba(192, 192, 192, 0.2), -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.2), -2.6em 0em 0 0em rgba(192, 192, 192, 0.2), -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.2), 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.5), 2.5em 0em 0 0em rgba(192, 192, 192, 0.7), 1.75em 1.75em 0 0em #c0c0c0, 0em 2.5em 0 0em rgba(192, 192, 192, 0.2), -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.2), -2.6em 0em 0 0em rgba(192, 192, 192, 0.2), -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.2), 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2), 2.5em 0em 0 0em rgba(192, 192, 192, 0.5), 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.7), 0em 2.5em 0 0em #c0c0c0, -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.2), -2.6em 0em 0 0em rgba(192, 192, 192, 0.2), -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.2), 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2), 2.5em 0em 0 0em rgba(192, 192, 192, 0.2), 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.5), 0em 2.5em 0 0em rgba(192, 192, 192, 0.7), -1.8em 1.8em 0 0em #c0c0c0, -2.6em 0em 0 0em rgba(192, 192, 192, 0.2), -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.2), 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2), 2.5em 0em 0 0em rgba(192, 192, 192, 0.2), 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.2), 0em 2.5em 0 0em rgba(192, 192, 192, 0.5), -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.7), -2.6em 0em 0 0em #c0c0c0, -1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(192, 192, 192, 0.2), 1.8em -1.8em 0 0em rgba(192, 192, 192, 0.2), 2.5em 0em 0 0em rgba(192, 192, 192, 0.2), 1.75em 1.75em 0 0em rgba(192, 192, 192, 0.2), 0em 2.5em 0 0em rgba(192, 192, 192, 0.2), -1.8em 1.8em 0 0em rgba(192, 192, 192, 0.5), -2.6em 0em 0 0em rgba(192, 192, 192, 0.7), -1.8em -1.8em 0 0em #c0c0c0;
  }
}
@keyframes loadPage {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   #LOGOS
   ========================================================================== */
/**
 * A Place to keep and size all your logos according to where they are being
 * displayed.
 */
.c-logo {
  display: inline-block;
}
.c-logo img,
.c-logo .c-svg {
  width: 100%;
  height: 100%;
}

.c-logo--resmed {
  width: 91px;
  height: auto;
}
@media (min-width: 48em) {
  .c-logo--resmed {
    width: 121px;
    height: auto;
  }
}
.page-footer .c-logo--resmed {
  width: 72px;
  height: auto;
}
.page-head .c-logo--resmed {
  margin-bottom: 5px;
}
@media (min-width: 48em) {
  .page-head .c-logo--resmed {
    margin-bottom: 7px;
  }
}

.c-logo--myair {
  width: 60px;
  height: 24px;
}
@media (min-width: 48em) {
  .c-logo--myair {
    width: 85px;
    height: 32px;
  }
}
.c-logo--myair svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   #PAGE HEADER
   ========================================================================== */
/** 
 * 1. Need to force the `o-wrapper` element to expand to the max-width setting
 *    because of flexbox.
 */
.page-head {
  position: relative; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-shrink: 0;
  grid-area: header;
  flex-direction: row !important;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  min-height: 115px;
  background: hsl(0, 0%, 100%);
  line-height: 0;
}
.page-head:after {
  content: "";
  display: table;
  clear: both;
}
.page-head.is-logged-in {
  min-height: 100px;
}
.page-head .o-wrapper {
  width: 100%; /* [1] */
  background: transparent;
}

/* Variant
   ========================================================================== */
/**
 * 1. Override the max-width on the `.o-wrapper` element so the header will span
 *    the width of the viewport while keeping the outer gutters.
 * 2. Keep the ouside gutters in case it is being removed on the `.o-wrapper` 
 *    element at x-wide breakpoint.
 */
.page-head--full .o-wrapper {
  width: 100% !important;
  max-width: 100% !important; /* [1] */
  padding-right: 24px; /* [2] */
  padding-left: 24px; /* [2] */
}

.page-head--sticky {
  position: sticky;
  top: 0;
  z-index: 1071;
}
.modaal-noscroll .page-head--sticky {
  z-index: 100;
}

.page-head--box-shadow {
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
  #POPMENU
  ========================================================================== */
.c-popmenu-wrapper {
  position: relative;
}
.c-popmenu-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.c-popmenu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-popmenu:after {
  content: "";
  display: table;
  clear: both;
}

.c-popmenu__item {
  position: relative;
}
.c-popmenu__item:hover .c-popmenu__list {
  opacity: 1;
  visibility: visible;
  will-change: opacity;
}
.c-popmenu--icon .c-popmenu__item:hover .c-svg.icon-default {
  visibility: hidden;
  opacity: 0;
}
.c-popmenu--icon .c-popmenu__item:hover .c-svg.icon-hover {
  visibility: visible;
  opacity: 1;
}

.c-popmenu__target {
  position: relative;
}
.c-popmenu__target, .c-popmenu__target:link, .c-popmenu__target:hover, .c-popmenu__target:active, .c-popmenu__target:focus {
  text-decoration: none;
}

.c-popmenu__list {
  list-style: none;
  margin: 0;
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
  min-width: 300px;
  padding: 12px;
  text-align: left;
  background-color: hsl(0, 0%, 100%);
  border-radius: 12px;
  border: 1px solid #b7b7b8;
  box-shadow: 0px 15px 16px -7px rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transform: translate(-50%, -90%);
}
@media (min-width: 48em) {
  .c-popmenu__list {
    min-width: 100%;
    padding: 24px;
    white-space: nowrap;
  }
}
.c-popmenu__list:before, .c-popmenu__list:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 100%;
  right: auto;
  bottom: auto;
  left: 50%;
  content: "";
  transform: translate(-50%, 0px);
}
.c-popmenu__list:before {
  border-top: 10px hsl(0, 0%, 100%) solid !important;
  border-left: 6px transparent solid !important;
  border-right: 6px transparent solid !important;
  border-bottom: 0;
  z-index: 51;
}
.c-popmenu__list:after {
  border-top: 12px #b7b7b8 solid !important;
  border-left: 8px transparent solid !important;
  border-right: 8px transparent solid !important;
  border-bottom: 0;
  transform: translate(-50%, 1px);
  z-index: 50;
}
.c-popmenu__item:hover .c-popmenu__list {
  transform: translate(-50%, 102%);
}

.c-popmenu__list-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.1;
}
.c-popmenu__list-item p:last-child {
  margin-bottom: 0;
}

/* Popmenu variants
   ========================================================================== */
.c-popmenu--icon {
  display: inline-block;
}
.c-popmenu--icon .c-popmenu__target {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  line-height: 0;
}

.c-popmenu-wrapper--score .c-popmenu {
  position: absolute;
  top: -48px;
  right: 0;
  left: auto;
  bottom: auto;
}
@media (min-width: 48em) {
  .c-popmenu-wrapper--score .c-popmenu {
    top: 12px;
  }
}
.c-popmenu-wrapper--score .c-popmenu--left .c-popmenu__list {
  width: 300px;
}
@media (min-width: 48em) {
  .c-popmenu-wrapper--score .c-popmenu--left .c-popmenu__list {
    width: 360px;
    left: -360px;
    transform: translate(0, -50%);
  }
}
@media (min-width: 48em) {
  .c-popmenu-wrapper--score .c-popmenu--left .c-popmenu__item:hover .c-popmenu__list {
    transform: translate(-5px, -50%);
  }
}

/* Directional variants
   ========================================================================== */
.c-popmenu--top .c-popmenu__list {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -90%);
}
.c-popmenu--top .c-popmenu__list:before, .c-popmenu--top .c-popmenu__list:after {
  top: 100%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 0);
}
.c-popmenu--top .c-popmenu__list:before {
  border-top: 10px hsl(0, 0%, 100%) solid !important;
  border-left: 6px transparent solid !important;
  border-right: 6px transparent solid !important;
  border-bottom: 0 !important;
}
.c-popmenu--top .c-popmenu__list:after {
  border-top: 11px #b7b7b8 solid !important;
  border-left: 7px transparent solid !important;
  border-right: 7px transparent solid !important;
  border-bottom: 0 !important;
  transform: translate(-50%, 1px);
}
.c-popmenu--top .c-popmenu__item:hover .c-popmenu__list {
  transform: translate(-50%, -102%);
}

.c-popmenu--bottom .c-popmenu__list {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -10%);
}
.c-popmenu--bottom .c-popmenu__list:before, .c-popmenu--bottom .c-popmenu__list:after {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -10px);
}
.c-popmenu--bottom .c-popmenu__list:before {
  border-bottom: 10px hsl(0, 0%, 100%) solid !important;
  border-left: 6px transparent solid !important;
  border-right: 6px transparent solid !important;
  border-top: 0 !important;
}
.c-popmenu--bottom .c-popmenu__list:after {
  border-bottom: 11px #b7b7b8 solid !important;
  border-left: 7px transparent solid !important;
  border-right: 7px transparent solid !important;
  border-top: 0 !important;
  transform: translate(-50%, -11px);
}
.c-popmenu--bottom .c-popmenu__item:hover .c-popmenu__list {
  transform: translate(-50%, 2%);
}

.c-popmenu--left .c-popmenu__list {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translate(-95%, -50%);
}
.c-popmenu--left .c-popmenu__list:before, .c-popmenu--left .c-popmenu__list:after {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate(16px, -50%);
}
.c-popmenu--left .c-popmenu__list:before {
  border-bottom: 6px transparent solid !important;
  border-right: 6px transparent solid !important;
  border-left: 10px hsl(0, 0%, 100%) solid !important;
  border-top: 6px transparent solid !important;
}
.c-popmenu--left .c-popmenu__list:after {
  border-bottom: 7px transparent solid !important;
  border-right: 7px transparent solid !important;
  border-left: 11px #b7b7b8 solid !important;
  border-top: 7px transparent solid !important;
  transform: translate(18px, -50%);
}
.c-popmenu--left .c-popmenu__item:hover .c-popmenu__list {
  transform: translate(-101%, -50%);
}

.c-popmenu--right .c-popmenu__list {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate(95%, -50%);
}
.c-popmenu--right .c-popmenu__list:before, .c-popmenu--right .c-popmenu__list:after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translate(-16px, -50%);
}
.c-popmenu--right .c-popmenu__list:before {
  border-bottom: 6px transparent solid !important;
  border-right: 10px hsl(0, 0%, 100%) solid !important;
  border-left: 6px transparent solid !important;
  border-top: 6px transparent solid !important;
}
.c-popmenu--right .c-popmenu__list:after {
  border-bottom: 7px transparent solid !important;
  border-right: 11px #b7b7b8 solid !important;
  border-left: 7px transparent solid !important;
  border-top: 7px transparent solid !important;
  transform: translate(-18px, -50%);
}
.c-popmenu--right .c-popmenu__item:hover .c-popmenu__list {
  transform: translate(101%, -50%);
}

/* ==========================================================================
   #POPOVER
   ========================================================================== */
/**
 * Fancy tooltip bubble that stays active on hover over an icon, like Help or Info,
 * so the user can interact with it, ie: click a link.
 * HTML:

    <div class="c-popover c-popover--icon c-popover--left">
      <a href="#0" class="c-popover__target js-no-click">
        <svg class="c-svg c-svg--help-circle-border"><use xlink:href="#c-svg--help-circle-border"></use></svg>
      </a>
      <div class="c-popover__content">
        <p>Hello, here's a popover! <a href="#0">Click this link.</a></p>
      </div>
    </div>

 * 1. Reset any defaults on the elemtent used for the popover.
 * 2. Show the popover on hover. Placing the hover action on the parent
 *    container allows us to maintain the hover state as long as the mouse
 *    is over any part of the popover, a-la drop-menu in navigation.
 * 3. Default ending position of popover transition animation (top).
 */
.c-popover {
  position: relative;
  display: inline-block; /* [1] */
  margin: 0; /* [1] */
  padding: 0; /* [1] */
}
.c-popover:hover .c-popover__content {
  display: block;
  opacity: 1; /* [2] */
  visibility: visible; /* [2] */
  will-change: opacity; /* [2] */
  transform: translate(-50%, -13px);
  /* [3] */
}

.c-popover-wrapper {
  position: relative;
}
.c-popover-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * 1. Reset any defaults which could be inherited on our target element.
 * 2. Change the cursor to a pointer when hovering over the target element.
 */
.c-popover__target {
  margin: 0; /* [1] */
  padding: 0; /* [1] */
}
.c-popover__target, .c-popover__target:link, .c-popover__target:visited, .c-popover__target:hover, .c-popover__target:active, .c-popover__target:focus {
  color: #1788c3;
  text-decoration: none; /* [1] */
  cursor: pointer; /* [2] */
}

/** 
 * This is the `popover`.
 *
 * 1. Default position of the popover is above (top) the target element.
 *    Setting bottom to 100% aligns the bottom edge of the popover with the top
 *    edge of the target container.
 * 2. At mobile, we don't want the popover to go outside the viewport. Depending on where 
 *    it is on the screen, you can make width adjustments on a specific popover with a new
 *    modifier class.
 * 3. Keep the popover hidden by default. Display:none at mobilile to prevent the popover
 *    from pushing out the page.
 * 4. Starting position of the popover for the transition animation.
 */
.c-popover__content {
  list-style: none;
  margin: 0;
  position: absolute;
  top: auto; /* [1] */
  left: 50%; /* [1] */
  right: auto; /* [1] */
  bottom: 100%; /* [1] */
  z-index: 1;
  width: auto; /* [2] */
  padding: 12px 24px;
  text-align: left;
  font-weight: 600;
  background-color: hsl(0, 0%, 100%);
  border-radius: 6px;
  border: 1px solid #f6f6f6;
  box-shadow: 0px 6px 26px -6px rgba(0, 0, 0, 0.3);
  display: none; /* [3] */
  visibility: hidden; /* [3] */
  opacity: 0; /* [3] */
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transform: translate(-50%, 0);
  /* [4] */
}
.c-popover__content:before, .c-popover__content:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 100%;
  right: auto;
  bottom: auto;
  left: 50%;
  content: "";
}
.c-popover__content:before {
  border-top: 16px hsl(0, 0%, 100%) solid;
  border-left: 12px transparent solid;
  border-right: 12px transparent solid;
  border-bottom: 0;
  transform: translate(-50%, 0px);
  z-index: 51;
}
.c-popover__content:after {
  border-top: 17px #f6f6f6 solid;
  border-left: 13px transparent solid;
  border-right: 13px transparent solid;
  border-bottom: 0;
  transform: translate(-50%, 0px);
  z-index: 50;
}
.c-popover__content,
.c-popover__content > *:last-child {
  margin-bottom: 0;
}
@media (min-width: 48em) {
  .c-popover__content {
    display: block;
    width: 354px; /* [2] */
    padding: 32px 42px;
  }
}

/* Type variants
   ========================================================================== */
.c-popover--icon {
  display: inline-block;
}
.c-popover--icon .c-popover__target {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 0;
}
.c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg {
  width: 100%;
  height: 100%;
  top: 0;
  color: #6d6d6d;
  transition: color 250ms ease-out;
}
.c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg:hover, .c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg:focus {
  color: #1788c3;
  cursor: default;
}
.c-popover--icon.icon-lg .c-popover__target {
  width: 32px;
  height: 32px;
}

/* Style variants
   ========================================================================== */
.c-popover--dark .c-popover__content {
  background-color: #212935;
  border-color: #6d6d6d;
}
.c-popover--dark .c-popover__content,
.c-popover--dark .c-popover__content > * {
  color: #d9d8d5;
}
.c-popover--dark .c-popover__content a, .c-popover--dark .c-popover__content a:link, .c-popover--dark .c-popover__content a:visited, .c-popover--dark .c-popover__content a:hover, .c-popover--dark .c-popover__content a:active, .c-popover--dark .c-popover__content a:focus {
  color: #d9d8d5;
}
.c-popover--dark .c-popover__content a:hover, .c-popover--dark .c-popover__content a:focus {
  text-decoration: underline;
}
.c-popover--dark .c-popover__content:before {
  border-top-color: #212935;
}
.c-popover--dark .c-popover__content:after {
  border-top-color: #6d6d6d;
}
.c-popover--dark.c-popover--bottom .c-popover__content:before {
  border-bottom-color: #212935;
}
.c-popover--dark.c-popover--bottom .c-popover__content:after {
  border-bottom-color: #6d6d6d;
}
.c-popover--dark.c-popover--left .c-popover__content:before {
  border-left-color: #212935;
}
.c-popover--dark.c-popover--left .c-popover__content:after {
  border-left-color: #6d6d6d;
}
.c-popover--dark.c-popover--right .c-popover__content:before {
  border-right-color: #212935;
}
.c-popover--dark.c-popover--right .c-popover__content:after {
  border-right-color: #6d6d6d;
}

@media (min-width: 48em) {
  .c-popover--wide .c-popover__content {
    width: 444px;
    padding: 42px;
  }
}

/* Directional variants
   ========================================================================== */
.c-popover--bottom .c-popover__content {
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, 0);
}
.c-popover--bottom .c-popover__content:before, .c-popover--bottom .c-popover__content:after {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
}
.c-popover--bottom .c-popover__content:before {
  border-bottom: 16px hsl(0, 0%, 100%) solid;
  border-left: 12px transparent solid;
  border-right: 12px transparent solid;
  border-top: 0;
  transform: translate(-50%, -16px);
}
.c-popover--bottom .c-popover__content:after {
  border-bottom: 17px #f6f6f6 solid;
  border-left: 13px transparent solid;
  border-right: 13px transparent solid;
  border-top: 0;
  transform: translate(-50%, -17px);
}
.c-popover--bottom:hover .c-popover__content {
  transform: translate(-50%, 13px);
}

.c-popover--left .c-popover__content {
  top: 50%;
  right: 100%;
  bottom: auto;
  left: auto;
  transform: translate(0, -50%);
}
.c-popover--left .c-popover__content:before, .c-popover--left .c-popover__content:after {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
}
.c-popover--left .c-popover__content:before {
  border-bottom: 12px transparent solid;
  border-right: 12px transparent solid;
  border-left: 16px hsl(0, 0%, 100%) solid;
  border-top: 12px transparent solid;
  transform: translate(28px, -50%);
}
.c-popover--left .c-popover__content:after {
  border-bottom: 13px transparent solid;
  border-right: 13px transparent solid;
  border-left: 17px #f6f6f6 solid;
  border-top: 13px transparent solid;
  transform: translate(30px, -50%);
}
.c-popover--left:hover .c-popover__content {
  transform: translate(-13px, -50%);
}

.c-popover--right .c-popover__content {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 100%;
  transform: translate(0, -50%);
}
.c-popover--right .c-popover__content:before, .c-popover--right .c-popover__content:after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
}
.c-popover--right .c-popover__content:before {
  border-bottom: 12px transparent solid;
  border-right: 16px hsl(0, 0%, 100%) solid;
  border-left: 12px transparent solid;
  border-top: 12px transparent solid;
  transform: translate(-28px, -50%);
}
.c-popover--right .c-popover__content:after {
  border-bottom: 13px transparent solid;
  border-right: 17px #f6f6f6 solid;
  border-left: 13px transparent solid;
  border-top: 13px transparent solid;
  transform: translate(-30px, -50%);
}
.c-popover--right:hover .c-popover__content {
  transform: translate(13px, -50%);
}

.c-popover-wrapper--score .c-popover {
  position: absolute;
  top: -48px;
  right: 0;
  left: auto;
  bottom: auto;
}
@media (min-width: 48em) {
  .c-popover-wrapper--score .c-popover {
    top: 12px;
  }
}
@media (max-width: 47.99em) {
  .c-popover-wrapper--score .c-popover--left .c-popover__content {
    width: 300px;
  }
}

/* ==========================================================================
   #SITENAV
   ========================================================================== */
/**
 * Main menu settings
 */
/**
 * Navigation control for any type of site navigation. Use modifier classes for
 * Main, Tabs, or Stacked navigation.
 */
.site-nav {
  position: relative;
}
.site-nav:after {
  content: "";
  display: table;
  clear: both;
}

.site-nav__branding { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  margin: 0;
  margin-right: 12px;
  flex-grow: 1;
  align-items: flex-end;
}
.site-nav__branding:after {
  content: "";
  display: table;
  clear: both;
}

.site-nav__home-link {
  display: inline-block;
  vertical-align: bottom;
}
.site-nav__home-link, .site-nav__home-link:link, .site-nav__home-link:visited, .site-nav__home-link:hover, .site-nav__home-link:active, .site-nav__home-link:focus {
  color: #424243;
  text-decoration: none;
}

mpp-my-air-label .site-nav__home-link {
  margin-left: 12px;
}
@media (min-width: 48em) {
  mpp-my-air-label .site-nav__home-link {
    margin-left: 24px;
  }
}

.site-nav__logo {
  display: block;
}
.site-nav__logo .site-nav__title {
  position: relative;
  margin: 0;
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 28px;
  font-weight: 700;
  color: #424243;
}
.site-nav__logo .site-nav__title.show-divider:before {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  left: -24px;
  width: 1px;
  height: 50%;
  border-left: 1px solid #424243;
  content: "";
}
.site-nav__logo + .site-nav__logo {
  margin-left: 12px;
}
@media (min-width: 48em) {
  .site-nav__logo + .site-nav__logo {
    margin-left: 24px;
  }
}

/**
 * The mobile menu toggle
 * 1. Mobile menu icon - hamburger
 * 2. Hide it from non-mobile screens
 */
.site-nav__open {
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  width: 30px;
  height: 25px;
  transform: translateY(-50%);
}
@media (min-width: 48em) {
  .site-nav__open {
    display: none; /* [2] */
  }
}
.site-nav__open span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: hsl(0, 0%, 0%);
  border-radius: 0;
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.site-nav__open span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}
.site-nav__open span:nth-child(2) {
  top: 10px;
  transform-origin: left center;
}
.site-nav__open span:nth-child(3) {
  top: 20px;
  transform-origin: left center;
}
.site-nav__open:target span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
  left: 0px;
}
.site-nav__open:target span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
.site-nav__open:target span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
  left: 0px;
}

.site-nav__target {
  position: fixed;
  top: 0;
  left: 0;
}
.site-nav__target:target + .site-nav__list {
  transform: none;
}

.site-nav__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 48em) {
  .site-nav__item {
    position: relative;
    text-align: center;
  }
}

.site-nav__link {
  position: relative;
  display: block;
  font-weight: 600;
}
.site-nav__link:hover, .site-nav__link:active, .site-nav__link:focus {
  text-decoration: none;
}
.site-nav__link:active:focus {
  outline: none;
}
.site-nav__link.has-sub-menu {
  position: relative;
}
.site-nav__link.has-sub-menu:before {
  display: none;
}
@media (min-width: 48em) {
  .site-nav__link.has-sub-menu:before {
    display: block;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    content: "";
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-image 250ms ease-out;
  }
}
@media (min-width: 48em) {
  .site-nav__link.has-sub-menu:hover:before {
    content: "";
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231788C3' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.site-nav__link.is-icon-only .c-svg {
  width: 24px;
  height: 24px;
}

.site-nav__item--close {
  text-align: right;
}

.site-nav__close {
  display: inline-block;
  line-height: 0;
}
.site-nav__close, .site-nav__close:hover, .site-nav__close:focus {
  text-decoration: none;
}
.site-nav__close .c-svg {
  top: 0;
  width: 24px;
  height: 24px;
}

@media (min-width: 48em) {
  .site-nav__close,
  .site-nav__item--close {
    display: none;
  }
}

.site-nav__sub-menu {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}
@media (min-width: 48em) {
  .site-nav__sub-menu {
    position: absolute;
    top: 100%;
    left: -12px;
    transform: translateY(-10px);
    z-index: 1;
    width: auto;
    min-width: 100%;
    max-width: 140px;
    padding: 6px 0;
    text-align: left;
    background-color: hsl(0, 0%, 100%);
    border-radius: 3px;
    border: 1px solid #f6f6f6;
    box-shadow: 0 1px 16px -3px rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
    transition: 0.3333333333s;
  }
  .site-nav__item:hover .site-nav__sub-menu {
    opacity: 1;
    visibility: visible;
    will-change: opacity;
    transform: translateY(6px);
  }
}

.site-nav__sub-link {
  display: block;
  padding: 12px;
  font-weight: 600;
  transition: background-color 250ms ease-out, color 250ms ease-out;
}
.site-nav__sub-link, .site-nav__sub-link:link, .site-nav__sub-link:visited {
  color: #424243;
}
.site-nav__sub-link:hover, .site-nav__sub-link:active, .site-nav__sub-link:focus {
  color: hsl(0, 0%, 0%);
  text-decoration: none;
  background-color: #f6f6f6;
}

/* Nav type modifiers.
   ========================================================================== */
.site-nav--main { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: flex-end;
  line-height: 0;
  margin-bottom: 24px;
}
.site-nav--main .site-nav__list {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transform: translateX(100%);
  transition: 0.2s;
  will-change: transform;
  background-color: hsl(0, 0%, 100%);
  line-height: normal;
  z-index: 99999;
}
@media (max-width: 47.99em) {
  .site-nav--main .site-nav__list {
    overflow-y: scroll;
  }
}
.show-mobile-nav.site-nav--main .site-nav__list {
  transform: none;
}

@media (min-width: 48em) {
  .site-nav--main .site-nav__list { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    background-color: transparent;
    overflow: visible;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transform: none;
    z-index: 10;
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__item {
    margin-left: 24px;
    padding: 0;
  }
  .site-nav--main .site-nav__item.site-nav--first-link {
    margin-left: 0;
  }
  .site-nav--main .site-nav__item.has-sub-menu:hover > .site-nav__link, .site-nav--main .site-nav__item.has-sub-menu:focus > .site-nav__link {
    color: hsl(0, 0%, 0%);
  }
  .site-nav--main .site-nav__item.has-sub-menu:hover > .site-nav__link:before, .site-nav--main .site-nav__item.has-sub-menu:focus > .site-nav__link:before {
    content: "";
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231788C3' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media (min-width: 62em) {
  .site-nav--main .site-nav__item {
    margin-left: 48px;
  }
}
.site-nav--main .site-nav__item.site-nav__item--mobile-username .site-nav__link {
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.4285714286;
  color: #1788c3;
  font-weight: 300;
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__item.site-nav__item--mobile-username {
    display: none;
  }
}
.site-nav--main .site-nav__link {
  padding: 12px;
}
.site-nav--main .site-nav__link, .site-nav--main .site-nav__link:link, .site-nav--main .site-nav__link:visited, .site-nav--main .site-nav__link:hover, .site-nav--main .site-nav__link:active, .site-nav--main .site-nav__link:focus {
  color: #424243;
}
.site-nav--main .site-nav__link:hover, .site-nav--main .site-nav__link:active, .site-nav--main .site-nav__link:focus {
  background-color: #f6f6f6;
}
.site-nav--main .site-nav__link:hover.site-nav__close, .site-nav--main .site-nav__link:active.site-nav__close, .site-nav--main .site-nav__link:focus.site-nav__close {
  background-color: transparent;
}
.site-nav--main .site-nav__link.is-mobile-username {
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.4285714286;
  color: #1788c3;
  font-weight: 300;
}
@media (max-width: 47.99em) {
  .site-nav--main .site-nav__link:not(.site-nav__close) {
    text-align: center;
  }
  .site-nav--main .site-nav__link.has-menu-icon {
    display: none;
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__link {
    display: inline-block;
    height: inherit;
    padding: 0;
    background-color: transparent;
    vertical-align: middle;
    transition: background-color 250ms ease-out, color 250ms ease-out;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }
  .site-nav--main .site-nav__link, .site-nav--main .site-nav__link:link, .site-nav--main .site-nav__link:visited {
    color: #424243;
  }
  .site-nav--main .site-nav__link:hover, .site-nav--main .site-nav__link:active, .site-nav--main .site-nav__link:focus {
    color: hsl(0, 0%, 0%);
    background-color: transparent;
  }
  .site-nav--main .site-nav__link span {
    line-height: 28px;
  }
  .site-nav--main .site-nav__link.has-menu-icon {
    padding-left: 34px;
  }
  .site-nav--main .site-nav__link.has-sub-menu {
    padding-right: 24px;
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__sub-menu {
    min-width: 182px;
    max-width: 260px;
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__sub-menu.is-last {
    left: auto;
    right: 0;
  }
}
.site-nav--main .site-nav__sub-menu .site-nav__item {
  text-align: center;
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__sub-menu .site-nav__item {
    margin-left: 0;
    text-align: left;
  }
}
.site-nav--main .site-nav__sub-link span {
  line-height: normal;
}
.site-nav--main .site-nav--metamenu {
  display: none;
  visibility: hidden;
}
@media (min-width: 48em) {
  .site-nav--main .site-nav--metamenu { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    visibility: visible;
    flex-grow: 0;
  }
  .site-nav--main .site-nav--metamenu:after {
    content: "";
    display: table;
    clear: both;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link:not(.has-menu-icon) {
    padding-left: 0;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link:hover, .site-nav--main .site-nav--metamenu .site-nav__link:active, .site-nav--main .site-nav--metamenu .site-nav__link:focus {
    background-color: transparent;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link span {
    padding: 0;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link.is-icon-only {
    padding: 0;
  }
}
@media (min-width: 48em) {
  .site-nav--main {
    margin-bottom: 12px;
  }
}

.site-nav--tabs {
  margin-bottom: 48px;
}
.site-nav--tabs .site-nav__item {
  float: left;
  border-top: 1px solid #e6e6e7;
  transition: background-color 250ms ease-out;
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__item {
    border-top: none;
    transition: none;
  }
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__item:first-child .site-nav__link {
    padding-left: 0;
  }
  .site-nav--tabs .site-nav__item:first-child .site-nav__link:before {
    left: 0;
    width: 100%;
    width: -mox-calc(100% - 24px);
    width: -o-calc(100% - 24px);
    width: calc(100% - 24px);
  }
}
.site-nav--tabs .site-nav__link {
  padding: 12px;
  text-align: center;
  color: #424243;
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__link {
    vertical-align: top;
    padding: 0 24px;
    line-height: 60px;
  }
  .site-nav--tabs .site-nav__link:before {
    position: absolute;
    top: 100%;
    left: 0;
    left: -mox-calc(0px + 24px);
    left: -o-calc(0px + 24px);
    left: calc(0px + 24px);
    width: 100%;
    width: -mox-calc(100% - 48px);
    width: -o-calc(100% - 48px);
    width: calc(100% - 48px);
    content: "";
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    line-height: 0;
    transition: border-bottom-color 250ms ease-out;
  }
  .site-nav--tabs .site-nav__link:hover:not(.is-active) {
    background-color: #f6f6f6;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .site-nav--tabs .site-nav__link:hover:not(.is-active) {
    background-color: transparent;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .site-nav--tabs .site-nav__link:hover:before {
    border-bottom-color: #b7b7b8;
  }
}

.site-nav--stacked .site-nav__list {
  margin-bottom: 48px;
}
.site-nav--stacked .site-nav__list:last-of-type {
  margin-bottom: 0;
}
.site-nav--stacked .site-nav__item {
  width: 100%;
}
@media (min-width: 48em) {
  .site-nav--stacked .site-nav__item {
    text-align: left;
  }
}
.site-nav--stacked .site-nav__link {
  color: #424243;
  text-align: center;
  padding: 6px 12px;
  transition: color 250ms ease-out;
}
.site-nav--stacked .site-nav__link:hover:not(.is-active) {
  color: hsl(0, 0%, 0%);
}
@media (min-width: 48em) {
  .site-nav--stacked .site-nav__link {
    display: inline-block;
    text-align: left;
    padding-right: 48px;
  }
}
.site-nav--stacked .site-nav__link .c-svg {
  display: none;
}

.site-nav--branding {
  line-height: 0;
  text-align: center;
}
.site-nav--branding .site-nav__logo.logo-myair {
  margin-right: 0;
}

/* Current section indicator.
   ========================================================================== */
/**
 * Add `.is-active` class dynamically to current `site-nav__link` or use
 * page/section classes for specificity.
 * e.g.: html.page--about .site-nav__link.site-nav__about {}
 */
.site-nav--main .is-active .site-nav__link {
  background-color: #f6f6f6;
}
.site-nav--main .is-active .site-nav__link, .site-nav--main .is-active .site-nav__link:link, .site-nav--main .is-active .site-nav__link:visited, .site-nav--main .is-active .site-nav__link:hover, .site-nav--main .is-active .site-nav__link:active, .site-nav--main .is-active .site-nav__link:focus {
  color: #424243;
}
@media (min-width: 48em) {
  .site-nav--main .is-active .site-nav__link {
    background-color: transparent;
  }
  .site-nav--main .is-active .site-nav__link, .site-nav--main .is-active .site-nav__link:link, .site-nav--main .is-active .site-nav__link:visited, .site-nav--main .is-active .site-nav__link:hover, .site-nav--main .is-active .site-nav__link:active, .site-nav--main .is-active .site-nav__link:focus {
    color: #1788c3;
  }
}
.site-nav--main .is-active .site-nav__sub-link {
  background-color: #f6f6f6;
}
@media (min-width: 48em) {
  .site-nav--main .is-active .site-nav__sub-link {
    background-color: #ebf7fd;
  }
  .site-nav--main .is-active .site-nav__sub-link, .site-nav--main .is-active .site-nav__sub-link:link, .site-nav--main .is-active .site-nav__sub-link:visited, .site-nav--main .is-active .site-nav__sub-link:hover, .site-nav--main .is-active .site-nav__sub-link:active, .site-nav--main .is-active .site-nav__sub-link:focus {
    color: #1788c3;
  }
}
.site-nav--tabs .is-active .site-nav__link, .site-nav--tabs .is-active .site-nav__link:link, .site-nav--tabs .is-active .site-nav__link:visited, .site-nav--tabs .is-active .site-nav__link:hover, .site-nav--tabs .is-active .site-nav__link:active, .site-nav--tabs .is-active .site-nav__link:focus {
  color: #3392CD;
}
@media (min-width: 48em) {
  .site-nav--tabs .is-active .site-nav__link:before {
    border-bottom-color: #3392CD;
  }
}
.site-nav--stacked .is-active .site-nav__link {
  background-color: hsl(0, 0%, 100%);
}
.site-nav--stacked .is-active .site-nav__link, .site-nav--stacked .is-active .site-nav__link:link, .site-nav--stacked .is-active .site-nav__link:visited, .site-nav--stacked .is-active .site-nav__link:hover, .site-nav--stacked .is-active .site-nav__link:active, .site-nav--stacked .is-active .site-nav__link:focus {
  color: #1788c3;
}
@media (min-width: 48em) {
  .site-nav--stacked .is-active .site-nav__link {
    background-color: transparent;
  }
  .site-nav--stacked .is-active .site-nav__link .c-svg {
    display: block;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }
}

.site-nav--rmd {
  margin: 0;
}
@media (min-width: 48em) {
  .site-nav--rmd .site-nav__list {
    float: right;
  }
}
@media (min-width: 48em) {
  .site-nav--rmd .site-nav__item {
    margin-left: 6px;
    padding: 0;
    border-bottom: 0;
  }
}
.site-nav--rmd .site-nav__link {
  padding: 12px;
  text-align: center;
  color: #f6f6f6;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 36px;
  font-weight: 600;
}
@media (min-width: 48em) {
  .site-nav--rmd .site-nav__link {
    vertical-align: top;
    padding: 0 12px;
  }
  .site-nav--rmd .site-nav__link:before {
    position: absolute;
    bottom: 0;
    left: 0;
    left: -mox-calc(0px + 12px);
    left: -o-calc(0px + 12px);
    left: calc(0px + 12px);
    width: 100%;
    width: -mox-calc(100% - 24px);
    width: -o-calc(100% - 24px);
    width: calc(100% - 24px);
    content: "";
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    line-height: 0;
    transition: border-bottom-color 250ms ease-out;
  }
  .site-nav--rmd .site-nav__link:hover:not(.is-active) {
    background-color: #f6f6f6;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .site-nav--rmd .site-nav__link:hover:not(.is-active) {
    background-color: transparent;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .site-nav--rmd .site-nav__link:hover:before {
    border-bottom-color: hsl(0, 0%, 50%);
  }
}

/* ==========================================================================
  #SLEEP NIGHT PICKER
  ========================================================================== */
/**
 * Date picker control on the dashboard. Changes the sleep score dial and score
 * metrics.
 */
#sleepSection {
  text-align: center;
}

.c-sleep-night {
  position: relative;
  display: inline-block;
  width: auto;
  margin-top: 0px;
  margin-left: auto;
  margin-bottom: 12px;
  margin-right: auto;
  padding: 0;
  text-align: center;
}
@media (min-width: 48em) {
  .c-sleep-night {
    animation: aniStayHidden 1s, aniFadeInDown 250ms 1s 1 ease-out;
  }
}

.c-sleep-night__heading {
  margin-bottom: 6px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  text-align: center;
}

/* 1. Needed as buffer for mousing to the date picker without it disappearing */
.c-sleep-night__menu {
  position: relative;
  display: inline-block;
  width: 280px;
  margin: 0 auto;
  border-top: 6px solid transparent; /* [1] */
  border-bottom: 6px solid transparent; /* [1] */
}
.c-sleep-night__menu:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 62em) {
  .c-sleep-night__menu {
    width: 286px;
  }
}
@media (min-width: 75em) {
  .c-sleep-night__menu {
    width: 312px;
  }
}
.c-sleep-night__menu > .c-svg {
  position: absolute;
  top: 50%;
  right: 12px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  color: #424243;
  transition: color 250ms ease-out;
  transform: translateY(-50%);
}
.c-sleep-night__menu:hover > .c-svg, .c-sleep-night__menu.is-active > .c-svg {
  color: #1788c3;
  cursor: pointer;
}

.c-sleep-night__menu-current-date {
  display: block;
  padding: 12px 48px 12px 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
  color: #424243;
  cursor: pointer;
  text-align: left;
  border: 2px solid #424243;
  transition: border-color 250ms ease-out;
  border-radius: 420px;
}
.c-sleep-night__menu-current-date:hover {
  border-color: #1788c3;
}
@media (min-width: 75em) {
  .c-sleep-night__menu-current-date {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1;
  }
}

/**
 * Default position of bubble is below target
 *
 * 1. Place the bubble above and center of the target area.
 */
.c-sleep-night-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  border: none;
  background-color: #1788c3;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
}
.c-sleep-night-popup:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .c-sleep-night-popup {
    position: absolute;
    top: 100%; /* [1] */
    left: 50%; /* [1] */
    bottom: auto;
    right: auto;
    width: auto;
    margin-top: 6px;
    padding: 6px;
    color: #f6f6f6;
    text-align: left;
    box-shadow: 0px 15px 16px -7px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -10px);
    transition: 0.3333333333s;
    border-radius: 3px;
  }
  .c-sleep-night-popup:before, .c-sleep-night-popup:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
  }
  .c-sleep-night-popup:before {
    border: 12px solid transparent;
    border-bottom-color: hsl(0, 0%, 100%);
    margin-left: -12px;
  }
  .c-sleep-night-popup:after {
    border: 11px solid transparent;
    border-bottom-color: #1788c3;
    margin-left: -11px;
  }
}
.c-sleep-night__menu.is-active .c-sleep-night-popup {
  display: block;
  opacity: 1;
  visibility: visible;
  will-change: opacity;
}
@media (min-width: 48em) {
  .c-sleep-night__menu.is-active .c-sleep-night-popup {
    transform: translate(-50%, 0px);
  }
}

.c-sleep-night-popup__header {
  position: relative;
  display: block;
  margin: 0;
  padding: 12px 36px;
  border-bottom: 1px solid hsl(0, 0%, 100%);
}
@media (min-width: 48em) {
  .c-sleep-night-popup__header {
    display: none;
  }
}

.c-sleep-night-popup__heading {
  color: hsl(0, 0%, 100%);
  margin-bottom: 0;
  font-weight: 300;
}

@media (max-width: 47.99em) {
  .c-sleep-night-popup__scrollable {
    position: static;
    height: 100vh;
    margin: 0;
    padding-bottom: 100px;
    backface-visibility: hidden;
    overflow-y: scroll;
    will-change: overflow;
  }
}

.c-sleep-night-popup__close {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
  transform: translateY(-50%);
  transition: background-color 250ms ease-out;
  z-index: 201;
}
.c-sleep-night-popup__close .c-svg {
  width: 100%;
  height: 100%;
  transition: color 250ms ease-out;
}
.c-sleep-night-popup__close, .c-sleep-night-popup__close:link, .c-sleep-night-popup__close:visited, .c-sleep-night-popup__close:active, .c-sleep-night-popup__close:focus,
.c-sleep-night-popup__close .c-svg {
  color: hsl(0, 0%, 100%) !important;
}
.c-sleep-night-popup__close:hover {
  background-color: hsl(0, 0%, 100%);
  text-decoration: none;
}
.c-sleep-night-popup__close:hover .c-svg {
  color: hsl(0, 0%, 30%) !important;
  text-decoration: none;
}

.c-sleep-night-scores {
  list-style: none;
  margin: 0;
  padding: 0; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-flow: column;
}
@media (min-width: 48em) {
  .c-sleep-night-scores {
    max-width: 444px;
    width: max-content;
    align-content: flex-start;
    flex-flow: row wrap;
  }
}
@media (min-width: 62em) and (max-width: 85.365em) {
  .c-sleep-night-scores {
    max-width: 376px;
  }
}

mpp-score-date-picker-item {
  display: inline-block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
@media (min-width: 48em) {
  mpp-score-date-picker-item {
    max-width: 74px;
    flex: 0 1 16.6666666667%;
    border-bottom: 0;
  }
}
@media (min-width: 62em) and (max-width: 85.365em) {
  mpp-score-date-picker-item {
    max-width: 62px;
  }
}

.c-sleep-night-scores__item {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.c-sleep-night-score-tile { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
  margin: 0;
  padding: 12px;
  color: hsl(0, 0%, 100%);
  transform: background-color 250ms ease-out, color 250ms ease-out;
  transition: 0.3333333333s;
}
.c-sleep-night-score-tile:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .c-sleep-night-score-tile {
    flex-direction: column;
    padding: 6px;
    background-color: transparent;
    border: 2px solid #1788c3;
    border-radius: 3px;
  }
}
.c-sleep-night-scores__item.is-active .c-sleep-night-score-tile {
  border-color: hsl(0, 0%, 100%);
  background-color: rgba(255, 255, 255, 0.2);
}
.c-sleep-night-score-tile:hover {
  background-color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.c-sleep-score-dial {
  position: relative;
  display: block;
  padding: 0;
  width: 36%;
  color: hsl(0, 0%, 100%);
}
@media (min-width: 48em) {
  .c-sleep-score-dial {
    width: 58px;
    height: 42px;
  }
}
.c-sleep-night-scores__item.has-data .c-sleep-score-dial {
  height: 42px;
}
.c-sleep-night-scores__item.has-data .c-sleep-score-dial:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 42px;
  height: 42px;
  color: hsl(0, 0%, 0%);
  text-align: center;
  font-size: 16px;
  font-size: 1rem;
  line-height: 35px;
  font-weight: 600;
  background-color: hsl(0, 0%, 100%);
  content: attr(data-score);
  border-radius: 50%;
  border: 4px solid #6dcff6;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.4);
}
@media (min-width: 48em) {
  .c-sleep-night-scores__item.no-data .c-sleep-score-dial { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    align-items: center;
  }
}
.c-sleep-night-scores__item.no-data .c-sleep-score-dial .no-data-msg {
  display: block;
}

.c-sleep-score-date {
  flex-grow: 1;
  padding-left: 12px;
  text-align: left;
  color: hsl(0, 0%, 100%);
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.15;
  font-weight: 600;
}
@media (min-width: 48em) {
  .c-sleep-score-date {
    padding-left: 0;
    padding-top: 6px;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
  }
}
.c-sleep-score-date .c-sleep-score-date-full {
  display: inherit;
}
@media (min-width: 48em) {
  .c-sleep-score-date .c-sleep-score-date-full {
    display: none !important;
  }
}
.c-sleep-score-date .c-sleep-score-date-short {
  display: none !important;
}
@media (min-width: 48em) {
  .c-sleep-score-date .c-sleep-score-date-short {
    display: inherit !important;
  }
}

.no-data-msg {
  display: none;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
}
@media (min-width: 48em) {
  .no-data-msg {
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 1.15;
  }
}

/* ==========================================================================
  #SLEEP SCORE
  ========================================================================== */
/**
 * The sleep score dial, which is generated by the jQuery Knob plugin, and
 * related sleep score elements.
 *
 *   jQuery Knob, by Anthony Terrien
 *   https://github.com/aterrien/jQuery-Knob
 *
 */
#sleepScore,
.c-sleep-score {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
}
@media (min-width: 48em) {
  #sleepScore,
  .c-sleep-score {
    width: 360px;
    height: 360px;
    margin-bottom: 24px;
  }
}

.c-sleep-score {
  position: relative;
  margin-bottom: 12px;
}
.no-data .c-sleep-score .c-sleep-score__knob,
.no-data .c-sleep-score .c-sleep-score__myair,
.no-data .c-sleep-score .c-sleep-score__points {
  color: #424243 !important;
}
.no-data .c-sleep-score .c-sleep-score__points:before {
  border-color: #b7b7b8;
}

.c-sleep-score__item {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
}
.js-gotoSleepScore .c-sleep-score__item, .js-gotoPrev .c-sleep-score__item, .js-gotoNext .c-sleep-score__item {
  visibility: visible;
  animation-name: aniFadeOut;
  animation-duration: 250ms;
  animation-delay: 0s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.js-loadSleepScore .has-data .c-sleep-score__item,
.js-initScore .has-data .c-sleep-score__item,
.js-loadPrevScore .has-data .c-sleep-score__item,
.js-loadNextScore .has-data .c-sleep-score__item {
  animation-name: aniStayHidden, aniFadeIn;
  animation-duration: 50ms, 250ms;
  animation-delay: 0s, 50ms;
  animation-timing-function: linear, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.js-loadSleepScore .no-data .c-sleep-score__item,
.js-initScore .no-data .c-sleep-score__item,
.js-loadPrevScore .no-data .c-sleep-score__item,
.js-loadNextScore .no-data .c-sleep-score__item {
  animation-name: aniStayHidden, aniFadeIn, aniDim;
  animation-duration: 50ms, 250ms, 500ms;
  animation-delay: 0s, 50ms, 750ms;
  animation-timing-function: linear, ease-out, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.c-sleep-score__score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 286px;
  height: 286px;
  z-index: 100;
}
@media (min-width: 48em) {
  .c-sleep-score__score {
    width: 346px;
    height: 346px;
  }
}
.c-sleep-score__score > div {
  display: inline-block !important;
}

.c-sleep-score__score-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 292px;
  height: 292px;
  background-color: hsl(0, 0%, 100%);
  z-index: 0;
  overflow: hidden;
  border-radius: 50%;
}
@media (min-width: 48em) {
  .c-sleep-score__score-bg {
    width: 348px;
    height: 348px;
  }
}
.c-sleep-score__score-bg .c-sleep-score__myair,
.c-sleep-score__score-bg .c-sleep-score__points {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.is-Android .c-sleep-score__score-bg {
  border-color: hsl(0, 0%, 100%);
}

.c-sleep-score__myair {
  top: 72px;
  margin-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: #424243;
}

.c-sleep-score__points {
  top: 208px;
  padding-top: 6px;
  margin-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}
.c-sleep-score__points, .c-sleep-score__points span {
  color: #6d6d6d;
}
@media (min-width: 48em) {
  .c-sleep-score__points {
    top: 240px;
  }
}
.c-sleep-score__points:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 124px;
  border-top: 1px solid #6d6d6d;
  content: "";
  height: 1px;
  transform: translateX(-50%);
}

.c-sleep-score__knob {
  margin-top: 72px !important;
  letter-spacing: -6px;
  font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif !important;
  font-weight: 600 !important;
  color: #424243 !important;
  line-height: 1.45 !important;
  outline: none;
}
.c-sleep-score__knob[disabled] {
  color: #424243 !important;
}
@media (min-width: 48em) {
  html:not(._Telerik_IE9) .c-sleep-score__knob {
    margin-top: 84px !important;
  }
}

.c-sleep-score__msg {
  margin: 0;
  margin-bottom: 24px;
  min-height: 60px;
  font-weight: 600;
  text-align: center;
  color: #424243;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.1;
}
@media (min-width: 48em) {
  .c-sleep-score__msg {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.1;
  }
}
.c-sleep-score__msg span {
  display: block;
  margin-top: 6px;
  color: #424243;
  font-weight: 300;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.js-loadSleepScore .c-sleep-score__msg, .js-initScore .c-sleep-score__msg, .js-loadPrevScore .c-sleep-score__msg, .js-loadNextScore .c-sleep-score__msg {
  animation-name: aniStayHidden, aniFadeIn;
  animation-duration: 550ms, 150ms;
  animation-delay: 0s, 550ms;
  animation-timing-function: linear, ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.js-gotoSleepScore .c-sleep-score__msg, .js-gotoPrev .c-sleep-score__msg, .js-gotoNext .c-sleep-score__msg {
  visibility: visible;
  animation-name: aniFadeOut;
  animation-duration: 250ms;
  animation-delay: 0s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.c-sleep-score,
.c-sleep-score__item,
.c-sleep-score__msg {
  visibility: hidden;
}
.js-loadSleepScore .c-sleep-score, .js-initScore .c-sleep-score, .js-loadPrevScore .c-sleep-score, .js-loadNextScore .c-sleep-score,
.js-loadSleepScore .c-sleep-score__item,
.js-initScore .c-sleep-score__item,
.js-loadPrevScore .c-sleep-score__item,
.js-loadNextScore .c-sleep-score__item,
.js-loadSleepScore .c-sleep-score__msg,
.js-initScore .c-sleep-score__msg,
.js-loadPrevScore .c-sleep-score__msg,
.js-loadNextScore .c-sleep-score__msg {
  visibility: visible;
  will-change: visibility;
}

.c-sleep-score__last-sync {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  color: #6d6d6d;
}
@media (max-width: 61.99em) {
  .c-sleep-score__last-sync {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e6e6e7;
  }
}
.c-sleep-score__last-sync .c-svg {
  color: #1788c3;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

/* Sleep score breakdown
   ========================================================================== */
.c-sleep-score__details {
  position: relative;
  display: table;
  width: 100%;
  margin-bottom: 34px;
  cursor: pointer;
}
@media (min-width: 48em) {
  .c-sleep-score__details {
    margin-bottom: 36px;
  }
}
.c-sleep-score__details:hover > .c-sleep-score__details-link .c-svg {
  color: #424243;
  transform: translateX(50%);
}
.c-sleep-score__details:focus {
  outline: none;
}
.no-data .c-sleep-score__details .c-sleep-score__details-data,
.no-data .c-sleep-score__details .metric-score__points {
  color: #b7b7b8 !important;
}

.c-sleep-score__details-icon {
  display: table-cell;
  width: 38px;
  vertical-align: middle;
  text-align: center;
}
@media (min-width: 48em) {
  .c-sleep-score__details-icon {
    width: 50px;
  }
}
.c-sleep-score__details-icon .c-svg {
  width: 32px;
  height: 32px;
}
@media (min-width: 48em) {
  .c-sleep-score__details-icon .c-svg {
    width: 42px;
    height: 42px;
  }
}

.c-sleep-score__details-body {
  position: relative;
  display: table-cell;
  width: auto;
  vertical-align: middle;
}
.c-sleep-score__details-body > .c-sleep-score__details-body {
  width: 100%;
  padding-left: 6px;
}
@media (min-width: 48em) {
  .c-sleep-score__details-body > .c-sleep-score__details-body {
    padding-left: 12px;
  }
}

.c-sleep-score__details-data {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  color: #424243;
  font-weight: 700;
}
@media (min-width: 48em) {
  .c-sleep-score__details-data {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1;
  }
}
@media (min-width: 75em) {
  .c-sleep-score__details-data {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1;
  }
}
.c-sleep-score__details--sleep-score .c-sleep-score__details-data {
  font-weight: 600;
}

.c-sleep-score__details-label {
  color: #6d6d6d;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
}
@media (min-width: 48em) {
  .c-sleep-score__details-label {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1;
  }
}
@media (min-width: 75em) {
  .c-sleep-score__details-label {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1;
  }
}

.c-sleep-score__details-score {
  position: relative;
  display: table-cell;
  width: 60px;
  padding-right: 28px;
  text-align: right;
  vertical-align: middle;
}
@media (min-width: 48em) {
  .c-sleep-score__details-score {
    width: 100px;
    padding-right: 48px;
  }
}
.c-sleep-score__details-score > .metric-score__points {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
}
@media (min-width: 48em) {
  .c-sleep-score__details-score > .metric-score__points {
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1;
  }
}
@media (min-width: 75em) {
  .c-sleep-score__details-score > .metric-score__points {
    font-size: 34px;
    font-size: 2.125rem;
    line-height: 1;
  }
}
.c-sleep-score__details-score > .metric-score__points:before {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 6px;
  width: 25px;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1;
  color: #424243;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-weight: 300;
}
@media (min-width: 48em) {
  .c-sleep-score__details-score > .metric-score__points:before {
    width: 40px;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1;
  }
}

.c-sleep-score__details-meter {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background-color: #d9d8d5;
}
.c-sleep-score__details-meter > .metric-meter__fill {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0%;
  border-right: 2px solid hsl(0, 0%, 100%);
  transform: translateX(-100%);
  transition-duration: 1s;
  transition-property: transform, width;
  transition-timing-function: ease-out;
}

/**
 * 1. Let's us vertically-align the arrow and use the translateX property
 */
.c-sleep-score__details-link {
  display: table-cell;
  width: 18px;
  vertical-align: middle;
  text-align: right;
}
@media (min-width: 48em) {
  .c-sleep-score__details-link {
    text-align: left;
  }
}
.c-sleep-score__details-link .c-svg {
  display: inline-block; /* [1] */
  width: 18px;
  height: 18px;
  color: #b7b7b8;
  transform: translateX(0);
  transition-duration: 0.3s;
  transition-property: transform, color;
  transition-timing-function: ease-out;
}

.c-sleep-score__details--usage .c-sleep-score__details-icon,
.c-sleep-score__details--usage .metric-score__points {
  color: #1788c3;
}
.c-sleep-score__details--usage .metric-meter__fill {
  background-color: #1788c3;
}
.c-sleep-score__details--usage .metric-score__points:before {
  content: "/ 70";
}

.c-sleep-score__details--mask-leak .c-sleep-score__details-icon,
.c-sleep-score__details--mask-leak .metric-score__points {
  color: #6e308f;
}
.c-sleep-score__details--mask-leak .c-sleep-score__details-icon .c-svg {
  width: 38px;
}
@media (min-width: 48em) {
  .c-sleep-score__details--mask-leak .c-sleep-score__details-icon .c-svg {
    width: 50px;
  }
}
.c-sleep-score__details--mask-leak .metric-meter__fill {
  background-color: #6e308f;
}
.c-sleep-score__details--mask-leak .metric-score__points:before {
  content: "/ 20";
}

.c-sleep-score__details--ahi-events .c-sleep-score__details-icon,
.c-sleep-score__details--ahi-events .metric-score__points {
  color: #da1f3d;
}
.c-sleep-score__details--ahi-events .metric-meter__fill {
  background-color: #da1f3d;
}
.c-sleep-score__details--ahi-events .metric-score__points:before {
  content: "/ 5";
}

.c-sleep-score__details--mask-on-off .c-sleep-score__details-icon,
.c-sleep-score__details--mask-on-off .metric-score__points {
  color: #ed6937;
}
.c-sleep-score__details--mask-on-off .metric-meter__fill {
  background-color: #ed6937;
}
.c-sleep-score__details--mask-on-off .metric-score__points:before {
  content: "/ 5";
}

.c-sleep-score__details--sleep-score .c-sleep-score__details-icon,
.c-sleep-score__details--sleep-score .metric-score__points {
  color: #ffc344;
}
.c-sleep-score__details--sleep-score .metric-meter__fill {
  background-color: #ffc344;
}
.c-sleep-score__details--sleep-score .metric-score__points:before {
  content: "/ 100";
}

@media (min-width: 48em) {
  .c-sleep-score__metrics {
    padding-top: 24px;
  }
}
@media (min-width: 62em) {
  .c-sleep-score__metrics {
    padding: 60px 0;
  }
}
.c-sleep-score__metrics.is-active .c-sleep-score__details--usage .metric-meter__fill {
  transition-delay: 0.5s;
}
.c-sleep-score__metrics.is-active .c-sleep-score__details--mask-leak .metric-meter__fill {
  transition-delay: 0.8s;
}
.c-sleep-score__metrics.is-active .c-sleep-score__details--ahi-events .metric-meter__fill {
  transition-delay: 1s;
}
.c-sleep-score__metrics.is-active .c-sleep-score__details--mask-on-off .metric-meter__fill {
  transition-delay: 1.2s;
}
.c-sleep-score__metrics.is-active .c-sleep-score__details--sleep-score .metric-meter__fill {
  transition-delay: 1.5s;
}
.c-sleep-score__metrics.is-active .metric-meter__fill {
  transform: translateX(0);
}

/* Misc */
@media (min-width: 48em) {
  .c-tips-link {
    text-align: right;
  }
}
.c-tips-link .c-btn--text {
  margin-bottom: 0;
}
@media (max-width: 47.99em) {
  .c-tips-link.c-tips-link--bottom .c-btn--text {
    text-align: left;
  }
}

/* ==========================================================================
  #SURVEY
  ========================================================================== */
.c-survey {
  position: relative;
}

.c-survey--overlay, .c-survey--overlay[data-state=is-hidden] {
  display: block;
  position: absolute;
  top: -99999em;
  left: -99999em;
  width: 0%;
  height: 0%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  overflow: hidden;
  opacity: 0;
  transition: 250ms opacity ease;
}
.c-survey--overlay[data-state=is-active] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: 250ms opacity ease;
  will-change: opacity;
}
.c-survey--overlay[data-state=is-dismissed] {
  display: block;
  opacity: 0;
  transition: 250ms opacity ease;
}
.c-survey--overlay.c-survey--help, .c-survey--overlay.c-survey--help[data-state=is-hidden] {
  background-color: rgba(0, 0, 0, 0.15);
}

.c-survey__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction: column;
  width: 94%;
  max-width: 600px;
  max-height: 94%;
  margin: 0 auto;
  border-radius: 12px;
  background-color: #f6f6f6;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.c-survey__wrapper .c-form-field__label:not(.has-instructions) {
  margin-bottom: 24px;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}
.c-survey__wrapper .c-form-field__instruction {
  margin-bottom: 24px;
}
.c-survey__wrapper [data-form-field-status=show-error] {
  padding-top: 32px;
}
.c-survey__wrapper .c-form-field__error {
  position: absolute;
  top: -32px;
  left: 0;
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 4px 0 4px 30px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
}
.c-survey__wrapper .c-form-field__error:before {
  position: absolute;
  top: 50%;
  left: 6px;
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23DA1F3D' d='M14.828 7.757l-2.828 2.828-2.828-2.828-1.414 1.414 2.828 2.828-2.828 2.828 1.414 1.414 2.828-2.828 2.828 2.828 1.414-1.414-2.828-2.828 2.828-2.828-1.414-1.414zM12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateY(-50%);
  border: none !important;
}

.c-survey__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  z-index: 99999;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 250ms ease-out, color 250ms ease-out;
}
.c-survey__close:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23B7B7B8' d='M16.369 6.216l-4.37 4.37-4.37-4.37-1.414 1.414 4.37 4.37-4.37 4.37 1.414 1.414 4.37-4.37 4.37 4.37 1.414-1.414-4.37-4.37 4.37-4.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-survey__close:hover, .c-survey__close:active, .c-survey__close:focus {
  background-color: #1788c3;
}
.c-survey__close:hover:before, .c-survey__close:active:before, .c-survey__close:focus:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M16.369 6.216l-4.37 4.37-4.37-4.37-1.414 1.414 4.37 4.37-4.37 4.37 1.414 1.414 4.37-4.37 4.37 4.37 1.414-1.414-4.37-4.37 4.37-4.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

/**
 * Scrollable content area of the modal window.
 *
 * 1. Add space between the body and teh modal window to make room for
 *    the close button.
 * 2. Set a max-height so that scrolling can occur.
 * 3. Show vertical scrollbar when content exceeds max-height.
 */
.c-survey__body { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  margin: 0;
  padding: 24px;
  padding-top: 0;
  max-height: 440px; /* [2] */
  overflow-y: auto; /* [3] */
  /* Bigger animated radion button */
}
@media (min-width: 48em) {
  .c-survey__body {
    max-height: 600px;
  }
}
.c-survey__body > :last-child {
  margin-bottom: 0;
}
.c-survey__body.no-scrolling {
  max-height: unset !important;
  overflow-y: unset !important;
}
.c-survey__body[data-form-field-status=error] {
  padding-top: 32px;
}
.c-survey__body .ani-radio {
  margin-bottom: 24px;
}
.c-survey__body .ani-radio + .c-form-field--nested {
  padding-left: 36px;
}
.c-survey__body .ani-radio input[type=radio] + label {
  padding-left: 36px;
}
.c-survey__body .ani-radio input[type=radio] + label:before {
  width: 24px;
  height: 24px;
}
.c-survey__body .ani-radio input[type=radio] + label:after {
  left: 6px;
  width: 14px;
  height: 14px;
}
.c-survey__body .ani-checkbox {
  margin-bottom: 24px;
}
.c-survey__body .ani-checkbox:after {
  content: "";
  display: table;
  clear: both;
}
.c-survey__body .ani-checkbox + .c-form-field--nested {
  padding-left: 12px;
}
.c-survey__body .ani-checkbox [type=checkbox] {
  width: 24px;
  height: 24px;
  float: left;
}
.c-survey__body .ani-checkbox label {
  padding-left: 12px;
}
.c-survey__body .c-form-img-picker__item .c-form-img-picker__label {
  display: block;
  padding-top: 6px;
  background-color: #f6f6f6;
  line-height: 1.1;
}

.c-survey__header {
  margin: 0;
  margin-bottom: 24px;
  padding: 48px 48px 24px 24px;
  align-items: flex-start;
}
.c-survey__header + .c-survey__body {
  margin-top: 0;
}

.c-survey__heading {
  margin-bottom: 0;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 300;
}
@media (min-width: 48em) {
  .c-survey__heading {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.25;
  }
}
.c-survey__heading .c-svg {
  top: 0.125em;
  margin-right: 12px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 0;
}
@media (min-width: 48em) {
  .c-survey__heading .c-svg {
    margin-right: 24px;
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 0;
  }
}

.c-survey__footer {
  padding: 24px 24px 48px;
  margin-bottom: 0;
  align-items: flex-end;
}
.c-survey__footer .c-form-field--buttons {
  margin-top: 0;
}

.c-survey__carousel {
  margin: 0 auto;
  width: 200px;
}
@media (min-width: 48em) {
  .c-survey__carousel {
    width: 552px;
  }
}

/* Survey progress stepper
   ========================================================================== */
.c-survey__stepper {
  position: relative;
  display: block;
  margin: 0;
  margin-bottom: 48px;
  margin-left: -12px;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 0;
}

.c-survey__step-indicator {
  box-sizing: border-box;
  display: inline-block;
  width: 32px;
  height: 6px;
  margin: 0;
  margin-left: 12px;
  padding: 0;
  background-color: hsl(0, 0%, 80%);
  border-radius: 2em;
  font-size: 16px;
  font-size: 1rem;
}
.c-survey__step-indicator[data-state=is-active] {
  background-color: #1788c3;
}

/* ==========================================================================
   #SVG ICONS
   ========================================================================== */
/**
 * 1. Help align our inline SVG icons.
 * 2. Align bottom of icon with baseline.
 * 3. icon only, keep flush with wrapper.
 */
.c-svg {
  position: relative; /* [1] */
  top: 0.25em; /* [1] */
  display: inline-flex; /* [1] */
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  align-self: center; /* [1] */
}
.c-svg.c-svg--baseline {
  top: 0.125em; /* [2] */
}
.c-svg.c-svg--flush {
  top: 0; /* [3] */
}

/* Interactions
   ========================================================================== */
.c-svg--hover {
  position: relative;
}
.c-svg--hover.c-icon-btn-top-link {
  position: sticky;
  position: -webkit-sticky;
}
._Telerik_IE9 .c-svg--hover.c-icon-btn-top-link {
  position: fixed;
  left: auto;
  bottom: 186px;
}
.c-svg--hover .c-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out;
  will-change: color;
}
.c-svg--hover .c-svg.icon-default {
  color: #6d6d6d;
  visibility: visible;
  opacity: 1;
}
.c-svg--hover .c-svg.icon-hover {
  visibility: hidden;
  opacity: 0;
  color: #1788c3;
}
.c-svg--hover:not(.c-icon-btn-thumbs):hover .c-svg.icon-default {
  visibility: hidden;
  opacity: 0;
}
.c-svg--hover:not(.c-icon-btn-thumbs):hover .c-svg.icon-hover {
  visibility: visible;
  opacity: 1;
}
.c-svg--hover.c-icon-btn-thumbs:hover .c-svg.icon-default {
  color: #1788c3;
}
.c-svg--hover.c-icon-btn-thumbs.is-active .c-svg.icon-default, .c-svg--hover.c-icon-btn-thumbs.is-active:hover .c-svg.icon-default {
  visibility: hidden;
  opacity: 0;
}
.c-svg--hover.c-icon-btn-thumbs.is-active .c-svg.icon-hover, .c-svg--hover.c-icon-btn-thumbs.is-active:hover .c-svg.icon-hover {
  visibility: visible;
  opacity: 1;
  color: #1788c3;
}

/* ==========================================
Single-colored icons can be modified like so:
.c-svg--name {
  font-size: 32px;
  color: red;
}
========================================== */
.c-svg--streak {
  width: 0.5791015625em;
}

.c-svg--mask-leak {
  width: 1.1875em;
}

.c-svg--book-open {
  width: 1.2939453125em;
}

.c-svg--connectivity {
  width: 1.2939453125em;
}

.c-svg--cpap-device {
  width: 1.2939453125em;
}

.c-svg--headmask-fullface {
  width: 1.2939453125em;
}

.c-svg--headmask-nasal {
  width: 1.2939453125em;
}

.c-svg--headmask-pillow {
  width: 1.2939453125em;
}

.c-svg--device-laptop {
  width: 1.2939453125em;
}

.c-svg--checkmark {
  width: 1.2939453125em;
}

/* ==========================================================================
  #TRENDS
  ========================================================================== */
/* Navigation for trends flexslider
   ========================================================================== */
.c-trends-nav {
  padding-bottom: 0;
}
.c-trends-nav:after {
  content: "";
  display: table;
  clear: both;
}

.c-trends-nav__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -12px;
  font-size: 0;
}
.c-trends-nav__list:after {
  content: "";
  display: table;
  clear: both;
}

.c-trends-nav__item {
  position: relative;
  display: inline-block;
  padding-left: 12px;
  text-align: center;
  font-size: 16px;
  font-size: 1rem;
}

.c-trends-nav__tab {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding-block-end: 0;
  padding: 6px;
  padding-top: 0;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
.c-trends-nav__tab:hover {
  cursor: pointer;
}
.c-trends-nav__tab .c-svg {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 32px;
  height: 32px;
}
@media (min-width: 48em) {
  .c-trends-nav__tab .c-svg {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }
}
.c-trends-nav__tab.usage-hours .c-svg {
  color: #1788c3;
}
.c-trends-nav__tab.mask-leak .c-svg {
  color: #6e308f;
  width: 38px;
}
@media (min-width: 48em) {
  .c-trends-nav__tab.mask-leak .c-svg {
    width: 50px;
  }
}
.c-trends-nav__tab.ahi-events .c-svg {
  color: #da1f3d;
}
.c-trends-nav__tab.mask-on-off .c-svg {
  color: #ed6937;
}
.c-trends-nav__tab.sleep-score .c-svg {
  color: #ffc344;
}
.is-active .c-trends-nav__tab {
  background-color: hsl(0, 0%, 100%);
}
.is-active .c-trends-nav__tab.usage-hours {
  border-bottom-color: #1788c3;
}
.is-active .c-trends-nav__tab.mask-leak {
  border-bottom-color: #6e308f;
}
.is-active .c-trends-nav__tab.ahi-events {
  border-bottom-color: #da1f3d;
}
.is-active .c-trends-nav__tab.mask-on-off {
  border-bottom-color: #ed6937;
}
.is-active .c-trends-nav__tab.sleep-score {
  border-bottom-color: #ffc344;
}

.c-trends-nav__label {
  display: none;
}
@media (min-width: 62em) {
  .c-trends-nav__label {
    display: block;
  }
}

/* Trend data - the slides in the carousel
  ========================================================================== */
.c-trends-data {
  position: relative;
  margin: 0 auto;
  padding: 0 6px;
}
.c-trends-data:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .c-trends-data {
    padding: 0;
  }
}

.c-trends-data__header {
  display: none;
  padding-bottom: 24px;
  text-align: center;
}

@media (max-width: 47.99em) {
  .c-trends-data__heading {
    margin-bottom: 12px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.2;
  }
  .c-trends-data__heading a {
    display: block;
  }
}

.c-trends-data__text {
  margin-bottom: 0;
}
@media (max-width: 47.99em) {
  .c-trends-data__text {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

.c-trends-data__mobiPager {
  position: relative;
  width: 200px;
  margin: 6px auto 24px;
  text-align: center;
}
.c-trends-data__mobiPager .mobiPager-dates {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0 12px;
  width: auto;
  min-width: 120px;
  text-align: center;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.c-trends-data__mobiPager .c-directional-nav__arrow {
  width: 24px;
  height: 24px;
}
.c-trends-data__mobiPager .c-directional-nav__arrow, .c-trends-data__mobiPager .c-directional-nav__arrow:link, .c-trends-data__mobiPager .c-directional-nav__arrow:visited, .c-trends-data__mobiPager .c-directional-nav__arrow:hover, .c-trends-data__mobiPager .c-directional-nav__arrow:active, .c-trends-data__mobiPager .c-directional-nav__arrow:focus {
  outline: none;
}

.c-trends-data__chart {
  position: relative;
  display: block;
  margin: 0 auto;
  height: 305px;
}
@media (min-width: 48em) {
  .c-trends-data__chart {
    height: 350px;
  }
}
@media (min-width: 62em) {
  .c-trends-data__chart {
    height: 450px;
  }
}
@media (min-width: 75em) {
  .c-trends-data__chart {
    height: 600px;
  }
}
.c-trends-data__chart > .flot-chart {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.c-trends-data__chart > .flot-chart .tickLabel {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.25;
}
@media (min-width: 62em) {
  .c-trends-data__chart > .flot-chart .tickLabel {
    font-size: 11px;
    font-size: 0.6875rem;
    line-height: 1.65;
  }
}

.xaxisLabel,
.yaxisLabel,
.y1LabelLayer,
.x1LabelLayer {
  font-weight: 700;
}

/* Chart bits
  ========================================================================== */
.c-chart-tooltip {
  position: absolute;
  display: none;
  top: 0;
  padding: 8px;
  max-width: 140px;
  border: 1px solid #b7b7b8;
  background-color: hsl(0, 0%, 100%);
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  border-radius: 12px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.15;
  transform: translateY(-120%) translateZ(0);
  box-shadow: 0px 6px 5px -4px rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
  transition-duration: 0.3s;
  transition-property: transform;
  z-index: 100;
  text-align: center;
}
@media (min-width: 48em) {
  .c-chart-tooltip {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}
@media (min-width: 48em) {
  .c-chart-tooltip {
    max-width: initial;
  }
}
.c-chart-tooltip .c-chart-tooltip__label {
  display: block;
  margin-bottom: 6px;
  color: #424243;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1.15;
}
.c-chart-tooltip .c-chart-tooltip__data {
  font-weight: 700;
  color: hsl(0, 0%, 0%);
}
.c-chart-tooltip.average {
  display: block;
  transition-delay: 0.5s;
}
.c-chart-tooltip.is-active {
  transform: translateY(-125%);
}
.c-chart-tooltip:before, .c-chart-tooltip:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 100%;
  right: auto;
  bottom: auto;
  left: 50%;
  content: "";
  transform: translate(-50%, 0px);
}
.c-chart-tooltip:before {
  border-top: 10px hsl(0, 0%, 100%) solid !important;
  border-left: 6px transparent solid !important;
  border-right: 6px transparent solid !important;
  border-bottom: 0;
  z-index: -1;
}
.c-chart-tooltip:after {
  border-top: 12px #b7b7b8 solid !important;
  border-left: 8px transparent solid !important;
  border-right: 8px transparent solid !important;
  border-bottom: 0;
  transform: translate(-50%, 1px);
  z-index: -2;
}

#legend table {
  margin: 5px auto;
}
#legend table td.legendLabel {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1.3;
  padding: 0 8px 0 2px;
}

.c-trends-data__threshold {
  position: absolute;
  top: 0;
  right: 8px;
  color: hsl(0, 0%, 0%);
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1;
  font-weight: 700;
}
@media (min-width: 48em) {
  .c-trends-data__threshold {
    right: 18px;
  }
}
@media (min-width: 48em) {
  .c-trends-data__threshold {
    right: 21px;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1;
  }
}
@media (min-width: 62em) {
  .c-trends-data__threshold {
    right: 24px;
  }
}

/* ==========================================================================
 #VIDEO
 ========================================================================== */
/**
 * Video player overlay. Hidden container with link to video, opens in
 * full screen overlay when a link on the page is clicked to invoke the overlay.
 * Requires fitvid.js plugin
 *
 * HTML

    <div id="videoOverlay" class="c-video c-video--overlay" data-state="is-hidden">
      <div class="c-video__table">
        <div class="c-video__pos">
          <div class="c-video__wrapper">
            <a href="#0" id="videoClose" data-toggle="videoOverlay" data-playback="pauseVideo" class="c-video__close"><svg class="c-svg c-svg--clear-circle c-svg--flush"><use xlink:href="#c-svg--clear-circle"></use></svg></a>

            <div class="c-video__panel">
              <div class="fit-video">
                <iframe runat="server" id="videoContent" width="640" height="360" src="" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

 */
.c-video {
  position: relative;
}

.c-video--overlay, .c-video--overlay[data-state=is-hidden] {
  display: block;
  position: absolute;
  top: -99999em;
  left: -99999em;
  width: 0%;
  height: 0%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  overflow: hidden;
  opacity: 0;
}
.c-video--overlay.isActive, .c-video--overlay[data-state=is-active] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: aniStayHidden, anifadeIn;
  animation-duration: 250ms, 250ms;
  animation-delay: 0s, 250ms;
  animation-timing-function: linear, ease-out;
  animation-iteration-count: 1;
  opacity: 1;
}
.c-video--overlay.isNotActive, .c-video--overlay[data-state=is-dismissed] {
  display: block;
  animation-name: anifadeOut;
  animation-duration: 250ms;
  animation-delay: 0s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@media (max-width: 61.99em) {
  .c-video--overlay .o-wrapper {
    position: relative; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    align-items: center;
    padding: 0;
    height: 100%;
  }
}

.c-video__table {
  display: table;
  width: 100%;
  height: 100%;
}

.c-video__pos {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.c-video__wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 48em) {
  .c-video__wrapper {
    max-width: 850px;
  }
}
@media (min-width: 62em) {
  .c-video__wrapper {
    max-width: 853px;
  }
}
@media (min-width: 100em) {
  .c-video__wrapper {
    max-width: 960px;
  }
}
.c-video__wrapper .c-video__panel {
  width: 100%;
  border: 3px solid hsl(0, 0%, 100%);
}
@media (min-width: 62em) {
  .c-video__wrapper .c-video__panel {
    border-width: 12px;
  }
}

.c-video__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  z-index: 99999;
}
@media (min-width: 62em) {
  .c-video__close {
    right: -40px;
  }
}
.c-video__close .c-svg {
  top: 0;
  width: 100%;
  height: 100%;
  color: hsl(0, 0%, 100%);
  opacity: 0.8;
  transition: opacity 250ms ease-out;
  will-change: opacity;
}
.c-video__close:hover .c-svg {
  opacity: 1;
}

/* Choose a language screen. When a video is not available in the user's chosen
* language, the user must select a video from a list of avaialble languages.
  ========================================================================== */
.c-video-language--home .c-video-language--home_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  background: hsl(0, 0%, 80%) url(/assets/images/videoHomeThumb.jpg) 50% 50% no-repeat;
  background-size: cover;
  z-index: 1000;
}
.c-video-language--home .c-video-language__msg {
  opacity: 0;
  background: hsl(0, 0%, 80%) url(/assets/images/videoHomeBg.jpg) 50% 50% no-repeat;
  background-size: cover;
  transition: opacity, 250ms, ease, 250ms;
}
.c-video-language--home .c-video-language__msg.active {
  opacity: 1;
  will-change: opacity;
}

.c-video-language--lib .c-video-language__msg {
  background: hsl(0, 0%, 80%) url(/assets/images/videoLangBg.jpg) 50% 50% no-repeat;
  background-size: cover;
}

.c-video-language__msg {
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  background-size: cover;
}
.c-video-language__msg h3,
.c-video-language__msg h3 span {
  font-weight: 700;
  color: hsl(0, 0%, 0%);
}
@media (max-width: 47.99em) {
  .c-video-language__msg h3,
  .c-video-language__msg h3 span {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.3333333333;
  }
}
.c-video-language__msg p {
  color: hsl(0, 0%, 0%);
}
@media (max-width: 47.99em) {
  .c-video-language__msg p {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}
.c-video-language__msg .c-video-language__header,
.c-video-language__msg .c-video-language__btns {
  position: absolute;
  width: 100%;
  padding: 0 24px;
  text-align: center;
}
.c-video-language__msg .c-video-language__header {
  top: 6%;
}
@media (min-width: 48em) {
  .c-video-language__msg .c-video-language__header {
    top: 20%;
  }
}
@media (min-width: 62em) {
  .c-video-language__msg .c-video-language__header {
    top: 25%;
  }
}
.c-video-language__msg .c-video-language__btns {
  bottom: 4%;
}
@media (min-width: 48em) {
  .c-video-language__msg .c-video-language__btns {
    bottom: 16%;
  }
}
@media (min-width: 62em) {
  .c-video-language__msg .c-video-language__btns {
    bottom: 20%;
  }
}
.c-video-language__msg .c-video-language__btns [type=submit].btn-primary, .c-video-language__msg .c-video-language__btns [type=submit].btn-secondary,
.c-video-language__msg .c-video-language__btns [type=button].btn-primary,
.c-video-language__msg .c-video-language__btns [type=button].btn-secondary {
  margin: 0 0 4px;
  padding: 11px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
@media (min-width: 48em) {
  .c-video-language__msg .c-video-language__btns [type=submit].btn-primary, .c-video-language__msg .c-video-language__btns [type=submit].btn-secondary,
  .c-video-language__msg .c-video-language__btns [type=button].btn-primary,
  .c-video-language__msg .c-video-language__btns [type=button].btn-secondary {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}

.c-video-language__menu {
  margin: 0 auto;
  padding: 4px 0;
  border-bottom: 1px solid hsl(0, 0%, 80%);
}
.c-video-language__menu:after {
  content: "";
  display: table;
  clear: both;
}
.c-video-language__menu p {
  display: none;
}
.c-video-language__menu h3,
.c-video-language__menu h3 span {
  display: inline;
  color: hsl(0, 0%, 0%);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  margin-bottom: 0;
  font-weight: 400;
}
.c-video-language__menu .c-video-language__header,
.c-video-language__menu .c-video-language__btns {
  display: block;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
@media (min-width: 48em) {
  .c-video-language__menu .c-video-language__header,
  .c-video-language__menu .c-video-language__btns {
    display: inline;
  }
}
.c-video-language__menu .c-video-language__btns [type=submit].btn-primary, .c-video-language__menu .c-video-language__btns [type=submit].btn-secondary,
.c-video-language__menu .c-video-language__btns [type=button].btn-primary,
.c-video-language__menu .c-video-language__btns [type=button].btn-secondary {
  margin: 0 0 0 2px;
  padding: 5px 11px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.c-video-language--home {
  position: relative;
}
.c-video-language--home .c-video-language--home_img,
.c-video-language--home .c-video-language__msg {
  height: 292px;
}
@media (min-width: 23.4375em) {
  .c-video-language--home .c-video-language--home_img,
  .c-video-language--home .c-video-language__msg {
    height: 246px;
  }
}
@media (min-width: 35.5em) {
  .c-video-language--home .c-video-language--home_img,
  .c-video-language--home .c-video-language__msg {
    height: 300px;
  }
}
@media (min-width: 41.6875em) {
  .c-video-language--home .c-video-language--home_img,
  .c-video-language--home .c-video-language__msg {
    height: 292px;
  }
}
@media (min-width: 48em) {
  .c-video-language--home .c-video-language--home_img,
  .c-video-language--home .c-video-language__msg {
    height: 447px;
  }
}
@media (min-width: 62em) {
  .c-video-language--home .c-video-language--home_img,
  .c-video-language--home .c-video-language__msg {
    height: 480px;
  }
}

.c-video-language--lib {
  position: relative;
  margin-bottom: 48px;
}
.c-video-language--lib .c-video-language__msg {
  height: 292px;
}
@media (min-width: 23.4375em) {
  .c-video-language--lib .c-video-language__msg {
    height: 232px;
  }
}
@media (min-width: 25.875em) {
  .c-video-language--lib .c-video-language__msg {
    height: 246px;
  }
}
@media (min-width: 35.5em) {
  .c-video-language--lib .c-video-language__msg {
    height: 292px;
  }
}
@media (min-width: 41.6875em) {
  .c-video-language--lib .c-video-language__msg {
    height: 400px;
  }
}
@media (min-width: 62em) {
  .c-video-language--lib .c-video-language__msg {
    height: 447px;
  }
}

.no-scroll--video {
  overflow: hidden;
  height: 100vh;
}

.fluid-width-video-wrapper {
  width: 100%;
  position: relative;
  height: 0;
  padding: 0;
}
.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
  #ACC-PANEL
  ========================================================================== */
@media (min-width: 62em) {
  .c-acc-panel_col {
    width: 680px;
  }
}

.c-acc-panel {
  display: block;
  margin-bottom: 24px;
  margin-left: -24px;
  margin-right: -24px;
  transition: opacity 350ms ease, visibility 350ms ease;
}
@media (min-width: 48em) {
  .c-acc-panel {
    margin-left: 0;
    margin-right: 0;
  }
}
.is-active .c-acc-panel {
  position: relative;
  visibility: visible;
  opacity: 1;
}
.is-hidden .c-acc-panel {
  position: absolute;
  visibility: hidden;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
}

.c-acc-panel__item {
  display: block;
  font-size: 0;
}
.c-acc-panel__item:after {
  content: "";
  display: table;
  clear: both;
}
.item-has-top-border .c-acc-panel__item, .c-acc-panel__item:not(:first-of-type) {
  border-top: 1px solid hsl(0, 0%, 100%);
}

.c-acc-panel__btn,
.c-acc-panel__img,
.c-acc-panel__body,
.c-acc-panel__links,
.c-acc-panel__label,
.c-acc-panel__value,
.c-acc-panel__heading {
  display: inline-block;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 12px;
  padding-right: 12px;
  vertical-align: top;
  box-sizing: border-box;
  font-size: 16px;
  font-size: 1rem;
}

@media (min-width: 48em) {
  .c-acc-panel__img,
  .c-acc-panel__body {
    display: table-cell;
    padding-left: 6px;
    padding-right: 6px;
  }
}

.c-acc-panel__img {
  vertical-align: middle;
}

.c-acc-panel__heading {
  width: 66.66667%;
  padding: 0;
  padding-left: 12px;
  flex-grow: 1;
}
@media (min-width: 48em) {
  .c-acc-panel__heading {
    padding-left: 0;
  }
}
.no-btn .c-acc-panel__heading {
  width: 100%;
}
.c-acc-panel__heading.has-wide-btn {
  width: 100%;
  margin-bottom: 24px;
}
@media (min-width: 35.5em) {
  .c-acc-panel__heading.has-wide-btn {
    width: 50%;
    margin-bottom: 0;
  }
}

.c-acc-panel__img {
  width: 100px;
  padding: 6px;
  background-color: hsl(0, 0%, 100%);
}
.c-acc-panel__img > img {
  max-width: 88px;
}
@media (min-width: 48em) {
  .c-acc-panel__img {
    width: 160px;
    height: 160px;
  }
  .c-acc-panel__img > img {
    max-width: 148px;
  }
}

.c-acc-panel__btn {
  width: 33.333335%;
  text-align: right;
  padding-left: 0;
}
.c-acc-panel--header .c-acc-panel__btn {
  padding-top: 0;
  padding-bottom: 0;
}
.c-acc-panel__btn.no-label {
  width: 100%;
}
.c-acc-panel__btn.no-label .c-btn--text {
  height: auto;
  line-height: 1.25;
}
.c-acc-panel__btn.no-label .c-btn--text:after {
  bottom: -3px;
}
.c-acc-panel__btn.wide-btn {
  width: 100%;
}
@media (min-width: 35.5em) {
  .c-acc-panel__btn.wide-btn {
    width: 50%;
  }
}
.c-acc-panel__btn .c-btn--text {
  display: inline-block;
  margin-bottom: 0;
}

.c-acc-panel__links {
  width: 100%;
  text-align: left;
}
@media (min-width: 48em) {
  .c-acc-panel__links {
    width: 30%;
    text-align: right;
  }
}

.c-acc-panel__label {
  width: 100%;
  font-weight: 600;
}
@media (max-width: 47.99em) {
  .c-acc-panel__label {
    padding-bottom: 0;
  }
}
@media (min-width: 48em) {
  .c-acc-panel__label {
    width: 200px;
    padding-right: 0;
    flex-shrink: 0;
  }
  .label--wide .c-acc-panel__label {
    width: 500px;
  }
  .c-acc-panel__label.no-value {
    width: 578px;
  }
}
@media (min-width: 62em) {
  .label--wide .c-acc-panel__label {
    width: 500px;
  }
}

.c-acc-panel__value {
  width: auto;
  flex-grow: 1;
}
.c-acc-panel__value.has-links, .c-acc-panel__value.full-width {
  width: 100%;
}
.c-acc-panel__value.full-width {
  padding: 12px;
}
.c-acc-panel__value, .c-acc-panel__value.has-links {
  padding-left: 24px;
}
@media (min-width: 48em) {
  .c-acc-panel__value, .c-acc-panel__value.has-links {
    width: 380px;
    max-width: 380px;
  }
}
.c-acc-panel__value.no-btn {
  width: 100%;
}
@media (min-width: 48em) {
  .c-acc-panel__value.no-btn {
    width: 480px;
    max-width: 480px;
  }
}
.c-acc-panel__value.no-btn > span {
  width: 100%;
}
@media (min-width: 48em) {
  .c-acc-panel__value.no-btn > span {
    width: 438px;
    max-width: 438px;
  }
}
@media (min-width: 48em) {
  .label--wide .c-acc-panel__value {
    width: 220px;
    padding-left: 24px;
  }
}
@media (min-width: 62em) {
  .label--wide .c-acc-panel__value {
    width: 180px;
  }
}
@media (min-width: 48em) {
  .label--wide .c-acc-panel__value.no-btn {
    width: 220px;
    max-width: 220px;
  }
}
@media (min-width: 48em) {
  .label--wide .c-acc-panel__value.no-btn > span {
    width: 196px;
    max-width: 196px;
  }
}
.c-acc-panel__value > span {
  display: block;
  width: 176px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 25.875em) {
  .c-acc-panel__value > span {
    width: 266px;
  }
}
@media (min-width: 48em) {
  .c-acc-panel__value > span {
    width: 440px;
  }
}
@media (min-width: 48em) {
  .c-acc-panel__value > span, .has-links .c-acc-panel__value > span {
    width: 336px;
    max-width: 336px;
  }
}
.c-acc-panel__value > span.is-email {
  width: 245px;
}
@media (min-width: 48em) {
  .c-acc-panel__value > span.is-email {
    width: 440px;
  }
}

.c-acc-panel__body {
  width: calc(100% - 100px);
  padding: 0;
  border: 2px solid #e6e6e7;
  border-left-width: 0;
  vertical-align: top;
}
.c-acc-panel__body > .c-acc-panel__item {
  display: table;
  width: 100%;
}
.c-acc-panel__body > .c-acc-panel__item:first-child {
  border: none;
}

/* Layout variants
    ========================================================================== */
.c-acc-panel--group {
  margin-bottom: 24px;
}
.c-acc-panel--group .c-acc-panel {
  margin-bottom: 0;
}

@media (max-width: 47.99em) {
  .c-acc-panel--group__item.has-all-attr .c-acc-panel__label {
    width: 100%;
  }
}
@media (max-width: 47.99em) {
  .c-acc-panel--group__item.has-all-attr .c-acc-panel__value {
    width: 75%;
  }
}
@media (max-width: 47.99em) {
  .c-acc-panel--group__item.has-all-attr .c-acc-panel__btn {
    width: 25%;
  }
}

@media (min-width: 48em) {
  .c-acc-panel--read,
  .c-acc-panel--header {
    display: block;
    width: 100%;
    border-collapse: collapse;
  }
}
@media (min-width: 48em) {
  .c-acc-panel--read > .c-acc-panel__item,
  .c-acc-panel--header > .c-acc-panel__item { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    flex-direction: row;
  }
}

.c-acc-panel--read > .c-acc-panel__item {
  background-color: #e6e6e7;
}

.c-acc-panel--stacked .c-acc-panel__item,
.c-acc-panel--stacked .c-acc-panel__item > span,
.c-acc-panel--stacked .c-acc-panel__label,
.c-acc-panel--stacked .c-acc-panel__label > span,
.c-acc-panel--stacked .c-acc-panel__value,
.c-acc-panel--stacked .c-acc-panel__value > span {
  display: block;
  width: 100%;
  max-width: none;
  overflow: unset;
  text-overflow: unset;
}
.c-acc-panel--stacked .c-acc-panel__item {
  background-color: #e6e6e7;
}
.c-acc-panel--stacked .c-acc-panel__label {
  padding-bottom: 0;
}
.c-acc-panel--stacked .c-acc-panel__value {
  padding-top: 0;
}

.c-acc-panel--edit {
  padding: 24px;
  border-bottom: 4px solid #e6e6e7;
  background-color: hsl(0, 0%, 100%);
}

.c-acc-panel--media > .c-acc-panel__item {
  display: table;
  width: 100%;
  background-color: hsl(0, 0%, 100%);
  border: 2px solid #e6e6e7;
}
.c-acc-panel--media > .c-acc-panel__item .c-acc-panel__img {
  padding-top: 24px;
}
@media (min-width: 48em) {
  .c-acc-panel--media > .c-acc-panel__item .c-acc-panel__img {
    padding-top: 0;
    border: 2px solid #e6e6e7;
    border-right: 0;
  }
}
@media (min-width: 48em) {
  .c-acc-panel--media > .c-acc-panel__item .c-acc-panel__label {
    width: 200px;
  }
}
@media (min-width: 48em) {
  .c-acc-panel--media > .c-acc-panel__item .c-acc-panel__value, .c-acc-panel--media > .c-acc-panel__item .c-acc-panel__value.has-links {
    width: 316px;
    max-width: 316px;
  }
}
@media (min-width: 48em) {
  .c-acc-panel--media > .c-acc-panel__item .c-acc-panel__value > span, .has-links .c-acc-panel--media > .c-acc-panel__item .c-acc-panel__value > span {
    width: 270px;
    max-width: 270px;
  }
}
.c-acc-panel--media > .c-acc-panel__item .c-acc-panel__body {
  border: none;
  background-color: #e6e6e7;
}

 .c-modal {
  position: fixed; /* [1] */
  z-index: 9999;
  top: 50%;
  left: 50%;
  width: 94%;
  border-radius: 12px;
  background-color: hsl(0, 0%, 95%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  overflow: hidden;
  transition: 1ms opacity ease; /* [2] */
  transform: translate(-50%, -50%);
  /* [3] */
}
@media (min-width: 48em) {
   .c-modal {
    margin: 0 auto;
  }
}
 .c-modal.is-active {
  opacity: 1;
}

.c-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9998;
  opacity: 0;
  transition: 250ms opacity ease;
}
.c-modal-overlay.is-active {
  opacity: 1;
  transition: 250ms opacity ease;
}

.c-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border: 0;
  background-color: transparent;
  appearance: none;
  z-index: 100;
}
.c-modal__close, .c-modal__close:link, .c-modal__close:visited, .c-modal__close:hover, .c-modal__close:active, .c-modal__close:focus {
  text-decoration: none;
}
.c-modal__close:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M16.369 6.216l-4.37 4.37-4.37-4.37-1.414 1.414 4.37 4.37-4.37 4.37 1.414 1.414 4.37-4.37 4.37 4.37 1.414-1.414-4.37-4.37 4.37-4.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-modal__close:after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-modal__close:hover, .c-modal__close:focus {
  cursor: pointer;
}
.c-modal__close:hover:before, .c-modal__close:focus:before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M16.369 6.216l-4.37 4.37-4.37-4.37-1.414 1.414 4.37 4.37-4.37 4.37 1.414 1.414 4.37-4.37 4.37 4.37 1.414-1.414-4.37-4.37 4.37-4.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-modal__close:hover:after, .c-modal__close:focus:after {
  background-color: #e6e6e7;
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}

/**
 * Scrollable content area of the modal window.
 *
 * 1. Add space between the body and teh modal window to make room for
 *    the close button.
 * 2. Set a max-height so that scrolling can occur.
 * 3. Show vertical scrollbar when content exceeds max-height.
 */
.c-modal__body {
  margin: 0;
  margin-top: 48px; /* [1] */
  margin-bottom: 0;
  padding-right: 24px;
  padding-left: 24px;
  overflow-y: auto; /* [3] */
}
@media (max-width: 47.99em) {
  .c-modal__body {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}
.c-modal__body > :last-child {
  margin-bottom: 0;
}

.c-modal__header {
  margin: 0;
  margin-bottom: 24px;
  padding: 48px 48px 24px 24px;
}
.c-modal__header + .c-modal__body {
  margin-top: 0;
}

.c-modal__heading {
  position: relative;
  margin-bottom: 0;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 300;
}
.c-modal__heading .c-svg {
  top: 0.125em;
  margin-right: 12px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 0;
}
@media (min-width: 48em) {
  .c-modal__heading .c-svg {
    margin-right: 24px;
  }
}
.c-modal__heading.has-icon {
  padding-left: 36px;
}
.c-modal__heading.has-icon .c-svg {
  position: absolute;
  left: 0;
}

.c-modal__footer {
  padding: 48px 24px 24px;
  margin-bottom: 24px;
}

/* Style variants
   ========================================================================== */
@media (min-width: 48em) {
  .c-modal.c-modal--confirm .c-modal__footer,
  .c-modal-material.c-modal--confirm .c-modal__footer {
    text-align: right;
  }
  .c-modal.c-modal--confirm .c-modal__footer > .o-layout > .o-layout__item,
  .c-modal-material.c-modal--confirm .c-modal__footer > .o-layout > .o-layout__item {
    margin-bottom: 0;
  }
}
.c-modal.c-modal--anchored.is-active,
.c-modal-material.c-modal--anchored.is-active {
  top: 20px !important;
  transform: translate(-50%, 0);
}

.c-modal--img-only .c-modal__body {
  padding-bottom: 24px;
  padding-right: 0; /* [1] */
  padding-left: 0; /* [1] */
  text-align: center;
  max-height: 440px;
}
@media (min-width: 23.4375em) {
  .c-modal--img-only .c-modal__body {
    max-height: 544px;
  }
}
@media (min-width: 48em) {
  .c-modal--img-only .c-modal__body {
    max-height: 720px;
  }
}
.c-modal--img-only .c-modal__body > img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
}

.c-modal-material {
  position: relative;
}
@media (min-width: 48em) {
  .c-modal-material {
    min-width: 280px;
  }
}
.c-modal-material .c-modal__close {
  top: -36px;
  right: -12px;
}
.c-modal-material .c-modal__body {
  margin-top: 24px;
  padding-right: 0;
  padding-left: 0;
}
.c-modal-material .c-modal__header {
  padding: 0;
}
.c-modal-material .c-modal__header + .c-modal__body {
  margin-top: 0;
}
.c-modal-material .c-modal__footer {
  padding: 48px 0 0;
  margin-bottom: 0;
}

/* Animation variants
   ========================================================================== */
/**
 * Default animation
 *
 * 1. Hide the modal window from view.
 * 2. Overlay background color and opacity setting.
 * 3. Allows us to control vertical alignments. This way we can have the
 *    `c-modal__window` vertically centered on the screen without positioning.
 * 4. Keeps the modal window above the web page, and fixed in place when the
 *    user is scrolling.
 * 5. Fade in and reveal the modal window.
 * 6. Fade out and hide the modal window.
 */
.c-modal--fade-in-top.c-modal {
  top: 40%;
  opacity: 0;
  display: block;
  transition: 250ms top ease, 250ms opacity ease;
}
.c-modal--fade-in-top.c-modal.is-active {
  top: 50%;
  opacity: 1;
  transition: 500ms top 500ms ease, 500ms opacity 500ms ease;
}

.c-modal--pop-in.c-modal {
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0% 0%;
  transition: 250ms transform ease, 250ms opacity ease;
}
.c-modal--pop-in.c-modal.is-active {
  opacity: 1;
  animation: aniPopIn 250ms;
  will-change: transform;
}

#privacynotice h1,
#privacynotice h1 a,
#privacynotice h1 span,
#privacynotice h2,
#privacynotice h2 a,
#privacynotice h2 span,
#privacynotice h3,
#privacynotice h3 a,
#privacynotice h3 span,
#cookieNotice h1,
#cookieNotice h1 a,
#cookieNotice h1 span,
#cookieNotice h2,
#cookieNotice h2 a,
#cookieNotice h2 span,
#cookieNotice h3,
#cookieNotice h3 a,
#cookieNotice h3 span,
#termsOfServiceLegal h1,
#termsOfServiceLegal h1 a,
#termsOfServiceLegal h1 span,
#termsOfServiceLegal h2,
#termsOfServiceLegal h2 a,
#termsOfServiceLegal h2 span,
#termsOfServiceLegal h3,
#termsOfServiceLegal h3 a,
#termsOfServiceLegal h3 span {
  font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif !important;
  margin: 0 !important;
  margin-bottom: 24px !important;
  color: #424243 !important;
  font-weight: 700 !important;
}
#privacynotice h1.plusMinusSign,
#privacynotice h2.plusMinusSign,
#privacynotice h3.plusMinusSign,
#cookieNotice h1.plusMinusSign,
#cookieNotice h2.plusMinusSign,
#cookieNotice h3.plusMinusSign,
#termsOfServiceLegal h1.plusMinusSign,
#termsOfServiceLegal h2.plusMinusSign,
#termsOfServiceLegal h3.plusMinusSign {
  display: block;
  cursor: default !important;
  text-indent: -5px;
}
#privacynotice h1.plusMinusSign::first-letter,
#privacynotice h2.plusMinusSign::first-letter,
#privacynotice h3.plusMinusSign::first-letter,
#cookieNotice h1.plusMinusSign::first-letter,
#cookieNotice h2.plusMinusSign::first-letter,
#cookieNotice h3.plusMinusSign::first-letter,
#termsOfServiceLegal h1.plusMinusSign::first-letter,
#termsOfServiceLegal h2.plusMinusSign::first-letter,
#termsOfServiceLegal h3.plusMinusSign::first-letter {
  font-size: 0;
}
#privacynotice h1,
#privacynotice h1 a,
#privacynotice h1 span,
#cookieNotice h1,
#cookieNotice h1 a,
#cookieNotice h1 span,
#termsOfServiceLegal h1,
#termsOfServiceLegal h1 a,
#termsOfServiceLegal h1 span {
  font-size: 24px !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
}
@media (min-width: 48em) {
  #privacynotice h1,
  #privacynotice h1 a,
  #privacynotice h1 span,
  #cookieNotice h1,
  #cookieNotice h1 a,
  #cookieNotice h1 span,
  #termsOfServiceLegal h1,
  #termsOfServiceLegal h1 a,
  #termsOfServiceLegal h1 span {
    font-size: 32px !important;
    font-size: 2rem !important;
    line-height: 1.3125 !important;
  }
}
#privacynotice h2,
#privacynotice h2 a,
#privacynotice h2 span,
#cookieNotice h2,
#cookieNotice h2 a,
#cookieNotice h2 span,
#termsOfServiceLegal h2,
#termsOfServiceLegal h2 a,
#termsOfServiceLegal h2 span {
  font-size: 20px !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}
@media (min-width: 48em) {
  #privacynotice h2,
  #privacynotice h2 a,
  #privacynotice h2 span,
  #cookieNotice h2,
  #cookieNotice h2 a,
  #cookieNotice h2 span,
  #termsOfServiceLegal h2,
  #termsOfServiceLegal h2 a,
  #termsOfServiceLegal h2 span {
    font-size: 24px !important;
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
}
#privacynotice h3,
#privacynotice h3 a,
#privacynotice h3 span,
#cookieNotice h3,
#cookieNotice h3 a,
#cookieNotice h3 span,
#termsOfServiceLegal h3,
#termsOfServiceLegal h3 a,
#termsOfServiceLegal h3 span {
  font-size: 18px !important;
  font-size: 1.125rem !important;
  line-height: 1.3333333333 !important;
}
@media (min-width: 48em) {
  #privacynotice h3,
  #privacynotice h3 a,
  #privacynotice h3 span,
  #cookieNotice h3,
  #cookieNotice h3 a,
  #cookieNotice h3 span,
  #termsOfServiceLegal h3,
  #termsOfServiceLegal h3 a,
  #termsOfServiceLegal h3 span {
    font-size: 20px !important;
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
  }
}
#privacynotice .expandableParagraph,
#cookieNotice .expandableParagraph,
#termsOfServiceLegal .expandableParagraph {
  display: block !important;
}

#privacynotice table td {
  border: 1px solid #000;
}

/* ==========================================================================
   #CLEARFIX
   ========================================================================== */
/**
 * Attach our clearfix mixin to a utility class.
 */
.u-clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * inuitcss generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, inuitcss will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, inuitcss can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$inuit-fractions` list.
 */
.u-1\/1 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/1 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-1\/1 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/2 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/2 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-1\/2 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-2\/2 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/2 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-2\/2 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/3 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/3 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-1\/3 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-2\/3 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/3 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-2\/3 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-3\/3 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/3 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-3\/3 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/4 {
  width: 25% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 25% !important;
}

.u-pull-1\/4 {
  position: relative !important;
  right: 25% !important;
  left: auto !important; /* [1] */
}

.u-2\/4 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-2\/4 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-3\/4 {
  width: 75% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 75% !important;
}

.u-pull-3\/4 {
  position: relative !important;
  right: 75% !important;
  left: auto !important; /* [1] */
}

.u-4\/4 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-4\/4 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/5 {
  width: 20% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 20% !important;
}

.u-pull-1\/5 {
  position: relative !important;
  right: 20% !important;
  left: auto !important; /* [1] */
}

.u-2\/5 {
  width: 40% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 40% !important;
}

.u-pull-2\/5 {
  position: relative !important;
  right: 40% !important;
  left: auto !important; /* [1] */
}

.u-3\/5 {
  width: 60% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 60% !important;
}

.u-pull-3\/5 {
  position: relative !important;
  right: 60% !important;
  left: auto !important; /* [1] */
}

.u-4\/5 {
  width: 80% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 80% !important;
}

.u-pull-4\/5 {
  position: relative !important;
  right: 80% !important;
  left: auto !important; /* [1] */
}

.u-5\/5 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-5\/5 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/6 {
  width: 16.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 16.6666666667% !important;
}

.u-pull-1\/6 {
  position: relative !important;
  right: 16.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-2\/6 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-2\/6 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-3\/6 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-3\/6 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-4\/6 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-4\/6 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-5\/6 {
  width: 83.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 83.3333333333% !important;
}

.u-pull-5\/6 {
  position: relative !important;
  right: 83.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-6\/6 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-6\/6 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/7 {
  width: 14.2857142857% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 14.2857142857% !important;
}

.u-pull-1\/7 {
  position: relative !important;
  right: 14.2857142857% !important;
  left: auto !important; /* [1] */
}

.u-2\/7 {
  width: 28.5714285714% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 28.5714285714% !important;
}

.u-pull-2\/7 {
  position: relative !important;
  right: 28.5714285714% !important;
  left: auto !important; /* [1] */
}

.u-3\/7 {
  width: 42.8571428571% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 42.8571428571% !important;
}

.u-pull-3\/7 {
  position: relative !important;
  right: 42.8571428571% !important;
  left: auto !important; /* [1] */
}

.u-4\/7 {
  width: 57.1428571429% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 57.1428571429% !important;
}

.u-pull-4\/7 {
  position: relative !important;
  right: 57.1428571429% !important;
  left: auto !important; /* [1] */
}

.u-5\/7 {
  width: 71.4285714286% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 71.4285714286% !important;
}

.u-pull-5\/7 {
  position: relative !important;
  right: 71.4285714286% !important;
  left: auto !important; /* [1] */
}

.u-6\/7 {
  width: 85.7142857143% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 85.7142857143% !important;
}

.u-pull-6\/7 {
  position: relative !important;
  right: 85.7142857143% !important;
  left: auto !important; /* [1] */
}

.u-7\/7 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-7\/7 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/8 {
  width: 12.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 12.5% !important;
}

.u-pull-1\/8 {
  position: relative !important;
  right: 12.5% !important;
  left: auto !important; /* [1] */
}

.u-2\/8 {
  width: 25% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 25% !important;
}

.u-pull-2\/8 {
  position: relative !important;
  right: 25% !important;
  left: auto !important; /* [1] */
}

.u-3\/8 {
  width: 37.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 37.5% !important;
}

.u-pull-3\/8 {
  position: relative !important;
  right: 37.5% !important;
  left: auto !important; /* [1] */
}

.u-4\/8 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-4\/8 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-5\/8 {
  width: 62.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 62.5% !important;
}

.u-pull-5\/8 {
  position: relative !important;
  right: 62.5% !important;
  left: auto !important; /* [1] */
}

.u-6\/8 {
  width: 75% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 75% !important;
}

.u-pull-6\/8 {
  position: relative !important;
  right: 75% !important;
  left: auto !important; /* [1] */
}

.u-7\/8 {
  width: 87.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 87.5% !important;
}

.u-pull-7\/8 {
  position: relative !important;
  right: 87.5% !important;
  left: auto !important; /* [1] */
}

.u-8\/8 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-8\/8 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/9 {
  width: 11.1111111111% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 11.1111111111% !important;
}

.u-pull-1\/9 {
  position: relative !important;
  right: 11.1111111111% !important;
  left: auto !important; /* [1] */
}

.u-2\/9 {
  width: 22.2222222222% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 22.2222222222% !important;
}

.u-pull-2\/9 {
  position: relative !important;
  right: 22.2222222222% !important;
  left: auto !important; /* [1] */
}

.u-3\/9 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-3\/9 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-4\/9 {
  width: 44.4444444444% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 44.4444444444% !important;
}

.u-pull-4\/9 {
  position: relative !important;
  right: 44.4444444444% !important;
  left: auto !important; /* [1] */
}

.u-5\/9 {
  width: 55.5555555556% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 55.5555555556% !important;
}

.u-pull-5\/9 {
  position: relative !important;
  right: 55.5555555556% !important;
  left: auto !important; /* [1] */
}

.u-6\/9 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-6\/9 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-7\/9 {
  width: 77.7777777778% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 77.7777777778% !important;
}

.u-pull-7\/9 {
  position: relative !important;
  right: 77.7777777778% !important;
  left: auto !important; /* [1] */
}

.u-8\/9 {
  width: 88.8888888889% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 88.8888888889% !important;
}

.u-pull-8\/9 {
  position: relative !important;
  right: 88.8888888889% !important;
  left: auto !important; /* [1] */
}

.u-9\/9 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-9\/9 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/10 {
  width: 10% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 10% !important;
}

.u-pull-1\/10 {
  position: relative !important;
  right: 10% !important;
  left: auto !important; /* [1] */
}

.u-2\/10 {
  width: 20% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 20% !important;
}

.u-pull-2\/10 {
  position: relative !important;
  right: 20% !important;
  left: auto !important; /* [1] */
}

.u-3\/10 {
  width: 30% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 30% !important;
}

.u-pull-3\/10 {
  position: relative !important;
  right: 30% !important;
  left: auto !important; /* [1] */
}

.u-4\/10 {
  width: 40% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 40% !important;
}

.u-pull-4\/10 {
  position: relative !important;
  right: 40% !important;
  left: auto !important; /* [1] */
}

.u-5\/10 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-5\/10 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-6\/10 {
  width: 60% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 60% !important;
}

.u-pull-6\/10 {
  position: relative !important;
  right: 60% !important;
  left: auto !important; /* [1] */
}

.u-7\/10 {
  width: 70% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 70% !important;
}

.u-pull-7\/10 {
  position: relative !important;
  right: 70% !important;
  left: auto !important; /* [1] */
}

.u-8\/10 {
  width: 80% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 80% !important;
}

.u-pull-8\/10 {
  position: relative !important;
  right: 80% !important;
  left: auto !important; /* [1] */
}

.u-9\/10 {
  width: 90% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 90% !important;
}

.u-pull-9\/10 {
  position: relative !important;
  right: 90% !important;
  left: auto !important; /* [1] */
}

.u-10\/10 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-10\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-10\/10 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/11 {
  width: 9.0909090909% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 9.0909090909% !important;
}

.u-pull-1\/11 {
  position: relative !important;
  right: 9.0909090909% !important;
  left: auto !important; /* [1] */
}

.u-2\/11 {
  width: 18.1818181818% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 18.1818181818% !important;
}

.u-pull-2\/11 {
  position: relative !important;
  right: 18.1818181818% !important;
  left: auto !important; /* [1] */
}

.u-3\/11 {
  width: 27.2727272727% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 27.2727272727% !important;
}

.u-pull-3\/11 {
  position: relative !important;
  right: 27.2727272727% !important;
  left: auto !important; /* [1] */
}

.u-4\/11 {
  width: 36.3636363636% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 36.3636363636% !important;
}

.u-pull-4\/11 {
  position: relative !important;
  right: 36.3636363636% !important;
  left: auto !important; /* [1] */
}

.u-5\/11 {
  width: 45.4545454545% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 45.4545454545% !important;
}

.u-pull-5\/11 {
  position: relative !important;
  right: 45.4545454545% !important;
  left: auto !important; /* [1] */
}

.u-6\/11 {
  width: 54.5454545455% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 54.5454545455% !important;
}

.u-pull-6\/11 {
  position: relative !important;
  right: 54.5454545455% !important;
  left: auto !important; /* [1] */
}

.u-7\/11 {
  width: 63.6363636364% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 63.6363636364% !important;
}

.u-pull-7\/11 {
  position: relative !important;
  right: 63.6363636364% !important;
  left: auto !important; /* [1] */
}

.u-8\/11 {
  width: 72.7272727273% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 72.7272727273% !important;
}

.u-pull-8\/11 {
  position: relative !important;
  right: 72.7272727273% !important;
  left: auto !important; /* [1] */
}

.u-9\/11 {
  width: 81.8181818182% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 81.8181818182% !important;
}

.u-pull-9\/11 {
  position: relative !important;
  right: 81.8181818182% !important;
  left: auto !important; /* [1] */
}

.u-10\/11 {
  width: 90.9090909091% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-10\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 90.9090909091% !important;
}

.u-pull-10\/11 {
  position: relative !important;
  right: 90.9090909091% !important;
  left: auto !important; /* [1] */
}

.u-11\/11 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-11\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-11\/11 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/12 {
  width: 8.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 8.3333333333% !important;
}

.u-pull-1\/12 {
  position: relative !important;
  right: 8.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-2\/12 {
  width: 16.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 16.6666666667% !important;
}

.u-pull-2\/12 {
  position: relative !important;
  right: 16.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-3\/12 {
  width: 25% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 25% !important;
}

.u-pull-3\/12 {
  position: relative !important;
  right: 25% !important;
  left: auto !important; /* [1] */
}

.u-4\/12 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-4\/12 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-5\/12 {
  width: 41.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 41.6666666667% !important;
}

.u-pull-5\/12 {
  position: relative !important;
  right: 41.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-6\/12 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-6\/12 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-7\/12 {
  width: 58.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 58.3333333333% !important;
}

.u-pull-7\/12 {
  position: relative !important;
  right: 58.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-8\/12 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-8\/12 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-9\/12 {
  width: 75% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 75% !important;
}

.u-pull-9\/12 {
  position: relative !important;
  right: 75% !important;
  left: auto !important; /* [1] */
}

.u-10\/12 {
  width: 83.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-10\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 83.3333333333% !important;
}

.u-pull-10\/12 {
  position: relative !important;
  right: 83.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-11\/12 {
  width: 91.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-11\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 91.6666666667% !important;
}

.u-pull-11\/12 {
  position: relative !important;
  right: 91.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-12\/12 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-12\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-12\/12 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 20em) {
  .u-1\/1\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@mobile {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@mobile {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@mobile {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@mobile {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@mobile {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@mobile {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@mobile {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@mobile {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@mobile {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@mobile {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@mobile {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@mobile {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@mobile {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@mobile {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@mobile {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@mobile {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@mobile {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@mobile {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@mobile {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@mobile {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@mobile {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@mobile {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@mobile {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@mobile {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@mobile {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@mobile {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@mobile {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@mobile {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@mobile {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@mobile {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@mobile {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@mobile {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@mobile {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@mobile {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@mobile {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@mobile {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@mobile {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@mobile {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@mobile {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@mobile {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@mobile {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@mobile {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@mobile {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@mobile {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@mobile {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@mobile {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@mobile {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@mobile {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@mobile {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@mobile {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@mobile {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@mobile {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@mobile {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@mobile {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@mobile {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@mobile {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@mobile {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@mobile {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@mobile {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@mobile {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@mobile {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@mobile {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@mobile {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@mobile {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@mobile {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@mobile {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@mobile {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@mobile {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@mobile {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@mobile {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@mobile {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@mobile {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@mobile {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@mobile {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@mobile {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@mobile {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@mobile {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@mobile {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@mobile {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@mobile {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@mobile {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@mobile {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@mobile {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@mobile {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@mobile {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@mobile {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@mobile {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@mobile {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@mobile {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@mobile {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@mobile {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@mobile {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@mobile {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@mobile {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@mobile {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@mobile {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@mobile {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@mobile {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@mobile {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@mobile {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@mobile {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@mobile {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@mobile {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@mobile {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@mobile {
    left: auto !important;
  }
  .u-pull-none\@mobile {
    right: auto !important;
  }
}
@media (min-width: 48em) {
  .u-1\/1\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@tablet {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@tablet {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@tablet {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@tablet {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@tablet {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@tablet {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@tablet {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@tablet {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@tablet {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@tablet {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@tablet {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@tablet {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@tablet {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@tablet {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@tablet {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@tablet {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@tablet {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@tablet {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@tablet {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@tablet {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@tablet {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@tablet {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@tablet {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@tablet {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@tablet {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@tablet {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@tablet {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@tablet {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@tablet {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@tablet {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@tablet {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@tablet {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@tablet {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@tablet {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@tablet {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@tablet {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@tablet {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@tablet {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@tablet {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@tablet {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@tablet {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@tablet {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@tablet {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@tablet {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@tablet {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@tablet {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@tablet {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@tablet {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@tablet {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@tablet {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@tablet {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@tablet {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@tablet {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@tablet {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@tablet {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@tablet {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@tablet {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@tablet {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@tablet {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@tablet {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@tablet {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@tablet {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@tablet {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@tablet {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@tablet {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@tablet {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@tablet {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@tablet {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@tablet {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@tablet {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@tablet {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@tablet {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@tablet {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@tablet {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@tablet {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@tablet {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@tablet {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@tablet {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@tablet {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@tablet {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@tablet {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@tablet {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@tablet {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@tablet {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@tablet {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@tablet {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@tablet {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@tablet {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@tablet {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@tablet {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@tablet {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@tablet {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@tablet {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@tablet {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@tablet {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@tablet {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@tablet {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@tablet {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@tablet {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@tablet {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@tablet {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@tablet {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@tablet {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@tablet {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@tablet {
    left: auto !important;
  }
  .u-pull-none\@tablet {
    right: auto !important;
  }
}
@media (min-width: 62em) {
  .u-1\/1\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@desktop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@desktop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@desktop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@desktop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@desktop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@desktop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@desktop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@desktop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@desktop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@desktop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@desktop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@desktop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@desktop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@desktop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@desktop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@desktop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@desktop {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@desktop {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@desktop {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@desktop {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@desktop {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@desktop {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@desktop {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@desktop {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@desktop {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@desktop {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@desktop {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@desktop {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@desktop {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@desktop {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@desktop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@desktop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@desktop {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@desktop {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@desktop {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@desktop {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@desktop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@desktop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@desktop {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@desktop {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@desktop {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@desktop {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@desktop {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@desktop {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@desktop {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@desktop {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@desktop {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@desktop {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@desktop {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@desktop {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@desktop {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@desktop {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@desktop {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@desktop {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@desktop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@desktop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@desktop {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@desktop {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@desktop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@desktop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@desktop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@desktop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@desktop {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@desktop {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@desktop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@desktop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@desktop {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@desktop {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@desktop {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@desktop {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@desktop {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@desktop {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@desktop {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@desktop {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@desktop {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@desktop {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@desktop {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@desktop {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@desktop {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@desktop {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@desktop {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@desktop {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@desktop {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@desktop {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@desktop {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@desktop {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@desktop {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@desktop {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@desktop {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@desktop {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@desktop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@desktop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@desktop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@desktop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@desktop {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@desktop {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@desktop {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@desktop {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@desktop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@desktop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@desktop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@desktop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@desktop {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@desktop {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@desktop {
    left: auto !important;
  }
  .u-pull-none\@desktop {
    right: auto !important;
  }
}
@media (min-width: 75em) {
  .u-1\/1\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@wide {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@wide {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@wide {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@wide {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@wide {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@wide {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@wide {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@wide {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@wide {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@wide {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@wide {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@wide {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@wide {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@wide {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@wide {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@wide {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@wide {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@wide {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@wide {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@wide {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@wide {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@wide {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@wide {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@wide {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@wide {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@wide {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@wide {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@wide {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@wide {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@wide {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@wide {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@wide {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@wide {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@wide {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@wide {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@wide {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@wide {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@wide {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@wide {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@wide {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@wide {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@wide {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@wide {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@wide {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@wide {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@wide {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@wide {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@wide {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@wide {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@wide {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@wide {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@wide {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@wide {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@wide {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@wide {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@wide {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@wide {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@wide {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@wide {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@wide {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@wide {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@wide {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@wide {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@wide {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@wide {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@wide {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@wide {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@wide {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@wide {
    left: auto !important;
  }
  .u-pull-none\@wide {
    right: auto !important;
  }
}
@media (min-width: 85.375em) {
  .u-1\/1\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@laptop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@laptop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@laptop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@laptop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@laptop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@laptop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@laptop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@laptop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@laptop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@laptop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@laptop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@laptop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@laptop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@laptop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@laptop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@laptop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@laptop {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@laptop {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@laptop {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@laptop {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@laptop {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@laptop {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@laptop {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@laptop {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@laptop {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@laptop {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@laptop {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@laptop {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@laptop {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@laptop {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@laptop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@laptop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@laptop {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@laptop {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@laptop {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@laptop {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@laptop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@laptop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@laptop {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@laptop {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@laptop {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@laptop {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@laptop {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@laptop {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@laptop {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@laptop {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@laptop {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@laptop {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@laptop {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@laptop {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@laptop {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@laptop {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@laptop {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@laptop {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@laptop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@laptop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@laptop {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@laptop {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@laptop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@laptop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@laptop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@laptop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@laptop {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@laptop {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@laptop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@laptop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@laptop {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@laptop {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@laptop {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@laptop {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@laptop {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@laptop {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@laptop {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@laptop {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@laptop {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@laptop {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@laptop {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@laptop {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@laptop {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@laptop {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@laptop {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@laptop {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@laptop {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@laptop {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@laptop {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@laptop {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@laptop {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@laptop {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@laptop {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@laptop {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@laptop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@laptop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@laptop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@laptop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@laptop {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@laptop {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@laptop {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@laptop {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@laptop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@laptop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@laptop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@laptop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@laptop {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@laptop {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@laptop {
    left: auto !important;
  }
  .u-pull-none\@laptop {
    right: auto !important;
  }
}
@media (min-width: 100em) {
  .u-1\/1\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@x-wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@x-wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@x-wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@x-wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@x-wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@x-wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@x-wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@x-wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@x-wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@x-wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@x-wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@x-wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@x-wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@x-wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@x-wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@x-wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@x-wide {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@x-wide {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@x-wide {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@x-wide {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@x-wide {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@x-wide {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@x-wide {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@x-wide {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@x-wide {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@x-wide {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@x-wide {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@x-wide {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@x-wide {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@x-wide {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@x-wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@x-wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@x-wide {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@x-wide {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@x-wide {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@x-wide {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@x-wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@x-wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@x-wide {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@x-wide {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@x-wide {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@x-wide {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@x-wide {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@x-wide {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@x-wide {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@x-wide {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@x-wide {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@x-wide {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@x-wide {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@x-wide {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@x-wide {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@x-wide {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@x-wide {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@x-wide {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@x-wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@x-wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@x-wide {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@x-wide {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@x-wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@x-wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@x-wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@x-wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@x-wide {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@x-wide {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@x-wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@x-wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@x-wide {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@x-wide {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@x-wide {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@x-wide {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@x-wide {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@x-wide {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@x-wide {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@x-wide {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@x-wide {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@x-wide {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@x-wide {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@x-wide {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@x-wide {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@x-wide {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@x-wide {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@x-wide {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@x-wide {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@x-wide {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@x-wide {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@x-wide {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@x-wide {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@x-wide {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@x-wide {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@x-wide {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@x-wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@x-wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@x-wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@x-wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@x-wide {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@x-wide {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@x-wide {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@x-wide {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@x-wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@x-wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@x-wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@x-wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@x-wide {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@x-wide {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@x-wide {
    left: auto !important;
  }
  .u-pull-none\@x-wide {
    right: auto !important;
  }
}
/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */
.u-h1 {
  font-size: 36px !important;
  font-size: 2.25rem !important;
  line-height: 1.1666666667 !important;
}

.u-h2 {
  font-size: 28px !important;
  font-size: 1.75rem !important;
  line-height: 1.2857142857 !important;
}

.u-h3 {
  font-size: 24px !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
}

.u-h4 {
  font-size: 20px !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

.u-h5 {
  font-size: 18px !important;
  font-size: 1.125rem !important;
  line-height: 1.3333333333 !important;
}

.u-h6 {
  font-size: 16px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   #SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-small {}
 */
.u-padding {
  padding: 24px !important;
}

.u-padding-tiny {
  padding: 6px !important;
}

.u-padding-small {
  padding: 12px !important;
}

.u-padding-large {
  padding: 48px !important;
}

.u-padding-huge {
  padding: 96px !important;
}

.u-padding-none {
  padding: 0 !important;
}

.u-padding-top {
  padding-top: 24px !important;
}

.u-padding-top-tiny {
  padding-top: 6px !important;
}

.u-padding-top-small {
  padding-top: 12px !important;
}

.u-padding-top-large {
  padding-top: 48px !important;
}

.u-padding-top-huge {
  padding-top: 96px !important;
}

.u-padding-top-none {
  padding-top: 0 !important;
}

.u-padding-right {
  padding-right: 24px !important;
}

.u-padding-right-tiny {
  padding-right: 6px !important;
}

.u-padding-right-small {
  padding-right: 12px !important;
}

.u-padding-right-large {
  padding-right: 48px !important;
}

.u-padding-right-huge {
  padding-right: 96px !important;
}

.u-padding-right-none {
  padding-right: 0 !important;
}

.u-padding-bottom {
  padding-bottom: 24px !important;
}

.u-padding-bottom-tiny {
  padding-bottom: 6px !important;
}

.u-padding-bottom-small {
  padding-bottom: 12px !important;
}

.u-padding-bottom-large {
  padding-bottom: 48px !important;
}

.u-padding-bottom-huge {
  padding-bottom: 96px !important;
}

.u-padding-bottom-none {
  padding-bottom: 0 !important;
}

.u-padding-left {
  padding-left: 24px !important;
}

.u-padding-left-tiny {
  padding-left: 6px !important;
}

.u-padding-left-small {
  padding-left: 12px !important;
}

.u-padding-left-large {
  padding-left: 48px !important;
}

.u-padding-left-huge {
  padding-left: 96px !important;
}

.u-padding-left-none {
  padding-left: 0 !important;
}

.u-padding-horizontal {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.u-padding-horizontal-tiny {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.u-padding-horizontal-small {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.u-padding-horizontal-large {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.u-padding-horizontal-huge {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.u-padding-horizontal-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.u-padding-vertical {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.u-padding-vertical-tiny {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.u-padding-vertical-small {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.u-padding-vertical-large {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.u-padding-vertical-huge {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.u-padding-vertical-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-margin {
  margin: 24px !important;
}

.u-margin-tiny {
  margin: 6px !important;
}

.u-margin-small {
  margin: 12px !important;
}

.u-margin-large {
  margin: 48px !important;
}

.u-margin-huge {
  margin: 96px !important;
}

.u-margin-none {
  margin: 0 !important;
}

.u-margin-top {
  margin-top: 24px !important;
}

.u-margin-top-tiny {
  margin-top: 6px !important;
}

.u-margin-top-small {
  margin-top: 12px !important;
}

.u-margin-top-large {
  margin-top: 48px !important;
}

.u-margin-top-huge {
  margin-top: 96px !important;
}

.u-margin-top-none {
  margin-top: 0 !important;
}

.u-margin-right {
  margin-right: 24px !important;
}

.u-margin-right-tiny {
  margin-right: 6px !important;
}

.u-margin-right-small {
  margin-right: 12px !important;
}

.u-margin-right-large {
  margin-right: 48px !important;
}

.u-margin-right-huge {
  margin-right: 96px !important;
}

.u-margin-right-none {
  margin-right: 0 !important;
}

.u-margin-bottom {
  margin-bottom: 24px !important;
}

.u-margin-bottom-tiny {
  margin-bottom: 6px !important;
}

.u-margin-bottom-small {
  margin-bottom: 12px !important;
}

.u-margin-bottom-large {
  margin-bottom: 48px !important;
}

.u-margin-bottom-huge {
  margin-bottom: 96px !important;
}

.u-margin-bottom-none {
  margin-bottom: 0 !important;
}

.u-margin-left {
  margin-left: 24px !important;
}

.u-margin-left-tiny {
  margin-left: 6px !important;
}

.u-margin-left-small {
  margin-left: 12px !important;
}

.u-margin-left-large {
  margin-left: 48px !important;
}

.u-margin-left-huge {
  margin-left: 96px !important;
}

.u-margin-left-none {
  margin-left: 0 !important;
}

.u-margin-horizontal {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.u-margin-horizontal-tiny {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.u-margin-horizontal-small {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.u-margin-horizontal-large {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.u-margin-horizontal-huge {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.u-margin-horizontal-none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.u-margin-vertical {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.u-margin-vertical-tiny {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.u-margin-vertical-small {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.u-margin-vertical-large {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.u-margin-vertical-huge {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.u-margin-vertical-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   #RESPONSIVE-SPACINGS
   ========================================================================== */
/**
 * Utility classes enhancing the normal spacing classes by adding responsiveness
 * to them. By default, there are not responsive spacings defined. You can
 * generate responsive spacings by adding entries to the following three Sass
 * maps, e.g.:
 *
 *   $inuit-responsive-spacing-directions: (
 *     null: null,
 *     "-bottom": "-bottom",
 *   );
 *
 *   $inuit-responsive-spacing-properties: (
 *     "margin": "margin",
 *   );
 *
 *   $inuit-responsive-spacing-sizes: (
 *     "-small": $inuit-global-spacing-unit-small,
 *   );
 *
 * This would bring us the following classes:
 *
 *   .u-margin-small@mobile {}
 *   .u-margin-small@tablet {}
 *   .u-margin-small@desktop {}
 *   .u-margin-small@wide {}
 *   .u-margin-bottom-small@mobile {}
 *   .u-margin-bottom-small@tablet {}
 *   .u-margin-bottom-small@desktop {}
 *   .u-margin-bottom-small@wide {}
 *
 * You can change the generated CSS classes by further extending the Sass maps.
 * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as
 * a responsive version, you can just mirror the ‘normal’ spacings:
 *
 *   $inuit-responsive-spacing-directions: $inuit-spacing-directions !default;
 *
 *   $inuit-responsive-spacing-properties: $inuit-spacing-properties !default;
 *
 *   $inuit-responsive-spacing-sizes: $inuit-spacing-sizes !default;
 *
 * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the
 * amount of breakpoints you defined. So please check your CSS’ output and
 * filesize!
 */
/* stylelint-disable max-nesting-depth */
/* stylelint-enable max-nesting-depth */
/* ==========================================================================
   #PRINT
   ========================================================================== */
/**
 * Very crude, reset-like styles taken from the HTML5 Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
 */
@media print {
  /**
   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
   */
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* [1] */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /**
   * Don’t show links that are fragment identifiers, or use the `javascript:`
   * pseudo protocol.
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /**
   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ==========================================================================
   #HIDE
   ========================================================================== */
/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/**
 * Hide visually and from screen readers.
 */
.u-hidden {
  display: none !important;
}

/* ==========================================================================
  #ACCESSIBILITY
  ========================================================================== */
.u-sr-only,
.accessibility-text,
.u-screen-reader-text {
  position: absolute;
  clip-path: inset(50%);
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  clip: rect(1px, 1px, 1px, 1px);
}
.u-sr-only:focus,
.accessibility-text:focus,
.u-screen-reader-text:focus {
  display: block;
  top: 5px;
  left: 5px;
  z-index: 100000;
  clip-path: none;
  background-color: #eee;
  padding: 15px 23px 14px;
  width: auto;
  height: auto;
  text-decoration: none;
  line-height: normal;
  color: #444;
  font-size: 1em;
  clip: auto !important;
}

/* ==========================================================================
  #COLOR-FILL
  ========================================================================== */
.u-fill {
  /**
  * Iterate over color maps and autogenerate helper classes.
  */
}
.u-fill--primary-black {
  background-color: #424243 !important;
}
.u-fill--secondary-white {
  background-color: white !important;
}
.u-fill--primary-blue {
  background-color: #1788c3 !important;
}
.u-fill--primary-blue-hover {
  background-color: #3392CD !important;
}
.u-fill--primary-blue-active {
  background-color: #0077c0 !important;
}
.u-fill--secondary-blue {
  background-color: #ebf7fd !important;
}
.u-fill--primary-red {
  background-color: #ed1b2f !important;
}
.u-fill--secondary-red {
  background-color: #da1f3d !important;
}
.u-fill--secondary-red-hover {
  background-color: #d12244 !important;
}
.u-fill--secondary-green {
  background-color: #6cb454 !important;
}
.u-fill--secondary-purple {
  background-color: #6f2c91 !important;
}
.u-fill--secondary-yellow {
  background-color: #ffde55 !important;
}
.u-fill--secondary-amber {
  background-color: #ffc344 !important;
}
.u-fill--neutral-heavy {
  background-color: #6d6d6d !important;
}
.u-fill--neutral-medium {
  background-color: #b7b7b8 !important;
}
.u-fill--neutral-light {
  background-color: #d9d8d5 !important;
}
.u-fill--neutral-xlight {
  background-color: #e6e6e7 !important;
}
.u-fill--neutral-ulight {
  background-color: #f6f6f6 !important;
}
.u-fill--black {
  background-color: hsl(0, 0%, 0%) !important;
}
.u-fill--grey90 {
  background-color: hsl(0, 0%, 10%) !important;
}
.u-fill--grey80 {
  background-color: hsl(0, 0%, 20%) !important;
}
.u-fill--grey70 {
  background-color: hsl(0, 0%, 30%) !important;
}
.u-fill--grey60 {
  background-color: hsl(0, 0%, 40%) !important;
}
.u-fill--grey50 {
  background-color: hsl(0, 0%, 50%) !important;
}
.u-fill--grey40 {
  background-color: hsl(0, 0%, 60%) !important;
}
.u-fill--grey30 {
  background-color: hsl(0, 0%, 70%) !important;
}
.u-fill--grey20 {
  background-color: hsl(0, 0%, 80%) !important;
}
.u-fill--grey10 {
  background-color: hsl(0, 0%, 90%) !important;
}
.u-fill--grey5 {
  background-color: hsl(0, 0%, 95%) !important;
}
.u-fill--white {
  background-color: hsl(0, 0%, 100%) !important;
}

/* ==========================================================================
   #FLOAT
   ========================================================================== */
/* Force floats
   ========================================================================== */
.u-float-right {
  float: right !important;
}

.u-float-left {
  float: left !important;
}

/* Respsonsive floats
   ========================================================================== */
@media (min-width: 48em) {
  .u-float-right\@tablet {
    float: right !important;
  }
}
@media (max-width: 47.99em) {
  .u-float-right-below-tablet {
    text-align: right !important;
  }
}
@media (min-width: 62em) {
  .u-float-right\@desktop {
    float: right !important;
  }
}
@media (max-width: 61.99em) {
  .u-float-right-below-desktop {
    text-align: right !important;
  }
}
@media (min-width: 75em) {
  .u-float-right\@wide {
    float: right !important;
  }
}
@media (max-width: 74.99em) {
  .u-float-right-below-wide {
    text-align: right !important;
  }
}
@media (min-width: 85.375em) {
  .u-float-right\@laptop {
    float: right !important;
  }
}
@media (max-width: 85.365em) {
  .u-float-right-below-laptop {
    text-align: right !important;
  }
}
@media (min-width: 100em) {
  .u-float-right\@x-wide {
    float: right !important;
  }
}
@media (max-width: 99.99em) {
  .u-float-right-below-x-wide {
    text-align: right !important;
  }
}

@media (min-width: 48em) {
  .u-float-left\@tablet {
    float: left !important;
  }
}
@media (max-width: 47.99em) {
  .u-float-left-below-tablet {
    text-align: left !important;
  }
}
@media (min-width: 62em) {
  .u-float-left\@desktop {
    float: left !important;
  }
}
@media (max-width: 61.99em) {
  .u-float-left-below-desktop {
    text-align: left !important;
  }
}
@media (min-width: 75em) {
  .u-float-left\@wide {
    float: left !important;
  }
}
@media (max-width: 74.99em) {
  .u-float-left-below-wide {
    text-align: left !important;
  }
}
@media (min-width: 85.375em) {
  .u-float-left\@laptop {
    float: left !important;
  }
}
@media (max-width: 85.365em) {
  .u-float-left-below-laptop {
    text-align: left !important;
  }
}
@media (min-width: 100em) {
  .u-float-left\@x-wide {
    float: left !important;
  }
}
@media (max-width: 99.99em) {
  .u-float-left-below-x-wide {
    text-align: left !important;
  }
}

/* ==========================================================================
   #PERCENTAGE WIDTHS
   ========================================================================== */
/**
 * Re-purposing the inuitcss `utilities/utilities.widths.scss` function to
 * generate a different series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <div class="u-35/percent"></div>
 *
 * These classes are most commonly used in conjunction with a grid view control,
 * such as PrimeNG tables. Setting widths inline can break the responsive layout,
 * so we're making these utility classes instead.
 * e.g.:
 *
 *   <p-column styleClass="u-35/percent" field="name" ...></p-column>
 *
 *
 * Which fractions would you like in your grid system(s)?
 * By default, we provide you the percentages below,
 * e.g.:
 *
 *   .u-5/percent
 *   .u-6/percent
 *   .u-15/percent
 *   .u-45/percent
 *
 * You can overwrite these values by modifying the variables in '_setting.global.scss`.
 * DO NOT CHANGE THE VALUES HERE.
 */
/**
 * A series of width helper classes that you can use to assign columns widths to a gridview
 * table. Classes take a fraction-like format (e.g. `.u-5/percent`). Use these in
 * your markup:
 *
 * <p:column class="u-35/percent">
 * <td class="u-15/percent">
 *
 * The following will generate widths helper classes based on the percentages
 * defined in the `$res-percentages` list.
 */
/* ==========================================================================
   #POSITIONING
   ========================================================================== */
.u-position-relative {
  position: relative !important;
}

/* Top positions
   ========================================================================== */
.u-position-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.u-position-top-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.u-position-top-right {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
}

/* Middle positions
   ========================================================================== */
.u-position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-position-y-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.u-position-y-center-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.u-position-x-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom positions
   ========================================================================== */
.u-position-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.u-position-bottom-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.u-position-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
}

/* Misc positions
   ========================================================================== */
.u-position-sticky-top {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.u-position-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
}

.u-position-fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

/* ==========================================================================
   #TYPOGRAPHY
   ========================================================================== */
/**
 * Set of typography related helper classes for things like:
 * font-size         [ based on the $global-spacing-sizes sizes ]
 * font-style        [ inherit | initial | italic | normal | oblique | unset ]
 * font-weight       [ thin | light | regular | medium | bold | extra | black ]
 * font-variant      [ normal | small-caps]
 * text-aligment     [ left | right | center | justify ]
 * text-transform    [ none | lowercase | uppercase | capitalize ]
 * text-wrapping     [ based on word-wrap() and ellipsis() mixins ]
 * color             [ auto-generated from brand and greyscale color maps ]
 * text-decoration   [ underline | line-through ]
 */
/* Font-size helpers
   ========================================================================== */
.u-font-size {
  font-size: 24px !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
}
.u-font-size-micro {
  font-size: 3px !important;
  font-size: 0.1875rem !important;
  line-height: 4 !important;
}
.u-font-size-tiny {
  font-size: 6px !important;
  font-size: 0.375rem !important;
  line-height: 2 !important;
}
.u-font-size-small {
  font-size: 12px !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}
.u-font-size-large {
  font-size: 48px !important;
  font-size: 3rem !important;
  line-height: 1.125 !important;
}
.u-font-size-xlarge {
  font-size: 36px !important;
  font-size: 2.25rem !important;
  line-height: 1.1666666667 !important;
}
@media (min-width: 48em) {
  .u-font-size-xlarge {
    font-size: 72px !important;
    font-size: 4.5rem !important;
    line-height: 1.0833333333 !important;
  }
}
.u-font-size-huge {
  font-size: 48px !important;
  font-size: 3rem !important;
  line-height: 1.125 !important;
}
@media (min-width: 48em) {
  .u-font-size-huge {
    font-size: 96px !important;
    font-size: 6rem !important;
    line-height: 1.0625 !important;
  }
}
.u-font-size-flush {
  font-size: 0 !important;
}

/* Font-style
   ========================================================================== */
.u-font-style-inherit {
  font-style: inherit !important;
}

.u-font-style-initial {
  font-style: initial !important;
}

.u-font-style-italic {
  font-style: italic !important;
}

.u-font-style-normal {
  font-style: normal !important;
}

.u-font-style-oblique {
  font-style: oblique !important;
}

.u-font-style-unset {
  font-style: unset !important;
}

/* Font-weight
   ========================================================================== */
.u-font-weight-light {
  font-weight: 300 !important;
}

.u-font-weight-normal {
  font-weight: 400 !important;
}

.u-font-weight-medium {
  font-weight: 600 !important;
}

.u-font-weight-bold {
  font-weight: 700 !important;
}

/* Font-variant
   ========================================================================== */
.u-font-variant-normal {
  font-variant: normal !important;
}

.u-font-variant-small-caps {
  font-variant: small-caps !important;
}

/* Text-align
   ========================================================================== */
.u-text-align-right {
  text-align: right !important;
}

.u-text-align-center {
  text-align: center !important;
}

@media (min-width: 48em) {
  .u-text-align-right\@tablet {
    text-align: right !important;
  }
}
@media (max-width: 47.99em) {
  .u-text-align-right-below-tablet {
    text-align: right !important;
  }
}
@media (min-width: 62em) {
  .u-text-align-right\@desktop {
    text-align: right !important;
  }
}
@media (max-width: 61.99em) {
  .u-text-align-right-below-desktop {
    text-align: right !important;
  }
}
@media (min-width: 75em) {
  .u-text-align-right\@wide {
    text-align: right !important;
  }
}
@media (max-width: 74.99em) {
  .u-text-align-right-below-wide {
    text-align: right !important;
  }
}
@media (min-width: 85.375em) {
  .u-text-align-right\@laptop {
    text-align: right !important;
  }
}
@media (max-width: 85.365em) {
  .u-text-align-right-below-laptop {
    text-align: right !important;
  }
}
@media (min-width: 100em) {
  .u-text-align-right\@x-wide {
    text-align: right !important;
  }
}
@media (max-width: 99.99em) {
  .u-text-align-right-below-x-wide {
    text-align: right !important;
  }
}

@media (min-width: 48em) {
  .u-text-align-center\@tablet {
    text-align: center !important;
  }
}
@media (max-width: 47.99em) {
  .u-text-align-center-below-tablet {
    text-align: center !important;
  }
}
@media (min-width: 62em) {
  .u-text-align-center\@desktop {
    text-align: center !important;
  }
}
@media (max-width: 61.99em) {
  .u-text-align-center-below-desktop {
    text-align: center !important;
  }
}
@media (min-width: 75em) {
  .u-text-align-center\@wide {
    text-align: center !important;
  }
}
@media (max-width: 74.99em) {
  .u-text-align-center-below-wide {
    text-align: center !important;
  }
}
@media (min-width: 85.375em) {
  .u-text-align-center\@laptop {
    text-align: center !important;
  }
}
@media (max-width: 85.365em) {
  .u-text-align-center-below-laptop {
    text-align: center !important;
  }
}
@media (min-width: 100em) {
  .u-text-align-center\@x-wide {
    text-align: center !important;
  }
}
@media (max-width: 99.99em) {
  .u-text-align-center-below-x-wide {
    text-align: center !important;
  }
}

/* Text-transform
   ========================================================================== */
.u-text-transform-none {
  text-transform: none !important;
}

.u-text-transform-lowercase {
  text-transform: lowercase !important;
}

.u-text-transform-uppercase {
  text-transform: uppercase !important;
}

.u-text-transform-capitalize {
  text-transform: capitalize !important;
}

/* Text wrapping
   ========================================================================== */
/**
 * There are times when a really long string of text can overflow the 
 * container of a layout, such as displaying a URL.
 *
 * 1. Wrap string and add hyphens where word breaks. [mixin default]
 * 2. Wrap without adding hyphens, best for URLs.
 * 3. Use ellipsis to truncate text.
 * 
 * Info
 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
.u-text-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* [1] */
}

.u-text-wrap-nohyphen {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: none;
  hyphens: none;
  /* [2] */
}

.u-text-ellipsis {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* [3] */
}

/* Colors
   ========================================================================== */
.u-color--neutral-heavy {
  color: #6d6d6d !important;
}
.u-color--neutral-medium {
  color: #b7b7b8 !important;
}
.u-color--secondary-red {
  color: #da1f3d !important;
}
.u-color--black {
  color: hsl(0, 0%, 0%) !important;
}
.u-color--white {
  color: hsl(0, 0%, 100%) !important;
}

/* Misc
========================================================================== */
.u-text-underline {
  text-decoration: underline !important;
}

.u-text-strike {
  text-decoration: line-through !important;
}

.u-white-space-nowrap {
  white-space: nowrap !important;
}

/* ==========================================================================
   #VISIBILITY
   ========================================================================== */
/**
 * Utility classes to put specific visibility values onto elements. The below loops
 * will generate us a suite of classes from the active breakpoint values found in
 * the $mq-breakpoints map in the main.scss file, such as:
 *
 *   .u-show-only-@mobile {}
 *   .u-hide-only-@tablet {}
 *   .u-show-only-@desktop {}
 *   .u-show-@x-wide {}
 *   .u-show-below-xx-wide {}
 *   .u-hide-below-desktop{}
 *
 */
/* Show element only at a specific breakpoint but not before or after.
   ========================================================================== */
/**
 * 1. Get the current index as we iterate through the list of breakpoints so we 
 *    can use it to check ffor first and last, and to getthe next breakpoint up 
 *    in the list.
 * 2. Set $next to the current breakpoint by default, so we only need to change
 *    it until we hit the last item in the list.
 * 3. Get the next breakpoint up from the current breakpoint unless we're at the 
 *    end of the list
 * 4. For the first breakpoint, we only need to set a media query for 
 *    current to next, and for next.
 * 5. For the last breakpoint we only to set a media query for until we hit that 
 *    breakpoint and from that breakpoint.
 * 6. Set the until, to, and from media queries for the breakpoints in between 
 *    first and last.
 */
.u-show-only {
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [5] */
}
@media (min-width: 20em) and (max-width: 47.99em) {
  .u-show-only\@mobile {
    display: inherit !important;
  }
}
@media (min-width: 48em) {
  .u-show-only\@mobile {
    display: none !important;
  }
}
@media (max-width: 47.99em) {
  .u-show-only\@tablet {
    display: none !important;
  }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .u-show-only\@tablet {
    display: inherit !important;
  }
}
@media (min-width: 62em) {
  .u-show-only\@tablet {
    display: none !important;
  }
}
@media (max-width: 61.99em) {
  .u-show-only\@desktop {
    display: none !important;
  }
}
@media (min-width: 62em) and (max-width: 74.99em) {
  .u-show-only\@desktop {
    display: inherit !important;
  }
}
@media (min-width: 75em) {
  .u-show-only\@desktop {
    display: none !important;
  }
}
@media (max-width: 74.99em) {
  .u-show-only\@wide {
    display: none !important;
  }
}
@media (min-width: 75em) and (max-width: 85.365em) {
  .u-show-only\@wide {
    display: inherit !important;
  }
}
@media (min-width: 85.375em) {
  .u-show-only\@wide {
    display: none !important;
  }
}
@media (max-width: 85.365em) {
  .u-show-only\@laptop {
    display: none !important;
  }
}
@media (min-width: 85.375em) and (max-width: 99.99em) {
  .u-show-only\@laptop {
    display: inherit !important;
  }
}
@media (min-width: 100em) {
  .u-show-only\@laptop {
    display: none !important;
  }
}
@media (max-width: 99.99em) {
  .u-show-only\@x-wide {
    display: none !important;
  }
}
@media (min-width: 100em) {
  .u-show-only\@x-wide {
    display: inherit !important;
  }
}

/* Hide element only at specific breakpoint.
   ========================================================================== */
.u-hide-only {
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [5] */
}
@media (min-width: 20em) and (max-width: 47.99em) {
  .u-hide-only\@mobile {
    display: none !important;
  }
}
@media (min-width: 48em) {
  .u-hide-only\@mobile {
    display: inherit !important;
  }
}
@media (max-width: 47.99em) {
  .u-hide-only\@tablet {
    display: inherit !important;
  }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .u-hide-only\@tablet {
    display: none !important;
  }
}
@media (min-width: 62em) {
  .u-hide-only\@tablet {
    display: inherit !important;
  }
}
@media (max-width: 61.99em) {
  .u-hide-only\@desktop {
    display: inherit !important;
  }
}
@media (min-width: 62em) and (max-width: 74.99em) {
  .u-hide-only\@desktop {
    display: none !important;
  }
}
@media (min-width: 75em) {
  .u-hide-only\@desktop {
    display: inherit !important;
  }
}
@media (max-width: 74.99em) {
  .u-hide-only\@wide {
    display: inherit !important;
  }
}
@media (min-width: 75em) and (max-width: 85.365em) {
  .u-hide-only\@wide {
    display: none !important;
  }
}
@media (min-width: 85.375em) {
  .u-hide-only\@wide {
    display: inherit !important;
  }
}
@media (max-width: 85.365em) {
  .u-hide-only\@laptop {
    display: inherit !important;
  }
}
@media (min-width: 85.375em) and (max-width: 99.99em) {
  .u-hide-only\@laptop {
    display: none !important;
  }
}
@media (min-width: 100em) {
  .u-hide-only\@laptop {
    display: inherit !important;
  }
}
@media (max-width: 99.99em) {
  .u-hide-only\@x-wide {
    display: inherit !important;
  }
}
@media (min-width: 100em) {
  .u-hide-only\@x-wide {
    display: none !important;
  }
}

/* Show element at a specific breakpoint and beyond.
   ========================================================================== */
.u-show {
  /* [1] */
}
@media (max-width: 47.99em) {
  .u-show\@tablet {
    display: none !important;
  }
}
@media (min-width: 48em) {
  .u-show\@tablet {
    display: inherit !important;
  }
}

/* Show element below a specific breakpoint only.
   ========================================================================== */
.u-show-below {
  /* [1] */
}
@media (max-width: 47.99em) {
  .u-show-below-tablet {
    display: inherit !important;
  }
}
@media (min-width: 48em) {
  .u-show-below-tablet {
    display: none !important;
  }
}

/* Hide element below specific breakpoint.
   ========================================================================== */
.u-hide-below {
  /* [1] */
}
@media (max-width: 47.99em) {
  .u-hide-below-tablet {
    display: none !important;
  }
}

/* Misc
   ========================================================================== */
.u-show-all {
  display: block !important;
  overflow: visible !important;
}

[data-hidden=true] {
  display: none !important;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ========================================================================
   #COLORS
   ======================================================================== */
/* Product colors
   ========================================================================== */
/* Neutral and greyscale
   ========================================================================== */
/* UI colors
   ========================================================================== */
/* Color maps
   ========================================================================== */
/* ========================================================================
   #TYPOGRAPHY
   ======================================================================== */
/** 
 * The typography settings file contains all the font-families and font-weights
 * used in your project. Define some global default typography variables.
 */
/* Font stacks
   ========================================================================== */
/* Font weights
   ========================================================================== */
/* Global typography styles
   ========================================================================== */
/**
 * Override inuitcss default H1 - H6 heading sizes with our own sizes,
 */
/* ========================================================================
   #COLOR FUNCTIONS
   ======================================================================== */
.dark-mode .mat-dialog-container {
  background: #000000;
}

/* REBRANDING 2025 */
body {
  font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;
}

/* REBRANDING 2025 */
h1 {
  font-family: "Vastago Grotesk", "Noto Sans", sans-serif;
  font-weight: 600;
}

@media (min-width: 866px) {
  .pta-dialog .mat-dialog-container {
    position: relative;
    min-width: 865px;
    padding: 0px;
  }
}
@media (max-width: 865px) {
  .pta-dialog .mat-dialog-container {
    position: relative;
    padding: 0px;
    max-width: 400px;
  }
}
.flex {
  display: flex;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.center {
  justify-content: center;
  align-items: center;
}

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