@charset "UTF-8";
/**
* Escape special characters in a selector.
* @param {String} $pixels
* @return {String}
*/
/**
* Remove the unit of a length
* @see https://hugogiraudel.com/2013/08/12/sass-functions/
* @param {Number} $value Number to remove unit from
* @return {Number} Unitless number
*/
/**
* Convert px values (e.g. from a PSD) to ems.
* @see https://viljamis.com/blog/2013/prototyping-responsive-typography/
* @param {Number} $pixels
* @param {Number} $context Defaults to $font-size
* @return {Number} em value
*/
/**
* Convert px values (e.g. from a PSD) to rems.
* @see https://viljamis.com/blog/2013/prototyping-responsive-typography/
* @param {Number} $pixels
* @return {Number} rem value
*/
/**
* Subtract 1px from breakpoint so min/max queries don't overlap.
* @todo Use 0.01em instead of 1px to avoid media query "void" when text zoom is on.
* @see https://github.com/sass-mq/sass-mq/issues/6
* @param {Number} $breakpoint
* @return {Number}
*/
/**
* Convert tracking (e.g. from a PSD) to ems for letter-spacing.
* @param {Number} $tracking
* @return {Number} em value
*/
/**
* Casting any value to a string.
* @see https://hugogiraudel.com/2014/01/27/casting-types-in-sass/
* @param {mixed} $value
* @return {String}
*/
/**
* Replace `$search` with `$replace` in `$string`.
* @see https://github.com/HugoGiraudel/SassyStrings/blob/5c85bcae6ab51ef3996719ec31cce7aafd1a9fad/stylesheets/private/_str-replace.scss
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string
*/
/**
* Split `$string` into several parts using `$delimiter`.
* @see https://github.com/HugoGiraudel/SassyStrings/blob/c587b74ad96532eb47ec8509deb8c212ba75478c/stylesheets/private/_str-explode.scss
* @param {String} $string - String to split
* @param {String} $delimiter ('') - String to use as a delimiter to split `$string`
* @return {List}
*/
/**
* Global breakpoints for your application.
* @note Always set the `em` context to 16 when you're using them for media
* queries. Otherwise, if you change `$font-size` you'll get wonky values that
* technically work but aren't what you wanted.
* @see https://zellwk.com/blog/media-query-units/
* @type {Map}
*/
/**
* Accessible hover styles. Applies :hover styles to :focus and :active.
* @see https://24ways.org/2007/css-for-accessibility
*/
/**
* Hide only visually, but have it available for screen readers:
* @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
/**
* Keep an element invisible until an active class is added to it.
* @param {String} $active-class
*/
/**
* From Foundation's visibility classes
* @see https://github.com/zurb/foundation-sites/blob/develop/scss/components/_visibility.scss
* @see https://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html
*/
/**
* Get full path to font file.
* @param {String} $path
* @return {String}
*/
/**
* Get full path to image file.
* @param {String} $path
* @return {String}
*/
/**
* Clear floated elements.
* @see https://css-tricks.com/snippets/css/clear-fix/
*/
/**
* Polyfill object-fit and object-position.
* Values: `fill`, `contain`, `cover`, `none`, `scale-down`.
* @note Requires polyfill for IE and Edge.
* @see https://caniuse.com/#feat=object-fit
* @see https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/object-fit
* @see https://github.com/bfred-it/object-fit-images
* @param {String} $value
*/
/**
* Input placeholders
* @see https://github.com/twbs/bootstrap/blob/c04aa41ee2744b769be38526bbdef11e5be9421b/less/mixins/vendor-prefixes.less#L100-L109
*/
/**
* Generic property utility.
* @param {String} $property
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/**
* Directional property utility.
* Valid aliases: `top`, `gray`, `gray-3`, `top-gray`, `top-gray-3`.
* @param {String} $property
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/**
* Add new breakpoint alias.
* @see https://oddbird.net/2013/10/19/map-merge
* @see https://github.com/sass/sass/issues/1511#issuecomment-61907897
*
* Example:
* `@include add-breakpoint('sidebar', 60em);`
*
* @param {String} $alias
* @param {Number} $value
* @return {Boolean}
*/
/**
* Generate media queries based on a map of `$breakpoints`. Defaults to
* mobile-first, min-width queries.
*
* Allows quick prefixes to modify breakpoints:
* - `lt-`: Desktop-first, max-width queries (automatically removes 1px to avoid query overlap)
* - `btwn-`: Between min- and max-width queries
*
* Based on Inuit's responsive tools:
* @see https://github.com/inuitcss/settings.responsive/blob/master/_settings.responsive.scss
* @see https://github.com/inuitcss/tools.responsive/blob/master/_tools.responsive.scss
*
* And Sass MQ:
* @see https://github.com/sass-mq/sass-mq
*
* @note `$breakpoints` is defined in `resources/assets/sass/settings/_breakpoints.scss`
*
* @param {String} $breakpoint-name
*/
/**
* Generate breakpoint-specific classes.
* @param {String} $alias
* @param {String} $at-breakpoint
*/
/**
* Build an SVG. Based on Noah Blon's work.
* @see https://codepen.io/noahblon/pen/xGbXdV
* @param {String} $icon
* @param {Number} $width
* @param {Number} $height
* @return {String}
*/
/**
* Build an SVG path. Based on Noah Blon's work.
* @see https://codepen.io/noahblon/pen/xGbXdV
* @param {String} $path
* @param {Map} $parameters
* @return {String}
*/
/**
* Optimize SVGs in data URIs. Based on Taylor Hunt's and jakob-e's work.
* @see https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
* @see https://codepen.io/jakob-e/pen/doMoML
* @param {String} $svg
* @param {Number} $width
* @param {Number} $height
* @return {String}
*/
/**
* Font smoothing on OS X.
* @see https://maximilianhoffmann.com/posts/better-font-rendering-on-osx
* @param {Boolean} $value
* @return {[type]}
*/
/*doc
---
title: Grid
name: grid
category: Objects
---
## Sass
```scss
// Basic
@include o-grid();
@include o-grid__item();
// Responsive
@include o-grid('sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Grid object.
* @param {String} $at-breakpoint
*/
/**
* Grid object item.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Grid Gutters
name: grid-gutters
category: Objects
---
TODO: Allow directional gutters (e.g., `all`, `horizontal`, or `vertical`).
## Sass
```scss
// Basic
@include o-grid--gutters('sm', $gutter-sm);
// Responsive
@include o-grid--gutters('sm', $gutter-sm, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Grid with gutters.
* @param {String} $alias
* @param {Number} $size
* @param {String} $at-breakpoint
*/
/*doc
---
title: Icon
name: icon
category: Objects
---
IMPORTANT: When preparing SVGs:
1. Remove every `fill` and `stroke` attribute that should inherit its color from CSS.
2. Set `fill="none"` or `stroke="none"` anywhere a color should _not_ be applied.
## Sass
```scss
// Basic
@include o-icon();
@include o-icon--size(70, 70);
// Responsive
@include o-icon('sm');
@include o-icon--size(120, 120, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Icon object.
* @param {String} $at-breakpoint
*/
/**
* Icon size helper.
* @param {Number} $width
* @param {Number} $height
* @param {String} $at-breakpoint
*/
/*doc
---
title: List
name: list
category: Objects
---
## Sass
```scss
// Basic
@include o-list();
@include o-list__item();
// Responsive
@include o-list('sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* List object.
* @param {String} $at-breakpoint
*/
/**
* List object item.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Border
name: list-border
category: Objects
---
TODO: Allow directional gutters (e.g., `all`, `horizontal`, or `vertical`).
## Sass
```scss
// Basic
@include o-list--border('', 1px solid $color-gray-3);
// Responsive
@include o-list--border('', 1px solid $color-gray-3, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Block list separated by borders.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Bullet
name: list-bullet
category: Objects
---
## Sass
```scss
// Basic
@include o-list--bullet('', 1rem);
// Responsive
@include o-list--bullet('', 1rem, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Bulleted list.
* @param {String} $alias
* @param {Number} $margin
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Comma
name: list-comma
category: Objects
---
## Sass
```scss
// Basic
@include o-list--comma();
// Responsive
@include o-list--comma('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Inline list separated by commas.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Disc
name: list-disc
category: Objects
---
## Sass
```scss
// Basic
@include o-list--disc('', 1.125em);
// Responsive
@include o-list--disc('', 1.125em, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Bulleted list with native disc style.
* @param {String} $alias
* @param {Number} $padding
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Inline
name: list-inline
category: Objects
---
## Sass
```scss
// Basic
@include o-list--inline();
// Responsive
@include o-list--inline('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Inline list.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Leading Zero
name: list-leading-zero
category: Objects
---
## Sass
```scss
// Basic
@include o-list--leading-zero();
// Responsive
@include o-list--leading-zero('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Numbered list with leading zeroes.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Number
name: list-number
category: Objects
---
## Sass
```scss
// Basic
@include o-list--number();
// Responsive
@include o-list--number('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Numbered list.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Roman
name: list-roman
category: Objects
---
## Sass
```scss
// Basic
@include o-list--roman();
// Responsive
@include o-list--roman('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Numbered list with Roman numerals.
* @param {String} $at-breakpoint
*/
/*doc
---
title: List Slash
name: list-slash
category: Objects
---
## Sass
```scss
// Basic
@include o-list--slash();
// Responsive
@include o-list--slash('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Inline list separated by slashes.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Media
name: media
category: Objects
---
## Sass
```scss
// Basic
@include o-media();
@include o-media__figure();
@include o-media__body();
// Responsive
@include o-media('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Flexible media objects.
* @see https://philipwalton.github.io/solved-by-flexbox/demos/media-object/
* @param {String} $at-breakpoint
*/
/**
* Media object figure.
* @param {String} $at-breakpoint
*/
/**
* Media object body.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Section
name: section
category: Objects
---
## Sass
```scss
// Basic
@include o-section();
// Responsive
@include o-section('sm');
```
## Markup
### Basic
```html_example
Lorem ipsum
Dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum
Dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Section object.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Table
name: table
category: Objects
---
## Sass
```scss
// Basic
@include o-table();
@include o-table__item();
// Responsive
@include o-table('sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Table object.
* @param {String} $at-breakpoint
*/
/**
* Table object item.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Video
name: video
category: Objects
---
## Sass
```scss
// Basic
@include o-video();
@include o-video__close();
@include o-video__element();
@include o-video--overlay();
// Responsive
@include o-video('sm');
```
## Markup
### Basic
```html_example
```
### Overlay
```html_example
Play Video
Close
```
*/
/**
* Video object.
* @param {String} $at-breakpoint
*/
/**
* Video object wrapper.
* @param {String} $at-breakpoint
*/
/**
* Video object element.
* @see https://embedresponsively.com/
* @note Since YouTube automatically letterboxes videos, we don't have to worry about aspect ratio or centering
* @param {String} $at-breakpoint
*/
/**
* Video object play button.
* @param {String} $at-breakpoint
*/
/**
* Video object close button.
* @param {String} $at-breakpoint
*/
/**
* Video overlay.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Browser Upgrade
name: browser-upgrade
category: Components
---
## Sass
```scss
@include c-browser-upgrade();
```
## Markup
### Basic
```html_example
You are using an outdated browser. Please upgrade your browser to improve your experience.
```
### Internet Explorer 9 and below
```html_example
```
*/
/**
* Browser upgrade prompt for old Internet Explorer.
*/
/*doc
---
title: Align Items
name: align-items
category: Utilities
---
## Sass
```scss
// Basic
@include u-align-items('center');
// Responsive
@include u-align-items('center', 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Align-items utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Align Self
name: align-self
category: Utilities
---
## Sass
```scss
// Basic
@include u-align-self('flex-start');
@include u-align-self('flex-end');
// Responsive
@include u-align-self('flex-start', 'sm');
@include u-align-self('flex-end', 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Align-self utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Animation
name: animation
category: Utilities
---
## Sass
```scss
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
// Basic
@include u-animation('fade-in-400ms', 400ms fade-in linear forwards) {
opacity: 1;
}
// Responsive
@include u-animation('fade-in-400ms', 400ms fade-in linear forwards, 'sm') {
opacity: 1;
}
```
## Markup
### Basic
```html_example
TODO: Make `btwn` alias for mq (e.g., `u-aspect-ratio--3x2@btwn-sm-and-md`).
## Sass
```scss
// Basic
@include u-aspect-ratio(3, 1);
@include u-aspect-ratio(16, 9);
// Responsive
@include u-aspect-ratio(3, 1, 'sm');
@include u-aspect-ratio(16, 9, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Aspect ratio utility.
* @param {Number} $width
* @param {Number} $height
* @param {String} $at-breakpoint
*/
/*doc
---
title: Background Color
name: background-color
category: Utilities
---
## Sass
```scss
// Basic
@include u-background-color('gray-1', $color-gray-1);
// Responsive
@include u-background-color('gray-1', $color-gray-1, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Background-color utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Background Position
name: background-position
category: Utilities
---
## Sass
```scss
// Basic
@include u-background-position('top-right', top right);
// Responsive
@include u-background-position('top-right', top right, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Background-position utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Border
name: border
category: Utilities
---
Directions: null, `vertical`, `horizontal`, `top`, `right`, `bottom`, `left`.
## Sass
```scss
// Basic
@include u-border('top-gray-3', 1px solid $color-gray-3);
// Responsive
@include u-border('top-gray-3', 1px solid $color-gray-3, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Border utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Box Shadow
name: box-shadow
category: Utilities
---
## Sass
```scss
// Basic
@include u-box-shadow('down-black-1', 0 2px 5px rgba($color-black-1, 0.1));
// Responsive
@include u-box-shadow('down-black-1', 0 2px 5px rgba($color-black-1, 0.1), 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Box-shadow utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Color
name: color
category: Utilities
---
## Sass
```scss
// Basic
@include u-color('red-1', $color-red-1);
// Responsive
@include u-color('red-1', $color-red-1, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Color utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Content
name: content
category: Utilities
---
## Sass
```scss
// Basic
@include u-content-before('arrow-left', '« ');
@include u-content-after('arrow-right', ' »');
// Responsive
@include u-content-before('arrow-left', '« ', 'sm');
@include u-content-after('arrow-right', ' »', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Content utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Depth (z-index)
name: depth
category: Utilities
---
TODO: How should we handle negative values? For example, should we use parens: `.u-depth\(-1\) { z-index: -1; }`.
## Sass
```scss
// Basic
@include u-depth(1);
@include u-depth(2);
@include u-depth(3);
// Responsive
@include u-depth(1, 'sm');
@include u-depth(2, 'sm');
@include u-depth(3, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Depth utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Display
name: display
category: Utilities
---
## Sass
```scss
// Basic
@include u-display('block');
@include u-visually-hidden();
// Responsive
@include u-display('block', 'sm');
@include u-visually-hidden('sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Display utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/**
* Visually hidden utility.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Flex
name: flex
category: Utilities
---
## Sass
```scss
// Basic
@include u-flex('0', 0);
@include u-flex('1', 1);
// Responsive
@include u-flex('0', 0, 'sm');
@include u-flex('1', 1, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Flex utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Flex Direction
name: flex-direction
category: Utilities
---
## Sass
```scss
// Basic
@include u-flex-direction('row-reverse');
// Responsive
@include u-flex-direction('row-reverse', 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Flex direction utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Flex Wrap
name: flex-wrap
category: Utilities
---
## Sass
```scss
// Basic
@include u-flex-wrap('wrap');
// Responsive
@include u-flex-wrap('wrap', 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Flex-wrap utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Float
name: float
category: Utilities
---
## Sass
```scss
// Basic
@include u-float('right');
@include u-float('left');
@include u-clearfix('right');
// Responsive
@include u-float('right', 'sm');
@include u-float('left', 'sm');
@include u-clearfix('sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Float utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/**
* Clearfix utility.
* @param {String} $at-breakpoint
*/
/*doc
---
title: Font Family
name: font-family
category: Utilities
---
## Sass
```scss
// Basic
@include u-font-family('display', $font-family--display);
// Responsive
@include u-font-family('display', $font-family--display, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Font-family utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Font Size
name: font-size
category: Utilities
---
## Sass
```scss
// Basic
@include u-font-size('100%', 100%);
@include u-font-size('heading', 1.5rem);
// Responsive
@include u-font-size('100%', 100%, 'sm');
@include u-font-size('heading', 1.5rem, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Font-size utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Font Style
name: font-style
category: Utilities
---
## Sass
```scss
// Basic
@include u-font-style('italic');
// Responsive
@include u-font-style('italic', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Font-style utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Font Weight
name: font-weight
category: Utilities
---
## Sass
```scss
// Basic
@include u-font-weight('400', 400);
@include u-font-weight('bold', bold);
// Responsive
@include u-font-weight('400', 400, 'sm');
@include u-font-weight('bold', bold, 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Font weight utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Height
name: height
category: Utilities
---
## Sass
```scss
// Basic
@include u-height('50vh', 50vh);
// Responsive
@include u-height('50vh', 50vh, 'sm');
```
## Markup
### Basic
```html_example
TODO: How can we include default properties like `transition`?
## Sass
```scss
// Basic
@include u-hover('dim', 'is-active') {
opacity: 0.6;
}
// Responsive
@include u-hover('dim', 'is-active', 'sm') {
opacity: 0.6;
}
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit aspernatur, non ratione excepturi et quia recusandae repellendus natus, libero facilis doloremque sint inventore voluptatem, voluptatibus odio sapiente iste officiis.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit aspernatur, non ratione excepturi et quia recusandae repellendus natus, libero facilis doloremque sint inventore voluptatem, voluptatibus odio sapiente iste officiis.
```
*/
/**
* Line-height utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Margin
name: margin
category: Utilities
---
Directions: null, `vertical`, `horizontal`, `top`, `right`, `bottom`, `left`.
## Sass
```scss
// Basic
@include u-margin('horizontal-auto', auto);
// Responsive
@include u-margin('horizontal-auto', auto, 'sm');
```
## Markup
### Basic
```html_example
Important: Requires polyfill for IE and Edge: [Can I use…](https://caniuse.com/#feat=object-fit) Use either [lazySizes object fit extension](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/object-fit) or [object-fit-images](https://github.com/bfred-it/object-fit-images)
Values: `fill`, `contain`, `cover`, `none`, `scale-down`.
## Sass
```scss
// Basic
@include u-object-fit('cover', cover);
@include u-object-fit('cover-100%', cover) {
width: 100%;
height: 100%;
}
// Responsive
@include u-object-fit('cover', cover, 'sm');
@include u-object-fit('cover-100%', cover, 'sm') {
width: 100%;
height: 100%;
}
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Object-fit utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Opacity
name: opacity
category: Utilities
---
## Sass
```scss
// Basic
@include u-opacity('60', 0.6);
// Responsive
@include u-opacity('60', 0.6, 'sm');
```
## Markup
### Basic
```html_example
TODO: How should we handle negative values? For example, should we use parens: `.u-order\(-1\) { z-index: -1; }`.
## Sass
```scss
// Basic
@include u-order(1);
@include u-order(2);
@include u-order(3);
// Responsive
@include u-order(1, 'sm');
@include u-order(2, 'sm');
@include u-order(3, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Order utility.
* @param {Number} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Overflow
name: overflow
category: Utilities
---
## Sass
```scss
// Basic
@include u-overflow('hidden');
// Responsive
@include u-overflow('hidden', 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Overflow utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Padding
name: padding
category: Utilities
---
Directions: null, `vertical`, `horizontal`, `top`, `right`, `bottom`, `left`.
## Sass
```scss
// Basic
@include u-padding('horizontal-sm', $gutter-sm);
// Responsive
@include u-padding('horizontal-sm', $gutter-sm, 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Padding utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Pointer Events
name: pointer-events
category: Utilities
---
## Sass
```scss
// Basic
@include u-pointer-events('none');
// Responsive
@include u-pointer-events('none', 'sm');
```
## Markup
### Basic
```html_example
Click me
```
### Responsive
```html_example
Click me
```
*/
/**
* Pointer-events utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Position
name: position
category: Utilities
---
## Sass
```scss
// Basic
@include u-position('relative', relative);
@include u-position('center', absolute) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// Responsive
@include u-position('relative', relative, 'sm');
@include u-position('center', absolute, 'sm') {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Position utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Text Align
name: text-align
category: Utilities
---
## Sass
```scss
// Basic
@include u-text-align('center');
// Responsive
@include u-text-align('center', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Text-align utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Text Overflow
name: text-overflow
category: Utilities
---
## Sass
```scss
// Basic
@include u-text-overflow('ellipsis');
// Responsive
@include u-text-overflow('ellipsis', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
*/
/**
* Text-overflow utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Text Transform
name: text-transform
category: Utilities
---
## Sass
```scss
// Basic
@include u-text-transform('uppercase');
// Responsive
@include u-text-transform('uppercase', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor
```
### Responsive
```html_example
Lorem ipsum dolor
```
*/
/**
* Text-transform utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Transform
name: transform
category: Utilities
---
## Sass
```scss
// Basic
@include u-transform('rotate-90', rotate(90deg));
// Responsive
@include u-transform('rotate-90', rotate(90deg), 'sm');
```
## Markup
### Basic
```html_example
Select me
```
### Responsive
```html_example
Select me
```
*/
/**
* User-select utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Vertical Align
name: vertical-align
category: Utilities
---
## Sass
```scss
// Basic
@include u-vertical-align('middle');
// Responsive
@include u-vertical-align('middle', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet
```
### Responsive
```html_example
Lorem ipsum dolor sit amet
```
*/
/**
* Vertical-align utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: White Space
name: white-space
category: Utilities
---
## Sass
```scss
// Basic
@include u-white-space('nowrap');
// Responsive
@include u-white-space('nowrap', 'sm');
```
## Markup
### Basic
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit, molestias hic. Numquam rerum eum, quae! Quod voluptate tempore aut, molestias! Aut atque, quis animi ab fugiat. Eveniet, nam ducimus.
```
### Responsive
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit, molestias hic. Numquam rerum eum, quae! Quod voluptate tempore aut, molestias! Aut atque, quis animi ab fugiat. Eveniet, nam ducimus.
```
*/
/**
* White-space utility.
* @param {String} $value
* @param {String} $at-breakpoint
*/
/*doc
---
title: Width
name: width
category: Utilities
---
## Sass
```scss
// Basic
@include u-width('1/1', percentage(1 / 1));
@include u-width('1/2', percentage(1 / 2));
// Responsive
@include u-width('1/1', percentage(1 / 1), 'sm');
@include u-width('1/2', percentage(1 / 2), 'sm');
```
## Markup
### Basic
```html_example
```
### Responsive
```html_example
```
*/
/**
* Width utility.
* @param {String} $alias
* @param {String} $value
* @param {String} $at-breakpoint
*/
@-webkit-keyframes come-in {
to {
opacity: 1;
}
}
@keyframes come-in {
to {
opacity: 1;
}
}
@-webkit-keyframes come-in-scale {
to {
transform: scale(1) translate(-50%, -50%);
opacity: 1;
}
}
@keyframes come-in-scale {
to {
transform: scale(1) translate(-50%, -50%);
opacity: 1;
}
}
@-webkit-keyframes slight-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
60% {
transform: translateY(-3px);
}
}
@keyframes slight-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
60% {
transform: translateY(-3px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-12px);
}
60% {
transform: translateY(-6px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-12px);
}
60% {
transform: translateY(-6px);
}
}
html {
letter-spacing: 0.01em;
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type=search] {
-webkit-appearance: textfield;
/* 1 */
box-sizing: content-box;
/* 2 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/**
* Reset box-model for everything
*/
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
}
figure {
margin: 0;
}
ol,
ul {
list-style: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
svg {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
address,
cite {
font-style: normal;
}
/*! Flickity v1.2.1
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: none;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.js-sticky::before,
.js-sticky::after {
display: table;
content: "";
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
hr,
input[type=search] {
box-sizing: inherit;
}
*:active,
*:hover {
outline: none;
}
html {
background: #000;
color: #a7a49e;
-ms-overflow-style: scrollbar;
}
a {
color: #ab965d;
}
a:hover,
a:focus,
a:active {
color: #c3aa86;
}
html {
font-family: "minion-pro", "times new roman", times, georgia, serif;
-webkit-font-smoothing: subpixel-antialiased;
line-height: 1.375;
}
sup {
position: relative;
top: 0.4em;
font-size: 100%;
vertical-align: super;
}
sub {
display: inline-block;
position: static;
bottom: auto;
transform: translate(0, 0.45em);
line-height: inherit;
vertical-align: initial;
}
mark {
background: transparent;
color: currentColor;
}
input,
button {
border: 0;
outline: none;
}
input {
border-radius: 0;
-webkit-appearance: none;
}
input[type=checkbox] {
-webkit-appearance: checkbox;
}
input[type=radio] {
-webkit-appearance: radio;
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #1a1917 inset;
-webkit-text-fill-color: #a7a49e;
}
input::-ms-clear {
display: none;
}
button {
background-color: transparent;
}
address {
white-space: pre-line;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
input[type=number] {
-moz-appearance: textfield;
}
textarea {
resize: vertical;
}
h1,
h2,
h3,
h4,
h5,
h6,
.u-small-caps {
font-variant: small-caps;
text-transform: lowercase;
}
.supports-font-features.wf-active h1,
.supports-font-features.wf-active h2,
.supports-font-features.wf-active h3,
.supports-font-features.wf-active h4,
.supports-font-features.wf-active h5,
.supports-font-features.wf-active h6,
.supports-font-features.wf-active .u-small-caps {
font-variant: normal;
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
h1 sup,
h2 sup,
h3 sup,
h4 sup,
h5 sup,
h6 sup,
.u-small-caps sup {
top: 0.54em;
font-size: 80%;
}
h1 sup.u-reset-small-caps-sup,
h2 sup.u-reset-small-caps-sup,
h3 sup.u-reset-small-caps-sup,
h4 sup.u-reset-small-caps-sup,
h5 sup.u-reset-small-caps-sup,
h6 sup.u-reset-small-caps-sup,
.u-small-caps sup.u-reset-small-caps-sup {
top: -0.1em;
font-size: 36%;
}
@media all and (max-width: 48em) {
.u-small-caps\@lt-md {
font-variant: small-caps;
text-transform: lowercase;
}
.supports-font-features.wf-active .u-small-caps\@lt-md {
font-variant: normal;
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
.u-small-caps\@lt-md sup {
top: 0.54em;
font-size: 80%;
}
.u-small-caps\@lt-md sup.u-reset-small-caps-sup {
top: -0.1em;
font-size: 36%;
}
}
.u-small-caps .u-small-caps__symbol {
font-size: 80%;
}
.supports-font-features.wf-active .u-small-caps .u-small-caps__symbol {
font-size: 100%;
}
.u-small-caps .u-small-caps__apostrophe {
font-size: 85%;
}
.u-small-caps .u-small-caps__apostrophe--quote {
font-size: 70%;
}
.u-small-caps__sup {
position: relative;
font-size: 0.5em;
top: 0.15em;
}
.u-small-caps__sub {
position: relative;
white-space: nowrap;
}
.u-small-caps__sub::after {
position: absolute;
bottom: 0;
text-decoration: none;
}
.u-small-caps__sub--tm {
margin-right: 0.18em;
padding-right: 0.5em;
}
.u-small-caps__sub--tm::after {
margin-bottom: 0.8em;
transform: translate(0, 55%);
font-size: 50%;
content: "\2122";
}
.u-small-caps__sub--reg {
margin-right: 0.05em;
padding-right: 0.3em;
}
.u-small-caps__sub--reg::after {
margin-bottom: 0.444em;
transform: translate(0, 61%);
font-size: 90%;
content: "\AE";
}
.u-small-caps__sub--copy {
padding-right: 0.3em;
}
.u-small-caps__sub--copy::after {
transform: translate(0, -104%);
font-size: 38%;
content: "\A9";
}
h1 .u-small-caps__sub,
h2 .u-small-caps__sub,
h3 .u-small-caps__sub,
h4 .u-small-caps__sub,
h5 .u-small-caps__sub,
h6 .u-small-caps__sub,
.u-small-caps .u-small-caps__sub {
margin-right: 0;
}
h1 .u-small-caps__sub--reg::after,
h2 .u-small-caps__sub--reg::after,
h3 .u-small-caps__sub--reg::after,
h4 .u-small-caps__sub--reg::after,
h5 .u-small-caps__sub--reg::after,
h6 .u-small-caps__sub--reg::after,
.u-small-caps .u-small-caps__sub--reg::after {
margin-bottom: 0.8em;
transform: translate(0, 113%);
}
.u-reset-small-caps {
font-variant: normal;
font-variant-caps: normal;
text-transform: none;
}
.supports-font-features.wf-active .u-reset-small-caps {
font-variant-caps: initial;
font-feature-settings: initial;
}
.u-reset-small-caps sup {
top: 0.4em;
font-size: 100%;
}
.u-reset-small-caps .u-small-caps__sub--tm {
margin-right: 0.18em;
}
.u-reset-small-caps .u-small-caps__sub--reg {
margin-right: 0.05em;
}
.u-reset-small-caps .u-small-caps__sub--reg::after {
margin-bottom: 0.444em;
transform: translate(0, 61%);
}
.u-reset-small-caps .u-small-caps__apostrophe {
font-size: 100%;
}
@media all and (max-width: 38.6875em) {
.u-reset-small-caps\@lt-620 {
font-variant: normal;
font-variant-caps: normal;
text-transform: none;
}
.supports-font-features.wf-active .u-reset-small-caps\@lt-620 {
font-variant-caps: initial;
font-feature-settings: initial;
}
.u-reset-small-caps\@lt-620 sup {
top: 0.4em;
font-size: 100%;
}
.u-reset-small-caps\@lt-620 .u-small-caps__sub--tm {
margin-right: 0.18em;
}
.u-reset-small-caps\@lt-620 .u-small-caps__sub--reg {
margin-right: 0.05em;
}
.u-reset-small-caps\@lt-620 .u-small-caps__sub--reg::after {
margin-bottom: 0.444em;
transform: translate(0, 61%);
}
}
.c-hr--left {
margin-top: 1.875em;
margin-left: 0;
}
.c-hr--vertical-margin {
margin-top: 2.1875em;
margin-bottom: 2.5em;
}
.c-hr--md {
width: 1.25em;
height: 0.0625em;
}
.c-hr--full {
width: 100%;
height: 0.0625em;
}
.c-hr--wide {
width: 100%;
max-width: 14.375em;
height: 0.0625em;
}
.c-hr--red {
background: #A6192E;
}
.c-hr--light {
opacity: 0.4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #cdc9c3;
font-weight: 400;
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
}
hr {
width: 2.0625em;
height: 0.125em;
margin: 0.5em auto 1em;
border: 0;
background: #ab965d;
}
.c-heading {
color: #cdc9c3;
font-weight: 400;
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
display: block;
margin-bottom: 0.4545454545em;
font-size: 2.75em;
line-height: 0.8;
}
@media all and (max-width: 42.4375em) {
.c-heading {
margin-bottom: 0.6428571429em;
font-size: 1.75em;
}
}
.c-heading-alt {
color: #000 !important;
}
.c-heading--lg {
font-size: 3.75em;
}
@media all and (max-width: 42.4375em) {
.c-heading--lg {
font-size: 2.484375em;
}
}
.c-heading--xl {
font-size: 4.0625em;
}
@media all and (max-width: 42.4375em) {
.c-heading--xl {
font-size: 2.484375em;
}
}
.c-heading--xxl {
font-size: 5em;
}
@media all and (max-width: 42.4375em) {
.c-heading--xxl {
font-size: 2.484375em;
}
}
.c-heading--md {
margin-bottom: 0.6153846154em;
font-size: 1.625em;
line-height: 0.9230769231;
}
@media all and (max-width: 42.4375em) {
.c-heading--md {
font-size: 1.125em;
}
}
.c-heading--38 {
margin-bottom: 0.6153846154em;
font-size: 2.375em;
line-height: 0.9230769231;
}
@media all and (max-width: 42.4375em) {
.c-heading--38 {
font-size: 1.3125em;
}
}
.c-heading--36 {
font-size: 2.25em;
line-height: 1.125;
}
.c-heading--readyadditions-slice-guide {
font-size: 1.625em;
line-height: 1.125;
}
@media all and (min-width: 48.0625em) {
.c-heading--readyadditions-slice-guide {
font-size: 1.625em;
}
}
@media all and (min-width: 65em) {
.c-heading--readyadditions-slice-guide {
font-size: 2.25em;
}
}
@media all and (min-width: 75em) {
.c-heading--readyadditions-slice-guide {
font-size: 2.625em;
}
}
.c-heading--sm {
font-size: 1.125em;
letter-spacing: 0.01em;
}
@media all and (max-width: 42.4375em) {
.c-heading--sm {
font-size: 0.9375em;
}
}
.c-heading--xs {
font-size: 1.125em;
letter-spacing: 0.05em;
margin-bottom: 0.7777777778em;
}
@media all and (max-width: 42.4375em) {
.c-heading--xs {
font-size: 1em;
}
}
.c-heading--detail {
margin-bottom: 0.6153846154em;
font-size: 1.5em;
line-height: 1.125;
}
@media all and (max-width: 42.4375em) {
.c-heading--detail {
font-size: 1.125em;
}
}
.c-heading--40 {
font-size: 2.5em;
line-height: 1;
}
@media all and (max-width: 42.4375em) {
.c-heading--40 {
font-size: 1.3125em;
line-height: 1.8;
}
}
.c-subheading {
font-size: 1em;
font-weight: 500;
font-style: italic;
line-height: 1.25;
letter-spacing: 0.01em;
margin-bottom: 0.25em;
color: #ab965d;
}
@media all and (max-width: 42.4375em) {
.c-subheading {
font-size: 0.875em;
}
}
@media all and (max-width: 42.4375em) {
.c-subheading {
margin-bottom: 0.5714285714em;
}
}
.c-subheading--sm {
font-size: 0.75em;
}
.c-subheading--md {
font-size: 1.125em;
}
.c-subheading--lg {
font-size: 1.875em;
}
@media all and (max-width: 42.4375em) {
.c-subheading--lg {
font-size: 1.3125em;
}
}
.c-subheading--plain {
font-style: normal;
}
.c-heading--number-callout {
font-family: "minion-pro", "times new roman", times, georgia, serif;
font-size: 50px;
color: #8a7449;
letter-spacing: 0;
text-align: center;
line-height: 70px;
font-style: italic;
}
.c-copy--xxs {
font-size: 0.625em;
letter-spacing: 0.01em;
line-height: 1.1538461538;
}
.c-copy--sm {
font-size: 0.8125em;
letter-spacing: 0.01em;
line-height: 1.1538461538;
}
.c-copy--md {
font-size: 1em;
letter-spacing: 0.01em;
line-height: 0.9375;
}
@media all and (max-width: 42.4375em) {
.c-copy--md {
font-size: 0.8125em;
line-height: 1.1538461538;
}
}
.c-copy--lg {
font-size: 1.0625em;
line-height: 1.2941176471;
}
.c-copy--xl {
font-size: 1.1875em;
line-height: 1.4285714286;
letter-spacing: 0.01em;
}
.c-copy--21 {
font-size: 1.3125em;
line-height: 1.4285714286;
letter-spacing: 0.01em;
}
@media all and (max-width: 42.4375em) {
.c-copy--21 {
font-size: 1.0625em;
line-height: 1.2941176471;
}
}
.c-copy--xxl {
font-size: 1.5em;
line-height: 1.4285714286;
letter-spacing: 0.01em;
}
@media all and (max-width: 42.4375em) {
.c-copy--xxl {
font-size: 0.84375em;
}
}
.c-copy--33 {
font-size: 2.0625em;
line-height: 1.4285714286;
letter-spacing: 0.01em;
}
@media all and (max-width: 42.4375em) {
.c-copy--33 {
font-size: 1.1875em;
}
}
.c-disclaimer {
margin-bottom: 0.5em;
font-size: 0.8125em;
font-style: italic;
letter-spacing: 0.01em;
line-height: 1.1538461538;
}
.c-disclaimer.c-disclaimer--sans-serif {
font-style: normal;
font-size: 0.625em;
font-family: "Arial";
}
.c-number-callout {
background: #000;
margin-left: 0.625em;
padding: 0.3125em 0;
border: 1px solid #8a7449;
width: 3.375em;
text-align: center;
}
.o-background {
background: center/cover no-repeat;
}
.o-carousel .flickity-page-dots {
display: flex;
justify-content: flex-end;
margin: 1.25em 0 0;
height: 12px;
}
.o-carousel .flickity-page-dots .dot {
width: 10px;
height: 10px;
margin: 0 0.3125em;
transform: rotate(45deg);
border-radius: 0;
background: #ab965d;
cursor: pointer;
opacity: 0.5;
}
.o-carousel .flickity-page-dots .dot:hover,
.o-carousel .flickity-page-dots .dot:focus,
.o-carousel .flickity-page-dots .dot:active {
opacity: 0.75;
}
.o-carousel .flickity-page-dots .dot.is-selected {
border: 2px #ab965d solid;
background: none;
cursor: default;
opacity: 1;
}
.o-carousel > figure:not(:first-child) {
position: absolute;
left: -999em;
}
.o-center-block {
margin-right: auto;
margin-left: auto;
}
@media all and (max-width: 56.1875em) {
.o-center-block\@lt-900 {
margin-right: auto;
margin-left: auto;
}
}
@media all and (max-width: 48em) {
.o-center-block\@lt-md {
margin-right: auto;
margin-left: auto;
}
}
@media all and (max-width: 38.6875em) {
.o-center-block\@lt-620 {
margin-right: auto;
margin-left: auto;
}
}
@media all and (max-width: 29.9375em) {
.o-center-block\@lt-sm {
margin-right: auto;
margin-left: auto;
}
}
.o-circle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.o-circle--xs {
-webkit-transform-style: preserve-3d;
width: 30px;
height: 30px;
}
.o-circle--xs > * {
-webkit-backface-visibility: hidden;
}
.o-circle--xs::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 30px;
height: 30px;
}
.o-circle--xs:hover::after,
.o-circle--xs:focus::after,
.o-circle--xs:active::after {
background: rgba(195, 170, 134, 0.1);
}
.o-circle--xs.is-active::after {
background: rgba(195, 170, 134, 0.1);
}
.o-circle--sm {
-webkit-transform-style: preserve-3d;
width: 60px;
height: 60px;
}
.o-circle--sm > * {
-webkit-backface-visibility: hidden;
}
.o-circle--sm::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 60px;
height: 60px;
}
.o-circle--sm:hover::after,
.o-circle--sm:focus::after,
.o-circle--sm:active::after {
background: rgba(195, 170, 134, 0.1);
}
.o-circle--sm.is-active::after {
background: rgba(195, 170, 134, 0.1);
}
.o-darken__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
pointer-events: none;
}
.o-darken__overlay::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
content: "";
opacity: 0.15;
}
.o-darken__overlay::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(ellipse at center, black 0%, rgba(0, 0, 0, 0) 33.3333333333%);
content: "";
opacity: 0.4;
}
.o-darken__overlay.o-darken__overlay--darker::before {
opacity: 0.4;
}
.o-darken__button::before {
position: absolute;
top: 50%;
left: 50%;
width: 266.67%;
height: 266.67%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, #0d0806 0%, rgba(13, 8, 6, 0) 50%);
content: "";
opacity: 0.2;
z-index: -1;
pointer-events: none;
}
@media all and (min-width: 48.0625em) {
.o-darken\@lt-md .o-darken__overlay {
display: none;
}
}
.o-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
@media all and (min-width: 48.0625em) {
.o-grid\@md {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
}
@media all and (min-width: 65em) {
.o-grid\@1040 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
}
@media all and (min-width: 64em) {
.o-grid\@1024 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
}
.o-grid__item {
display: block;
position: relative;
}
.o-grid--gutters-xxs {
margin-right: 0;
margin-left: -0.625em;
}
.o-grid--gutters-xxs > .o-grid__item {
padding-right: 0;
padding-left: 0.625em;
}
.o-grid--gutters-xs {
margin-right: 0;
margin-left: -1.25em;
}
.o-grid--gutters-xs > .o-grid__item {
padding-right: 0;
padding-left: 1.25em;
}
.o-grid--gutters-sm {
margin-right: 0;
margin-left: -1.875em;
}
.o-grid--gutters-sm > .o-grid__item {
padding-right: 0;
padding-left: 1.875em;
}
.o-grid--gutters-md {
margin-right: 0;
margin-left: -3em;
}
.o-grid--gutters-md > .o-grid__item {
padding-right: 0;
padding-left: 3em;
}
.o-grid--gutters-lg {
margin-right: 0;
margin-left: -4em;
}
.o-grid--gutters-lg > .o-grid__item {
padding-right: 0;
padding-left: 4em;
}
.o-grid--gutters-xl {
margin-right: 0;
margin-left: -5em;
}
.o-grid--gutters-xl > .o-grid__item {
padding-right: 0;
padding-left: 5em;
}
@media all and (min-width: 48.0625em) {
.o-grid--gutters-sm\@md {
margin-right: 0;
margin-left: -1.875em;
}
.o-grid--gutters-sm\@md > .o-grid__item {
padding-right: 0;
padding-left: 1.875em;
}
}
.o-grid--gutters-0 {
margin-right: 0;
margin-left: 0;
}
.o-grid--gutters-0 > .o-grid__item {
padding-right: 0;
padding-left: 0;
}
.o-grid--center {
justify-content: center;
}
/**
* Reverse grid.
* @param {String} $at-breakpoint
*/
.o-grid--reverse {
flex-direction: row-reverse;
}
@media all and (min-width: 30em) {
.o-grid--reverse\@sm {
flex-direction: row-reverse;
}
}
/**
* Grid with inner borders (and vertical).
* Based on http://codepen.io/dalgard/pen/Dbnus?editors=0100
*
* Note: Requires an extra div with overflow hidden to hide the right borders:
* ```
*
* ```
*/
.o-grid--inner-border {
margin: 0 -4px 0 0;
border-top: 4px solid #A6192E;
}
.o-grid--inner-border > .o-grid__item {
border-right: 4px solid #A6192E;
border-bottom: 4px solid #A6192E;
}
@media all and (max-width: 48em) {
.o-grid--inner-border {
border-width: 3px;
}
.o-grid--inner-border > .o-grid__item {
border-width: 3px;
}
}
.o-grid--inner-border--sm {
padding: 0;
border: 1px #A6192E solid;
border-width: 1px 0;
}
.o-grid--inner-border--sm > .o-grid__item {
border-top: 1px #A6192E solid;
}
.o-grid--inner-border--sm > .o-grid__item:first-child {
border-top: 0;
}
@media all and (min-width: 38.75em) {
.o-grid--inner-border--sm > .o-grid__item {
border-top: 0;
}
.o-grid--inner-border--sm > .o-grid__item + .o-grid__item {
border-left: 1px #A6192E solid;
}
.o-grid--inner-border--sm > .o-grid__item:first-child {
padding-left: 0;
}
.o-grid--inner-border--sm > .o-grid__item:last-child {
padding-right: 0;
}
}
.gold-grid {
background-color: rgba(138, 116, 73, 0.1);
}
.gold-grid svg {
height: 67px;
}
.gold-grid .simplicity {
font-size: 1.25em;
display: block;
margin: 0 auto;
line-height: 1;
}
.gold-grid.u-width-1\/1 {
margin: 0.5% 0;
}
@media all and (min-width: 30em) {
.gold-grid.u-width-1\/2\@sm {
width: 48%;
margin: 0.5%;
}
}
@media all and (min-width: 48.0625em) {
.gold-grid.u-width-1\/3\@md {
width: 30.5%;
margin: 0.5%;
}
}
@media all and (min-width: 61.25em) {
.gold-grid.u-width-1\/4\@lg {
width: 22.75%;
margin: 0.5%;
}
}
.o-lazyload__placeholder {
transform: scale(1.05);
filter: blur(5px);
}
.o-lazyload__image {
transition: opacity 400ms ease-out;
}
.o-lazyload__image.lazyload {
opacity: 0;
}
.o-lazyload__image.lazyloaded {
opacity: 1;
}
.o-lazyload__image--no-transition {
transition: none;
}
.o-list {
padding-left: 0;
list-style: none;
}
.o-list__item {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.o-list__item {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.o-list--bullets > .o-list__item {
position: relative;
margin-left: 15px;
}
.o-list--bullets > .o-list__item::before {
position: absolute;
top: -2px;
left: -15px;
content: "\2022 ";
}
.o-list--bullets-alt {
padding-left: 1.125em;
list-style: disc;
}
.o-list--bullets-alt > li {
padding-bottom: 0.375em;
}
.o-list--numbers > .o-list__item {
counter-increment: list-numbers;
}
.o-list--numbers .o-list__counter::before {
display: inline-block;
content: counter(list-numbers) ". ";
}
.o-list--numbers-roman > .o-list__item {
margin-left: 1.25em;
counter-increment: list-numbers;
}
.o-list--numbers-roman > .o-list__item::before {
display: inline-block;
margin-right: 0.3125em;
content: counter(list-numbers, lower-roman) ". ";
}
.o-list--numbers-roman > .o-list__item ol > .o-list__item {
counter-increment: list-numbers-2;
margin-left: 1.25em;
}
.o-list--numbers-roman > .o-list__item ol > .o-list__item::before {
display: inline-block;
content: counter(list-numbers-2, lower-alpha) ". ";
margin-right: 0.3125em;
}
.o-list--leading-zero > .o-list__item {
counter-increment: list-numbers-zero-pad;
}
.o-list--leading-zero .o-list__counter::before {
display: inline-block;
content: counter(list-numbers-zero-pad, decimal-leading-zero);
}
.o-list--leading-zero .o-list__item--instructions {
position: relative;
margin-bottom: 0.625em;
margin-left: 2.1875em;
}
.o-list--leading-zero .o-list__item--instructions .o-list__counter::before {
position: absolute;
top: 0;
left: -35px;
color: #8a7449;
}
.o-list--inline > .o-list__item {
display: inline-block;
}
.o-list--commas > .o-list__item {
display: inline-block;
}
.o-list--commas > .o-list__item:not(:last-child)::after {
margin-left: -2px;
content: ", ";
}
.o-list--outline .o-list__content {
padding-left: 1em;
}
.o-list--outline .o-list__counter {
display: table;
}
.o-list--outline .o-list__counter::before {
display: table-cell;
width: 1em;
}
.o-list--borders > .o-list__item {
border-bottom: 1px solid #211f1c;
}
.o-list--borders > .o-list__item:nth-last-of-type(1),
.o-list--borders > .o-list__item:nth-last-of-type(2) {
border-bottom: none;
}
.o-list--borders > .o-list__item:nth-of-type(even) .o-list__item-inner {
border-left: 1px solid #211f1c;
}
._list-with-more-vertical-space .o-list__item {
margin-bottom: 0.25em;
}
._list-with-more-vertical-space a {
display: inline-block;
line-height: 1.15;
}
.o-media {
display: flex;
align-items: flex-start;
}
.o-media__figure {
flex: 0 1 auto;
}
.o-media__body {
flex: 1 1 auto;
}
.o-media--gutter-sm > .o-media__figure:first-child,
.o-media--gutter-sm > .o-media__body:first-child {
margin-right: 32px;
}
.o-media--top\@lt-620 {
align-items: flex-start;
}
@media all and (max-width: 38.6875em) {
.o-media--wrap\@lt-620 {
flex-wrap: wrap;
}
.o-media--wrap\@lt-620 > .o-media__figure:first-child,
.o-media--wrap\@lt-620 > .o-media__body:first-child {
margin-right: 0;
margin-bottom: 16px;
}
}
@media all and (max-width: 77.4375em) {
.o-overflow-horizontal\@lt-1240 {
width: 100%;
overflow-x: scroll;
overflow-y: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.o-overflow-horizontal\@lt-1240 .o-overflow-horizontal__inner {
flex-wrap: nowrap;
min-width: 100%;
white-space: nowrap;
}
}
.o-preserve-aspect-ratio {
width: 100%;
height: 0;
padding: 0 0 100%;
}
.o-preserve-aspect-ratio--1x1 {
padding: 0 0 100%;
}
.o-preserve-aspect-ratio--2x1 {
padding: 0 0 50%;
}
.o-preserve-aspect-ratio--1x2 {
padding: 0 0 200%;
}
.o-preserve-aspect-ratio--16x9 {
padding: 0 0 56.25%;
}
.o-preserve-aspect-ratio--3x2 {
padding: 0 0 66.6666666667%;
}
.o-preserve-aspect-ratio--10x7 {
padding: 0 0 70%;
}
.o-preserve-aspect-ratio--4x3 {
padding: 0 0 75%;
}
.o-preserve-aspect-ratio--13x10 {
padding: 0 0 130%;
}
.o-preserve-aspect-ratio--77x125 {
padding: 0 0 61.6%;
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--25x13\@md {
padding: 0 0 52%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--14x4\@md {
padding: 0 0 28.5714285714%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--17x5\@md {
padding: 0 0 29.4117647059%;
}
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--5x3\@680 {
padding: 0 0 60%;
}
}
@media all and (min-width: 65em) {
.o-preserve-aspect-ratio--22x5\@1040 {
padding: 0 0 22.7272727273%;
}
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--22x5\@680 {
padding: 0 0 22.7272727273%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--22x5\@md {
padding: 0 0 22.7272727273%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--24x7\@md {
padding: 0 0 29.1666666667%;
}
}
.o-preserve-aspect-ratio--5x3 {
padding: 0 0 60%;
}
.o-preserve-aspect-ratio--1600x733 {
padding: 0 0 45.8125%;
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--40x19\@md {
padding: 0 0 47.5% !important;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--16x7\@md {
padding: 0 0 43.75% !important;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--16x8\@md {
padding: 0 0 50% !important;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--4x3\@md {
padding: 0 0 75%;
}
}
@media all and (min-width: 65em) {
.o-preserve-aspect-ratio--3x1\@1040 {
padding: 0 0 33.3333333333%;
}
}
@media all and (min-width: 61.25em) {
.o-preserve-aspect-ratio--3x1\@lg {
padding: 0 0 33.3333333333%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--3x1\@md {
padding: 0 0 33.3333333333%;
}
}
.o-preserve-aspect-ratio--89x116 {
padding: 0 0 130.3370786517%;
}
.o-preserve-aspect-ratio--552x432 {
padding: 0 0 78.2608695652%;
}
.o-preserve-aspect-ratio--629x449 {
padding: 0 0 71.3831478537%;
}
.o-preserve-aspect-ratio--440x593 {
padding: 0 0 91.2307692308%;
}
.o-preserve-aspect-ratio--1200x700 {
padding: 0 0 58.3333333333%;
}
.o-preserve-aspect-ratio--500x370 {
padding: 0 0 74%;
}
.o-preserve-aspect-ratio--245x370 {
padding: 0 0 151.0204081633%;
}
.o-preserve-aspect-ratio--419x632 {
padding: 0 0 150.8353221957%;
}
@media all and (min-width: 61.25em) {
.o-preserve-aspect-ratio--20x9\@lg {
padding: 0 0 45%;
}
}
@media all and (min-width: 61.25em) {
.o-preserve-aspect-ratio--35x33\@lg {
padding: 0 0 94.2857142857%;
}
}
.o-preserve-aspect-ratio--9x4 {
padding: 0 0 44.4444444444%;
}
.o-preserve-aspect-ratio--9x4 {
padding: 0 0 44.4444444444%;
}
.cc-preserve-aspect-ratio--rule-one {
display: none;
}
@media all and (min-width: 75em) {
.cc-preserve-aspect-ratio--rule-one {
display: block;
padding: 0 0 56%;
}
}
@media all and (min-width: 81.25em) {
.cc-preserve-aspect-ratio--rule-one {
display: block;
padding: 0 0 51.1904761905%;
}
}
@media all and (min-width: 93.75em) {
.cc-preserve-aspect-ratio--rule-one {
display: block;
padding: 0 0 44%;
}
}
.cc-preserve-aspect-ratio--video {
padding: 0 0 192.2666666667%;
}
@media all and (min-width: 42.5em) {
.cc-preserve-aspect-ratio--video {
padding: 0 0 117.1875%;
}
}
@media all and (min-width: 64em) {
.cc-preserve-aspect-ratio--video {
padding: 0 0 56.25%;
}
}
.cc-preserve-aspect-ratio--header {
padding: 0 0 204.8%;
}
@media all and (min-width: 42.5em) {
.cc-preserve-aspect-ratio--header {
padding: 0 0 117.1875%;
}
}
@media all and (min-width: 64em) {
.cc-preserve-aspect-ratio--header {
padding: 0 0 56.25%;
}
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--16x9\@680 {
padding: 0 0 56.25%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--16x9\@md {
padding: 0 0 56.25%;
}
}
@media all and (min-width: 64em) {
.o-preserve-aspect-ratio--16x9\@1024 {
padding: 0 0 56.25%;
}
}
@media all and (min-width: 65em) {
.o-preserve-aspect-ratio--16x9\@1040 {
padding: 0 0 56.25%;
}
}
@media (min-width: 30em) and (max-width: 48em) {
.o-preserve-aspect-ratio--3x2\@btwn-sm-and-md {
padding: 0 0 66.6666666667%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--18x10\@md {
padding: 0 0 55.5555555556%;
}
}
@media all and (min-width: 64em) {
.o-preserve-aspect-ratio--3x1\@1024 {
padding: 0 0 33.3333333333%;
}
}
@media all and (min-width: 65em) {
.o-preserve-aspect-ratio--147x16\@1040 {
padding: 0 0 10.8843537415%;
}
}
@media all and (min-width: 65em) {
.o-preserve-aspect-ratio--18x10\@1040 {
padding: 0 0 55.5555555556%;
}
}
.o-preserve-aspect-ratio--covid19 {
padding: 0 0 52.5%;
}
.o-preserve-aspect-ratio--pitcraft-craftsmanship-smoker {
padding: 0 0 217.3333333333%;
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--pitcraft-craftsmanship-smoker {
padding: 0 0 100%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--pitcraft-craftsmanship-smoker {
padding: 0 0 110.5263157895%;
}
}
.o-preserve-aspect-ratio--pitcraft-header-video {
padding: 0 0 56.25%;
}
.o-preserve-aspect-ratio--pitcraft-activity-state {
padding: 0 0 46.6666666667%;
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--pitcraft-activity-state {
padding: 0 0 26.7857142857%;
}
}
.o-preserve-aspect-ratio--pitcraft-success-state {
padding: 0 0 61.3333333333%;
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--pitcraft-success-state {
padding: 0 0 29.6428571429%;
}
}
.o-preserve-aspect-ratio--pitcraft-video-activity {
padding: 0 0 150.7246376812%;
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--pitcraft-video-activity {
padding: 0 0 66.6666666667%;
}
}
.o-preserve-aspect-ratio--pitcraft-recipe-activity {
padding: 0 0 150.7246376812%;
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--pitcraft-recipe-activity {
padding: 0 0 52.803030303%;
}
}
.o-preserve-aspect-ratio--pitcraft-recipe-image {
padding: 0 0 95.9409594096%;
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--pitcraft-recipe-image {
padding: 0 0 106.0606060606%;
}
}
.o-preserve-aspect-ratio--pitcraft-mobile-form {
padding: 0 0 95.9409594096%;
}
.o-preserve-aspect-ratio--pitcraft-smokey-meat {
padding: 0 0 46.875%;
}
@media all and (min-width: 22.5em) {
.o-preserve-aspect-ratio--pitcraft-smokey-meat {
padding: 0 0 57.3333333333%;
}
}
@media (min-height: 812px) and (max-width: 375px) {
.o-preserve-aspect-ratio--pitcraft-smokey-meat {
padding: 0 0 70.9333333333%;
}
}
@media (max-width: 414px) and (min-height: 896px) {
.o-preserve-aspect-ratio--pitcraft-smokey-meat {
padding: 0 0 70.9333333333%;
}
}
@media (orientation: portrait) and (min-width: 1024px) {
.o-preserve-aspect-ratio--pitcraft-smokey-meat {
padding: 0 0 70.9333333333%;
}
}
.o-preserve-aspect-ratio--pitcraft-success-mobile-meat {
padding: 0 0 60%;
}
.o-preserve-aspect-ratio--pitcraft-success-meat {
padding: 0 0 76.5106382979%;
}
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 134.1333333333%;
}
@media all and (min-width: 42.5em) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 90.8912830558%;
}
}
@media (orientation: portrait) and (min-width: 680px) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 84.6354166667%;
}
}
@media all and (min-width: 48.0625em) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 73.046875%;
}
}
@media (orientation: portrait) and (min-device-width: 1024px) and (max-device-width: 1024px) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 66%;
}
}
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 62.5%;
}
}
@media all and (min-width: 65em) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 80.6451612903%;
}
}
@media all and (min-width: 81.25em) {
.o-preserve-aspect-ratio--pitcraft-apron {
padding: 0 0 62.8472222222%;
}
}
.o-preserve-aspect-ratio--pitcraft-bonus-entry {
padding: 0 0 30.9322033898%;
}
.o-section {
overflow: visible;
position: relative;
}
@media all and (max-width: 48em) {
.o-section__content {
padding-right: 1.25em;
padding-left: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.o-section__content {
padding-right: 3em;
padding-left: 3em;
}
}
@media all and (min-width: 65em) {
.o-section__content\@1040 {
padding-right: 3em;
padding-left: 3em;
}
}
@media (min-width: 93.5em) {
.o-section__content {
padding-right: calc((100% - 87.5em) / 2);
padding-left: calc((100% - 87.5em) / 2);
}
.o-section__content--full {
padding-right: 3em;
padding-left: 3em;
}
}
.background-wrap {
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
@media all and (max-width: 48em) {
.o-section__content--full {
padding-right: 0;
padding-left: 0;
}
}
.o-section__content--full.simplicity {
background-size: cover;
}
@media all and (min-width: 48.0625em) {
.o-section__content--right\@md {
padding-left: 0;
}
}
@media all and (min-width: 93.75em) {
.o-section__content--right\@md {
padding-left: 0;
}
}
@media all and (min-width: 48.0625em) {
.o-section__content--left\@md {
padding-right: 0;
}
}
@media all and (min-width: 93.75em) {
.o-section__content--left\@md {
padding-right: 0;
}
}
@media all and (max-width: 56.1875em) {
.o-sidebar-layout__sidebar {
margin: 3em 0 0;
padding: 3em 0 0;
border-top: 1px #A6192E solid;
}
.o-sidebar-layout__sidebar--flat {
margin: 0;
padding: 0;
border-top: 0;
}
}
@media all and (min-width: 56.25em) {
.o-sidebar-layout {
display: table;
width: 100%;
table-layout: fixed;
}
.o-sidebar-layout__content {
display: table-cell;
width: 73.9130434783%;
padding-right: 7.2463768116%;
vertical-align: top;
}
.o-sidebar-layout__sidebar {
display: table-cell;
width: 26.0869565217%;
vertical-align: top;
}
}
@media all and (max-width: 56.1875em) {
.o-sidebar-layout--inception .o-sidebar-layout__content {
display: flex;
flex-wrap: wrap;
}
.o-sidebar-layout--inception .o-sidebar-layout__sidebar {
order: -1;
width: 100%;
margin-top: 0;
margin-bottom: 1.875em;
}
}
@media all and (min-width: 56.25em) {
.o-sidebar-layout--inception {
display: block;
}
.o-sidebar-layout--inception .o-sidebar-layout__content {
display: block;
position: relative;
width: 73.9130434783%;
}
.o-sidebar-layout--inception .o-sidebar-layout__sidebar {
display: block;
position: absolute;
top: 0;
left: 100%;
width: 35.2941176471%;
}
}
@media (min-width: 56.25em) and (max-width: 93.4375em) {
.o-sidebar-layout--inception .o-sidebar-layout__content {
min-height: 29.4117647059vw;
}
}
@media (min-width: 93.5em) {
.o-sidebar-layout--inception .o-sidebar-layout__content {
min-height: 27.5em;
}
}
.o-video {
position: relative;
}
.o-video__wrapper {
position: relative;
background: #000;
}
.o-video__element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.o-video__element iframe,
.o-video__element object,
.o-video__element embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.o-video__close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
}
.o-video {
position: relative;
}
.o-video iframe {
display: none;
}
.o-video.is-active iframe {
display: block;
}
.o-video__figure {
background: #000;
}
.o-video__media {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-50%);
overflow: hidden;
}
.o-video__media iframe,
.o-video__media object,
.o-video__media embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-video-controls {
transition: opacity 500ms ease, visibility 500ms linear 0ms;
opacity: 0;
visibility: hidden;
pointer-events: none;
display: flex;
position: absolute;
bottom: -1px;
left: 0;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px 10px 7px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 51%, rgba(0, 0, 0, 0.98) 100%);
z-index: 100;
}
.c-video-controls.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media all and (max-width: 64.9375em) {
.c-video-controls {
display: none;
}
}
.c-video-controls__button--close {
transition: opacity 500ms ease, visibility 500ms linear 0ms;
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.c-video-controls__button--close.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media all and (max-width: 74.9375em) {
.c-video-controls__button--close {
display: none;
}
}
.ie-lt-11 .c-video-controls__button--close {
display: none;
}
.c-video-controls__button {
padding: 5px;
color: #ab965d;
}
.c-video-controls__button:hover,
.c-video-controls__button:focus,
.c-video-controls__button:active {
color: #c3aa86;
}
.c-video-controls__button.is-active {
color: #c3aa86;
}
.c-video-controls__button--volume {
margin-left: 16px;
}
.c-video-controls__button--fullscreen {
margin-left: 10px;
}
.c-video-controls__track-bar {
display: flex;
position: relative;
align-items: center;
width: calc(100% - 151px);
height: 40px;
margin-left: 5px;
cursor: pointer;
overflow: hidden;
}
.c-video-controls__track {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 3px;
transform: translateY(-50%);
background: rgba(166, 25, 46, 0.4);
cursor: pointer;
}
.c-video-controls__buffer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
transform: translateX(-100%);
background: #a6192e;
cursor: pointer;
}
.c-video-controls__scrub {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 12px);
height: 3px;
transform: translateX(-100%);
background: #ab965d;
cursor: pointer;
}
.c-video-controls__scrub::before {
position: absolute;
top: 0;
right: -6px;
width: 40px;
height: 40px;
transform: translate(50%, -50%);
border-radius: 50%;
content: "";
}
.c-video-controls__scrub::after {
position: absolute;
top: -5px;
right: -12px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ab965d;
content: "";
}
.c-video-controls__scrub:hover::after,
.c-video-controls__scrub:focus::after,
.c-video-controls__scrub:active::after {
background: #c3aa86;
}
.c-video-controls__scrub.is-active::after {
background: #c3aa86;
}
.c-icon--pause {
display: none !important;
}
.c-icon--play {
display: inline-block !important;
}
.is-playing .c-icon--pause {
display: inline-block !important;
}
.is-playing .c-icon--play {
display: none !important;
}
.c-icon--muted {
display: none !important;
}
.c-icon--unmuted {
display: inline-block !important;
}
.is-muted .c-icon--muted {
display: inline-block !important;
}
.is-muted .c-icon--unmuted {
display: none !important;
}
.c-icon--fullscreen {
display: inline-block !important;
}
.c-icon--fullscreen-exit {
display: none !important;
}
.is-fullscreen .c-icon--fullscreen {
display: none !important;
}
.is-fullscreen .c-icon--fullscreen-exit {
display: inline-block !important;
}
.ios .c-video-controls,
.ios .c-video-controls__button--close {
display: none;
}
.o-video__play-button--center {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.o-video--overlay .o-video__figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
}
.o-video--overlay .o-video__media {
z-index: 100;
}
.o-video--overlay .o-video__play-button,
.o-video--overlay .o-video__figure {
transition: opacity 300ms ease;
opacity: 0;
}
.o-video--overlay .o-video__play-button {
transition: opacity 300ms ease, color 300ms ease;
}
.o-video--overlay.is-ready .o-video__play-button {
opacity: 1;
z-index: 100;
}
.o-video--overlay.is-loading .o-video__media {
transition: none;
opacity: 0;
}
.o-video--overlay:not(.is-loading) .o-video__media {
transition: opacity 300ms ease;
opacity: 1;
}
.o-video--overlay:not(.is-active) .o-video__controls {
visibility: hidden;
}
.o-video--overlay.is-active .o-video__play-button {
opacity: 1;
z-index: 0;
}
.o-video--overlay.is-active .o-video__figure {
opacity: 1;
}
@media all and (min-width: 48.0625em) {
.o-video--condensed-hover .c-hero__content {
z-index: 50;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.o-video--condensed-hover .c-hero__content .c-hero__header,
.o-video--condensed-hover .c-hero__content .c-button--play {
width: 50%;
margin-left: auto;
margin-right: 0;
}
.o-video--condensed-hover .c-hero__content .c-button--play span {
max-width: 80px;
}
.o-video--condensed-hover.is-active .c-hero__content {
z-index: 10;
}
.o-video--condensed-hover .c-button--play.is-active {
color: #8a7449 !important;
}
.o-video--condensed-hover .c-button--play.is-active::after {
color: #ab965d !important;
transform: translate(-50%, -50%) scale(1) !important;
}
.o-video--condensed-hover .c-button--play.is-active:hover::after {
color: #8a7449 !important;
transform: translate(-50%, -50%) scale(1.175);
}
}
@media all and (max-width: 61.1875em) {
.o-video--condensed-hover .c-hero__header {
font-size: 12px;
}
}
.o-video--overlay.is-active .o-video__play-button {
color: transparent;
}
.o-video--overlay.is-active .o-video__play-button::before {
position: absolute;
top: 50%;
left: 50%;
width: 4.4444444444em;
height: 4.4444444444em;
transform: translate(-50%, -50%) scale(1);
border-radius: 50%;
background-color: #8a7449;
content: "";
-webkit-animation: pulse-scale-center 1.5s infinite ease-in-out;
animation: pulse-scale-center 1.5s infinite ease-in-out;
}
.o-video--overlay.is-active .o-video__play-button:hover::before,
.o-video--overlay.is-active .o-video__play-button:focus::before,
.o-video--overlay.is-active .o-video__play-button:active::before,
.o-video--overlay.is-active .o-video__play-button.is-active::before {
width: 5.2222222222em;
height: 5.2222222222em;
}
@-webkit-keyframes pulse-scale-center {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
@keyframes pulse-scale-center {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
.o-video__backdrop {
position: fixed;
top: 0;
right: 0;
bottom: -20vh;
left: 0;
transition: opacity 300ms ease, visibility 300ms linear 0s;
background: #000;
opacity: 0;
visibility: hidden;
z-index: 10;
}
body.has-video-backdrop .o-video__backdrop {
opacity: 0.5;
visibility: visible;
}
body.is-fullscreen .c-header,
body.is-fullscreen .c-footer {
z-index: -1 !important;
}
body.is-fullscreen [class*=js-fade] {
-webkit-animation: none !important;
animation: none !important;
}
video[data-lazyload] {
transition: opacity 300ms ease, visibility 300ms linear 0s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
video[data-lazyload].has-loaded {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/**
* Wrap overlapping elements to avoid extra horizontal space in Safari—the
* only browser that doesn't correctly hide `overflow-x` on the `body`.
*/
._fix-safari-overflow {
overflow: hidden;
-webkit-overflow-scrolling: auto;
}
/**
* Wrap inline SVGs with an `object` to fix Safari's broken height calculations.
* http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari
*/
._fix-safari-svg-height {
display: block;
position: relative;
width: 100%;
height: 0;
padding: 0 0 100%;
}
._fix-safari-svg-height__svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.o-zorro-svg {
position: relative;
width: 100%;
height: 0;
margin: -2px 0;
padding: 0 0 100%;
overflow: visible;
z-index: 1;
}
.o-zorro-svg__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding: 0 0 100%;
pointer-events: none;
}
.o-zorro-svg__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/**
* Full-width overlay backgrounds.
* @param {Number} $img-width
* @param {Number} $img-height
* @param {Number} $offset
* @param {String} $overlay-direction
*/
.c-browser-upgrade {
margin: 0 auto;
padding: 1.25em 0;
background: #211f1d;
color: #cdc9c3;
text-align: center;
}
@media all and (min-width: 48.0625em) {
.js-fade-enabled .js-fade > * {
opacity: 0;
}
.js-fade-enabled .js-fade__child {
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.js-fade-enabled .already-visible,
.js-fade-enabled .come-in {
opacity: 0;
-webkit-animation: come-in 1000ms ease forwards;
animation: come-in 1000ms ease forwards;
}
.js-fade-enabled .js-fadein--delay .already-visible,
.js-fade-enabled .js-fadein--delay .come-in {
opacity: 0;
-webkit-animation: come-in 1000ms ease forwards;
animation: come-in 1000ms ease forwards;
}
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/1 {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
@media all and (min-width: 22.5em) {
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/2\@360:nth-child(2n+1) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/2\@360:nth-child(2n+2) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
}
@media all and (min-width: 38.75em) {
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/2\@620:nth-child(2n+1) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/2\@620:nth-child(2n+2) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
}
@media all and (min-width: 48.0625em) {
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/3\@md:nth-child(3n+1) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/3\@md:nth-child(3n+2) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/3\@md:nth-child(3n+3) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
}
@media all and (min-width: 54.375em) {
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/3\@870:nth-child(3n+1) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/3\@870:nth-child(3n+2) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/3\@870:nth-child(3n+3) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
}
@media all and (min-width: 56.25em) {
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/1\@900 {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
}
@media all and (min-width: 72.5em) {
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/4\@1160:nth-child(4n+1) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/4\@1160:nth-child(4n+2) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/4\@1160:nth-child(4n+3) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.js-fade-enabled .c-product-grid .js-fade__child.u-width-1\/4\@1160:nth-child(4n+4) {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
}
.js-fade-enabled .js-fade__child--1 {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.js-fade-enabled .js-fade__child--2 {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.js-fade-enabled .js-fade__child--3 {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.js-fade-enabled .js-fade__child--4 {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.js-fade-enabled .js-fade__child--5 {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.js-fade-enabled .js-fade__child--6 {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.js-fade-enabled .js-fade__child--7 {
-webkit-animation-delay: 700ms;
animation-delay: 700ms;
}
.js-fade-enabled .js-fade__child--8 {
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
.js-fade-enabled .js-fade__child--9 {
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
.js-fade-enabled .js-fade__child--10 {
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
.heartbeat {
-webkit-animation: heart 1.5s ease-in-out infinite both;
animation: heart 1.5s ease-in-out infinite both;
}
@-webkit-keyframes heart {
from {
transform: scale(1) translate(0px, 0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
transform: scale(0.97) translate(0px, 0px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
transform: scale(0.98) translate(0px, 0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
transform: scale(0.96) translate(0px, 0px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
transform: scale(1) translate(0px, 0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heart {
from {
transform: scale(1) translate(0px, 0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
transform: scale(0.97) translate(0px, 0px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
transform: scale(0.98) translate(0px, 0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
transform: scale(0.96) translate(0px, 0px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
transform: scale(1) translate(0px, 0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.vibrate-1 {
-webkit-animation: vibrate-1 0.4s linear infinite both;
animation: vibrate-1 0.4s linear infinite both;
}
.vibrate-1.backwards {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.vibrate-1.backwards-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes vibrate-1 {
0% {
transform: translate(0);
}
20% {
transform: translate(-0.25px, 0.25px);
}
40% {
transform: translate(-0.25px, -0.25px);
}
60% {
transform: translate(0.25px, 0.25px);
}
80% {
transform: translate(0.25px, -0.25px);
}
100% {
transform: translate(0);
}
}
@keyframes vibrate-1 {
0% {
transform: translate(0);
}
20% {
transform: translate(-0.25px, 0.25px);
}
40% {
transform: translate(-0.25px, -0.25px);
}
60% {
transform: translate(0.25px, 0.25px);
}
80% {
transform: translate(0.25px, -0.25px);
}
100% {
transform: translate(0);
}
}
.skew {
-webkit-animation: skew 1s infinite;
animation: skew 1s infinite;
transform: skew(1deg);
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes skew {
0% {
transform: skewX(1deg);
}
100% {
transform: skewX(-1deg);
}
}
@keyframes skew {
0% {
transform: skewX(1deg);
}
100% {
transform: skewX(-1deg);
}
}
.shimmer {
-webkit-animation: shimmer 1s linear alternate infinite;
animation: shimmer 1s linear alternate infinite;
transform-origin: 50%;
}
.shimmer.two {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.shimmer.three {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.shimmer.four {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.shimmer.five {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.shimmer.six {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.shimmer.seven {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.shimmer.eight {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
@-webkit-keyframes shimmer {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes shimmer {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.slow-rotate {
-webkit-animation: slow-rotate 2s linear alternate infinite;
animation: slow-rotate 2s linear alternate infinite;
transform-origin: 50%;
}
@-webkit-keyframes slow-rotate {
0% {
transform: rotate(-2deg);
}
100% {
transform: rotate(2deg);
}
}
@keyframes slow-rotate {
0% {
transform: rotate(-2deg);
}
100% {
transform: rotate(2deg);
}
}
.nitrate {
animation: nitrate 5s linear alternate-reverse infinite;
transform-origin: 50%;
}
@-webkit-keyframes nitrate {
0% {
transform: rotate(-15deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes nitrate {
0% {
transform: rotate(-15deg);
}
100% {
transform: rotate(10deg);
}
}
.drawn {
-webkit-animation: drawing 20s linear infinite;
animation: drawing 20s linear infinite;
stroke-dasharray: 100;
}
.drawn.one {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.drawn.two {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.drawn.three {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.drawn.faster {
-webkit-animation-timing-function: 5s;
animation-timing-function: 5s;
}
@-webkit-keyframes drawing {
to {
stroke-dashoffset: 1000;
}
}
@keyframes drawing {
to {
stroke-dashoffset: 1000;
}
}
.c-counter {
width: 220px;
height: 60px;
background: url("/img/october-taste-of-giving/count-bg.png") no-repeat center center;
font-size: 36px;
line-height: 58px;
text-align: right;
letter-spacing: 19px;
color: #e371ac;
margin: 5px auto;
font-style: italic;
}
.c-icon {
display: inline-block;
max-width: 100%;
background-position: center;
background-size: contain;
vertical-align: sub;
}
.c-icon svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
stroke: currentColor;
pointer-events: none;
overflow: visible;
}
.c-icon.red svg {
fill: #A6192E;
}
.c-icon.gold svg {
fill: #ab965d;
}
.c-icon.white svg {
fill: #fff;
}
.c-icon.salmon svg {
fill: #ef896c;
}
.c-icon--diamond {
width: 30px;
height: 7.45px;
}
.c-icon--non-gmo-logo {
width: 87px;
height: 64px;
}
.c-icon--usda-certified-organic-logo {
width: 87px;
height: 64px;
}
.c-icon--social {
width: 25px;
height: 25px;
}
.c-icon--social-sm {
width: 20px;
height: 20px;
}
.c-icon--social-xs {
width: 15px;
height: 15px;
}
.c-icon--share {
width: 14px;
height: 19px;
margin-right: 3px;
}
.c-icon--download {
width: 20px;
height: 14px;
}
.c-icon--health {
width: 31.5px;
height: 43.2px;
}
.c-icon--health-msg {
width: 60px;
height: 75px;
}
.c-icon--health-lg {
width: 60px;
height: 97px;
}
.c-icon--health-md {
width: 31.5px;
height: 43.2px;
}
.c-icon--health-sm {
width: 17.5px;
height: 24px;
}
.c-icon--health-no-hormones {
width: 72.021879342px;
height: 43.2px;
}
.c-icon--health-no-hormones.c-icon--health-sm {
width: 40.01215519px;
height: 24px;
}
.c-icon--health-feingold {
width: 64px;
height: 52px;
}
.c-icon--health-kosher svg,
.c-icon--health-kosher-dairy svg {
stroke: none;
}
.c-icon--health-usda-certified-organic {
height: 36px;
}
.c-icon--play {
width: 1.875em;
height: 1.25em;
}
.c-icon--play svg {
fill: none;
stroke-width: 2;
}
.c-icon--play.c-icon--video-controls svg {
fill: currentColor;
}
.c-icon--logo-safeway {
position: relative;
top: -1px;
width: 110px;
height: 36px;
vertical-align: middle;
}
.c-icon--recipe {
width: 30px;
height: 24px;
}
.c-icon--arrow,
.c-icon--arrow-reverse {
width: 20px;
height: 13px;
}
.c-icon--arrow-reverse {
transform: rotate(180deg);
}
.c-icon--arrow-bullet {
width: 4.5px;
height: 9px;
}
.c-icon--arrow-down {
width: 13px;
height: 1em;
}
.c-icon--quote {
width: 21px;
height: 16px;
color: #ab965d;
}
.c-icon--video-controls {
width: 30px;
height: 30px;
}
.c-icon--search {
width: 14px;
height: 14px;
margin-left: 0.5em;
}
.c-icon--down-arrow-head {
width: 21px;
height: 10px;
}
.c-icon--info,
.c-icon--close {
width: 16px;
height: 16px;
}
.c-icon--info.small,
.c-icon--close.small {
width: 12px;
height: 12px;
vertical-align: middle;
}
.c-icon--info.xsmall,
.c-icon--close.xsmall {
width: 8px;
height: 8px;
vertical-align: middle;
}
.c-icon--white {
color: #fff;
}
.c-icon--more {
width: 16px;
height: 16px;
transform: rotate(45deg);
vertical-align: middle;
}
.c-icon--more svg {
stroke: none;
}
.c-icon--more.small {
width: 12px;
height: 12px;
}
.c-icon--boar {
width: 109px;
height: 74px;
}
.c-icon--circle-count {
width: 150px;
height: 150px;
}
.c-icon--stamp {
width: 68px;
height: 68px;
color: #ab965d;
}
@media all and (max-width: 48em) {
.c-icon--stamp {
width: 51px;
height: 51px;
}
}
.c-stamp-icon {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin: 0 auto;
}
.c-stamp-icon > .c-icon {
margin: 0 -1px -2px 0;
}
.c-stamp-icon::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 200ms ease;
background: center/67px 67px no-repeat;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.382 67.38"%3E %3Cg fill="%23ab965d" stroke="none"%3E %3Cpath d="M67.382 33.689a7.556 7.556 0 0 0-1.683-4.2 7.5 7.5 0 0 0 .564-4.429 7.7 7.7 0 0 0-2.787-3.669 7.691 7.691 0 0 0-.6-4.552 7.541 7.541 0 0 0-3.546-2.762 7.537 7.537 0 0 0-1.738-4.145 7.689 7.689 0 0 0-4.236-1.775 7.7 7.7 0 0 0-2.811-3.65 7.517 7.517 0 0 0-4.427-.607 7.559 7.559 0 0 0-3.612-2.723 7.644 7.644 0 0 0-4.558.549A7.647 7.647 0 0 0 33.692 0a7.557 7.557 0 0 0-4.2 1.682 7.485 7.485 0 0 0-4.428-.564A7.7 7.7 0 0 0 21.4 3.9a7.692 7.692 0 0 0-4.552.6 7.537 7.537 0 0 0-2.761 3.546 7.54 7.54 0 0 0-4.151 1.747 7.686 7.686 0 0 0-1.775 4.235 7.7 7.7 0 0 0-3.65 2.812 7.511 7.511 0 0 0-.611 4.423 7.559 7.559 0 0 0-2.722 3.612 7.641 7.641 0 0 0 .548 4.558A7.649 7.649 0 0 0 0 33.689a7.559 7.559 0 0 0 1.682 4.2 7.5 7.5 0 0 0-.564 4.428 7.694 7.694 0 0 0 2.787 3.669 7.686 7.686 0 0 0 .6 4.552A7.541 7.541 0 0 0 8.057 53.3 7.544 7.544 0 0 0 9.8 57.445a7.694 7.694 0 0 0 4.236 1.774 7.706 7.706 0 0 0 2.812 3.65 7.519 7.519 0 0 0 4.423.613 7.559 7.559 0 0 0 3.612 2.723 7.655 7.655 0 0 0 4.558-.549 7.646 7.646 0 0 0 4.256 1.723 7.558 7.558 0 0 0 4.2-1.684 9.791 9.791 0 0 0 3.236.716 4.629 4.629 0 0 0 1.191-.15 7.7 7.7 0 0 0 3.669-2.787 7.689 7.689 0 0 0 4.552-.6 7.538 7.538 0 0 0 2.755-3.55 7.54 7.54 0 0 0 4.146-1.738 7.685 7.685 0 0 0 1.775-4.235 7.7 7.7 0 0 0 3.65-2.812 7.511 7.511 0 0 0 .614-4.423 7.559 7.559 0 0 0 2.723-3.616 7.649 7.649 0 0 0-.549-4.558 7.651 7.651 0 0 0 1.723-4.253zm-2.358 2.492a7.586 7.586 0 0 1-.514-2.4 8.012 8.012 0 0 1 .547-2.522 4.842 4.842 0 0 1 .825 2.433 4.917 4.917 0 0 1-.858 2.489zm-3.014 5.1a12.123 12.123 0 0 0-.088 4.166v.021l-.076.062a11.676 11.676 0 0 0-2.81 2.9 11.8 11.8 0 0 0-1.156 3.894 11.7 11.7 0 0 0-3.466 2.1 11.907 11.907 0 0 0-2.125 3.524l-.018.039-.044.007a11.915 11.915 0 0 0-3.958 1.129 11.716 11.716 0 0 0-2.93 2.8 11.824 11.824 0 0 0-4.061.1 11.664 11.664 0 0 0-3.53 1.955l-.08.057-.019-.007a12.118 12.118 0 0 0-4.045-1.006h-.013a11.732 11.732 0 0 0-3.9.963l-.032.012-.026-.019a11.666 11.666 0 0 0-3.53-1.955 7.549 7.549 0 0 0-1.95-.224c-.734 0-1.482.068-2.217.136h-.019l-.063-.076a11.657 11.657 0 0 0-2.9-2.81 11.771 11.771 0 0 0-3.893-1.156 11.722 11.722 0 0 0-2.1-3.466 11.916 11.916 0 0 0-3.525-2.126l-.036-.03-.007-.043a11.9 11.9 0 0 0-1.129-3.957 11.715 11.715 0 0 0-2.8-2.932 11.789 11.789 0 0 0-.1-4.06 11.673 11.673 0 0 0-1.945-3.529l-.058-.082.007-.019a12.112 12.112 0 0 0 1.005-4.043 11.659 11.659 0 0 0-.962-3.918l-.011-.032.02-.028A11.673 11.673 0 0 0 5.373 26.1a12.123 12.123 0 0 0 .088-4.166v-.02l.076-.063a11.675 11.675 0 0 0 2.81-2.9 11.8 11.8 0 0 0 1.153-3.89 11.7 11.7 0 0 0 3.466-2.1 11.907 11.907 0 0 0 2.125-3.524l.019-.037.044-.007a11.913 11.913 0 0 0 3.957-1.129 11.707 11.707 0 0 0 2.93-2.8 11.777 11.777 0 0 0 4.061-.1 11.679 11.679 0 0 0 3.529-1.954l.081-.058.018.007a12.112 12.112 0 0 0 4.044 1.006h.019a11.735 11.735 0 0 0 3.9-.963l.03-.011.027.019a11.679 11.679 0 0 0 3.529 1.954 12.138 12.138 0 0 0 4.167.088h.02l.064.081a11.657 11.657 0 0 0 2.9 2.81A11.791 11.791 0 0 0 52.319 9.5a11.726 11.726 0 0 0 2.1 3.466 11.892 11.892 0 0 0 3.524 2.124l.041.019.007.044a11.9 11.9 0 0 0 1.129 3.957 11.715 11.715 0 0 0 2.8 2.932 11.789 11.789 0 0 0 .1 4.06 11.658 11.658 0 0 0 1.955 3.53l.057.081-.007.019a12.112 12.112 0 0 0-1.005 4.043 11.67 11.67 0 0 0 .962 3.919l.011.031-.019.027a11.673 11.673 0 0 0-1.964 3.527zm2.8-15.832a4.746 4.746 0 0 1-.189 2.513 7.757 7.757 0 0 1-1.166-2.247 7.739 7.739 0 0 1-.138-2.449 4.911 4.911 0 0 1 1.497 2.181zm-3.241-7.854a4.879 4.879 0 0 1 .473 2.589 7.627 7.627 0 0 1-1.628-1.819 7.885 7.885 0 0 1-.773-2.441 4.8 4.8 0 0 1 1.932 1.669zm-3.942-4.3a7.885 7.885 0 0 1-2.149-1.395 7.633 7.633 0 0 1-1.33-2.048 4.884 4.884 0 0 1 2.376 1.135 4.8 4.8 0 0 1 1.108 2.301zM49.79 5.809a4.909 4.909 0 0 1 1.717 2.011 7.731 7.731 0 0 1-2.328-.773 7.762 7.762 0 0 1-1.864-1.714 4.73 4.73 0 0 1 2.475.476zM42.113 2.62a4.849 4.849 0 0 1 2.133 1.433 7.981 7.981 0 0 1-2.578-.131A7.575 7.575 0 0 1 39.485 2.8a4.94 4.94 0 0 1 2.628-.18zm-5.931-.263a7.626 7.626 0 0 1-2.389.515h-.013a8.01 8.01 0 0 1-2.522-.547 4.845 4.845 0 0 1 2.434-.825 4.917 4.917 0 0 1 2.491.858zm-10.733.21a4.741 4.741 0 0 1 2.512.188 7.742 7.742 0 0 1-2.247 1.166 7.739 7.739 0 0 1-2.449.137 4.911 4.911 0 0 1 2.185-1.491zm-7.856 3.24a4.88 4.88 0 0 1 2.59-.474 7.628 7.628 0 0 1-1.82 1.629 7.885 7.885 0 0 1-2.44.772 4.8 4.8 0 0 1 1.671-1.926zm-6.6 5.05a4.8 4.8 0 0 1 2.3-1.108 7.877 7.877 0 0 1-1.387 2.151 7.63 7.63 0 0 1-2.047 1.33 4.882 4.882 0 0 1 1.134-2.373zm-3.171 5.016a7.744 7.744 0 0 1-.774 2.327 7.746 7.746 0 0 1-1.713 1.864 4.74 4.74 0 0 1 .476-2.474 4.91 4.91 0 0 1 2.011-1.717zm-5.2 9.394a4.846 4.846 0 0 1 1.433-2.133 8.017 8.017 0 0 1-.132 2.579A7.6 7.6 0 0 1 2.8 27.9a4.917 4.917 0 0 1-.177-2.632zM2.359 31.2a7.584 7.584 0 0 1 .514 2.4 8.011 8.011 0 0 1-.548 2.523 4.844 4.844 0 0 1-.825-2.434 4.916 4.916 0 0 1 .859-2.489zm.21 10.734a4.747 4.747 0 0 1 .189-2.512 7.761 7.761 0 0 1 1.166 2.247 7.739 7.739 0 0 1 .138 2.45 4.912 4.912 0 0 1-1.493-2.187zm3.24 7.854a4.878 4.878 0 0 1-.472-2.588 7.629 7.629 0 0 1 1.628 1.819 7.883 7.883 0 0 1 .772 2.44 4.8 4.8 0 0 1-1.928-1.673zm3.942 4.3a7.88 7.88 0 0 1 2.154 1.385 7.62 7.62 0 0 1 1.33 2.047 4.886 4.886 0 0 1-2.376-1.134 4.8 4.8 0 0 1-1.107-2.295zm7.842 7.48a4.909 4.909 0 0 1-1.718-2.012 7.732 7.732 0 0 1 2.328.773 7.765 7.765 0 0 1 1.864 1.714 4.737 4.737 0 0 1-2.473-.472zm7.676 3.188a4.848 4.848 0 0 1-2.133-1.433 7.979 7.979 0 0 1 2.578.131 7.581 7.581 0 0 1 2.186 1.128 4.951 4.951 0 0 1-2.63.177zm5.93.263a7.632 7.632 0 0 1 2.39-.515h.011a8.014 8.014 0 0 1 2.523.548 4.845 4.845 0 0 1-2.435.825 4.917 4.917 0 0 1-2.488-.855zm10.733-.209a4.732 4.732 0 0 1-2.513-.189 7.745 7.745 0 0 1 2.248-1.167 7.705 7.705 0 0 1 2.45-.138 4.911 4.911 0 0 1-2.184 1.497zm7.856-3.241a4.879 4.879 0 0 1-2.59.474 7.629 7.629 0 0 1 1.819-1.629 7.886 7.886 0 0 1 2.441-.772 4.8 4.8 0 0 1-1.669 1.929zm6.6-5.05a4.8 4.8 0 0 1-2.3 1.108 7.875 7.875 0 0 1 1.385-2.154 7.63 7.63 0 0 1 2.048-1.33 4.881 4.881 0 0 1-1.131 2.378zm3.171-5.016a7.744 7.744 0 0 1 .774-2.329 7.751 7.751 0 0 1 1.713-1.864 4.741 4.741 0 0 1-.476 2.474 4.91 4.91 0 0 1-2.009 1.722zm5.2-9.394a4.846 4.846 0 0 1-1.433 2.134 8.016 8.016 0 0 1 .132-2.579 7.6 7.6 0 0 1 1.125-2.183 4.918 4.918 0 0 1 .177 2.63z" /%3E %3Cpath d="M33.692 61.947a28.257 28.257 0 1 1 28.257-28.258 28.29 28.29 0 0 1-28.257 28.258zm0-55.015a26.757 26.757 0 1 0 26.757 26.757A26.787 26.787 0 0 0 33.692 6.933z" /%3E %3C/g%3E %3C/svg%3E');
content: "";
}
a:hover .c-stamp-icon::before,
a:focus .c-stamp-icon::before,
a:active .c-stamp-icon::before {
transform: scale(1.05);
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.382 67.38"%3E %3Cg fill="%23c3aa86" stroke="none"%3E %3Cpath d="M67.382 33.689a7.556 7.556 0 0 0-1.683-4.2 7.5 7.5 0 0 0 .564-4.429 7.7 7.7 0 0 0-2.787-3.669 7.691 7.691 0 0 0-.6-4.552 7.541 7.541 0 0 0-3.546-2.762 7.537 7.537 0 0 0-1.738-4.145 7.689 7.689 0 0 0-4.236-1.775 7.7 7.7 0 0 0-2.811-3.65 7.517 7.517 0 0 0-4.427-.607 7.559 7.559 0 0 0-3.612-2.723 7.644 7.644 0 0 0-4.558.549A7.647 7.647 0 0 0 33.692 0a7.557 7.557 0 0 0-4.2 1.682 7.485 7.485 0 0 0-4.428-.564A7.7 7.7 0 0 0 21.4 3.9a7.692 7.692 0 0 0-4.552.6 7.537 7.537 0 0 0-2.761 3.546 7.54 7.54 0 0 0-4.151 1.747 7.686 7.686 0 0 0-1.775 4.235 7.7 7.7 0 0 0-3.65 2.812 7.511 7.511 0 0 0-.611 4.423 7.559 7.559 0 0 0-2.722 3.612 7.641 7.641 0 0 0 .548 4.558A7.649 7.649 0 0 0 0 33.689a7.559 7.559 0 0 0 1.682 4.2 7.5 7.5 0 0 0-.564 4.428 7.694 7.694 0 0 0 2.787 3.669 7.686 7.686 0 0 0 .6 4.552A7.541 7.541 0 0 0 8.057 53.3 7.544 7.544 0 0 0 9.8 57.445a7.694 7.694 0 0 0 4.236 1.774 7.706 7.706 0 0 0 2.812 3.65 7.519 7.519 0 0 0 4.423.613 7.559 7.559 0 0 0 3.612 2.723 7.655 7.655 0 0 0 4.558-.549 7.646 7.646 0 0 0 4.256 1.723 7.558 7.558 0 0 0 4.2-1.684 9.791 9.791 0 0 0 3.236.716 4.629 4.629 0 0 0 1.191-.15 7.7 7.7 0 0 0 3.669-2.787 7.689 7.689 0 0 0 4.552-.6 7.538 7.538 0 0 0 2.755-3.55 7.54 7.54 0 0 0 4.146-1.738 7.685 7.685 0 0 0 1.775-4.235 7.7 7.7 0 0 0 3.65-2.812 7.511 7.511 0 0 0 .614-4.423 7.559 7.559 0 0 0 2.723-3.616 7.649 7.649 0 0 0-.549-4.558 7.651 7.651 0 0 0 1.723-4.253zm-2.358 2.492a7.586 7.586 0 0 1-.514-2.4 8.012 8.012 0 0 1 .547-2.522 4.842 4.842 0 0 1 .825 2.433 4.917 4.917 0 0 1-.858 2.489zm-3.014 5.1a12.123 12.123 0 0 0-.088 4.166v.021l-.076.062a11.676 11.676 0 0 0-2.81 2.9 11.8 11.8 0 0 0-1.156 3.894 11.7 11.7 0 0 0-3.466 2.1 11.907 11.907 0 0 0-2.125 3.524l-.018.039-.044.007a11.915 11.915 0 0 0-3.958 1.129 11.716 11.716 0 0 0-2.93 2.8 11.824 11.824 0 0 0-4.061.1 11.664 11.664 0 0 0-3.53 1.955l-.08.057-.019-.007a12.118 12.118 0 0 0-4.045-1.006h-.013a11.732 11.732 0 0 0-3.9.963l-.032.012-.026-.019a11.666 11.666 0 0 0-3.53-1.955 7.549 7.549 0 0 0-1.95-.224c-.734 0-1.482.068-2.217.136h-.019l-.063-.076a11.657 11.657 0 0 0-2.9-2.81 11.771 11.771 0 0 0-3.893-1.156 11.722 11.722 0 0 0-2.1-3.466 11.916 11.916 0 0 0-3.525-2.126l-.036-.03-.007-.043a11.9 11.9 0 0 0-1.129-3.957 11.715 11.715 0 0 0-2.8-2.932 11.789 11.789 0 0 0-.1-4.06 11.673 11.673 0 0 0-1.945-3.529l-.058-.082.007-.019a12.112 12.112 0 0 0 1.005-4.043 11.659 11.659 0 0 0-.962-3.918l-.011-.032.02-.028A11.673 11.673 0 0 0 5.373 26.1a12.123 12.123 0 0 0 .088-4.166v-.02l.076-.063a11.675 11.675 0 0 0 2.81-2.9 11.8 11.8 0 0 0 1.153-3.89 11.7 11.7 0 0 0 3.466-2.1 11.907 11.907 0 0 0 2.125-3.524l.019-.037.044-.007a11.913 11.913 0 0 0 3.957-1.129 11.707 11.707 0 0 0 2.93-2.8 11.777 11.777 0 0 0 4.061-.1 11.679 11.679 0 0 0 3.529-1.954l.081-.058.018.007a12.112 12.112 0 0 0 4.044 1.006h.019a11.735 11.735 0 0 0 3.9-.963l.03-.011.027.019a11.679 11.679 0 0 0 3.529 1.954 12.138 12.138 0 0 0 4.167.088h.02l.064.081a11.657 11.657 0 0 0 2.9 2.81A11.791 11.791 0 0 0 52.319 9.5a11.726 11.726 0 0 0 2.1 3.466 11.892 11.892 0 0 0 3.524 2.124l.041.019.007.044a11.9 11.9 0 0 0 1.129 3.957 11.715 11.715 0 0 0 2.8 2.932 11.789 11.789 0 0 0 .1 4.06 11.658 11.658 0 0 0 1.955 3.53l.057.081-.007.019a12.112 12.112 0 0 0-1.005 4.043 11.67 11.67 0 0 0 .962 3.919l.011.031-.019.027a11.673 11.673 0 0 0-1.964 3.527zm2.8-15.832a4.746 4.746 0 0 1-.189 2.513 7.757 7.757 0 0 1-1.166-2.247 7.739 7.739 0 0 1-.138-2.449 4.911 4.911 0 0 1 1.497 2.181zm-3.241-7.854a4.879 4.879 0 0 1 .473 2.589 7.627 7.627 0 0 1-1.628-1.819 7.885 7.885 0 0 1-.773-2.441 4.8 4.8 0 0 1 1.932 1.669zm-3.942-4.3a7.885 7.885 0 0 1-2.149-1.395 7.633 7.633 0 0 1-1.33-2.048 4.884 4.884 0 0 1 2.376 1.135 4.8 4.8 0 0 1 1.108 2.301zM49.79 5.809a4.909 4.909 0 0 1 1.717 2.011 7.731 7.731 0 0 1-2.328-.773 7.762 7.762 0 0 1-1.864-1.714 4.73 4.73 0 0 1 2.475.476zM42.113 2.62a4.849 4.849 0 0 1 2.133 1.433 7.981 7.981 0 0 1-2.578-.131A7.575 7.575 0 0 1 39.485 2.8a4.94 4.94 0 0 1 2.628-.18zm-5.931-.263a7.626 7.626 0 0 1-2.389.515h-.013a8.01 8.01 0 0 1-2.522-.547 4.845 4.845 0 0 1 2.434-.825 4.917 4.917 0 0 1 2.491.858zm-10.733.21a4.741 4.741 0 0 1 2.512.188 7.742 7.742 0 0 1-2.247 1.166 7.739 7.739 0 0 1-2.449.137 4.911 4.911 0 0 1 2.185-1.491zm-7.856 3.24a4.88 4.88 0 0 1 2.59-.474 7.628 7.628 0 0 1-1.82 1.629 7.885 7.885 0 0 1-2.44.772 4.8 4.8 0 0 1 1.671-1.926zm-6.6 5.05a4.8 4.8 0 0 1 2.3-1.108 7.877 7.877 0 0 1-1.387 2.151 7.63 7.63 0 0 1-2.047 1.33 4.882 4.882 0 0 1 1.134-2.373zm-3.171 5.016a7.744 7.744 0 0 1-.774 2.327 7.746 7.746 0 0 1-1.713 1.864 4.74 4.74 0 0 1 .476-2.474 4.91 4.91 0 0 1 2.011-1.717zm-5.2 9.394a4.846 4.846 0 0 1 1.433-2.133 8.017 8.017 0 0 1-.132 2.579A7.6 7.6 0 0 1 2.8 27.9a4.917 4.917 0 0 1-.177-2.632zM2.359 31.2a7.584 7.584 0 0 1 .514 2.4 8.011 8.011 0 0 1-.548 2.523 4.844 4.844 0 0 1-.825-2.434 4.916 4.916 0 0 1 .859-2.489zm.21 10.734a4.747 4.747 0 0 1 .189-2.512 7.761 7.761 0 0 1 1.166 2.247 7.739 7.739 0 0 1 .138 2.45 4.912 4.912 0 0 1-1.493-2.187zm3.24 7.854a4.878 4.878 0 0 1-.472-2.588 7.629 7.629 0 0 1 1.628 1.819 7.883 7.883 0 0 1 .772 2.44 4.8 4.8 0 0 1-1.928-1.673zm3.942 4.3a7.88 7.88 0 0 1 2.154 1.385 7.62 7.62 0 0 1 1.33 2.047 4.886 4.886 0 0 1-2.376-1.134 4.8 4.8 0 0 1-1.107-2.295zm7.842 7.48a4.909 4.909 0 0 1-1.718-2.012 7.732 7.732 0 0 1 2.328.773 7.765 7.765 0 0 1 1.864 1.714 4.737 4.737 0 0 1-2.473-.472zm7.676 3.188a4.848 4.848 0 0 1-2.133-1.433 7.979 7.979 0 0 1 2.578.131 7.581 7.581 0 0 1 2.186 1.128 4.951 4.951 0 0 1-2.63.177zm5.93.263a7.632 7.632 0 0 1 2.39-.515h.011a8.014 8.014 0 0 1 2.523.548 4.845 4.845 0 0 1-2.435.825 4.917 4.917 0 0 1-2.488-.855zm10.733-.209a4.732 4.732 0 0 1-2.513-.189 7.745 7.745 0 0 1 2.248-1.167 7.705 7.705 0 0 1 2.45-.138 4.911 4.911 0 0 1-2.184 1.497zm7.856-3.241a4.879 4.879 0 0 1-2.59.474 7.629 7.629 0 0 1 1.819-1.629 7.886 7.886 0 0 1 2.441-.772 4.8 4.8 0 0 1-1.669 1.929zm6.6-5.05a4.8 4.8 0 0 1-2.3 1.108 7.875 7.875 0 0 1 1.385-2.154 7.63 7.63 0 0 1 2.048-1.33 4.881 4.881 0 0 1-1.131 2.378zm3.171-5.016a7.744 7.744 0 0 1 .774-2.329 7.751 7.751 0 0 1 1.713-1.864 4.741 4.741 0 0 1-.476 2.474 4.91 4.91 0 0 1-2.009 1.722zm5.2-9.394a4.846 4.846 0 0 1-1.433 2.134 8.016 8.016 0 0 1 .132-2.579 7.6 7.6 0 0 1 1.125-2.183 4.918 4.918 0 0 1 .177 2.63z" /%3E %3Cpath d="M33.692 61.947a28.257 28.257 0 1 1 28.257-28.258 28.29 28.29 0 0 1-28.257 28.258zm0-55.015a26.757 26.757 0 1 0 26.757 26.757A26.787 26.787 0 0 0 33.692 6.933z" /%3E %3C/g%3E %3C/svg%3E');
}
.c-form__fieldset {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.c-form__field {
display: block;
flex: 1 1 auto;
}
.c-form__submit {
flex: 0 0 auto;
}
.c-form__input {
display: block;
width: 100%;
padding: 0.3125em 0.1875em;
background: transparent;
color: #a7a49e;
}
.c-form__input::-moz-placeholder {
color: #827a70;
font-style: italic;
opacity: 1;
}
.c-form__input:-ms-input-placeholder {
color: #827a70;
font-style: italic;
}
.c-form__input::-webkit-input-placeholder {
color: #827a70;
font-style: italic;
}
.c-form__textarea {
padding: 0.3125em 0.1875em;
border: 0;
border-bottom: 1px solid #ab965d;
resize: none;
}
.c-form__textarea:focus {
outline: none;
}
.c-form__submit {
display: flex;
align-items: center;
padding: 0.3125em 0.0625em;
padding-left: 0.75em;
color: #8a7449;
}
.c-form__submit:hover,
.c-form__submit:focus,
.c-form__submit:active {
color: #c3aa86;
}
.c-form__error {
display: none;
}
.c-form__input.is-invalid + .c-form__error,
.c-form.has-error > .c-form__error,
.c-checkbox__input.is-invalid ~ .c-checkbox__copy .c-form__error,
.c-radio__input.is-invalid ~ .c-radio__copy .c-form__error,
.c-radio__group.is-invalid .c-form__error {
display: block;
}
.c-form__error {
margin-top: 0.5em;
color: #a9271b;
font-size: 80%;
}
.c-form--vertical {
flex-wrap: wrap;
}
.c-form {
transition: max-height 300ms ease-in-out, opacity 300ms ease;
opacity: 1;
}
.c-form__success-message {
max-height: 0;
transition: max-height 400ms ease-in-out, opacity 400ms ease;
opacity: 0;
overflow: hidden;
}
[class*=js-form] button[type=submit][disabled] {
cursor: wait;
opacity: 0.5;
}
/**
* List object.
* @param {String} $at-breakpoint
*
* ## Sass
*
* ```scss
* @include o-list();
* @include o-list('sm');
* ```
*
* ## Markup
*
* ```html
*
* Label
*
* ```
*/
.c-checkbox {
display: flex;
flex-wrap: nowrap;
align-items: center;
cursor: pointer;
}
.c-checkbox:hover .c-checkbox__box,
.c-checkbox:focus .c-checkbox__box,
.c-checkbox:active .c-checkbox__box {
border-color: #ab965d;
}
.c-checkbox__input {
display: none;
}
.c-checkbox__input:checked + .c-checkbox__box {
border-color: #ab965d;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='%23ab965d' d='M27.1 60.1l-22-22 8.6-8.5L27.1 43l31.2-31.1 8.6 8.5z'/%3E%3C/svg%3E");
}
.c-checkbox__box {
display: inline-block;
flex: 0 0 auto;
width: 1rem;
height: 1rem;
border: 1px solid #a7a49e;
border-radius: 0;
background: center/10px 10px no-repeat;
vertical-align: middle;
}
.c-checkbox__copy {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-checkbox.is-disabled {
cursor: default;
}
.c-checkbox.is-disabled:hover .c-checkbox__box,
.c-checkbox.is-disabled:focus .c-checkbox__box,
.c-checkbox.is-disabled:active .c-checkbox__box {
border-color: #a7a49e;
}
.c-checkbox.is-disabled .c-checkbox__input {
display: none;
}
.c-checkbox.is-disabled .c-checkbox__input:checked + .c-checkbox__box {
border-color: #a7a49e;
background-image: none;
}
.c-checkbox.is-disabled .c-checkbox__copy {
opacity: 0.5;
}
.c-checkbox--block .c-checkbox__box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: box-shadow 0.3s ease;
border: 1px solid transparent;
background: #fff;
}
.c-checkbox--block .c-checkbox__input:checked + .c-checkbox__box {
border-color: transparent;
background: #7bbe47;
}
.c-checkbox--block .c-checkbox__input:checked + .c-checkbox__box .c-sub {
color: #fff;
}
.c-checkbox--block .c-checkbox__input:checked + .c-checkbox__box .c-icon {
color: #fff;
}
.c-checkbox--block:hover .c-checkbox__input:not(:checked) + .c-checkbox__box,
.c-checkbox--block:focus .c-checkbox__input:not(:checked) + .c-checkbox__box,
.c-checkbox--block:active .c-checkbox__input:not(:checked) + .c-checkbox__box {
border-color: #fff;
}
/**
* List object.
* @param {String} $at-breakpoint
*
* ## Sass
*
* ```scss
* @include o-list();
* @include o-list('sm');
* ```
*
* ## Markup
*
* ```html
*
* Label
*
* ```
*/
.c-radio {
display: flex;
flex-wrap: nowrap;
align-items: center;
cursor: pointer;
}
.c-radio:hover .c-radio__box,
.c-radio:focus .c-radio__box,
.c-radio:active .c-radio__box {
border-color: #ab965d;
}
.c-radio__input {
display: none;
}
.c-radio__input:checked + .c-radio__box {
border-color: #ab965d;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='%23ab965d' d='M27.1 60.1l-22-22 8.6-8.5L27.1 43l31.2-31.1 8.6 8.5z'/%3E%3C/svg%3E");
}
.c-radio__box {
display: inline-block;
flex: 0 0 auto;
width: 1rem;
height: 1rem;
border: 1px solid #a7a49e;
border-radius: 0;
background: center/10px 10px no-repeat;
vertical-align: middle;
}
.c-radio__copy {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-radio.is-disabled {
cursor: default;
}
.c-radio.is-disabled:hover .c-radio__box,
.c-radio.is-disabled:focus .c-radio__box,
.c-radio.is-disabled:active .c-radio__box {
border-color: #a7a49e;
}
.c-radio.is-disabled .c-radio__input {
display: none;
}
.c-radio.is-disabled .c-radio__input:checked + .c-radio__box {
border-color: #a7a49e;
background-image: none;
}
.c-radio.is-disabled .c-radio__copy {
opacity: 0.5;
}
.c-radio--block .c-radio__box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: box-shadow 0.3s ease;
border: 1px solid transparent;
background: #fff;
}
.c-radio--block .c-radio__input:checked + .c-radio__box {
border-color: transparent;
background: #7bbe47;
}
.c-radio--block .c-radio__input:checked + .c-radio__box .c-sub {
color: #fff;
}
.c-radio--block .c-radio__input:checked + .c-radio__box .c-icon {
color: #fff;
}
.c-radio--block:hover .c-radio__input:not(:checked) + .c-radio__box,
.c-radio--block:focus .c-radio__input:not(:checked) + .c-radio__box,
.c-radio--block:active .c-radio__input:not(:checked) + .c-radio__box {
border-color: #fff;
}
.c-select {
display: inline-block;
position: relative;
width: 100%;
text-align: left;
vertical-align: middle;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-select.is-open {
z-index: 100;
}
.c-select:focus {
outline: none;
}
.c-select select {
display: none;
}
.c-select__placeholder,
.c-select__item {
display: block;
position: relative;
width: 100%;
padding-top: 0.5625em;
padding-bottom: 0.5625em;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
}
.c-select__placeholder {
padding-right: 2.1875em;
}
.c-select__placeholder::after {
position: absolute;
top: 50%;
right: 0.75em;
width: 13px;
height: 8px;
transform: translateY(-50%);
transition: transform 200ms ease;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 12.9 7.9'%3E%3Cpath fill='none' stroke='%23ab965d' stroke-miterlimit='10' stroke-width='2' d='M.7.7l5.7 5.7L12.2.7' /%3E%3C/svg%3E") center/13px 8px no-repeat;
content: "";
speak: none;
}
.c-select__options {
position: absolute;
width: 100%;
overflow: hidden;
visibility: hidden;
}
.c-select__list {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-select__item {
padding: 1em;
}
.c-select__optgroup-label {
display: block;
padding: 1em;
cursor: default;
}
.c-select__optgroup .c-select__item {
padding-left: 2em;
}
.c-select.is-open .c-select__placeholder::after {
transform: translateY(-50%) rotate(180deg);
}
.c-select.is-open .c-select__options {
visibility: visible;
}
.c-select[disabled] {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-select--input {
padding: 0;
}
.c-select--input:not(.has-selected) .c-select__placeholder,
.c-select--input.is-open .c-select__placeholder {
color: #827a70;
font-style: italic;
}
.c-select--input .c-select__optgroup-label {
color: #827a70;
font-style: italic;
}
.c-select--input .c-select__item:hover,
.c-select--input .has-focus .c-select__item {
background: #54504b;
}
.c-select--input.is-open .c-select__options {
transition: opacity 200ms;
background: #494540;
opacity: 1;
}
.c-select--input.u-border-bottom-gold .c-select__options {
border-top: 1px solid #ab965d;
}
.c-select--box .c-select__placeholder,
.c-select--box .c-select__item {
padding: 0.75em 1em;
}
.c-select--box .c-select__placeholder {
transition: background 200ms, border-color 200ms;
border: 1px solid currentColor;
color: #ab965d;
}
.c-select--box .c-select__placeholder {
padding-right: 2.1875em;
}
.c-select--box .c-select__placeholder::after {
right: 1em;
}
.c-select--box .c-select__options {
transition: opacity 200ms, visibility 0s 200ms;
color: #a7a49e;
opacity: 0;
}
.c-select--box .is-selected .c-select__item {
color: #cdc9c3;
}
.c-select--box .c-select__item:hover,
.c-select--box .has-focus .c-select__item {
background: #54504b;
}
.c-select--box.is-open .c-select__placeholder {
color: #a7a49e;
}
.c-select--box.is-open .c-select__options {
transition: opacity 200ms;
background: #494540;
opacity: 1;
}
textarea.c-form__input:focus {
outline: none;
}
textarea.c-form__input {
overflow: auto;
}
textarea.u-border-gold {
padding: 0.75em 1em 1em;
}
.c-link {
color: #ab965d;
}
.c-link:hover,
.c-link:focus,
.c-link:active {
color: #c3aa86;
}
.c-link.is-active {
color: #c3aa86;
}
a[href^="tel:"] {
color: inherit;
text-decoration: none;
}
a[href^="tel:"]:hover,
a[href^="tel:"]:focus,
a[href^="tel:"]:active {
color: #cdc9c3;
}
._font-button {
font-size: 1.125em;
letter-spacing: 0.05em;
}
@media all and (max-width: 42.4375em) {
._font-button {
font-size: 1em;
}
}
._remove-underline-from-links a {
border-bottom: 0;
text-decoration: none;
}
._shift-right::after {
display: table;
clear: both;
content: "";
}
._shift-right > * {
float: right;
}
.c-link--disabled {
color: inherit;
cursor: default;
pointer-events: none;
}
.c-link--disabled:hover,
.c-link--disabled:focus,
.c-link--disabled:active {
color: inherit;
}
.c-link--disabled.is-active {
color: inherit;
}
@media all and (min-width: 38.75em) {
.c-link--disabled\@620 {
color: inherit;
cursor: default;
pointer-events: none;
}
.c-link--disabled\@620:hover,
.c-link--disabled\@620:focus,
.c-link--disabled\@620:active {
color: inherit;
}
.c-link--disabled\@620.is-active {
color: inherit;
}
}
.c-link--gold-dk {
color: #8a7449;
}
.c-link--gold-dk:hover,
.c-link--gold-dk:focus,
.c-link--gold-dk:active {
color: #ab965d;
}
.c-link--gold-dk.is-active {
color: #ab965d;
}
.c-link--box {
display: inline-block;
padding: 0.25em 0.8em;
border: 1px solid currentColor;
text-decoration: none;
}
@media all and (max-width: 38.6875em) {
.c-link--box\@lt-620 {
display: inline-block;
padding: 0.25em 0.8em;
border: 1px solid currentColor;
text-decoration: none;
}
}
.c-link--cta {
font-size: 1.125em;
letter-spacing: 0.05em;
border-bottom: 1.5px solid currentColor;
text-decoration: none;
}
@media all and (max-width: 42.4375em) {
.c-link--cta {
font-size: 1em;
}
}
.c-link--share {
display: inline-block;
margin: 0 0 0.625em;
color: #8a7449;
text-align: center;
text-decoration: none;
}
.c-link--sm {
font-size: 1em;
}
.c-link__figure {
position: relative;
overflow: hidden;
}
.c-link__figure::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 200ms ease;
background: #8a7449;
content: "";
opacity: 0;
}
.c-link__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 200ms ease-out, opacity 400ms ease-out;
background: center/cover no-repeat;
-webkit-backface-visibility: hidden;
}
.c-link:hover .c-link__img,
.c-link:focus .c-link__img,
.c-link:active .c-link__img {
transform: scale(1.05);
}
.c-link:hover .c-link__figure::after,
.c-link:focus .c-link__figure::after,
.c-link:active .c-link__figure::after {
opacity: 0.2;
}
.c-button {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.c-button--box:focus,
.c-button--box:active {
outline: none;
}
.c-button--box:focus-within::after,
.c-button--box:active::after {
content: "-";
display: block;
width: 100%;
border-bottom: 6px solid #54504b;
position: absolute;
line-height: 0;
margin-top: 3rem;
color: #54504b;
}
.c-button--box {
font-size: 1.125em;
letter-spacing: 0.05em;
border: 1px solid currentColor;
text-decoration: none;
}
@media all and (max-width: 42.4375em) {
.c-button--box {
font-size: 1em;
}
}
.c-button--box-rounded {
border-radius: 20px;
}
[class*=c-button--box] {
padding: 0 0.8em;
}
.supports-font-features.wf-active [class*=c-button--box] > span:not(.c-icon) {
padding: 0.3333333333em 0 0.5em;
line-height: 0.9;
}
[class*=c-button--box] .c-icon--arrow,
[class*=c-button--box] .c-icon--arrow-reverse {
width: 0.6666666667em;
}
[class*=c-button--box] .c-icon--arrow {
margin-left: 0.6em;
}
[class*=c-button--box] .c-icon--arrow-reverse {
margin-right: 0.6em;
}
[class*=c-button--box] .u-display-inline-flex .c-icon--arrow {
margin-top: 0.1875em;
}
[class*=c-button--box] .c-icon--download {
margin-left: 0.8em;
}
.c-button--box-fill {
font-size: 1.125em;
letter-spacing: 0.05em;
border: 0;
background: #ab965d;
color: #000;
text-decoration: none;
}
@media all and (max-width: 42.4375em) {
.c-button--box-fill {
font-size: 1em;
}
}
.c-button--box-fill:hover,
.c-button--box-fill:focus,
.c-button--box-fill:active {
background: #c3aa86;
color: #000;
}
.c-button--box-fill-red {
font-size: 1.125em;
letter-spacing: 0.05em;
border: 0;
background: #A6192E;
color: #fff;
text-decoration: none;
}
@media all and (max-width: 42.4375em) {
.c-button--box-fill-red {
font-size: 1em;
}
}
.c-button--box-fill-red:hover,
.c-button--box-fill-red:focus,
.c-button--box-fill-red:active {
background: #a9271b;
color: #fff;
}
.c-button--box-md {
padding: 0.3333333333em 0.7777777778em;
}
.c-button--box-lg {
padding: 0.5em 0.8888888889em;
}
@media all and (min-width: 61.25em) {
.c-button--box-lg\@lg {
padding: 0.5em 0.8888888889em;
}
}
.c-button--box-wide {
min-width: 200px;
}
@media all and (max-width: 29.9375em) {
.c-button--box-full-width\@lt-sm {
justify-content: space-between;
width: 100%;
}
}
.c-button--box-border-red {
position: relative;
}
.c-button--box-border-red::after {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
border: 2px solid #A6192E;
content: "";
}
.c-button--box-border-red:hover::after {
border-color: #a9271b;
}
.c-button--salmon {
background-color: #ef896c;
position: relative;
border-radius: 5px;
padding: 0.1em 0;
font-size: 18px;
}
#pitcraft-modal .bold-button--double-border {
border: 1px solid #ab965d;
outline: 1px solid #ab965d;
outline-offset: 2px;
padding: 0.2em 1em;
}
.c-button--circle {
-webkit-transform-style: preserve-3d;
font-size: 1.125em;
letter-spacing: 0.05em;
position: relative;
width: 5.2222222222em;
height: 5.2222222222em;
color: #ab965d;
line-height: 0.8333333333;
display: flex;
text-decoration: none;
text-align: center;
}
.c-button--circle > * {
-webkit-backface-visibility: hidden;
}
.c-button--circle::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 4.4444444444em;
height: 4.4444444444em;
}
.c-button--circle:hover::after,
.c-button--circle:focus::after,
.c-button--circle:active::after {
transform: translate(-50%, -50%) scale(1.175);
background: rgba(195, 170, 134, 0.1);
}
.c-button--circle.is-active::after {
transform: translate(-50%, -50%) scale(1.175);
background: rgba(195, 170, 134, 0.1);
}
@media all and (max-width: 42.4375em) {
.c-button--circle {
font-size: 1em;
}
}
.c-button--play {
-webkit-transform-style: preserve-3d;
font-size: 1.125em;
letter-spacing: 0.05em;
position: relative;
width: 5.2222222222em;
height: 5.2222222222em;
color: #8a7449;
line-height: 0.8333333333;
padding: 0 0.625em;
display: flex;
text-decoration: none;
text-align: center;
}
.c-button--play > * {
-webkit-backface-visibility: hidden;
}
.c-button--play::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 4.4444444444em;
height: 4.4444444444em;
}
.c-button--play:hover::after,
.c-button--play:focus::after,
.c-button--play:active::after {
transform: translate(-50%, -50%) scale(1.175);
background: rgba(195, 170, 134, 0.1);
}
.c-button--play.is-active::after {
transform: translate(-50%, -50%) scale(1.175);
background: rgba(195, 170, 134, 0.1);
}
@media all and (max-width: 42.4375em) {
.c-button--play {
font-size: 1em;
}
}
.c-button--play::after {
background: rgba(0, 0, 0, 0.4) !important;
z-index: -1;
}
.c-button--play > span {
position: relative;
}
.c-button--play:hover,
.c-button--play:focus,
.c-button--play:active {
color: #ab965d;
}
.c-button--play.is-active {
color: #ab965d;
}
.c-button--play:focus,
.c-button--play:active {
outline: none;
}
.c-button--play:focus span,
.c-button--play:active span {
border-bottom: 6px solid #54504b;
padding: 0.25rem 0;
display: inline-block;
margin: 0 1rem;
}
.c-button--play.u-color-pink-1::after {
border-color: #e371ac;
opacity: 0.5;
}
._button-caption {
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 200%;
height: 175.5555555556%;
transform: translateX(-50%);
border: 0;
text-align: center;
text-decoration: none;
}
@media (max-width: 55em) {
._button-caption {
display: none;
}
}
._button-caption.simplicity {
height: 100%;
}
@media (max-width: 55em) {
._button-caption.simplicity {
display: block;
}
}
.c-button--scroll,
.c-button--scroll-pink,
.c-button--scroll-arrow {
position: relative;
width: 5.625em;
height: 2.8125em;
color: #8a7449;
}
.c-button--scroll::after,
.c-button--scroll-pink::after,
.c-button--scroll-arrow::after,
.c-button--scroll::before,
.c-button--scroll-pink::before,
.c-button--scroll-arrow::before {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
content: "";
pointer-events: none;
}
.c-button--scroll::before,
.c-button--scroll-pink::before,
.c-button--scroll-arrow::before {
transform: translate(-50%, 0);
transition: border-width 200ms ease;
border-width: 2.1875em;
border-bottom-color: #000;
}
.c-button--scroll::after,
.c-button--scroll-pink::after,
.c-button--scroll-arrow::after {
margin-left: -0.40625em;
transform: none;
transition: border-color 200ms ease;
border-width: 0.40625em;
border-top-color: currentColor;
-webkit-animation: slight-bounce 2000ms ease infinite;
animation: slight-bounce 2000ms ease infinite;
}
.c-button--scroll:hover,
.c-button--scroll-pink:hover,
.c-button--scroll-arrow:hover,
.c-button--scroll:focus,
.c-button--scroll-pink:focus,
.c-button--scroll-arrow:focus,
.c-button--scroll:active,
.c-button--scroll-pink:active,
.c-button--scroll-arrow:active {
color: #c3aa86;
}
.c-button--scroll:hover::before,
.c-button--scroll-pink:hover::before,
.c-button--scroll-arrow:hover::before,
.c-button--scroll:focus::before,
.c-button--scroll-pink:focus::before,
.c-button--scroll-arrow:focus::before,
.c-button--scroll:active::before,
.c-button--scroll-pink:active::before,
.c-button--scroll-arrow:active::before {
border-width: 2.8125em;
}
.c-button--scroll:hover::after,
.c-button--scroll-pink:hover::after,
.c-button--scroll-arrow:hover::after,
.c-button--scroll:focus::after,
.c-button--scroll-pink:focus::after,
.c-button--scroll-arrow:focus::after,
.c-button--scroll:active::after,
.c-button--scroll-pink:active::after,
.c-button--scroll-arrow:active::after {
-webkit-animation: none;
animation: none;
}
.c-button--scroll-arrow {
font-variant: small-caps;
text-transform: lowercase;
display: inline-block;
width: 5.625em;
height: 2.8125em;
color: #8a7449;
font-size: 1.25em;
-webkit-font-smoothing: antialiased;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
}
.supports-font-features.wf-active .c-button--scroll-arrow {
font-variant: normal;
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
.c-button--scroll-arrow sup {
top: 0.54em;
font-size: 80%;
}
.c-button--scroll-arrow sup.u-reset-small-caps-sup {
top: -0.1em;
font-size: 36%;
}
.c-button--scroll-arrow::before {
content: none;
}
.c-button--scroll-pink::after {
border-top-color: #e371ac;
}
.c-dropdown__toggle .c-icon--arrow-down {
margin-left: 0.4em;
}
.c-dropdown__toggle .c-icon--info {
transform: rotate(90deg);
stroke: none;
}
.c-dropdown__toggle.is-active .c-icon--arrow-down {
transform: rotate(180deg);
}
.c-dropdown__toggle.is-active .c-icon--info {
transform: rotate(0deg);
stroke: none;
}
.c-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
transition: opacity 300ms ease, visibility 300ms linear 0s;
background: #494540;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 80;
}
.c-dropdown.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.c-dropdown__item:not(:first-child) {
border-top: 1px solid #54504b;
}
.c-dropdown__link {
display: flex;
align-items: center;
width: 100%;
min-height: 2.5em;
padding: 0.5em 1em;
color: #a7a49e;
line-height: 1.25;
text-decoration: none;
}
.c-dropdown__link:hover,
.c-dropdown__link:focus,
.c-dropdown__link:active {
background: #54504b;
color: #a7a49e;
}
.c-dropdown__link mark {
background: none;
color: #cdc9c3;
}
@media all and (max-width: 38.6875em) {
.c-dropdown__toggle\@lt-620 .c-icon--arrow-down {
margin-left: 0.4em;
}
.c-dropdown__toggle\@lt-620 .c-icon--info {
transform: rotate(90deg);
stroke: none;
}
.c-dropdown__toggle\@lt-620.is-active .c-icon--arrow-down {
transform: rotate(180deg);
}
.c-dropdown__toggle\@lt-620.is-active .c-icon--info {
transform: rotate(0deg);
stroke: none;
}
.c-dropdown\@lt-620 {
position: absolute;
top: 100%;
left: 0;
width: 100%;
transition: opacity 300ms ease, visibility 300ms linear 0s;
background: #494540;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 80;
}
.c-dropdown\@lt-620.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.c-dropdown__item\@lt-620:not(:first-child) {
border-top: 1px solid #54504b;
}
.c-dropdown__link\@lt-620 {
display: flex;
align-items: center;
width: 100%;
min-height: 2.5em;
padding: 0.5em 1em;
color: #a7a49e;
line-height: 1.25;
text-decoration: none;
}
.c-dropdown__link\@lt-620:hover,
.c-dropdown__link\@lt-620:focus,
.c-dropdown__link\@lt-620:active {
background: #54504b;
color: #a7a49e;
}
.c-dropdown__link\@lt-620 mark {
background: none;
color: #cdc9c3;
}
}
/*
# Header Classes
- `.c-header`
- `.c-header__item`
- `.c-header__item--logo`
- `.c-header__item--button`
- `.c-header__item--search`
- `.c-header__item--menu`
- `.c-header__logo`
- `.c-header__nav`
- `.c-header__search`
*/
.c-header {
display: flex;
position: relative;
}
.c-header__logo a {
display: block;
}
.c-header .c-icon--logo-boar {
display: none;
}
.c-header__nav {
flex: 1 1 auto;
}
.c-header__search {
position: absolute;
transition: opacity 300ms ease, visibility 300ms linear 0s;
opacity: 0;
visibility: hidden;
z-index: 50;
}
.c-header__search.is-active {
opacity: 1;
visibility: visible;
}
@media all and (max-width: 48em) {
main {
padding-top: 4.5em;
}
body.simplicity main {
padding-top: inherit;
margin-top: 4.5em;
}
.c-header {
align-items: center;
height: 4.5em;
border-bottom: 3px solid #A6192E;
background: #211f1d;
}
.has-nav-open .c-header {
background: #1a1917;
}
.c-header__item {
display: flex;
align-items: center;
height: 100%;
}
.c-header__item:not(:first-child) {
border-left: 1px solid #3f3e3c;
}
.c-header__item--logo {
flex: 1 1 50%;
justify-content: flex-start;
}
.c-header__item--button {
flex: 1 1 25%;
justify-content: center;
max-width: 10em;
}
.c-header__item--button .c-icon {
width: 24px;
height: 21px;
}
.c-header__item--menu {
display: block;
}
.c-header__logo {
padding-right: 1.25em;
padding-left: 1.25em;
}
.c-header__logo .c-icon {
width: 9.4375em;
height: 2.46875em;
}
.c-header__search {
top: calc(100% + 3px);
right: 0;
left: 0;
}
}
@media all and (min-width: 48.0625em) {
main {
min-height: 100vh;
padding-top: 7.0625em;
}
body.simplicity main {
padding-top: inherit;
margin-top: 7.0625em;
}
body.has-notice {
margin-top: 3em;
}
.c-header {
height: 5.375em;
padding: 2em 3em 0;
border-bottom: 4px solid transparent;
background: #000;
}
.c-header__item--logo {
flex: 0 1 auto;
}
.c-header__item--search {
display: flex;
order: 1;
}
.c-header__item--search .c-icon {
width: 14px;
height: 14px;
margin-top: 0.25em;
margin-left: 0.5em;
}
.c-header__item--menu {
display: none;
}
.c-header__logo {
width: 100%;
min-width: 10em;
max-width: 12.625em;
margin-right: 1.25em;
}
.c-header__logo .c-icon {
width: 100%;
height: 3.375em;
}
.c-header__logo .c-icon--logo-boar {
height: 2.25em;
margin-top: 0.375em;
}
.c-header__nav {
height: 3.375em;
}
.c-header__search {
display: flex;
right: 3em;
align-items: center;
width: 24em;
height: 3.375em;
padding-left: 1px;
}
}
.c-nav__link--primary,
.c-nav__link--primary\@lt-md {
color: #ab965d;
}
.c-nav__link--primary:hover,
.c-nav__link--primary:focus,
.c-nav__link--primary:active,
.c-nav__link--primary\@lt-md:hover,
.c-nav__link--primary\@lt-md:focus,
.c-nav__link--primary\@lt-md:active {
color: #d5c5a5;
}
.c-nav__link--primary.is-active,
.c-nav__link--primary\@lt-md.is-active {
color: #d5c5a5;
}
.c-nav__link--primary.is-current,
.c-nav__link--primary\@lt-md.is-current {
color: #d5c5a5;
}
@media all and (max-width: 48em) {
.c-nav {
background: #211f1d;
}
.c-nav__list--secondary {
padding-top: 1.25em;
}
.c-nav__link,
.c-nav__link\@lt-md {
display: flex;
align-items: center;
letter-spacing: 0.075em;
text-decoration: none;
}
.c-nav__link--primary,
.c-nav__link--primary\@lt-md {
width: 100%;
min-height: 2.88em;
padding: 0.4em 0.8em 0.56em 1.12em;
border-bottom: 3px solid #272725;
font-size: 1.5625em;
line-height: 0.84;
}
.c-nav__link--primary > .c-icon,
.c-nav__link--primary\@lt-md > .c-icon {
color: #3f3e3c;
}
.c-nav__link--secondary {
padding: 0.2em 1.1111111111em 0.2em 1.5555555556em;
color: #8a7449;
font-size: 1.125em;
}
.c-nav__link--secondary:hover,
.c-nav__link--secondary:focus,
.c-nav__link--secondary:active {
color: #c3aa86;
}
.c-nav__link--with-subnav {
justify-content: space-between;
}
.c-nav__item {
position: relative;
}
.c-nav__item object {
position: absolute;
top: 1.25rem;
right: 1.25rem;
}
.c-subnav header {
padding-left: 2.5rem;
}
.c-subnav header.c-nav__item object {
left: 2rem;
right: auto;
}
}
@media all and (min-width: 48.0625em) {
.c-header__logo {
margin-right: 3.3333333333%;
}
.c-header__item--search {
max-width: 8em;
}
.c-nav {
display: flex;
position: relative;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-end;
}
.c-nav__list {
display: flex;
position: static;
flex: 1 1 auto;
justify-content: space-around;
height: 3.375em;
}
.c-nav__list--primary {
width: 95%;
max-width: 50em;
margin: 0 0 0 -1.25em;
padding-right: 1.875em;
}
.c-nav__list--primary > .c-nav__item {
padding: 0 0 0 1.25em;
}
.has-priority-nav .c-nav__list--primary {
width: 67%;
padding-right: 8%;
}
.c-nav__list--secondary {
position: relative;
max-width: 24em;
margin: 0 0 0 -1.25em;
padding-left: 1%;
}
.c-nav__list--secondary::before {
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 1.375em;
transform: translateY(-50%);
background: #ab965d;
content: "";
opacity: 0.6;
}
.c-nav__item {
position: static;
flex: 0 1 auto;
height: 3.375em;
}
.c-nav__item--secondary {
padding: 0 0 0 1.25em;
}
.c-nav__item--secondary.c-nav__item--store,
.c-nav__item--secondary.c-nav__item--faq {
line-height: 0.8;
}
.c-nav__link {
letter-spacing: 0.075em;
text-decoration: none;
display: flex;
align-items: center;
height: 100%;
transition: border-color 200ms ease;
text-align: center;
}
.c-nav__link:focus,
.c-nav__link:active {
border-bottom: 6px solid transparent;
border-color: #54504b;
outline: none;
}
.c-nav__link--with-subnav.is-active {
border-color: #54504b;
}
.c-nav__link--primary {
border-bottom: 6px solid transparent;
font-size: 1em;
line-height: 0.8;
}
.c-nav__link--secondary,
.c-nav__link--secondary\@md {
border-bottom: 6px solid transparent;
color: #8a7449;
white-space: nowrap;
}
.c-nav__link--secondary:hover,
.c-nav__link--secondary:focus,
.c-nav__link--secondary:active,
.c-nav__link--secondary\@md:hover,
.c-nav__link--secondary\@md:focus,
.c-nav__link--secondary\@md:active {
color: #c3aa86;
}
.c-nav__link--secondary.is-active,
.c-nav__link--secondary\@md.is-active {
color: #c3aa86;
}
.c-nav__link--secondary.is-current,
.c-nav__link--secondary\@md.is-current {
color: #c3aa86;
}
.c-nav__link--secondary.c-nav__link--with-subnav:hover,
.c-nav__link--secondary.c-nav__link--with-subnav:focus,
.c-nav__link--secondary.c-nav__link--with-subnav:active,
.c-nav__link--secondary\@md.c-nav__link--with-subnav:hover,
.c-nav__link--secondary\@md.c-nav__link--with-subnav:focus,
.c-nav__link--secondary\@md.c-nav__link--with-subnav:active {
border-bottom-color: #54504b;
}
.c-nav__link--secondary.c-nav__link--with-subnav.is-active,
.c-nav__link--secondary\@md.c-nav__link--with-subnav.is-active {
border-bottom-color: #54504b;
}
> .is-active .c-nav__link--secondary.c-nav__link--with-subnav,
> .is-active .c-nav__link--secondary\@md.c-nav__link--with-subnav {
color: #c3aa86;
border-bottom-color: #54504b;
}
.c-off-canvas-nav.has-sticky-nav .c-nav__link--secondary.c-nav__link--with-subnav.is-active,
.c-off-canvas-nav.has-sticky-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav.is-active {
border-bottom-color: #a9271b;
}
body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav:hover,
body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav:focus,
body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav:active,
body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav:hover,
body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav:focus,
body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav:active {
border-bottom-color: transparent;
}
body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav.is-active,
body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav.is-active {
border-bottom-color: #54504b;
}
.c-off-canvas-nav.has-sticky-nav body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav:hover,
.c-off-canvas-nav.has-sticky-nav body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav:focus,
.c-off-canvas-nav.has-sticky-nav body.has-priority-nav .c-nav__link--secondary.c-nav__link--with-subnav:active,
.c-off-canvas-nav.has-sticky-nav body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav:hover,
.c-off-canvas-nav.has-sticky-nav body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav:focus,
.c-off-canvas-nav.has-sticky-nav body.has-priority-nav .c-nav__link--secondary\@md.c-nav__link--with-subnav:active {
border-bottom-color: transparent;
}
.c-nav__link--search {
line-height: 48px;
}
}
@media all and (min-width: 87.5em) {
.c-nav__link--primary {
font-size: 1.3125em;
}
}
.c-nav__featured-image {
display: block;
min-width: 14.375em;
}
._nav-hide-at-break {
display: none;
}
@media all and (max-width: 48em) {
._nav-hide-at-break {
display: block;
}
}
body.has-priority-nav ._nav-hide-at-break {
display: block;
}
._multiline-nav__break {
display: inline;
}
._multiline-nav__extra-copy {
display: none;
}
@media (max-width: 87.4375em) {
.c-nav__item--faq ._multiline-nav__extra-copy {
display: inline;
}
}
@media (min-width: 48.0625em) and (max-width: 87.4375em) {
body:not(.has-priority-nav) ._multiline-nav__break,
body:not(.has-priority-nav) ._multiline-nav__extra-copy {
display: block;
}
body:not(.has-priority-nav) .c-header__search,
body:not(.has-priority-nav) .c-header__item--search,
body:not(.has-priority-nav) .c-nav__list--secondary {
max-width: 23vw;
}
}
.c-foodservice-nav .c-nav__list .c-nav__item {
min-width: 165px;
}
.c-off-canvas-nav__body {
overflow: hidden;
}
.c-off-canvas-nav__backdrop {
position: fixed;
top: 0;
right: 0;
bottom: -20vh;
left: 0;
transition: opacity 300ms ease, visibility 300ms linear 0s;
background: #000;
opacity: 0;
visibility: hidden;
z-index: 30;
}
@media all and (max-width: 48em) {
.c-off-canvas-nav__nav {
overflow: scroll;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
left: 0;
justify-content: flex-start;
width: 75%;
height: 120vh;
padding-bottom: 50vh;
transform: translateX(133.3333333333%);
transition: transform 300ms ease, visibility 300ms linear 0s;
visibility: hidden;
}
.c-off-canvas-nav__nav[aria-hidden=true] {
display: none;
}
.c-off-canvas-nav__header,
.c-off-canvas-nav__body {
transition: transform 300ms ease, background 300ms ease;
}
.has-nav-open {
overflow: hidden;
-webkit-overflow-scrolling: auto;
}
.has-nav-open .c-off-canvas-nav__nav {
visibility: visible;
}
.has-nav-open .c-off-canvas-nav__backdrop {
opacity: 0.5;
visibility: visible;
}
.has-nav-open .c-off-canvas-nav__header,
.has-nav-open .c-off-canvas-nav__body {
transform: translateX(-75%);
}
}
@media all and (min-width: 48.0625em) {
.c-off-canvas-nav__open-menu,
.c-off-canvas-nav__close-menu {
display: none;
}
}
/*doc
---
title: Multi-level Nav
name: multi-level-nav
category: Header
---
```html_example
```
*/
@media all and (max-width: 48em) {
.c-multi-level-nav__level {
position: fixed;
top: 0;
right: 0;
left: 0;
transform: translateX(100%);
transition: transform 300ms ease;
visibility: hidden;
}
.c-multi-level-nav__level.is-active {
visibility: visible;
}
.c-multi-level-nav__level.is-next-level {
transform: translateX(0);
}
.c-multi-level-nav > .c-multi-level-nav__level {
position: relative;
transform: translateX(0);
visibility: visible;
}
.c-multi-level-nav > .c-multi-level-nav__level.is-next-level {
transform: translateX(-100%);
}
.c-multi-level-nav > .c-multi-level-nav__level.is-next-level ~ * {
transform: translateX(-100%);
}
.c-multi-level-nav .c-multi-level-nav__replace-parent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: none;
opacity: 0;
overflow: hidden;
visibility: visible;
z-index: 200;
}
}
.c-multi-level-nav__button {
display: block;
position: relative;
margin-bottom: -0.08em;
}
.c-multi-level-nav__button > .c-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-33.3333333333%, -50%);
}
.c-multi-level-nav__button--back {
margin-right: 0.25em;
transform: rotate(180deg) translateX(33.3333333333%);
}
@media all and (min-width: 48.0625em) {
.c-multi-level-nav__button {
display: none;
}
}
.c-priority-nav:not(.is-active) .c-priority-nav__toggle {
display: none;
}
.c-priority-nav.is-active {
position: static !important;
}
.c-priority-nav.is-active .c-priority-nav__toggle .c-icon {
width: 0.8em;
height: 0.8em;
margin-right: 0.5em;
transform: translateY(15%);
}
.c-priority-nav.is-active .c-priority-nav__secondary-list {
display: block;
position: absolute;
top: calc(100% + 4px);
right: 3em;
max-width: none;
height: auto;
padding-left: 0;
transition: opacity 300ms ease, visibility 300ms linear 0s;
background: #494540;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.c-priority-nav.is-active .c-priority-nav__secondary-list.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.c-priority-nav.is-active .c-priority-nav__secondary-list::before {
display: none;
}
.c-priority-nav.is-active .c-priority-nav__secondary-list > .c-nav__item > a {
display: flex;
align-items: center;
width: 100%;
min-height: 2.5em;
padding: 0.5em 1em;
color: #cdc9c3;
line-height: 1.25;
}
.c-priority-nav.is-active .c-priority-nav__secondary-list > .c-nav__item {
padding: 0;
}
.c-priority-nav.is-active .c-priority-nav__secondary-list > .c-nav__item:hover,
.c-priority-nav.is-active .c-priority-nav__secondary-list > .c-nav__item:focus,
.c-priority-nav.is-active .c-priority-nav__secondary-list > .c-nav__item:active {
background: #54504b;
}
.c-priority-nav.is-active .c-priority-nav__secondary-list > .c-nav__item:not(:first-child) {
border-top: 1px solid #54504b;
}
body.has-priority-nav .c-priority-nav__hidden-when-active {
display: none !important;
}
.c-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.c-header::before {
position: absolute;
top: 0;
right: 0;
bottom: -3px;
left: 0;
transition: opacity 400ms ease;
box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.3);
content: "";
opacity: 1;
z-index: -1;
}
@media all and (min-width: 48.0625em) {
.c-header::before {
bottom: -4px;
}
}
.c-header::after {
position: absolute;
top: 0;
right: 0;
bottom: -3px;
left: 0;
transition: opacity 400ms ease;
border-bottom: 1px solid #3f3e3c;
content: "";
opacity: 0;
z-index: -1;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media all and (min-width: 48.0625em) {
.c-header::after {
bottom: -4px;
}
}
.c-header--sticky.has-add-on::before {
opacity: 0;
}
.c-header--sticky.has-add-on::after {
opacity: 1;
}
@media all and (max-width: 48em) {
.headroom--pinned {
transform: translate(0, 0);
}
.headroom--unpinned {
transform: translate(0, -120%);
}
.has-notice .headroom--unpinned {
transform: translate(0, -170%);
}
.headroom--unpinned .c-header__search {
opacity: 0;
visibility: hidden;
}
.notice-banner {
position: fixed;
}
}
@media all and (min-width: 48.0625em) {
.c-header {
position: absolute;
transform: translate(0, 0);
transition: transform 400ms ease, opacity 400ms ease;
}
.c-header--sticky {
position: fixed;
}
.c-header--slide-up {
transform: translate(0, -120%);
}
.c-header--sticky {
height: 3.375em;
margin-top: 0 !important;
padding-top: 0;
padding-bottom: 0.375em;
border-color: #A6192E;
background: #211f1d;
}
.c-header--sticky .c-nav__link--primary {
height: 2.5714285714em;
}
.c-header--sticky .c-header__logo {
min-width: initial;
max-width: 3.4375em;
}
.c-header--sticky .c-icon--logo {
display: none;
}
.c-header--sticky .c-icon--logo-boar {
display: block;
}
.c-header--sticky .c-nav__list--primary {
padding-right: 5%;
}
.c-header--sticky .c-nav__link--with-subnav.is-active {
border-color: #a9271b;
}
.c-header--sticky .c-nav__link {
border-bottom-width: 4px;
}
.giving .c-header--sticky {
border-color: #e371ac;
}
.c-header .c-header__search {
top: 2.0625em;
height: 3.375em;
padding-top: 0.375em;
padding-bottom: 0.375em;
}
.c-header--sticky .c-header__search {
top: 0;
height: 3.375em;
padding-bottom: 4px;
border-bottom: 4px solid #a9271b;
}
.c-header--sticky .c-autocomplete {
top: calc(100% + 4px);
}
.c-header__add-on {
transform: translateY(5.375em);
}
.has-sticky-nav .c-header__add-on {
transform: translateY(3.375em);
}
.c-header--sticky.has-add-on {
border-color: transparent;
}
.c-header--sticky.has-add-on .c-nav__link--with-subnav.is-active,
.c-header--sticky.has-add-on .c-header__search {
border-color: #54504b;
}
}
.c-header__add-on {
position: fixed;
top: 0;
left: 0;
width: 100%;
transform: translateY(0);
transition: transform 400ms ease, opacity 400ms ease;
border-bottom: 4px solid #A6192E;
box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.3);
opacity: 1;
z-index: 999;
}
.c-header__add-on:not(.is-active) {
transform: translateY(-120%);
}
body:not(.has-sticky-nav) .c-header__add-on {
opacity: 0;
}
.c-header__add-on {
padding: 1.25em 3em;
background: #211f1d;
color: #cdc9c3;
}
.c-header__add-on::before {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
height: 6.25em;
background: #211f1d;
content: "";
z-index: -1;
}
.c-header__add-on--flat {
padding: 0;
}
.c-header__add-on--align-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
@media all and (max-width: 48em) {
.c-header__add-on {
display: none !important;
}
}
._health-bar__copy {
margin-right: 1.25em;
font-size: 1.125em;
font-style: italic;
letter-spacing: 0.01em;
}
._health-dropdown {
position: relative;
}
._health-dropdown__icon {
margin: 0 8px 0 -4px;
}
@media all and (max-width: 48em) {
.c-subnav__heading {
height: 1.6666666667em;
padding: 0 1.1111111111em 0 1.5555555556em;
background: #272725;
color: #827a70;
font-size: 1.125em;
letter-spacing: 0.075em;
line-height: 1.4;
}
}
@media all and (min-width: 48.0625em) {
.c-subnav {
display: flex;
position: absolute;
transition: opacity 300ms ease, visibility 300ms linear 0s;
background: #494540;
opacity: 0;
visibility: hidden;
z-index: 30;
}
.c-subnav.is-active {
opacity: 1;
visibility: visible;
}
.c-subnav--products {
width: 100%;
max-width: 53.75em;
}
.c-subnav--nutrition-and-wellness {
width: 100%;
max-width: 35.625em;
}
.c-subnav--nutrition-and-wellness > :nth-child(2) {
min-width: 15.625em;
}
.c-subnav--counterculture {
width: 100%;
max-width: 18.75em;
}
.c-subnav--counterculture > :nth-child(2) {
min-width: 18.75em;
}
.c-subnav--recipes {
width: 100%;
max-width: 41.875em;
}
.c-subnav__group {
flex: 1 1 auto;
padding: 1.375em 1.5625em;
}
.c-subnav__group:not(:first-of-type) {
border-left: 1px solid #54504b;
}
.c-subnav__heading {
letter-spacing: 0.075em;
text-decoration: none;
display: block;
margin: -0.0625em 0 0.75em;
color: #ab965d;
font-size: 1rem;
}
.c-subnav__list {
margin-top: -0.375em;
}
.c-subnav__link {
display: inline-block;
margin: 0.25em 0;
color: #a7a49e;
line-height: 1.25;
text-decoration: none;
}
.c-subnav__link:hover,
.c-subnav__link:focus,
.c-subnav__link:active {
color: #c3aa86;
}
.c-subnav__link.is-current {
text-decoration: underline;
}
body.has-priority-nav .c-subnav--products,
body.has-priority-nav .c-subnav--recipes {
width: calc(100% - 6em);
}
body.has-priority-nav .c-subnav--products {
right: 3em;
}
body.has-priority-nav .c-subnav--recipes {
right: 3em;
}
body.has-priority-nav .c-nav__featured-image {
min-width: 11.25em;
}
}
.ie .c-subnav {
width: 100%;
}
/*
# Search Form Classes
- `.c-search`
- `.c-search__form`
- `.c-search__input`
- `.c-search__submit`
*/
.c-search__form {
display: flex;
width: 100%;
}
.c-search__form > label {
display: block;
width: calc(100% - 22px);
}
.c-search__input {
flex: 1 1 auto;
background: transparent;
color: #a7a49e;
}
.c-search__submit {
color: #8a7449;
}
.c-search__submit:hover,
.c-search__submit:focus,
.c-search__submit:active {
color: #c3aa86;
}
.c-search__submit .c-icon {
margin-bottom: -0.125em;
}
@media all and (max-width: 48em) {
.c-search__form {
padding: 0 1.25em;
border-bottom: 4px solid #272725;
background: #211f1d;
}
.c-search__input {
height: 2.68em;
font-size: 1.5625em;
}
}
@media all and (min-width: 48.0625em) {
.c-search {
padding-bottom: 6px;
border-bottom: 6px solid #54504b;
}
.c-search__input {
margin-left: 1em;
font-size: 1.25em;
line-height: 1.15;
}
.c-search__submit {
display: inline-block;
height: 100%;
vertical-align: top;
}
.c-search__submit > .c-icon {
transform: translateY(-0.125em);
}
.c-search__hidden-when-active\@md {
transition: opacity 300ms ease, visibility 300ms linear 0s;
opacity: 1;
visibility: visible;
}
.has-nav-search-open .c-search__hidden-when-active\@md {
opacity: 0;
visibility: hidden;
}
}
.c-autocomplete {
opacity: 1;
visibility: visible;
}
.is-active .c-autocomplete {
pointer-events: auto;
}
.c-autocomplete:empty,
.c-autocomplete.is-empty {
opacity: 0;
}
@media all and (min-width: 48.0625em) {
.c-autocomplete {
top: calc(100% + 6px);
}
}
main {
position: relative;
padding-bottom: 4em;
border-bottom: 4px solid #A6192E;
background: #000;
z-index: 1;
}
@media all and (min-width: 48.0625em) {
main {
padding-bottom: 10.625em;
}
}
.giving main {
border-bottom: 4px solid #e371ac;
}
.c-footer__placeholder {
pointer-events: none;
}
.c-footer {
padding: 1.875em 1.25em 4em;
background: #211f1d;
color: #827a70;
}
.c-footer.is-fixed {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.c-footer__copyright {
display: flex;
align-items: center;
text-align: center;
}
.c-footer__copyright .o-grid {
justify-content: center;
}
@media (max-width: 23.6875em) {
.c-footer__copyright {
width: 100%;
}
.c-footer__links {
width: 50%;
}
.c-footer__email {
width: 100%;
}
}
@media (max-width: 39.9375em) {
.c-footer__copyright {
margin-bottom: 1.25em;
}
.c-footer__links {
margin-top: 1em;
}
}
@media (min-width: 23.75em) and (max-width: 39.9375em) {
.c-footer__copyright {
width: 100%;
padding-right: 1.875em;
}
.c-footer__links {
width: 33.3333333333%;
}
.c-footer__email {
width: 66.6666666667%;
}
}
@media (min-width: 40em) and (max-width: 48em) {
.c-footer__copyright {
width: 37.7777777778%;
}
.c-footer__links {
width: 20.7407407407%;
}
.c-footer__email {
width: 41.4814814815%;
}
}
@media (max-width: 61.1875em) {
.c-footer-email {
margin-top: 1.25em;
}
}
@media (min-width: 48.0625em) {
.c-footer {
padding: 2.5em 3em 4em;
}
}
@media (min-width: 48.0625em) and (max-width: 61.1875em) {
.c-footer__copyright {
width: 40.6666666667%;
}
.c-footer__links {
width: 19.7777777778%;
}
.c-footer__email {
width: 39.5555555556%;
}
.c-footer__copyright,
.c-footer__links,
.c-footer-email {
font-size: 0.8125em;
}
}
@media (min-width: 61.25em) and (max-width: 112.4375em) {
.c-footer__copyright {
width: 33.5144927536%;
}
.c-footer__links {
width: 14.7946859903%;
}
.c-footer__email {
width: 22.1014492754%;
}
}
@media (max-width: 112.4375em) {
.c-footer__copyright {
flex-direction: column;
}
}
@media (min-width: 112.5em) {
.c-footer__copyright {
flex-direction: horizontal;
justify-content: space-around;
width: 40%;
padding: 0 4%;
}
.c-footer__links {
width: 13.3333333333%;
}
.c-footer__email {
width: 20%;
}
}
.c-footer__heading {
letter-spacing: 0.075em;
text-decoration: none;
display: block;
color: #ab965d;
line-height: 1.0625;
}
.c-copyright__logo {
width: 72px;
height: 49px;
margin-bottom: 0.625em;
}
.c-copyright__copy {
font-size: 0.9375em;
letter-spacing: 0.01em;
line-height: 1.2;
}
.c-footer-social-links {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
max-width: 16em;
margin: -0.625em 0 0 -0.625em;
margin-top: 0.625em;
}
.c-footer-social-links__item {
flex: 0 1 auto;
padding: 0.625em 0 0 0.625em;
}
.c-footer-social-links__link {
color: #ab965d;
opacity: 0.5;
}
.c-footer-social-links__link:hover,
.c-footer-social-links__link:focus,
.c-footer-social-links__link:active {
color: #ab965d;
opacity: 1;
}
.c-footer-links__heading {
margin: 0 0 0.375em;
font-size: 1rem;
}
.c-footer-links__link {
display: inline-block;
margin: 0.125em 0;
color: #827a70;
line-height: 1.25;
text-decoration: none;
}
.c-footer-links__link:hover,
.c-footer-links__link:focus,
.c-footer-links__link:active {
color: #c3aa86;
}
.c-footer-links__link.is-current,
.c-footer-links__link:focus,
.c-footer-links__link:active {
text-decoration: underline;
outline: none;
}
.c-footer-email__heading {
margin-bottom: 1em;
font-size: 1rem;
}
.c-footer-home-button {
display: none;
}
body.simplicity main {
background-image: url("/img/landing/simplicity/bgbottom.jpg");
background-size: 100%;
background-color: #e1d8c7;
padding-bottom: 4em;
}
.c-hero {
position: relative;
background: center/cover no-repeat;
overflow: hidden;
}
@media (min-height: 37.5em) {
.c-hero {
max-height: calc(100vh - 8.9375em);
}
}
.c-hero__preserve-aspect-ratio {
width: 100%;
height: 0;
}
.c-hero__background {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
transform: translate(-50%, -50%);
}
.c-hero__content {
position: relative;
z-index: 99;
padding: 4em 1.875em;
color: #e0e0e0;
z-index: 20;
}
.c-hero__content .c-hero__subheading,
.c-hero__content .c-hero__heading {
color: #e0e0e0 !important;
}
.is-active .c-hero__content {
z-index: 0;
}
.c-hero__scroll-button {
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
z-index: 30;
}
body:not(.has-video-playing) .c-hero__scroll-button {
z-index: 60;
}
.c-hero__disclaimer {
width: 100%;
margin-top: 1.25em;
text-align: right;
}
@media all and (max-width: 48em) {
.c-hero__disclaimer {
padding-right: 1.25em;
}
}
@media all and (max-width: 48em) {
.c-hero__preserve-aspect-ratio {
position: absolute;
top: 0;
left: 50%;
width: 166.7673716012vw;
height: 100%;
transform: translateX(-50%);
}
}
@media all and (min-width: 48.0625em) {
.c-hero__preserve-aspect-ratio {
padding: 0 0 59.9637681159%;
}
.c-hero__content {
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 99;
padding-top: 2.75em;
padding-bottom: 2.75em;
transform: translateY(-50%);
}
.c-hero__content.c-hero__content--bottom-align {
top: 70%;
}
.is-active .c-hero__content {
z-index: 0;
}
}
.c-hero--red-outline::after {
position: absolute;
top: 0.875em;
right: 0.875em;
bottom: 0.875em;
left: 0.875em;
border: 4px solid #A6192E;
content: "";
z-index: 10;
pointer-events: none;
}
@media all and (min-width: 48.0625em) {
.c-hero--red-outline\@md::after {
position: absolute;
top: 0.875em;
right: 0.875em;
bottom: 0.875em;
left: 0.875em;
border: 4px solid #A6192E;
content: "";
z-index: 10;
pointer-events: none;
}
}
.c-hero--pink-outline::after {
position: absolute;
top: 0.875em;
right: 0.875em;
bottom: 0.875em;
left: 0.875em;
border: 4px solid #e371ac;
content: "";
z-index: 10;
pointer-events: none;
}
@media all and (min-width: 48.0625em) {
.c-hero--pink-outline\@md::after {
position: absolute;
top: 0.875em;
right: 0.875em;
bottom: 0.875em;
left: 0.875em;
border: 4px solid #e371ac;
content: "";
z-index: 10;
pointer-events: none;
}
}
.c-hero__logo {
width: 78px;
height: 53px;
}
.c-hero__header {
margin-bottom: 1.25em;
pointer-events: none;
}
.c-hero__header a,
.c-hero__header button {
pointer-events: auto;
}
.c-hero__header-button {
z-index: -1;
}
@media all and (min-width: 48.0625em) {
.c-hero__header--push-up {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
padding: 4em 1.875em;
transform: translate(-50%, -50%);
}
}
@media all and (min-width: 56.25em) {
.c-hero__header--push-up {
top: 33.3333333333%;
}
}
@media all and (min-width: 48.0625em) {
.c-hero__header--push-down {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
padding: 4em 1.875em;
transform: translate(-50%, -33.333%);
}
}
@media all and (min-width: 56.25em) {
.c-hero__header--push-down {
top: 66.6666666667%;
}
}
.c-hero__header--tint::before {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 200%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, #0d0806 0%, rgba(13, 8, 6, 0) 100%);
content: "";
opacity: 0.5;
z-index: -1;
pointer-events: none;
}
.c-hero__heading {
margin-top: 0.1363636364em;
margin-bottom: 0.2272727273em;
}
.c-hero__subheading {
font-size: 0.9375em;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.c-hero__subheading .c-hero__subheading-pipe {
color: #524e4a;
}
.c-hero__banner {
position: relative;
z-index: 11;
max-width: 535px;
width: 60%;
top: 15px;
left: -3.613369467%;
}
@media all and (min-width: 48.0625em) {
.c-hero__banner {
position: absolute;
top: 3.75em;
width: 48.4191508582%;
left: 0.875em;
transform: translateX(-2.8496042216%);
}
}
@media (min-width: 1200px) {
.c-hero__banner {
margin-left: 0;
}
}
.c-featured-product {
overflow: visible;
}
@media all and (max-width: 48em) {
.c-featured-product header {
padding-bottom: 0;
}
}
@media all and (max-width: 29.9375em) {
._featured-product-min-height {
margin-right: -1.875em;
margin-left: -1.875em;
}
}
@media all and (min-width: 61.25em) {
._featured-product-min-height {
min-height: 17.5em;
}
}
.c-featured-product__figure {
padding: 0 0 25.3623188406%;
margin-bottom: calc(0% - 2px);
}
.c-featured-product__figure .o-zorro-svg__image {
height: 100%;
padding: 0;
}
.c-featured-product__figure .o-zorro-svg__content {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
}
.c-featured-product__figure .o-zorro-svg__image {
z-index: 10;
}
@media all and (min-width: 61.25em) {
.c-featured-product__figure {
margin-top: -1.25em;
margin-bottom: -1.875em;
transform: scale(0.9);
}
.c-featured-product__caption {
transform: scale(1.1111111111);
}
}
.c-featured-product__caption {
display: flex;
position: absolute;
top: 72.6785714286%;
left: 79.3025362319%;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ab965d;
text-decoration: none;
}
.c-featured-product__caption:focus {
outline: none;
}
.c-featured-product__caption:focus .c-link--cta {
border-bottom: 6px solid #54504b;
}
.c-link--cta:focus,
.c-link--cta:active {
outline: none;
border-bottom: 6px solid #54504b;
margin-bottom: -5px;
}
@media (max-width: 48em) {
.c-featured-product__caption {
-webkit-transform-style: preserve-3d;
width: 5.2222222222em;
height: 5.2222222222em;
}
.c-featured-product__caption > * {
-webkit-backface-visibility: hidden;
}
.c-featured-product__caption::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 4.4444444444em;
height: 4.4444444444em;
}
.c-featured-product__caption:hover::after,
.c-featured-product__caption:focus::after,
.c-featured-product__caption:active::after {
transform: translate(-50%, -50%) scale(1.175);
background: rgba(195, 170, 134, 0.1);
}
.c-featured-product__caption.is-active::after {
transform: translate(-50%, -50%) scale(1.175);
background: rgba(195, 170, 134, 0.1);
}
.c-featured-product__caption .c-featured-product__subheading {
display: none;
}
.c-featured-product__caption .c-featured-product__heading {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
border: 0;
overflow: hidden;
}
.c-featured-product__caption .c-link--cta {
border-bottom: 0;
}
}
@media (min-width: 48.0625em) {
.c-featured-product__caption {
-webkit-transform-style: preserve-3d;
width: 221px;
height: 221px;
}
.c-featured-product__caption > * {
-webkit-backface-visibility: hidden;
}
.c-featured-product__caption::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 203px;
height: 203px;
}
.c-featured-product__caption:hover::after,
.c-featured-product__caption:focus::after,
.c-featured-product__caption:active::after {
transform: translate(-50%, -50%) scale(1.0886699507);
background: rgba(195, 170, 134, 0.1);
}
.c-featured-product__caption.is-active::after {
transform: translate(-50%, -50%) scale(1.0886699507);
background: rgba(195, 170, 134, 0.1);
}
}
.c-featured-product__subheading {
margin-bottom: 0;
}
.c-featured-product__heading,
.c-featured-product__link {
color: inherit;
line-height: 1;
}
.c-featured-product__heading {
width: 100%;
margin: 0.4375em auto 0.875em;
padding: 0 1.125em;
}
.c-featured-recipes {
overflow: visible;
}
@media all and (min-width: 48.0625em) {
.c-featured-recipes__header {
padding-top: 3em;
padding-bottom: 3em;
}
}
.c-featured-recipes__grid {
background: right bottom/33.3333333333% auto no-repeat;
}
@media all and (max-width: 48em) {
.c-featured-recipes__grid {
background-image: none !important;
}
}
@media (min-width: 30em) and (max-width: 48em) {
.c-featured-recipes__grid {
margin-top: 3em;
}
}
.c-featured-recipes__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.25em 0;
}
@media all and (max-width: 29.9375em) {
.c-featured-recipes__content {
align-items: center;
text-align: center;
}
}
@media all and (min-width: 48.0625em) {
.c-featured-recipes__content {
padding: 3em;
}
}
@media (min-width: 68.75em) {
.c-featured-recipes__content {
padding: 4em;
}
}
@media all and (min-width: 30em) {
.c-featured-recipes__content {
padding-right: 4%;
padding-left: 4%;
}
.c-featured-recipes__list-item--right .c-featured-recipes__content {
align-items: flex-start;
padding-right: 0;
text-align: left;
}
.c-featured-recipes__list-item--left .c-featured-recipes__content {
align-items: flex-end;
padding-left: 0;
text-align: right;
}
}
@media all and (min-width: 30em) and (max-width: 48em) {
.c-featured-recipes__list-item--lg {
flex-direction: column-reverse;
margin-top: 1.875em;
}
.c-featured-recipes__list-item--lg .c-featured-recipes__content {
align-items: center;
text-align: center;
}
}
@media all and (max-width: 29.9375em) {
.c-featured-recipes__list-item {
flex-direction: column-reverse;
margin-top: 1.875em;
}
}
@media (min-width: 48.0625em) and (max-width: 68.6875em) {
.c-featured-recipes__list-item {
padding-bottom: 6%;
}
.c-featured-recipes__list-item > * {
justify-content: flex-start;
padding-top: 0;
padding-bottom: 0;
}
}
.c-featured-recipes__list-counter {
display: block;
color: #ab965d;
font-family: "minion-pro", "times new roman", times, georgia, serif;
font-size: 1.75em;
font-style: italic;
letter-spacing: 0.05em;
}
@media all and (max-width: 42.4375em) {
.c-featured-recipes__list-counter {
font-size: 1.1875em;
}
}
.c-header-video {
display: none;
position: relative;
z-index: -1;
}
@media all and (min-width: 54.375em) {
.c-header-video {
display: block;
}
}
.c-header-video__wrap {
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0 0 56.25%;
font-size: 0;
}
.c-header-video__figure {
position: absolute;
bottom: 0;
width: 28.125%;
max-width: 22.5rem;
transform: translateY(17.0212765957%);
background: center top/100% auto no-repeat;
}
.c-header-video__figure--left {
left: 0;
}
.c-header-video__figure--right {
right: 0;
}
.c-header-video__media {
width: 100%;
height: auto;
transition: opacity 500ms ease, visibility 500ms linear 0s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.c-header-video__media.is-active {
opacity: 1;
visibility: visible;
}
.c-header-video canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/**
* Set custom video dimensions (e.g., for wider cinnamon video).
* @param {String} $class
* @param {Number} $left-video-width
* @param {Number} $right-video-width
*/
.c-header-video--cinnamon-and-honey .c-header-video__figure--left {
width: 41.40625%;
max-width: 33.125rem;
}
.c-header-video--cinnamon-and-honey .c-header-video__figure--right {
width: 28.125%;
max-width: 22.5rem;
}
.c-loader {
position: relative;
width: 20px;
}
.c-loader:before {
content: "";
display: block;
padding-top: 100%;
}
.c-loader__circle {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.c-loader__circle .path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #ab965d;
-webkit-animation: dash 1.5s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite;
stroke-linecap: round;
}
@-webkit-keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
/*
Class logic for /app/models/views/ProductsView.php
$product->recommendationsClass = 'c-product-recommendations--' .
count($product->recipes) . '-left-' .
count($product->related) . '-right';
*/
.c-product-recommendations__heading {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 0 1.25em;
text-align: center;
}
.c-product-recommendations__list {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
text-align: center;
flex-direction: column;
}
.c-product-recommendations__cell {
width: 100%;
}
@media all and (min-width: 30em) {
.c-product-recommendations {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.c-product-recommendations__cell {
width: calc(25% - 0.78125em);
margin-left: 0.625em;
}
.c-product-recommendations__list {
flex-direction: row;
align-items: stretch;
}
.c-product-recommendations__cell:first-of-type {
margin-left: 0;
}
.c-product-recommendations__cell--left ~ .c-product-recommendations__cell--right {
margin-left: 1.875em;
}
.c-product-recommendations__cell--right ~ .c-product-recommendations__cell--right {
margin-left: 0.625em;
}
.c-product-recommendations__cell::after {
left: 0 !important;
width: 100% !important;
}
}
@media all and (max-width: 29.9375em) {
.c-product-recommendations__heading {
margin-bottom: 0.625em;
}
.c-product-recommendations__heading:not(:first-of-type) {
margin-top: 0 !important;
}
}
@media all and (max-width: 64.9375em) {
.c-product-recommendations__heading:not(:first-of-type) {
margin-top: 3em;
}
}
@media (min-width: 30em) and (max-width: 64.9375em) {
.c-product-recommendations__heading + .c-product-recommendations__cell {
margin-left: 0;
}
.c-product-recommendations__cell {
width: calc(50% - 0.3125em);
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading {
order: 1;
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__cell {
order: 2;
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading,
.c-product-recommendations--1-left-1-right .c-product-recommendations__cell {
width: calc(50% - 0.9375em);
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading:first-of-type,
.c-product-recommendations--1-left-1-right .c-product-recommendations__cell:first-of-type {
margin-right: 0.9375em;
margin-left: 0;
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading:last-of-type,
.c-product-recommendations--1-left-1-right .c-product-recommendations__cell:last-of-type {
margin-right: 0;
margin-left: 0.9375em;
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading {
margin-top: 0;
}
}
@media all and (min-width: 65em) {
.c-product-recommendations__heading {
order: 1;
}
.c-product-recommendations__list {
order: 2;
}
.c-product-recommendations__heading {
width: calc(50% - 0.9375em);
margin-right: 0.9375em;
}
.c-product-recommendations__heading:not(:first-of-type) {
margin-right: 0;
margin-left: 0.9375em;
}
.c-product-recommendations__list {
width: calc(50% - 0.9375em);
margin-right: 0.9375em;
display: flex;
flex-direction: row;
}
.c-product-recommendations__list:not(:first-of-type) {
margin-right: 0;
margin-left: 0.9375em;
}
.c-product-recommendations__cell {
flex-grow: 1;
}
.c-product-recommendations--2-left-1-right .c-product-recommendations__heading:last-of-type {
width: calc(25% - 0.78125em);
margin-right: calc(25% - 0.78125em);
}
.c-product-recommendations--2-left-1-right .c-product-recommendations__list:last-of-type {
width: calc(25% - 0.78125em);
margin-right: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-2-right .c-product-recommendations__heading:first-of-type {
width: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-2-right .c-product-recommendations__heading:last-of-type {
margin-right: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-2-right .c-product-recommendations__list:first-of-type {
width: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-2-right .c-product-recommendations__list:last-of-type {
margin-right: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading {
width: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__heading:last-of-type {
margin-right: calc(50% - 0.9375em);
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__list {
width: calc(25% - 0.78125em);
}
.c-product-recommendations--1-left-1-right .c-product-recommendations__list:last-of-type {
margin-right: calc(50% - 0.9375em);
}
.c-product-recommendations--0-left-2-right .c-product-recommendations__heading,
.c-product-recommendations--2-left-0-right .c-product-recommendations__heading {
width: calc(50% - 0.9375em);
margin-right: calc(50% - 0.9375em);
}
.c-product-recommendations--0-left-2-right .c-product-recommendations__list,
.c-product-recommendations--2-left-0-right .c-product-recommendations__list {
width: calc(50% - 0.9375em);
margin-right: calc(50% - 0.9375em);
}
.c-product-recommendations--1-left-0-right .c-product-recommendations__heading,
.c-product-recommendations--0-left-1-right .c-product-recommendations__heading {
width: calc(25% - 0.78125em);
margin-right: calc(75% + 0.78125em);
}
.c-product-recommendations--1-left-0-right .c-product-recommendations__list,
.c-product-recommendations--0-left-1-right .c-product-recommendations__list {
width: calc(25% - 0.78125em);
margin-right: calc(75% + 0.78125em);
}
}
.c-ingredients-list__item {
display: flex;
position: relative;
align-items: flex-start;
margin-bottom: 0.5em;
}
.c-ingredients-list__item::after {
display: table;
clear: both;
content: "";
}
.c-ingredients-list__amount {
display: inline-block;
width: 100px;
margin-right: 0.5em;
padding: 0.1875em 0.625em;
background: #211f1d;
color: #8a7449;
text-align: center;
}
.c-ingredients-list__ingredient {
flex: 2;
line-height: 1.25;
}
.c-ingredients-list__ingredient > div,
.c-ingredients-list__ingredient > a {
display: inline;
}
.c-ingredients-list__ingredient > div:not(:last-child)::after,
.c-ingredients-list__ingredient > a:not(:last-child)::after {
display: inline;
content: ",";
}
.c-ingredients-list__ingredient a {
color: #a7a49e;
}
.c-ingredients-list__ingredient a:hover,
.c-ingredients-list__ingredient a:focus,
.c-ingredients-list__ingredient a:active {
color: #cdc9c3;
}
.c-nutrition {
-webkit-font-smoothing: auto;
max-width: 335px;
margin: 0;
}
@media all and (min-width: 48.0625em) {
.c-modal__content-container.c-nutrition {
max-width: 335px;
}
}
@media all and (min-width: 48.0625em) {
.c-modal__content-container.double {
max-width: 670px;
}
}
.c-nutrition__inner {
border: 1px #cdc9c3 solid;
padding: 3px 7px 4px;
}
.c-nutrition-summary {
width: 100%;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
}
.c-nutrition-summary__item {
background: #cdc9c3;
padding: 3px;
vertical-align: top;
}
.c-nutrition-summary__item--header {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 10px;
font-weight: normal;
}
.c-nutrition-summary__item--header--calories {
color: #901a1c;
}
.c-nutrition-summary__item--header--total-fat {
color: #ab965d;
}
.c-nutrition-summary__item--header--cholesterol {
color: #00396c;
}
.c-nutrition-summary__item--header--sodium {
color: #006432;
}
.c-nutrition-summary__item--header--protein {
color: #430055;
}
.c-nutrition-summary__item--body {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
color: #cdc9c3;
font-size: 20px;
padding-top: 4px;
padding-bottom: 4px;
min-width: 46px;
}
.c-nutrition-summary__item--body--calories {
background: #901a1c;
}
.c-nutrition-summary__item--body--total-fat {
background: #ab965d;
}
.c-nutrition-summary__item--body--cholesterol {
background: #00396c;
}
.c-nutrition-summary__item--body--sodium {
background: #006432;
}
.c-nutrition-summary__item--body--protein {
background: #430055;
}
.c-nutrition-summary__item__measure {
display: block;
font-size: 10px;
margin: -7px 0 0;
}
.c-nutrition-summary__divider {
width: 2.5%;
}
.c-nutrition__padding-bottom-5px {
padding-bottom: 5px;
}
.c-nutrition__padding-top-5px {
padding-top: 5px;
}
.c-nutrition__margin-bottom-5px {
margin-bottom: 5px;
}
.c-nutrition__margin-top-5px {
margin-top: 5px;
}
.c-nutrition-facts {
color: #cdc9c3;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 8pt;
}
.c-nutrition-facts__title {
color: inherit;
font-feature-settings: normal !important;
font-variant-caps: normal;
letter-spacing: 0;
margin: 0;
text-transform: none;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 30px;
font-weight: bold;
line-height: 1;
}
.c-nutrition-facts__servings {
line-height: 1.25;
}
.c-nutrition-facts__divder {
width: 100%;
height: 4px;
background: #cdc9c3;
margin: 6px 0 4px;
}
.c-nutrition-facts__divder--lg {
height: 9px;
}
.c-nutrition-facts__22pt {
font-size: 22pt;
}
.c-nutrition-facts__16pt {
font-size: 16pt;
}
.c-nutrition-facts__10pt {
font-size: 10pt;
}
.c-nutrition-facts__7pt {
font-size: 7pt;
}
.c-nutrition-facts__table-header {
color: inherit;
font-feature-settings: normal !important;
font-variant-caps: normal;
letter-spacing: 0;
margin: 0;
text-transform: none;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 9px;
font-weight: bold;
padding: 2px 0;
}
.c-nutrition-facts__table-border-bottom {
border-bottom: 1px #cdc9c3 solid;
}
.c-nutrition-facts__table {
width: 100%;
}
.c-nutrition-facts__table + .c-nutrition-facts__divder {
margin-top: -1px;
}
.c-nutrition-facts__table__row {
border-bottom: 1px #cdc9c3 solid;
}
.c-nutrition-facts__table__item {
padding: 1px 0;
}
.c-nutrition-facts__table__item:first-child {
text-align: left;
}
.c-nutrition-facts__table__item:last-child {
text-align: right;
}
.c-nutrition-facts__table__item:only-child {
text-align: left;
width: 100%;
}
.c-nutrition-facts__table__item--indent {
padding-left: 16px;
}
.c-nutrition-facts__table__item--double-indent {
padding-left: 32px;
}
.c-ornament {
position: absolute;
top: 0;
left: 50%;
z-index: -1;
}
.c-ornament__figure {
height: 0;
background: center/cover no-repeat;
}
@media all and (max-width: 48em) {
.c-ornament__figure {
background-image: none !important;
}
}
.c-ornament--salami-new {
width: 34.0833333333%;
max-width: 409px;
transform: translate(-163.3251833741%, 0.3623188406%);
}
.c-ornament--salami-new > .c-ornament__figure {
padding: 0 0 67.4816625917%;
background-image: url(cache-ts- "/img/views/product-landing/background-ingredients/salami-new.jpg");
}
.c-ornament--cheese-new {
width: 31.3333333333%;
max-width: 376px;
transform: translate(64.6276595745%, 1.7441860465%);
}
.c-ornament--cheese-new > .c-ornament__figure {
padding: 0 0 91.4893617021%;
background-image: url("/img/views/product-landing/background-ingredients/cheese-new.jpg");
}
.c-ornament--heart-new {
width: 39.1666666667%;
max-width: 470px;
left: 0;
top: 0;
}
.c-ornament--heart-new > .c-ornament__figure {
padding: 0 0 106.3829787234%;
background-image: url("/img/landing/backtoschool/sandwichoffer.1634141558181.png");
}
.c-ornament--bento-new {
width: 42.1666666667%;
max-width: 506px;
left: auto;
right: 0;
top: 0;
}
.c-ornament--bento-new > .c-ornament__figure {
padding: 0 0 118.5770750988%;
background-image: url("/img/landing/backtoschool/bentobox.png");
}
.c-ornament--paperclip-new {
width: 25%;
max-width: 300px;
left: 0;
bottom: 0;
top: -9em;
}
.c-ornament--paperclip-new > .c-ornament__figure {
padding: 0 0 166.6666666667%;
background-image: url("/img/landing/backtoschool/paperclips.1634141558181.png");
}
.c-ornament--crayons-new {
width: 20.8333333333%;
max-width: 250px;
left: auto;
right: 0;
top: -250px;
}
.c-ornament--crayons-new > .c-ornament__figure {
padding: 0 0 200%;
background-image: url("/img/landing/backtoschool/crayons.1634141558181.png");
}
.c-ornament--sandwich-new {
width: 37.9166666667%;
max-width: 455px;
top: -10%;
left: -2%;
z-index: 1;
}
.c-ornament--sandwich-new > .c-ornament__figure {
padding: 0 0 120%;
background-image: url("/img/landing/simplicity/charcuterie.png");
}
.c-ornament--skillet-new {
width: 33.1666666667%;
max-width: 398px;
top: 50%;
right: 0;
left: inherit;
z-index: 1;
}
.c-ornament--skillet-new > .c-ornament__figure {
padding: 0 0 112.3115577889%;
background-image: url("/img/landing/simplicity/skillet.png");
}
.c-ornament--napkin-new {
width: 44.3333333333%;
max-width: 532px;
top: -20%;
right: 0;
left: inherit;
z-index: 0;
}
.c-ornament--napkin-new > .c-ornament__figure {
padding: 0 0 126.8796992481%;
background-image: url("/img/landing/simplicity/napkin.png");
}
.c-ornament--bay-new {
width: 23%;
max-width: 276px;
top: 0;
left: 0;
z-index: 0;
}
.c-ornament--bay-new > .c-ornament__figure {
padding: 0 0 178.6231884058%;
background-image: url("/img/landing/simplicity/bayleaves.png");
}
.c-ornament--lemon-new {
width: 23.6666666667%;
max-width: 284px;
top: 12%;
right: 0;
left: inherit;
z-index: 0;
}
.c-ornament--lemon-new > .c-ornament__figure {
padding: 0 0 190.8450704225%;
background-image: url("/img/landing/simplicity/lemons.png");
}
.c-ornament--garlic-new {
width: 20.0833333333%;
max-width: 241px;
top: inherit;
bottom: -8%;
left: 0;
z-index: 0;
}
.c-ornament--garlic-new > .c-ornament__figure {
padding: 0 0 129.0456431535%;
background-image: url("/img/landing/simplicity/garlic.png");
}
.c-ornament--rosemary-new {
width: 21.9166666667%;
max-width: 263px;
top: -5%;
right: 0;
left: inherit;
z-index: 0;
}
.c-ornament--rosemary-new > .c-ornament__figure {
padding: 0 0 201.9011406844%;
background-image: url("/img/landing/simplicity/rosemarypng.png");
}
.c-ornament--peppercorn-new {
width: 25.9166666667%;
max-width: 311px;
top: -18%;
left: 24%;
z-index: 0;
}
.c-ornament--peppercorn-new > .c-ornament__figure {
padding: 0 0 51.768488746%;
background-image: url("/img/landing/simplicity/peppercorn.png");
}
.c-product-label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-2%);
transition: transform 200ms ease-in-out, opacity 400ms ease-out;
opacity: 0;
z-index: 1;
-webkit-backface-visibility: hidden;
}
.c-product-label.lazyloaded {
opacity: 0;
}
.c-link:hover .c-product-label,
.c-link:focus .c-product-label,
.c-link:active .c-product-label {
transform: translateY(0);
opacity: 1;
}
.c-testimonial {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media all and (max-width: 48em) {
.c-testimonial:not(:first-child) {
display: none;
}
}
.c-testimonial__bottom {
padding-top: 1.25em;
}
.c-testimonial__quote {
font-style: italic;
letter-spacing: 0.025em;
}
.c-testimonial__icon {
margin-bottom: 1.125em;
}
.c-testimonial__author {
display: block;
color: #cdc9c3;
font-size: 1.3125em;
letter-spacing: 0.025em;
line-height: 0.7142857143;
}
.c-testimonial__source {
display: block;
letter-spacing: 0.025em;
line-height: 1.3125;
}
.c-video-badge {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 0.3125em 0.25em;
color: #ab965d;
z-index: 1;
}
.c-video-badge::before {
display: block;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 2.8125em solid #211f1d;
border-left: 3.3125em solid transparent;
content: "";
opacity: 0.8;
z-index: -1;
}
.c-video-badge__icon {
display: block;
width: 1.4375em;
height: 0.875em;
}
.c-view-nav__item {
font-style: italic;
text-decoration: none;
}
.c-view-nav__item.c-view-nav__previous::before {
content: "\2039 ";
}
.c-view-nav__item.c-view-nav__next::after {
content: " \203A";
}
.c-view-nav__item-divider {
margin: 0 0.5em;
color: #54504b;
}
/*doc
---
title: Modals
name: modals
category: Components
---
TODO: Document markup and CSS/JS separation.
- body.modal-open
- js-modal-carousel
- js-modal-carousel__item
- c-modal
- c-modal--align-top
- c-modal__content
- c-modal__content-container
- c-modal-carousel
- c-modal-carousel__item
- c-modal-carousel__nav
- c-modal-carousel__nav-item
- c-modal-carousel__nav-item--next
- c-modal-carousel__nav-item--previous
## States for .c-modal-carousel
- is-active
## States for .c-modal-carousel__item
- is-current
- is-inactive-next
- is-inactive-next-off
- is-inactive-previous
- is-inactive-previous-off
- is-not-transitionable
- is-transitionable
## States for .c-modal-carousel__nav-item
- is-inactive
*/
body.modal-open {
overflow: hidden;
}
body.modal-open::after {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
content: "";
opacity: 0.8;
z-index: 1000;
}
.c-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
padding: 3em 0;
transition: opacity 0.2s ease;
outline: 0;
opacity: 0;
visibility: hidden;
z-index: 1002;
-webkit-overflow-scrolling: touch;
}
.c-modal.is-active {
display: flex;
opacity: 1;
visibility: visible;
overflow-x: hidden;
overflow-y: auto;
}
@media all and (max-width: 48em) {
.c-modal {
padding-top: 10px;
}
.c-modal.is-active {
display: block;
}
}
.c-modal--align-top {
align-items: flex-start;
}
.c-modal__content-container {
position: relative;
width: 90%;
margin: 0 auto;
}
@media all and (min-width: 48.0625em) {
.c-modal__content-container {
margin: 0;
}
}
.c-modal__close {
position: absolute;
top: 1.125em;
right: 1.125em;
width: 1.125em;
height: 1.125em;
z-index: 1005;
}
.c-modal__close .c-icon--close {
position: absolute;
top: 0;
left: 0;
}
.c-modal__close:focus,
.c-modal__close:active {
outline: 1px solid #827a70;
}
.c-modal__close--white {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E_buildSvg('%3Cline x1='0' y1='0' x2='13' y2='13' stroke='%23fff' stroke-width='2px'/%3E%3Cline x1='13' y1='0' x2='0' y2='13' stroke='%23fff' stroke-width='2px'/%3E', 13, 13)%3C/svg%3E");
}
.c-modal__content {
position: relative;
min-height: 3em;
padding: 55px 40px 40px;
background: #1a1917;
}
@media (orientation: landscape) {
.c-modal--video .c-modal__content-container {
max-width: calc((100vh - px(6em)/16px10px55px) * math.div(16, 9));
}
}
@media (orientation: landscape) and (max-width: 48em) {
.c-modal--video .c-modal__content-container {
max-width: calc((100vh - 123px) * math.div(16, 9));
}
}
.c-copy--bts {
font-family: "myriad-pro", "Arial", sans-serif;
}
picture {
z-index: 0;
}
.middle-text {
z-index: 99;
}
.circle {
display: block;
border-radius: 50%;
width: 35px;
height: 35px;
color: #FFF;
}
.circle.red-bg {
background-color: #ae1f19;
}
.circle > .c-icon--close {
top: calc(50% - 16px/2);
left: calc(50% - 16px/2);
}
.c-modal__content-container.rainbow-border {
border: 8px solid transparent;
}
.c-modal__content-container.rainbow-border:after {
position: absolute;
top: -8px;
bottom: 0;
left: -8px;
right: -8px;
background: rgba(0, 0, 0, 0) linear-gradient(-45deg, #57257d 0%, #57257d 23%, #57257d 23%, #ae1f19 23%, #ae1f19 39%, #123ca6 39%, #123ca6 39%, #123ca6 57%, #123ca6 57%, #187816 57%, #187816 79%, #57257d 79%, #57257d 88%, #ae1f19 88%);
background-position: top left;
background-size: contain;
background-repeat: repeat-x;
content: "";
z-index: -1;
}
.c-modal.hellofresh-modal .c-modal__content-container {
position: relative;
background: #000;
}
.c-modal.hellofresh-modal .c-modal__content-container::before {
content: "";
position: absolute;
border: 2px solid #A6192E;
top: 35px;
right: 35px;
bottom: 35px;
left: 35px;
}
.c-modal.hellofresh-modal .c-modal__content {
background: transparent;
padding: 50px;
}
@media all and (min-width: 48.0625em) {
.c-modal.hellofresh-modal .c-modal__content {
padding: 70px;
}
}
.c-modal.hellofresh-modal .c-modal__close {
top: 3em;
right: 3em;
}
body.modal-open.landing-hummus::after {
opacity: 0.45;
}
.c-brochure {
display: block;
width: 100%;
height: 550px;
max-height: 70vh;
margin: 0 auto;
}
@media all and (max-width: 48em) {
.c-brochure {
width: 90%;
}
}
.c-tabs__nav {
display: flex;
flex-wrap: none;
justify-content: space-between;
width: 100%;
margin: 0 0 1em;
}
.c-tabs__nav-item {
flex: 1 1 auto;
line-height: 1.1538461538;
text-align: center;
}
.c-tabs__nav-item:not(:first-child) {
padding-left: 1em;
}
@media (max-width: 35em) {
.c-tabs__nav-item {
flex: 1 1 25%;
}
.c-tabs__nav-item:not(:first-child) {
padding-left: 0.1em;
}
}
@media all and (max-width: 29.9375em) {
.c-tabs__nav-item {
font-size: 0.75em;
}
}
.c-tabs__nav-link {
opacity: 0.6;
}
.c-tabs__nav-link:hover,
.c-tabs__nav-link:focus,
.c-tabs__nav-link:active {
color: #ab965d;
opacity: 1;
}
.c-tabs__nav-link.is-active {
color: #ab965d;
opacity: 1;
}
.c-tabs__content {
position: relative;
}
.c-tabs__pane {
height: 0;
transition: none;
opacity: 0;
visibility: hidden;
}
.c-tabs__pane.is-active {
height: auto;
opacity: 1;
visibility: visible;
}
.js-show-more__item.is-hidden,
.js-show-more__button.is-hidden {
display: none;
}
#onetrust-banner-sdk * {
box-sizing: border-box !important;
}
.onetrust .ot-sdk-show-settings,
.onetrust .optanon-show-settings {
letter-spacing: 0.01em;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "minion-pro", "times new roman", times, georgia, serif;
-webkit-font-smoothing: subpixel-antialiased;
line-height: 1.375;
margin: 0;
box-sizing: border-box;
outline: 0;
border: 0;
height: auto;
text-decoration: underline;
white-space: normal;
padding: 0;
cursor: pointer;
color: #ab965d;
background-color: inherit;
font-size: inherit !important;
}
.onetrust .ot-sdk-show-settings:hover,
.onetrust .optanon-show-settings:hover {
color: #c3aa86;
background-color: inherit;
}
.onetrust .otnotice-section-content span,
.onetrust strong {
background: inherit !important;
}
.onetrust .otnotice-menu {
margin-bottom: 50px;
}
#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk .ot-b-addl-desc,
#onetrust-banner-sdk .ot-gv-list-handler {
font-size: 14px !important;
line-height: inherit !important;
text-align: center !important;
max-width: 80%;
}
@media all and (min-width: 72.5em) {
#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk .ot-b-addl-desc,
#onetrust-banner-sdk .ot-gv-list-handler {
max-width: none;
text-align: left !important;
}
}
.onetrust-pc-sdk .ot-pc-footer-logo {
background: black !important;
}
.onetrust-pc-btn-handler {
background: #ab965d !important;
color: white !important;
text-decoration: none !important;
}
#onetrust-banner-sdk #onetrust-accept-btn-handler,
#onetrust-banner-sdk #onetrust-reject-all-handler {
font-size: 16px !important;
text-transform: lowercase !important;
font-variant-caps: small-caps !important;
font-feature-settings: "smcp";
display: flex !important;
flex-direction: row-reverse !important;
font-feature-settings: "smcp";
}
#onetrust-pc-btn-handler {
font-size: 16px !important;
white-space: nowrap !important;
max-width: none !important;
text-align: center;
text-transform: lowercase !important;
font-variant-caps: small-caps !important;
font-feature-settings: "smcp";
}
.onetrust-button-group {
width: auto;
}
#onetrust-button-group {
display: flex !important;
flex-direction: column !important;
}
@media all and (min-width: 48.0625em) {
#onetrust-button-group {
flex-direction: row-reverse !important;
}
}
#onetrust-accept-btn-handler {
justify-content: center !important;
white-space: nowrap !important;
}
#onetrust-banner-sdk .banner-actions-container {
width: auto !important;
}
#onetrust-pc-sdk h3,
#onetrust-pc-sdk h4,
#onetrust-pc-sdk h5 {
font-size: 16px !important;
text-transform: lowercase !important;
font-variant-caps: small-caps !important;
}
#onetrust-pc-sdk .ot-cat-grp .ot-always-active {
color: #ab965d !important;
}
#onetrust-pc-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob {
background-color: #cec2a0 !important;
border: 1px solid #ab965d !important;
}
#onetrust-pc-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob:before {
background-color: #ab965d !important;
border-color: #ab965d !important;
}
#onetrust-pc-sdk .ot-cat-item > button:focus,
#onetrust-pc-sdk .ot-acc-cntr > button:focus,
#onetrust-pc-sdk li > button:focus {
outline: #ab965d solid 2px !important;
}
#onetrust-pc-sdk .ot-host-item > button:focus,
#onetrust-pc-sdk .ot-ven-item > button:focus {
border: 2px solid #ab965d !important;
}
#onetrust-pc-sdk .ot-host-desc,
#onetrust-pc-sdk .ot-host-info {
font-size: 14px !important;
}
#onetrust-pc-sdk #filter-btn-handler {
background-color: #ab965d !important;
}
.ot-pc-footer-logo {
background: black !important;
}
#onetrust-button-group-parent.ot-sdk-three.ot-sdk-columns {
position: static;
transform: none !important;
width: auto !important;
flex-shrink: 0;
}
@media only screen and (min-width: 897px) and (max-width: 1023px) {
#onetrust-banner-sdk.vertical-align-content #onetrust-button-group-parent {
position: static !important;
top: inherit !important;
left: inherit !important;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1267px) {
#onetrust-banner-sdk #onetrust-button-group {
margin-left: 2em !important;
}
}
@media only screen and (min-width: 769px) {
#onetrust-banner-sdk #onetrust-button-group {
margin-right: 0 !important;
}
}
#onetrust-banner-sdk #onetrust-button-group-parent {
position: static !important;
}
@media only screen and (min-width: 426px) and (max-width: 896px) {
#onetrust-banner-sdk #onetrust-button-group-parent {
margin-left: 1em !important;
}
}
#onetrust-policy-text {
font-size: 16px !important;
margin-bottom: 0 !important;
}
#onetrust-policy {
display: flex;
justify-content: center;
margin: 0 !important;
padding: 1em !important;
}
@media all and (min-width: 72.5em) {
#onetrust-policy {
justify-content: flex-start;
}
}
#onetrust-banner-sdk .ot-sdk-row {
justify-content: center;
display: flex !important;
position: relative;
flex-direction: column;
justify-content: center;
}
@media all and (min-width: 72.5em) {
#onetrust-banner-sdk .ot-sdk-row {
flex-direction: row;
padding: 1em !important;
}
}
#onetrust-group-container.ot-sdk-eight.ot-sdk-columns {
width: auto !important;
display: flex;
justify-content: center;
}
@media all and (min-width: 72.5em) {
#onetrust-group-container.ot-sdk-eight.ot-sdk-columns {
justify-content: flex-start;
}
}
@media only screen and (min-width: 1280px) {
#onetrust-banner-sdk:not(.ot-iab-2) #onetrust-button-group-parent {
margin-left: 2em;
padding: 0;
}
}
@media only screen and (min-width: 897px) and (max-width: 1023px) {
#onetrust-button-group-parent {
margin-left: 2em !important;
}
}
#onetrust-policy-text a:focus,
a.privacy-notice-link:focus {
outline: none !important;
}
.u-animation-delay-100ms {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.u-animation-delay-1100ms {
-webkit-animation-delay: 1100ms;
animation-delay: 1100ms;
}
.u-animation-bounce {
-webkit-animation: bounce 2000ms ease infinite;
animation: bounce 2000ms ease infinite;
}
.u-background-color-black {
background-color: #000;
}
.u-background-color-black-2 {
background-color: #211f1d;
}
.u-background-color-white-2 {
background-color: #f1f1ee;
}
.u-background-color-gray-2 {
background-color: #a7a49e;
}
.u-background-color-gray-5 {
background-color: #404040;
}
.u-background-color-pink-1 {
background-color: #e371ac;
}
.u-background-color-red-1 {
background-color: #A6192E;
}
.u-background-color-gold-1 {
background-color: #8a7449;
}
.u-background-color-gold-7 {
background-color: rgba(171, 150, 97, 0.8);
}
.u-border-left-black {
border-left: 4px solid #000;
}
.u-border-bottom-gray {
border-bottom: 1px solid #272727;
}
.u-border-left-gray {
border-left: 1px solid #272727;
}
.u-border-gold {
border: 1px solid #ab965d;
}
.u-border-bottom-gold {
border-bottom: 1px solid #ab965d;
}
.u-border-vertical-gold-light {
border-top: 1px solid #2f2b21;
border-bottom: 1px solid #2f2b21;
}
.u-border-top-gold-light {
border-top: 1px solid #2f2b21;
}
.u-border-right-gold-light {
border-right: 1px solid #2f2b21;
}
.u-border-bottom-gold-light {
border-bottom: 1px solid #2f2b21;
}
.u-border-left-gold-light {
border-left: 1px solid #2f2b21;
}
.u-border-vertical-gold-6 {
border-top: 1px solid #3f3727;
border-bottom: 1px solid #3f3727;
}
.u-border-top-red {
border-top: 1px solid #A6192E;
}
.u-border-right-red {
border-right: 1px solid #A6192E;
}
.u-border-bottom-red {
border-bottom: 1px solid #A6192E;
}
.u-border-left-red {
border-left: 1px solid #A6192E;
}
.u-border-vertical-red {
border-top: 1px solid #A6192E;
border-bottom: 1px solid #A6192E;
}
@media all and (min-width: 48.0625em) {
.u-border-right-red\@md {
border-right: 1px solid #A6192E;
}
}
@media all and (max-width: 56.1875em) {
.u-border-bottom-red\@lt-900 {
border-bottom: 1px solid #A6192E;
}
}
@media all and (min-width: 30em) {
.u-border-left-red\@sm {
border-left: 1px solid #A6192E;
}
}
.u-border-top-pink {
border-top: 3px solid rgba(227, 113, 172, 0.5);
}
.u-border-bottom-pink {
border-bottom: 3px solid rgba(227, 113, 172, 0.5);
}
@media all and (min-width: 30em) {
.u-border-bottom-gray\@sm {
border-bottom: 1px solid #272727;
}
}
@media all and (min-width: 30em) {
.u-border-left-gray\@sm {
border-left: 1px solid #272727;
}
}
@media all and (min-width: 48.0625em) {
.u-border-top-red-thick\@md {
border-top: 3px solid #A6192E;
}
}
.u-border-bottom-red-thick {
border-bottom: 3px solid #A6192E;
}
.u-color-primary {
color: #a7a49e;
}
.u-color-secondary {
color: #ab965d;
}
.u-color-black-3 {
color: #2d2a28;
}
.u-color-black-1 {
color: #000;
}
.u-color-white {
color: #fff;
}
.u-color-white-2 {
color: #f1f1ee;
}
.u-color-white-3 {
color: #cec3b7;
}
.u-color-brown-3 {
color: #54504b;
}
.u-color-brown-4 {
color: #332518;
}
.u-color-gray-1 {
color: #827a70;
}
.u-color-gray-2 {
color: #a7a49e;
}
.u-color-gray-3 {
color: #cdc9c3;
}
.u-color-gray-4 {
color: #e0e0e0;
}
.u-color-gray-7 {
color: #525050;
}
.u-color-gray-8 {
color: #d2d2d0;
}
.u-color-gray-9 {
color: #7b7c7d;
}
.u-color-gray-10 {
color: #e8e4e0;
}
.u-color-gray-11 {
color: #474747;
}
.u-color-gray-12 {
color: #757575;
}
.u-color-gray-13 {
color: #eef3e9;
}
.u-color-gold-1 {
color: #8a7449;
}
.u-color-gold-2 {
color: #ab965d;
}
.u-color-gold-8 {
color: #8d7249;
}
.u-color-red-1 {
color: #A6192E;
}
.u-color-red-2 {
color: #a9271b;
}
.u-color-pink-1 {
color: #e371ac;
}
a.u-color-pink-1:hover,
a.u-color-pink-1:focus,
a.u-color-pink-1:active {
color: #e371ac;
transition: opacity 0.25s ease;
opacity: 0.85;
}
.u-color-primary--links a {
color: #a7a49e;
}
.u-columns-2 {
-moz-columns: 2;
columns: 2;
}
@media all and (min-width: 30em) {
.u-columns-2\@sm {
-moz-columns: 2;
columns: 2;
}
}
@media all and (min-width: 48.0625em) {
.u-columns-2\@md {
-moz-columns: 2;
columns: 2;
}
}
.u-column-gap-sm {
-moz-column-gap: 1.875em;
column-gap: 1.875em;
}
.u-column-gap-md {
-moz-column-gap: 3em;
column-gap: 3em;
}
.u-cursor-pointer {
cursor: pointer;
}
.u-depth-0 {
z-index: 0;
}
.u-depth-1 {
z-index: 1;
}
.u-depth-2 {
z-index: 2;
}
.u-depth-3 {
z-index: 3;
}
.u-depth-4 {
z-index: 4;
}
.u-depth-5 {
z-index: 5;
}
.u-depth-6 {
z-index: 6;
}
.u-depth-7 {
z-index: 7;
}
.u-depth-8 {
z-index: 8;
}
.u-depth-9 {
z-index: 9;
}
.u-depth-10 {
z-index: 10;
}
.u-depth-11 {
z-index: 11;
}
.u-depth-12 {
z-index: 12;
}
.u-depth-13 {
z-index: 13;
}
.u-depth-14 {
z-index: 14;
}
.u-depth-15 {
z-index: 15;
}
.u-depth-16 {
z-index: 16;
}
.u-depth-17 {
z-index: 17;
}
.u-depth-18 {
z-index: 18;
}
.u-depth-19 {
z-index: 19;
}
.u-depth-20 {
z-index: 20;
}
.u-depth-21 {
z-index: 21;
}
.u-depth-22 {
z-index: 22;
}
.u-depth-23 {
z-index: 23;
}
.u-depth-24 {
z-index: 24;
}
.u-depth-25 {
z-index: 25;
}
.u-depth-26 {
z-index: 26;
}
.u-depth-27 {
z-index: 27;
}
.u-depth-28 {
z-index: 28;
}
.u-depth-29 {
z-index: 29;
}
.u-depth-30 {
z-index: 30;
}
.u-depth-0 {
z-index: 0;
}
.u-depth\(-1\) {
z-index: -1;
}
.u-show-on-focus {
position: absolute !important;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
.u-show-on-focus:focus,
.u-show-on-focus:active {
position: static !important;
width: auto;
height: auto;
clip: auto;
overflow: visible;
}
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
border: 0;
overflow: hidden;
}
.u-display-inline-block {
display: inline-block !important;
}
.u-display-block {
display: block !important;
}
.u-display-inline-flex {
display: inline-flex !important;
}
.u-display-flex {
display: flex !important;
}
.u-display-none {
display: none !important;
}
@media all and (max-width: 29.9375em) {
.u-display-none\@lt-sm {
display: none !important;
}
}
@media all and (max-width: 48em) {
.u-display-none\@lt-md {
display: none !important;
}
}
@media all and (max-width: 64.9375em) {
.u-display-none\@lt-1040 {
display: none !important;
}
}
@media all and (max-width: 54.3125em) {
.u-display-none\@lt-870 {
display: none !important;
}
}
@media all and (max-width: 56.1875em) {
.u-display-none\@lt-900 {
display: none !important;
}
}
@media all and (max-width: 61.1875em) {
.u-display-none\@lt-lg {
display: none !important;
}
}
@media all and (max-width: 63.9375em) {
.u-display-none\@lt-1024 {
display: none !important;
}
}
@media all and (max-width: 93.6875em) {
.u-display-none\@lt-1500 {
display: none !important;
}
}
@media all and (max-width: 48em) {
.u-visually-hidden\@lt-md {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
border: 0;
overflow: hidden;
}
}
@media all and (max-width: 48em) {
.u-display-none\@lt-md {
display: none !important;
}
}
@media all and (max-width: 48em) {
.u-display-flex\@lt-md {
display: flex !important;
}
}
@media all and (max-width: 38.6875em) {
.u-display-none\@lt-620 {
display: none !important;
}
}
@media all and (max-width: 74.9375em) {
.u-display-none\@lt-xl {
display: none !important;
}
}
@media all and (max-width: 42.4375em) {
.u-display-none\@lt-680 {
display: none !important;
}
}
@media all and (max-width: 64.9375em) {
.u-display-none\@lt-1040 {
display: none !important;
}
}
@media all and (max-width: 72.4375em) {
.u-display-none\@lt-1160 {
display: none !important;
}
}
@media all and (max-width: 48em) {
.u-display-inline-block\@lt-md {
display: inline-block !important;
}
}
@media all and (max-width: 63.9375em) {
.u-display-inline-block\@lt-1024 {
display: inline-block !important;
}
}
@media all and (min-width: 30em) {
.u-display-flex\@sm {
display: flex !important;
}
}
@media all and (min-width: 30em) {
.u-display-none\@sm {
display: none !important;
}
}
@media all and (min-width: 48.0625em) {
.u-display-none\@md {
display: none !important;
}
}
@media all and (min-width: 48.0625em) {
.u-display-flex\@md {
display: flex !important;
}
}
@media all and (min-width: 65em) {
.u-display-flex\@1040 {
display: flex !important;
}
}
@media all and (min-width: 38.75em) {
.u-display-none\@620 {
display: none !important;
}
}
@media all and (min-width: 42.5em) {
.u-display-none\@680 {
display: none !important;
}
}
@media all and (min-width: 64em) {
.u-display-none\@1024 {
display: none !important;
}
}
@media all and (min-width: 65em) {
.u-display-none\@1040 {
display: none !important;
}
}
@media all and (min-width: 56.25em) {
.u-display-none\@900 {
display: none !important;
}
}
@media all and (min-width: 75em) {
.u-display-none\@xl {
display: none !important;
}
}
@media print {
.u-display-none\@print {
display: none !important;
}
}
.u-align-items-center {
align-items: center;
}
.u-align-items-flex-start {
align-items: flex-start;
}
.u-align-items-flex-end {
align-items: flex-end;
}
.u-align-self-center {
align-self: center;
}
.u-justify-content-center {
justify-content: center;
}
.u-justify-content-space-between {
justify-content: space-between;
}
.u-justify-content-flex-start {
justify-content: flex-start;
}
.u-flex-direction-column {
flex-direction: column;
}
.u-flex-nowrap {
flex-wrap: nowrap;
}
@media all and (min-width: 48.0625em) {
.u-flex-nowrap\@md {
flex-wrap: nowrap;
}
}
.u-flex-wrap {
flex-wrap: wrap;
}
.u-flex-1 {
flex: 1;
}
.u-flex-2 {
flex: 2;
}
.u-flex-3 {
flex: 3;
}
.u-flex-4 {
flex: 4;
}
.u-flex-5 {
flex: 5;
}
.u-flex-6 {
flex: 6;
}
.u-flex-shrink {
flex: 0 0 auto;
}
.u-flex-grow {
flex: 1 1 auto;
}
.u-flex-1-100 {
flex: 1 100%;
}
.u-flex-1-54 {
flex: 1 54%;
}
.u-flex-1-46 {
flex: 1 46%;
}
.u-flex-direction-column {
flex-direction: column;
}
@media all and (min-width: 65em) {
.u-flex-direction-column\@1040 {
flex-direction: column;
}
}
@media all and (min-width: 48.0625em) {
.u-flex-direction-row\@md {
flex-direction: row;
}
}
@media all and (min-width: 75em) {
.u-flex-direction-row\@xl {
flex-direction: row;
}
}
@media all and (min-width: 48.0625em) {
.u-flex-wrap-wrap\@md {
flex-wrap: wrap;
}
}
@media all and (max-width: 61.1875em) {
.u-flex-direction-column-reverse\@lt-lg {
flex-direction: column-reverse;
}
}
@media all and (max-width: 48em) {
.u-flex-direction-column-reverse\@lt-md {
flex-direction: column-reverse;
}
}
@media all and (max-width: 63.9375em) {
.u-justify-content-center\@lt-1024 {
justify-content: center;
}
}
@media all and (max-width: 48em) {
.u-justify-content-space-evenly\@lt-md {
justify-content: space-evenly;
}
}
@media all and (max-width: 38.6875em) {
.u-flex-1-1-auto\@lt-620 {
flex: 1 1 auto !important;
}
}
@media all and (max-width: 29.9375em) {
.u-flex-1\@lt-sm {
flex: 1;
}
}
@media all and (min-width: 48.0625em) {
.u-flex-direction-row-reverse\@md {
flex-direction: row-reverse;
}
}
@media all and (min-width: 48.0625em) {
.u-flex-2\@md {
flex: 2;
}
}
@media all and (min-width: 48.0625em) {
.u-flex-4\@md {
flex: 4;
}
}
@media all and (min-width: 48.0625em) {
.u-flex-3\@md {
flex: 3;
}
}
@media all and (max-width: 63.9375em) {
.u-align-items-center\@lt-1024 {
align-items: center;
}
}
.u-font-size-100\% {
font-size: 100%;
}
.u-font-size-xs {
font-size: 0.625em;
}
.u-font-size-13 {
font-size: 0.8125em;
}
.u-font-size-14 {
font-size: 0.875em;
}
.u-font-size-18 {
font-size: 1.125em;
}
.u-font-size-21 {
font-size: 1.3125em;
}
.u-font-size-25 {
font-size: 1.5625em;
letter-spacing: 0.03em;
}
.u-font-size-30 {
font-size: 30px;
}
.u-font-style-italic {
font-style: italic;
}
.u-font-style-normal {
font-style: normal;
}
.u-text-decoration-none {
text-decoration: none;
}
.u-text-decoration-underline {
text-decoration: underline;
}
.u-nowrap {
white-space: nowrap;
}
.u-font-weight-600 {
font-weight: 600;
}
.u-font-weight-bold {
font-weight: bold;
}
.u-font-weight-400 {
font-weight: 400;
}
.u-line-height-0\.8 {
line-height: 0.8;
}
.u-line-height-0 {
line-height: 0;
}
.u-line-height-1 {
line-height: 1;
}
.u-margin-horizontal-auto {
margin-right: auto;
margin-left: auto;
}
.u-margin-horizontal-10 {
margin-right: 10px;
margin-left: 10px;
}
.u-margin-horizontal-5 {
margin-right: 5px;
margin-left: 5px;
}
.u-margin-horizontal-3 {
margin-right: 3px;
margin-left: 3px;
}
.u-margin-horizontal-0 {
margin-right: 0px;
margin-left: 0px;
}
.u-margin-horizontal-sm {
margin-right: 1.875em;
margin-left: 1.875em;
}
.u-margin-vertical-0 {
margin-top: 0;
margin-bottom: 0;
}
.u-margin-vertical-xxs {
margin-top: 0.625em;
margin-bottom: 0.625em;
}
.u-margin-vertical-xs {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.u-margin-vertical-sm {
margin-top: 1.875em;
margin-bottom: 1.875em;
}
.u-margin-vertical-md {
margin-top: 3em;
margin-bottom: 3em;
}
.u-margin-vertical-lg {
margin-top: 4em;
margin-bottom: 4em;
}
.u-margin-vertical-xl {
margin-top: 5em;
margin-bottom: 5em;
}
.u-margin-vertical-xxl {
margin-top: 10.625em;
margin-bottom: 10.625em;
}
.u-margin-top-3 {
margin-top: 3px;
}
.u-margin-top-xxs {
margin-top: 0.625em;
}
.u-margin-top-xs {
margin-top: 1.25em;
}
.u-margin-top-sm {
margin-top: 1.875em;
}
.u-margin-top-md {
margin-top: 3em;
}
.u-margin-top-lg {
margin-top: 4em;
}
.u-margin-top-xl {
margin-top: 5em;
}
.u-margin-top-xxl {
margin-top: 10.625em;
}
.u-margin-right-3 {
margin-right: 3px;
}
.u-margin-right-auto {
margin-right: auto;
}
.u-margin-right-xxs {
margin-right: 0.625em;
}
.u-margin-right-xs {
margin-right: 1.25em;
}
.u-margin-bottom-0 {
margin-bottom: 0;
}
.u-margin-bottom-xxxs {
margin-bottom: 3px;
}
.u-margin-bottom-xxs {
margin-bottom: 0.625em;
}
.u-margin-bottom-xs {
margin-bottom: 1.25em;
}
.u-margin-bottom-sm {
margin-bottom: 1.875em;
}
.u-margin-bottom-md {
margin-bottom: 3em;
}
.u-margin-bottom-lg {
margin-bottom: 4em;
}
.u-margin-bottom-xl {
margin-bottom: 5em;
}
.u-margin-bottom-xxl {
margin-bottom: 10.625em;
}
.u-margin-left-auto {
margin-left: auto;
}
.u-margin-left-0 {
margin-left: 0;
}
.u-margin-left-xxs {
margin-left: 0.625em;
}
.u-margin-left-xs {
margin-left: 1.25em;
}
.u-margin-left-40px {
margin-left: 40px;
}
@media all and (max-width: 61.1875em) {
.u-margin-vertical-xs\@lt-lg {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
}
@media all and (max-width: 61.1875em) {
.u-margin-top-md\@lt-lg {
margin-top: 3em;
}
}
@media all and (max-width: 56.1875em) {
.u-margin-vertical-xs\@lt-900 {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
}
@media all and (max-width: 48em) {
.u-margin-vertical-lg\@lt-md {
margin-top: 4em;
margin-bottom: 4em;
}
}
@media all and (max-width: 48em) {
.u-margin-vertical-md\@lt-md {
margin-top: 3em;
margin-bottom: 3em;
}
}
@media all and (max-width: 56.1875em) {
.u-margin-top-sm\@lt-900 {
margin-top: 1.875em;
}
}
@media all and (max-width: 56.1875em) {
.u-margin-top-md\@lt-900 {
margin-top: 3em;
}
}
@media all and (max-width: 48em) {
.u-margin-bottom-sm\@lt-md {
margin-bottom: 3em;
}
}
@media all and (max-width: 56.1875em) {
.u-margin-bottom-md\@lt-900 {
margin-bottom: 3em;
}
}
@media all and (max-width: 29.9375em) {
.u-margin-bottom-md\@lt-sm {
margin-bottom: 3em;
}
}
@media all and (max-width: 48em) {
.u-margin-bottom-xl\@lt-md {
margin-bottom: 5em;
}
}
@media all and (max-width: 54.3125em) {
.u-margin-bottom-sm\@lt-870 {
margin-bottom: 1.875em;
}
}
@media all and (max-width: 48em) {
.u-margin-horizontal-5\@lt-md {
margin-right: 5px;
margin-left: 5px;
}
}
@media all and (max-width: 48em) {
.u-margin-right-xs\@lt-md {
margin-right: 1.25em;
}
}
@media all and (max-width: 48em) {
.u-margin-bottom-xs\@lt-md {
margin-bottom: 1.25em;
}
}
@media all and (max-width: 48em) {
.u-margin-bottom-sm\@lt-md {
margin-bottom: 1.875em;
}
}
@media all and (max-width: 48em) {
.u-margin-bottom-md\@lt-md {
margin-bottom: 3em;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-bottom-sm\@lt-1024 {
margin-bottom: 1.875em;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-bottom-md\@lt-1024 {
margin-bottom: 3em;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-bottom-lg\@lt-1024 {
margin-bottom: 4em;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-right-xs\@lt-1024 {
margin-right: 1.25em;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-right-xxs\@lt-1024 {
margin-right: 0.625em;
}
}
@media all and (max-width: 48em) {
.u-margin-top-md\@lt-md {
margin-top: 3em;
}
}
@media all and (max-width: 48em) {
.u-margin-top-sm\@lt-md {
margin-top: 1.875em;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-top-sm\@lt-1024 {
margin-top: 1.875em;
}
}
@media all and (max-width: 48em) {
.u-margin-horizontal-auto\@lt-md {
margin-right: auto;
margin-left: auto;
}
}
@media all and (max-width: 63.9375em) {
.u-margin-horizontal-auto\@lt-1024 {
margin-right: auto;
margin-left: auto;
}
}
@media all and (max-width: 64.9375em) {
.u-margin-horizontal-auto\@lt-1040 {
margin-right: auto;
margin-left: auto;
}
}
@media all and (max-width: 48em) {
.u-margin-top-lg\@lt-md {
margin-top: 4em;
}
}
@media all and (max-width: 29.9375em) {
.u-margin-top-xs\@lt-sm {
margin-top: 1.25em;
}
}
@media all and (max-width: 48em) {
.u-margin-top-xs\@lt-md {
margin-top: 1.25em;
}
}
@media all and (max-width: 29.9375em) {
.u-margin-right-xs\@lt-sm {
margin-right: 1.25em;
}
}
@media all and (max-width: 29.9375em) {
.u-margin-bottom-xs\@lt-sm {
margin-bottom: 1.25em;
}
}
@media all and (max-width: 61.1875em) {
.u-margin-top-sm\@lt-lg {
margin-top: 1.875em;
}
}
@media all and (max-width: 72.4375em) {
.u-margin-bottom-sm\@lt-1160 {
margin-bottom: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-vertical-0\@md {
margin-top: 0;
margin-bottom: 0;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-bottom-xxs\@md {
margin-bottom: 0.625em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-bottom-xs\@md {
margin-bottom: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-bottom-xl\@md {
margin-bottom: 5em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-vertical-xxs\@md {
margin-top: 0.625em;
margin-bottom: 0.625em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-vertical-md\@md {
margin-top: 3em;
margin-bottom: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-vertical-lg\@md {
margin-top: 4em;
margin-bottom: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-top-xxs\@md {
margin-top: 0.625em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-top-xs\@md {
margin-top: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-top-md\@md {
margin-top: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-top-lg\@md {
margin-top: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-horizontal-sm\@md {
margin-right: 1.875em;
margin-left: 1.875em;
}
}
@media all and (min-width: 65em) {
.u-margin-horizontal-auto\@1040 {
margin-right: auto;
margin-left: auto;
}
}
@media all and (min-width: 30em) {
.u-margin-vertical-xs\@sm {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
}
@media all and (min-width: 30em) {
.u-margin-top-xs\@sm {
margin-top: 1.25em;
}
}
@media all and (min-width: 30em) {
.u-margin-right-xs\@sm {
margin-right: 1.25em;
}
}
@media all and (min-width: 30em) {
.u-margin-bottom-sm\@sm {
margin-bottom: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-bottom-lg\@md {
margin-bottom: 4em;
}
}
@media all and (min-width: 75em) {
.u-margin-bottom-lg\@xl {
margin-bottom: 4em;
}
}
@media all and (min-width: 30em) {
.u-margin-left-auto\@sm {
margin-left: auto;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-left-auto\@md {
margin-left: auto;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-left-0\@md {
margin-left: 0;
}
}
@media all and (min-width: 64em) {
.u-margin-left-0\@1024 {
margin-left: 0;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-left-md\@md {
margin-left: 3em;
}
}
@media all and (min-width: 56.25em) {
.u-margin-bottom-sm\@900 {
margin-bottom: 1.875em;
}
}
@media all and (min-width: 61.25em) {
.u-margin-top-xl\@lg {
margin-top: 5em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-top-xl\@md {
margin-top: 5em;
}
}
@media all and (min-width: 75em) {
.u-margin-top-xl\@xl {
margin-top: 5em;
}
}
@media all and (min-width: 61.25em) {
.u-margin-bottom-sm\@lg {
margin-bottom: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-margin-top-sm\@md {
margin-top: 1.875em;
}
}
@media all and (min-width: 61.25em) {
.u-margin-top-sm\@lg {
margin-top: 1.875em;
}
}
@media all and (min-width: 75em) {
.u-margin-top-sm\@xl {
margin-top: 1.875em;
}
}
@media all and (min-width: 65em) {
.u-margin-top-sm\@1040 {
margin-top: 1.875em;
}
}
@media all and (min-width: 91.25em) {
.u-margin-bottom-xxl\@1460 {
margin-bottom: 10.625em;
}
}
.u-max-width-none {
max-width: none;
}
.u-max-width-100 {
max-width: 6.25em;
}
.u-max-width-150 {
max-width: 9.375em;
}
.u-max-width-180 {
max-width: 11.25em;
}
.u-max-width-240 {
max-width: 15em;
}
.u-max-width-280 {
max-width: 17.5em;
}
.u-max-width-320 {
max-width: 20em;
}
.u-max-width-340 {
max-width: 21.25em;
}
.u-max-width-350 {
max-width: 21.875em;
}
.u-max-width-360 {
max-width: 22.5em;
}
.u-max-width-370 {
max-width: 23.125em;
}
.u-max-width-380 {
max-width: 23.75em;
}
.u-max-width-400 {
max-width: 25em;
}
.u-max-width-410 {
max-width: 25.625em;
}
.u-max-width-430 {
max-width: 26.875em;
}
.u-max-width-450 {
max-width: 28.125em;
}
.u-max-width-480 {
max-width: 30em;
}
.u-max-width-500 {
max-width: 31.25em;
}
.u-max-width-500px {
max-width: 500px;
}
.u-max-width-540px {
max-width: 540px;
}
.u-max-width-530px {
max-width: 530px;
}
.u-max-width-550 {
max-width: 34.375em;
}
.u-max-width-600 {
max-width: 37.5em;
}
.u-max-width-640 {
max-width: 40em;
}
.u-max-width-700 {
max-width: 43.75em;
}
.u-max-width-720 {
max-width: 45em;
}
.u-max-width-760 {
max-width: 47.5em;
}
.u-max-width-900 {
max-width: 56.25em;
}
.u-max-width-960 {
max-width: 60em;
}
.u-max-width-1000 {
max-width: 62.5em;
}
.u-max-width-1000px {
max-width: 1000px;
}
.u-max-width-1100px {
max-width: 1100px;
}
.u-max-width-1040 {
max-width: 65em;
}
.u-max-width-1200 {
max-width: 75em;
}
.u-max-width-1400 {
max-width: 87.5em;
}
.u-max-width-1500 {
max-width: 93.75em;
}
.u-max-width-1600 {
max-width: 100em;
}
@media all and (max-width: 56.1875em) {
.u-max-width-300\@lt-900 {
max-width: 18.75em;
}
}
@media all and (max-width: 29.9375em) {
.u-max-width-240\@lt-sm {
max-width: 15em;
}
}
@media all and (min-width: 48.0625em) {
.u-max-width-430\@md {
max-width: 26.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-max-width-450\@md {
max-width: 28.125em;
}
}
@media all and (min-width: 48.0625em) {
.u-max-width-350\@md {
max-width: 21.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-max-width-380\@md {
max-width: 23.75em;
}
}
@media all and (min-width: 48.0625em) {
.u-max-width-200\@md {
max-width: 200px;
}
}
@media all and (min-width: 48.0625em) {
.u-max-width-240\@md {
max-width: 15em;
}
}
@media all and (min-width: 87.5em) {
.u-max-width-640\@1400 {
max-width: 40em;
}
}
@media all and (min-width: 87.5em) {
.u-max-width-900\@1400 {
max-width: 56.25em;
}
}
@media all and (min-width: 38.75em) {
.u-max-width-170\@620 {
max-width: 10.625em;
}
}
@media all and (min-width: 42.5em) {
.u-max-width-425\@680 {
max-width: 425px;
}
}
@media all and (min-width: 64em) {
.u-max-width-380\@1024 {
max-width: 380px;
}
}
@media all and (min-width: 65em) {
.u-max-width-380\@1040 {
max-width: 380px;
}
}
.u-min-height-100vh {
min-height: 100vh;
}
.u-min-height-250 {
min-height: 250px;
}
@media all and (max-width: 48em) {
.u-min-height-100\%\@lt-md {
min-height: 100%;
}
}
@media all and (min-width: 61.25em) {
.u-min-height-700\@lg {
min-height: 43.75em;
}
}
@media all and (min-width: 61.25em) {
.u-max-height-675\@lg {
max-height: 42.1875em;
}
}
@media all and (min-width: 30em) {
.u-max-height-150\@sm {
max-height: 9.375em;
}
}
@media all and (max-width: 48em) {
.u-max-height-none\@lt-md {
max-height: none;
}
}
.u-object-fit-cover-100\% {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
@media all and (max-width: 63.9375em) {
.u-object-fit-cover-100\%\@lt-1024 {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
}
@media all and (max-width: 64.9375em) {
.u-object-fit-cover-100\%\@lt-1040 {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
}
@media all and (max-width: 74.9375em) {
.u-object-fit-cover-100\%\@lt-xl {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
}
@media all and (min-width: 48.0625em) {
.u-object-fit-cover-100\%\@md {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
}
@media all and (max-width: 64.9375em) {
.u-object-fit-cover-100\%\@lt-1040 {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
}
.u-object-position-center-2\/3 {
-o-object-position: 50% 66.6666666667%;
object-position: 50% 66.6666666667%;
}
.u-object-position-center-bottom {
-o-object-position: center bottom;
object-position: center bottom;
}
.u-object-position-top-right {
-o-object-position: right top;
object-position: right top;
}
.u-opacity-0 {
opacity: 0;
}
.u-opacity-0\.5 {
opacity: 0.5;
}
.u-opacity-0\.7 {
opacity: 0.7;
}
.u-opacity-0\.8 {
opacity: 0.8;
}
.u-overflow-auto {
overflow: auto;
}
.u-overflow-hidden {
overflow: hidden;
}
.u-overflow-scroll {
overflow: scroll;
}
.u-overflow-visible {
overflow: visible;
}
.u-overflow-visible\! {
overflow: visible !important;
}
.u-padding-xxs {
padding: 0.625em;
}
.u-padding-xs {
padding: 1.25em;
}
.u-padding-sm {
padding: 1.875em;
}
.u-padding-md {
padding: 3em;
}
.u-padding-lg {
padding: 4em;
}
.u-padding-0 {
padding: 0;
}
.u-padding-horizontal-xxs {
padding-right: 0.625em;
padding-left: 0.625em;
}
.u-padding-horizontal-xs {
padding-right: 1.25em;
padding-left: 1.25em;
}
.u-padding-horizontal-sm {
padding-right: 1.875em;
padding-left: 1.875em;
}
.u-padding-horizontal-md {
padding-right: 3em;
padding-left: 3em;
}
.u-padding-horizontal-lg {
padding-right: 4em;
padding-left: 4em;
}
.u-padding-horizontal-xl {
padding-right: 5em;
padding-left: 5em;
}
.u-padding-vertical-xxs {
padding-top: 0.625em;
padding-bottom: 0.625em;
}
.u-padding-vertical-xs {
padding-top: 1.25em;
padding-bottom: 1.25em;
}
.u-padding-vertical-sm {
padding-top: 1.875em;
padding-bottom: 1.875em;
}
.u-padding-vertical-md {
padding-top: 3em;
padding-bottom: 3em;
}
.u-padding-vertical-lg {
padding-top: 4em;
padding-bottom: 4em;
}
.u-padding-vertical-xl {
padding-top: 5em;
padding-bottom: 5em;
}
.u-padding-top-0 {
padding-top: 0;
}
.u-padding-top-xxs {
padding-top: 0.625em;
}
.u-padding-top-xs {
padding-top: 1.25em;
}
.u-padding-top-sm {
padding-top: 1.875em;
}
.u-padding-top-md {
padding-top: 3em;
}
.u-padding-top-lg {
padding-top: 4em;
}
.u-padding-top-xl {
padding-top: 5em;
}
.u-padding-top-xxl {
padding-top: 10.625em;
}
.u-padding-right-xxs {
padding-right: 0.625em;
}
.u-padding-right-xs {
padding-right: 1.25em;
}
.u-padding-right-sm {
padding-right: 1.875em;
}
.u-padding-right-md {
padding-right: 3em;
}
.u-padding-right-lg {
padding-right: 4em;
}
.u-padding-right-xl {
padding-right: 5em;
}
.u-padding-bottom-0 {
padding-bottom: 0;
}
.u-padding-bottom-xxxs-px {
padding-bottom: 2px;
}
.u-padding-bottom-xxs {
padding-bottom: 0.625em;
}
.u-padding-bottom-xs {
padding-bottom: 1.25em;
}
.u-padding-bottom-sm {
padding-bottom: 1.875em;
}
.u-padding-bottom-md {
padding-bottom: 3em;
}
.u-padding-bottom-lg {
padding-bottom: 4em;
}
.u-padding-bottom-xl {
padding-bottom: 5em;
}
.u-padding-bottom-xxl {
padding-bottom: 10.625em;
}
.u-padding-left-xxs {
padding-left: 0.625em;
}
.u-padding-left-xs {
padding-left: 1.25em;
}
.u-padding-left-sm {
padding-left: 1.875em;
}
.u-padding-left-md {
padding-left: 3em;
}
.u-padding-left-lg {
padding-left: 4em;
}
@media all and (max-width: 61.1875em) {
.u-padding-bottom-xxl\@lt-lg {
padding-bottom: 10.625em;
}
}
@media all and (max-width: 61.1875em) {
.u-padding-horizontal-sm\@lt-lg {
padding-right: 1.875em;
padding-left: 1.875em;
}
}
@media all and (max-width: 56.1875em) {
.u-padding-vertical-xs\@lt-900 {
padding-top: 1.25em;
padding-bottom: 1.25em;
}
}
@media all and (max-width: 29.9375em) {
.u-padding-vertical-xxl\@lt-sm {
padding-top: 3em;
padding-bottom: 3em;
}
}
@media all and (max-width: 48em) {
.u-padding-vertical-md\@lt-md {
padding-top: 3em;
padding-bottom: 3em;
}
}
@media all and (max-width: 48em) {
.u-padding-vertical-lg\@lt-md {
padding-top: 4em;
padding-bottom: 4em;
}
}
@media all and (max-width: 48em) {
.u-padding-vertical-xl\@lt-md {
padding-top: 5em;
padding-bottom: 5em;
}
}
@media all and (max-width: 48em) {
.u-padding-top-xl\@lt-md {
padding-top: 5em;
}
}
@media all and (max-width: 48em) {
.u-padding-top-md\@lt-md {
padding-top: 3em;
}
}
@media all and (max-width: 48em) {
.u-padding-top-xxs\@lt-md {
padding-top: 0.625em;
}
}
@media all and (max-width: 48em) {
.u-padding-top-sm\@lt-md {
padding-top: 1.875em;
}
}
@media all and (max-width: 48em) {
.u-padding-right-xs\@lt-md {
padding-right: 1.25em;
}
}
@media all and (max-width: 48em) {
.u-padding-bottom-xs\@lt-md {
padding-bottom: 1.25em;
}
}
@media all and (max-width: 48em) {
.u-padding-bottom-sm\@lt-md {
padding-bottom: 1.875em;
}
}
@media all and (max-width: 48em) {
.u-padding-bottom-md\@lt-md {
padding-bottom: 3em;
}
}
@media all and (max-width: 48em) {
.u-padding-bottom-lg\@lt-md {
padding-bottom: 4em;
}
}
@media all and (max-width: 48em) {
.u-padding-bottom-xl\@lt-md {
padding-bottom: 5em;
}
}
@media all and (max-width: 63.9375em) {
.u-padding-top-xl\@lt-1024 {
padding-top: 5em;
}
}
@media all and (max-width: 63.9375em) {
.u-padding-top-lg\@lt-1024 {
padding-top: 4em;
}
}
@media all and (max-width: 48em) {
.u-padding-bottom-200\@lt-md {
padding-bottom: 200px;
}
}
@media all and (max-width: 48em) {
.u-padding-left-md\@lt-md {
padding-left: 3em;
}
}
@media all and (max-width: 48em) {
.u-padding-horizontal-md\@lt-md {
padding-right: 3em;
padding-left: 3em;
}
}
@media all and (max-width: 29.9375em) {
.u-padding-bottom-sm\@lt-sm {
padding-bottom: 1.875em;
}
}
@media all and (max-width: 29.9375em) {
.u-padding-vertical-sm\@lt-sm {
padding-top: 1.875em;
padding-bottom: 1.875em;
}
}
@media all and (min-width: 25.75em) {
.u-padding-bottom-sm\@412 {
padding-bottom: 1.875em;
}
}
@media all and (min-width: 30em) {
.u-padding-vertical-sm\@sm {
padding-top: 1.875em;
padding-bottom: 1.875em;
}
}
@media all and (min-width: 30em) {
.u-padding-horizontal-sm\@sm {
padding-right: 1.875em;
padding-left: 1.875em;
}
}
@media all and (min-width: 30em) {
.u-padding-bottom-md\@sm {
padding-bottom: 3em;
}
}
@media all and (min-width: 30em) {
.u-padding-bottom-sm\@sm {
padding-bottom: 1.875em;
}
}
@media all and (min-width: 30em) {
.u-padding-bottom-xs\@sm {
padding-bottom: 1.25em;
}
}
@media all and (min-width: 30em) {
.u-padding-left-sm\@sm {
padding-left: 1.875em;
}
}
@media all and (min-width: 30em) {
.u-padding-left-md\@sm {
padding-left: 3em;
}
}
@media all and (min-width: 38.75em) {
.u-padding-horizontal-sm\@620 {
padding-right: 1.875em;
padding-left: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-lg\@md {
padding: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-md\@md {
padding: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-sm\@md {
padding: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-xs\@md {
padding: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-xxs\@md {
padding: 0.625em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-right-sm\@md {
padding-right: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-xs\@md {
padding-right: 1.25em;
padding-left: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-sm\@md {
padding-right: 1.875em;
padding-left: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-md\@md {
padding-right: 3em;
padding-left: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-lg\@md {
padding-right: 4em;
padding-left: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-xl\@md {
padding-right: 5em;
padding-left: 5em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-100px\@md {
padding-right: 100px;
padding-left: 100px;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-horizontal-20px\@md {
padding-right: 20px;
padding-left: 20px;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-vertical-md\@md {
padding-top: 3em;
padding-bottom: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-vertical-45\@md {
padding-top: 45px;
padding-bottom: 45px;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-bottom-35\@md {
padding-bottom: 35px;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-vertical-lg\@md {
padding-top: 4em;
padding-bottom: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-vertical-xl\@md {
padding-top: 5em;
padding-bottom: 5em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-right-md\@md {
padding-right: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-right-lg\@md {
padding-right: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-bottom-xxs\@md {
padding-bottom: 0.625em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-bottom-xs\@md {
padding-bottom: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-bottom-sm\@md {
padding-bottom: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-bottom-lg\@md {
padding-bottom: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-left-lg\@md {
padding-left: 4em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-left-md\@md {
padding-left: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-left-sm\@md {
padding-left: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-top-xs\@md {
padding-top: 1.25em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-top-sm\@md {
padding-top: 1.875em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-top-md\@md {
padding-top: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-top-lg\@md {
padding-top: 4em;
}
}
@media all and (min-width: 61.25em) {
.u-padding-top-lg\@lg {
padding-top: 4em;
}
}
@media all and (min-width: 85.625em) {
.u-padding-top-md\@1370 {
padding-top: 3em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-top-xl\@md {
padding-top: 5em;
}
}
@media all and (min-width: 48.0625em) {
.u-padding-top-xxl\@md {
padding-top: 10.625em;
}
}
@media all and (min-width: 61.25em) {
.u-padding-top-xl\@lg {
padding-top: 5em;
}
}
@media all and (min-width: 87.5em) {
.u-padding-top-xl\@1400 {
padding-top: 5em;
}
}
@media all and (min-width: 100em) {
.u-padding-top-xl\@1600 {
padding-top: 5em;
}
}
@media all and (min-width: 65em) {
.u-padding-horizontal-xxs\@1040 {
padding-right: 0.625em;
padding-left: 0.625em;
}
}
@media all and (min-width: 65em) {
.u-padding-horizontal-xs\@1040 {
padding-right: 1.25em;
padding-left: 1.25em;
}
}
@media all and (min-width: 65em) {
.u-padding-horizontal-md\@1040 {
padding-right: 3em;
padding-left: 3em;
}
}
@media all and (min-width: 65em) {
.u-padding-horizontal-lg\@1040 {
padding-right: 4em;
padding-left: 4em;
}
}
@media all and (min-width: 65em) {
.u-padding-horizontal-xl\@1040 {
padding-right: 5em;
padding-left: 5em;
}
}
@media all and (min-width: 65em) {
.u-padding-right-lg\@1040 {
padding-right: 4em;
}
}
@media all and (min-width: 65em) {
.u-padding-left-md\@1040 {
padding-left: 3em;
}
}
@media all and (min-width: 75em) {
.u-padding-bottom-xl\@xl {
padding-bottom: 5em;
}
}
.u-pointer-events-none {
pointer-events: none;
}
.u-pointer-events-auto {
pointer-events: auto;
}
@media all and (max-width: 48em) {
.u-pointer-events-none\@lt-md {
pointer-events: none;
}
}
@media all and (max-width: 48em) {
.u-pointer-events-auto\@lt-md {
pointer-events: auto;
}
}
@media all and (min-width: 48.0625em) {
.u-pointer-events-none\@md {
pointer-events: none;
}
}
@media all and (min-width: 48.0625em) {
.u-pointer-events-auto\@md {
pointer-events: auto;
}
}
.u-position-static {
position: static;
}
.u-position-relative {
position: relative;
}
.u-position-absolute {
position: absolute;
}
.u-position-fixed {
position: fixed;
}
.u-position-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.u-position-bottom-center {
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
.u-position-top-center {
top: 0;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
.u-position-bottom-left {
bottom: 0;
left: 0;
position: absolute;
}
.u-position-top-right {
top: 0;
right: 0;
position: absolute;
}
.u-position-cover {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.u-position-right-center {
top: 50%;
transform: translate(0, -50%);
right: 0;
position: absolute;
}
.u-bottom-0 {
bottom: 0;
}
.u-left-0 {
left: 0;
}
@media all and (max-width: 48em) {
.u-position-bottom-center\@lt-md {
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
}
@media all and (min-width: 48.0625em) {
.u-position-cover\@md {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (min-width: 30em) {
.u-position-cover\@sm {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (min-width: 42.5em) {
.u-position-cover\@680 {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (max-width: 63.9375em) {
.u-position-cover\@lt-1024 {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (max-width: 42.4375em) {
.u-position-cover\@lt-680 {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (max-width: 61.1875em) {
.u-position-cover\@lt-lg {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (max-width: 48em) {
.u-position-cover\@lt-md {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 0);
position: absolute;
}
}
@media all and (min-width: 61.25em) {
.u-position-center\@lg {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
@media all and (min-width: 42.5em) {
.u-position-center\@680 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
@media all and (min-width: 48.0625em) {
.u-position-center\@md {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
@media all and (min-width: 65em) {
.u-position-center\@1040 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
@media all and (min-width: 48.0625em) {
.u-position-top-center\@md {
top: 0;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
}
@media all and (max-width: 63.9375em) {
.u-position-center\@lt-1024 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
@media all and (max-width: 63.9375em) {
.u-position-top-center\@lt-1024 {
top: 0;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
}
@media all and (max-width: 64.9375em) {
.u-position-center\@lt-1040 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
@media all and (max-width: 64.9375em) {
.u-position-top-center\@lt-1040 {
top: 0;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
}
.u-break-inside-avoid {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.u-rotate-180 {
transform: rotate(180deg);
}
.u-text-align-right {
text-align: right;
}
.u-text-align-center {
text-align: center;
}
.u-text-align-left {
text-align: left;
}
@media all and (max-width: 56.1875em) {
.u-text-align-center\@lt-900 {
text-align: center;
}
}
@media all and (max-width: 38.6875em) {
.u-text-align-center\@lt-620 {
text-align: center;
}
}
@media all and (max-width: 29.9375em) {
.u-text-align-center\@lt-sm {
text-align: center;
}
}
@media all and (min-width: 48.0625em) {
.u-text-align-right\@md {
text-align: right;
}
}
@media all and (min-width: 48.0625em) {
.u-text-align-left\@md {
text-align: left;
}
}
@media all and (min-width: 64em) {
.u-text-align-left\@1024 {
text-align: left;
}
}
.u-text-transform-uppercase {
text-transform: uppercase;
}
.u-text-transform-lowercase {
text-transform: lowercase;
}
.u-user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.u-vertical-align-middle {
vertical-align: middle;
}
.u-vertical-align-baseline {
vertical-align: baseline;
}
.u-width-60 {
width: 3.75em;
}
.u-width-100 {
width: 6.25em;
}
.u-width-145 {
width: 9.0625em;
}
.u-width-1\/1 {
width: 100%;
}
.u-width-1\/2 {
width: 50%;
}
.u-width-1\/3 {
width: 33.3333333333%;
}
.u-width-2\/3 {
width: 66.6666666667%;
}
.u-width-1\/4 {
width: 25%;
}
.u-width-3\/4 {
width: 75%;
}
.u-width-1\/5 {
width: 20%;
}
.u-width-2\/5 {
width: 40%;
}
.u-width-4\/5 {
width: 80%;
}
.u-width-9\/10 {
width: 90%;
}
.u-width-29\/100 {
width: 29%;
}
@media all and (max-width: 48em) {
.u-width-1\/2\@lt-md {
width: 50%;
}
}
@media all and (max-width: 29.9375em) {
.u-width-1\/1\@lt-sm {
width: 100%;
}
}
@media all and (max-width: 29.9375em) {
.u-width-2\/3\@lt-sm {
width: 66.6666666667%;
}
}
@media all and (max-width: 48em) {
.u-width-1\/1\@lt-md {
width: 100%;
}
}
@media all and (max-width: 48em) {
.u-width-1\/3\@lt-md {
width: 33.3333333333%;
}
}
@media all and (max-width: 48em) {
.u-width-3\/4\@lt-md {
width: 75%;
}
}
@media all and (max-width: 64.9375em) {
.u-width-1\/1\@lt-1040 {
width: 100%;
}
}
@media all and (min-width: 22.5em) {
.u-width-1\/2\@360 {
width: 50%;
}
}
@media all and (min-width: 38.75em) {
.u-width-1\/2\@620 {
width: 50%;
}
}
@media all and (min-width: 30em) {
.u-width-1\/2\@sm {
width: 50%;
}
}
@media all and (min-width: 30em) {
.u-width-1\/3\@sm {
width: 33.3333333333%;
}
}
@media all and (min-width: 30em) {
.u-width-2\/3\@sm {
width: 66.6666666667%;
}
}
@media all and (min-width: 30em) {
.u-width-1\/4\@sm {
width: 25%;
}
}
@media all and (min-width: 30em) {
.u-width-3\/4\@sm {
width: 75%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-1\/1\@md {
width: 100%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-1\/2\@md {
width: 50%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-1\/3\@md {
width: 33.3333333333%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-2\/3\@md {
width: 66.6666666667%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-1\/4\@md {
width: 25%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-1\/5\@md {
width: 20%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-2\/5\@md {
width: 40%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-3\/5\@md {
width: 60%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-4\/5\@md {
width: 80%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-3\/4\@md {
width: 75%;
}
}
@media all and (min-width: 48.0625em) {
.u-width-9\/10\@md {
width: 90%;
}
}
@media all and (min-width: 61.25em) {
.u-width-1\/2\@lg {
width: 50%;
}
}
@media all and (min-width: 61.25em) {
.u-width-1\/4\@lg {
width: 25%;
}
}
@media all and (min-width: 61.25em) {
.u-width-2\/3\@lg {
width: 66.6666666667%;
}
}
@media all and (min-width: 61.25em) {
.u-width-3\/4\@lg {
width: 75%;
}
}
@media all and (min-width: 81.25em) {
.u-width-2\/3\@1300 {
width: 66.6666666667%;
}
}
@media all and (min-width: 72.5em) {
.u-width-3\/4\@1160 {
width: 75%;
}
}
@media all and (min-width: 72.5em) {
.u-width-9\/10\@1160 {
width: 90%;
}
}
@media all and (min-width: 87.5em) {
.u-width-3\/5\@1400 {
width: 60%;
}
}
@media all and (min-width: 100em) {
.u-width-3\/5\@1600 {
width: 60%;
}
}
@media all and (min-width: 65em) {
.u-width-1\/2\@1040 {
width: 50%;
}
}
@media all and (min-width: 65em) {
.u-width-3\/4\@1040 {
width: 75%;
}
}
@media all and (min-width: 42.5em) {
.u-width-1\/1\@680 {
width: 100%;
}
}
@media all and (min-width: 54.375em) {
.u-width-1\/2\@870 {
width: 50%;
}
}
@media all and (min-width: 54.375em) {
.u-width-1\/3\@870 {
width: 33.3333333333%;
}
}
@media all and (min-width: 56.25em) {
.u-width-1\/1\@900 {
width: 100%;
}
}
@media all and (min-width: 56.25em) {
.u-width-1\/2\@900 {
width: 50%;
}
}
@media all and (min-width: 64em) {
.u-width-1\/2\@1024 {
width: 50%;
}
}
@media all and (min-width: 64em) {
.u-width-1\/3\@1024 {
width: 33.3333333333%;
}
}
@media all and (min-width: 87.5em) {
.u-width-1\/3\@1400 {
width: 33.3333333333%;
}
}
@media all and (min-width: 64em) {
.u-width-1\/4\@1024 {
width: 25%;
}
}
@media all and (min-width: 64em) {
.u-width-1\/5\@1024 {
width: 20%;
}
}
@media all and (min-width: 64em) {
.u-width-1\/1\@1024 {
width: 100%;
}
}
@media all and (min-width: 65em) {
.u-width-1\/1\@1040 {
width: 100%;
}
}
@media all and (min-width: 72.5em) {
.u-width-1\/4\@1160 {
width: 25%;
}
}
@media all and (min-width: 75em) {
.u-width-1\/4\@xl {
width: 25%;
}
}
@media all and (min-width: 75em) {
.u-width-1\/2\@xl {
width: 50%;
}
}
@media all and (min-width: 77.5em) {
.u-width-3\/4\@1240 {
width: 75%;
}
}
@media all and (min-width: 77.5em) {
.u-width-9\/10\@1240 {
width: 90%;
}
}
@media all and (max-width: 38.6875em) {
.u-width-1\/1\@lt-620 {
width: 100%;
}
}
@media all and (max-width: 42.4375em) {
.u-width-1\/1\@lt-680 {
width: 100%;
}
}
@media all and (min-width: 42.5em) {
.u-width-1\/1\@680 {
width: 100%;
}
}
@media (min-width: 50em) {
.u-width-1\/1\@800 {
width: 100%;
}
}
@media (min-width: 31.25em) {
.u-width-1\/1\@500 {
width: 50%;
}
}
@media (min-width: 31.25em) {
.u-width-1\/2\@500 {
width: 100%;
}
}
@media (min-width: 21.875em) {
.u-width-1\/1\@350 {
width: 100%;
}
}
.u-white-space-nowrap {
white-space: nowrap;
}
.float_left {
float: left;
margin-right: 20px;
}
.float_right {
float: right;
margin-left: 20px;
}
.c-position-zero {
overflow: visible;
}
@media all and (min-width: 48.0625em) {
.c-position-zero__header {
padding-top: 3em;
padding-bottom: 3em;
}
}
@media (min-width: 30em) and (max-width: 48em) {
.c-position-zero__grid {
margin-top: 3em;
}
}
.position-zero__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.25em 0;
}
@media all and (max-width: 29.9375em) {
.position-zero__content {
align-items: center;
text-align: left;
}
}
@media all and (min-width: 48.0625em) {
.position-zero__content {
padding: 3em;
}
}
@media (min-width: 68.75em) {
.position-zero__content {
padding: 4em;
}
}
@media all and (min-width: 30em) {
.c-position-zero__content {
padding-right: 4%;
padding-left: 4%;
}
.c-position-zero__list-item--right .c-position-zero__content {
align-items: flex-start;
padding-right: 0;
text-align: left;
}
.c-position-zero__list-item--left .c-position-zero__content {
align-items: flex-end;
padding-left: 0;
text-align: right;
}
}
@media all and (min-width: 30em) and (max-width: 48em) {
.c-position-zero__list-item--lg {
flex-direction: column-reverse;
margin-top: 1.875em;
}
.c-position-zero__list-item--lg .c-position-zero__content {
align-items: center;
text-align: left;
}
}
@media all and (max-width: 29.9375em) {
.c-position-zero__list-item {
margin-top: 1.875em;
}
}
@media (min-width: 48.0625em) and (max-width: 68.6875em) {
.c-position-zero__list-item {
padding-bottom: 6%;
}
.c-position-zero__list-item > * {
justify-content: flex-start;
padding-top: 0;
padding-bottom: 0;
}
}
.o-preserve-aspect-ratio--11x14 {
padding: 0 0 127.2727272727%;
}
.c-product-category-grid {
margin: -4px 0 0 -4px;
}
.c-product-category-grid > .o-grid__item {
padding: 4px 0 0 4px;
}
.c-product-category-card {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.1428571429em;
padding: 0.7142857143em;
background: rgba(26, 25, 23, 0.8);
font-size: 1.75em;
text-decoration: none;
}
.c-product-category-card:focus,
.c-product-category-card:active {
outline: none;
}
.c-product-category-card:hover,
.c-product-category-card:focus,
.c-product-category-card:active {
background: rgba(40, 38, 35, 0.8);
}
.c-product-category-card > span:first-child {
margin-right: 0.5em;
transform: translateY(5%);
font-size: 0.7617857143em;
}
.c-product-category-card > span:nth-child(2) {
flex: 1 1 auto;
color: #cdc9c3;
letter-spacing: 0.01em;
line-height: 0.8571428571;
}
.c-product-category-card > .c-icon {
flex: 0 0 auto;
margin-left: 0.5em;
}
.c-product-grid--alt {
counter-reset: recipe-counter 1;
justify-content: center;
}
.c-product-grid__item {
position: relative;
margin-bottom: 1.875em;
padding-bottom: 1.5em;
}
.c-product-grid__item::after {
display: block;
position: absolute;
bottom: 0;
left: 1.25em;
width: calc(100% - 1.25em);
border-bottom: 1px solid #A6192E;
content: "";
}
.c-product-grid--alt .c-product-grid__item {
counter-increment: recipe-counter;
}
.c-product-grid--alt .c-product-grid__item::after {
content: none;
}
.c-product-grid__link {
display: flex;
position: relative;
flex: 1 1 auto;
flex-direction: column;
color: #ab965d;
text-decoration: none;
}
.c-product-grid__link:hover,
.c-product-grid__link:focus,
.c-product-grid__link:active {
color: #c3aa86;
}
.c-product-grid__figure {
width: 100%;
margin-bottom: 1.5em;
}
.c-product-grid__caption {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 0.625em;
font-size: 1.125em;
letter-spacing: 0.01em;
line-height: 1.3333333333;
text-align: center;
}
@media all and (max-width: 42.4375em) {
.c-product-grid__caption {
font-size: 1em;
}
}
.c-product-grid__caption > p {
display: block;
width: 100%;
}
.c-product-grid--alt .c-product-grid__caption {
display: block;
}
.c-product-grid--alt .c-product-grid__caption > .c-heading::before {
font-variant: normal;
font-variant-caps: normal;
text-transform: none;
content: counter(recipe-counter, decimal-leading-zero);
display: block;
color: #8a7449;
font-style: italic;
}
.supports-font-features.wf-active .c-product-grid--alt .c-product-grid__caption > .c-heading::before {
font-variant-caps: initial;
font-feature-settings: initial;
}
.c-product-grid--alt .c-product-grid__caption > .c-heading::before sup {
top: 0.4em;
font-size: 100%;
}
.c-badge {
-webkit-transform-style: preserve-3d;
font-size: 1.125em;
letter-spacing: 0.05em;
display: inline-flex;
position: absolute;
top: 0.875em;
left: 0.875em;
align-items: center;
justify-content: center;
width: 5.2222222222em;
height: 5.2222222222em;
color: #ab965d;
text-decoration: none;
z-index: 10;
pointer-events: none;
}
.c-badge > * {
-webkit-backface-visibility: hidden;
}
.c-badge::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 200ms ease;
border: 2px solid rgba(171, 150, 93, 0.5);
border-radius: 50%;
content: "";
pointer-events: none;
width: 5.2222222222em;
height: 5.2222222222em;
}
@media all and (max-width: 42.4375em) {
.c-badge {
font-size: 1em;
}
}
.c-badge::after {
background: rgba(0, 0, 0, 0.7);
z-index: -1;
}
@media (min-width: 22.5em) and (max-width: 31.875em) {
.c-badge {
top: 5%;
left: 5%;
transform: scale(0.75);
transform-origin: 0 0;
}
}
@media all and (max-width: 56.1875em) {
.c-product-detail__content {
display: flex;
flex-wrap: wrap;
margin-top: -1em;
}
.c-product-detail__sidebar {
order: -1;
width: 100%;
margin-bottom: 1.875em;
}
.c-view-nav {
display: none;
}
.o-carousel .flickity-page-dots {
position: absolute;
right: 0.5em;
bottom: 0.75em;
margin: 0;
}
}
@media all and (min-width: 56.25em) {
.c-product-detail__content {
position: relative;
width: 65.5797101449%;
margin-bottom: 4em;
padding-right: 3em;
}
.c-product-detail__sidebar {
position: absolute;
top: 0;
left: 100%;
width: 52.4861878453%;
}
.c-product-detail__image {
max-width: 24.375em;
margin: 0 0 0 auto;
}
}
@media (min-width: 56.25em) and (max-width: 93.4375em) {
.c-product-detail__content {
min-height: 29.4117647059vw;
}
}
@media (min-width: 93.5em) {
.c-product-detail__content {
min-height: 27.5em;
}
}
.c-view-nav {
text-align: center;
white-space: nowrap;
}
@media all and (min-width: 56.25em) {
.c-view-nav {
text-align: right;
}
}
._transparent {
color: transparent;
opacity: 0;
}
.c-health-attributes {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
@media all and (min-width: 48.0625em) {
.c-health-attributes {
flex-direction: row;
}
}
.c-health-attribute {
max-width: 13.75em;
margin: 0 3.125em 0.625em 0;
padding: 0.125em 0;
color: #ab965d;
font-style: italic;
font-weight: 600;
}
@media all and (min-width: 48.0625em) {
.c-health-attribute {
margin: 0 0.625em 0.625em 0;
max-width: none;
}
}
.c-health-attribute > :first-child {
margin-right: 0.625em;
}
.c-health-attribute > span {
margin-bottom: 0;
}
._product-nutrition {
min-width: 1.875em;
}
._product-nutrition--aha-certified {
width: 3.75em;
}
._product-nutrition--feingold-food-list {
width: 7.5em;
}
.c-cheese-attributes {
padding: 1.25em 0 0.25em;
}
@media all and (max-width: 48em) {
.c-cheese-attributes {
padding: 1.875em 0 0.875em;
}
}
.c-cheese-attribute {
padding: 0 1.25em 1em 0;
}
.c-cheese-attribute__title {
margin-bottom: 0.25em;
color: #cdc9c3;
}
.c-button__icon {
margin: 0 0 0 20px;
}
.c-button__icon > svg {
display: inline-block;
vertical-align: 1px;
}
.c-modal__close-btn {
position: absolute;
top: 1.125em;
right: 1.125em;
}
.c-cols--2 {
max-width: 29.375em;
-moz-column-gap: 3.125em;
column-gap: 3.125em;
-moz-column-count: 2;
column-count: 2;
}
.c-cols--2 > li {
max-width: 13.125em;
margin-bottom: 0.0625em;
line-height: 1.0625em;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
@media (max-width: 320px) {
.c-cols--2 {
-moz-column-count: 1;
column-count: 1;
}
}
.c-cols--3 {
-moz-column-gap: 50px;
column-gap: 50px;
-moz-column-count: 3;
column-count: 3;
}
@media (max-width: 650px) {
.c-cols--3 {
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width: 450px) {
.c-cols--3 {
-moz-column-count: 2;
column-count: 2;
}
}
.c-cols__unit {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.c-scrollspy__item {
position: relative;
background: #211f1d;
counter-increment: scrollspy-items;
}
.c-scrollspy__item:not(:first-child)::before {
position: absolute;
top: 50%;
left: 0;
height: 1.25em;
transform: translateY(-50%);
border-left: 1px solid #3f3e3c;
content: "";
}
.c-scrollspy__item::after {
position: absolute;
top: 100%;
right: 0;
left: 0;
height: 4px;
transition: background-color 200ms ease;
background-color: #A6192E;
content: "";
}
.c-scrollspy__item.is-active {
background: transparent;
}
.c-scrollspy__item.is-active::after {
background-color: #a9271b;
}
.c-scrollspy__link {
display: block;
padding: 1em;
text-align: center;
text-decoration: none;
}
.c-scrollspy__counter {
color: #8e7246;
}
.c-scrollspy__counter::before {
display: block;
content: counter(scrollspy-items, decimal-leading-zero);
}
.c-scrollspy__link-text {
font-size: 18px;
}
.c-scrollspy__item--featured {
counter-increment: none;
}
.c-scrollspy__item--featured .c-scrollspy__counter::before {
content: "Featured";
}
._recipe-image {
position: relative;
max-height: none;
}
._recipe-image .c-button--play {
z-index: 0;
}
._recipe-image .c-link__img {
top: 50%;
left: 0;
width: 100%;
height: auto;
transform: translateY(-50%);
}
@media all and (max-width: 56.1875em) {
._tags__heading {
display: inline;
font-size: 1em;
}
._tags__list {
display: inline;
}
}
/**
* TODO: Get with designers about responsive adjustments for these figures.
* Definitely needs help between 450px and 850px.
*/
.c-our-story__figure::after {
content: "";
display: block;
padding: 0 0 60%;
height: 0;
}
.c-our-story__figure > img {
position: absolute;
top: 50%;
max-width: none;
transform: translateY(-50%);
z-index: -1;
}
@media all and (max-width: 48em) {
.c-our-story__figure {
padding: 0 0 50%;
}
}
.c-our-story__figure--cheese > img {
left: 0;
width: 96.6666666667%;
}
.c-our-story__figure--craft > img {
right: 0;
width: 130.6666666667%;
max-width: 110%;
z-index: -1;
}
.c-our-story__figure--portrait > img {
left: 0;
width: 90.8333333333%;
}
/**
* TODO: Get with designers about responsive adjustments for these figures.
* Definitely needs help between 450px and 850px.
*/
.c-nutrition-and-wellness__figure {
z-index: -1;
}
.c-nutrition-and-wellness__figure img {
position: absolute;
margin-left: auto;
top: 0;
}
.c-nutrition-and-wellness__figure--ingredients img {
width: 104.8333333333%;
right: 0;
}
.c-nutrition-and-wellness__figure--nutrition img {
width: 73.3333333333%;
right: 0;
}
._nutrition-icons {
max-width: 42.5em;
}
@media all and (max-width: 29.9375em) {
._nutrition-icons {
font-size: 0.75em;
}
}
._nutrition-icons a {
line-height: 1.0625;
}
.o-list--faq > .o-list--faq__item {
-moz-column-break-inside: avoid;
break-inside: avoid;
counter-increment: list-numbers;
}
.o-list--faq__answer,
.o-list--faq__question {
position: relative;
padding-left: 45px;
}
.o-list--faq__question {
padding-bottom: 1.25em;
}
.o-list--faq__question::before,
.o-list--faq__answer::before {
display: inline-block;
position: absolute;
top: -3px;
left: 0;
width: 30px;
height: 30px;
padding: 1px 7px;
border: 2px solid #8a7449;
border-radius: 50%;
color: #8a7449;
content: "Q";
}
.o-list--faq__question.en::before {
content: "Q";
}
.o-list--faq__question.es::before {
content: "P";
}
.o-list--faq__answer::before {
padding: 1px 8px;
content: "A";
}
.o-list--faq__answer a {
color: #a7a49e;
}
.o-list--faq__answer a:hover {
color: #cdc9c3;
}
.o-list--faq__answer p {
margin-bottom: 0.625em;
}
.o-list--faq__answer.en::before {
content: "A";
}
.o-list--faq__answer.es::before {
content: "R";
}
.c-search-nav {
display: flex;
align-items: center;
justify-content: center;
color: #8a7449;
}
.c-search-nav__count,
.c-search-nav__show {
font-style: italic;
}
.c-search-nav__count {
padding-right: 1.25em;
padding-left: 1.25em;
}
.c-search-nav__show {
text-decoration: none;
}
.c-search-nav__divider {
height: 1em;
margin: 0 0.5em;
border-right: 1px solid #8a7449;
}
.c-search-nav__list {
margin-bottom: 0.125em;
}
@media all and (max-width: 38.6875em) {
.c-search-nav {
justify-content: space-around;
}
.c-search-nav__count {
flex: 0 0 auto;
padding-left: 0;
}
.c-search-nav__show {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.c-search-nav__divider {
margin: 0;
}
.c-search-nav__filters {
position: relative;
flex: 1 1 auto;
margin-left: 1.25em;
}
.c-search-nav__list {
flex: 1 1 auto;
margin-right: 0;
}
}
@media all and (min-width: 38.75em) {
.c-search-nav__show {
padding-right: 1.25em;
padding-left: 1.25em;
}
.c-search-nav__filters {
display: flex;
flex: 0 0 auto;
align-items: center;
}
.c-search-nav__list {
display: flex;
flex-direction: horizontal;
flex-wrap: nowrap;
align-items: stretch;
max-width: 23.75em;
margin-right: 0;
margin-left: -1.25em;
}
.c-search-nav__list > .c-search-nav__list-item {
padding-right: 0;
padding-left: 1.25em;
white-space: nowrap;
}
.c-link--search-filter\@620 {
color: #8a7449;
font-size: 1.125em;
letter-spacing: 0.05em;
border-bottom: 1.5px solid currentColor;
text-decoration: none;
}
.c-link--search-filter\@620:hover,
.c-link--search-filter\@620:focus,
.c-link--search-filter\@620:active {
color: #ab965d;
}
.c-link--search-filter\@620.is-active {
color: #ab965d;
}
}
@media all and (min-width: 38.75em) and (max-width: 42.4375em) {
.c-link--search-filter\@620 {
font-size: 1em;
}
}
@media all and (max-width: 56.1875em) {
._contact-signup {
margin-top: 3em;
text-align: center;
}
._contact-signup__figure {
margin-bottom: 1.25em;
}
}
@media all and (min-width: 56.25em) {
._contact-signup {
margin-top: 1.25em;
}
._contact-signup__figure {
float: right;
}
}
@media all and (max-width: 29.9375em) {
#did-you-know .c-stamp-icon {
width: 100%;
}
#did-you-know .c-stamp-icon::before {
background-size: 100% auto;
}
#did-you-know .c-icon--health-md {
width: 70%;
}
}
._aha-table__heading {
max-width: 27.7777777778em;
margin-bottom: 0.25em;
font-size: 1.125em;
line-height: 1.1428571429;
}
._aha-table__logo-spacer {
display: inline;
}
._aha-table__logo-spacer::after {
white-space: pre;
content: "\A0 \A0 \A0";
}
._aha-table__logo {
position: absolute;
top: -2.5em;
right: 0;
z-index: 10;
}
._aha-table__disclaimer {
display: block;
color: #787167;
font-size: 0.75em;
}
._aha-table {
position: relative;
border-top: 1px solid #A6192E;
}
._aha-table .o-grid {
justify-content: center;
}
._aha-table .o-grid > .o-grid__item {
padding: 0.625em 0.9375em;
border-bottom: 1px solid #282624;
}
._aha-table .o-grid > dt.o-grid__item {
color: #8a7449;
font-style: italic;
font-size: 0.875em;
text-align: center;
border-right: 1px solid #282624;
}
._aha-table .o-grid > dd.o-grid__item {
font-size: 0.875em;
border-bottom: none;
}
._aha-table .o-grid:nth-of-type(odd) > dt.o-grid__item {
background: #2f2c2a;
}
._aha-table .o-grid:nth-of-type(odd) > dd.o-grid__item {
background: #1f1d1b;
}
._aha-table .o-grid:nth-of-type(even) > dt.o-grid__item {
background: #322f2d;
}
._aha-table .o-grid:nth-of-type(even) > dd.o-grid__item {
background: #211f1d;
}
@media (max-width: 41.25em) {
._aha-table__logo {
transform: scale(0.75);
transform-origin: 100% 50%;
}
}
@media (min-width: 26.875em) {
._aha-table > dl :nth-child(2) :last-child {
padding-right: 6.25em;
}
._aha-table > dl :nth-child(3) :last-child {
padding-right: 5em;
}
}
@media (max-width: 26.8125em) {
._aha-table__logo {
transform: scale(0.667);
transform-origin: 100% 33.333%;
}
._aha-table > dl :nth-child(2) :last-child {
padding-right: 4.375em;
}
}
.c-bold-teaser .c-bold-teaser__figure::after {
content: "";
display: block;
padding: 0 0 80%;
height: 0;
}
@media all and (max-width: 61.1875em) {
.c-bold-teaser .c-bold-teaser__figure::after {
display: none;
}
}
.c-bold-teaser .c-bold-teaser__figure > img {
width: 130%;
max-width: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: -1;
}
.c-bold-teaser .c-bold-teaser__figure-img--lg {
display: none;
}
@media all and (max-width: 61.1875em) {
.c-bold-teaser .c-bold-teaser__figure-img--full {
display: none;
}
.c-bold-teaser .c-bold-teaser__figure-img--lg {
display: block;
}
}
.c-bold-teaser .c-bold-teaser__figure-img--lg {
width: 100% !important;
position: static !important;
transform: none !important;
}
.c-bold-teaser .c-bold-teaser__carousel-header {
position: relative;
z-index: 1;
}
.c-bold-teaser .c-bold-teaser__carousel {
margin-top: -50px;
}
.c-bold-teaser .c-bold-teaser__carousel::before,
.c-bold-teaser .c-bold-teaser__carousel::after {
content: "";
width: 25%;
position: absolute;
top: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
@media all and (max-width: 48em) {
.c-bold-teaser .c-bold-teaser__carousel::before,
.c-bold-teaser .c-bold-teaser__carousel::after {
width: 15%;
}
}
@media all and (max-width: 29.9375em) {
.c-bold-teaser .c-bold-teaser__carousel::before,
.c-bold-teaser .c-bold-teaser__carousel::after {
width: 10%;
}
}
.c-bold-teaser .c-bold-teaser__carousel::before {
background: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
left: 0;
}
.c-bold-teaser .c-bold-teaser__carousel::after {
background: linear-gradient(to left, #000, rgba(0, 0, 0, 0));
right: 0;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button {
width: 32px;
height: 32px;
background: center/32px no-repeat;
opacity: 0.75;
position: absolute;
top: 50%;
z-index: 3;
transform: translate3d(0, -50%, 0);
transition: opacity 125ms ease-in-out;
}
@media all and (max-width: 29.9375em) {
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button {
top: 100%;
}
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button:hover,
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button:focus {
opacity: 1;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button svg {
display: none;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.previous {
background-image: url("/img/journeyboldly/teaser/carousel/arrow-left@2x.png");
left: 25%;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.next {
right: 25%;
background-image: url("/img/journeyboldly/teaser/carousel/arrow-right@2x.png");
}
@media (max-width: 920px) {
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.previous {
left: 20%;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.next {
right: 20%;
}
}
@media all and (max-width: 48em) {
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.previous {
left: 10%;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.next {
right: 10%;
}
}
@media (max-width: 580px) {
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.previous {
left: 10px;
}
.c-bold-teaser .c-bold-teaser__carousel .flickity-prev-next-button.next {
right: 10px;
}
}
.c-bold-teaser .c-bold-teaser__carousel .c-product-label {
max-width: 380px;
height: auto;
top: 115px;
right: 0;
left: auto;
opacity: 1;
transform: none;
}
@media all and (min-width: 93.75em) {
.c-bold-teaser .c-bold-teaser__carousel .c-product-label {
top: 200px;
right: 40px;
}
}
@media all and (max-width: 54.3125em) {
.c-bold-teaser .c-bold-teaser__carousel .c-product-label {
top: 0;
right: 40px;
}
}
@media all and (max-width: 48em) {
.c-bold-teaser .c-bold-teaser__carousel .c-product-label {
top: 115px;
right: 40px;
}
}
.c-bold-teaser .c-bold-teaser__carousel-item {
width: 50%;
}
@media all and (max-width: 48em) {
.c-bold-teaser .c-bold-teaser__carousel-item {
width: 100%;
}
}
.c-bold-teaser .c-bold-teaser__carousel-item .c-link__img {
width: 80%;
height: 80%;
left: 12%;
bottom: 0;
top: auto;
}
.c-bold-teaser .c-bold-teaser__carousel-content {
padding: 0 0 10px;
position: relative;
z-index: 1;
}
@media all and (max-width: 77.4375em) {
.c-bold-teaser .c-heading--lg {
font-size: 2.484375em;
}
}
@media all and (max-width: 54.3125em) {
.c-bold-teaser .c-heading--lg {
font-size: 1.25em;
}
}
@media all and (max-width: 54.3125em) {
.c-bold-teaser .c-heading {
font-size: 1.75em;
}
}
.c-bold-teaser .c-button--play {
margin-bottom: 20px;
}
@media all and (max-width: 54.3125em) {
.c-bold-teaser .c-button--play .c-button--play {
transform: scale(0.8);
margin-bottom: 10px;
}
}
.c-bold-teaser .c-button--play {
min-height: 60px;
}
.c-learn-more {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
}
.c-learn-more > span:first-child {
padding-bottom: 17px;
}
.ready-additions .o-darken__overlay::before {
opacity: 0.8;
}
.ready-additions__products .c-product-category-grid > .o-grid__item {
width: 100%;
}
@media all and (min-width: 48.0625em) {
.ready-additions__products .c-product-category-grid > .o-grid__item {
width: 50%;
}
}
.ready-additions-slice-guide {
position: relative;
background: #F0E5D8;
color: #000;
padding: 80px 40px 55px 40px;
}
.ready-additions-slice-guide::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
pointer-events: none;
border-width: 2.1875em;
border-top-color: #000;
transform: translate(-50%, 0);
}
.ready-additions-slice-guide::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
pointer-events: none;
border-width: 0.40625em;
border-top-color: #8a7449;
transform: translate(-50%, 0);
}
.ready-additions-slice-guide__inner {
position: relative;
}
.ready-additions-slice-guide .c-heading {
color: #000;
}
.ready-additions-slice-guide__item {
position: relative;
}
.ready-additions-slice-guide__item::after {
content: "";
position: absolute;
height: 1px;
width: 50%;
left: 50%;
bottom: 0;
transform: translate3d(-50%, 0, 0);
border-bottom: 2px dotted #A6192E;
}
.ready-additions-slice-guide__item:last-child::after {
display: none;
}
@media all and (min-width: 48.0625em) {
.ready-additions-slice-guide__item {
position: relative;
}
.ready-additions-slice-guide__item::after {
display: none;
}
}
[data-promo-id=counterculture] .c-modal__content-container {
max-width: 375px;
height: 525px;
}
[data-promo-id=counterculture] .c-icon--close svg {
fill: #fff;
}
[data-promo-id=counterculture] .c-hero__logo {
width: 305px;
height: 120px;
display: block;
margin: 126px 0 60px 0;
flex-shrink: 0;
position: relative;
}
[data-promo-id=counterculture] .c-hero__logo::after {
content: "";
position: absolute;
bottom: -26px;
left: 50%;
transform: translate3d(-50%, 0, 0);
width: 50px;
height: 2px;
background: #ab965d;
}
[data-promo-id=counterculture] .c-stamp {
width: 111px;
height: 115px;
transform: translate3d(-20px, -33%, 0px) rotate(17deg);
opacity: 0.2;
position: absolute;
bottom: 0;
right: 0;
}
[data-promo-id=counterculture] .c-modal__content {
display: flex;
flex-direction: column;
align-items: center;
background: url("/img/counterculture/modal-bg.jpg") no-repeat;
}
[data-promo-id=counterculture] p {
padding: 0 40px;
text-align: center;
font-size: 16px;
line-height: 1.5;
font-weight: normal;
font-style: normal;
font-stretch: normal;
color: #fff;
margin: 0 0 40px 0;
width: 100%;
}
[data-promo-id=counterculture] .btn--gold {
display: inline-flex;
align-items: center;
font-family: bureau-grot-wide, sans-serif;
text-transform: uppercase;
border: solid 2px #ab965d;
padding: 17px 39px 16px 39px;
text-decoration: none;
font-size: 0.75em;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.17;
letter-spacing: 1px;
text-align: center;
color: #ffffff;
margin-bottom: 56px;
z-index: 1;
}
[data-promo-id=counterculture] .btn--gold:after {
height: 500%;
}
.btn--gold {
position: relative;
overflow: hidden;
}
.btn--gold:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 200%;
height: 300%;
background-color: #ab965d;
z-index: -1;
transition: transform 300ms cubic-bezier(0.89, 0.15, 0.42, 0.55);
transform: translate3d(-77%, 11%, 0) rotate(40deg);
}
.btn--gold:hover {
color: #fff;
}
.btn--gold:hover .c-icon__link-arrow {
color: #fff;
}
.btn--gold:hover:after {
content: "";
transition: transform 600ms cubic-bezier(0.89, 0.15, 0, 0.54);
transform: translate3d(-12%, 0, 0) rotate(60deg);
}
.rule-link .c-icon__link-arrow {
transition: transform 300ms cubic-bezier(0.89, 0.15, 0, 0.54);
transform: translate3d(0px, 0px, 0);
}
.rule-link:hover .c-icon__link-arrow {
transition: transform 600ms cubic-bezier(0.89, 0.15, 0, 0.54);
transform: translate3d(5px, -5px, 0);
}
[data-promo-id=pitcraft-modal] .c-modal__content {
height: 380px;
}
@media all and (min-width: 48.0625em) {
[data-promo-id=pitcraft-modal] .c-modal__content {
height: 500px;
}
}
[data-promo-id=pitcraft-modal] .c-modal__content .c-button--box {
transform: translate(40%, -115%);
}
@media all and (min-width: 48.0625em) {
[data-promo-id=pitcraft-modal] .c-modal__content .c-button--box {
transform: translate(40%, -160%);
}
}
.screen-reader-only {
position: absolute;
height: 1px;
width: 1px;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
overflow: hidden !important;
}
@media print {
.c-header__item--button,
.c-multi-level-nav {
display: none;
}
.c-header {
position: static;
border-bottom: 0;
}
.c-header::before {
content: none;
}
.c-header--sticky {
position: static;
padding-top: 0;
padding-bottom: 0;
height: auto;
}
.c-header--sticky .c-header__nav {
height: auto;
}
main,
#main {
padding-top: 10px;
padding-bottom: 0;
border-bottom: 0;
min-height: inherit;
}
.o-section__content {
padding-top: 20px;
margin-bottom: 0;
}
.c-hero__scroll-button,
.c-header__item--menu {
display: none;
}
.c-hero__preserve-aspect-ratio {
padding: 0;
}
.c-hero {
max-height: none;
}
hr {
display: none;
}
#footer {
display: none;
}
.c-footer.is-fixed {
position: static;
}
.c-footer__placeholder {
display: none;
}
.u-margin-bottom-xs {
margin-bottom: 10px;
}
.u-padding-bottom-sm {
padding-bottom: 10px;
}
.u-margin-top-md {
margin-top: 20px;
}
.c-product-recommendations,
.c-product-detail__sidebar,
.c-product-grid__figure {
display: none;
}
.c-product-detail__content {
margin-bottom: 10px;
min-height: inherit;
font-size: 14px;
}
.c-product-detail__content .o-grid--inner-border--sm > .o-grid__item {
padding-top: 10px;
padding-bottom: 10px;
}
[href="#nutrition-modal"] {
display: none;
}
#nutrition-modal {
display: block;
opacity: 1;
visibility: visible;
position: static;
}
#nutrition-modal .c-modal__close {
display: none;
}
.c-health-attributes {
margin-top: 0;
margin-bottom: 0;
}
._recipe-image {
display: none;
}
.recipe-detail {
color: black;
}
.o-sidebar-layout__sidebar {
display: none;
}
.o-list--ingredients .o-list__item,
.o-list--leading-zero .o-list__item--instructions {
margin-bottom: 0;
}
#at-expanded-menu-v2 {
display: none;
}
}
._reset-lists ol,
._reset-lists ul {
padding-left: 2.5em;
}
._reset-lists ol {
list-style: decimal;
}
._reset-lists ul {
list-style: disc;
}
._disable-click {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
._fix-ios-z-index {
transform: translateZ(0);
}
._view-products {
margin: 1.25em auto 3em;
}
._view-products ~ .c-featured-product {
margin-top: -6em;
}
._c-product-grid__link--back-to-school .c-product-grid__figure .c-link__img {
width: 113%;
max-width: 113%;
}
.notice-banner {
position: absolute;
width: 100%;
display: flex;
background: #A6192E;
top: 0;
left: 0;
height: 3em;
z-index: 1001;
justify-content: center;
align-items: center;
}
@media all and (max-width: 48em) {
.notice-banner {
position: fixed;
}
}
.notice-banner a {
color: #fff;
}
.notice-banner .close-btn {
right: 10px;
position: absolute;
top: 0;
}
.has-notice .notice-banner + header {
margin-top: 3em;
}
