@charset "UTF-8";
/*! v1.0.0 || 2018-12-04 15:06 */
/*! v0.0.1 || 2018-10-14 15:16 */
/*
---
name: Sass structure
category: 0. Base
---

All `~/global/*.scss` for core styles and base of components:

* `00-settings.scss` -  Global variables, config switches
* `01-tools.scss` - Default mixin and functions
* `02-generic.scss` - Ground-zero styles (normalize, resets, box-sizing)
* `03-elements.scss` - Unclassed HTML elements (Type selectors)
* `04-objects.scss` - Cosmetic-free design patterns, primarily structual components
* `04-trumps.scss` - Utility helper classes to extend and override styles of designed components


Follows methodology of ITCSS and each "layer" consists of Sass partials. It is recommended to make partials as specific as possible to allow for more easy of control.

*/
/*
---
name: Methodologies
category: 0. Base
---
* [OOCSS](https://code.tutsplus.com/tutorials/object-oriented-css-what-how-and-why--net-6986) - Object-oriented CSS
* [Namespace](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/) - Prefix CSS classes for organization (o-, c-, u-, t-, _-, js-, qa-)
* [BEM](http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403) - Organize code into blocks, elements and rules for modifications. Helps relate CSS to DOM.
* [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) - Core methodology to organize the CSS code. See "[Sass structure](/#display-4)"
* [BEMIT](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further) - BEM + ITCSS
* [Object-Oriented Typography](https://codepen.io/nicetransition/full/qbNbOE/) - Separate text-based elements by their structure, skin and context of text
* [Pipes and Stars in @class](https://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/) - Grouping related classes in your markup using `||` to group similar classes together and `**` to identify "core" classes for a component
* [Color Naming Convention](https://codepen.io/nicetransition/full/QjwbRg/) - Naming convention and organization of colors

*/
/*
---
name: Style Guide Layers
category: 0. Base
---

TODO:
* Add reference to theming and "Style Guide Layers"
* [Digital Branding in a Component Library: The Style Guide Layers](https://youtu.be/WxGNTf84v58)

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
.u-min-width-1-of-10, .u-min-width-1\/10 {
  min-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-10\@large, .u-min-width-1\/10\@large {
      min-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-10\@small, .u-min-width-1\/10\@small {
      min-width: 10%; } }

.u-width-1-of-10, .u-width-1\/10 {
  width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-10\@large, .u-width-1\/10\@large {
      width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-10\@small, .u-width-1\/10\@small {
      width: 10%; } }

.u-max-width-1-of-10, .u-max-width-1\/10 {
  max-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-10\@large, .u-max-width-1\/10\@large {
      max-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-10\@small, .u-max-width-1\/10\@small {
      max-width: 10%; } }

.u-min-width-1-of-5, .u-min-width-1\/5, .u-min-width-2-of-10, .u-min-width-2\/10 {
  min-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-5\@large, .u-min-width-1\/5\@large, .u-min-width-2-of-10\@large, .u-min-width-2\/10\@large {
      min-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-5\@small, .u-min-width-1\/5\@small, .u-min-width-2-of-10\@small, .u-min-width-2\/10\@small {
      min-width: 20%; } }

.u-width-1-of-5, .u-width-1\/5, .u-width-2-of-10, .u-width-2\/10 {
  width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-5\@large, .u-width-1\/5\@large, .u-width-2-of-10\@large, .u-width-2\/10\@large {
      width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-5\@small, .u-width-1\/5\@small, .u-width-2-of-10\@small, .u-width-2\/10\@small {
      width: 20%; } }

.u-max-width-1-of-5, .u-max-width-1\/5, .u-max-width-2-of-10, .u-max-width-2\/10 {
  max-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-5\@large, .u-max-width-1\/5\@large, .u-max-width-2-of-10\@large, .u-max-width-2\/10\@large {
      max-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-5\@small, .u-max-width-1\/5\@small, .u-max-width-2-of-10\@small, .u-max-width-2\/10\@small {
      max-width: 20%; } }

.u-min-width-1-of-4, .u-min-width-1\/4, .u-min-width-2-of-8, .u-min-width-2\/8, .u-min-width-3-of-12, .u-min-width-3\/12 {
  min-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-4\@large, .u-min-width-1\/4\@large, .u-min-width-2-of-8\@large, .u-min-width-2\/8\@large, .u-min-width-3-of-12\@large, .u-min-width-3\/12\@large {
      min-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-4\@small, .u-min-width-1\/4\@small, .u-min-width-2-of-8\@small, .u-min-width-2\/8\@small, .u-min-width-3-of-12\@small, .u-min-width-3\/12\@small {
      min-width: 25%; } }

.u-width-1-of-4, .u-width-1\/4, .u-width-2-of-8, .u-width-2\/8, .u-width-3-of-12, .u-width-3\/12 {
  width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-4\@large, .u-width-1\/4\@large, .u-width-2-of-8\@large, .u-width-2\/8\@large, .u-width-3-of-12\@large, .u-width-3\/12\@large {
      width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-4\@small, .u-width-1\/4\@small, .u-width-2-of-8\@small, .u-width-2\/8\@small, .u-width-3-of-12\@small, .u-width-3\/12\@small {
      width: 25%; } }

.u-max-width-1-of-4, .u-max-width-1\/4, .u-max-width-2-of-8, .u-max-width-2\/8, .u-max-width-3-of-12, .u-max-width-3\/12 {
  max-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-4\@large, .u-max-width-1\/4\@large, .u-max-width-2-of-8\@large, .u-max-width-2\/8\@large, .u-max-width-3-of-12\@large, .u-max-width-3\/12\@large {
      max-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-4\@small, .u-max-width-1\/4\@small, .u-max-width-2-of-8\@small, .u-max-width-2\/8\@small, .u-max-width-3-of-12\@small, .u-max-width-3\/12\@small {
      max-width: 25%; } }

.u-min-width-3-of-10, .u-min-width-3\/10 {
  min-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-10\@large, .u-min-width-3\/10\@large {
      min-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-10\@small, .u-min-width-3\/10\@small {
      min-width: 30%; } }

.u-width-3-of-10, .u-width-3\/10 {
  width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-10\@large, .u-width-3\/10\@large {
      width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-10\@small, .u-width-3\/10\@small {
      width: 30%; } }

.u-max-width-3-of-10, .u-max-width-3\/10 {
  max-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-10\@large, .u-max-width-3\/10\@large {
      max-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-10\@small, .u-max-width-3\/10\@small {
      max-width: 30%; } }

.u-min-width-2-of-5, .u-min-width-2\/5, .u-min-width-4-of-10, .u-min-width-4\/10 {
  min-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-5\@large, .u-min-width-2\/5\@large, .u-min-width-4-of-10\@large, .u-min-width-4\/10\@large {
      min-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-5\@small, .u-min-width-2\/5\@small, .u-min-width-4-of-10\@small, .u-min-width-4\/10\@small {
      min-width: 40%; } }

.u-width-2-of-5, .u-width-2\/5, .u-width-4-of-10, .u-width-4\/10 {
  width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-5\@large, .u-width-2\/5\@large, .u-width-4-of-10\@large, .u-width-4\/10\@large {
      width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-5\@small, .u-width-2\/5\@small, .u-width-4-of-10\@small, .u-width-4\/10\@small {
      width: 40%; } }

.u-max-width-2-of-5, .u-max-width-2\/5, .u-max-width-4-of-10, .u-max-width-4\/10 {
  max-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-5\@large, .u-max-width-2\/5\@large, .u-max-width-4-of-10\@large, .u-max-width-4\/10\@large {
      max-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-5\@small, .u-max-width-2\/5\@small, .u-max-width-4-of-10\@small, .u-max-width-4\/10\@small {
      max-width: 40%; } }

.u-min-width-1-of-2, .u-min-width-1\/2, .u-min-width-2-of-4, .u-min-width-2\/4, .u-min-width-3-of-6, .u-min-width-3\/6, .u-min-width-4-of-8, .u-min-width-4\/8, .u-min-width-5-of-10, .u-min-width-5\/10, .u-min-width-6-of-12, .u-min-width-6\/12 {
  min-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-2\@large, .u-min-width-1\/2\@large, .u-min-width-2-of-4\@large, .u-min-width-2\/4\@large, .u-min-width-3-of-6\@large, .u-min-width-3\/6\@large, .u-min-width-4-of-8\@large, .u-min-width-4\/8\@large, .u-min-width-5-of-10\@large, .u-min-width-5\/10\@large, .u-min-width-6-of-12\@large, .u-min-width-6\/12\@large {
      min-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-2\@small, .u-min-width-1\/2\@small, .u-min-width-2-of-4\@small, .u-min-width-2\/4\@small, .u-min-width-3-of-6\@small, .u-min-width-3\/6\@small, .u-min-width-4-of-8\@small, .u-min-width-4\/8\@small, .u-min-width-5-of-10\@small, .u-min-width-5\/10\@small, .u-min-width-6-of-12\@small, .u-min-width-6\/12\@small {
      min-width: 50%; } }

.u-width-1-of-2, .u-width-1\/2, .u-width-2-of-4, .u-width-2\/4, .u-width-3-of-6, .u-width-3\/6, .u-width-4-of-8, .u-width-4\/8, .u-width-5-of-10, .u-width-5\/10, .u-width-6-of-12, .u-width-6\/12 {
  width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-2\@large, .u-width-1\/2\@large, .u-width-2-of-4\@large, .u-width-2\/4\@large, .u-width-3-of-6\@large, .u-width-3\/6\@large, .u-width-4-of-8\@large, .u-width-4\/8\@large, .u-width-5-of-10\@large, .u-width-5\/10\@large, .u-width-6-of-12\@large, .u-width-6\/12\@large {
      width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-2\@small, .u-width-1\/2\@small, .u-width-2-of-4\@small, .u-width-2\/4\@small, .u-width-3-of-6\@small, .u-width-3\/6\@small, .u-width-4-of-8\@small, .u-width-4\/8\@small, .u-width-5-of-10\@small, .u-width-5\/10\@small, .u-width-6-of-12\@small, .u-width-6\/12\@small {
      width: 50%; } }

.u-max-width-1-of-2, .u-max-width-1\/2, .u-max-width-2-of-4, .u-max-width-2\/4, .u-max-width-3-of-6, .u-max-width-3\/6, .u-max-width-4-of-8, .u-max-width-4\/8, .u-max-width-5-of-10, .u-max-width-5\/10, .u-max-width-6-of-12, .u-max-width-6\/12 {
  max-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-2\@large, .u-max-width-1\/2\@large, .u-max-width-2-of-4\@large, .u-max-width-2\/4\@large, .u-max-width-3-of-6\@large, .u-max-width-3\/6\@large, .u-max-width-4-of-8\@large, .u-max-width-4\/8\@large, .u-max-width-5-of-10\@large, .u-max-width-5\/10\@large, .u-max-width-6-of-12\@large, .u-max-width-6\/12\@large {
      max-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-2\@small, .u-max-width-1\/2\@small, .u-max-width-2-of-4\@small, .u-max-width-2\/4\@small, .u-max-width-3-of-6\@small, .u-max-width-3\/6\@small, .u-max-width-4-of-8\@small, .u-max-width-4\/8\@small, .u-max-width-5-of-10\@small, .u-max-width-5\/10\@small, .u-max-width-6-of-12\@small, .u-max-width-6\/12\@small {
      max-width: 50%; } }

.u-min-width-3-of-5, .u-min-width-3\/5, .u-min-width-6-of-10, .u-min-width-6\/10 {
  min-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-5\@large, .u-min-width-3\/5\@large, .u-min-width-6-of-10\@large, .u-min-width-6\/10\@large {
      min-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-5\@small, .u-min-width-3\/5\@small, .u-min-width-6-of-10\@small, .u-min-width-6\/10\@small {
      min-width: 60%; } }

.u-width-3-of-5, .u-width-3\/5, .u-width-6-of-10, .u-width-6\/10 {
  width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-5\@large, .u-width-3\/5\@large, .u-width-6-of-10\@large, .u-width-6\/10\@large {
      width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-5\@small, .u-width-3\/5\@small, .u-width-6-of-10\@small, .u-width-6\/10\@small {
      width: 60%; } }

.u-max-width-3-of-5, .u-max-width-3\/5, .u-max-width-6-of-10, .u-max-width-6\/10 {
  max-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-5\@large, .u-max-width-3\/5\@large, .u-max-width-6-of-10\@large, .u-max-width-6\/10\@large {
      max-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-5\@small, .u-max-width-3\/5\@small, .u-max-width-6-of-10\@small, .u-max-width-6\/10\@small {
      max-width: 60%; } }

.u-min-width-7-of-10, .u-min-width-7\/10 {
  min-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-10\@large, .u-min-width-7\/10\@large {
      min-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-10\@small, .u-min-width-7\/10\@small {
      min-width: 70%; } }

.u-width-7-of-10, .u-width-7\/10 {
  width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-10\@large, .u-width-7\/10\@large {
      width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-10\@small, .u-width-7\/10\@small {
      width: 70%; } }

.u-max-width-7-of-10, .u-max-width-7\/10 {
  max-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-10\@large, .u-max-width-7\/10\@large {
      max-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-10\@small, .u-max-width-7\/10\@small {
      max-width: 70%; } }

.u-min-width-3-of-4, .u-min-width-3\/4, .u-min-width-6-of-8, .u-min-width-6\/8, .u-min-width-9-of-12, .u-min-width-9\/12 {
  min-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-4\@large, .u-min-width-3\/4\@large, .u-min-width-6-of-8\@large, .u-min-width-6\/8\@large, .u-min-width-9-of-12\@large, .u-min-width-9\/12\@large {
      min-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-4\@small, .u-min-width-3\/4\@small, .u-min-width-6-of-8\@small, .u-min-width-6\/8\@small, .u-min-width-9-of-12\@small, .u-min-width-9\/12\@small {
      min-width: 75%; } }

.u-width-3-of-4, .u-width-3\/4, .u-width-6-of-8, .u-width-6\/8, .u-width-9-of-12, .u-width-9\/12 {
  width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-4\@large, .u-width-3\/4\@large, .u-width-6-of-8\@large, .u-width-6\/8\@large, .u-width-9-of-12\@large, .u-width-9\/12\@large {
      width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-4\@small, .u-width-3\/4\@small, .u-width-6-of-8\@small, .u-width-6\/8\@small, .u-width-9-of-12\@small, .u-width-9\/12\@small {
      width: 75%; } }

.u-max-width-3-of-4, .u-max-width-3\/4, .u-max-width-6-of-8, .u-max-width-6\/8, .u-max-width-9-of-12, .u-max-width-9\/12 {
  max-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-4\@large, .u-max-width-3\/4\@large, .u-max-width-6-of-8\@large, .u-max-width-6\/8\@large, .u-max-width-9-of-12\@large, .u-max-width-9\/12\@large {
      max-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-4\@small, .u-max-width-3\/4\@small, .u-max-width-6-of-8\@small, .u-max-width-6\/8\@small, .u-max-width-9-of-12\@small, .u-max-width-9\/12\@small {
      max-width: 75%; } }

.u-min-width-4-of-5, .u-min-width-4\/5, .u-min-width-8-of-10, .u-min-width-8\/10 {
  min-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-5\@large, .u-min-width-4\/5\@large, .u-min-width-8-of-10\@large, .u-min-width-8\/10\@large {
      min-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-5\@small, .u-min-width-4\/5\@small, .u-min-width-8-of-10\@small, .u-min-width-8\/10\@small {
      min-width: 80%; } }

.u-width-4-of-5, .u-width-4\/5, .u-width-8-of-10, .u-width-8\/10 {
  width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-5\@large, .u-width-4\/5\@large, .u-width-8-of-10\@large, .u-width-8\/10\@large {
      width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-5\@small, .u-width-4\/5\@small, .u-width-8-of-10\@small, .u-width-8\/10\@small {
      width: 80%; } }

.u-max-width-4-of-5, .u-max-width-4\/5, .u-max-width-8-of-10, .u-max-width-8\/10 {
  max-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-5\@large, .u-max-width-4\/5\@large, .u-max-width-8-of-10\@large, .u-max-width-8\/10\@large {
      max-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-5\@small, .u-max-width-4\/5\@small, .u-max-width-8-of-10\@small, .u-max-width-8\/10\@small {
      max-width: 80%; } }

.u-min-width-9-of-10, .u-min-width-9\/10 {
  min-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-9-of-10\@large, .u-min-width-9\/10\@large {
      min-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-9-of-10\@small, .u-min-width-9\/10\@small {
      min-width: 90%; } }

.u-width-9-of-10, .u-width-9\/10 {
  width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-9-of-10\@large, .u-width-9\/10\@large {
      width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-9-of-10\@small, .u-width-9\/10\@small {
      width: 90%; } }

.u-max-width-9-of-10, .u-max-width-9\/10 {
  max-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-9-of-10\@large, .u-max-width-9\/10\@large {
      max-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-9-of-10\@small, .u-max-width-9\/10\@small {
      max-width: 90%; } }

.u-min-width-1-of-1, .u-min-width-1\/1, .u-min-width-2-of-2, .u-min-width-2\/2, .u-min-width-3-of-3, .u-min-width-3\/3, .u-min-width-4-of-4, .u-min-width-4\/4, .u-min-width-5-of-5, .u-min-width-5\/5, .u-min-width-6-of-6, .u-min-width-6\/6, .u-min-width-7-of-7, .u-min-width-7\/7, .u-min-width-8-of-8, .u-min-width-8\/8, .u-min-width-9-of-9, .u-min-width-9\/9, .u-min-width-10-of-10, .u-min-width-10\/10, .u-min-width-11-of-11, .u-min-width-11\/11, .u-min-width-12-of-12, .u-min-width-12\/12 {
  min-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-1\@large, .u-min-width-1\/1\@large, .u-min-width-2-of-2\@large, .u-min-width-2\/2\@large, .u-min-width-3-of-3\@large, .u-min-width-3\/3\@large, .u-min-width-4-of-4\@large, .u-min-width-4\/4\@large, .u-min-width-5-of-5\@large, .u-min-width-5\/5\@large, .u-min-width-6-of-6\@large, .u-min-width-6\/6\@large, .u-min-width-7-of-7\@large, .u-min-width-7\/7\@large, .u-min-width-8-of-8\@large, .u-min-width-8\/8\@large, .u-min-width-9-of-9\@large, .u-min-width-9\/9\@large, .u-min-width-10-of-10\@large, .u-min-width-10\/10\@large, .u-min-width-11-of-11\@large, .u-min-width-11\/11\@large, .u-min-width-12-of-12\@large, .u-min-width-12\/12\@large {
      min-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-1\@small, .u-min-width-1\/1\@small, .u-min-width-2-of-2\@small, .u-min-width-2\/2\@small, .u-min-width-3-of-3\@small, .u-min-width-3\/3\@small, .u-min-width-4-of-4\@small, .u-min-width-4\/4\@small, .u-min-width-5-of-5\@small, .u-min-width-5\/5\@small, .u-min-width-6-of-6\@small, .u-min-width-6\/6\@small, .u-min-width-7-of-7\@small, .u-min-width-7\/7\@small, .u-min-width-8-of-8\@small, .u-min-width-8\/8\@small, .u-min-width-9-of-9\@small, .u-min-width-9\/9\@small, .u-min-width-10-of-10\@small, .u-min-width-10\/10\@small, .u-min-width-11-of-11\@small, .u-min-width-11\/11\@small, .u-min-width-12-of-12\@small, .u-min-width-12\/12\@small {
      min-width: 100%; } }

.u-width-1-of-1, .u-width-1\/1, .u-width-2-of-2, .u-width-2\/2, .u-width-3-of-3, .u-width-3\/3, .u-width-4-of-4, .u-width-4\/4, .u-width-5-of-5, .u-width-5\/5, .u-width-6-of-6, .u-width-6\/6, .u-width-7-of-7, .u-width-7\/7, .u-width-8-of-8, .u-width-8\/8, .u-width-9-of-9, .u-width-9\/9, .u-width-10-of-10, .u-width-10\/10, .u-width-11-of-11, .u-width-11\/11, .u-width-12-of-12, .u-width-12\/12 {
  width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-1\@large, .u-width-1\/1\@large, .u-width-2-of-2\@large, .u-width-2\/2\@large, .u-width-3-of-3\@large, .u-width-3\/3\@large, .u-width-4-of-4\@large, .u-width-4\/4\@large, .u-width-5-of-5\@large, .u-width-5\/5\@large, .u-width-6-of-6\@large, .u-width-6\/6\@large, .u-width-7-of-7\@large, .u-width-7\/7\@large, .u-width-8-of-8\@large, .u-width-8\/8\@large, .u-width-9-of-9\@large, .u-width-9\/9\@large, .u-width-10-of-10\@large, .u-width-10\/10\@large, .u-width-11-of-11\@large, .u-width-11\/11\@large, .u-width-12-of-12\@large, .u-width-12\/12\@large {
      width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-1\@small, .u-width-1\/1\@small, .u-width-2-of-2\@small, .u-width-2\/2\@small, .u-width-3-of-3\@small, .u-width-3\/3\@small, .u-width-4-of-4\@small, .u-width-4\/4\@small, .u-width-5-of-5\@small, .u-width-5\/5\@small, .u-width-6-of-6\@small, .u-width-6\/6\@small, .u-width-7-of-7\@small, .u-width-7\/7\@small, .u-width-8-of-8\@small, .u-width-8\/8\@small, .u-width-9-of-9\@small, .u-width-9\/9\@small, .u-width-10-of-10\@small, .u-width-10\/10\@small, .u-width-11-of-11\@small, .u-width-11\/11\@small, .u-width-12-of-12\@small, .u-width-12\/12\@small {
      width: 100%; } }

.u-max-width-1-of-1, .u-max-width-1\/1, .u-max-width-2-of-2, .u-max-width-2\/2, .u-max-width-3-of-3, .u-max-width-3\/3, .u-max-width-4-of-4, .u-max-width-4\/4, .u-max-width-5-of-5, .u-max-width-5\/5, .u-max-width-6-of-6, .u-max-width-6\/6, .u-max-width-7-of-7, .u-max-width-7\/7, .u-max-width-8-of-8, .u-max-width-8\/8, .u-max-width-9-of-9, .u-max-width-9\/9, .u-max-width-10-of-10, .u-max-width-10\/10, .u-max-width-11-of-11, .u-max-width-11\/11, .u-max-width-12-of-12, .u-max-width-12\/12 {
  max-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-1\@large, .u-max-width-1\/1\@large, .u-max-width-2-of-2\@large, .u-max-width-2\/2\@large, .u-max-width-3-of-3\@large, .u-max-width-3\/3\@large, .u-max-width-4-of-4\@large, .u-max-width-4\/4\@large, .u-max-width-5-of-5\@large, .u-max-width-5\/5\@large, .u-max-width-6-of-6\@large, .u-max-width-6\/6\@large, .u-max-width-7-of-7\@large, .u-max-width-7\/7\@large, .u-max-width-8-of-8\@large, .u-max-width-8\/8\@large, .u-max-width-9-of-9\@large, .u-max-width-9\/9\@large, .u-max-width-10-of-10\@large, .u-max-width-10\/10\@large, .u-max-width-11-of-11\@large, .u-max-width-11\/11\@large, .u-max-width-12-of-12\@large, .u-max-width-12\/12\@large {
      max-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-1\@small, .u-max-width-1\/1\@small, .u-max-width-2-of-2\@small, .u-max-width-2\/2\@small, .u-max-width-3-of-3\@small, .u-max-width-3\/3\@small, .u-max-width-4-of-4\@small, .u-max-width-4\/4\@small, .u-max-width-5-of-5\@small, .u-max-width-5\/5\@small, .u-max-width-6-of-6\@small, .u-max-width-6\/6\@small, .u-max-width-7-of-7\@small, .u-max-width-7\/7\@small, .u-max-width-8-of-8\@small, .u-max-width-8\/8\@small, .u-max-width-9-of-9\@small, .u-max-width-9\/9\@small, .u-max-width-10-of-10\@small, .u-max-width-10\/10\@small, .u-max-width-11-of-11\@small, .u-max-width-11\/11\@small, .u-max-width-12-of-12\@small, .u-max-width-12\/12\@small {
      max-width: 100%; } }

#root {
  /*
  ---
  name: String to Number
  category: 1. Tools > Functions
  ---
  
  Casts a string into a number.
  
  Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)
  
  * @param {String | Number} $value - Value to be parsed
  * @return {Number}
  
  
  Usage:
  
  ```
  @function foo(param: $some-string-that-may-not-be-a-number) {
  	@return to-number(unquote("param"));
  }
  ```
  
  */
  /*
  ---
  name: String to Number
  category: 1. Tools > Functions
  ---
  
  Casts a string into a number.
  
  Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)
  
  * @param {String | Number} $value - Value to be parsed
  * @return {Number}
  
  
  Usage:
  
  ```
  @function foo(param: $some-string-that-may-not-be-a-number) {
  	@return to-number(unquote("param"));
  }
  ```
  
  */
  /*
  ---
  name: To String 
  category: 1. Tools > Functions
  ---
  
  Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.
  
  It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.
  
  Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:
  
  * it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
  * it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`
  
  
  Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!
  
  
  Usage:
  
  ```
  	to-string(value);
  ```
  
  */
  /*
  ---
  name: String Replace
  category: 1. Tools > Functions
  ---
  
  Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.
  
  Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)
  
  Replace `$search` with `$replace` in `$string`
  
  * @author Hugo Giraudel
  * @param {String} $string - Initial string
  * @param {String} $search - Substring to replace
  * @param {String} $replace ('') - New value
  * @return {String} - Updated string
  
  
  Usage:
  
  ```
  .selector-name {
  	$string: 'The answer to life the universe and everything is 42.';
  	content: str-replace($string, 'e', 'xoxo');
  }
  ```
  
  */
  /*
  ---
  name: String to Number
  category: 1. Tools > Functions
  ---
  
  Casts a string into a number.
  
  Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)
  
  * @param {String | Number} $value - Value to be parsed
  * @return {Number}
  
  
  Usage:
  
  ```
  @function foo(param: $some-string-that-may-not-be-a-number) {
  	@return to-number(unquote("param"));
  }
  ```
  
  */
  /*
  ---
  name: Selection
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets > Box Sizing
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets > Header Size
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets > Margins
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets > Body
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets > Anchors
  category: 2. Generic
  ---
  */
  /*
  ---
  name: Resets > Forms
  category: 2. Generic
  ---
  */
  /*
  ---
  name: String to Number
  category: 1. Tools > Functions
  ---
  
  Casts a string into a number.
  
  Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)
  
  * @param {String | Number} $value - Value to be parsed
  * @return {Number}
  
  
  Usage:
  
  ```
  @function foo(param: $some-string-that-may-not-be-a-number) {
  	@return to-number(unquote("param"));
  }
  ```
  
  */
  /*
  ---
  name: String to Number
  category: 1. Tools > Functions
  ---
  
  Casts a string into a number.
  
  Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)
  
  * @param {String | Number} $value - Value to be parsed
  * @return {Number}
  
  
  Usage:
  
  ```
  @function foo(param: $some-string-that-may-not-be-a-number) {
  	@return to-number(unquote("param"));
  }
  ```
  
  */
  /*
  ---
  name: To String 
  category: 1. Tools > Functions
  ---
  
  Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.
  
  It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.
  
  Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:
  
  * it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
  * it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`
  
  
  Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!
  
  
  Usage:
  
  ```
  	to-string(value);
  ```
  
  */
  /*
  ---
  name: String Replace
  category: 1. Tools > Functions
  ---
  
  Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.
  
  Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)
  
  Replace `$search` with `$replace` in `$string`
  
  * @author Hugo Giraudel
  * @param {String} $string - Initial string
  * @param {String} $search - Substring to replace
  * @param {String} $replace ('') - New value
  * @return {String} - Updated string
  
  
  Usage:
  
  ```
  .selector-name {
  	$string: 'The answer to life the universe and everything is 42.';
  	content: str-replace($string, 'e', 'xoxo');
  }
  ```
  
  */
  /*
  ---
  name: String to Number
  category: 1. Tools > Functions
  ---
  
  Casts a string into a number.
  
  Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)
  
  * @param {String | Number} $value - Value to be parsed
  * @return {Number}
  
  
  Usage:
  
  ```
  @function foo(param: $some-string-that-may-not-be-a-number) {
  	@return to-number(unquote("param"));
  }
  ```
  
  */
  /*
  ---
  name: Base
  category: 3. Elements
  ---
  
  Limit use of type selectors for styling for this framework.
  
  */
  /*
  ---
  name: Spacing > Paragraphs
  category: 3. Elements
  ---
  
  Margins are reset if `$includeResets` is `true` in `_00-settings.scss`, spacing of two `<p>` next to eachother get spaced by `$default-space` between
  
  */ }
  #root .u-min-width-1-of-10, #root .u-min-width-1\/10 {
    min-width: 10%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-10\@large, #root .u-min-width-1\/10\@large {
        min-width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-10\@small, #root .u-min-width-1\/10\@small {
        min-width: 10%; } }
  #root .u-width-1-of-10, #root .u-width-1\/10 {
    width: 10%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-10\@large, #root .u-width-1\/10\@large {
        width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-10\@small, #root .u-width-1\/10\@small {
        width: 10%; } }
  #root .u-max-width-1-of-10, #root .u-max-width-1\/10 {
    max-width: 10%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-10\@large, #root .u-max-width-1\/10\@large {
        max-width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-10\@small, #root .u-max-width-1\/10\@small {
        max-width: 10%; } }
  #root .u-min-width-1-of-5, #root .u-min-width-1\/5, #root .u-min-width-2-of-10, #root .u-min-width-2\/10 {
    min-width: 20%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-5\@large, #root .u-min-width-1\/5\@large, #root .u-min-width-2-of-10\@large, #root .u-min-width-2\/10\@large {
        min-width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-5\@small, #root .u-min-width-1\/5\@small, #root .u-min-width-2-of-10\@small, #root .u-min-width-2\/10\@small {
        min-width: 20%; } }
  #root .u-width-1-of-5, #root .u-width-1\/5, #root .u-width-2-of-10, #root .u-width-2\/10 {
    width: 20%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-5\@large, #root .u-width-1\/5\@large, #root .u-width-2-of-10\@large, #root .u-width-2\/10\@large {
        width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-5\@small, #root .u-width-1\/5\@small, #root .u-width-2-of-10\@small, #root .u-width-2\/10\@small {
        width: 20%; } }
  #root .u-max-width-1-of-5, #root .u-max-width-1\/5, #root .u-max-width-2-of-10, #root .u-max-width-2\/10 {
    max-width: 20%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-5\@large, #root .u-max-width-1\/5\@large, #root .u-max-width-2-of-10\@large, #root .u-max-width-2\/10\@large {
        max-width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-5\@small, #root .u-max-width-1\/5\@small, #root .u-max-width-2-of-10\@small, #root .u-max-width-2\/10\@small {
        max-width: 20%; } }
  #root .u-min-width-1-of-4, #root .u-min-width-1\/4, #root .u-min-width-2-of-8, #root .u-min-width-2\/8, #root .u-min-width-3-of-12, #root .u-min-width-3\/12 {
    min-width: 25%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-4\@large, #root .u-min-width-1\/4\@large, #root .u-min-width-2-of-8\@large, #root .u-min-width-2\/8\@large, #root .u-min-width-3-of-12\@large, #root .u-min-width-3\/12\@large {
        min-width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-4\@small, #root .u-min-width-1\/4\@small, #root .u-min-width-2-of-8\@small, #root .u-min-width-2\/8\@small, #root .u-min-width-3-of-12\@small, #root .u-min-width-3\/12\@small {
        min-width: 25%; } }
  #root .u-width-1-of-4, #root .u-width-1\/4, #root .u-width-2-of-8, #root .u-width-2\/8, #root .u-width-3-of-12, #root .u-width-3\/12 {
    width: 25%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-4\@large, #root .u-width-1\/4\@large, #root .u-width-2-of-8\@large, #root .u-width-2\/8\@large, #root .u-width-3-of-12\@large, #root .u-width-3\/12\@large {
        width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-4\@small, #root .u-width-1\/4\@small, #root .u-width-2-of-8\@small, #root .u-width-2\/8\@small, #root .u-width-3-of-12\@small, #root .u-width-3\/12\@small {
        width: 25%; } }
  #root .u-max-width-1-of-4, #root .u-max-width-1\/4, #root .u-max-width-2-of-8, #root .u-max-width-2\/8, #root .u-max-width-3-of-12, #root .u-max-width-3\/12 {
    max-width: 25%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-4\@large, #root .u-max-width-1\/4\@large, #root .u-max-width-2-of-8\@large, #root .u-max-width-2\/8\@large, #root .u-max-width-3-of-12\@large, #root .u-max-width-3\/12\@large {
        max-width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-4\@small, #root .u-max-width-1\/4\@small, #root .u-max-width-2-of-8\@small, #root .u-max-width-2\/8\@small, #root .u-max-width-3-of-12\@small, #root .u-max-width-3\/12\@small {
        max-width: 25%; } }
  #root .u-min-width-3-of-10, #root .u-min-width-3\/10 {
    min-width: 30%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-3-of-10\@large, #root .u-min-width-3\/10\@large {
        min-width: 30%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-3-of-10\@small, #root .u-min-width-3\/10\@small {
        min-width: 30%; } }
  #root .u-width-3-of-10, #root .u-width-3\/10 {
    width: 30%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-3-of-10\@large, #root .u-width-3\/10\@large {
        width: 30%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-3-of-10\@small, #root .u-width-3\/10\@small {
        width: 30%; } }
  #root .u-max-width-3-of-10, #root .u-max-width-3\/10 {
    max-width: 30%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-3-of-10\@large, #root .u-max-width-3\/10\@large {
        max-width: 30%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-3-of-10\@small, #root .u-max-width-3\/10\@small {
        max-width: 30%; } }
  #root .u-min-width-2-of-5, #root .u-min-width-2\/5, #root .u-min-width-4-of-10, #root .u-min-width-4\/10 {
    min-width: 40%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-2-of-5\@large, #root .u-min-width-2\/5\@large, #root .u-min-width-4-of-10\@large, #root .u-min-width-4\/10\@large {
        min-width: 40%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-2-of-5\@small, #root .u-min-width-2\/5\@small, #root .u-min-width-4-of-10\@small, #root .u-min-width-4\/10\@small {
        min-width: 40%; } }
  #root .u-width-2-of-5, #root .u-width-2\/5, #root .u-width-4-of-10, #root .u-width-4\/10 {
    width: 40%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-2-of-5\@large, #root .u-width-2\/5\@large, #root .u-width-4-of-10\@large, #root .u-width-4\/10\@large {
        width: 40%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-2-of-5\@small, #root .u-width-2\/5\@small, #root .u-width-4-of-10\@small, #root .u-width-4\/10\@small {
        width: 40%; } }
  #root .u-max-width-2-of-5, #root .u-max-width-2\/5, #root .u-max-width-4-of-10, #root .u-max-width-4\/10 {
    max-width: 40%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-2-of-5\@large, #root .u-max-width-2\/5\@large, #root .u-max-width-4-of-10\@large, #root .u-max-width-4\/10\@large {
        max-width: 40%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-2-of-5\@small, #root .u-max-width-2\/5\@small, #root .u-max-width-4-of-10\@small, #root .u-max-width-4\/10\@small {
        max-width: 40%; } }
  #root .u-min-width-1-of-2, #root .u-min-width-1\/2, #root .u-min-width-2-of-4, #root .u-min-width-2\/4, #root .u-min-width-3-of-6, #root .u-min-width-3\/6, #root .u-min-width-4-of-8, #root .u-min-width-4\/8, #root .u-min-width-5-of-10, #root .u-min-width-5\/10, #root .u-min-width-6-of-12, #root .u-min-width-6\/12 {
    min-width: 50%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-2\@large, #root .u-min-width-1\/2\@large, #root .u-min-width-2-of-4\@large, #root .u-min-width-2\/4\@large, #root .u-min-width-3-of-6\@large, #root .u-min-width-3\/6\@large, #root .u-min-width-4-of-8\@large, #root .u-min-width-4\/8\@large, #root .u-min-width-5-of-10\@large, #root .u-min-width-5\/10\@large, #root .u-min-width-6-of-12\@large, #root .u-min-width-6\/12\@large {
        min-width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-2\@small, #root .u-min-width-1\/2\@small, #root .u-min-width-2-of-4\@small, #root .u-min-width-2\/4\@small, #root .u-min-width-3-of-6\@small, #root .u-min-width-3\/6\@small, #root .u-min-width-4-of-8\@small, #root .u-min-width-4\/8\@small, #root .u-min-width-5-of-10\@small, #root .u-min-width-5\/10\@small, #root .u-min-width-6-of-12\@small, #root .u-min-width-6\/12\@small {
        min-width: 50%; } }
  #root .u-width-1-of-2, #root .u-width-1\/2, #root .u-width-2-of-4, #root .u-width-2\/4, #root .u-width-3-of-6, #root .u-width-3\/6, #root .u-width-4-of-8, #root .u-width-4\/8, #root .u-width-5-of-10, #root .u-width-5\/10, #root .u-width-6-of-12, #root .u-width-6\/12 {
    width: 50%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-2\@large, #root .u-width-1\/2\@large, #root .u-width-2-of-4\@large, #root .u-width-2\/4\@large, #root .u-width-3-of-6\@large, #root .u-width-3\/6\@large, #root .u-width-4-of-8\@large, #root .u-width-4\/8\@large, #root .u-width-5-of-10\@large, #root .u-width-5\/10\@large, #root .u-width-6-of-12\@large, #root .u-width-6\/12\@large {
        width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-2\@small, #root .u-width-1\/2\@small, #root .u-width-2-of-4\@small, #root .u-width-2\/4\@small, #root .u-width-3-of-6\@small, #root .u-width-3\/6\@small, #root .u-width-4-of-8\@small, #root .u-width-4\/8\@small, #root .u-width-5-of-10\@small, #root .u-width-5\/10\@small, #root .u-width-6-of-12\@small, #root .u-width-6\/12\@small {
        width: 50%; } }
  #root .u-max-width-1-of-2, #root .u-max-width-1\/2, #root .u-max-width-2-of-4, #root .u-max-width-2\/4, #root .u-max-width-3-of-6, #root .u-max-width-3\/6, #root .u-max-width-4-of-8, #root .u-max-width-4\/8, #root .u-max-width-5-of-10, #root .u-max-width-5\/10, #root .u-max-width-6-of-12, #root .u-max-width-6\/12 {
    max-width: 50%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-2\@large, #root .u-max-width-1\/2\@large, #root .u-max-width-2-of-4\@large, #root .u-max-width-2\/4\@large, #root .u-max-width-3-of-6\@large, #root .u-max-width-3\/6\@large, #root .u-max-width-4-of-8\@large, #root .u-max-width-4\/8\@large, #root .u-max-width-5-of-10\@large, #root .u-max-width-5\/10\@large, #root .u-max-width-6-of-12\@large, #root .u-max-width-6\/12\@large {
        max-width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-2\@small, #root .u-max-width-1\/2\@small, #root .u-max-width-2-of-4\@small, #root .u-max-width-2\/4\@small, #root .u-max-width-3-of-6\@small, #root .u-max-width-3\/6\@small, #root .u-max-width-4-of-8\@small, #root .u-max-width-4\/8\@small, #root .u-max-width-5-of-10\@small, #root .u-max-width-5\/10\@small, #root .u-max-width-6-of-12\@small, #root .u-max-width-6\/12\@small {
        max-width: 50%; } }
  #root .u-min-width-3-of-5, #root .u-min-width-3\/5, #root .u-min-width-6-of-10, #root .u-min-width-6\/10 {
    min-width: 60%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-3-of-5\@large, #root .u-min-width-3\/5\@large, #root .u-min-width-6-of-10\@large, #root .u-min-width-6\/10\@large {
        min-width: 60%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-3-of-5\@small, #root .u-min-width-3\/5\@small, #root .u-min-width-6-of-10\@small, #root .u-min-width-6\/10\@small {
        min-width: 60%; } }
  #root .u-width-3-of-5, #root .u-width-3\/5, #root .u-width-6-of-10, #root .u-width-6\/10 {
    width: 60%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-3-of-5\@large, #root .u-width-3\/5\@large, #root .u-width-6-of-10\@large, #root .u-width-6\/10\@large {
        width: 60%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-3-of-5\@small, #root .u-width-3\/5\@small, #root .u-width-6-of-10\@small, #root .u-width-6\/10\@small {
        width: 60%; } }
  #root .u-max-width-3-of-5, #root .u-max-width-3\/5, #root .u-max-width-6-of-10, #root .u-max-width-6\/10 {
    max-width: 60%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-3-of-5\@large, #root .u-max-width-3\/5\@large, #root .u-max-width-6-of-10\@large, #root .u-max-width-6\/10\@large {
        max-width: 60%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-3-of-5\@small, #root .u-max-width-3\/5\@small, #root .u-max-width-6-of-10\@small, #root .u-max-width-6\/10\@small {
        max-width: 60%; } }
  #root .u-min-width-7-of-10, #root .u-min-width-7\/10 {
    min-width: 70%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-7-of-10\@large, #root .u-min-width-7\/10\@large {
        min-width: 70%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-7-of-10\@small, #root .u-min-width-7\/10\@small {
        min-width: 70%; } }
  #root .u-width-7-of-10, #root .u-width-7\/10 {
    width: 70%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-7-of-10\@large, #root .u-width-7\/10\@large {
        width: 70%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-7-of-10\@small, #root .u-width-7\/10\@small {
        width: 70%; } }
  #root .u-max-width-7-of-10, #root .u-max-width-7\/10 {
    max-width: 70%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-7-of-10\@large, #root .u-max-width-7\/10\@large {
        max-width: 70%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-7-of-10\@small, #root .u-max-width-7\/10\@small {
        max-width: 70%; } }
  #root .u-min-width-3-of-4, #root .u-min-width-3\/4, #root .u-min-width-6-of-8, #root .u-min-width-6\/8, #root .u-min-width-9-of-12, #root .u-min-width-9\/12 {
    min-width: 75%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-3-of-4\@large, #root .u-min-width-3\/4\@large, #root .u-min-width-6-of-8\@large, #root .u-min-width-6\/8\@large, #root .u-min-width-9-of-12\@large, #root .u-min-width-9\/12\@large {
        min-width: 75%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-3-of-4\@small, #root .u-min-width-3\/4\@small, #root .u-min-width-6-of-8\@small, #root .u-min-width-6\/8\@small, #root .u-min-width-9-of-12\@small, #root .u-min-width-9\/12\@small {
        min-width: 75%; } }
  #root .u-width-3-of-4, #root .u-width-3\/4, #root .u-width-6-of-8, #root .u-width-6\/8, #root .u-width-9-of-12, #root .u-width-9\/12 {
    width: 75%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-3-of-4\@large, #root .u-width-3\/4\@large, #root .u-width-6-of-8\@large, #root .u-width-6\/8\@large, #root .u-width-9-of-12\@large, #root .u-width-9\/12\@large {
        width: 75%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-3-of-4\@small, #root .u-width-3\/4\@small, #root .u-width-6-of-8\@small, #root .u-width-6\/8\@small, #root .u-width-9-of-12\@small, #root .u-width-9\/12\@small {
        width: 75%; } }
  #root .u-max-width-3-of-4, #root .u-max-width-3\/4, #root .u-max-width-6-of-8, #root .u-max-width-6\/8, #root .u-max-width-9-of-12, #root .u-max-width-9\/12 {
    max-width: 75%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-3-of-4\@large, #root .u-max-width-3\/4\@large, #root .u-max-width-6-of-8\@large, #root .u-max-width-6\/8\@large, #root .u-max-width-9-of-12\@large, #root .u-max-width-9\/12\@large {
        max-width: 75%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-3-of-4\@small, #root .u-max-width-3\/4\@small, #root .u-max-width-6-of-8\@small, #root .u-max-width-6\/8\@small, #root .u-max-width-9-of-12\@small, #root .u-max-width-9\/12\@small {
        max-width: 75%; } }
  #root .u-min-width-4-of-5, #root .u-min-width-4\/5, #root .u-min-width-8-of-10, #root .u-min-width-8\/10 {
    min-width: 80%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-4-of-5\@large, #root .u-min-width-4\/5\@large, #root .u-min-width-8-of-10\@large, #root .u-min-width-8\/10\@large {
        min-width: 80%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-4-of-5\@small, #root .u-min-width-4\/5\@small, #root .u-min-width-8-of-10\@small, #root .u-min-width-8\/10\@small {
        min-width: 80%; } }
  #root .u-width-4-of-5, #root .u-width-4\/5, #root .u-width-8-of-10, #root .u-width-8\/10 {
    width: 80%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-4-of-5\@large, #root .u-width-4\/5\@large, #root .u-width-8-of-10\@large, #root .u-width-8\/10\@large {
        width: 80%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-4-of-5\@small, #root .u-width-4\/5\@small, #root .u-width-8-of-10\@small, #root .u-width-8\/10\@small {
        width: 80%; } }
  #root .u-max-width-4-of-5, #root .u-max-width-4\/5, #root .u-max-width-8-of-10, #root .u-max-width-8\/10 {
    max-width: 80%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-4-of-5\@large, #root .u-max-width-4\/5\@large, #root .u-max-width-8-of-10\@large, #root .u-max-width-8\/10\@large {
        max-width: 80%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-4-of-5\@small, #root .u-max-width-4\/5\@small, #root .u-max-width-8-of-10\@small, #root .u-max-width-8\/10\@small {
        max-width: 80%; } }
  #root .u-min-width-9-of-10, #root .u-min-width-9\/10 {
    min-width: 90%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-9-of-10\@large, #root .u-min-width-9\/10\@large {
        min-width: 90%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-9-of-10\@small, #root .u-min-width-9\/10\@small {
        min-width: 90%; } }
  #root .u-width-9-of-10, #root .u-width-9\/10 {
    width: 90%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-9-of-10\@large, #root .u-width-9\/10\@large {
        width: 90%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-9-of-10\@small, #root .u-width-9\/10\@small {
        width: 90%; } }
  #root .u-max-width-9-of-10, #root .u-max-width-9\/10 {
    max-width: 90%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-9-of-10\@large, #root .u-max-width-9\/10\@large {
        max-width: 90%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-9-of-10\@small, #root .u-max-width-9\/10\@small {
        max-width: 90%; } }
  #root .u-min-width-1-of-1, #root .u-min-width-1\/1, #root .u-min-width-2-of-2, #root .u-min-width-2\/2, #root .u-min-width-3-of-3, #root .u-min-width-3\/3, #root .u-min-width-4-of-4, #root .u-min-width-4\/4, #root .u-min-width-5-of-5, #root .u-min-width-5\/5, #root .u-min-width-6-of-6, #root .u-min-width-6\/6, #root .u-min-width-7-of-7, #root .u-min-width-7\/7, #root .u-min-width-8-of-8, #root .u-min-width-8\/8, #root .u-min-width-9-of-9, #root .u-min-width-9\/9, #root .u-min-width-10-of-10, #root .u-min-width-10\/10, #root .u-min-width-11-of-11, #root .u-min-width-11\/11, #root .u-min-width-12-of-12, #root .u-min-width-12\/12 {
    min-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-1\@large, #root .u-min-width-1\/1\@large, #root .u-min-width-2-of-2\@large, #root .u-min-width-2\/2\@large, #root .u-min-width-3-of-3\@large, #root .u-min-width-3\/3\@large, #root .u-min-width-4-of-4\@large, #root .u-min-width-4\/4\@large, #root .u-min-width-5-of-5\@large, #root .u-min-width-5\/5\@large, #root .u-min-width-6-of-6\@large, #root .u-min-width-6\/6\@large, #root .u-min-width-7-of-7\@large, #root .u-min-width-7\/7\@large, #root .u-min-width-8-of-8\@large, #root .u-min-width-8\/8\@large, #root .u-min-width-9-of-9\@large, #root .u-min-width-9\/9\@large, #root .u-min-width-10-of-10\@large, #root .u-min-width-10\/10\@large, #root .u-min-width-11-of-11\@large, #root .u-min-width-11\/11\@large, #root .u-min-width-12-of-12\@large, #root .u-min-width-12\/12\@large {
        min-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-1\@small, #root .u-min-width-1\/1\@small, #root .u-min-width-2-of-2\@small, #root .u-min-width-2\/2\@small, #root .u-min-width-3-of-3\@small, #root .u-min-width-3\/3\@small, #root .u-min-width-4-of-4\@small, #root .u-min-width-4\/4\@small, #root .u-min-width-5-of-5\@small, #root .u-min-width-5\/5\@small, #root .u-min-width-6-of-6\@small, #root .u-min-width-6\/6\@small, #root .u-min-width-7-of-7\@small, #root .u-min-width-7\/7\@small, #root .u-min-width-8-of-8\@small, #root .u-min-width-8\/8\@small, #root .u-min-width-9-of-9\@small, #root .u-min-width-9\/9\@small, #root .u-min-width-10-of-10\@small, #root .u-min-width-10\/10\@small, #root .u-min-width-11-of-11\@small, #root .u-min-width-11\/11\@small, #root .u-min-width-12-of-12\@small, #root .u-min-width-12\/12\@small {
        min-width: 100%; } }
  #root .u-width-1-of-1, #root .u-width-1\/1, #root .u-width-2-of-2, #root .u-width-2\/2, #root .u-width-3-of-3, #root .u-width-3\/3, #root .u-width-4-of-4, #root .u-width-4\/4, #root .u-width-5-of-5, #root .u-width-5\/5, #root .u-width-6-of-6, #root .u-width-6\/6, #root .u-width-7-of-7, #root .u-width-7\/7, #root .u-width-8-of-8, #root .u-width-8\/8, #root .u-width-9-of-9, #root .u-width-9\/9, #root .u-width-10-of-10, #root .u-width-10\/10, #root .u-width-11-of-11, #root .u-width-11\/11, #root .u-width-12-of-12, #root .u-width-12\/12 {
    width: 100%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-1\@large, #root .u-width-1\/1\@large, #root .u-width-2-of-2\@large, #root .u-width-2\/2\@large, #root .u-width-3-of-3\@large, #root .u-width-3\/3\@large, #root .u-width-4-of-4\@large, #root .u-width-4\/4\@large, #root .u-width-5-of-5\@large, #root .u-width-5\/5\@large, #root .u-width-6-of-6\@large, #root .u-width-6\/6\@large, #root .u-width-7-of-7\@large, #root .u-width-7\/7\@large, #root .u-width-8-of-8\@large, #root .u-width-8\/8\@large, #root .u-width-9-of-9\@large, #root .u-width-9\/9\@large, #root .u-width-10-of-10\@large, #root .u-width-10\/10\@large, #root .u-width-11-of-11\@large, #root .u-width-11\/11\@large, #root .u-width-12-of-12\@large, #root .u-width-12\/12\@large {
        width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-1\@small, #root .u-width-1\/1\@small, #root .u-width-2-of-2\@small, #root .u-width-2\/2\@small, #root .u-width-3-of-3\@small, #root .u-width-3\/3\@small, #root .u-width-4-of-4\@small, #root .u-width-4\/4\@small, #root .u-width-5-of-5\@small, #root .u-width-5\/5\@small, #root .u-width-6-of-6\@small, #root .u-width-6\/6\@small, #root .u-width-7-of-7\@small, #root .u-width-7\/7\@small, #root .u-width-8-of-8\@small, #root .u-width-8\/8\@small, #root .u-width-9-of-9\@small, #root .u-width-9\/9\@small, #root .u-width-10-of-10\@small, #root .u-width-10\/10\@small, #root .u-width-11-of-11\@small, #root .u-width-11\/11\@small, #root .u-width-12-of-12\@small, #root .u-width-12\/12\@small {
        width: 100%; } }
  #root .u-max-width-1-of-1, #root .u-max-width-1\/1, #root .u-max-width-2-of-2, #root .u-max-width-2\/2, #root .u-max-width-3-of-3, #root .u-max-width-3\/3, #root .u-max-width-4-of-4, #root .u-max-width-4\/4, #root .u-max-width-5-of-5, #root .u-max-width-5\/5, #root .u-max-width-6-of-6, #root .u-max-width-6\/6, #root .u-max-width-7-of-7, #root .u-max-width-7\/7, #root .u-max-width-8-of-8, #root .u-max-width-8\/8, #root .u-max-width-9-of-9, #root .u-max-width-9\/9, #root .u-max-width-10-of-10, #root .u-max-width-10\/10, #root .u-max-width-11-of-11, #root .u-max-width-11\/11, #root .u-max-width-12-of-12, #root .u-max-width-12\/12 {
    max-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-1\@large, #root .u-max-width-1\/1\@large, #root .u-max-width-2-of-2\@large, #root .u-max-width-2\/2\@large, #root .u-max-width-3-of-3\@large, #root .u-max-width-3\/3\@large, #root .u-max-width-4-of-4\@large, #root .u-max-width-4\/4\@large, #root .u-max-width-5-of-5\@large, #root .u-max-width-5\/5\@large, #root .u-max-width-6-of-6\@large, #root .u-max-width-6\/6\@large, #root .u-max-width-7-of-7\@large, #root .u-max-width-7\/7\@large, #root .u-max-width-8-of-8\@large, #root .u-max-width-8\/8\@large, #root .u-max-width-9-of-9\@large, #root .u-max-width-9\/9\@large, #root .u-max-width-10-of-10\@large, #root .u-max-width-10\/10\@large, #root .u-max-width-11-of-11\@large, #root .u-max-width-11\/11\@large, #root .u-max-width-12-of-12\@large, #root .u-max-width-12\/12\@large {
        max-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-1\@small, #root .u-max-width-1\/1\@small, #root .u-max-width-2-of-2\@small, #root .u-max-width-2\/2\@small, #root .u-max-width-3-of-3\@small, #root .u-max-width-3\/3\@small, #root .u-max-width-4-of-4\@small, #root .u-max-width-4\/4\@small, #root .u-max-width-5-of-5\@small, #root .u-max-width-5\/5\@small, #root .u-max-width-6-of-6\@small, #root .u-max-width-6\/6\@small, #root .u-max-width-7-of-7\@small, #root .u-max-width-7\/7\@small, #root .u-max-width-8-of-8\@small, #root .u-max-width-8\/8\@small, #root .u-max-width-9-of-9\@small, #root .u-max-width-9\/9\@small, #root .u-max-width-10-of-10\@small, #root .u-max-width-10\/10\@small, #root .u-max-width-11-of-11\@small, #root .u-max-width-11\/11\@small, #root .u-max-width-12-of-12\@small, #root .u-max-width-12\/12\@small {
        max-width: 100%; } }
  #root :root {
    font-size: 16px; }
  #root *, #root *:before, #root *:after {
    box-sizing: border-box; }
  #root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
    font-size: 1rem; }
  #root body, #root h1, #root h2, #root h3, #root h4, #root h5, #root h6, #root ol, #root ul, #root dl, #root p, #root button {
    margin-top: 0;
    margin-bottom: 0; }
  #root body {
    overflow-x: hidden;
    margin-right: 0;
    margin-left: 0; }
  #root a {
    word-wrap: break-word; }
  #root a, #root button, #root label, #root legend {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  #root button, #root a {
    -webkit-tap-highlight-color: transparent; }
  #root main {
    display: block; }
  #root img {
    border: 0; }
  #root legend, #root fieldset {
    display: block;
    padding: 0;
    border: 0; }
  #root fieldset {
    margin: 0; }
  #root .u-min-width-1-of-10, #root .u-min-width-1\/10 {
    min-width: 10%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-10\@large, #root .u-min-width-1\/10\@large {
        min-width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-10\@small, #root .u-min-width-1\/10\@small {
        min-width: 10%; } }
  #root .u-width-1-of-10, #root .u-width-1\/10 {
    width: 10%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-10\@large, #root .u-width-1\/10\@large {
        width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-10\@small, #root .u-width-1\/10\@small {
        width: 10%; } }
  #root .u-max-width-1-of-10, #root .u-max-width-1\/10 {
    max-width: 10%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-10\@large, #root .u-max-width-1\/10\@large {
        max-width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-10\@small, #root .u-max-width-1\/10\@small {
        max-width: 10%; } }
  #root .u-min-width-1-of-5, #root .u-min-width-1\/5, #root .u-min-width-2-of-10, #root .u-min-width-2\/10 {
    min-width: 20%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-5\@large, #root .u-min-width-1\/5\@large, #root .u-min-width-2-of-10\@large, #root .u-min-width-2\/10\@large {
        min-width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-5\@small, #root .u-min-width-1\/5\@small, #root .u-min-width-2-of-10\@small, #root .u-min-width-2\/10\@small {
        min-width: 20%; } }
  #root .u-width-1-of-5, #root .u-width-1\/5, #root .u-width-2-of-10, #root .u-width-2\/10 {
    width: 20%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-5\@large, #root .u-width-1\/5\@large, #root .u-width-2-of-10\@large, #root .u-width-2\/10\@large {
        width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-5\@small, #root .u-width-1\/5\@small, #root .u-width-2-of-10\@small, #root .u-width-2\/10\@small {
        width: 20%; } }
  #root .u-max-width-1-of-5, #root .u-max-width-1\/5, #root .u-max-width-2-of-10, #root .u-max-width-2\/10 {
    max-width: 20%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-5\@large, #root .u-max-width-1\/5\@large, #root .u-max-width-2-of-10\@large, #root .u-max-width-2\/10\@large {
        max-width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-5\@small, #root .u-max-width-1\/5\@small, #root .u-max-width-2-of-10\@small, #root .u-max-width-2\/10\@small {
        max-width: 20%; } }
  #root .u-min-width-1-of-4, #root .u-min-width-1\/4, #root .u-min-width-2-of-8, #root .u-min-width-2\/8, #root .u-min-width-3-of-12, #root .u-min-width-3\/12 {
    min-width: 25%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-4\@large, #root .u-min-width-1\/4\@large, #root .u-min-width-2-of-8\@large, #root .u-min-width-2\/8\@large, #root .u-min-width-3-of-12\@large, #root .u-min-width-3\/12\@large {
        min-width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-4\@small, #root .u-min-width-1\/4\@small, #root .u-min-width-2-of-8\@small, #root .u-min-width-2\/8\@small, #root .u-min-width-3-of-12\@small, #root .u-min-width-3\/12\@small {
        min-width: 25%; } }
  #root .u-width-1-of-4, #root .u-width-1\/4, #root .u-width-2-of-8, #root .u-width-2\/8, #root .u-width-3-of-12, #root .u-width-3\/12 {
    width: 25%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-4\@large, #root .u-width-1\/4\@large, #root .u-width-2-of-8\@large, #root .u-width-2\/8\@large, #root .u-width-3-of-12\@large, #root .u-width-3\/12\@large {
        width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-4\@small, #root .u-width-1\/4\@small, #root .u-width-2-of-8\@small, #root .u-width-2\/8\@small, #root .u-width-3-of-12\@small, #root .u-width-3\/12\@small {
        width: 25%; } }
  #root .u-max-width-1-of-4, #root .u-max-width-1\/4, #root .u-max-width-2-of-8, #root .u-max-width-2\/8, #root .u-max-width-3-of-12, #root .u-max-width-3\/12 {
    max-width: 25%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-4\@large, #root .u-max-width-1\/4\@large, #root .u-max-width-2-of-8\@large, #root .u-max-width-2\/8\@large, #root .u-max-width-3-of-12\@large, #root .u-max-width-3\/12\@large {
        max-width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-4\@small, #root .u-max-width-1\/4\@small, #root .u-max-width-2-of-8\@small, #root .u-max-width-2\/8\@small, #root .u-max-width-3-of-12\@small, #root .u-max-width-3\/12\@small {
        max-width: 25%; } }
  #root .u-min-width-3-of-10, #root .u-min-width-3\/10 {
    min-width: 30%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-3-of-10\@large, #root .u-min-width-3\/10\@large {
        min-width: 30%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-3-of-10\@small, #root .u-min-width-3\/10\@small {
        min-width: 30%; } }
  #root .u-width-3-of-10, #root .u-width-3\/10 {
    width: 30%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-3-of-10\@large, #root .u-width-3\/10\@large {
        width: 30%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-3-of-10\@small, #root .u-width-3\/10\@small {
        width: 30%; } }
  #root .u-max-width-3-of-10, #root .u-max-width-3\/10 {
    max-width: 30%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-3-of-10\@large, #root .u-max-width-3\/10\@large {
        max-width: 30%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-3-of-10\@small, #root .u-max-width-3\/10\@small {
        max-width: 30%; } }
  #root .u-min-width-2-of-5, #root .u-min-width-2\/5, #root .u-min-width-4-of-10, #root .u-min-width-4\/10 {
    min-width: 40%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-2-of-5\@large, #root .u-min-width-2\/5\@large, #root .u-min-width-4-of-10\@large, #root .u-min-width-4\/10\@large {
        min-width: 40%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-2-of-5\@small, #root .u-min-width-2\/5\@small, #root .u-min-width-4-of-10\@small, #root .u-min-width-4\/10\@small {
        min-width: 40%; } }
  #root .u-width-2-of-5, #root .u-width-2\/5, #root .u-width-4-of-10, #root .u-width-4\/10 {
    width: 40%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-2-of-5\@large, #root .u-width-2\/5\@large, #root .u-width-4-of-10\@large, #root .u-width-4\/10\@large {
        width: 40%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-2-of-5\@small, #root .u-width-2\/5\@small, #root .u-width-4-of-10\@small, #root .u-width-4\/10\@small {
        width: 40%; } }
  #root .u-max-width-2-of-5, #root .u-max-width-2\/5, #root .u-max-width-4-of-10, #root .u-max-width-4\/10 {
    max-width: 40%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-2-of-5\@large, #root .u-max-width-2\/5\@large, #root .u-max-width-4-of-10\@large, #root .u-max-width-4\/10\@large {
        max-width: 40%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-2-of-5\@small, #root .u-max-width-2\/5\@small, #root .u-max-width-4-of-10\@small, #root .u-max-width-4\/10\@small {
        max-width: 40%; } }
  #root .u-min-width-1-of-2, #root .u-min-width-1\/2, #root .u-min-width-2-of-4, #root .u-min-width-2\/4, #root .u-min-width-3-of-6, #root .u-min-width-3\/6, #root .u-min-width-4-of-8, #root .u-min-width-4\/8, #root .u-min-width-5-of-10, #root .u-min-width-5\/10, #root .u-min-width-6-of-12, #root .u-min-width-6\/12 {
    min-width: 50%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-2\@large, #root .u-min-width-1\/2\@large, #root .u-min-width-2-of-4\@large, #root .u-min-width-2\/4\@large, #root .u-min-width-3-of-6\@large, #root .u-min-width-3\/6\@large, #root .u-min-width-4-of-8\@large, #root .u-min-width-4\/8\@large, #root .u-min-width-5-of-10\@large, #root .u-min-width-5\/10\@large, #root .u-min-width-6-of-12\@large, #root .u-min-width-6\/12\@large {
        min-width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-2\@small, #root .u-min-width-1\/2\@small, #root .u-min-width-2-of-4\@small, #root .u-min-width-2\/4\@small, #root .u-min-width-3-of-6\@small, #root .u-min-width-3\/6\@small, #root .u-min-width-4-of-8\@small, #root .u-min-width-4\/8\@small, #root .u-min-width-5-of-10\@small, #root .u-min-width-5\/10\@small, #root .u-min-width-6-of-12\@small, #root .u-min-width-6\/12\@small {
        min-width: 50%; } }
  #root .u-width-1-of-2, #root .u-width-1\/2, #root .u-width-2-of-4, #root .u-width-2\/4, #root .u-width-3-of-6, #root .u-width-3\/6, #root .u-width-4-of-8, #root .u-width-4\/8, #root .u-width-5-of-10, #root .u-width-5\/10, #root .u-width-6-of-12, #root .u-width-6\/12 {
    width: 50%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-2\@large, #root .u-width-1\/2\@large, #root .u-width-2-of-4\@large, #root .u-width-2\/4\@large, #root .u-width-3-of-6\@large, #root .u-width-3\/6\@large, #root .u-width-4-of-8\@large, #root .u-width-4\/8\@large, #root .u-width-5-of-10\@large, #root .u-width-5\/10\@large, #root .u-width-6-of-12\@large, #root .u-width-6\/12\@large {
        width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-2\@small, #root .u-width-1\/2\@small, #root .u-width-2-of-4\@small, #root .u-width-2\/4\@small, #root .u-width-3-of-6\@small, #root .u-width-3\/6\@small, #root .u-width-4-of-8\@small, #root .u-width-4\/8\@small, #root .u-width-5-of-10\@small, #root .u-width-5\/10\@small, #root .u-width-6-of-12\@small, #root .u-width-6\/12\@small {
        width: 50%; } }
  #root .u-max-width-1-of-2, #root .u-max-width-1\/2, #root .u-max-width-2-of-4, #root .u-max-width-2\/4, #root .u-max-width-3-of-6, #root .u-max-width-3\/6, #root .u-max-width-4-of-8, #root .u-max-width-4\/8, #root .u-max-width-5-of-10, #root .u-max-width-5\/10, #root .u-max-width-6-of-12, #root .u-max-width-6\/12 {
    max-width: 50%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-2\@large, #root .u-max-width-1\/2\@large, #root .u-max-width-2-of-4\@large, #root .u-max-width-2\/4\@large, #root .u-max-width-3-of-6\@large, #root .u-max-width-3\/6\@large, #root .u-max-width-4-of-8\@large, #root .u-max-width-4\/8\@large, #root .u-max-width-5-of-10\@large, #root .u-max-width-5\/10\@large, #root .u-max-width-6-of-12\@large, #root .u-max-width-6\/12\@large {
        max-width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-2\@small, #root .u-max-width-1\/2\@small, #root .u-max-width-2-of-4\@small, #root .u-max-width-2\/4\@small, #root .u-max-width-3-of-6\@small, #root .u-max-width-3\/6\@small, #root .u-max-width-4-of-8\@small, #root .u-max-width-4\/8\@small, #root .u-max-width-5-of-10\@small, #root .u-max-width-5\/10\@small, #root .u-max-width-6-of-12\@small, #root .u-max-width-6\/12\@small {
        max-width: 50%; } }
  #root .u-min-width-3-of-5, #root .u-min-width-3\/5, #root .u-min-width-6-of-10, #root .u-min-width-6\/10 {
    min-width: 60%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-3-of-5\@large, #root .u-min-width-3\/5\@large, #root .u-min-width-6-of-10\@large, #root .u-min-width-6\/10\@large {
        min-width: 60%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-3-of-5\@small, #root .u-min-width-3\/5\@small, #root .u-min-width-6-of-10\@small, #root .u-min-width-6\/10\@small {
        min-width: 60%; } }
  #root .u-width-3-of-5, #root .u-width-3\/5, #root .u-width-6-of-10, #root .u-width-6\/10 {
    width: 60%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-3-of-5\@large, #root .u-width-3\/5\@large, #root .u-width-6-of-10\@large, #root .u-width-6\/10\@large {
        width: 60%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-3-of-5\@small, #root .u-width-3\/5\@small, #root .u-width-6-of-10\@small, #root .u-width-6\/10\@small {
        width: 60%; } }
  #root .u-max-width-3-of-5, #root .u-max-width-3\/5, #root .u-max-width-6-of-10, #root .u-max-width-6\/10 {
    max-width: 60%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-3-of-5\@large, #root .u-max-width-3\/5\@large, #root .u-max-width-6-of-10\@large, #root .u-max-width-6\/10\@large {
        max-width: 60%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-3-of-5\@small, #root .u-max-width-3\/5\@small, #root .u-max-width-6-of-10\@small, #root .u-max-width-6\/10\@small {
        max-width: 60%; } }
  #root .u-min-width-7-of-10, #root .u-min-width-7\/10 {
    min-width: 70%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-7-of-10\@large, #root .u-min-width-7\/10\@large {
        min-width: 70%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-7-of-10\@small, #root .u-min-width-7\/10\@small {
        min-width: 70%; } }
  #root .u-width-7-of-10, #root .u-width-7\/10 {
    width: 70%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-7-of-10\@large, #root .u-width-7\/10\@large {
        width: 70%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-7-of-10\@small, #root .u-width-7\/10\@small {
        width: 70%; } }
  #root .u-max-width-7-of-10, #root .u-max-width-7\/10 {
    max-width: 70%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-7-of-10\@large, #root .u-max-width-7\/10\@large {
        max-width: 70%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-7-of-10\@small, #root .u-max-width-7\/10\@small {
        max-width: 70%; } }
  #root .u-min-width-3-of-4, #root .u-min-width-3\/4, #root .u-min-width-6-of-8, #root .u-min-width-6\/8, #root .u-min-width-9-of-12, #root .u-min-width-9\/12 {
    min-width: 75%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-3-of-4\@large, #root .u-min-width-3\/4\@large, #root .u-min-width-6-of-8\@large, #root .u-min-width-6\/8\@large, #root .u-min-width-9-of-12\@large, #root .u-min-width-9\/12\@large {
        min-width: 75%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-3-of-4\@small, #root .u-min-width-3\/4\@small, #root .u-min-width-6-of-8\@small, #root .u-min-width-6\/8\@small, #root .u-min-width-9-of-12\@small, #root .u-min-width-9\/12\@small {
        min-width: 75%; } }
  #root .u-width-3-of-4, #root .u-width-3\/4, #root .u-width-6-of-8, #root .u-width-6\/8, #root .u-width-9-of-12, #root .u-width-9\/12 {
    width: 75%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-3-of-4\@large, #root .u-width-3\/4\@large, #root .u-width-6-of-8\@large, #root .u-width-6\/8\@large, #root .u-width-9-of-12\@large, #root .u-width-9\/12\@large {
        width: 75%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-3-of-4\@small, #root .u-width-3\/4\@small, #root .u-width-6-of-8\@small, #root .u-width-6\/8\@small, #root .u-width-9-of-12\@small, #root .u-width-9\/12\@small {
        width: 75%; } }
  #root .u-max-width-3-of-4, #root .u-max-width-3\/4, #root .u-max-width-6-of-8, #root .u-max-width-6\/8, #root .u-max-width-9-of-12, #root .u-max-width-9\/12 {
    max-width: 75%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-3-of-4\@large, #root .u-max-width-3\/4\@large, #root .u-max-width-6-of-8\@large, #root .u-max-width-6\/8\@large, #root .u-max-width-9-of-12\@large, #root .u-max-width-9\/12\@large {
        max-width: 75%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-3-of-4\@small, #root .u-max-width-3\/4\@small, #root .u-max-width-6-of-8\@small, #root .u-max-width-6\/8\@small, #root .u-max-width-9-of-12\@small, #root .u-max-width-9\/12\@small {
        max-width: 75%; } }
  #root .u-min-width-4-of-5, #root .u-min-width-4\/5, #root .u-min-width-8-of-10, #root .u-min-width-8\/10 {
    min-width: 80%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-4-of-5\@large, #root .u-min-width-4\/5\@large, #root .u-min-width-8-of-10\@large, #root .u-min-width-8\/10\@large {
        min-width: 80%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-4-of-5\@small, #root .u-min-width-4\/5\@small, #root .u-min-width-8-of-10\@small, #root .u-min-width-8\/10\@small {
        min-width: 80%; } }
  #root .u-width-4-of-5, #root .u-width-4\/5, #root .u-width-8-of-10, #root .u-width-8\/10 {
    width: 80%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-4-of-5\@large, #root .u-width-4\/5\@large, #root .u-width-8-of-10\@large, #root .u-width-8\/10\@large {
        width: 80%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-4-of-5\@small, #root .u-width-4\/5\@small, #root .u-width-8-of-10\@small, #root .u-width-8\/10\@small {
        width: 80%; } }
  #root .u-max-width-4-of-5, #root .u-max-width-4\/5, #root .u-max-width-8-of-10, #root .u-max-width-8\/10 {
    max-width: 80%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-4-of-5\@large, #root .u-max-width-4\/5\@large, #root .u-max-width-8-of-10\@large, #root .u-max-width-8\/10\@large {
        max-width: 80%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-4-of-5\@small, #root .u-max-width-4\/5\@small, #root .u-max-width-8-of-10\@small, #root .u-max-width-8\/10\@small {
        max-width: 80%; } }
  #root .u-min-width-9-of-10, #root .u-min-width-9\/10 {
    min-width: 90%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-9-of-10\@large, #root .u-min-width-9\/10\@large {
        min-width: 90%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-9-of-10\@small, #root .u-min-width-9\/10\@small {
        min-width: 90%; } }
  #root .u-width-9-of-10, #root .u-width-9\/10 {
    width: 90%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-9-of-10\@large, #root .u-width-9\/10\@large {
        width: 90%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-9-of-10\@small, #root .u-width-9\/10\@small {
        width: 90%; } }
  #root .u-max-width-9-of-10, #root .u-max-width-9\/10 {
    max-width: 90%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-9-of-10\@large, #root .u-max-width-9\/10\@large {
        max-width: 90%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-9-of-10\@small, #root .u-max-width-9\/10\@small {
        max-width: 90%; } }
  #root .u-min-width-1-of-1, #root .u-min-width-1\/1, #root .u-min-width-2-of-2, #root .u-min-width-2\/2, #root .u-min-width-3-of-3, #root .u-min-width-3\/3, #root .u-min-width-4-of-4, #root .u-min-width-4\/4, #root .u-min-width-5-of-5, #root .u-min-width-5\/5, #root .u-min-width-6-of-6, #root .u-min-width-6\/6, #root .u-min-width-7-of-7, #root .u-min-width-7\/7, #root .u-min-width-8-of-8, #root .u-min-width-8\/8, #root .u-min-width-9-of-9, #root .u-min-width-9\/9, #root .u-min-width-10-of-10, #root .u-min-width-10\/10, #root .u-min-width-11-of-11, #root .u-min-width-11\/11, #root .u-min-width-12-of-12, #root .u-min-width-12\/12 {
    min-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-min-width-1-of-1\@large, #root .u-min-width-1\/1\@large, #root .u-min-width-2-of-2\@large, #root .u-min-width-2\/2\@large, #root .u-min-width-3-of-3\@large, #root .u-min-width-3\/3\@large, #root .u-min-width-4-of-4\@large, #root .u-min-width-4\/4\@large, #root .u-min-width-5-of-5\@large, #root .u-min-width-5\/5\@large, #root .u-min-width-6-of-6\@large, #root .u-min-width-6\/6\@large, #root .u-min-width-7-of-7\@large, #root .u-min-width-7\/7\@large, #root .u-min-width-8-of-8\@large, #root .u-min-width-8\/8\@large, #root .u-min-width-9-of-9\@large, #root .u-min-width-9\/9\@large, #root .u-min-width-10-of-10\@large, #root .u-min-width-10\/10\@large, #root .u-min-width-11-of-11\@large, #root .u-min-width-11\/11\@large, #root .u-min-width-12-of-12\@large, #root .u-min-width-12\/12\@large {
        min-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-min-width-1-of-1\@small, #root .u-min-width-1\/1\@small, #root .u-min-width-2-of-2\@small, #root .u-min-width-2\/2\@small, #root .u-min-width-3-of-3\@small, #root .u-min-width-3\/3\@small, #root .u-min-width-4-of-4\@small, #root .u-min-width-4\/4\@small, #root .u-min-width-5-of-5\@small, #root .u-min-width-5\/5\@small, #root .u-min-width-6-of-6\@small, #root .u-min-width-6\/6\@small, #root .u-min-width-7-of-7\@small, #root .u-min-width-7\/7\@small, #root .u-min-width-8-of-8\@small, #root .u-min-width-8\/8\@small, #root .u-min-width-9-of-9\@small, #root .u-min-width-9\/9\@small, #root .u-min-width-10-of-10\@small, #root .u-min-width-10\/10\@small, #root .u-min-width-11-of-11\@small, #root .u-min-width-11\/11\@small, #root .u-min-width-12-of-12\@small, #root .u-min-width-12\/12\@small {
        min-width: 100%; } }
  #root .u-width-1-of-1, #root .u-width-1\/1, #root .u-width-2-of-2, #root .u-width-2\/2, #root .u-width-3-of-3, #root .u-width-3\/3, #root .u-width-4-of-4, #root .u-width-4\/4, #root .u-width-5-of-5, #root .u-width-5\/5, #root .u-width-6-of-6, #root .u-width-6\/6, #root .u-width-7-of-7, #root .u-width-7\/7, #root .u-width-8-of-8, #root .u-width-8\/8, #root .u-width-9-of-9, #root .u-width-9\/9, #root .u-width-10-of-10, #root .u-width-10\/10, #root .u-width-11-of-11, #root .u-width-11\/11, #root .u-width-12-of-12, #root .u-width-12\/12 {
    width: 100%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-width-1-of-1\@large, #root .u-width-1\/1\@large, #root .u-width-2-of-2\@large, #root .u-width-2\/2\@large, #root .u-width-3-of-3\@large, #root .u-width-3\/3\@large, #root .u-width-4-of-4\@large, #root .u-width-4\/4\@large, #root .u-width-5-of-5\@large, #root .u-width-5\/5\@large, #root .u-width-6-of-6\@large, #root .u-width-6\/6\@large, #root .u-width-7-of-7\@large, #root .u-width-7\/7\@large, #root .u-width-8-of-8\@large, #root .u-width-8\/8\@large, #root .u-width-9-of-9\@large, #root .u-width-9\/9\@large, #root .u-width-10-of-10\@large, #root .u-width-10\/10\@large, #root .u-width-11-of-11\@large, #root .u-width-11\/11\@large, #root .u-width-12-of-12\@large, #root .u-width-12\/12\@large {
        width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-width-1-of-1\@small, #root .u-width-1\/1\@small, #root .u-width-2-of-2\@small, #root .u-width-2\/2\@small, #root .u-width-3-of-3\@small, #root .u-width-3\/3\@small, #root .u-width-4-of-4\@small, #root .u-width-4\/4\@small, #root .u-width-5-of-5\@small, #root .u-width-5\/5\@small, #root .u-width-6-of-6\@small, #root .u-width-6\/6\@small, #root .u-width-7-of-7\@small, #root .u-width-7\/7\@small, #root .u-width-8-of-8\@small, #root .u-width-8\/8\@small, #root .u-width-9-of-9\@small, #root .u-width-9\/9\@small, #root .u-width-10-of-10\@small, #root .u-width-10\/10\@small, #root .u-width-11-of-11\@small, #root .u-width-11\/11\@small, #root .u-width-12-of-12\@small, #root .u-width-12\/12\@small {
        width: 100%; } }
  #root .u-max-width-1-of-1, #root .u-max-width-1\/1, #root .u-max-width-2-of-2, #root .u-max-width-2\/2, #root .u-max-width-3-of-3, #root .u-max-width-3\/3, #root .u-max-width-4-of-4, #root .u-max-width-4\/4, #root .u-max-width-5-of-5, #root .u-max-width-5\/5, #root .u-max-width-6-of-6, #root .u-max-width-6\/6, #root .u-max-width-7-of-7, #root .u-max-width-7\/7, #root .u-max-width-8-of-8, #root .u-max-width-8\/8, #root .u-max-width-9-of-9, #root .u-max-width-9\/9, #root .u-max-width-10-of-10, #root .u-max-width-10\/10, #root .u-max-width-11-of-11, #root .u-max-width-11\/11, #root .u-max-width-12-of-12, #root .u-max-width-12\/12 {
    max-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      #root .u-max-width-1-of-1\@large, #root .u-max-width-1\/1\@large, #root .u-max-width-2-of-2\@large, #root .u-max-width-2\/2\@large, #root .u-max-width-3-of-3\@large, #root .u-max-width-3\/3\@large, #root .u-max-width-4-of-4\@large, #root .u-max-width-4\/4\@large, #root .u-max-width-5-of-5\@large, #root .u-max-width-5\/5\@large, #root .u-max-width-6-of-6\@large, #root .u-max-width-6\/6\@large, #root .u-max-width-7-of-7\@large, #root .u-max-width-7\/7\@large, #root .u-max-width-8-of-8\@large, #root .u-max-width-8\/8\@large, #root .u-max-width-9-of-9\@large, #root .u-max-width-9\/9\@large, #root .u-max-width-10-of-10\@large, #root .u-max-width-10\/10\@large, #root .u-max-width-11-of-11\@large, #root .u-max-width-11\/11\@large, #root .u-max-width-12-of-12\@large, #root .u-max-width-12\/12\@large {
        max-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      #root .u-max-width-1-of-1\@small, #root .u-max-width-1\/1\@small, #root .u-max-width-2-of-2\@small, #root .u-max-width-2\/2\@small, #root .u-max-width-3-of-3\@small, #root .u-max-width-3\/3\@small, #root .u-max-width-4-of-4\@small, #root .u-max-width-4\/4\@small, #root .u-max-width-5-of-5\@small, #root .u-max-width-5\/5\@small, #root .u-max-width-6-of-6\@small, #root .u-max-width-6\/6\@small, #root .u-max-width-7-of-7\@small, #root .u-max-width-7\/7\@small, #root .u-max-width-8-of-8\@small, #root .u-max-width-8\/8\@small, #root .u-max-width-9-of-9\@small, #root .u-max-width-9\/9\@small, #root .u-max-width-10-of-10\@small, #root .u-max-width-10\/10\@small, #root .u-max-width-11-of-11\@small, #root .u-max-width-11\/11\@small, #root .u-max-width-12-of-12\@small, #root .u-max-width-12\/12\@small {
        max-width: 100%; } }
  #root p + p {
    padding-top: 0.625rem; }

/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
.u-min-width-1-of-10, .u-min-width-1\/10 {
  min-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-10\@large, .u-min-width-1\/10\@large {
      min-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-10\@small, .u-min-width-1\/10\@small {
      min-width: 10%; } }

.u-width-1-of-10, .u-width-1\/10 {
  width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-10\@large, .u-width-1\/10\@large {
      width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-10\@small, .u-width-1\/10\@small {
      width: 10%; } }

.u-max-width-1-of-10, .u-max-width-1\/10 {
  max-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-10\@large, .u-max-width-1\/10\@large {
      max-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-10\@small, .u-max-width-1\/10\@small {
      max-width: 10%; } }

.u-min-width-1-of-5, .u-min-width-1\/5, .u-min-width-2-of-10, .u-min-width-2\/10 {
  min-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-5\@large, .u-min-width-1\/5\@large, .u-min-width-2-of-10\@large, .u-min-width-2\/10\@large {
      min-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-5\@small, .u-min-width-1\/5\@small, .u-min-width-2-of-10\@small, .u-min-width-2\/10\@small {
      min-width: 20%; } }

.u-width-1-of-5, .u-width-1\/5, .u-width-2-of-10, .u-width-2\/10 {
  width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-5\@large, .u-width-1\/5\@large, .u-width-2-of-10\@large, .u-width-2\/10\@large {
      width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-5\@small, .u-width-1\/5\@small, .u-width-2-of-10\@small, .u-width-2\/10\@small {
      width: 20%; } }

.u-max-width-1-of-5, .u-max-width-1\/5, .u-max-width-2-of-10, .u-max-width-2\/10 {
  max-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-5\@large, .u-max-width-1\/5\@large, .u-max-width-2-of-10\@large, .u-max-width-2\/10\@large {
      max-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-5\@small, .u-max-width-1\/5\@small, .u-max-width-2-of-10\@small, .u-max-width-2\/10\@small {
      max-width: 20%; } }

.u-min-width-1-of-4, .u-min-width-1\/4, .u-min-width-2-of-8, .u-min-width-2\/8, .u-min-width-3-of-12, .u-min-width-3\/12 {
  min-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-4\@large, .u-min-width-1\/4\@large, .u-min-width-2-of-8\@large, .u-min-width-2\/8\@large, .u-min-width-3-of-12\@large, .u-min-width-3\/12\@large {
      min-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-4\@small, .u-min-width-1\/4\@small, .u-min-width-2-of-8\@small, .u-min-width-2\/8\@small, .u-min-width-3-of-12\@small, .u-min-width-3\/12\@small {
      min-width: 25%; } }

.u-width-1-of-4, .u-width-1\/4, .u-width-2-of-8, .u-width-2\/8, .u-width-3-of-12, .u-width-3\/12 {
  width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-4\@large, .u-width-1\/4\@large, .u-width-2-of-8\@large, .u-width-2\/8\@large, .u-width-3-of-12\@large, .u-width-3\/12\@large {
      width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-4\@small, .u-width-1\/4\@small, .u-width-2-of-8\@small, .u-width-2\/8\@small, .u-width-3-of-12\@small, .u-width-3\/12\@small {
      width: 25%; } }

.u-max-width-1-of-4, .u-max-width-1\/4, .u-max-width-2-of-8, .u-max-width-2\/8, .u-max-width-3-of-12, .u-max-width-3\/12 {
  max-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-4\@large, .u-max-width-1\/4\@large, .u-max-width-2-of-8\@large, .u-max-width-2\/8\@large, .u-max-width-3-of-12\@large, .u-max-width-3\/12\@large {
      max-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-4\@small, .u-max-width-1\/4\@small, .u-max-width-2-of-8\@small, .u-max-width-2\/8\@small, .u-max-width-3-of-12\@small, .u-max-width-3\/12\@small {
      max-width: 25%; } }

.u-min-width-3-of-10, .u-min-width-3\/10 {
  min-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-10\@large, .u-min-width-3\/10\@large {
      min-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-10\@small, .u-min-width-3\/10\@small {
      min-width: 30%; } }

.u-width-3-of-10, .u-width-3\/10 {
  width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-10\@large, .u-width-3\/10\@large {
      width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-10\@small, .u-width-3\/10\@small {
      width: 30%; } }

.u-max-width-3-of-10, .u-max-width-3\/10 {
  max-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-10\@large, .u-max-width-3\/10\@large {
      max-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-10\@small, .u-max-width-3\/10\@small {
      max-width: 30%; } }

.u-min-width-2-of-5, .u-min-width-2\/5, .u-min-width-4-of-10, .u-min-width-4\/10 {
  min-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-5\@large, .u-min-width-2\/5\@large, .u-min-width-4-of-10\@large, .u-min-width-4\/10\@large {
      min-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-5\@small, .u-min-width-2\/5\@small, .u-min-width-4-of-10\@small, .u-min-width-4\/10\@small {
      min-width: 40%; } }

.u-width-2-of-5, .u-width-2\/5, .u-width-4-of-10, .u-width-4\/10 {
  width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-5\@large, .u-width-2\/5\@large, .u-width-4-of-10\@large, .u-width-4\/10\@large {
      width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-5\@small, .u-width-2\/5\@small, .u-width-4-of-10\@small, .u-width-4\/10\@small {
      width: 40%; } }

.u-max-width-2-of-5, .u-max-width-2\/5, .u-max-width-4-of-10, .u-max-width-4\/10 {
  max-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-5\@large, .u-max-width-2\/5\@large, .u-max-width-4-of-10\@large, .u-max-width-4\/10\@large {
      max-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-5\@small, .u-max-width-2\/5\@small, .u-max-width-4-of-10\@small, .u-max-width-4\/10\@small {
      max-width: 40%; } }

.u-min-width-1-of-2, .u-min-width-1\/2, .u-min-width-2-of-4, .u-min-width-2\/4, .u-min-width-3-of-6, .u-min-width-3\/6, .u-min-width-4-of-8, .u-min-width-4\/8, .u-min-width-5-of-10, .u-min-width-5\/10, .u-min-width-6-of-12, .u-min-width-6\/12 {
  min-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-2\@large, .u-min-width-1\/2\@large, .u-min-width-2-of-4\@large, .u-min-width-2\/4\@large, .u-min-width-3-of-6\@large, .u-min-width-3\/6\@large, .u-min-width-4-of-8\@large, .u-min-width-4\/8\@large, .u-min-width-5-of-10\@large, .u-min-width-5\/10\@large, .u-min-width-6-of-12\@large, .u-min-width-6\/12\@large {
      min-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-2\@small, .u-min-width-1\/2\@small, .u-min-width-2-of-4\@small, .u-min-width-2\/4\@small, .u-min-width-3-of-6\@small, .u-min-width-3\/6\@small, .u-min-width-4-of-8\@small, .u-min-width-4\/8\@small, .u-min-width-5-of-10\@small, .u-min-width-5\/10\@small, .u-min-width-6-of-12\@small, .u-min-width-6\/12\@small {
      min-width: 50%; } }

.u-width-1-of-2, .u-width-1\/2, .u-width-2-of-4, .u-width-2\/4, .u-width-3-of-6, .u-width-3\/6, .u-width-4-of-8, .u-width-4\/8, .u-width-5-of-10, .u-width-5\/10, .u-width-6-of-12, .u-width-6\/12 {
  width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-2\@large, .u-width-1\/2\@large, .u-width-2-of-4\@large, .u-width-2\/4\@large, .u-width-3-of-6\@large, .u-width-3\/6\@large, .u-width-4-of-8\@large, .u-width-4\/8\@large, .u-width-5-of-10\@large, .u-width-5\/10\@large, .u-width-6-of-12\@large, .u-width-6\/12\@large {
      width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-2\@small, .u-width-1\/2\@small, .u-width-2-of-4\@small, .u-width-2\/4\@small, .u-width-3-of-6\@small, .u-width-3\/6\@small, .u-width-4-of-8\@small, .u-width-4\/8\@small, .u-width-5-of-10\@small, .u-width-5\/10\@small, .u-width-6-of-12\@small, .u-width-6\/12\@small {
      width: 50%; } }

.u-max-width-1-of-2, .u-max-width-1\/2, .u-max-width-2-of-4, .u-max-width-2\/4, .u-max-width-3-of-6, .u-max-width-3\/6, .u-max-width-4-of-8, .u-max-width-4\/8, .u-max-width-5-of-10, .u-max-width-5\/10, .u-max-width-6-of-12, .u-max-width-6\/12 {
  max-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-2\@large, .u-max-width-1\/2\@large, .u-max-width-2-of-4\@large, .u-max-width-2\/4\@large, .u-max-width-3-of-6\@large, .u-max-width-3\/6\@large, .u-max-width-4-of-8\@large, .u-max-width-4\/8\@large, .u-max-width-5-of-10\@large, .u-max-width-5\/10\@large, .u-max-width-6-of-12\@large, .u-max-width-6\/12\@large {
      max-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-2\@small, .u-max-width-1\/2\@small, .u-max-width-2-of-4\@small, .u-max-width-2\/4\@small, .u-max-width-3-of-6\@small, .u-max-width-3\/6\@small, .u-max-width-4-of-8\@small, .u-max-width-4\/8\@small, .u-max-width-5-of-10\@small, .u-max-width-5\/10\@small, .u-max-width-6-of-12\@small, .u-max-width-6\/12\@small {
      max-width: 50%; } }

.u-min-width-3-of-5, .u-min-width-3\/5, .u-min-width-6-of-10, .u-min-width-6\/10 {
  min-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-5\@large, .u-min-width-3\/5\@large, .u-min-width-6-of-10\@large, .u-min-width-6\/10\@large {
      min-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-5\@small, .u-min-width-3\/5\@small, .u-min-width-6-of-10\@small, .u-min-width-6\/10\@small {
      min-width: 60%; } }

.u-width-3-of-5, .u-width-3\/5, .u-width-6-of-10, .u-width-6\/10 {
  width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-5\@large, .u-width-3\/5\@large, .u-width-6-of-10\@large, .u-width-6\/10\@large {
      width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-5\@small, .u-width-3\/5\@small, .u-width-6-of-10\@small, .u-width-6\/10\@small {
      width: 60%; } }

.u-max-width-3-of-5, .u-max-width-3\/5, .u-max-width-6-of-10, .u-max-width-6\/10 {
  max-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-5\@large, .u-max-width-3\/5\@large, .u-max-width-6-of-10\@large, .u-max-width-6\/10\@large {
      max-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-5\@small, .u-max-width-3\/5\@small, .u-max-width-6-of-10\@small, .u-max-width-6\/10\@small {
      max-width: 60%; } }

.u-min-width-7-of-10, .u-min-width-7\/10 {
  min-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-10\@large, .u-min-width-7\/10\@large {
      min-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-10\@small, .u-min-width-7\/10\@small {
      min-width: 70%; } }

.u-width-7-of-10, .u-width-7\/10 {
  width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-10\@large, .u-width-7\/10\@large {
      width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-10\@small, .u-width-7\/10\@small {
      width: 70%; } }

.u-max-width-7-of-10, .u-max-width-7\/10 {
  max-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-10\@large, .u-max-width-7\/10\@large {
      max-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-10\@small, .u-max-width-7\/10\@small {
      max-width: 70%; } }

.u-min-width-3-of-4, .u-min-width-3\/4, .u-min-width-6-of-8, .u-min-width-6\/8, .u-min-width-9-of-12, .u-min-width-9\/12 {
  min-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-4\@large, .u-min-width-3\/4\@large, .u-min-width-6-of-8\@large, .u-min-width-6\/8\@large, .u-min-width-9-of-12\@large, .u-min-width-9\/12\@large {
      min-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-4\@small, .u-min-width-3\/4\@small, .u-min-width-6-of-8\@small, .u-min-width-6\/8\@small, .u-min-width-9-of-12\@small, .u-min-width-9\/12\@small {
      min-width: 75%; } }

.u-width-3-of-4, .u-width-3\/4, .u-width-6-of-8, .u-width-6\/8, .u-width-9-of-12, .u-width-9\/12 {
  width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-4\@large, .u-width-3\/4\@large, .u-width-6-of-8\@large, .u-width-6\/8\@large, .u-width-9-of-12\@large, .u-width-9\/12\@large {
      width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-4\@small, .u-width-3\/4\@small, .u-width-6-of-8\@small, .u-width-6\/8\@small, .u-width-9-of-12\@small, .u-width-9\/12\@small {
      width: 75%; } }

.u-max-width-3-of-4, .u-max-width-3\/4, .u-max-width-6-of-8, .u-max-width-6\/8, .u-max-width-9-of-12, .u-max-width-9\/12 {
  max-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-4\@large, .u-max-width-3\/4\@large, .u-max-width-6-of-8\@large, .u-max-width-6\/8\@large, .u-max-width-9-of-12\@large, .u-max-width-9\/12\@large {
      max-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-4\@small, .u-max-width-3\/4\@small, .u-max-width-6-of-8\@small, .u-max-width-6\/8\@small, .u-max-width-9-of-12\@small, .u-max-width-9\/12\@small {
      max-width: 75%; } }

.u-min-width-4-of-5, .u-min-width-4\/5, .u-min-width-8-of-10, .u-min-width-8\/10 {
  min-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-5\@large, .u-min-width-4\/5\@large, .u-min-width-8-of-10\@large, .u-min-width-8\/10\@large {
      min-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-5\@small, .u-min-width-4\/5\@small, .u-min-width-8-of-10\@small, .u-min-width-8\/10\@small {
      min-width: 80%; } }

.u-width-4-of-5, .u-width-4\/5, .u-width-8-of-10, .u-width-8\/10 {
  width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-5\@large, .u-width-4\/5\@large, .u-width-8-of-10\@large, .u-width-8\/10\@large {
      width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-5\@small, .u-width-4\/5\@small, .u-width-8-of-10\@small, .u-width-8\/10\@small {
      width: 80%; } }

.u-max-width-4-of-5, .u-max-width-4\/5, .u-max-width-8-of-10, .u-max-width-8\/10 {
  max-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-5\@large, .u-max-width-4\/5\@large, .u-max-width-8-of-10\@large, .u-max-width-8\/10\@large {
      max-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-5\@small, .u-max-width-4\/5\@small, .u-max-width-8-of-10\@small, .u-max-width-8\/10\@small {
      max-width: 80%; } }

.u-min-width-9-of-10, .u-min-width-9\/10 {
  min-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-9-of-10\@large, .u-min-width-9\/10\@large {
      min-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-9-of-10\@small, .u-min-width-9\/10\@small {
      min-width: 90%; } }

.u-width-9-of-10, .u-width-9\/10 {
  width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-9-of-10\@large, .u-width-9\/10\@large {
      width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-9-of-10\@small, .u-width-9\/10\@small {
      width: 90%; } }

.u-max-width-9-of-10, .u-max-width-9\/10 {
  max-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-9-of-10\@large, .u-max-width-9\/10\@large {
      max-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-9-of-10\@small, .u-max-width-9\/10\@small {
      max-width: 90%; } }

.u-min-width-1-of-1, .u-min-width-1\/1, .u-min-width-2-of-2, .u-min-width-2\/2, .u-min-width-3-of-3, .u-min-width-3\/3, .u-min-width-4-of-4, .u-min-width-4\/4, .u-min-width-5-of-5, .u-min-width-5\/5, .u-min-width-6-of-6, .u-min-width-6\/6, .u-min-width-7-of-7, .u-min-width-7\/7, .u-min-width-8-of-8, .u-min-width-8\/8, .u-min-width-9-of-9, .u-min-width-9\/9, .u-min-width-10-of-10, .u-min-width-10\/10, .u-min-width-11-of-11, .u-min-width-11\/11, .u-min-width-12-of-12, .u-min-width-12\/12 {
  min-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-1\@large, .u-min-width-1\/1\@large, .u-min-width-2-of-2\@large, .u-min-width-2\/2\@large, .u-min-width-3-of-3\@large, .u-min-width-3\/3\@large, .u-min-width-4-of-4\@large, .u-min-width-4\/4\@large, .u-min-width-5-of-5\@large, .u-min-width-5\/5\@large, .u-min-width-6-of-6\@large, .u-min-width-6\/6\@large, .u-min-width-7-of-7\@large, .u-min-width-7\/7\@large, .u-min-width-8-of-8\@large, .u-min-width-8\/8\@large, .u-min-width-9-of-9\@large, .u-min-width-9\/9\@large, .u-min-width-10-of-10\@large, .u-min-width-10\/10\@large, .u-min-width-11-of-11\@large, .u-min-width-11\/11\@large, .u-min-width-12-of-12\@large, .u-min-width-12\/12\@large {
      min-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-1\@small, .u-min-width-1\/1\@small, .u-min-width-2-of-2\@small, .u-min-width-2\/2\@small, .u-min-width-3-of-3\@small, .u-min-width-3\/3\@small, .u-min-width-4-of-4\@small, .u-min-width-4\/4\@small, .u-min-width-5-of-5\@small, .u-min-width-5\/5\@small, .u-min-width-6-of-6\@small, .u-min-width-6\/6\@small, .u-min-width-7-of-7\@small, .u-min-width-7\/7\@small, .u-min-width-8-of-8\@small, .u-min-width-8\/8\@small, .u-min-width-9-of-9\@small, .u-min-width-9\/9\@small, .u-min-width-10-of-10\@small, .u-min-width-10\/10\@small, .u-min-width-11-of-11\@small, .u-min-width-11\/11\@small, .u-min-width-12-of-12\@small, .u-min-width-12\/12\@small {
      min-width: 100%; } }

.u-width-1-of-1, .u-width-1\/1, .u-width-2-of-2, .u-width-2\/2, .u-width-3-of-3, .u-width-3\/3, .u-width-4-of-4, .u-width-4\/4, .u-width-5-of-5, .u-width-5\/5, .u-width-6-of-6, .u-width-6\/6, .u-width-7-of-7, .u-width-7\/7, .u-width-8-of-8, .u-width-8\/8, .u-width-9-of-9, .u-width-9\/9, .u-width-10-of-10, .u-width-10\/10, .u-width-11-of-11, .u-width-11\/11, .u-width-12-of-12, .u-width-12\/12 {
  width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-1\@large, .u-width-1\/1\@large, .u-width-2-of-2\@large, .u-width-2\/2\@large, .u-width-3-of-3\@large, .u-width-3\/3\@large, .u-width-4-of-4\@large, .u-width-4\/4\@large, .u-width-5-of-5\@large, .u-width-5\/5\@large, .u-width-6-of-6\@large, .u-width-6\/6\@large, .u-width-7-of-7\@large, .u-width-7\/7\@large, .u-width-8-of-8\@large, .u-width-8\/8\@large, .u-width-9-of-9\@large, .u-width-9\/9\@large, .u-width-10-of-10\@large, .u-width-10\/10\@large, .u-width-11-of-11\@large, .u-width-11\/11\@large, .u-width-12-of-12\@large, .u-width-12\/12\@large {
      width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-1\@small, .u-width-1\/1\@small, .u-width-2-of-2\@small, .u-width-2\/2\@small, .u-width-3-of-3\@small, .u-width-3\/3\@small, .u-width-4-of-4\@small, .u-width-4\/4\@small, .u-width-5-of-5\@small, .u-width-5\/5\@small, .u-width-6-of-6\@small, .u-width-6\/6\@small, .u-width-7-of-7\@small, .u-width-7\/7\@small, .u-width-8-of-8\@small, .u-width-8\/8\@small, .u-width-9-of-9\@small, .u-width-9\/9\@small, .u-width-10-of-10\@small, .u-width-10\/10\@small, .u-width-11-of-11\@small, .u-width-11\/11\@small, .u-width-12-of-12\@small, .u-width-12\/12\@small {
      width: 100%; } }

.u-max-width-1-of-1, .u-max-width-1\/1, .u-max-width-2-of-2, .u-max-width-2\/2, .u-max-width-3-of-3, .u-max-width-3\/3, .u-max-width-4-of-4, .u-max-width-4\/4, .u-max-width-5-of-5, .u-max-width-5\/5, .u-max-width-6-of-6, .u-max-width-6\/6, .u-max-width-7-of-7, .u-max-width-7\/7, .u-max-width-8-of-8, .u-max-width-8\/8, .u-max-width-9-of-9, .u-max-width-9\/9, .u-max-width-10-of-10, .u-max-width-10\/10, .u-max-width-11-of-11, .u-max-width-11\/11, .u-max-width-12-of-12, .u-max-width-12\/12 {
  max-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-1\@large, .u-max-width-1\/1\@large, .u-max-width-2-of-2\@large, .u-max-width-2\/2\@large, .u-max-width-3-of-3\@large, .u-max-width-3\/3\@large, .u-max-width-4-of-4\@large, .u-max-width-4\/4\@large, .u-max-width-5-of-5\@large, .u-max-width-5\/5\@large, .u-max-width-6-of-6\@large, .u-max-width-6\/6\@large, .u-max-width-7-of-7\@large, .u-max-width-7\/7\@large, .u-max-width-8-of-8\@large, .u-max-width-8\/8\@large, .u-max-width-9-of-9\@large, .u-max-width-9\/9\@large, .u-max-width-10-of-10\@large, .u-max-width-10\/10\@large, .u-max-width-11-of-11\@large, .u-max-width-11\/11\@large, .u-max-width-12-of-12\@large, .u-max-width-12\/12\@large {
      max-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-1\@small, .u-max-width-1\/1\@small, .u-max-width-2-of-2\@small, .u-max-width-2\/2\@small, .u-max-width-3-of-3\@small, .u-max-width-3\/3\@small, .u-max-width-4-of-4\@small, .u-max-width-4\/4\@small, .u-max-width-5-of-5\@small, .u-max-width-5\/5\@small, .u-max-width-6-of-6\@small, .u-max-width-6\/6\@small, .u-max-width-7-of-7\@small, .u-max-width-7\/7\@small, .u-max-width-8-of-8\@small, .u-max-width-8\/8\@small, .u-max-width-9-of-9\@small, .u-max-width-9\/9\@small, .u-max-width-10-of-10\@small, .u-max-width-10\/10\@small, .u-max-width-11-of-11\@small, .u-max-width-11\/11\@small, .u-max-width-12-of-12\@small, .u-max-width-12\/12\@small {
      max-width: 100%; } }

/*
---
name: Container Global
category: 3. Objects > Containers
---

Container for outer-most DOM element (root node), should be used on outside


```demo.html
<div class="o-container-global">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
</div>
```
*/
/*
---
name: Container Full
category: 3. Objects > Containers
---

Container that expands full width and applies `position: relative`


```demo.html
<div class="o-container-full">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
</div>
```
*/
.o-container-full {
  position: relative; }

/*
---
name: Container
category: 3. Objects > Containers
---

Container for majority of content.

Options:
* `.o-container`: Parent class for container
* `.o-container__wrap`: Child of `.o-container` that expands only to `$max-width` is centered when space is available, when screen is smaller than `$max-width` it has gutters of `$default-space` on both sides
* `.o-container__wrap-full`: Child of `.o-container` that expands only to `$max-width` is centered when space is available, does not have gutters below `$max-width`
* `.o-container__inner`: Child of `.o-container` that expands only to `$content-width` is centered when space is available`


```demo.html
<div class="o-container">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
</div>
```

```wrap.html
<div class="o-container">
	<div class="o-container__wrap">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
	</div>
</div>
```

```wrap-full.html
<div class="o-container">
	<div class="o-container__wrap-full">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
	</div>
</div>
```

```inner.html
<div class="o-container">
	<div class="o-container__inner">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
	</div>
</div>
```


```inner-alt.html
<div class="o-container">
	<div class="o-container__wrap">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.

		<div class="o-container__inner">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ipsum optio rem, quo veniam placeat, ducimus, illum voluptas quae quas harum. Labore magni odit possimus maiores suscipit voluptatum officia numquam.
		</div>
	</div>
</div>
```
*/
.o-container__wrap-full, .o-container__wrap {
  max-width: 71.25rem; }
.o-container__wrap-full {
  margin-right: auto;
  margin-left: auto; }
@media screen and (min-width: 86.25rem) {
  .o-container__wrap {
    margin-right: auto;
    margin-left: auto; } }
@media screen and (max-width: 86.25rem) and (min-width: 25.556rem) {
  .o-container__wrap {
    margin-right: 2.5rem;
    margin-left: 2.5rem; } }
@media screen and (max-width: 86.25rem) and (max-width: 25.556rem) {
  .o-container__wrap {
    margin-right: 1.25rem;
    margin-left: 1.25rem; } }

.o-container__inner {
  max-width: 35.625rem;
  margin-right: auto;
  margin-left: auto; }
@media screen and (min-width: 47.5rem) {
  .o-container\@large__wrap-full, .o-container\@large__wrap {
    max-width: 71.25rem; }
  .o-container\@large__wrap-full {
    margin-right: auto;
    margin-left: auto; } }
@media screen and (min-width: 47.5rem) and (min-width: 86.25rem) {
  .o-container\@large__wrap {
    margin-right: auto;
    margin-left: auto; } }
@media screen and (min-width: 47.5rem) and (max-width: 86.25rem) and (min-width: 25.556rem) {
  .o-container\@large__wrap {
    margin-right: 2.5rem;
    margin-left: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 86.25rem) and (max-width: 25.556rem) {
  .o-container\@large__wrap {
    margin-right: 1.25rem;
    margin-left: 1.25rem; } }

@media screen and (min-width: 47.5rem) {
  .o-container\@large__inner {
    max-width: 35.625rem;
    margin-right: auto;
    margin-left: auto; } }
@media screen and (max-width: 47.5rem) {
  .o-container\@small__wrap-full, .o-container\@small__wrap {
    max-width: 71.25rem; }
  .o-container\@small__wrap-full {
    margin-right: auto;
    margin-left: auto; } }
@media screen and (max-width: 47.5rem) and (min-width: 86.25rem) {
  .o-container\@small__wrap {
    margin-right: auto;
    margin-left: auto; } }
@media screen and (max-width: 47.5rem) and (max-width: 86.25rem) and (min-width: 25.556rem) {
  .o-container\@small__wrap {
    margin-right: 2.5rem;
    margin-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 86.25rem) and (max-width: 25.556rem) {
  .o-container\@small__wrap {
    margin-right: 1.25rem;
    margin-left: 1.25rem; } }

@media screen and (max-width: 47.5rem) {
  .o-container\@small__inner {
    max-width: 35.625rem;
    margin-right: auto;
    margin-left: auto; } }

/*
---
name: Container > Content
category: 3. Objects > Containers
---

Provides a `max-width` as defined by `$content-max-width` in `_00-settings.scss`.


```demo.html
<div class="o-container-content">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sunt at corporis iure veritatis eum nesciunt debitis eaque fuga provident.
</div>
```

```demo-2.html
<div class="o-container">
	<div class="o-container__wrap">
		<div class="o-container-content">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sunt at corporis iure veritatis eum nesciunt debitis eaque fuga provident.
		</div>
	</div>
</div>
```

*/
.o-container-content {
  max-width: 53.75rem;
  margin-right: auto;
  margin-left: auto; }

/*
---
name: Content Columns
category: 3. Objects > Containers
---

Creates `column-count` for content, can be applied to any element with content. Options range up to 12

*  Contains [Suffixcate](/#suffixcate) options available for all options and utility versions;

Options:
• `.c-content-column-1`: `.c-content-column-1@small` `.c-content-column-1@large`
• `.c-content-column-2`: `.c-content-column-2@small` `.c-content-column-2@large`
• `.c-content-column-3`: `.c-content-column-3@small` `.c-content-column-3@large`
• `.c-content-column-4`: `.c-content-column-4@small` `.c-content-column-4@large`
• `.c-content-column-5`: `.c-content-column-5@small` `.c-content-column-5@large`
• `.c-content-column-6`: `.c-content-column-6@small` `.c-content-column-6@large`
• `.c-content-column-7`: `.c-content-column-7@small` `.c-content-column-7@large`
• `.c-content-column-8`: `.c-content-column-8@small` `.c-content-column-8@large`
• `.c-content-column-9`: `.c-content-column-9@small` `.c-content-column-9@large`
• `.c-content-column-10`: `.c-content-column-10@small` `.c-content-column-10@large`
• `.c-content-column-11`: `.c-content-column-11@small` `.c-content-column-11@large`
• `.c-content-column-12`: `.c-content-column-12@small` `.c-content-column-12@large`

```default.html
	<label>Label</label>
```

```base.html
	<label class="** c-label **">Label</label>
```

```t-form-1.html
	<input class="** c-label ** t-form-1">Label</label>
```

```t-form-2.html
	<input class="** c-label ** t-form-2">Label</label>

```

*/
.c-content-column-1 {
  -webkit-column-count: 1;
          column-count: 1; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-1\@large {
      -webkit-column-count: 1;
              column-count: 1; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-1\@small {
      -webkit-column-count: 1;
              column-count: 1; } }
.c-content-column-2 {
  -webkit-column-count: 2;
          column-count: 2; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-2\@large {
      -webkit-column-count: 2;
              column-count: 2; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-2\@small {
      -webkit-column-count: 2;
              column-count: 2; } }
.c-content-column-3 {
  -webkit-column-count: 3;
          column-count: 3; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-3\@large {
      -webkit-column-count: 3;
              column-count: 3; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-3\@small {
      -webkit-column-count: 3;
              column-count: 3; } }
.c-content-column-4 {
  -webkit-column-count: 4;
          column-count: 4; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-4\@large {
      -webkit-column-count: 4;
              column-count: 4; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-4\@small {
      -webkit-column-count: 4;
              column-count: 4; } }
.c-content-column-5 {
  -webkit-column-count: 5;
          column-count: 5; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-5\@large {
      -webkit-column-count: 5;
              column-count: 5; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-5\@small {
      -webkit-column-count: 5;
              column-count: 5; } }
.c-content-column-6 {
  -webkit-column-count: 6;
          column-count: 6; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-6\@large {
      -webkit-column-count: 6;
              column-count: 6; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-6\@small {
      -webkit-column-count: 6;
              column-count: 6; } }
.c-content-column-7 {
  -webkit-column-count: 7;
          column-count: 7; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-7\@large {
      -webkit-column-count: 7;
              column-count: 7; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-7\@small {
      -webkit-column-count: 7;
              column-count: 7; } }
.c-content-column-8 {
  -webkit-column-count: 8;
          column-count: 8; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-8\@large {
      -webkit-column-count: 8;
              column-count: 8; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-8\@small {
      -webkit-column-count: 8;
              column-count: 8; } }
.c-content-column-9 {
  -webkit-column-count: 9;
          column-count: 9; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-9\@large {
      -webkit-column-count: 9;
              column-count: 9; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-9\@small {
      -webkit-column-count: 9;
              column-count: 9; } }
.c-content-column-10 {
  -webkit-column-count: 10;
          column-count: 10; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-10\@large {
      -webkit-column-count: 10;
              column-count: 10; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-10\@small {
      -webkit-column-count: 10;
              column-count: 10; } }
.c-content-column-11 {
  -webkit-column-count: 11;
          column-count: 11; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-11\@large {
      -webkit-column-count: 11;
              column-count: 11; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-11\@small {
      -webkit-column-count: 11;
              column-count: 11; } }
.c-content-column-12 {
  -webkit-column-count: 12;
          column-count: 12; }
  @media screen and (min-width: 47.5rem) {
    .c-content-column-12\@large {
      -webkit-column-count: 12;
              column-count: 12; } }
  @media screen and (max-width: 47.5rem) {
    .c-content-column-12\@small {
      -webkit-column-count: 12;
              column-count: 12; } }

/*
---
name: Children Inline
category: 5. Component > Content
---

Makes list or an `"block`-style " children `inline-block`

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<ul class="o-child-line">
	<li>
		•••
	</li>
	<li>
		•••
	</li>
</ul>

```
*/
.o-child-line > * {
  display: inline-block; }
@media screen and (min-width: 47.5rem) {
  .o-child-line\@large > * {
    display: inline-block; } }
@media screen and (max-width: 47.5rem) {
  .o-child-line\@small > * {
    display: inline-block; } }

/*
---
name: List Inline
category: 5. Component > Content
---

Removes padding from `<ul>`

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<ul class="o-list">
	<li>
		•••
	</li>
	<li>
		•••
	</li>
</ul>

```
*/
.o-list {
  padding-left: 0; }
  @media screen and (min-width: 47.5rem) {
    .o-list\@large {
      padding-left: 0; } }
  @media screen and (max-width: 47.5rem) {
    .o-list\@small {
      padding-left: 0; } }

/*
---
name: Media Object
category: 3. Objects > Patterns
---

Core of OOCSS, image on the left and content right

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.
*  `.o-flag--full`: Expand full width of container, variation for suffixcate: `o-flag@small--full` and `o-flag@large--full`

```demo.html
<div class="o-media">
	<div class="o-media__asset">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-media__main">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```


```small.html
<div class="o-media@small">
	<div class="o-media@small__asset">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-media@small__main">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```

```large.html
<div class="o-media@large">
	<div class="o-media@large__asset">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-media@large__main">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```

*/
.o-media:after {
  clear: both;
  display: table;
  content: ""; }
.o-media__asset {
  float: left; }
.o-media__main {
  overflow: hidden; }
@media screen and (min-width: 47.5rem) {
  .o-media\@large:after {
    clear: both;
    display: table;
    content: ""; }
  .o-media\@large__asset {
    float: left; }
  .o-media\@large__main {
    overflow: hidden; } }
@media screen and (max-width: 47.5rem) {
  .o-media\@small:after {
    clear: both;
    display: table;
    content: ""; }
  .o-media\@small__asset {
    float: left; }
  .o-media\@small__main {
    overflow: hidden; } }

/*
---
name: Media Object > Flag Object
category: 3. Objects > Patterns
---

Like the media object but "table-based" and allows for additional columns

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.
*  `.o-flag--full`: Expand full width of container, variation for suffixcate: `o-flag@small--full` and `o-flag@large--full`

```demo.html
<div class="o-flag">
	<div class="o-flag__item">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-flag__item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```


```demo-2.html
<div class="o-flag">
	<div class="o-flag__item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
	<div class="o-flag__item">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
</div>
```

```demo-full.html
<div class="o-flag o-flag--full">
	<div class="o-flag__item">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-flag__item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```

```small.html
<div class="o-flag@small">
	<div class="o-flag@small__item">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-flag@small__item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```

```large.html
<div class="o-flag@large">
	<div class="o-flag@large__item">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-flag@large__item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```

*/
.o-flag {
  display: table; }
  .o-flag__item {
    display: table-cell; }
  .o-flag--full {
    width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .o-flag\@large {
      display: table; }
      .o-flag\@large__item {
        display: table-cell; }
      .o-flag\@large--full {
        width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .o-flag\@small {
      display: table; }
      .o-flag\@small__item {
        display: table-cell; }
      .o-flag\@small--full {
        width: 100%; } }

/*
---
name: Float
category: 3. Objects > Float
---

Applies `display: float` to children of the container and container has a `clear` `:after`.

*  Contains [Suffixcate](/#suffixcate) options.


Additional options:
*  Contains [Suffixcate](/#suffixcate) options.
* `.o-float`: parent class
* `.o-float__cell`: children class (applied `float: left`)
* `.o-float__left`: children class that's alternative to `.o-float__cell`
* `.o-float__right`: children class (applied `float: right`)


```demo.html
<div class="o-float">
	<div class="float__cell">
		•••
	</div>
	<div class="float__cell">
		•••
	</div>
</div>
```

Large Suffixcate:

```large.html
<div class="o-float@large">
	<div class="o-float@large__cell">
		•••
	</div>
	<div class="o-float@large__left">
		•••
	</div>
	<div class="o-float@large__right">
		•••
	</div>
</div>
```


Small Suffixcate:

```small.html
<div class="o-float@large">
	<div class="o-float@small__cell">
		•••
	</div>
	<div class="o-float@small__cell">
		•••
	</div>
</div>
```
*/
.o-float:after {
  clear: both;
  display: table;
  content: ""; }
.o-float__cell, .o-float__left {
  float: left; }
.o-float__cell-alt, .o-float__right {
  float: right; }
@media screen and (min-width: 47.5rem) {
  .o-float\@large:after {
    clear: both;
    display: table;
    content: ""; }
  .o-float\@large__cell, .o-float\@large__left {
    float: left; }
  .o-float\@large__cell-alt, .o-float\@large__right {
    float: right; } }
@media screen and (max-width: 47.5rem) {
  .o-float\@small:after {
    clear: both;
    display: table;
    content: ""; }
  .o-float\@small__cell, .o-float\@small__left {
    float: left; }
  .o-float\@small__cell-alt, .o-float\@small__right {
    float: right; } }

/*
---
name: Table
category: 3. Objects > Grid
---

Applies `display: table` to container, requires children elements to have related classes (will apply `display: table-cell`).


Additional options:
*  Contains [Suffixcate](/#suffixcate) options.
* `.o-table--full`: Make it full width
* `.o-table--fixed`: Makes cells fixed widths (equal to eachother)
* `.o-tabular__header`: Optional header (kind of unnecessary for most use cases these days), `<thead>` render
* `.o-tabular__row`: Optional row (kind of unnecessary for most use cases these days)
* `.o-tabular__footer`: Optional footer (kind of unnecessary for most use cases these days), `<tfoot>` render


```demo.html
<div class="o-tabular">
	<div class="o-tabular__cell">
		•••
	</div>
	<div class="o-tabular__cell">
		•••
	</div>
	<div class="o-tabular__cell">
		•••
	</div>
</div>
```

With row:

```row.html
<div class="o-tabular">
	<div class="o-tabular__row">
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
	</div>
</div>
```


With header and footer options:

```header-fotoer.html
<div class="o-tabular">
	<div class="o-tabular__header">
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
	</div>
	<div class="o-tabular__row">
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
	</div>
	<div class="o-tabular__footer">
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
		<div class="o-tabular__cell">
			•••
		</div>
	</div>
</div>
```

Large Suffixcate:

```large.html
<div class="o-tabular@large">
	<div class="o-tabular@large__cell">
		•••
	</div>
	<div class="o-tabular@large__cell">
		•••
	</div>
	<div class="o-tabular@large__cell">
		•••
	</div>
</div>
```


Small Suffixcate:

```Small.html
<div class="o-tabular@small">
	<div class="o-tabular@small__cell">
		•••
	</div>
	<div class="o-tabular@small__cell">
		•••
	</div>
	<div class="o-tabular@small__cell">
		•••
	</div>
</div>
```
*/
.o-tabular {
  display: table; }
  .o-tabular__header {
    display: table-header-group; }
  .o-tabular__footer {
    display: table-footer-group; }
  .o-tabular__row {
    display: table-row; }
  .o-tabular__cell {
    display: table-cell; }
  .o-tabular--full {
    width: 100%; }
  .o-tabular--fixed {
    table-layout: fixed; }
  @media screen and (min-width: 47.5rem) {
    .o-tabular\@large {
      display: table; }
      .o-tabular\@large__header {
        display: table-header-group; }
      .o-tabular\@large__footer {
        display: table-footer-group; }
      .o-tabular\@large__row {
        display: table-row; }
      .o-tabular\@large__cell {
        display: table-cell; }
      .o-tabular\@large--full {
        width: 100%; }
      .o-tabular\@large--fixed {
        table-layout: fixed; } }
  @media screen and (max-width: 47.5rem) {
    .o-tabular\@small {
      display: table; }
      .o-tabular\@small__header {
        display: table-header-group; }
      .o-tabular\@small__footer {
        display: table-footer-group; }
      .o-tabular\@small__row {
        display: table-row; }
      .o-tabular\@small__cell {
        display: table-cell; }
      .o-tabular\@small--full {
        width: 100%; }
      .o-tabular\@small--fixed {
        table-layout: fixed; } }

.o-flex {
  display: flex; }
  .o-flex--end, .o-flex--justify-content-end {
    justify-content: flex-end; }
  .o-flex--start, .o-flex--justify-content-start {
    justify-content: flex-start; }
  .o-flex--equal > * {
    flex: 1; }
  .o-flex--flex-direction-row, .o-flex--row {
    flex-direction: row; }
  .o-flex--flex-direction-row-reverse, .o-flex--row-reverse {
    flex-direction: row-reverse; }
  .o-flex--flex-direction-column, .o-flex--column {
    flex-direction: column; }
  .o-flex--flex-direction-column-reverse, .o-flex--column-reverse {
    flex-direction: column-reverse; }
  .o-flex--wrap {
    flex-wrap: wrap; }
  .o-flex--nowrap {
    flex-wrap: nowrap; }
  .o-flex--justify-content-start {
    justify-content: flex-start; }
  .o-flex--justify-content-end {
    justify-content: flex-end; }
  .o-flex--justify-content-center {
    justify-content: center; }
  .o-flex--justify-content-between {
    justify-content: space-between; }
  .o-flex--justify-content-around {
    justify-content: space-around; }
  .o-flex--align-items-start {
    align-items: flex-start; }
  .o-flex--align-items-end {
    align-items: flex-end; }
  .o-flex--align-items-center {
    align-items: center; }
  .o-flex--align-items-baseline {
    align-items: baseline; }
  .o-flex--align-items-stretch {
    align-items: stretch; }
  .o-flex--align-content-start {
    align-content: flex-start; }
  .o-flex--align-content-end {
    align-content: flex-end; }
  .o-flex--align-content-center {
    align-content: center; }
  .o-flex--align-content-between {
    align-content: space-between; }
  .o-flex--align-content-around {
    align-content: space-around; }
  .o-flex--align-content-stretch {
    align-content: stretch; }
  .o-flex__order-0 {
    order: 0; }
  .o-flex__order-1 {
    order: 1; }
  .o-flex__order-1-neg {
    order: -1; }
  .o-flex__order-2 {
    order: 2; }
  .o-flex__order-2-neg {
    order: -2; }
  .o-flex__order-3 {
    order: 3; }
  .o-flex__order-3-neg {
    order: -3; }
  .o-flex__order-4 {
    order: 4; }
  .o-flex__order-4-neg {
    order: -4; }
  .o-flex__order-5 {
    order: 5; }
  .o-flex__order-5-neg {
    order: -5; }
  .o-flex__order-6 {
    order: 6; }
  .o-flex__order-6-neg {
    order: -6; }
  .o-flex__order-7 {
    order: 7; }
  .o-flex__order-7-neg {
    order: -7; }
  .o-flex__order-8 {
    order: 8; }
  .o-flex__order-8-neg {
    order: -8; }
  .o-flex__order-9 {
    order: 9; }
  .o-flex__order-9-neg {
    order: -9; }
  .o-flex__order-10 {
    order: 10; }
  .o-flex__order-10-neg {
    order: -10; }
  .o-flex__order-11 {
    order: 11; }
  .o-flex__order-11-neg {
    order: -11; }
  .o-flex__order-12 {
    order: 12; }
  .o-flex__order-12-neg {
    order: -12; }
  .o-flex__align-self-start, .o-flex__start {
    align-self: flex-start; }
  .o-flex__align-self-end, .o-flex__end {
    align-self: flex-end; }
  .o-flex__align-self-center, .o-flex__center {
    align-self: center; }
  .o-flex__align-self-baseline, .o-flex__baseline {
    align-self: baseline; }
  .o-flex__align-self-stretch, .o-flex__stretch {
    align-self: stretch; }
  .o-flex__grow-1 {
    flex-grow: 1; }
  .o-flex__shrink-1 {
    flex-shrink: 1; }
  .o-flex--1 > * {
    flex: 1; }
  .o-flex__grow-2 {
    flex-grow: 2; }
  .o-flex__shrink-2 {
    flex-shrink: 2; }
  .o-flex--2 > * {
    flex: 2; }
  .o-flex__grow-3 {
    flex-grow: 3; }
  .o-flex__shrink-3 {
    flex-shrink: 3; }
  .o-flex--3 > * {
    flex: 3; }
  .o-flex__grow-4 {
    flex-grow: 4; }
  .o-flex__shrink-4 {
    flex-shrink: 4; }
  .o-flex--4 > * {
    flex: 4; }
  .o-flex__grow-5 {
    flex-grow: 5; }
  .o-flex__shrink-5 {
    flex-shrink: 5; }
  .o-flex--5 > * {
    flex: 5; }
  .o-flex__grow-6 {
    flex-grow: 6; }
  .o-flex__shrink-6 {
    flex-shrink: 6; }
  .o-flex--6 > * {
    flex: 6; }
  .o-flex__grow-7 {
    flex-grow: 7; }
  .o-flex__shrink-7 {
    flex-shrink: 7; }
  .o-flex--7 > * {
    flex: 7; }
  .o-flex__grow-8 {
    flex-grow: 8; }
  .o-flex__shrink-8 {
    flex-shrink: 8; }
  .o-flex--8 > * {
    flex: 8; }
  .o-flex__grow-9 {
    flex-grow: 9; }
  .o-flex__shrink-9 {
    flex-shrink: 9; }
  .o-flex--9 > * {
    flex: 9; }
  .o-flex__grow-10 {
    flex-grow: 10; }
  .o-flex__shrink-10 {
    flex-shrink: 10; }
  .o-flex--10 > * {
    flex: 10; }
  .o-flex__grow-11 {
    flex-grow: 11; }
  .o-flex__shrink-11 {
    flex-shrink: 11; }
  .o-flex--11 > * {
    flex: 11; }
  .o-flex__grow-12 {
    flex-grow: 12; }
  .o-flex__shrink-12 {
    flex-shrink: 12; }
  .o-flex--12 > * {
    flex: 12; }
  @media screen and (min-width: 47.5rem) {
    .o-flex\@large {
      display: flex; }
      .o-flex\@large--end, .o-flex\@large--justify-content-end {
        justify-content: flex-end; }
      .o-flex\@large--start, .o-flex\@large--justify-content-start {
        justify-content: flex-start; }
      .o-flex\@large--equal > * {
        flex: 1; }
      .o-flex\@large--flex-direction-row, .o-flex\@large--row {
        flex-direction: row; }
      .o-flex\@large--flex-direction-row-reverse, .o-flex\@large--row-reverse {
        flex-direction: row-reverse; }
      .o-flex\@large--flex-direction-column, .o-flex\@large--column {
        flex-direction: column; }
      .o-flex\@large--flex-direction-column-reverse, .o-flex\@large--column-reverse {
        flex-direction: column-reverse; }
      .o-flex\@large--wrap {
        flex-wrap: wrap; }
      .o-flex\@large--nowrap {
        flex-wrap: nowrap; }
      .o-flex\@large--justify-content-start {
        justify-content: flex-start; }
      .o-flex\@large--justify-content-end {
        justify-content: flex-end; }
      .o-flex\@large--justify-content-center {
        justify-content: center; }
      .o-flex\@large--justify-content-between {
        justify-content: space-between; }
      .o-flex\@large--justify-content-around {
        justify-content: space-around; }
      .o-flex\@large--align-items-start {
        align-items: flex-start; }
      .o-flex\@large--align-items-end {
        align-items: flex-end; }
      .o-flex\@large--align-items-center {
        align-items: center; }
      .o-flex\@large--align-items-baseline {
        align-items: baseline; }
      .o-flex\@large--align-items-stretch {
        align-items: stretch; }
      .o-flex\@large--align-content-start {
        align-content: flex-start; }
      .o-flex\@large--align-content-end {
        align-content: flex-end; }
      .o-flex\@large--align-content-center {
        align-content: center; }
      .o-flex\@large--align-content-between {
        align-content: space-between; }
      .o-flex\@large--align-content-around {
        align-content: space-around; }
      .o-flex\@large--align-content-stretch {
        align-content: stretch; }
      .o-flex\@large__order-0 {
        order: 0; }
      .o-flex\@large__order-1 {
        order: 1; }
      .o-flex\@large__order-1-neg {
        order: -1; }
      .o-flex\@large__order-2 {
        order: 2; }
      .o-flex\@large__order-2-neg {
        order: -2; }
      .o-flex\@large__order-3 {
        order: 3; }
      .o-flex\@large__order-3-neg {
        order: -3; }
      .o-flex\@large__order-4 {
        order: 4; }
      .o-flex\@large__order-4-neg {
        order: -4; }
      .o-flex\@large__order-5 {
        order: 5; }
      .o-flex\@large__order-5-neg {
        order: -5; }
      .o-flex\@large__order-6 {
        order: 6; }
      .o-flex\@large__order-6-neg {
        order: -6; }
      .o-flex\@large__order-7 {
        order: 7; }
      .o-flex\@large__order-7-neg {
        order: -7; }
      .o-flex\@large__order-8 {
        order: 8; }
      .o-flex\@large__order-8-neg {
        order: -8; }
      .o-flex\@large__order-9 {
        order: 9; }
      .o-flex\@large__order-9-neg {
        order: -9; }
      .o-flex\@large__order-10 {
        order: 10; }
      .o-flex\@large__order-10-neg {
        order: -10; }
      .o-flex\@large__order-11 {
        order: 11; }
      .o-flex\@large__order-11-neg {
        order: -11; }
      .o-flex\@large__order-12 {
        order: 12; }
      .o-flex\@large__order-12-neg {
        order: -12; }
      .o-flex\@large__align-self-start, .o-flex\@large__start {
        align-self: flex-start; }
      .o-flex\@large__align-self-end, .o-flex\@large__end {
        align-self: flex-end; }
      .o-flex\@large__align-self-center, .o-flex\@large__center {
        align-self: center; }
      .o-flex\@large__align-self-baseline, .o-flex\@large__baseline {
        align-self: baseline; }
      .o-flex\@large__align-self-stretch, .o-flex\@large__stretch {
        align-self: stretch; }
      .o-flex\@large__grow-1 {
        flex-grow: 1; }
      .o-flex\@large__shrink-1 {
        flex-shrink: 1; }
      .o-flex\@large--1 > * {
        flex: 1; }
      .o-flex\@large__grow-2 {
        flex-grow: 2; }
      .o-flex\@large__shrink-2 {
        flex-shrink: 2; }
      .o-flex\@large--2 > * {
        flex: 2; }
      .o-flex\@large__grow-3 {
        flex-grow: 3; }
      .o-flex\@large__shrink-3 {
        flex-shrink: 3; }
      .o-flex\@large--3 > * {
        flex: 3; }
      .o-flex\@large__grow-4 {
        flex-grow: 4; }
      .o-flex\@large__shrink-4 {
        flex-shrink: 4; }
      .o-flex\@large--4 > * {
        flex: 4; }
      .o-flex\@large__grow-5 {
        flex-grow: 5; }
      .o-flex\@large__shrink-5 {
        flex-shrink: 5; }
      .o-flex\@large--5 > * {
        flex: 5; }
      .o-flex\@large__grow-6 {
        flex-grow: 6; }
      .o-flex\@large__shrink-6 {
        flex-shrink: 6; }
      .o-flex\@large--6 > * {
        flex: 6; }
      .o-flex\@large__grow-7 {
        flex-grow: 7; }
      .o-flex\@large__shrink-7 {
        flex-shrink: 7; }
      .o-flex\@large--7 > * {
        flex: 7; }
      .o-flex\@large__grow-8 {
        flex-grow: 8; }
      .o-flex\@large__shrink-8 {
        flex-shrink: 8; }
      .o-flex\@large--8 > * {
        flex: 8; }
      .o-flex\@large__grow-9 {
        flex-grow: 9; }
      .o-flex\@large__shrink-9 {
        flex-shrink: 9; }
      .o-flex\@large--9 > * {
        flex: 9; }
      .o-flex\@large__grow-10 {
        flex-grow: 10; }
      .o-flex\@large__shrink-10 {
        flex-shrink: 10; }
      .o-flex\@large--10 > * {
        flex: 10; }
      .o-flex\@large__grow-11 {
        flex-grow: 11; }
      .o-flex\@large__shrink-11 {
        flex-shrink: 11; }
      .o-flex\@large--11 > * {
        flex: 11; }
      .o-flex\@large__grow-12 {
        flex-grow: 12; }
      .o-flex\@large__shrink-12 {
        flex-shrink: 12; }
      .o-flex\@large--12 > * {
        flex: 12; } }
  @media screen and (max-width: 47.5rem) {
    .o-flex\@small {
      display: flex; }
      .o-flex\@small--end, .o-flex\@small--justify-content-end {
        justify-content: flex-end; }
      .o-flex\@small--start, .o-flex\@small--justify-content-start {
        justify-content: flex-start; }
      .o-flex\@small--equal > * {
        flex: 1; }
      .o-flex\@small--flex-direction-row, .o-flex\@small--row {
        flex-direction: row; }
      .o-flex\@small--flex-direction-row-reverse, .o-flex\@small--row-reverse {
        flex-direction: row-reverse; }
      .o-flex\@small--flex-direction-column, .o-flex\@small--column {
        flex-direction: column; }
      .o-flex\@small--flex-direction-column-reverse, .o-flex\@small--column-reverse {
        flex-direction: column-reverse; }
      .o-flex\@small--wrap {
        flex-wrap: wrap; }
      .o-flex\@small--nowrap {
        flex-wrap: nowrap; }
      .o-flex\@small--justify-content-start {
        justify-content: flex-start; }
      .o-flex\@small--justify-content-end {
        justify-content: flex-end; }
      .o-flex\@small--justify-content-center {
        justify-content: center; }
      .o-flex\@small--justify-content-between {
        justify-content: space-between; }
      .o-flex\@small--justify-content-around {
        justify-content: space-around; }
      .o-flex\@small--align-items-start {
        align-items: flex-start; }
      .o-flex\@small--align-items-end {
        align-items: flex-end; }
      .o-flex\@small--align-items-center {
        align-items: center; }
      .o-flex\@small--align-items-baseline {
        align-items: baseline; }
      .o-flex\@small--align-items-stretch {
        align-items: stretch; }
      .o-flex\@small--align-content-start {
        align-content: flex-start; }
      .o-flex\@small--align-content-end {
        align-content: flex-end; }
      .o-flex\@small--align-content-center {
        align-content: center; }
      .o-flex\@small--align-content-between {
        align-content: space-between; }
      .o-flex\@small--align-content-around {
        align-content: space-around; }
      .o-flex\@small--align-content-stretch {
        align-content: stretch; }
      .o-flex\@small__order-0 {
        order: 0; }
      .o-flex\@small__order-1 {
        order: 1; }
      .o-flex\@small__order-1-neg {
        order: -1; }
      .o-flex\@small__order-2 {
        order: 2; }
      .o-flex\@small__order-2-neg {
        order: -2; }
      .o-flex\@small__order-3 {
        order: 3; }
      .o-flex\@small__order-3-neg {
        order: -3; }
      .o-flex\@small__order-4 {
        order: 4; }
      .o-flex\@small__order-4-neg {
        order: -4; }
      .o-flex\@small__order-5 {
        order: 5; }
      .o-flex\@small__order-5-neg {
        order: -5; }
      .o-flex\@small__order-6 {
        order: 6; }
      .o-flex\@small__order-6-neg {
        order: -6; }
      .o-flex\@small__order-7 {
        order: 7; }
      .o-flex\@small__order-7-neg {
        order: -7; }
      .o-flex\@small__order-8 {
        order: 8; }
      .o-flex\@small__order-8-neg {
        order: -8; }
      .o-flex\@small__order-9 {
        order: 9; }
      .o-flex\@small__order-9-neg {
        order: -9; }
      .o-flex\@small__order-10 {
        order: 10; }
      .o-flex\@small__order-10-neg {
        order: -10; }
      .o-flex\@small__order-11 {
        order: 11; }
      .o-flex\@small__order-11-neg {
        order: -11; }
      .o-flex\@small__order-12 {
        order: 12; }
      .o-flex\@small__order-12-neg {
        order: -12; }
      .o-flex\@small__align-self-start, .o-flex\@small__start {
        align-self: flex-start; }
      .o-flex\@small__align-self-end, .o-flex\@small__end {
        align-self: flex-end; }
      .o-flex\@small__align-self-center, .o-flex\@small__center {
        align-self: center; }
      .o-flex\@small__align-self-baseline, .o-flex\@small__baseline {
        align-self: baseline; }
      .o-flex\@small__align-self-stretch, .o-flex\@small__stretch {
        align-self: stretch; }
      .o-flex\@small__grow-1 {
        flex-grow: 1; }
      .o-flex\@small__shrink-1 {
        flex-shrink: 1; }
      .o-flex\@small--1 > * {
        flex: 1; }
      .o-flex\@small__grow-2 {
        flex-grow: 2; }
      .o-flex\@small__shrink-2 {
        flex-shrink: 2; }
      .o-flex\@small--2 > * {
        flex: 2; }
      .o-flex\@small__grow-3 {
        flex-grow: 3; }
      .o-flex\@small__shrink-3 {
        flex-shrink: 3; }
      .o-flex\@small--3 > * {
        flex: 3; }
      .o-flex\@small__grow-4 {
        flex-grow: 4; }
      .o-flex\@small__shrink-4 {
        flex-shrink: 4; }
      .o-flex\@small--4 > * {
        flex: 4; }
      .o-flex\@small__grow-5 {
        flex-grow: 5; }
      .o-flex\@small__shrink-5 {
        flex-shrink: 5; }
      .o-flex\@small--5 > * {
        flex: 5; }
      .o-flex\@small__grow-6 {
        flex-grow: 6; }
      .o-flex\@small__shrink-6 {
        flex-shrink: 6; }
      .o-flex\@small--6 > * {
        flex: 6; }
      .o-flex\@small__grow-7 {
        flex-grow: 7; }
      .o-flex\@small__shrink-7 {
        flex-shrink: 7; }
      .o-flex\@small--7 > * {
        flex: 7; }
      .o-flex\@small__grow-8 {
        flex-grow: 8; }
      .o-flex\@small__shrink-8 {
        flex-shrink: 8; }
      .o-flex\@small--8 > * {
        flex: 8; }
      .o-flex\@small__grow-9 {
        flex-grow: 9; }
      .o-flex\@small__shrink-9 {
        flex-shrink: 9; }
      .o-flex\@small--9 > * {
        flex: 9; }
      .o-flex\@small__grow-10 {
        flex-grow: 10; }
      .o-flex\@small__shrink-10 {
        flex-shrink: 10; }
      .o-flex\@small--10 > * {
        flex: 10; }
      .o-flex\@small__grow-11 {
        flex-grow: 11; }
      .o-flex\@small__shrink-11 {
        flex-shrink: 11; }
      .o-flex\@small--11 > * {
        flex: 11; }
      .o-flex\@small__grow-12 {
        flex-grow: 12; }
      .o-flex\@small__shrink-12 {
        flex-shrink: 12; }
      .o-flex\@small--12 > * {
        flex: 12; } }
  .o-flex-1 {
    flex: 1; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-1\@large {
        flex: 1; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-1\@small {
        flex: 1; } }
  .o-flex-2 {
    flex: 2; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-2\@large {
        flex: 2; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-2\@small {
        flex: 2; } }
  .o-flex-3 {
    flex: 3; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-3\@large {
        flex: 3; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-3\@small {
        flex: 3; } }
  .o-flex-4 {
    flex: 4; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-4\@large {
        flex: 4; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-4\@small {
        flex: 4; } }
  .o-flex-5 {
    flex: 5; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-5\@large {
        flex: 5; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-5\@small {
        flex: 5; } }
  .o-flex-6 {
    flex: 6; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-6\@large {
        flex: 6; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-6\@small {
        flex: 6; } }
  .o-flex-7 {
    flex: 7; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-7\@large {
        flex: 7; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-7\@small {
        flex: 7; } }
  .o-flex-8 {
    flex: 8; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-8\@large {
        flex: 8; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-8\@small {
        flex: 8; } }
  .o-flex-9 {
    flex: 9; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-9\@large {
        flex: 9; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-9\@small {
        flex: 9; } }
  .o-flex-10 {
    flex: 10; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-10\@large {
        flex: 10; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-10\@small {
        flex: 10; } }
  .o-flex-11 {
    flex: 11; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-11\@large {
        flex: 11; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-11\@small {
        flex: 11; } }
  .o-flex-12 {
    flex: 12; }
    @media screen and (min-width: 47.5rem) {
      .o-flex-12\@large {
        flex: 12; } }
    @media screen and (max-width: 47.5rem) {
      .o-flex-12\@small {
        flex: 12; } }

/*
---
name: Flex
category: 3. Objects > Flex
---

Applies `display: flex` to container. Don't know flex? Check out [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.

```demo.html
<div class="o-flex">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```


```small.html
<div class="o-flex@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="o-flex@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Expand
category: 3. Objects > Flex
---

Applies `flex: 1` to element;

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.

```demo.html
<div class="o-flex o-flex-1">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```


```small.html
<div class="o-flex@small o-flex-1@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="o-flex@large o-flex-1@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Start
category: 3. Objects > Flex 
---

Applies `justify-content: flex-start` to flex, requires and extends `.o-flex`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options: `.o-flex@small--start`, `.o-flex@large--start`
* 2 variations on selector: `.o-flex--start`, `.o-flex--justify-content-start`


```demo.html
<div class="o-flex o-flex--start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```demo-alt.html
<div class="o-flex o-flex--justify-content-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex End
category: 3. Objects > Flex
---

Applies `justify-content: flex-end` to flex, requires and extends `.o-flex`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options: `.o-flex@small--end`, `.o-flex@large--end`
* 2 variations on selector: `.o-flex--end`, `.o-flex--justify-content-end`


```demo.html
<div class="o-flex o-flex--end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```demo-alt.html
<div class="o-flex o-flex--justify-content-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Children Equal
category: 3. Objects > Flex 
---

Applies `flex: 1` to direct descendent children making them equal spanned widths, requires and extends `.o-flex`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options: `.o-flex@small--equal`, `.o-flex@large--equal`

```demo.html
<div class="o-flex o-flex--equal">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Wrap
category: 3. Objects > Flex
---

Applies `flex-wrap` property to flex, requires and extends `.o-flex`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options
* Wrap: Applies `flex-wrap: wrap;` - `.o-flex--wrap`, `.o-flex@small--wrap`, `.o-flex@large--wrap`
* nowrap: Applies `flex-wrap: nowrap;` - `.o-flex--nowrap`, `.o-flex@small--nowrap`, `.o-flex@large--nowrap`


```wrap.html
<div class="o-flex o-flex--wrap">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```nowrap.html
<div class="o-flex o-flex--nowrap">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Direction
category: 3. Objects > Flex
---

Applies `flex-direction` property to flex container, requires and extends `.o-flex`.
*  Contains [Suffixcate](/#suffixcate) options

Options:
* Row: Applies `flex-direction: row;` - `.o-flex--flex-direction-row`, `.o-flex@small--flex-direction-row`, `.o-flex@large--flex-direction-row`, `.o-flex--row`, `.o-flex@small--row`, `.o-flex@large--row`
* row-reverse Reverse: Applies `flex-direction: row-reverse;` - `.o-flex--flex-direction-row-reverse`, `.o-flex@small--flex-direction-row-reverse`, `.o-flex@large--flex-direction-row-reverse`, `.o-flex--row-reverse`, `.o-flex@small--row-reverse`, `.o-flex@large--row-reverse`
* Column: Applies `flex-direction: column;` - `.o-flex--flex-direction-column`, `.o-flex@small--flex-direction-column`, `.o-flex@large--flex-direction-column`, `.o-flex--column`, `.o-flex@small--column`, `.o-flex@large--column`
* Column Reverse: Applies `flex-direction: column-reverse;` - `.o-flex--flex-direction-column-reverse`, `.o-flex@small--flex-direction-column-reverse`, `.o-flex@large--flex-direction-column-reverse`, `.o-flex--column-reverse`, `.o-flex@small--column-reverse`, `.o-flex@large--column-reverse`

```row.html
<div class="o-flex o-flex--row">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```column.html
<div class="o-flex o-flex--column">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Justify
category: 3. Objects > Flex
---

Applies `justify-content` property to flex, requires and extends `.o-flex`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-flex--justify-content-start`: `.o-flex@small--justify-content-start`, `.o-flex@large--justify-content-start`
* `.o-flex--justify-content-end`: `.o-flex@small--justify-content-end`, `.o-flex@large--justify-content-end`
* `.o-flex--justify-content-center`: `.o-flex@small--justify-content-center`, `.o-flex@large--justify-content-center`
* `.o-flex--justify-content-between`: `.o-flex@small--justify-content-between`, `.o-flex@large--justify-content-between`
* `.o-flex--justify-content-around`: `.o-flex@small--justify-content-around`, `.o-flex@large--justify-content-around`


```justify-content-start.html
<div class="o-flex o-flex--justify-content-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-end.html
<div class="o-flex o-flex--justify-content-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-center.html
<div class="o-flex o-flex--justify-content-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-between.html
<div class="o-flex o-flex--justify-content-between">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-around.html
<div class="o-flex o-flex--justify-content-around">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Align Items
category: 3. Objects > Flex
---

Applies `align-items` property to flex, requires and extends `.o-flex`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-flex--align-items-start`: `.o-flex@small--align-items-start`, `.o-flex@large--align-items-start`
* `.o-flex--align-items-end`: `.o-flex@small--align-items-end`, `.o-flex@large--align-items-end`
* `.o-flex--align-items-center`: `.o-flex@small--align-items-center`, `.o-flex@large--align-items-center`
* `.o-flex--align-items-baseline`: `.o-flex@small--align-items-baseline`, `.o-flex@large--align-items-baseline`
* `.o-flex--align-items-stetch`: `.o-flex@small--align-items-stetch`, `.o-flex@large--align-items-stetch`


```align-items-start.html
<div class="o-flex o-flex--align-items-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-end.html
<div class="o-flex o-flex--align-items-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-center.html
<div class="o-flex o-flex--align-items-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-baseline.html
<div class="o-flex o-flex--align-items-baseline">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-stretch.html
<div class="o-flex o-flex--align-items-stretch">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Align Items
category: 3. Objects > Flex
---

Applies `align-items` property to flex, requires and extends `.o-flex`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-flex--align-items-start`: `.o-flex@small--align-items-start`, `.o-flex@large--align-items-start`
* `.o-flex--align-items-end`: `.o-flex@small--align-items-end`, `.o-flex@large--align-items-end`
* `.o-flex--align-items-center`: `.o-flex@small--align-items-center`, `.o-flex@large--align-items-center`
* `.o-flex--align-items-baseline`: `.o-flex@small--align-items-baseline`, `.o-flex@large--align-items-baseline`
* `.o-flex--align-items-stetch`: `.o-flex@small--align-items-stetch`, `.o-flex@large--align-items-stetch`


```align-items-start.html
<div class="o-flex o-flex--align-items-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-end.html
<div class="o-flex o-flex--align-items-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-center.html
<div class="o-flex o-flex--align-items-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-baseline.html
<div class="o-flex o-flex--align-items-baseline">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-stretch.html
<div class="o-flex o-flex--align-items-stretch">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex Align Content
category: 3. Objects > Flex
---

Applies `align-content` property to flex, requires and extends `.o-flex`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-flex--align-content-start`: `.o-flex@small--align-content-start`, `.o-flex@large--align-content-start`
* `.o-flex--align-content-end`: `.o-flex@small--align-content-end`, `.o-flex@large--align-content-end`
* `.o-flex--align-content-center`: `.o-flex@small--align-content-center`, `.o-flex@large--align-content-center`
* `.o-flex--align-content-between`: `.o-flex@small--align-content-between`, `.o-flex@large--align-content-between`
* `.o-flex--align-content-around`: `.o-flex@small--align-content-around`, `.o-flex@large--align-content-around`
* `.o-flex--align-content-stetch`: `.o-flex@small--align-content-stetch`, `.o-flex@large--align-content-stetch`


```align-content-start.html
<div class="o-flex o-flex--align-content-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-end.html
<div class="o-flex o-flex--align-content-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-center.html
<div class="o-flex o-flex--align-content-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-between.html
<div class="o-flex o-flex--align-content-between">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-around.html
<div class="o-flex o-flex--align-content-around">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-stretch.html
<div class="o-flex o-flex--align-content-stretch">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Flex > Children Order
category: 3. Objects > Flex
---

Applies `order` property to element, requires parent to be `.o-flex`. Utility version also available for `display: flex;` and `display: grid;` direct descendants.

*  Contains [Suffixcate](/#suffixcate) options available for all options and utility versions;

Options:
* `.o-flex__order-0`: `order: 0;`
* `.o-flex__order-1`: `order: 1;`
* `.o-flex__order-1-neg`: `order: -1;`
* `.o-flex__order-2`: `order: 2;`
* `.o-flex__order-2-neg`: `order: -2;`
* `.o-flex__order-3`: `order: 3;`
* `.o-flex__order-3-neg`: `order: -3;`
* `.o-flex__order-4`: `order: 4;`
* `.o-flex__order-4-neg`: `order: -4;`
* `.o-flex__order-5`: `order: 5;`
* `.o-flex__order-5-neg`: `order: -5;`
* `.o-flex__order-6`: `order: 6;`
* `.o-flex__order-6-neg`: `order: -6;`
* `.o-flex__order-7`: `order: 7;`
* `.o-flex__order-7-neg`: `order: -7;`
* `.o-flex__order-8`: `order: 8;`
* `.o-flex__order-8-neg`: `order: -8;`
* `.o-flex__order-9`: `order: 9;`
* `.o-flex__order-9-neg`: `order: -9`
* `.o-flex__order-10`: `order: 10;`
* `.o-flex__order-10-neg`: `order: -10;`
* `.o-flex__order-11`: `order: 11;`
* `.o-flex__order-11-neg`: `order: -11;`
* `.o-flex__order-12`: `order: 12;`
* `.o-flex__order-12-neg`: `order: -12;`

* Utility versions:
* `.u-order-0`: `order: 0;`
* `.u-order-1`: `order: 1;`
* `.u-order-1-neg`: `order: -1;`
* `.u-order-2`: `order: 2;`
* `.u-order-2-neg`: `order: -2;`
* `.u-order-3`: `order: 3;`
* `.u-order-3-neg`: `order: -3;`
* `.u-order-4`: `order: 4;`
* `.u-order-4-neg`: `order: -4;`
* `.u-order-5`: `order: 5;`
* `.u-order-5-neg`: `order: -5;`
* `.u-order-6`: `order: 6;`
* `.u-order-6-neg`: `order: -6;`
* `.u-order-7`: `order: 7;`
* `.u-order-7-neg`: `order: -7;`
* `.u-order-8`: `order: 8;`
* `.u-order-8-neg`: `order: -8;`
* `.u-order-9`: `order: 9;`
* `.u-order-9-neg`: `order: -9`
* `.u-order-10`: `order: 10;`
* `.u-order-10-neg`: `order: -10;`
* `.u-order-11`: `order: 11;`
* `.u-order-11-neg`: `order: -11;`
* `.u-order-12`: `order: 12;`
* `.u-order-12-neg`: `order: -12;`


```demo.html
<div class="o-flex>
	<div class="o-flex__order-12">
		1
	</div>
	<div class="o-flex__order-0">
		2
	</div>
	<div>
		3
	</div>
	<div>
		4
	</div>
</div>
```

*/
/*
---
name: Flex > Children Align Self
category: 3. Objects > Flex
---

Applies `align-self` property to element, requires parent to be `.o-flex`. 

*  Contains [Suffixcate](/#suffixcate) options available for all options and utility versions;

Options:
* `.o-flex__align-self-start`: `.o-flex@small__align-self-start`, `.o-flex@large__align-self-start`
* `.o-flex__align-self-end`: `.o-flex@small__align-self-end`, `.o-flex@large__align-self-end`
* `.o-flex__align-self-center`: `.o-flex@small__align-self-center`, `.o-flex@large__align-self-center`
* `.o-flex__align-self-baseline`: `.o-flex@small__align-self-baseline`, `.o-flex@large__align-self-baseline`
* `.o-flex__align-self-stetch`: `.o-flex@small__align-self-stetch`, `.o-flex@large__align-self-stetch`

*/
.o-grid {
  display: grid; }
  @media screen and (min-width: 25.556rem) {
    .o-grid--column-gap, .o-grid--gap {
      grid-column-gap: 1.25rem; } }
  @media screen and (max-width: 25.556rem) {
    .o-grid--column-gap, .o-grid--gap {
      grid-column-gap: 0.625rem; } }
  .o-grid--column-gap-fixed, .o-grid--gap-fixed {
    grid-column-gap: 1.25rem; }
  @media screen and (min-width: 25.556rem) {
    .o-grid--column-gap-lg, .o-grid--gap-lg {
      grid-column-gap: 2.5rem; } }
  @media screen and (max-width: 25.556rem) {
    .o-grid--column-gap-lg, .o-grid--gap-lg {
      grid-column-gap: 1.25rem; } }
  .o-grid--column-gap-lg-fixed, .o-grid--gap-lg-fixed {
    grid-column-gap: 2.5rem; }
  .o-grid--column-gap-sm, .o-grid--gap-sm {
    grid-column-gap: 0.625rem; }
  .o-grid--column-gap-sm, .o-grid--gap-sm {
    grid-column-gap: 0.3125rem; }
  @media screen and (min-width: 25.556rem) {
    .o-grid--row-gap, .o-grid--gap {
      grid-row-gap: 1.25rem; } }
  @media screen and (max-width: 25.556rem) {
    .o-grid--row-gap, .o-grid--gap {
      grid-row-gap: 0.625rem; } }
  .o-grid--row-gap-fixed, .o-grid--gap-fixed {
    grid-row-gap: 1.25rem; }
  @media screen and (min-width: 25.556rem) {
    .o-grid--row-gap-lg, .o-grid--gap-lg {
      grid-row-gap: 2.5rem; } }
  @media screen and (max-width: 25.556rem) {
    .o-grid--row-gap-lg, .o-grid--gap-lg {
      grid-row-gap: 1.25rem; } }
  .o-grid--row-gap-lg-fixed, .o-grid--gap-lg-fixed {
    grid-row-gap: 2.5rem; }
  .o-grid--row-gap-sm, .o-grid--gap-sm {
    grid-row-gap: 0.625rem; }
  .o-grid--1 {
    grid-template-columns: 1fr; }
  .o-grid--2 {
    grid-template-columns: 1fr 1fr; }
  .o-grid--3 {
    grid-template-columns: 1fr 1fr 1fr; }
  .o-grid--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr; }
  .o-grid--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
  .o-grid--justify-content-start {
    justify-content: start; }
  .o-grid--justify-content-end {
    justify-content: end; }
  .o-grid--justify-content-center {
    justify-content: center; }
  .o-grid--justify-strech {
    justify-content: stretch; }
  .o-grid--align-items-start {
    align-items: start; }
  .o-grid--align-items-end {
    align-items: end; }
  .o-grid--align-items-center {
    align-items: center; }
  .o-grid--align-content-stretch {
    align-content: stretch; }
  .o-grid--align-items-start {
    align-items: flex-start; }
  .o-grid--align-items-end {
    align-items: flex-end; }
  .o-grid--align-items-center {
    align-items: center; }
  .o-grid--align-items-baseline {
    align-items: baseline; }
  .o-grid--align-items-stretch {
    align-items: stretch; }
  .o-grid--justify-content-start {
    justify-content: start; }
  .o-grid--justify-content-end {
    justify-content: end; }
  .o-grid--justify-content-center {
    justify-content: center; }
  .o-grid--justify-content-between {
    justify-content: space-between; }
  .o-grid--justify-content-around {
    justify-content: space-around; }
  .o-grid--justify-content-evenly {
    justify-content: space-evenly; }
  .o-grid--justify-content-stretch {
    justify-content: stretch; }
  @media screen and (min-width: 47.5rem) {
    .o-grid\@large {
      display: grid; } }
  @media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@large--column-gap, .o-grid\@large--gap {
      grid-column-gap: 1.25rem; } }
  @media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@large--column-gap, .o-grid\@large--gap {
      grid-column-gap: 0.625rem; } }
  @media screen and (min-width: 47.5rem) {
      .o-grid\@large--column-gap-fixed, .o-grid\@large--gap-fixed {
        grid-column-gap: 1.25rem; } }
  @media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@large--column-gap-lg, .o-grid\@large--gap-lg {
      grid-column-gap: 2.5rem; } }
  @media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@large--column-gap-lg, .o-grid\@large--gap-lg {
      grid-column-gap: 1.25rem; } }
  @media screen and (min-width: 47.5rem) {
      .o-grid\@large--column-gap-lg-fixed, .o-grid\@large--gap-lg-fixed {
        grid-column-gap: 2.5rem; }
      .o-grid\@large--column-gap-sm, .o-grid\@large--gap-sm {
        grid-column-gap: 0.625rem; }
      .o-grid\@large--column-gap-sm, .o-grid\@large--gap-sm {
        grid-column-gap: 0.3125rem; } }
  @media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@large--row-gap, .o-grid\@large--gap {
      grid-row-gap: 1.25rem; } }
  @media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@large--row-gap, .o-grid\@large--gap {
      grid-row-gap: 0.625rem; } }
  @media screen and (min-width: 47.5rem) {
      .o-grid\@large--row-gap-fixed, .o-grid\@large--gap-fixed {
        grid-row-gap: 1.25rem; } }
  @media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@large--row-gap-lg, .o-grid\@large--gap-lg {
      grid-row-gap: 2.5rem; } }
  @media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@large--row-gap-lg, .o-grid\@large--gap-lg {
      grid-row-gap: 1.25rem; } }
  @media screen and (min-width: 47.5rem) {
      .o-grid\@large--row-gap-lg-fixed, .o-grid\@large--gap-lg-fixed {
        grid-row-gap: 2.5rem; }
      .o-grid\@large--row-gap-sm, .o-grid\@large--gap-sm {
        grid-row-gap: 0.625rem; }
      .o-grid\@large--1 {
        grid-template-columns: 1fr; }
      .o-grid\@large--2 {
        grid-template-columns: 1fr 1fr; }
      .o-grid\@large--3 {
        grid-template-columns: 1fr 1fr 1fr; }
      .o-grid\@large--4 {
        grid-template-columns: 1fr 1fr 1fr 1fr; }
      .o-grid\@large--5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--6 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--7 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--8 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--9 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--10 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--11 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--12 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@large--justify-content-start {
        justify-content: start; }
      .o-grid\@large--justify-content-end {
        justify-content: end; }
      .o-grid\@large--justify-content-center {
        justify-content: center; }
      .o-grid\@large--justify-strech {
        justify-content: stretch; }
      .o-grid\@large--align-items-start {
        align-items: start; }
      .o-grid\@large--align-items-end {
        align-items: end; }
      .o-grid\@large--align-items-center {
        align-items: center; }
      .o-grid\@large--align-content-stretch {
        align-content: stretch; }
      .o-grid\@large--align-items-start {
        align-items: flex-start; }
      .o-grid\@large--align-items-end {
        align-items: flex-end; }
      .o-grid\@large--align-items-center {
        align-items: center; }
      .o-grid\@large--align-items-baseline {
        align-items: baseline; }
      .o-grid\@large--align-items-stretch {
        align-items: stretch; }
      .o-grid\@large--justify-content-start {
        justify-content: start; }
      .o-grid\@large--justify-content-end {
        justify-content: end; }
      .o-grid\@large--justify-content-center {
        justify-content: center; }
      .o-grid\@large--justify-content-between {
        justify-content: space-between; }
      .o-grid\@large--justify-content-around {
        justify-content: space-around; }
      .o-grid\@large--justify-content-evenly {
        justify-content: space-evenly; }
      .o-grid\@large--justify-content-stretch {
        justify-content: stretch; } }
  @media screen and (max-width: 47.5rem) {
    .o-grid\@small {
      display: grid; } }
  @media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@small--column-gap, .o-grid\@small--gap {
      grid-column-gap: 1.25rem; } }
  @media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@small--column-gap, .o-grid\@small--gap {
      grid-column-gap: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
      .o-grid\@small--column-gap-fixed, .o-grid\@small--gap-fixed {
        grid-column-gap: 1.25rem; } }
  @media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@small--column-gap-lg, .o-grid\@small--gap-lg {
      grid-column-gap: 2.5rem; } }
  @media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@small--column-gap-lg, .o-grid\@small--gap-lg {
      grid-column-gap: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
      .o-grid\@small--column-gap-lg-fixed, .o-grid\@small--gap-lg-fixed {
        grid-column-gap: 2.5rem; }
      .o-grid\@small--column-gap-sm, .o-grid\@small--gap-sm {
        grid-column-gap: 0.625rem; }
      .o-grid\@small--column-gap-sm, .o-grid\@small--gap-sm {
        grid-column-gap: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@small--row-gap, .o-grid\@small--gap {
      grid-row-gap: 1.25rem; } }
  @media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@small--row-gap, .o-grid\@small--gap {
      grid-row-gap: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
      .o-grid\@small--row-gap-fixed, .o-grid\@small--gap-fixed {
        grid-row-gap: 1.25rem; } }
  @media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
    .o-grid\@small--row-gap-lg, .o-grid\@small--gap-lg {
      grid-row-gap: 2.5rem; } }
  @media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
    .o-grid\@small--row-gap-lg, .o-grid\@small--gap-lg {
      grid-row-gap: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
      .o-grid\@small--row-gap-lg-fixed, .o-grid\@small--gap-lg-fixed {
        grid-row-gap: 2.5rem; }
      .o-grid\@small--row-gap-sm, .o-grid\@small--gap-sm {
        grid-row-gap: 0.625rem; }
      .o-grid\@small--1 {
        grid-template-columns: 1fr; }
      .o-grid\@small--2 {
        grid-template-columns: 1fr 1fr; }
      .o-grid\@small--3 {
        grid-template-columns: 1fr 1fr 1fr; }
      .o-grid\@small--4 {
        grid-template-columns: 1fr 1fr 1fr 1fr; }
      .o-grid\@small--5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--6 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--7 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--8 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--9 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--10 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--11 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--12 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
      .o-grid\@small--justify-content-start {
        justify-content: start; }
      .o-grid\@small--justify-content-end {
        justify-content: end; }
      .o-grid\@small--justify-content-center {
        justify-content: center; }
      .o-grid\@small--justify-strech {
        justify-content: stretch; }
      .o-grid\@small--align-items-start {
        align-items: start; }
      .o-grid\@small--align-items-end {
        align-items: end; }
      .o-grid\@small--align-items-center {
        align-items: center; }
      .o-grid\@small--align-content-stretch {
        align-content: stretch; }
      .o-grid\@small--align-items-start {
        align-items: flex-start; }
      .o-grid\@small--align-items-end {
        align-items: flex-end; }
      .o-grid\@small--align-items-center {
        align-items: center; }
      .o-grid\@small--align-items-baseline {
        align-items: baseline; }
      .o-grid\@small--align-items-stretch {
        align-items: stretch; }
      .o-grid\@small--justify-content-start {
        justify-content: start; }
      .o-grid\@small--justify-content-end {
        justify-content: end; }
      .o-grid\@small--justify-content-center {
        justify-content: center; }
      .o-grid\@small--justify-content-between {
        justify-content: space-between; }
      .o-grid\@small--justify-content-around {
        justify-content: space-around; }
      .o-grid\@small--justify-content-evenly {
        justify-content: space-evenly; }
      .o-grid\@small--justify-content-stretch {
        justify-content: stretch; } }

/*
---
name: Grid
category: 3. Objects > Grid
---

Applies `display: grid` to container. Don't know Grid? Check out [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.


Modifiers: 
* `o-grid--1`-`o-grid--12`: Applies column `1fr` for `grid-template-columns`, for example `.o-grid--1` is equal to `grid-template-columns: 1fr;` and `.o-grid--4` is equal to `grid-template-columns: 1fr 1fr 1fr 1fr;`

```demo.html
<div class="o-grid">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```


```small.html
<div class="o-grid@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="o-grid@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Grid > Template Columns
category: 3. Objects > Grid
---

Applies `grid-template-columns` with `1fr` for identified quanitity, for example `.o-grid--2` is equal to `grid-template-columns: 1fr 1fr;` (2 column) and `.o-grid--4` is equal to `grid-template-columns: 1fr 1fr 1fr 1fr;` (4 column)

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.

Classes
* `o-grid--1`-`o-grid--12`: Applies column `1fr` for `grid-template-columns`, 



```2.html
<div class="o-grid o-grid--2">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```


```4.html
<div class="o-grid o-grid--4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```12.html
<div class="o-grid o-grid--12">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Grid >  Row Gap
category: 3. Objects > Grid
---

Applies `grid-row-gap:` to container, requires `.o-grid`. Uses settings from `$default-space` from `_00-settings.scss`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.


Default:
```demo.html
<div class="o-grid o-grid--2 o-grid--column-gap">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

Fixed:
```demo.html
<div class="o-grid o-grid--2 o-grid--column-gap-fixed">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```


2x:
```demo.html
<div class="o-grid o-grid--2 o-grid--column-gap-lg">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

2x fixed:
```demo.html
<div class="o-grid o-grid--2 o-grid--column-gap-lg-fixed">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

Half:
```demo.html
<div class="o-grid o-grid--2 o-grid--column-gap-lg-sm">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```


Quarter:
```demo.html
<div class="o-grid o-grid--2 o-grid--column-gap-lg-tiny">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```
*/
/*
---
name: Grid >  Row Gap
category: 3. Objects > Grid
---

Applies `grid-row-gap:` to container, requires `.o-grid`. Uses settings from `$default-space` from `_00-settings.scss`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.


Default:
```demo.html
<div class="o-grid o-grid--2 o-grid--row-gap">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

Fixed:
```demo.html
<div class="o-grid o-grid--2 o-grid--row-gap-fixed">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```


2x:
```demo.html
<div class="o-grid o-grid--2 o-grid--row-gap-lg">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

2x fixed:
```demo.html
<div class="o-grid o-grid--2 o-grid--row-gap-lg-fixed">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

Half:
```demo.html
<div class="o-grid o-grid--2 o-grid--row-gap-lg-sm">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```


Quarter:
```demo.html
<div class="o-grid o-grid--2 o-grid--row-gap-lg-tiny">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```
*/
/*
---
name: Grid >  Gap
category: 3. Objects > Grid
---

Applies `grid-row-gap` `grid-column-gap` and to container, requires `.o-grid`. Uses settings from `$default-space` from `_00-settings.scss`.

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.


Default:
```demo.html
<div class="o-grid o-grid--2 o-grid--gap">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

Fixed:
```demo.html
<div class="o-grid o-grid--2 o-grid--gap-fixed">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```


2x:
```demo.html
<div class="o-grid o-grid--2 o-grid--gap-lg">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

2x fixed:
```demo.html
<div class="o-grid o-grid--2 o-grid--gap-lg-fixed">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```

Half:
```demo.html
<div class="o-grid o-grid--2 o-grid--gap-lg-sm">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```


Quarter:
```demo.html
<div class="o-grid o-grid--2 o-grid--gap-lg-tiny">
	<div class="u-primary-bg">
		•••
	</div>
	<div class="u-secondary-bg">
		•••
	</div>
	<div class="u-dark-bg">
		•••
	</div>
	<div class="u-light-bg">
		•••
	</div>
</div>
```
*/
/*
---
name: Grid > Justify
category: 3. Objects > Grid
---

Applies `justify-items` property to flex, requires and extends `.o-grid`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-grid--justify-items-start`: `.o-grid@small--justify-items-start`, `.o-grid@large--justify-items-start`
* `.o-grid--justify-items-end`: `.o-grid@small--justify-items-end`, `.o-grid@large--justify-items-end`
* `.o-grid--justify-items-center`: `.o-grid@small--justify-items-center`, `.o-grid@large--justify-items-center`
* `.o-grid--justify-items-around`: `.o-grid@small--justify-items-around`, `.o-grid@large--justify-items-around`


```justify-items-start.html
<div class="o-grid o-grid--3 o-grid--justify-items-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-items-end.html
<div class="o-grid o-grid--3 o-grid--justify-items-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-items-center.html
<div class="o-grid o-grid--3 o-grid--justify-items-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-items-around.html
<div class="o-grid o-grid--3 o-grid--justify-items-around">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Grid > Align Items
category: 3. Objects > Grid
---

Applies `align-items` property to flex, requires and extends `.o-grid`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-grid--align-items-start`: `.o-grid@small--align-items-start`, `.o-grid@large--align-items-start`
* `.o-grid--align-items-end`: `.o-grid@small--align-items-end`, `.o-grid@large--align-items-end`
* `.o-grid--align-items-center`: `.o-grid@small--align-items-center`, `.o-grid@large--align-items-center`
* `.o-grid--align-items-stetch`: `.o-grid@small--align-items-stetch`, `.o-grid@large--align-items-stetch`


```align-items-start.html
<div class="o-grid o-grid--3 o-grid--align-items-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-end.html
<div class="o-grid o-grid--3 o-grid--align-items-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-center.html
<div class="o-grid o-grid--3 o-grid--align-items-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-items-stretch.html
<div class="o-grid o-grid--3 o-grid--align-items-stretch">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Grid > Justify Content
category: 3. Objects > Grid
---

Applies `justify-content` property to flex, requires and extends `.o-grid`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-grid--justify-content-start`: `.o-grid@small--justify-content-start`, `.o-grid@large--justify-content-start`
* `.o-grid--justify-content-end`: `.o-grid@small--justify-content-end`, `.o-grid@large--justify-content-end`
* `.o-grid--justify-content-center`: `.o-grid@small--justify-content-center`, `.o-grid@large--justify-content-center`
* `.o-grid--justify-content-stretch`: `.o-grid@small--justify-content-stretch`, `.o-grid@large--justify-content-stretch`
* `.o-grid--justify-content-between`: `.o-grid@small--justify-content-between`, `.o-grid@large--justify-content-between`
* `.o-grid--justify-content-around`: `.o-grid@small--justify-content-around`, `.o-grid@large--justify-content-around`
* `.o-grid--justify-content-evenly`: `.o-grid@small--justify-content-evenly`, `.o-grid@large--justify-content-evenly`



```justify-content-start.html
<div class="o-grid o-grid--3 o-grid--justify-content-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-end.html
<div class="o-grid o-grid--3 o-grid--justify-content-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-center.html
<div class="o-grid o-grid--3 o-grid--justify-content-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-between.html
<div class="o-grid o-grid--3 o-grid--justify-content-between">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```justify-content-around.html
<div class="o-grid o-grid--3 o-grid--justify-content-around">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```


```justify-content-evenly.html
<div class="o-grid o-grid--3 o-grid--justify-content-evenly">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: Grid > Align Content
category: 3. Objects > Grid
---

Applies `align-content` property to grid, requires and extends `.o-grid`.

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.o-grid--align-content-start`: `.o-grid@small--align-content-start`, `.o-grid@large--align-content-start`
* `.o-grid--align-content-end`: `.o-grid@small--align-content-end`, `.o-grid@large--align-content-end`
* `.o-grid--align-content-center`: `.o-grid@small--align-content-center`, `.o-grid@large--align-content-center`
* `.o-grid--align-content-baseline`: `.o-grid@small--align-content-baseline`, `.o-grid@large--align-content-baseline`
* `.o-grid--align-content-stetch`: `.o-grid@small--align-content-stetch`, `.o-grid@large--align-content-stetch`
* `.o-grid--align-content-space-around`: `.o-grid@small--align-content-space-around`, `.o-grid@large--align-content-space-around`
* `.o-grid--align-content-space-between`: `.o-grid@small--align-content-space-between`, `.o-grid@large--align-content-space-between`
* `.o-grid--align-content-space-evenly`: `.o-grid@small--align-content-space-evenly`, `.o-grid@large--align-content-space-evenly`


```align-content-start.html
<div class="o-grid o-grid--3 o-grid--align-content-start">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-end.html
<div class="o-grid o-grid--3 o-grid--align-content-end">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-center.html
<div class="o-grid o-grid--3 o-grid--align-content-center">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-baseline.html
<div class="o-grid o-grid--3 o-grid--align-content-baseline">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```align-content-stretch.html
<div class="o-grid o-grid--3 o-grid--align-content-stretch">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```
*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
.u-min-width-1-of-10, .u-min-width-1\/10 {
  min-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-10\@large, .u-min-width-1\/10\@large {
      min-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-10\@small, .u-min-width-1\/10\@small {
      min-width: 10%; } }

.u-width-1-of-10, .u-width-1\/10 {
  width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-10\@large, .u-width-1\/10\@large {
      width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-10\@small, .u-width-1\/10\@small {
      width: 10%; } }

.u-max-width-1-of-10, .u-max-width-1\/10 {
  max-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-10\@large, .u-max-width-1\/10\@large {
      max-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-10\@small, .u-max-width-1\/10\@small {
      max-width: 10%; } }

.u-min-width-1-of-5, .u-min-width-1\/5, .u-min-width-2-of-10, .u-min-width-2\/10 {
  min-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-5\@large, .u-min-width-1\/5\@large, .u-min-width-2-of-10\@large, .u-min-width-2\/10\@large {
      min-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-5\@small, .u-min-width-1\/5\@small, .u-min-width-2-of-10\@small, .u-min-width-2\/10\@small {
      min-width: 20%; } }

.u-width-1-of-5, .u-width-1\/5, .u-width-2-of-10, .u-width-2\/10 {
  width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-5\@large, .u-width-1\/5\@large, .u-width-2-of-10\@large, .u-width-2\/10\@large {
      width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-5\@small, .u-width-1\/5\@small, .u-width-2-of-10\@small, .u-width-2\/10\@small {
      width: 20%; } }

.u-max-width-1-of-5, .u-max-width-1\/5, .u-max-width-2-of-10, .u-max-width-2\/10 {
  max-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-5\@large, .u-max-width-1\/5\@large, .u-max-width-2-of-10\@large, .u-max-width-2\/10\@large {
      max-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-5\@small, .u-max-width-1\/5\@small, .u-max-width-2-of-10\@small, .u-max-width-2\/10\@small {
      max-width: 20%; } }

.u-min-width-1-of-4, .u-min-width-1\/4, .u-min-width-2-of-8, .u-min-width-2\/8, .u-min-width-3-of-12, .u-min-width-3\/12 {
  min-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-4\@large, .u-min-width-1\/4\@large, .u-min-width-2-of-8\@large, .u-min-width-2\/8\@large, .u-min-width-3-of-12\@large, .u-min-width-3\/12\@large {
      min-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-4\@small, .u-min-width-1\/4\@small, .u-min-width-2-of-8\@small, .u-min-width-2\/8\@small, .u-min-width-3-of-12\@small, .u-min-width-3\/12\@small {
      min-width: 25%; } }

.u-width-1-of-4, .u-width-1\/4, .u-width-2-of-8, .u-width-2\/8, .u-width-3-of-12, .u-width-3\/12 {
  width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-4\@large, .u-width-1\/4\@large, .u-width-2-of-8\@large, .u-width-2\/8\@large, .u-width-3-of-12\@large, .u-width-3\/12\@large {
      width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-4\@small, .u-width-1\/4\@small, .u-width-2-of-8\@small, .u-width-2\/8\@small, .u-width-3-of-12\@small, .u-width-3\/12\@small {
      width: 25%; } }

.u-max-width-1-of-4, .u-max-width-1\/4, .u-max-width-2-of-8, .u-max-width-2\/8, .u-max-width-3-of-12, .u-max-width-3\/12 {
  max-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-4\@large, .u-max-width-1\/4\@large, .u-max-width-2-of-8\@large, .u-max-width-2\/8\@large, .u-max-width-3-of-12\@large, .u-max-width-3\/12\@large {
      max-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-4\@small, .u-max-width-1\/4\@small, .u-max-width-2-of-8\@small, .u-max-width-2\/8\@small, .u-max-width-3-of-12\@small, .u-max-width-3\/12\@small {
      max-width: 25%; } }

.u-min-width-3-of-10, .u-min-width-3\/10 {
  min-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-10\@large, .u-min-width-3\/10\@large {
      min-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-10\@small, .u-min-width-3\/10\@small {
      min-width: 30%; } }

.u-width-3-of-10, .u-width-3\/10 {
  width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-10\@large, .u-width-3\/10\@large {
      width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-10\@small, .u-width-3\/10\@small {
      width: 30%; } }

.u-max-width-3-of-10, .u-max-width-3\/10 {
  max-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-10\@large, .u-max-width-3\/10\@large {
      max-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-10\@small, .u-max-width-3\/10\@small {
      max-width: 30%; } }

.u-min-width-2-of-5, .u-min-width-2\/5, .u-min-width-4-of-10, .u-min-width-4\/10 {
  min-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-5\@large, .u-min-width-2\/5\@large, .u-min-width-4-of-10\@large, .u-min-width-4\/10\@large {
      min-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-5\@small, .u-min-width-2\/5\@small, .u-min-width-4-of-10\@small, .u-min-width-4\/10\@small {
      min-width: 40%; } }

.u-width-2-of-5, .u-width-2\/5, .u-width-4-of-10, .u-width-4\/10 {
  width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-5\@large, .u-width-2\/5\@large, .u-width-4-of-10\@large, .u-width-4\/10\@large {
      width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-5\@small, .u-width-2\/5\@small, .u-width-4-of-10\@small, .u-width-4\/10\@small {
      width: 40%; } }

.u-max-width-2-of-5, .u-max-width-2\/5, .u-max-width-4-of-10, .u-max-width-4\/10 {
  max-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-5\@large, .u-max-width-2\/5\@large, .u-max-width-4-of-10\@large, .u-max-width-4\/10\@large {
      max-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-5\@small, .u-max-width-2\/5\@small, .u-max-width-4-of-10\@small, .u-max-width-4\/10\@small {
      max-width: 40%; } }

.u-min-width-1-of-2, .u-min-width-1\/2, .u-min-width-2-of-4, .u-min-width-2\/4, .u-min-width-3-of-6, .u-min-width-3\/6, .u-min-width-4-of-8, .u-min-width-4\/8, .u-min-width-5-of-10, .u-min-width-5\/10, .u-min-width-6-of-12, .u-min-width-6\/12 {
  min-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-2\@large, .u-min-width-1\/2\@large, .u-min-width-2-of-4\@large, .u-min-width-2\/4\@large, .u-min-width-3-of-6\@large, .u-min-width-3\/6\@large, .u-min-width-4-of-8\@large, .u-min-width-4\/8\@large, .u-min-width-5-of-10\@large, .u-min-width-5\/10\@large, .u-min-width-6-of-12\@large, .u-min-width-6\/12\@large {
      min-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-2\@small, .u-min-width-1\/2\@small, .u-min-width-2-of-4\@small, .u-min-width-2\/4\@small, .u-min-width-3-of-6\@small, .u-min-width-3\/6\@small, .u-min-width-4-of-8\@small, .u-min-width-4\/8\@small, .u-min-width-5-of-10\@small, .u-min-width-5\/10\@small, .u-min-width-6-of-12\@small, .u-min-width-6\/12\@small {
      min-width: 50%; } }

.u-width-1-of-2, .u-width-1\/2, .u-width-2-of-4, .u-width-2\/4, .u-width-3-of-6, .u-width-3\/6, .u-width-4-of-8, .u-width-4\/8, .u-width-5-of-10, .u-width-5\/10, .u-width-6-of-12, .u-width-6\/12 {
  width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-2\@large, .u-width-1\/2\@large, .u-width-2-of-4\@large, .u-width-2\/4\@large, .u-width-3-of-6\@large, .u-width-3\/6\@large, .u-width-4-of-8\@large, .u-width-4\/8\@large, .u-width-5-of-10\@large, .u-width-5\/10\@large, .u-width-6-of-12\@large, .u-width-6\/12\@large {
      width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-2\@small, .u-width-1\/2\@small, .u-width-2-of-4\@small, .u-width-2\/4\@small, .u-width-3-of-6\@small, .u-width-3\/6\@small, .u-width-4-of-8\@small, .u-width-4\/8\@small, .u-width-5-of-10\@small, .u-width-5\/10\@small, .u-width-6-of-12\@small, .u-width-6\/12\@small {
      width: 50%; } }

.u-max-width-1-of-2, .u-max-width-1\/2, .u-max-width-2-of-4, .u-max-width-2\/4, .u-max-width-3-of-6, .u-max-width-3\/6, .u-max-width-4-of-8, .u-max-width-4\/8, .u-max-width-5-of-10, .u-max-width-5\/10, .u-max-width-6-of-12, .u-max-width-6\/12 {
  max-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-2\@large, .u-max-width-1\/2\@large, .u-max-width-2-of-4\@large, .u-max-width-2\/4\@large, .u-max-width-3-of-6\@large, .u-max-width-3\/6\@large, .u-max-width-4-of-8\@large, .u-max-width-4\/8\@large, .u-max-width-5-of-10\@large, .u-max-width-5\/10\@large, .u-max-width-6-of-12\@large, .u-max-width-6\/12\@large {
      max-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-2\@small, .u-max-width-1\/2\@small, .u-max-width-2-of-4\@small, .u-max-width-2\/4\@small, .u-max-width-3-of-6\@small, .u-max-width-3\/6\@small, .u-max-width-4-of-8\@small, .u-max-width-4\/8\@small, .u-max-width-5-of-10\@small, .u-max-width-5\/10\@small, .u-max-width-6-of-12\@small, .u-max-width-6\/12\@small {
      max-width: 50%; } }

.u-min-width-3-of-5, .u-min-width-3\/5, .u-min-width-6-of-10, .u-min-width-6\/10 {
  min-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-5\@large, .u-min-width-3\/5\@large, .u-min-width-6-of-10\@large, .u-min-width-6\/10\@large {
      min-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-5\@small, .u-min-width-3\/5\@small, .u-min-width-6-of-10\@small, .u-min-width-6\/10\@small {
      min-width: 60%; } }

.u-width-3-of-5, .u-width-3\/5, .u-width-6-of-10, .u-width-6\/10 {
  width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-5\@large, .u-width-3\/5\@large, .u-width-6-of-10\@large, .u-width-6\/10\@large {
      width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-5\@small, .u-width-3\/5\@small, .u-width-6-of-10\@small, .u-width-6\/10\@small {
      width: 60%; } }

.u-max-width-3-of-5, .u-max-width-3\/5, .u-max-width-6-of-10, .u-max-width-6\/10 {
  max-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-5\@large, .u-max-width-3\/5\@large, .u-max-width-6-of-10\@large, .u-max-width-6\/10\@large {
      max-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-5\@small, .u-max-width-3\/5\@small, .u-max-width-6-of-10\@small, .u-max-width-6\/10\@small {
      max-width: 60%; } }

.u-min-width-7-of-10, .u-min-width-7\/10 {
  min-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-10\@large, .u-min-width-7\/10\@large {
      min-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-10\@small, .u-min-width-7\/10\@small {
      min-width: 70%; } }

.u-width-7-of-10, .u-width-7\/10 {
  width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-10\@large, .u-width-7\/10\@large {
      width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-10\@small, .u-width-7\/10\@small {
      width: 70%; } }

.u-max-width-7-of-10, .u-max-width-7\/10 {
  max-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-10\@large, .u-max-width-7\/10\@large {
      max-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-10\@small, .u-max-width-7\/10\@small {
      max-width: 70%; } }

.u-min-width-3-of-4, .u-min-width-3\/4, .u-min-width-6-of-8, .u-min-width-6\/8, .u-min-width-9-of-12, .u-min-width-9\/12 {
  min-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-4\@large, .u-min-width-3\/4\@large, .u-min-width-6-of-8\@large, .u-min-width-6\/8\@large, .u-min-width-9-of-12\@large, .u-min-width-9\/12\@large {
      min-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-4\@small, .u-min-width-3\/4\@small, .u-min-width-6-of-8\@small, .u-min-width-6\/8\@small, .u-min-width-9-of-12\@small, .u-min-width-9\/12\@small {
      min-width: 75%; } }

.u-width-3-of-4, .u-width-3\/4, .u-width-6-of-8, .u-width-6\/8, .u-width-9-of-12, .u-width-9\/12 {
  width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-4\@large, .u-width-3\/4\@large, .u-width-6-of-8\@large, .u-width-6\/8\@large, .u-width-9-of-12\@large, .u-width-9\/12\@large {
      width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-4\@small, .u-width-3\/4\@small, .u-width-6-of-8\@small, .u-width-6\/8\@small, .u-width-9-of-12\@small, .u-width-9\/12\@small {
      width: 75%; } }

.u-max-width-3-of-4, .u-max-width-3\/4, .u-max-width-6-of-8, .u-max-width-6\/8, .u-max-width-9-of-12, .u-max-width-9\/12 {
  max-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-4\@large, .u-max-width-3\/4\@large, .u-max-width-6-of-8\@large, .u-max-width-6\/8\@large, .u-max-width-9-of-12\@large, .u-max-width-9\/12\@large {
      max-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-4\@small, .u-max-width-3\/4\@small, .u-max-width-6-of-8\@small, .u-max-width-6\/8\@small, .u-max-width-9-of-12\@small, .u-max-width-9\/12\@small {
      max-width: 75%; } }

.u-min-width-4-of-5, .u-min-width-4\/5, .u-min-width-8-of-10, .u-min-width-8\/10 {
  min-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-5\@large, .u-min-width-4\/5\@large, .u-min-width-8-of-10\@large, .u-min-width-8\/10\@large {
      min-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-5\@small, .u-min-width-4\/5\@small, .u-min-width-8-of-10\@small, .u-min-width-8\/10\@small {
      min-width: 80%; } }

.u-width-4-of-5, .u-width-4\/5, .u-width-8-of-10, .u-width-8\/10 {
  width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-5\@large, .u-width-4\/5\@large, .u-width-8-of-10\@large, .u-width-8\/10\@large {
      width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-5\@small, .u-width-4\/5\@small, .u-width-8-of-10\@small, .u-width-8\/10\@small {
      width: 80%; } }

.u-max-width-4-of-5, .u-max-width-4\/5, .u-max-width-8-of-10, .u-max-width-8\/10 {
  max-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-5\@large, .u-max-width-4\/5\@large, .u-max-width-8-of-10\@large, .u-max-width-8\/10\@large {
      max-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-5\@small, .u-max-width-4\/5\@small, .u-max-width-8-of-10\@small, .u-max-width-8\/10\@small {
      max-width: 80%; } }

.u-min-width-9-of-10, .u-min-width-9\/10 {
  min-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-9-of-10\@large, .u-min-width-9\/10\@large {
      min-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-9-of-10\@small, .u-min-width-9\/10\@small {
      min-width: 90%; } }

.u-width-9-of-10, .u-width-9\/10 {
  width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-9-of-10\@large, .u-width-9\/10\@large {
      width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-9-of-10\@small, .u-width-9\/10\@small {
      width: 90%; } }

.u-max-width-9-of-10, .u-max-width-9\/10 {
  max-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-9-of-10\@large, .u-max-width-9\/10\@large {
      max-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-9-of-10\@small, .u-max-width-9\/10\@small {
      max-width: 90%; } }

.u-min-width-1-of-1, .u-min-width-1\/1, .u-min-width-2-of-2, .u-min-width-2\/2, .u-min-width-3-of-3, .u-min-width-3\/3, .u-min-width-4-of-4, .u-min-width-4\/4, .u-min-width-5-of-5, .u-min-width-5\/5, .u-min-width-6-of-6, .u-min-width-6\/6, .u-min-width-7-of-7, .u-min-width-7\/7, .u-min-width-8-of-8, .u-min-width-8\/8, .u-min-width-9-of-9, .u-min-width-9\/9, .u-min-width-10-of-10, .u-min-width-10\/10, .u-min-width-11-of-11, .u-min-width-11\/11, .u-min-width-12-of-12, .u-min-width-12\/12 {
  min-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-1\@large, .u-min-width-1\/1\@large, .u-min-width-2-of-2\@large, .u-min-width-2\/2\@large, .u-min-width-3-of-3\@large, .u-min-width-3\/3\@large, .u-min-width-4-of-4\@large, .u-min-width-4\/4\@large, .u-min-width-5-of-5\@large, .u-min-width-5\/5\@large, .u-min-width-6-of-6\@large, .u-min-width-6\/6\@large, .u-min-width-7-of-7\@large, .u-min-width-7\/7\@large, .u-min-width-8-of-8\@large, .u-min-width-8\/8\@large, .u-min-width-9-of-9\@large, .u-min-width-9\/9\@large, .u-min-width-10-of-10\@large, .u-min-width-10\/10\@large, .u-min-width-11-of-11\@large, .u-min-width-11\/11\@large, .u-min-width-12-of-12\@large, .u-min-width-12\/12\@large {
      min-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-1\@small, .u-min-width-1\/1\@small, .u-min-width-2-of-2\@small, .u-min-width-2\/2\@small, .u-min-width-3-of-3\@small, .u-min-width-3\/3\@small, .u-min-width-4-of-4\@small, .u-min-width-4\/4\@small, .u-min-width-5-of-5\@small, .u-min-width-5\/5\@small, .u-min-width-6-of-6\@small, .u-min-width-6\/6\@small, .u-min-width-7-of-7\@small, .u-min-width-7\/7\@small, .u-min-width-8-of-8\@small, .u-min-width-8\/8\@small, .u-min-width-9-of-9\@small, .u-min-width-9\/9\@small, .u-min-width-10-of-10\@small, .u-min-width-10\/10\@small, .u-min-width-11-of-11\@small, .u-min-width-11\/11\@small, .u-min-width-12-of-12\@small, .u-min-width-12\/12\@small {
      min-width: 100%; } }

.u-width-1-of-1, .u-width-1\/1, .u-width-2-of-2, .u-width-2\/2, .u-width-3-of-3, .u-width-3\/3, .u-width-4-of-4, .u-width-4\/4, .u-width-5-of-5, .u-width-5\/5, .u-width-6-of-6, .u-width-6\/6, .u-width-7-of-7, .u-width-7\/7, .u-width-8-of-8, .u-width-8\/8, .u-width-9-of-9, .u-width-9\/9, .u-width-10-of-10, .u-width-10\/10, .u-width-11-of-11, .u-width-11\/11, .u-width-12-of-12, .u-width-12\/12 {
  width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-1\@large, .u-width-1\/1\@large, .u-width-2-of-2\@large, .u-width-2\/2\@large, .u-width-3-of-3\@large, .u-width-3\/3\@large, .u-width-4-of-4\@large, .u-width-4\/4\@large, .u-width-5-of-5\@large, .u-width-5\/5\@large, .u-width-6-of-6\@large, .u-width-6\/6\@large, .u-width-7-of-7\@large, .u-width-7\/7\@large, .u-width-8-of-8\@large, .u-width-8\/8\@large, .u-width-9-of-9\@large, .u-width-9\/9\@large, .u-width-10-of-10\@large, .u-width-10\/10\@large, .u-width-11-of-11\@large, .u-width-11\/11\@large, .u-width-12-of-12\@large, .u-width-12\/12\@large {
      width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-1\@small, .u-width-1\/1\@small, .u-width-2-of-2\@small, .u-width-2\/2\@small, .u-width-3-of-3\@small, .u-width-3\/3\@small, .u-width-4-of-4\@small, .u-width-4\/4\@small, .u-width-5-of-5\@small, .u-width-5\/5\@small, .u-width-6-of-6\@small, .u-width-6\/6\@small, .u-width-7-of-7\@small, .u-width-7\/7\@small, .u-width-8-of-8\@small, .u-width-8\/8\@small, .u-width-9-of-9\@small, .u-width-9\/9\@small, .u-width-10-of-10\@small, .u-width-10\/10\@small, .u-width-11-of-11\@small, .u-width-11\/11\@small, .u-width-12-of-12\@small, .u-width-12\/12\@small {
      width: 100%; } }

.u-max-width-1-of-1, .u-max-width-1\/1, .u-max-width-2-of-2, .u-max-width-2\/2, .u-max-width-3-of-3, .u-max-width-3\/3, .u-max-width-4-of-4, .u-max-width-4\/4, .u-max-width-5-of-5, .u-max-width-5\/5, .u-max-width-6-of-6, .u-max-width-6\/6, .u-max-width-7-of-7, .u-max-width-7\/7, .u-max-width-8-of-8, .u-max-width-8\/8, .u-max-width-9-of-9, .u-max-width-9\/9, .u-max-width-10-of-10, .u-max-width-10\/10, .u-max-width-11-of-11, .u-max-width-11\/11, .u-max-width-12-of-12, .u-max-width-12\/12 {
  max-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-1\@large, .u-max-width-1\/1\@large, .u-max-width-2-of-2\@large, .u-max-width-2\/2\@large, .u-max-width-3-of-3\@large, .u-max-width-3\/3\@large, .u-max-width-4-of-4\@large, .u-max-width-4\/4\@large, .u-max-width-5-of-5\@large, .u-max-width-5\/5\@large, .u-max-width-6-of-6\@large, .u-max-width-6\/6\@large, .u-max-width-7-of-7\@large, .u-max-width-7\/7\@large, .u-max-width-8-of-8\@large, .u-max-width-8\/8\@large, .u-max-width-9-of-9\@large, .u-max-width-9\/9\@large, .u-max-width-10-of-10\@large, .u-max-width-10\/10\@large, .u-max-width-11-of-11\@large, .u-max-width-11\/11\@large, .u-max-width-12-of-12\@large, .u-max-width-12\/12\@large {
      max-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-1\@small, .u-max-width-1\/1\@small, .u-max-width-2-of-2\@small, .u-max-width-2\/2\@small, .u-max-width-3-of-3\@small, .u-max-width-3\/3\@small, .u-max-width-4-of-4\@small, .u-max-width-4\/4\@small, .u-max-width-5-of-5\@small, .u-max-width-5\/5\@small, .u-max-width-6-of-6\@small, .u-max-width-6\/6\@small, .u-max-width-7-of-7\@small, .u-max-width-7\/7\@small, .u-max-width-8-of-8\@small, .u-max-width-8\/8\@small, .u-max-width-9-of-9\@small, .u-max-width-9\/9\@small, .u-max-width-10-of-10\@small, .u-max-width-10\/10\@small, .u-max-width-11-of-11\@small, .u-max-width-11\/11\@small, .u-max-width-12-of-12\@small, .u-max-width-12\/12\@small {
      max-width: 100%; } }

/*
---
name: Zones > Content Block
category: 5. Component > Content
---

A nice container for content

```default.html
<article class="c-content-block">
	<header class="c-content-block__header">
		<h2>
			Header
		</h2>
	</header>
	<div class="c-content-block__main">
		<p>
			content here
		</p>
	</div>
	<footer class="c-content-block__footer">
		<a href="#">Link</a>
	</footer>
</article>
```

*/
.c-content-block__header + .c-content-block__main, .c-content-block__main + .c-content-block__main {
  padding-top: 0.625rem; }

.c-content-block__main p:not([class*="reset"]) {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5; }
.c-content-block__footer {
  padding-top: 1.875rem; }

/*
---
name: List > Link List
category: 5. Component > Content
---

A nice structure for a list of links or content blocks

```default.html
<ul class="c-link-list">
	<li>
		<a href="#">Link</a>
	</li>
	<li>
		<a href="#">Link</a>
	</li>
	<li>
		<a href="#">Link</a>
	</li>
</ul>
```

Alternative name:

```default.html
<ul class="c-list">
	<li>
		<a href="#">Link</a>
	</li>
	<li>
		<a href="#">Link</a>
	</li>
	<li>
		<a href="#">Link</a>
	</li>
</ul>
```
*/
.c-list, .c-link-list {
  list-style: none; }
  .c-list > li, .c-link-list > li {
    position: relative; }
    .c-list > li:before, .c-link-list > li:before {
      content: "\2022";
      font-size: 1.125em;
      position: absolute;
      left: -1em; }
    .c-list > li + li, .c-link-list > li + li {
      padding-top: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .c-list\@large, .c-link-list\@large {
      list-style: none; }
      .c-list\@large > li, .c-link-list\@large > li {
        position: relative; }
        .c-list\@large > li:before, .c-link-list\@large > li:before {
          content: "\2022";
          font-size: 1.125em;
          position: absolute;
          left: -1em; }
        .c-list\@large > li + li, .c-link-list\@large > li + li {
          padding-top: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-list\@small, .c-link-list\@small {
      list-style: none; }
      .c-list\@small > li, .c-link-list\@small > li {
        position: relative; }
        .c-list\@small > li:before, .c-link-list\@small > li:before {
          content: "\2022";
          font-size: 1.125em;
          position: absolute;
          left: -1em; }
        .c-list\@small > li + li, .c-link-list\@small > li + li {
          padding-top: 0.3125rem; } }

/*
---
name: Zones > Section Blocks
category: 5. Component > Content
---

Space out sections

```default.html
<div class="c-section-blocks">
	<div class="c-section-blocks__section">
		••• Section here •••
	</div>
	<div class="c-section-blocks__section">
		••• Section here •••
	</div>
</div>
```
*/
@media screen and (min-width: 25.556rem) {
  .c-section-blocks__section {
    padding-bottom: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .c-section-blocks__section {
    padding-bottom: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .c-section-blocks__section + .c-section-blocks__section {
    padding-top: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .c-section-blocks__section + .c-section-blocks__section {
    padding-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .c-section-blocks\@large__section {
    padding-bottom: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .c-section-blocks\@large__section {
    padding-bottom: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .c-section-blocks\@large__section + .c-section-blocks\@large__section {
    padding-top: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .c-section-blocks\@large__section + .c-section-blocks\@large__section {
    padding-top: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .c-section-blocks\@small__section {
    padding-bottom: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .c-section-blocks\@small__section {
    padding-bottom: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .c-section-blocks\@small__section + .c-section-blocks\@small__section {
    padding-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .c-section-blocks\@small__section + .c-section-blocks\@small__section {
    padding-top: 1.25rem; } }

/*
---
name: Intrinsic
category: 5. Components
---

Apply [intrinsic ratios](https://alistapart.com/d/creating-intrinsic-ratios-for-video/example2.html) to elements

*  Contains [Suffixcate](/#suffixcate) option.


Default options:

* `1x1` - add `.c-intrinsic--1x1` or `.c-intrinsic--square` 
* `2x1` - add `.c-intrinsic--2x1`
* `4x3` - add `.c-intrinsic--4x3`
* `16x9` - add `.c-intrinsic--16x9` or `.c-intrinsic--video` 

```1x1.html
<div class="c-intrinsic c-intrinsic--1x1">
	<div class="c-intrinsic__element">
		•••
	</div>
</div>
```

```1x1large.html
<div class="c-intrinsic@large c-intrinsic@large--1x1">
	<div class="c-intrinsic@large__element">
		•••
	</div>
</div>
```

```1x1small.html
<div class="c-intrinsic@small c-intrinsic@small--1x1">
	<div class="c-intrinsic@small">
		•••
	</div>
</div>
```

```2x1.html
<div class="c-intrinsic c-intrinsic--2x1">
	<div class="c-intrinsic__element">
		•••
	</div>
</div>
```

```4x3.html
<div class="c-intrinsic c-intrinsic--4x3">
	<div class="c-intrinsic__element">
		•••
	</div>
</div>
```

```16x9.html
<div class="c-intrinsic c-intrinsic--16x9">
	<div class="c-intrinsic__element">
		•••
	</div>
</div>
```

Make a new aspect ratio:

```new-version
.c-intrinsic {
	@include intrinsic-size-maker(740, 200);
}
```

output:

```new-version-output
.c-intrinsic--740-200 {
	padding-bottom: 27.027027%;
}
```

Make a new aspect ratio (Demo 2):

```new-version
.c-intrinsic {
	@include intrinsic-size-maker(600, 300, "demo");
}
```

output (Demo 2):

```new-version-output
.c-intrinsic--demo {
	padding-bottom: 50%;
}
```

*/
.c-intrinsic {
  position: relative;
  height: 0; }
  .c-intrinsic__element {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; }
  .c-intrinsic--1x1, .c-intrinsic--square {
    padding-bottom: 100%; }
    @media screen and (min-width: 47.5rem) {
      .c-intrinsic--1x1\@large, .c-intrinsic--square\@large {
        padding-bottom: 100%; } }
    @media screen and (max-width: 47.5rem) {
      .c-intrinsic--1x1\@small, .c-intrinsic--square\@small {
        padding-bottom: 100%; } }
  .c-intrinsic--2x1 {
    padding-bottom: 50%; }
    @media screen and (min-width: 47.5rem) {
      .c-intrinsic--2x1\@large {
        padding-bottom: 50%; } }
    @media screen and (max-width: 47.5rem) {
      .c-intrinsic--2x1\@small {
        padding-bottom: 50%; } }
  .c-intrinsic--4x3 {
    padding-bottom: 75%; }
    @media screen and (min-width: 47.5rem) {
      .c-intrinsic--4x3\@large {
        padding-bottom: 75%; } }
    @media screen and (max-width: 47.5rem) {
      .c-intrinsic--4x3\@small {
        padding-bottom: 75%; } }
  .c-intrinsic--16x9 {
    padding-bottom: 56.25%; }
    @media screen and (min-width: 47.5rem) {
      .c-intrinsic--16x9\@large {
        padding-bottom: 56.25%; } }
    @media screen and (max-width: 47.5rem) {
      .c-intrinsic--16x9\@small {
        padding-bottom: 56.25%; } }
  @media screen and (min-width: 47.5rem) {
    .c-intrinsic\@large {
      position: relative;
      height: 0; }
      .c-intrinsic\@large__element {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%; }
      .c-intrinsic\@large--1x1 {
        padding-bottom: 100%; } }
    @media screen and (min-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@large--1x1\@large {
        padding-bottom: 100%; } }
    @media screen and (min-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@large--1x1\@small {
        padding-bottom: 100%; } }
  @media screen and (min-width: 47.5rem) {
      .c-intrinsic\@large--2x1 {
        padding-bottom: 50%; } }
    @media screen and (min-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@large--2x1\@large {
        padding-bottom: 50%; } }
    @media screen and (min-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@large--2x1\@small {
        padding-bottom: 50%; } }
  @media screen and (min-width: 47.5rem) {
      .c-intrinsic\@large--4x3 {
        padding-bottom: 75%; } }
    @media screen and (min-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@large--4x3\@large {
        padding-bottom: 75%; } }
    @media screen and (min-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@large--4x3\@small {
        padding-bottom: 75%; } }
  @media screen and (min-width: 47.5rem) {
      .c-intrinsic\@large--16x9 {
        padding-bottom: 56.25%; } }
    @media screen and (min-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@large--16x9\@large {
        padding-bottom: 56.25%; } }
    @media screen and (min-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@large--16x9\@small {
        padding-bottom: 56.25%; } }

  @media screen and (max-width: 47.5rem) {
    .c-intrinsic\@small {
      position: relative;
      height: 0; }
      .c-intrinsic\@small__element {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%; }
      .c-intrinsic\@small--1x1 {
        padding-bottom: 100%; } }
    @media screen and (max-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@small--1x1\@large {
        padding-bottom: 100%; } }
    @media screen and (max-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@small--1x1\@small {
        padding-bottom: 100%; } }
  @media screen and (max-width: 47.5rem) {
      .c-intrinsic\@small--2x1 {
        padding-bottom: 50%; } }
    @media screen and (max-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@small--2x1\@large {
        padding-bottom: 50%; } }
    @media screen and (max-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@small--2x1\@small {
        padding-bottom: 50%; } }
  @media screen and (max-width: 47.5rem) {
      .c-intrinsic\@small--4x3 {
        padding-bottom: 75%; } }
    @media screen and (max-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@small--4x3\@large {
        padding-bottom: 75%; } }
    @media screen and (max-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@small--4x3\@small {
        padding-bottom: 75%; } }
  @media screen and (max-width: 47.5rem) {
      .c-intrinsic\@small--16x9 {
        padding-bottom: 56.25%; } }
    @media screen and (max-width: 47.5rem) and (min-width: 47.5rem) {
      .c-intrinsic\@small--16x9\@large {
        padding-bottom: 56.25%; } }
    @media screen and (max-width: 47.5rem) and (max-width: 47.5rem) {
      .c-intrinsic\@small--16x9\@small {
        padding-bottom: 56.25%; } }

  .c-intrinsic--video {
    padding-bottom: 56.25%; }
    @media screen and (min-width: 47.5rem) {
      .c-intrinsic--video\@large {
        padding-bottom: 56.25%; } }
    @media screen and (max-width: 47.5rem) {
      .c-intrinsic--video\@small {
        padding-bottom: 56.25%; } }

/*
---
name: Button Base
category: 5. Component > Call to Actions
---

Basic setup of a button, applied to "all buttons". Buttons can be used with `<a>`, `<button>`, and `<input>` elements.

Types of buttons:
- Default: Standard button

```base.html
<button class="c-button c-button--base">Base</button>
```
*/
/*
---
name: Button Default
category: 5. Component > Call to Actions
---

Default settings for a traditional button - including spacing. Buttons can be used with `<a>`, `<button>`, and `<input>` elements.

Types of buttons:
- Default: Standard button

```base.html
<button class="c-button c-button--base">Base</button>
```
*/
.c-button--base {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
.c-button--default {
  text-align: center;
  display: inline-block; }
  .c-button--default > span {
    display: block;
    position: relative; }

a.c-button {
  text-decoration: none; }

/*
---
name: Click area
category: 5. Component > Call to Actions
---

Minimum click area being `40x40`

```base.html
<button class="c-click-area || u-dis-ib">40x40</button>
```

*/
.c-click-area {
  min-width: 2.5rem;
  min-height: 2.5rem; }

.c-label, .c-field-toggle__text, .c-field-toggle__label {
  cursor: pointer; }

.c-input.u-a-c, .c-select__input.u-a-c, .c-select__input.u-a-c option, .c-form-item.u-a-c .c-input {
  text-align-last: center;
  text-align: center; }

.c-label {
  display: block; }

.c-input, .c-textarea {
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

.c-input {
  line-height: 1; }
  .c-input--output {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative; }
  .c-input__alert, .c-input-output__alert {
    position: absolute;
    top: -0.3125rem;
    right: 0;
    z-index: 1;
    width: 1.875rem;
    min-height: 2.1875rem !important;
    height: 100%; }
    .c-input__alert ~ .c-input--output, .c-input-output__alert ~ .c-input--output {
      padding-right: 1.25rem;
      z-index: 0; }

.c-label--output {
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.c-input-output {
  position: relative; }
  .c-input-output__alert[aria-expanded="true"][aria-expanded].c-input-output__alert:before {
    content: "x"; }
  .c-input-output__details:not([aria-hidden="false"]) {
    display: none;
    speak: none; }

.c-select:not(.u-char-before), .c-select:not(.u-char-after) {
  position: relative; }
.c-select:not(.u-full) {
  display: inline-block; }
.c-select__text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0.3125rem;
  z-index: 0;
  text-align: center;
  width: 2.5rem; }
.c-select__input {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
  z-index: 1;
  cursor: pointer; }
  .c-select__input.u-a-c option {
    text-align: center; }
  .c-select__input::-ms-expand {
    display: none; }
  .c-select__input:active + .c-select--highlight, .c-select__input:focus + .c-select--highlight {
    height: 0.125rem;
    position: absolute;
    bottom: -0.125rem;
    left: -0.0625rem;
    right: -0.0625rem;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%; }

.c-textarea {
  line-height: 1.5; }
  .c-textarea--default {
    overflow: hidden;
    resize: none; }

.c-field-toggle {
  position: relative; }
  .c-field-toggle__input {
    margin: 0;
    opacity: 0;
    width: 0; }
  .c-field-toggle__text:before, .c-field-toggle__text:after, .c-field-toggle__label:before, .c-field-toggle__label:after {
    display: inline-block;
    position: absolute;
    top: 0.125rem;
    left: 0; }
  .c-field-toggle__text:before, .c-field-toggle__label:before {
    content: ""; }
  .c-field-toggle__text:after, .c-field-toggle__label:after {
    opacity: 0; }
  .c-field-toggle__input:checked + .c-field-toggle__text:after, .c-field-toggle__input:checked + .c-field-toggle__label:after {
    opacity: 1; }
  .c-field-toggle__input[disabled], .c-field-toggle__input[disabled]:checked, .c-field-toggle__input[disabled] + .c-field-toggle__text, .c-field-toggle__input[disabled] + .c-field-toggle__label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    cursor: not-allowed; }

.c-radio__text:before, .c-radio__text:after {
  border-radius: 50%; }
.c-radio__text:after {
  content: ""; }

.c-checkbox__text:after {
  font-family: 'webfont';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*
---
name: Fieldset
category: 5. Component > Form
---


Reset for `<fieldset>` to reduce `margin`s on side and it's `padding`.

```default.html

<fieldset class="c-fieldset">
••• form elements here •••
</fieldset>

```

*/
.c-fieldset {
  margin-right: 0;
  margin-left: 0;
  padding: 0; }

/*
---
name: Form Item
category: 5. Component > Form
---

Can be used with any structural element

```demo-1.html
<div class="c-form-item">
	<div class="c-form-item__label">
		<label for="demo-field-set">Label</label>
	</div>
	<div class="c-form-item__field">
		<input name="demo-field-set" id="name="demo-field-set"" />
	</div>
</div>

```

```demo-2.html
<div class="c-form-item">
	<label for="demo-field-set">Label</label>
	<input class="c-form-item__field" name="demo-field-set" id="name="demo-field-set"" />
</div>

```
*/
.c-form-item__field {
  z-index: 0; }

/*
---
name: Title Core Styles
category: 5. Component > Typography
---

Provides better legibility and kerning across browsers. Can be used on any element that has text as content.

```default.html
<span class="c-title">Text styles</span>
```
*/
.c-title {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*
---
name: Title Block
category: 5. Component > Typography
---

Spacing for title blocks between headers and subheaders

```default.html
<hgroup class="c-title-block">
	<h1 class="c-title-block__header">
		Header
	</h1>
	<h2 class="c-title-block__subheader">
		Subheader
	</h2>
</hgroup>

```
*/
.c-title-block__header + .c-title-block__subheader {
  margin-top: 0.625rem; }

/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
.u-min-width-1-of-10, .u-min-width-1\/10 {
  min-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-10\@large, .u-min-width-1\/10\@large {
      min-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-10\@small, .u-min-width-1\/10\@small {
      min-width: 10%; } }

.u-width-1-of-10, .u-width-1\/10 {
  width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-10\@large, .u-width-1\/10\@large {
      width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-10\@small, .u-width-1\/10\@small {
      width: 10%; } }

.u-max-width-1-of-10, .u-max-width-1\/10 {
  max-width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-10\@large, .u-max-width-1\/10\@large {
      max-width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-10\@small, .u-max-width-1\/10\@small {
      max-width: 10%; } }

.u-min-width-1-of-5, .u-min-width-1\/5, .u-min-width-2-of-10, .u-min-width-2\/10 {
  min-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-5\@large, .u-min-width-1\/5\@large, .u-min-width-2-of-10\@large, .u-min-width-2\/10\@large {
      min-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-5\@small, .u-min-width-1\/5\@small, .u-min-width-2-of-10\@small, .u-min-width-2\/10\@small {
      min-width: 20%; } }

.u-width-1-of-5, .u-width-1\/5, .u-width-2-of-10, .u-width-2\/10 {
  width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-5\@large, .u-width-1\/5\@large, .u-width-2-of-10\@large, .u-width-2\/10\@large {
      width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-5\@small, .u-width-1\/5\@small, .u-width-2-of-10\@small, .u-width-2\/10\@small {
      width: 20%; } }

.u-max-width-1-of-5, .u-max-width-1\/5, .u-max-width-2-of-10, .u-max-width-2\/10 {
  max-width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-5\@large, .u-max-width-1\/5\@large, .u-max-width-2-of-10\@large, .u-max-width-2\/10\@large {
      max-width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-5\@small, .u-max-width-1\/5\@small, .u-max-width-2-of-10\@small, .u-max-width-2\/10\@small {
      max-width: 20%; } }

.u-min-width-1-of-4, .u-min-width-1\/4, .u-min-width-2-of-8, .u-min-width-2\/8, .u-min-width-3-of-12, .u-min-width-3\/12 {
  min-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-4\@large, .u-min-width-1\/4\@large, .u-min-width-2-of-8\@large, .u-min-width-2\/8\@large, .u-min-width-3-of-12\@large, .u-min-width-3\/12\@large {
      min-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-4\@small, .u-min-width-1\/4\@small, .u-min-width-2-of-8\@small, .u-min-width-2\/8\@small, .u-min-width-3-of-12\@small, .u-min-width-3\/12\@small {
      min-width: 25%; } }

.u-width-1-of-4, .u-width-1\/4, .u-width-2-of-8, .u-width-2\/8, .u-width-3-of-12, .u-width-3\/12 {
  width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-4\@large, .u-width-1\/4\@large, .u-width-2-of-8\@large, .u-width-2\/8\@large, .u-width-3-of-12\@large, .u-width-3\/12\@large {
      width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-4\@small, .u-width-1\/4\@small, .u-width-2-of-8\@small, .u-width-2\/8\@small, .u-width-3-of-12\@small, .u-width-3\/12\@small {
      width: 25%; } }

.u-max-width-1-of-4, .u-max-width-1\/4, .u-max-width-2-of-8, .u-max-width-2\/8, .u-max-width-3-of-12, .u-max-width-3\/12 {
  max-width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-4\@large, .u-max-width-1\/4\@large, .u-max-width-2-of-8\@large, .u-max-width-2\/8\@large, .u-max-width-3-of-12\@large, .u-max-width-3\/12\@large {
      max-width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-4\@small, .u-max-width-1\/4\@small, .u-max-width-2-of-8\@small, .u-max-width-2\/8\@small, .u-max-width-3-of-12\@small, .u-max-width-3\/12\@small {
      max-width: 25%; } }

.u-min-width-3-of-10, .u-min-width-3\/10 {
  min-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-10\@large, .u-min-width-3\/10\@large {
      min-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-10\@small, .u-min-width-3\/10\@small {
      min-width: 30%; } }

.u-width-3-of-10, .u-width-3\/10 {
  width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-10\@large, .u-width-3\/10\@large {
      width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-10\@small, .u-width-3\/10\@small {
      width: 30%; } }

.u-max-width-3-of-10, .u-max-width-3\/10 {
  max-width: 30%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-10\@large, .u-max-width-3\/10\@large {
      max-width: 30%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-10\@small, .u-max-width-3\/10\@small {
      max-width: 30%; } }

.u-min-width-2-of-5, .u-min-width-2\/5, .u-min-width-4-of-10, .u-min-width-4\/10 {
  min-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-5\@large, .u-min-width-2\/5\@large, .u-min-width-4-of-10\@large, .u-min-width-4\/10\@large {
      min-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-5\@small, .u-min-width-2\/5\@small, .u-min-width-4-of-10\@small, .u-min-width-4\/10\@small {
      min-width: 40%; } }

.u-width-2-of-5, .u-width-2\/5, .u-width-4-of-10, .u-width-4\/10 {
  width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-5\@large, .u-width-2\/5\@large, .u-width-4-of-10\@large, .u-width-4\/10\@large {
      width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-5\@small, .u-width-2\/5\@small, .u-width-4-of-10\@small, .u-width-4\/10\@small {
      width: 40%; } }

.u-max-width-2-of-5, .u-max-width-2\/5, .u-max-width-4-of-10, .u-max-width-4\/10 {
  max-width: 40%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-5\@large, .u-max-width-2\/5\@large, .u-max-width-4-of-10\@large, .u-max-width-4\/10\@large {
      max-width: 40%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-5\@small, .u-max-width-2\/5\@small, .u-max-width-4-of-10\@small, .u-max-width-4\/10\@small {
      max-width: 40%; } }

.u-min-width-1-of-2, .u-min-width-1\/2, .u-min-width-2-of-4, .u-min-width-2\/4, .u-min-width-3-of-6, .u-min-width-3\/6, .u-min-width-4-of-8, .u-min-width-4\/8, .u-min-width-5-of-10, .u-min-width-5\/10, .u-min-width-6-of-12, .u-min-width-6\/12 {
  min-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-2\@large, .u-min-width-1\/2\@large, .u-min-width-2-of-4\@large, .u-min-width-2\/4\@large, .u-min-width-3-of-6\@large, .u-min-width-3\/6\@large, .u-min-width-4-of-8\@large, .u-min-width-4\/8\@large, .u-min-width-5-of-10\@large, .u-min-width-5\/10\@large, .u-min-width-6-of-12\@large, .u-min-width-6\/12\@large {
      min-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-2\@small, .u-min-width-1\/2\@small, .u-min-width-2-of-4\@small, .u-min-width-2\/4\@small, .u-min-width-3-of-6\@small, .u-min-width-3\/6\@small, .u-min-width-4-of-8\@small, .u-min-width-4\/8\@small, .u-min-width-5-of-10\@small, .u-min-width-5\/10\@small, .u-min-width-6-of-12\@small, .u-min-width-6\/12\@small {
      min-width: 50%; } }

.u-width-1-of-2, .u-width-1\/2, .u-width-2-of-4, .u-width-2\/4, .u-width-3-of-6, .u-width-3\/6, .u-width-4-of-8, .u-width-4\/8, .u-width-5-of-10, .u-width-5\/10, .u-width-6-of-12, .u-width-6\/12 {
  width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-2\@large, .u-width-1\/2\@large, .u-width-2-of-4\@large, .u-width-2\/4\@large, .u-width-3-of-6\@large, .u-width-3\/6\@large, .u-width-4-of-8\@large, .u-width-4\/8\@large, .u-width-5-of-10\@large, .u-width-5\/10\@large, .u-width-6-of-12\@large, .u-width-6\/12\@large {
      width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-2\@small, .u-width-1\/2\@small, .u-width-2-of-4\@small, .u-width-2\/4\@small, .u-width-3-of-6\@small, .u-width-3\/6\@small, .u-width-4-of-8\@small, .u-width-4\/8\@small, .u-width-5-of-10\@small, .u-width-5\/10\@small, .u-width-6-of-12\@small, .u-width-6\/12\@small {
      width: 50%; } }

.u-max-width-1-of-2, .u-max-width-1\/2, .u-max-width-2-of-4, .u-max-width-2\/4, .u-max-width-3-of-6, .u-max-width-3\/6, .u-max-width-4-of-8, .u-max-width-4\/8, .u-max-width-5-of-10, .u-max-width-5\/10, .u-max-width-6-of-12, .u-max-width-6\/12 {
  max-width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-2\@large, .u-max-width-1\/2\@large, .u-max-width-2-of-4\@large, .u-max-width-2\/4\@large, .u-max-width-3-of-6\@large, .u-max-width-3\/6\@large, .u-max-width-4-of-8\@large, .u-max-width-4\/8\@large, .u-max-width-5-of-10\@large, .u-max-width-5\/10\@large, .u-max-width-6-of-12\@large, .u-max-width-6\/12\@large {
      max-width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-2\@small, .u-max-width-1\/2\@small, .u-max-width-2-of-4\@small, .u-max-width-2\/4\@small, .u-max-width-3-of-6\@small, .u-max-width-3\/6\@small, .u-max-width-4-of-8\@small, .u-max-width-4\/8\@small, .u-max-width-5-of-10\@small, .u-max-width-5\/10\@small, .u-max-width-6-of-12\@small, .u-max-width-6\/12\@small {
      max-width: 50%; } }

.u-min-width-3-of-5, .u-min-width-3\/5, .u-min-width-6-of-10, .u-min-width-6\/10 {
  min-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-5\@large, .u-min-width-3\/5\@large, .u-min-width-6-of-10\@large, .u-min-width-6\/10\@large {
      min-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-5\@small, .u-min-width-3\/5\@small, .u-min-width-6-of-10\@small, .u-min-width-6\/10\@small {
      min-width: 60%; } }

.u-width-3-of-5, .u-width-3\/5, .u-width-6-of-10, .u-width-6\/10 {
  width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-5\@large, .u-width-3\/5\@large, .u-width-6-of-10\@large, .u-width-6\/10\@large {
      width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-5\@small, .u-width-3\/5\@small, .u-width-6-of-10\@small, .u-width-6\/10\@small {
      width: 60%; } }

.u-max-width-3-of-5, .u-max-width-3\/5, .u-max-width-6-of-10, .u-max-width-6\/10 {
  max-width: 60%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-5\@large, .u-max-width-3\/5\@large, .u-max-width-6-of-10\@large, .u-max-width-6\/10\@large {
      max-width: 60%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-5\@small, .u-max-width-3\/5\@small, .u-max-width-6-of-10\@small, .u-max-width-6\/10\@small {
      max-width: 60%; } }

.u-min-width-7-of-10, .u-min-width-7\/10 {
  min-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-10\@large, .u-min-width-7\/10\@large {
      min-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-10\@small, .u-min-width-7\/10\@small {
      min-width: 70%; } }

.u-width-7-of-10, .u-width-7\/10 {
  width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-10\@large, .u-width-7\/10\@large {
      width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-10\@small, .u-width-7\/10\@small {
      width: 70%; } }

.u-max-width-7-of-10, .u-max-width-7\/10 {
  max-width: 70%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-10\@large, .u-max-width-7\/10\@large {
      max-width: 70%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-10\@small, .u-max-width-7\/10\@small {
      max-width: 70%; } }

.u-min-width-3-of-4, .u-min-width-3\/4, .u-min-width-6-of-8, .u-min-width-6\/8, .u-min-width-9-of-12, .u-min-width-9\/12 {
  min-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-4\@large, .u-min-width-3\/4\@large, .u-min-width-6-of-8\@large, .u-min-width-6\/8\@large, .u-min-width-9-of-12\@large, .u-min-width-9\/12\@large {
      min-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-4\@small, .u-min-width-3\/4\@small, .u-min-width-6-of-8\@small, .u-min-width-6\/8\@small, .u-min-width-9-of-12\@small, .u-min-width-9\/12\@small {
      min-width: 75%; } }

.u-width-3-of-4, .u-width-3\/4, .u-width-6-of-8, .u-width-6\/8, .u-width-9-of-12, .u-width-9\/12 {
  width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-4\@large, .u-width-3\/4\@large, .u-width-6-of-8\@large, .u-width-6\/8\@large, .u-width-9-of-12\@large, .u-width-9\/12\@large {
      width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-4\@small, .u-width-3\/4\@small, .u-width-6-of-8\@small, .u-width-6\/8\@small, .u-width-9-of-12\@small, .u-width-9\/12\@small {
      width: 75%; } }

.u-max-width-3-of-4, .u-max-width-3\/4, .u-max-width-6-of-8, .u-max-width-6\/8, .u-max-width-9-of-12, .u-max-width-9\/12 {
  max-width: 75%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-4\@large, .u-max-width-3\/4\@large, .u-max-width-6-of-8\@large, .u-max-width-6\/8\@large, .u-max-width-9-of-12\@large, .u-max-width-9\/12\@large {
      max-width: 75%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-4\@small, .u-max-width-3\/4\@small, .u-max-width-6-of-8\@small, .u-max-width-6\/8\@small, .u-max-width-9-of-12\@small, .u-max-width-9\/12\@small {
      max-width: 75%; } }

.u-min-width-4-of-5, .u-min-width-4\/5, .u-min-width-8-of-10, .u-min-width-8\/10 {
  min-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-5\@large, .u-min-width-4\/5\@large, .u-min-width-8-of-10\@large, .u-min-width-8\/10\@large {
      min-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-5\@small, .u-min-width-4\/5\@small, .u-min-width-8-of-10\@small, .u-min-width-8\/10\@small {
      min-width: 80%; } }

.u-width-4-of-5, .u-width-4\/5, .u-width-8-of-10, .u-width-8\/10 {
  width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-5\@large, .u-width-4\/5\@large, .u-width-8-of-10\@large, .u-width-8\/10\@large {
      width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-5\@small, .u-width-4\/5\@small, .u-width-8-of-10\@small, .u-width-8\/10\@small {
      width: 80%; } }

.u-max-width-4-of-5, .u-max-width-4\/5, .u-max-width-8-of-10, .u-max-width-8\/10 {
  max-width: 80%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-5\@large, .u-max-width-4\/5\@large, .u-max-width-8-of-10\@large, .u-max-width-8\/10\@large {
      max-width: 80%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-5\@small, .u-max-width-4\/5\@small, .u-max-width-8-of-10\@small, .u-max-width-8\/10\@small {
      max-width: 80%; } }

.u-min-width-9-of-10, .u-min-width-9\/10 {
  min-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-9-of-10\@large, .u-min-width-9\/10\@large {
      min-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-9-of-10\@small, .u-min-width-9\/10\@small {
      min-width: 90%; } }

.u-width-9-of-10, .u-width-9\/10 {
  width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-9-of-10\@large, .u-width-9\/10\@large {
      width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-9-of-10\@small, .u-width-9\/10\@small {
      width: 90%; } }

.u-max-width-9-of-10, .u-max-width-9\/10 {
  max-width: 90%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-9-of-10\@large, .u-max-width-9\/10\@large {
      max-width: 90%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-9-of-10\@small, .u-max-width-9\/10\@small {
      max-width: 90%; } }

.u-min-width-1-of-1, .u-min-width-1\/1, .u-min-width-2-of-2, .u-min-width-2\/2, .u-min-width-3-of-3, .u-min-width-3\/3, .u-min-width-4-of-4, .u-min-width-4\/4, .u-min-width-5-of-5, .u-min-width-5\/5, .u-min-width-6-of-6, .u-min-width-6\/6, .u-min-width-7-of-7, .u-min-width-7\/7, .u-min-width-8-of-8, .u-min-width-8\/8, .u-min-width-9-of-9, .u-min-width-9\/9, .u-min-width-10-of-10, .u-min-width-10\/10, .u-min-width-11-of-11, .u-min-width-11\/11, .u-min-width-12-of-12, .u-min-width-12\/12 {
  min-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-1\@large, .u-min-width-1\/1\@large, .u-min-width-2-of-2\@large, .u-min-width-2\/2\@large, .u-min-width-3-of-3\@large, .u-min-width-3\/3\@large, .u-min-width-4-of-4\@large, .u-min-width-4\/4\@large, .u-min-width-5-of-5\@large, .u-min-width-5\/5\@large, .u-min-width-6-of-6\@large, .u-min-width-6\/6\@large, .u-min-width-7-of-7\@large, .u-min-width-7\/7\@large, .u-min-width-8-of-8\@large, .u-min-width-8\/8\@large, .u-min-width-9-of-9\@large, .u-min-width-9\/9\@large, .u-min-width-10-of-10\@large, .u-min-width-10\/10\@large, .u-min-width-11-of-11\@large, .u-min-width-11\/11\@large, .u-min-width-12-of-12\@large, .u-min-width-12\/12\@large {
      min-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-1\@small, .u-min-width-1\/1\@small, .u-min-width-2-of-2\@small, .u-min-width-2\/2\@small, .u-min-width-3-of-3\@small, .u-min-width-3\/3\@small, .u-min-width-4-of-4\@small, .u-min-width-4\/4\@small, .u-min-width-5-of-5\@small, .u-min-width-5\/5\@small, .u-min-width-6-of-6\@small, .u-min-width-6\/6\@small, .u-min-width-7-of-7\@small, .u-min-width-7\/7\@small, .u-min-width-8-of-8\@small, .u-min-width-8\/8\@small, .u-min-width-9-of-9\@small, .u-min-width-9\/9\@small, .u-min-width-10-of-10\@small, .u-min-width-10\/10\@small, .u-min-width-11-of-11\@small, .u-min-width-11\/11\@small, .u-min-width-12-of-12\@small, .u-min-width-12\/12\@small {
      min-width: 100%; } }

.u-width-1-of-1, .u-width-1\/1, .u-width-2-of-2, .u-width-2\/2, .u-width-3-of-3, .u-width-3\/3, .u-width-4-of-4, .u-width-4\/4, .u-width-5-of-5, .u-width-5\/5, .u-width-6-of-6, .u-width-6\/6, .u-width-7-of-7, .u-width-7\/7, .u-width-8-of-8, .u-width-8\/8, .u-width-9-of-9, .u-width-9\/9, .u-width-10-of-10, .u-width-10\/10, .u-width-11-of-11, .u-width-11\/11, .u-width-12-of-12, .u-width-12\/12 {
  width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-1\@large, .u-width-1\/1\@large, .u-width-2-of-2\@large, .u-width-2\/2\@large, .u-width-3-of-3\@large, .u-width-3\/3\@large, .u-width-4-of-4\@large, .u-width-4\/4\@large, .u-width-5-of-5\@large, .u-width-5\/5\@large, .u-width-6-of-6\@large, .u-width-6\/6\@large, .u-width-7-of-7\@large, .u-width-7\/7\@large, .u-width-8-of-8\@large, .u-width-8\/8\@large, .u-width-9-of-9\@large, .u-width-9\/9\@large, .u-width-10-of-10\@large, .u-width-10\/10\@large, .u-width-11-of-11\@large, .u-width-11\/11\@large, .u-width-12-of-12\@large, .u-width-12\/12\@large {
      width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-1\@small, .u-width-1\/1\@small, .u-width-2-of-2\@small, .u-width-2\/2\@small, .u-width-3-of-3\@small, .u-width-3\/3\@small, .u-width-4-of-4\@small, .u-width-4\/4\@small, .u-width-5-of-5\@small, .u-width-5\/5\@small, .u-width-6-of-6\@small, .u-width-6\/6\@small, .u-width-7-of-7\@small, .u-width-7\/7\@small, .u-width-8-of-8\@small, .u-width-8\/8\@small, .u-width-9-of-9\@small, .u-width-9\/9\@small, .u-width-10-of-10\@small, .u-width-10\/10\@small, .u-width-11-of-11\@small, .u-width-11\/11\@small, .u-width-12-of-12\@small, .u-width-12\/12\@small {
      width: 100%; } }

.u-max-width-1-of-1, .u-max-width-1\/1, .u-max-width-2-of-2, .u-max-width-2\/2, .u-max-width-3-of-3, .u-max-width-3\/3, .u-max-width-4-of-4, .u-max-width-4\/4, .u-max-width-5-of-5, .u-max-width-5\/5, .u-max-width-6-of-6, .u-max-width-6\/6, .u-max-width-7-of-7, .u-max-width-7\/7, .u-max-width-8-of-8, .u-max-width-8\/8, .u-max-width-9-of-9, .u-max-width-9\/9, .u-max-width-10-of-10, .u-max-width-10\/10, .u-max-width-11-of-11, .u-max-width-11\/11, .u-max-width-12-of-12, .u-max-width-12\/12 {
  max-width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-1\@large, .u-max-width-1\/1\@large, .u-max-width-2-of-2\@large, .u-max-width-2\/2\@large, .u-max-width-3-of-3\@large, .u-max-width-3\/3\@large, .u-max-width-4-of-4\@large, .u-max-width-4\/4\@large, .u-max-width-5-of-5\@large, .u-max-width-5\/5\@large, .u-max-width-6-of-6\@large, .u-max-width-6\/6\@large, .u-max-width-7-of-7\@large, .u-max-width-7\/7\@large, .u-max-width-8-of-8\@large, .u-max-width-8\/8\@large, .u-max-width-9-of-9\@large, .u-max-width-9\/9\@large, .u-max-width-10-of-10\@large, .u-max-width-10\/10\@large, .u-max-width-11-of-11\@large, .u-max-width-11\/11\@large, .u-max-width-12-of-12\@large, .u-max-width-12\/12\@large {
      max-width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-1\@small, .u-max-width-1\/1\@small, .u-max-width-2-of-2\@small, .u-max-width-2\/2\@small, .u-max-width-3-of-3\@small, .u-max-width-3\/3\@small, .u-max-width-4-of-4\@small, .u-max-width-4\/4\@small, .u-max-width-5-of-5\@small, .u-max-width-5\/5\@small, .u-max-width-6-of-6\@small, .u-max-width-6\/6\@small, .u-max-width-7-of-7\@small, .u-max-width-7\/7\@small, .u-max-width-8-of-8\@small, .u-max-width-8\/8\@small, .u-max-width-9-of-9\@small, .u-max-width-9\/9\@small, .u-max-width-10-of-10\@small, .u-max-width-10\/10\@small, .u-max-width-11-of-11\@small, .u-max-width-11\/11\@small, .u-max-width-12-of-12\@small, .u-max-width-12\/12\@small {
      max-width: 100%; } }

/*
---
name: Make Widths
category: 1. Tools > Mixin
---

Generate widths for selectors. See [Trumps > Widths](/#category-trumps > widths) for additional documentation and exmaples.

Default variable definitions as defined in `_01-tools_width-generator.scss`:
* `selector-name_percent`: "u-percent" - only used if `make-to-100` is `true`
* `selector-name_fraction`: "u-width";
* `selector-name_fraction-min`: "u-min-width";
* `selector-name_fraction-max`: "u-max-width";

Mixin Arguments:
* `max-num`: Default `12`. Iterates through generating numbers, provides maximum number to loop through.
* `output-name`: Default `$selector-name_fraction`. Class prefix for width selectors that are "percentage based" and outputs `width`.
* `include-max`: Default `true`. Outputs all generated numbers, including the maximum number.
* `output-name-max`: Default `selector-name_fraction-max`. Class prefix for width selectors that are "percentage based" and outputs `max-width`.
* `include-min`: Default `true`. Outputs all generated numbers, including the minimum number.
* `output-name-min`: Default `selector-name_fraction-min`. Class prefix for width selectors that are "percentage based" and outputs `min-width`.
* `make-to-100`: Default `false`. Outputs `width`, `min-width` and `max-width` with values of `1%`-`100%`
 
Usage:

```
.select-name {
	@include makeWidths();
}
```

*/
.u-min-width-1-of-3, .u-min-width-1\/3, .u-min-width-2-of-6, .u-min-width-2\/6, .u-min-width-3-of-9, .u-min-width-3\/9, .u-min-width-4-of-12, .u-min-width-4\/12 {
  min-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-3\@large, .u-min-width-1\/3\@large, .u-min-width-2-of-6\@large, .u-min-width-2\/6\@large, .u-min-width-3-of-9\@large, .u-min-width-3\/9\@large, .u-min-width-4-of-12\@large, .u-min-width-4\/12\@large {
      min-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-3\@small, .u-min-width-1\/3\@small, .u-min-width-2-of-6\@small, .u-min-width-2\/6\@small, .u-min-width-3-of-9\@small, .u-min-width-3\/9\@small, .u-min-width-4-of-12\@small, .u-min-width-4\/12\@small {
      min-width: 33.3333333333%; } }

.u-width-1-of-3, .u-width-1\/3, .u-width-2-of-6, .u-width-2\/6, .u-width-3-of-9, .u-width-3\/9, .u-width-4-of-12, .u-width-4\/12 {
  width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-3\@large, .u-width-1\/3\@large, .u-width-2-of-6\@large, .u-width-2\/6\@large, .u-width-3-of-9\@large, .u-width-3\/9\@large, .u-width-4-of-12\@large, .u-width-4\/12\@large {
      width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-3\@small, .u-width-1\/3\@small, .u-width-2-of-6\@small, .u-width-2\/6\@small, .u-width-3-of-9\@small, .u-width-3\/9\@small, .u-width-4-of-12\@small, .u-width-4\/12\@small {
      width: 33.3333333333%; } }

.u-max-width-1-of-3, .u-max-width-1\/3, .u-max-width-2-of-6, .u-max-width-2\/6, .u-max-width-3-of-9, .u-max-width-3\/9, .u-max-width-4-of-12, .u-max-width-4\/12 {
  max-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-3\@large, .u-max-width-1\/3\@large, .u-max-width-2-of-6\@large, .u-max-width-2\/6\@large, .u-max-width-3-of-9\@large, .u-max-width-3\/9\@large, .u-max-width-4-of-12\@large, .u-max-width-4\/12\@large {
      max-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-3\@small, .u-max-width-1\/3\@small, .u-max-width-2-of-6\@small, .u-max-width-2\/6\@small, .u-max-width-3-of-9\@small, .u-max-width-3\/9\@small, .u-max-width-4-of-12\@small, .u-max-width-4\/12\@small {
      max-width: 33.3333333333%; } }

.u-min-width-1-of-6, .u-min-width-1\/6, .u-min-width-2-of-12, .u-min-width-2\/12 {
  min-width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-6\@large, .u-min-width-1\/6\@large, .u-min-width-2-of-12\@large, .u-min-width-2\/12\@large {
      min-width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-6\@small, .u-min-width-1\/6\@small, .u-min-width-2-of-12\@small, .u-min-width-2\/12\@small {
      min-width: 16.6666666667%; } }

.u-width-1-of-6, .u-width-1\/6, .u-width-2-of-12, .u-width-2\/12 {
  width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-6\@large, .u-width-1\/6\@large, .u-width-2-of-12\@large, .u-width-2\/12\@large {
      width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-6\@small, .u-width-1\/6\@small, .u-width-2-of-12\@small, .u-width-2\/12\@small {
      width: 16.6666666667%; } }

.u-max-width-1-of-6, .u-max-width-1\/6, .u-max-width-2-of-12, .u-max-width-2\/12 {
  max-width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-6\@large, .u-max-width-1\/6\@large, .u-max-width-2-of-12\@large, .u-max-width-2\/12\@large {
      max-width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-6\@small, .u-max-width-1\/6\@small, .u-max-width-2-of-12\@small, .u-max-width-2\/12\@small {
      max-width: 16.6666666667%; } }

.u-min-width-1-of-7, .u-min-width-1\/7 {
  min-width: 14.2857142857%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-7\@large, .u-min-width-1\/7\@large {
      min-width: 14.2857142857%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-7\@small, .u-min-width-1\/7\@small {
      min-width: 14.2857142857%; } }

.u-width-1-of-7, .u-width-1\/7 {
  width: 14.2857142857%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-7\@large, .u-width-1\/7\@large {
      width: 14.2857142857%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-7\@small, .u-width-1\/7\@small {
      width: 14.2857142857%; } }

.u-max-width-1-of-7, .u-max-width-1\/7 {
  max-width: 14.2857142857%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-7\@large, .u-max-width-1\/7\@large {
      max-width: 14.2857142857%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-7\@small, .u-max-width-1\/7\@small {
      max-width: 14.2857142857%; } }

.u-min-width-1-of-8, .u-min-width-1\/8 {
  min-width: 12.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-8\@large, .u-min-width-1\/8\@large {
      min-width: 12.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-8\@small, .u-min-width-1\/8\@small {
      min-width: 12.5%; } }

.u-width-1-of-8, .u-width-1\/8 {
  width: 12.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-8\@large, .u-width-1\/8\@large {
      width: 12.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-8\@small, .u-width-1\/8\@small {
      width: 12.5%; } }

.u-max-width-1-of-8, .u-max-width-1\/8 {
  max-width: 12.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-8\@large, .u-max-width-1\/8\@large {
      max-width: 12.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-8\@small, .u-max-width-1\/8\@small {
      max-width: 12.5%; } }

.u-min-width-1-of-9, .u-min-width-1\/9 {
  min-width: 11.1111111111%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-9\@large, .u-min-width-1\/9\@large {
      min-width: 11.1111111111%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-9\@small, .u-min-width-1\/9\@small {
      min-width: 11.1111111111%; } }

.u-width-1-of-9, .u-width-1\/9 {
  width: 11.1111111111%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-9\@large, .u-width-1\/9\@large {
      width: 11.1111111111%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-9\@small, .u-width-1\/9\@small {
      width: 11.1111111111%; } }

.u-max-width-1-of-9, .u-max-width-1\/9 {
  max-width: 11.1111111111%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-9\@large, .u-max-width-1\/9\@large {
      max-width: 11.1111111111%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-9\@small, .u-max-width-1\/9\@small {
      max-width: 11.1111111111%; } }

.u-min-width-1-of-11, .u-min-width-1\/11 {
  min-width: 9.0909090909%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-11\@large, .u-min-width-1\/11\@large {
      min-width: 9.0909090909%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-11\@small, .u-min-width-1\/11\@small {
      min-width: 9.0909090909%; } }

.u-width-1-of-11, .u-width-1\/11 {
  width: 9.0909090909%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-11\@large, .u-width-1\/11\@large {
      width: 9.0909090909%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-11\@small, .u-width-1\/11\@small {
      width: 9.0909090909%; } }

.u-max-width-1-of-11, .u-max-width-1\/11 {
  max-width: 9.0909090909%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-11\@large, .u-max-width-1\/11\@large {
      max-width: 9.0909090909%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-11\@small, .u-max-width-1\/11\@small {
      max-width: 9.0909090909%; } }

.u-min-width-1-of-12, .u-min-width-1\/12 {
  min-width: 8.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-12\@large, .u-min-width-1\/12\@large {
      min-width: 8.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-12\@small, .u-min-width-1\/12\@small {
      min-width: 8.3333333333%; } }

.u-width-1-of-12, .u-width-1\/12 {
  width: 8.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-12\@large, .u-width-1\/12\@large {
      width: 8.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-12\@small, .u-width-1\/12\@small {
      width: 8.3333333333%; } }

.u-max-width-1-of-12, .u-max-width-1\/12 {
  max-width: 8.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-12\@large, .u-max-width-1\/12\@large {
      max-width: 8.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-12\@small, .u-max-width-1\/12\@small {
      max-width: 8.3333333333%; } }

.u-min-width-2-of-3, .u-min-width-2\/3, .u-min-width-4-of-6, .u-min-width-4\/6, .u-min-width-6-of-9, .u-min-width-6\/9, .u-min-width-8-of-12, .u-min-width-8\/12 {
  min-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-3\@large, .u-min-width-2\/3\@large, .u-min-width-4-of-6\@large, .u-min-width-4\/6\@large, .u-min-width-6-of-9\@large, .u-min-width-6\/9\@large, .u-min-width-8-of-12\@large, .u-min-width-8\/12\@large {
      min-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-3\@small, .u-min-width-2\/3\@small, .u-min-width-4-of-6\@small, .u-min-width-4\/6\@small, .u-min-width-6-of-9\@small, .u-min-width-6\/9\@small, .u-min-width-8-of-12\@small, .u-min-width-8\/12\@small {
      min-width: 66.6666666667%; } }

.u-width-2-of-3, .u-width-2\/3, .u-width-4-of-6, .u-width-4\/6, .u-width-6-of-9, .u-width-6\/9, .u-width-8-of-12, .u-width-8\/12 {
  width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-3\@large, .u-width-2\/3\@large, .u-width-4-of-6\@large, .u-width-4\/6\@large, .u-width-6-of-9\@large, .u-width-6\/9\@large, .u-width-8-of-12\@large, .u-width-8\/12\@large {
      width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-3\@small, .u-width-2\/3\@small, .u-width-4-of-6\@small, .u-width-4\/6\@small, .u-width-6-of-9\@small, .u-width-6\/9\@small, .u-width-8-of-12\@small, .u-width-8\/12\@small {
      width: 66.6666666667%; } }

.u-max-width-2-of-3, .u-max-width-2\/3, .u-max-width-4-of-6, .u-max-width-4\/6, .u-max-width-6-of-9, .u-max-width-6\/9, .u-max-width-8-of-12, .u-max-width-8\/12 {
  max-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-3\@large, .u-max-width-2\/3\@large, .u-max-width-4-of-6\@large, .u-max-width-4\/6\@large, .u-max-width-6-of-9\@large, .u-max-width-6\/9\@large, .u-max-width-8-of-12\@large, .u-max-width-8\/12\@large {
      max-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-3\@small, .u-max-width-2\/3\@small, .u-max-width-4-of-6\@small, .u-max-width-4\/6\@small, .u-max-width-6-of-9\@small, .u-max-width-6\/9\@small, .u-max-width-8-of-12\@small, .u-max-width-8\/12\@small {
      max-width: 66.6666666667%; } }

.u-min-width-1-of-3, .u-min-width-1\/3, .u-min-width-2-of-6, .u-min-width-2\/6, .u-min-width-3-of-9, .u-min-width-3\/9, .u-min-width-4-of-12, .u-min-width-4\/12 {
  min-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-3\@large, .u-min-width-1\/3\@large, .u-min-width-2-of-6\@large, .u-min-width-2\/6\@large, .u-min-width-3-of-9\@large, .u-min-width-3\/9\@large, .u-min-width-4-of-12\@large, .u-min-width-4\/12\@large {
      min-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-3\@small, .u-min-width-1\/3\@small, .u-min-width-2-of-6\@small, .u-min-width-2\/6\@small, .u-min-width-3-of-9\@small, .u-min-width-3\/9\@small, .u-min-width-4-of-12\@small, .u-min-width-4\/12\@small {
      min-width: 33.3333333333%; } }

.u-width-1-of-3, .u-width-1\/3, .u-width-2-of-6, .u-width-2\/6, .u-width-3-of-9, .u-width-3\/9, .u-width-4-of-12, .u-width-4\/12 {
  width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-3\@large, .u-width-1\/3\@large, .u-width-2-of-6\@large, .u-width-2\/6\@large, .u-width-3-of-9\@large, .u-width-3\/9\@large, .u-width-4-of-12\@large, .u-width-4\/12\@large {
      width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-3\@small, .u-width-1\/3\@small, .u-width-2-of-6\@small, .u-width-2\/6\@small, .u-width-3-of-9\@small, .u-width-3\/9\@small, .u-width-4-of-12\@small, .u-width-4\/12\@small {
      width: 33.3333333333%; } }

.u-max-width-1-of-3, .u-max-width-1\/3, .u-max-width-2-of-6, .u-max-width-2\/6, .u-max-width-3-of-9, .u-max-width-3\/9, .u-max-width-4-of-12, .u-max-width-4\/12 {
  max-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-3\@large, .u-max-width-1\/3\@large, .u-max-width-2-of-6\@large, .u-max-width-2\/6\@large, .u-max-width-3-of-9\@large, .u-max-width-3\/9\@large, .u-max-width-4-of-12\@large, .u-max-width-4\/12\@large {
      max-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-3\@small, .u-max-width-1\/3\@small, .u-max-width-2-of-6\@small, .u-max-width-2\/6\@small, .u-max-width-3-of-9\@small, .u-max-width-3\/9\@small, .u-max-width-4-of-12\@small, .u-max-width-4\/12\@small {
      max-width: 33.3333333333%; } }

.u-min-width-2-of-7, .u-min-width-2\/7 {
  min-width: 28.5714285714%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-7\@large, .u-min-width-2\/7\@large {
      min-width: 28.5714285714%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-7\@small, .u-min-width-2\/7\@small {
      min-width: 28.5714285714%; } }

.u-width-2-of-7, .u-width-2\/7 {
  width: 28.5714285714%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-7\@large, .u-width-2\/7\@large {
      width: 28.5714285714%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-7\@small, .u-width-2\/7\@small {
      width: 28.5714285714%; } }

.u-max-width-2-of-7, .u-max-width-2\/7 {
  max-width: 28.5714285714%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-7\@large, .u-max-width-2\/7\@large {
      max-width: 28.5714285714%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-7\@small, .u-max-width-2\/7\@small {
      max-width: 28.5714285714%; } }

.u-min-width-2-of-9, .u-min-width-2\/9 {
  min-width: 22.2222222222%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-9\@large, .u-min-width-2\/9\@large {
      min-width: 22.2222222222%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-9\@small, .u-min-width-2\/9\@small {
      min-width: 22.2222222222%; } }

.u-width-2-of-9, .u-width-2\/9 {
  width: 22.2222222222%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-9\@large, .u-width-2\/9\@large {
      width: 22.2222222222%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-9\@small, .u-width-2\/9\@small {
      width: 22.2222222222%; } }

.u-max-width-2-of-9, .u-max-width-2\/9 {
  max-width: 22.2222222222%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-9\@large, .u-max-width-2\/9\@large {
      max-width: 22.2222222222%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-9\@small, .u-max-width-2\/9\@small {
      max-width: 22.2222222222%; } }

.u-min-width-2-of-11, .u-min-width-2\/11 {
  min-width: 18.1818181818%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-11\@large, .u-min-width-2\/11\@large {
      min-width: 18.1818181818%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-11\@small, .u-min-width-2\/11\@small {
      min-width: 18.1818181818%; } }

.u-width-2-of-11, .u-width-2\/11 {
  width: 18.1818181818%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-11\@large, .u-width-2\/11\@large {
      width: 18.1818181818%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-11\@small, .u-width-2\/11\@small {
      width: 18.1818181818%; } }

.u-max-width-2-of-11, .u-max-width-2\/11 {
  max-width: 18.1818181818%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-11\@large, .u-max-width-2\/11\@large {
      max-width: 18.1818181818%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-11\@small, .u-max-width-2\/11\@small {
      max-width: 18.1818181818%; } }

.u-min-width-1-of-6, .u-min-width-1\/6, .u-min-width-2-of-12, .u-min-width-2\/12 {
  min-width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-6\@large, .u-min-width-1\/6\@large, .u-min-width-2-of-12\@large, .u-min-width-2\/12\@large {
      min-width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-6\@small, .u-min-width-1\/6\@small, .u-min-width-2-of-12\@small, .u-min-width-2\/12\@small {
      min-width: 16.6666666667%; } }

.u-width-1-of-6, .u-width-1\/6, .u-width-2-of-12, .u-width-2\/12 {
  width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-6\@large, .u-width-1\/6\@large, .u-width-2-of-12\@large, .u-width-2\/12\@large {
      width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-6\@small, .u-width-1\/6\@small, .u-width-2-of-12\@small, .u-width-2\/12\@small {
      width: 16.6666666667%; } }

.u-max-width-1-of-6, .u-max-width-1\/6, .u-max-width-2-of-12, .u-max-width-2\/12 {
  max-width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-6\@large, .u-max-width-1\/6\@large, .u-max-width-2-of-12\@large, .u-max-width-2\/12\@large {
      max-width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-6\@small, .u-max-width-1\/6\@small, .u-max-width-2-of-12\@small, .u-max-width-2\/12\@small {
      max-width: 16.6666666667%; } }

.u-min-width-3-of-7, .u-min-width-3\/7 {
  min-width: 42.8571428571%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-7\@large, .u-min-width-3\/7\@large {
      min-width: 42.8571428571%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-7\@small, .u-min-width-3\/7\@small {
      min-width: 42.8571428571%; } }

.u-width-3-of-7, .u-width-3\/7 {
  width: 42.8571428571%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-7\@large, .u-width-3\/7\@large {
      width: 42.8571428571%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-7\@small, .u-width-3\/7\@small {
      width: 42.8571428571%; } }

.u-max-width-3-of-7, .u-max-width-3\/7 {
  max-width: 42.8571428571%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-7\@large, .u-max-width-3\/7\@large {
      max-width: 42.8571428571%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-7\@small, .u-max-width-3\/7\@small {
      max-width: 42.8571428571%; } }

.u-min-width-3-of-8, .u-min-width-3\/8 {
  min-width: 37.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-8\@large, .u-min-width-3\/8\@large {
      min-width: 37.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-8\@small, .u-min-width-3\/8\@small {
      min-width: 37.5%; } }

.u-width-3-of-8, .u-width-3\/8 {
  width: 37.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-8\@large, .u-width-3\/8\@large {
      width: 37.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-8\@small, .u-width-3\/8\@small {
      width: 37.5%; } }

.u-max-width-3-of-8, .u-max-width-3\/8 {
  max-width: 37.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-8\@large, .u-max-width-3\/8\@large {
      max-width: 37.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-8\@small, .u-max-width-3\/8\@small {
      max-width: 37.5%; } }

.u-min-width-1-of-3, .u-min-width-1\/3, .u-min-width-2-of-6, .u-min-width-2\/6, .u-min-width-3-of-9, .u-min-width-3\/9, .u-min-width-4-of-12, .u-min-width-4\/12 {
  min-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-3\@large, .u-min-width-1\/3\@large, .u-min-width-2-of-6\@large, .u-min-width-2\/6\@large, .u-min-width-3-of-9\@large, .u-min-width-3\/9\@large, .u-min-width-4-of-12\@large, .u-min-width-4\/12\@large {
      min-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-3\@small, .u-min-width-1\/3\@small, .u-min-width-2-of-6\@small, .u-min-width-2\/6\@small, .u-min-width-3-of-9\@small, .u-min-width-3\/9\@small, .u-min-width-4-of-12\@small, .u-min-width-4\/12\@small {
      min-width: 33.3333333333%; } }

.u-width-1-of-3, .u-width-1\/3, .u-width-2-of-6, .u-width-2\/6, .u-width-3-of-9, .u-width-3\/9, .u-width-4-of-12, .u-width-4\/12 {
  width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-3\@large, .u-width-1\/3\@large, .u-width-2-of-6\@large, .u-width-2\/6\@large, .u-width-3-of-9\@large, .u-width-3\/9\@large, .u-width-4-of-12\@large, .u-width-4\/12\@large {
      width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-3\@small, .u-width-1\/3\@small, .u-width-2-of-6\@small, .u-width-2\/6\@small, .u-width-3-of-9\@small, .u-width-3\/9\@small, .u-width-4-of-12\@small, .u-width-4\/12\@small {
      width: 33.3333333333%; } }

.u-max-width-1-of-3, .u-max-width-1\/3, .u-max-width-2-of-6, .u-max-width-2\/6, .u-max-width-3-of-9, .u-max-width-3\/9, .u-max-width-4-of-12, .u-max-width-4\/12 {
  max-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-3\@large, .u-max-width-1\/3\@large, .u-max-width-2-of-6\@large, .u-max-width-2\/6\@large, .u-max-width-3-of-9\@large, .u-max-width-3\/9\@large, .u-max-width-4-of-12\@large, .u-max-width-4\/12\@large {
      max-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-3\@small, .u-max-width-1\/3\@small, .u-max-width-2-of-6\@small, .u-max-width-2\/6\@small, .u-max-width-3-of-9\@small, .u-max-width-3\/9\@small, .u-max-width-4-of-12\@small, .u-max-width-4\/12\@small {
      max-width: 33.3333333333%; } }

.u-min-width-3-of-11, .u-min-width-3\/11 {
  min-width: 27.2727272727%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-3-of-11\@large, .u-min-width-3\/11\@large {
      min-width: 27.2727272727%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-3-of-11\@small, .u-min-width-3\/11\@small {
      min-width: 27.2727272727%; } }

.u-width-3-of-11, .u-width-3\/11 {
  width: 27.2727272727%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3-of-11\@large, .u-width-3\/11\@large {
      width: 27.2727272727%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3-of-11\@small, .u-width-3\/11\@small {
      width: 27.2727272727%; } }

.u-max-width-3-of-11, .u-max-width-3\/11 {
  max-width: 27.2727272727%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-3-of-11\@large, .u-max-width-3\/11\@large {
      max-width: 27.2727272727%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-3-of-11\@small, .u-max-width-3\/11\@small {
      max-width: 27.2727272727%; } }

.u-min-width-2-of-3, .u-min-width-2\/3, .u-min-width-4-of-6, .u-min-width-4\/6, .u-min-width-6-of-9, .u-min-width-6\/9, .u-min-width-8-of-12, .u-min-width-8\/12 {
  min-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-3\@large, .u-min-width-2\/3\@large, .u-min-width-4-of-6\@large, .u-min-width-4\/6\@large, .u-min-width-6-of-9\@large, .u-min-width-6\/9\@large, .u-min-width-8-of-12\@large, .u-min-width-8\/12\@large {
      min-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-3\@small, .u-min-width-2\/3\@small, .u-min-width-4-of-6\@small, .u-min-width-4\/6\@small, .u-min-width-6-of-9\@small, .u-min-width-6\/9\@small, .u-min-width-8-of-12\@small, .u-min-width-8\/12\@small {
      min-width: 66.6666666667%; } }

.u-width-2-of-3, .u-width-2\/3, .u-width-4-of-6, .u-width-4\/6, .u-width-6-of-9, .u-width-6\/9, .u-width-8-of-12, .u-width-8\/12 {
  width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-3\@large, .u-width-2\/3\@large, .u-width-4-of-6\@large, .u-width-4\/6\@large, .u-width-6-of-9\@large, .u-width-6\/9\@large, .u-width-8-of-12\@large, .u-width-8\/12\@large {
      width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-3\@small, .u-width-2\/3\@small, .u-width-4-of-6\@small, .u-width-4\/6\@small, .u-width-6-of-9\@small, .u-width-6\/9\@small, .u-width-8-of-12\@small, .u-width-8\/12\@small {
      width: 66.6666666667%; } }

.u-max-width-2-of-3, .u-max-width-2\/3, .u-max-width-4-of-6, .u-max-width-4\/6, .u-max-width-6-of-9, .u-max-width-6\/9, .u-max-width-8-of-12, .u-max-width-8\/12 {
  max-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-3\@large, .u-max-width-2\/3\@large, .u-max-width-4-of-6\@large, .u-max-width-4\/6\@large, .u-max-width-6-of-9\@large, .u-max-width-6\/9\@large, .u-max-width-8-of-12\@large, .u-max-width-8\/12\@large {
      max-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-3\@small, .u-max-width-2\/3\@small, .u-max-width-4-of-6\@small, .u-max-width-4\/6\@small, .u-max-width-6-of-9\@small, .u-max-width-6\/9\@small, .u-max-width-8-of-12\@small, .u-max-width-8\/12\@small {
      max-width: 66.6666666667%; } }

.u-min-width-4-of-7, .u-min-width-4\/7 {
  min-width: 57.1428571429%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-7\@large, .u-min-width-4\/7\@large {
      min-width: 57.1428571429%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-7\@small, .u-min-width-4\/7\@small {
      min-width: 57.1428571429%; } }

.u-width-4-of-7, .u-width-4\/7 {
  width: 57.1428571429%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-7\@large, .u-width-4\/7\@large {
      width: 57.1428571429%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-7\@small, .u-width-4\/7\@small {
      width: 57.1428571429%; } }

.u-max-width-4-of-7, .u-max-width-4\/7 {
  max-width: 57.1428571429%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-7\@large, .u-max-width-4\/7\@large {
      max-width: 57.1428571429%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-7\@small, .u-max-width-4\/7\@small {
      max-width: 57.1428571429%; } }

.u-min-width-4-of-9, .u-min-width-4\/9 {
  min-width: 44.4444444444%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-9\@large, .u-min-width-4\/9\@large {
      min-width: 44.4444444444%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-9\@small, .u-min-width-4\/9\@small {
      min-width: 44.4444444444%; } }

.u-width-4-of-9, .u-width-4\/9 {
  width: 44.4444444444%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-9\@large, .u-width-4\/9\@large {
      width: 44.4444444444%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-9\@small, .u-width-4\/9\@small {
      width: 44.4444444444%; } }

.u-max-width-4-of-9, .u-max-width-4\/9 {
  max-width: 44.4444444444%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-9\@large, .u-max-width-4\/9\@large {
      max-width: 44.4444444444%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-9\@small, .u-max-width-4\/9\@small {
      max-width: 44.4444444444%; } }

.u-min-width-4-of-11, .u-min-width-4\/11 {
  min-width: 36.3636363636%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-4-of-11\@large, .u-min-width-4\/11\@large {
      min-width: 36.3636363636%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-4-of-11\@small, .u-min-width-4\/11\@small {
      min-width: 36.3636363636%; } }

.u-width-4-of-11, .u-width-4\/11 {
  width: 36.3636363636%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4-of-11\@large, .u-width-4\/11\@large {
      width: 36.3636363636%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4-of-11\@small, .u-width-4\/11\@small {
      width: 36.3636363636%; } }

.u-max-width-4-of-11, .u-max-width-4\/11 {
  max-width: 36.3636363636%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-4-of-11\@large, .u-max-width-4\/11\@large {
      max-width: 36.3636363636%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-4-of-11\@small, .u-max-width-4\/11\@small {
      max-width: 36.3636363636%; } }

.u-min-width-1-of-3, .u-min-width-1\/3, .u-min-width-2-of-6, .u-min-width-2\/6, .u-min-width-3-of-9, .u-min-width-3\/9, .u-min-width-4-of-12, .u-min-width-4\/12 {
  min-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-1-of-3\@large, .u-min-width-1\/3\@large, .u-min-width-2-of-6\@large, .u-min-width-2\/6\@large, .u-min-width-3-of-9\@large, .u-min-width-3\/9\@large, .u-min-width-4-of-12\@large, .u-min-width-4\/12\@large {
      min-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-1-of-3\@small, .u-min-width-1\/3\@small, .u-min-width-2-of-6\@small, .u-min-width-2\/6\@small, .u-min-width-3-of-9\@small, .u-min-width-3\/9\@small, .u-min-width-4-of-12\@small, .u-min-width-4\/12\@small {
      min-width: 33.3333333333%; } }

.u-width-1-of-3, .u-width-1\/3, .u-width-2-of-6, .u-width-2\/6, .u-width-3-of-9, .u-width-3\/9, .u-width-4-of-12, .u-width-4\/12 {
  width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1-of-3\@large, .u-width-1\/3\@large, .u-width-2-of-6\@large, .u-width-2\/6\@large, .u-width-3-of-9\@large, .u-width-3\/9\@large, .u-width-4-of-12\@large, .u-width-4\/12\@large {
      width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1-of-3\@small, .u-width-1\/3\@small, .u-width-2-of-6\@small, .u-width-2\/6\@small, .u-width-3-of-9\@small, .u-width-3\/9\@small, .u-width-4-of-12\@small, .u-width-4\/12\@small {
      width: 33.3333333333%; } }

.u-max-width-1-of-3, .u-max-width-1\/3, .u-max-width-2-of-6, .u-max-width-2\/6, .u-max-width-3-of-9, .u-max-width-3\/9, .u-max-width-4-of-12, .u-max-width-4\/12 {
  max-width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-1-of-3\@large, .u-max-width-1\/3\@large, .u-max-width-2-of-6\@large, .u-max-width-2\/6\@large, .u-max-width-3-of-9\@large, .u-max-width-3\/9\@large, .u-max-width-4-of-12\@large, .u-max-width-4\/12\@large {
      max-width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-1-of-3\@small, .u-max-width-1\/3\@small, .u-max-width-2-of-6\@small, .u-max-width-2\/6\@small, .u-max-width-3-of-9\@small, .u-max-width-3\/9\@small, .u-max-width-4-of-12\@small, .u-max-width-4\/12\@small {
      max-width: 33.3333333333%; } }

.u-min-width-5-of-6, .u-min-width-5\/6, .u-min-width-10-of-12, .u-min-width-10\/12 {
  min-width: 83.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-6\@large, .u-min-width-5\/6\@large, .u-min-width-10-of-12\@large, .u-min-width-10\/12\@large {
      min-width: 83.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-6\@small, .u-min-width-5\/6\@small, .u-min-width-10-of-12\@small, .u-min-width-10\/12\@small {
      min-width: 83.3333333333%; } }

.u-width-5-of-6, .u-width-5\/6, .u-width-10-of-12, .u-width-10\/12 {
  width: 83.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-6\@large, .u-width-5\/6\@large, .u-width-10-of-12\@large, .u-width-10\/12\@large {
      width: 83.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-6\@small, .u-width-5\/6\@small, .u-width-10-of-12\@small, .u-width-10\/12\@small {
      width: 83.3333333333%; } }

.u-max-width-5-of-6, .u-max-width-5\/6, .u-max-width-10-of-12, .u-max-width-10\/12 {
  max-width: 83.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-6\@large, .u-max-width-5\/6\@large, .u-max-width-10-of-12\@large, .u-max-width-10\/12\@large {
      max-width: 83.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-6\@small, .u-max-width-5\/6\@small, .u-max-width-10-of-12\@small, .u-max-width-10\/12\@small {
      max-width: 83.3333333333%; } }

.u-min-width-5-of-7, .u-min-width-5\/7 {
  min-width: 71.4285714286%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-7\@large, .u-min-width-5\/7\@large {
      min-width: 71.4285714286%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-7\@small, .u-min-width-5\/7\@small {
      min-width: 71.4285714286%; } }

.u-width-5-of-7, .u-width-5\/7 {
  width: 71.4285714286%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-7\@large, .u-width-5\/7\@large {
      width: 71.4285714286%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-7\@small, .u-width-5\/7\@small {
      width: 71.4285714286%; } }

.u-max-width-5-of-7, .u-max-width-5\/7 {
  max-width: 71.4285714286%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-7\@large, .u-max-width-5\/7\@large {
      max-width: 71.4285714286%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-7\@small, .u-max-width-5\/7\@small {
      max-width: 71.4285714286%; } }

.u-min-width-5-of-8, .u-min-width-5\/8 {
  min-width: 62.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-8\@large, .u-min-width-5\/8\@large {
      min-width: 62.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-8\@small, .u-min-width-5\/8\@small {
      min-width: 62.5%; } }

.u-width-5-of-8, .u-width-5\/8 {
  width: 62.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-8\@large, .u-width-5\/8\@large {
      width: 62.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-8\@small, .u-width-5\/8\@small {
      width: 62.5%; } }

.u-max-width-5-of-8, .u-max-width-5\/8 {
  max-width: 62.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-8\@large, .u-max-width-5\/8\@large {
      max-width: 62.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-8\@small, .u-max-width-5\/8\@small {
      max-width: 62.5%; } }

.u-min-width-5-of-9, .u-min-width-5\/9 {
  min-width: 55.5555555556%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-9\@large, .u-min-width-5\/9\@large {
      min-width: 55.5555555556%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-9\@small, .u-min-width-5\/9\@small {
      min-width: 55.5555555556%; } }

.u-width-5-of-9, .u-width-5\/9 {
  width: 55.5555555556%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-9\@large, .u-width-5\/9\@large {
      width: 55.5555555556%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-9\@small, .u-width-5\/9\@small {
      width: 55.5555555556%; } }

.u-max-width-5-of-9, .u-max-width-5\/9 {
  max-width: 55.5555555556%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-9\@large, .u-max-width-5\/9\@large {
      max-width: 55.5555555556%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-9\@small, .u-max-width-5\/9\@small {
      max-width: 55.5555555556%; } }

.u-min-width-5-of-11, .u-min-width-5\/11 {
  min-width: 45.4545454545%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-11\@large, .u-min-width-5\/11\@large {
      min-width: 45.4545454545%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-11\@small, .u-min-width-5\/11\@small {
      min-width: 45.4545454545%; } }

.u-width-5-of-11, .u-width-5\/11 {
  width: 45.4545454545%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-11\@large, .u-width-5\/11\@large {
      width: 45.4545454545%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-11\@small, .u-width-5\/11\@small {
      width: 45.4545454545%; } }

.u-max-width-5-of-11, .u-max-width-5\/11 {
  max-width: 45.4545454545%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-11\@large, .u-max-width-5\/11\@large {
      max-width: 45.4545454545%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-11\@small, .u-max-width-5\/11\@small {
      max-width: 45.4545454545%; } }

.u-min-width-5-of-12, .u-min-width-5\/12 {
  min-width: 41.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-12\@large, .u-min-width-5\/12\@large {
      min-width: 41.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-12\@small, .u-min-width-5\/12\@small {
      min-width: 41.6666666667%; } }

.u-width-5-of-12, .u-width-5\/12 {
  width: 41.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-12\@large, .u-width-5\/12\@large {
      width: 41.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-12\@small, .u-width-5\/12\@small {
      width: 41.6666666667%; } }

.u-max-width-5-of-12, .u-max-width-5\/12 {
  max-width: 41.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-12\@large, .u-max-width-5\/12\@large {
      max-width: 41.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-12\@small, .u-max-width-5\/12\@small {
      max-width: 41.6666666667%; } }

.u-min-width-6-of-7, .u-min-width-6\/7 {
  min-width: 85.7142857143%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-6-of-7\@large, .u-min-width-6\/7\@large {
      min-width: 85.7142857143%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-6-of-7\@small, .u-min-width-6\/7\@small {
      min-width: 85.7142857143%; } }

.u-width-6-of-7, .u-width-6\/7 {
  width: 85.7142857143%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-6-of-7\@large, .u-width-6\/7\@large {
      width: 85.7142857143%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-6-of-7\@small, .u-width-6\/7\@small {
      width: 85.7142857143%; } }

.u-max-width-6-of-7, .u-max-width-6\/7 {
  max-width: 85.7142857143%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-6-of-7\@large, .u-max-width-6\/7\@large {
      max-width: 85.7142857143%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-6-of-7\@small, .u-max-width-6\/7\@small {
      max-width: 85.7142857143%; } }

.u-min-width-2-of-3, .u-min-width-2\/3, .u-min-width-4-of-6, .u-min-width-4\/6, .u-min-width-6-of-9, .u-min-width-6\/9, .u-min-width-8-of-12, .u-min-width-8\/12 {
  min-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-3\@large, .u-min-width-2\/3\@large, .u-min-width-4-of-6\@large, .u-min-width-4\/6\@large, .u-min-width-6-of-9\@large, .u-min-width-6\/9\@large, .u-min-width-8-of-12\@large, .u-min-width-8\/12\@large {
      min-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-3\@small, .u-min-width-2\/3\@small, .u-min-width-4-of-6\@small, .u-min-width-4\/6\@small, .u-min-width-6-of-9\@small, .u-min-width-6\/9\@small, .u-min-width-8-of-12\@small, .u-min-width-8\/12\@small {
      min-width: 66.6666666667%; } }

.u-width-2-of-3, .u-width-2\/3, .u-width-4-of-6, .u-width-4\/6, .u-width-6-of-9, .u-width-6\/9, .u-width-8-of-12, .u-width-8\/12 {
  width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-3\@large, .u-width-2\/3\@large, .u-width-4-of-6\@large, .u-width-4\/6\@large, .u-width-6-of-9\@large, .u-width-6\/9\@large, .u-width-8-of-12\@large, .u-width-8\/12\@large {
      width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-3\@small, .u-width-2\/3\@small, .u-width-4-of-6\@small, .u-width-4\/6\@small, .u-width-6-of-9\@small, .u-width-6\/9\@small, .u-width-8-of-12\@small, .u-width-8\/12\@small {
      width: 66.6666666667%; } }

.u-max-width-2-of-3, .u-max-width-2\/3, .u-max-width-4-of-6, .u-max-width-4\/6, .u-max-width-6-of-9, .u-max-width-6\/9, .u-max-width-8-of-12, .u-max-width-8\/12 {
  max-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-3\@large, .u-max-width-2\/3\@large, .u-max-width-4-of-6\@large, .u-max-width-4\/6\@large, .u-max-width-6-of-9\@large, .u-max-width-6\/9\@large, .u-max-width-8-of-12\@large, .u-max-width-8\/12\@large {
      max-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-3\@small, .u-max-width-2\/3\@small, .u-max-width-4-of-6\@small, .u-max-width-4\/6\@small, .u-max-width-6-of-9\@small, .u-max-width-6\/9\@small, .u-max-width-8-of-12\@small, .u-max-width-8\/12\@small {
      max-width: 66.6666666667%; } }

.u-min-width-6-of-11, .u-min-width-6\/11 {
  min-width: 54.5454545455%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-6-of-11\@large, .u-min-width-6\/11\@large {
      min-width: 54.5454545455%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-6-of-11\@small, .u-min-width-6\/11\@small {
      min-width: 54.5454545455%; } }

.u-width-6-of-11, .u-width-6\/11 {
  width: 54.5454545455%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-6-of-11\@large, .u-width-6\/11\@large {
      width: 54.5454545455%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-6-of-11\@small, .u-width-6\/11\@small {
      width: 54.5454545455%; } }

.u-max-width-6-of-11, .u-max-width-6\/11 {
  max-width: 54.5454545455%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-6-of-11\@large, .u-max-width-6\/11\@large {
      max-width: 54.5454545455%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-6-of-11\@small, .u-max-width-6\/11\@small {
      max-width: 54.5454545455%; } }

.u-min-width-7-of-8, .u-min-width-7\/8 {
  min-width: 87.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-8\@large, .u-min-width-7\/8\@large {
      min-width: 87.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-8\@small, .u-min-width-7\/8\@small {
      min-width: 87.5%; } }

.u-width-7-of-8, .u-width-7\/8 {
  width: 87.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-8\@large, .u-width-7\/8\@large {
      width: 87.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-8\@small, .u-width-7\/8\@small {
      width: 87.5%; } }

.u-max-width-7-of-8, .u-max-width-7\/8 {
  max-width: 87.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-8\@large, .u-max-width-7\/8\@large {
      max-width: 87.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-8\@small, .u-max-width-7\/8\@small {
      max-width: 87.5%; } }

.u-min-width-7-of-9, .u-min-width-7\/9 {
  min-width: 77.7777777778%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-9\@large, .u-min-width-7\/9\@large {
      min-width: 77.7777777778%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-9\@small, .u-min-width-7\/9\@small {
      min-width: 77.7777777778%; } }

.u-width-7-of-9, .u-width-7\/9 {
  width: 77.7777777778%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-9\@large, .u-width-7\/9\@large {
      width: 77.7777777778%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-9\@small, .u-width-7\/9\@small {
      width: 77.7777777778%; } }

.u-max-width-7-of-9, .u-max-width-7\/9 {
  max-width: 77.7777777778%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-9\@large, .u-max-width-7\/9\@large {
      max-width: 77.7777777778%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-9\@small, .u-max-width-7\/9\@small {
      max-width: 77.7777777778%; } }

.u-min-width-7-of-11, .u-min-width-7\/11 {
  min-width: 63.6363636364%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-11\@large, .u-min-width-7\/11\@large {
      min-width: 63.6363636364%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-11\@small, .u-min-width-7\/11\@small {
      min-width: 63.6363636364%; } }

.u-width-7-of-11, .u-width-7\/11 {
  width: 63.6363636364%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-11\@large, .u-width-7\/11\@large {
      width: 63.6363636364%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-11\@small, .u-width-7\/11\@small {
      width: 63.6363636364%; } }

.u-max-width-7-of-11, .u-max-width-7\/11 {
  max-width: 63.6363636364%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-11\@large, .u-max-width-7\/11\@large {
      max-width: 63.6363636364%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-11\@small, .u-max-width-7\/11\@small {
      max-width: 63.6363636364%; } }

.u-min-width-7-of-12, .u-min-width-7\/12 {
  min-width: 58.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-7-of-12\@large, .u-min-width-7\/12\@large {
      min-width: 58.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-7-of-12\@small, .u-min-width-7\/12\@small {
      min-width: 58.3333333333%; } }

.u-width-7-of-12, .u-width-7\/12 {
  width: 58.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-7-of-12\@large, .u-width-7\/12\@large {
      width: 58.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-7-of-12\@small, .u-width-7\/12\@small {
      width: 58.3333333333%; } }

.u-max-width-7-of-12, .u-max-width-7\/12 {
  max-width: 58.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-7-of-12\@large, .u-max-width-7\/12\@large {
      max-width: 58.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-7-of-12\@small, .u-max-width-7\/12\@small {
      max-width: 58.3333333333%; } }

.u-min-width-8-of-9, .u-min-width-8\/9 {
  min-width: 88.8888888889%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-8-of-9\@large, .u-min-width-8\/9\@large {
      min-width: 88.8888888889%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-8-of-9\@small, .u-min-width-8\/9\@small {
      min-width: 88.8888888889%; } }

.u-width-8-of-9, .u-width-8\/9 {
  width: 88.8888888889%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-8-of-9\@large, .u-width-8\/9\@large {
      width: 88.8888888889%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-8-of-9\@small, .u-width-8\/9\@small {
      width: 88.8888888889%; } }

.u-max-width-8-of-9, .u-max-width-8\/9 {
  max-width: 88.8888888889%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-8-of-9\@large, .u-max-width-8\/9\@large {
      max-width: 88.8888888889%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-8-of-9\@small, .u-max-width-8\/9\@small {
      max-width: 88.8888888889%; } }

.u-min-width-8-of-11, .u-min-width-8\/11 {
  min-width: 72.7272727273%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-8-of-11\@large, .u-min-width-8\/11\@large {
      min-width: 72.7272727273%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-8-of-11\@small, .u-min-width-8\/11\@small {
      min-width: 72.7272727273%; } }

.u-width-8-of-11, .u-width-8\/11 {
  width: 72.7272727273%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-8-of-11\@large, .u-width-8\/11\@large {
      width: 72.7272727273%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-8-of-11\@small, .u-width-8\/11\@small {
      width: 72.7272727273%; } }

.u-max-width-8-of-11, .u-max-width-8\/11 {
  max-width: 72.7272727273%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-8-of-11\@large, .u-max-width-8\/11\@large {
      max-width: 72.7272727273%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-8-of-11\@small, .u-max-width-8\/11\@small {
      max-width: 72.7272727273%; } }

.u-min-width-2-of-3, .u-min-width-2\/3, .u-min-width-4-of-6, .u-min-width-4\/6, .u-min-width-6-of-9, .u-min-width-6\/9, .u-min-width-8-of-12, .u-min-width-8\/12 {
  min-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-2-of-3\@large, .u-min-width-2\/3\@large, .u-min-width-4-of-6\@large, .u-min-width-4\/6\@large, .u-min-width-6-of-9\@large, .u-min-width-6\/9\@large, .u-min-width-8-of-12\@large, .u-min-width-8\/12\@large {
      min-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-2-of-3\@small, .u-min-width-2\/3\@small, .u-min-width-4-of-6\@small, .u-min-width-4\/6\@small, .u-min-width-6-of-9\@small, .u-min-width-6\/9\@small, .u-min-width-8-of-12\@small, .u-min-width-8\/12\@small {
      min-width: 66.6666666667%; } }

.u-width-2-of-3, .u-width-2\/3, .u-width-4-of-6, .u-width-4\/6, .u-width-6-of-9, .u-width-6\/9, .u-width-8-of-12, .u-width-8\/12 {
  width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2-of-3\@large, .u-width-2\/3\@large, .u-width-4-of-6\@large, .u-width-4\/6\@large, .u-width-6-of-9\@large, .u-width-6\/9\@large, .u-width-8-of-12\@large, .u-width-8\/12\@large {
      width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2-of-3\@small, .u-width-2\/3\@small, .u-width-4-of-6\@small, .u-width-4\/6\@small, .u-width-6-of-9\@small, .u-width-6\/9\@small, .u-width-8-of-12\@small, .u-width-8\/12\@small {
      width: 66.6666666667%; } }

.u-max-width-2-of-3, .u-max-width-2\/3, .u-max-width-4-of-6, .u-max-width-4\/6, .u-max-width-6-of-9, .u-max-width-6\/9, .u-max-width-8-of-12, .u-max-width-8\/12 {
  max-width: 66.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-2-of-3\@large, .u-max-width-2\/3\@large, .u-max-width-4-of-6\@large, .u-max-width-4\/6\@large, .u-max-width-6-of-9\@large, .u-max-width-6\/9\@large, .u-max-width-8-of-12\@large, .u-max-width-8\/12\@large {
      max-width: 66.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-2-of-3\@small, .u-max-width-2\/3\@small, .u-max-width-4-of-6\@small, .u-max-width-4\/6\@small, .u-max-width-6-of-9\@small, .u-max-width-6\/9\@small, .u-max-width-8-of-12\@small, .u-max-width-8\/12\@small {
      max-width: 66.6666666667%; } }

.u-min-width-9-of-11, .u-min-width-9\/11 {
  min-width: 81.8181818182%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-9-of-11\@large, .u-min-width-9\/11\@large {
      min-width: 81.8181818182%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-9-of-11\@small, .u-min-width-9\/11\@small {
      min-width: 81.8181818182%; } }

.u-width-9-of-11, .u-width-9\/11 {
  width: 81.8181818182%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-9-of-11\@large, .u-width-9\/11\@large {
      width: 81.8181818182%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-9-of-11\@small, .u-width-9\/11\@small {
      width: 81.8181818182%; } }

.u-max-width-9-of-11, .u-max-width-9\/11 {
  max-width: 81.8181818182%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-9-of-11\@large, .u-max-width-9\/11\@large {
      max-width: 81.8181818182%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-9-of-11\@small, .u-max-width-9\/11\@small {
      max-width: 81.8181818182%; } }

.u-min-width-10-of-11, .u-min-width-10\/11 {
  min-width: 90.9090909091%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-10-of-11\@large, .u-min-width-10\/11\@large {
      min-width: 90.9090909091%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-10-of-11\@small, .u-min-width-10\/11\@small {
      min-width: 90.9090909091%; } }

.u-width-10-of-11, .u-width-10\/11 {
  width: 90.9090909091%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-10-of-11\@large, .u-width-10\/11\@large {
      width: 90.9090909091%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-10-of-11\@small, .u-width-10\/11\@small {
      width: 90.9090909091%; } }

.u-max-width-10-of-11, .u-max-width-10\/11 {
  max-width: 90.9090909091%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-10-of-11\@large, .u-max-width-10\/11\@large {
      max-width: 90.9090909091%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-10-of-11\@small, .u-max-width-10\/11\@small {
      max-width: 90.9090909091%; } }

.u-min-width-5-of-6, .u-min-width-5\/6, .u-min-width-10-of-12, .u-min-width-10\/12 {
  min-width: 83.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-5-of-6\@large, .u-min-width-5\/6\@large, .u-min-width-10-of-12\@large, .u-min-width-10\/12\@large {
      min-width: 83.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-5-of-6\@small, .u-min-width-5\/6\@small, .u-min-width-10-of-12\@small, .u-min-width-10\/12\@small {
      min-width: 83.3333333333%; } }

.u-width-5-of-6, .u-width-5\/6, .u-width-10-of-12, .u-width-10\/12 {
  width: 83.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5-of-6\@large, .u-width-5\/6\@large, .u-width-10-of-12\@large, .u-width-10\/12\@large {
      width: 83.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5-of-6\@small, .u-width-5\/6\@small, .u-width-10-of-12\@small, .u-width-10\/12\@small {
      width: 83.3333333333%; } }

.u-max-width-5-of-6, .u-max-width-5\/6, .u-max-width-10-of-12, .u-max-width-10\/12 {
  max-width: 83.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-5-of-6\@large, .u-max-width-5\/6\@large, .u-max-width-10-of-12\@large, .u-max-width-10\/12\@large {
      max-width: 83.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-5-of-6\@small, .u-max-width-5\/6\@small, .u-max-width-10-of-12\@small, .u-max-width-10\/12\@small {
      max-width: 83.3333333333%; } }

.u-min-width-11-of-12, .u-min-width-11\/12 {
  min-width: 91.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-min-width-11-of-12\@large, .u-min-width-11\/12\@large {
      min-width: 91.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-width-11-of-12\@small, .u-min-width-11\/12\@small {
      min-width: 91.6666666667%; } }

.u-width-11-of-12, .u-width-11\/12 {
  width: 91.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-width-11-of-12\@large, .u-width-11\/12\@large {
      width: 91.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-11-of-12\@small, .u-width-11\/12\@small {
      width: 91.6666666667%; } }

.u-max-width-11-of-12, .u-max-width-11\/12 {
  max-width: 91.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-max-width-11-of-12\@large, .u-max-width-11\/12\@large {
      max-width: 91.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-max-width-11-of-12\@small, .u-max-width-11\/12\@small {
      max-width: 91.6666666667%; } }

.u-size-1 {
  width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-1\@large {
      width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-1\@small {
      width: 100%; } }
  .u-size-1-alt, .u-size-1-max {
    max-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-1-alt\@large, .u-size-1-max\@large {
        max-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-1-alt\@small, .u-size-1-max\@small {
        max-width: 100%; } }
  .u-size-1-alt-2, .u-size-1-min {
    min-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-1-alt-2\@large, .u-size-1-min\@large {
        min-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-1-alt-2\@small, .u-size-1-min\@small {
        min-width: 100%; } }
.u-size-fixed-1 {
  width: 71.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-1\@large {
      width: 71.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-1\@small {
      width: 71.25rem; } }
  .u-size-fixed-1-alt, .u-size-fixed-1-max {
    max-width: 71.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-1-alt\@large, .u-size-fixed-1-max\@large {
        max-width: 71.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-1-alt\@small, .u-size-fixed-1-max\@small {
        max-width: 71.25rem; } }
  .u-size-fixed-1-alt-2, .u-size-fixed-1-min {
    min-width: 71.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-1-alt-2\@large, .u-size-fixed-1-min\@large {
        min-width: 71.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-1-alt-2\@small, .u-size-fixed-1-min\@small {
        min-width: 71.25rem; } }
.u-size-fixed-sm-1 {
  width: 47.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-1\@large {
      width: 47.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-1\@small {
      width: 47.5rem; } }
  .u-size-fixed-sm-1-alt, .u-size-fixed-sm-1-max {
    max-width: 47.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-1-alt\@large, .u-size-fixed-sm-1-max\@large {
        max-width: 47.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-1-alt\@small, .u-size-fixed-sm-1-max\@small {
        max-width: 47.5rem; } }
  .u-size-fixed-sm-1-alt-2, .u-size-fixed-sm-1-min {
    min-width: 47.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-1-alt-2\@large, .u-size-fixed-sm-1-min\@large {
        min-width: 47.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-1-alt-2\@small, .u-size-fixed-sm-1-min\@small {
        min-width: 47.5rem; } }
.u-size-2 {
  width: 50%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-2\@large {
      width: 50%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-2\@small {
      width: 50%; } }
  .u-size-2-alt, .u-size-2-max {
    max-width: 50%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-2-alt\@large, .u-size-2-max\@large {
        max-width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-2-alt\@small, .u-size-2-max\@small {
        max-width: 50%; } }
  .u-size-2-alt-2, .u-size-2-min {
    min-width: 50%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-2-alt-2\@large, .u-size-2-min\@large {
        min-width: 50%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-2-alt-2\@small, .u-size-2-min\@small {
        min-width: 50%; } }
.u-size-fixed-2 {
  width: 35.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-2\@large {
      width: 35.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-2\@small {
      width: 35.625rem; } }
  .u-size-fixed-2-alt, .u-size-fixed-2-max {
    max-width: 35.625rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-2-alt\@large, .u-size-fixed-2-max\@large {
        max-width: 35.625rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-2-alt\@small, .u-size-fixed-2-max\@small {
        max-width: 35.625rem; } }
  .u-size-fixed-2-alt-2, .u-size-fixed-2-min {
    min-width: 35.625rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-2-alt-2\@large, .u-size-fixed-2-min\@large {
        min-width: 35.625rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-2-alt-2\@small, .u-size-fixed-2-min\@small {
        min-width: 35.625rem; } }
.u-size-fixed-sm-2 {
  width: 23.75rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-2\@large {
      width: 23.75rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-2\@small {
      width: 23.75rem; } }
  .u-size-fixed-sm-2-alt, .u-size-fixed-sm-2-max {
    max-width: 23.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-2-alt\@large, .u-size-fixed-sm-2-max\@large {
        max-width: 23.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-2-alt\@small, .u-size-fixed-sm-2-max\@small {
        max-width: 23.75rem; } }
  .u-size-fixed-sm-2-alt-2, .u-size-fixed-sm-2-min {
    min-width: 23.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-2-alt-2\@large, .u-size-fixed-sm-2-min\@large {
        min-width: 23.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-2-alt-2\@small, .u-size-fixed-sm-2-min\@small {
        min-width: 23.75rem; } }
.u-size-3 {
  width: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-3\@large {
      width: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-3\@small {
      width: 33.3333333333%; } }
  .u-size-3-alt, .u-size-3-max {
    max-width: 33.3333333333%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-3-alt\@large, .u-size-3-max\@large {
        max-width: 33.3333333333%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-3-alt\@small, .u-size-3-max\@small {
        max-width: 33.3333333333%; } }
  .u-size-3-alt-2, .u-size-3-min {
    min-width: 33.3333333333%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-3-alt-2\@large, .u-size-3-min\@large {
        min-width: 33.3333333333%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-3-alt-2\@small, .u-size-3-min\@small {
        min-width: 33.3333333333%; } }
.u-size-fixed-3 {
  width: 23.75rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-3\@large {
      width: 23.75rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-3\@small {
      width: 23.75rem; } }
  .u-size-fixed-3-alt, .u-size-fixed-3-max {
    max-width: 23.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-3-alt\@large, .u-size-fixed-3-max\@large {
        max-width: 23.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-3-alt\@small, .u-size-fixed-3-max\@small {
        max-width: 23.75rem; } }
  .u-size-fixed-3-alt-2, .u-size-fixed-3-min {
    min-width: 23.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-3-alt-2\@large, .u-size-fixed-3-min\@large {
        min-width: 23.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-3-alt-2\@small, .u-size-fixed-3-min\@small {
        min-width: 23.75rem; } }
.u-size-fixed-sm-3 {
  width: 15.8333333333rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-3\@large {
      width: 15.8333333333rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-3\@small {
      width: 15.8333333333rem; } }
  .u-size-fixed-sm-3-alt, .u-size-fixed-sm-3-max {
    max-width: 15.8333333333rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-3-alt\@large, .u-size-fixed-sm-3-max\@large {
        max-width: 15.8333333333rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-3-alt\@small, .u-size-fixed-sm-3-max\@small {
        max-width: 15.8333333333rem; } }
  .u-size-fixed-sm-3-alt-2, .u-size-fixed-sm-3-min {
    min-width: 15.8333333333rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-3-alt-2\@large, .u-size-fixed-sm-3-min\@large {
        min-width: 15.8333333333rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-3-alt-2\@small, .u-size-fixed-sm-3-min\@small {
        min-width: 15.8333333333rem; } }
.u-size-4 {
  width: 25%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-4\@large {
      width: 25%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-4\@small {
      width: 25%; } }
  .u-size-4-alt, .u-size-4-max {
    max-width: 25%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-4-alt\@large, .u-size-4-max\@large {
        max-width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-4-alt\@small, .u-size-4-max\@small {
        max-width: 25%; } }
  .u-size-4-alt-2, .u-size-4-min {
    min-width: 25%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-4-alt-2\@large, .u-size-4-min\@large {
        min-width: 25%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-4-alt-2\@small, .u-size-4-min\@small {
        min-width: 25%; } }
.u-size-fixed-4 {
  width: 17.8125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-4\@large {
      width: 17.8125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-4\@small {
      width: 17.8125rem; } }
  .u-size-fixed-4-alt, .u-size-fixed-4-max {
    max-width: 17.8125rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-4-alt\@large, .u-size-fixed-4-max\@large {
        max-width: 17.8125rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-4-alt\@small, .u-size-fixed-4-max\@small {
        max-width: 17.8125rem; } }
  .u-size-fixed-4-alt-2, .u-size-fixed-4-min {
    min-width: 17.8125rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-4-alt-2\@large, .u-size-fixed-4-min\@large {
        min-width: 17.8125rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-4-alt-2\@small, .u-size-fixed-4-min\@small {
        min-width: 17.8125rem; } }
.u-size-fixed-sm-4 {
  width: 11.875rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-4\@large {
      width: 11.875rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-4\@small {
      width: 11.875rem; } }
  .u-size-fixed-sm-4-alt, .u-size-fixed-sm-4-max {
    max-width: 11.875rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-4-alt\@large, .u-size-fixed-sm-4-max\@large {
        max-width: 11.875rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-4-alt\@small, .u-size-fixed-sm-4-max\@small {
        max-width: 11.875rem; } }
  .u-size-fixed-sm-4-alt-2, .u-size-fixed-sm-4-min {
    min-width: 11.875rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-4-alt-2\@large, .u-size-fixed-sm-4-min\@large {
        min-width: 11.875rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-4-alt-2\@small, .u-size-fixed-sm-4-min\@small {
        min-width: 11.875rem; } }
.u-size-5 {
  width: 20%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-5\@large {
      width: 20%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-5\@small {
      width: 20%; } }
  .u-size-5-alt, .u-size-5-max {
    max-width: 20%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-5-alt\@large, .u-size-5-max\@large {
        max-width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-5-alt\@small, .u-size-5-max\@small {
        max-width: 20%; } }
  .u-size-5-alt-2, .u-size-5-min {
    min-width: 20%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-5-alt-2\@large, .u-size-5-min\@large {
        min-width: 20%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-5-alt-2\@small, .u-size-5-min\@small {
        min-width: 20%; } }
.u-size-fixed-5 {
  width: 14.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-5\@large {
      width: 14.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-5\@small {
      width: 14.25rem; } }
  .u-size-fixed-5-alt, .u-size-fixed-5-max {
    max-width: 14.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-5-alt\@large, .u-size-fixed-5-max\@large {
        max-width: 14.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-5-alt\@small, .u-size-fixed-5-max\@small {
        max-width: 14.25rem; } }
  .u-size-fixed-5-alt-2, .u-size-fixed-5-min {
    min-width: 14.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-5-alt-2\@large, .u-size-fixed-5-min\@large {
        min-width: 14.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-5-alt-2\@small, .u-size-fixed-5-min\@small {
        min-width: 14.25rem; } }
.u-size-fixed-sm-5 {
  width: 9.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-5\@large {
      width: 9.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-5\@small {
      width: 9.5rem; } }
  .u-size-fixed-sm-5-alt, .u-size-fixed-sm-5-max {
    max-width: 9.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-5-alt\@large, .u-size-fixed-sm-5-max\@large {
        max-width: 9.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-5-alt\@small, .u-size-fixed-sm-5-max\@small {
        max-width: 9.5rem; } }
  .u-size-fixed-sm-5-alt-2, .u-size-fixed-sm-5-min {
    min-width: 9.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-5-alt-2\@large, .u-size-fixed-sm-5-min\@large {
        min-width: 9.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-5-alt-2\@small, .u-size-fixed-sm-5-min\@small {
        min-width: 9.5rem; } }
.u-size-6 {
  width: 16.6666666667%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-6\@large {
      width: 16.6666666667%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-6\@small {
      width: 16.6666666667%; } }
  .u-size-6-alt, .u-size-6-max {
    max-width: 16.6666666667%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-6-alt\@large, .u-size-6-max\@large {
        max-width: 16.6666666667%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-6-alt\@small, .u-size-6-max\@small {
        max-width: 16.6666666667%; } }
  .u-size-6-alt-2, .u-size-6-min {
    min-width: 16.6666666667%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-6-alt-2\@large, .u-size-6-min\@large {
        min-width: 16.6666666667%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-6-alt-2\@small, .u-size-6-min\@small {
        min-width: 16.6666666667%; } }
.u-size-fixed-6 {
  width: 11.875rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-6\@large {
      width: 11.875rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-6\@small {
      width: 11.875rem; } }
  .u-size-fixed-6-alt, .u-size-fixed-6-max {
    max-width: 11.875rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-6-alt\@large, .u-size-fixed-6-max\@large {
        max-width: 11.875rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-6-alt\@small, .u-size-fixed-6-max\@small {
        max-width: 11.875rem; } }
  .u-size-fixed-6-alt-2, .u-size-fixed-6-min {
    min-width: 11.875rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-6-alt-2\@large, .u-size-fixed-6-min\@large {
        min-width: 11.875rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-6-alt-2\@small, .u-size-fixed-6-min\@small {
        min-width: 11.875rem; } }
.u-size-fixed-sm-6 {
  width: 7.9166666667rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-6\@large {
      width: 7.9166666667rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-6\@small {
      width: 7.9166666667rem; } }
  .u-size-fixed-sm-6-alt, .u-size-fixed-sm-6-max {
    max-width: 7.9166666667rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-6-alt\@large, .u-size-fixed-sm-6-max\@large {
        max-width: 7.9166666667rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-6-alt\@small, .u-size-fixed-sm-6-max\@small {
        max-width: 7.9166666667rem; } }
  .u-size-fixed-sm-6-alt-2, .u-size-fixed-sm-6-min {
    min-width: 7.9166666667rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-6-alt-2\@large, .u-size-fixed-sm-6-min\@large {
        min-width: 7.9166666667rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-6-alt-2\@small, .u-size-fixed-sm-6-min\@small {
        min-width: 7.9166666667rem; } }
.u-size-7 {
  width: 14.2857142857%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-7\@large {
      width: 14.2857142857%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-7\@small {
      width: 14.2857142857%; } }
  .u-size-7-alt, .u-size-7-max {
    max-width: 14.2857142857%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-7-alt\@large, .u-size-7-max\@large {
        max-width: 14.2857142857%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-7-alt\@small, .u-size-7-max\@small {
        max-width: 14.2857142857%; } }
  .u-size-7-alt-2, .u-size-7-min {
    min-width: 14.2857142857%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-7-alt-2\@large, .u-size-7-min\@large {
        min-width: 14.2857142857%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-7-alt-2\@small, .u-size-7-min\@small {
        min-width: 14.2857142857%; } }
.u-size-fixed-7 {
  width: 10.1785714286rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-7\@large {
      width: 10.1785714286rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-7\@small {
      width: 10.1785714286rem; } }
  .u-size-fixed-7-alt, .u-size-fixed-7-max {
    max-width: 10.1785714286rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-7-alt\@large, .u-size-fixed-7-max\@large {
        max-width: 10.1785714286rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-7-alt\@small, .u-size-fixed-7-max\@small {
        max-width: 10.1785714286rem; } }
  .u-size-fixed-7-alt-2, .u-size-fixed-7-min {
    min-width: 10.1785714286rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-7-alt-2\@large, .u-size-fixed-7-min\@large {
        min-width: 10.1785714286rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-7-alt-2\@small, .u-size-fixed-7-min\@small {
        min-width: 10.1785714286rem; } }
.u-size-fixed-sm-7 {
  width: 6.7857142857rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-7\@large {
      width: 6.7857142857rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-7\@small {
      width: 6.7857142857rem; } }
  .u-size-fixed-sm-7-alt, .u-size-fixed-sm-7-max {
    max-width: 6.7857142857rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-7-alt\@large, .u-size-fixed-sm-7-max\@large {
        max-width: 6.7857142857rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-7-alt\@small, .u-size-fixed-sm-7-max\@small {
        max-width: 6.7857142857rem; } }
  .u-size-fixed-sm-7-alt-2, .u-size-fixed-sm-7-min {
    min-width: 6.7857142857rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-7-alt-2\@large, .u-size-fixed-sm-7-min\@large {
        min-width: 6.7857142857rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-7-alt-2\@small, .u-size-fixed-sm-7-min\@small {
        min-width: 6.7857142857rem; } }
.u-size-8 {
  width: 12.5%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-8\@large {
      width: 12.5%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-8\@small {
      width: 12.5%; } }
  .u-size-8-alt, .u-size-8-max {
    max-width: 12.5%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-8-alt\@large, .u-size-8-max\@large {
        max-width: 12.5%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-8-alt\@small, .u-size-8-max\@small {
        max-width: 12.5%; } }
  .u-size-8-alt-2, .u-size-8-min {
    min-width: 12.5%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-8-alt-2\@large, .u-size-8-min\@large {
        min-width: 12.5%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-8-alt-2\@small, .u-size-8-min\@small {
        min-width: 12.5%; } }
.u-size-fixed-8 {
  width: 8.90625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-8\@large {
      width: 8.90625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-8\@small {
      width: 8.90625rem; } }
  .u-size-fixed-8-alt, .u-size-fixed-8-max {
    max-width: 8.90625rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-8-alt\@large, .u-size-fixed-8-max\@large {
        max-width: 8.90625rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-8-alt\@small, .u-size-fixed-8-max\@small {
        max-width: 8.90625rem; } }
  .u-size-fixed-8-alt-2, .u-size-fixed-8-min {
    min-width: 8.90625rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-8-alt-2\@large, .u-size-fixed-8-min\@large {
        min-width: 8.90625rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-8-alt-2\@small, .u-size-fixed-8-min\@small {
        min-width: 8.90625rem; } }
.u-size-fixed-sm-8 {
  width: 5.9375rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-8\@large {
      width: 5.9375rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-8\@small {
      width: 5.9375rem; } }
  .u-size-fixed-sm-8-alt, .u-size-fixed-sm-8-max {
    max-width: 5.9375rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-8-alt\@large, .u-size-fixed-sm-8-max\@large {
        max-width: 5.9375rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-8-alt\@small, .u-size-fixed-sm-8-max\@small {
        max-width: 5.9375rem; } }
  .u-size-fixed-sm-8-alt-2, .u-size-fixed-sm-8-min {
    min-width: 5.9375rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-8-alt-2\@large, .u-size-fixed-sm-8-min\@large {
        min-width: 5.9375rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-8-alt-2\@small, .u-size-fixed-sm-8-min\@small {
        min-width: 5.9375rem; } }
.u-size-9 {
  width: 11.1111111111%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-9\@large {
      width: 11.1111111111%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-9\@small {
      width: 11.1111111111%; } }
  .u-size-9-alt, .u-size-9-max {
    max-width: 11.1111111111%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-9-alt\@large, .u-size-9-max\@large {
        max-width: 11.1111111111%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-9-alt\@small, .u-size-9-max\@small {
        max-width: 11.1111111111%; } }
  .u-size-9-alt-2, .u-size-9-min {
    min-width: 11.1111111111%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-9-alt-2\@large, .u-size-9-min\@large {
        min-width: 11.1111111111%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-9-alt-2\@small, .u-size-9-min\@small {
        min-width: 11.1111111111%; } }
.u-size-fixed-9 {
  width: 7.9166666667rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-9\@large {
      width: 7.9166666667rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-9\@small {
      width: 7.9166666667rem; } }
  .u-size-fixed-9-alt, .u-size-fixed-9-max {
    max-width: 7.9166666667rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-9-alt\@large, .u-size-fixed-9-max\@large {
        max-width: 7.9166666667rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-9-alt\@small, .u-size-fixed-9-max\@small {
        max-width: 7.9166666667rem; } }
  .u-size-fixed-9-alt-2, .u-size-fixed-9-min {
    min-width: 7.9166666667rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-9-alt-2\@large, .u-size-fixed-9-min\@large {
        min-width: 7.9166666667rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-9-alt-2\@small, .u-size-fixed-9-min\@small {
        min-width: 7.9166666667rem; } }
.u-size-fixed-sm-9 {
  width: 5.2777777778rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-9\@large {
      width: 5.2777777778rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-9\@small {
      width: 5.2777777778rem; } }
  .u-size-fixed-sm-9-alt, .u-size-fixed-sm-9-max {
    max-width: 5.2777777778rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-9-alt\@large, .u-size-fixed-sm-9-max\@large {
        max-width: 5.2777777778rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-9-alt\@small, .u-size-fixed-sm-9-max\@small {
        max-width: 5.2777777778rem; } }
  .u-size-fixed-sm-9-alt-2, .u-size-fixed-sm-9-min {
    min-width: 5.2777777778rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-9-alt-2\@large, .u-size-fixed-sm-9-min\@large {
        min-width: 5.2777777778rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-9-alt-2\@small, .u-size-fixed-sm-9-min\@small {
        min-width: 5.2777777778rem; } }
.u-size-10 {
  width: 10%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-10\@large {
      width: 10%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-10\@small {
      width: 10%; } }
  .u-size-10-alt, .u-size-10-max {
    max-width: 10%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-10-alt\@large, .u-size-10-max\@large {
        max-width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-10-alt\@small, .u-size-10-max\@small {
        max-width: 10%; } }
  .u-size-10-alt-2, .u-size-10-min {
    min-width: 10%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-10-alt-2\@large, .u-size-10-min\@large {
        min-width: 10%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-10-alt-2\@small, .u-size-10-min\@small {
        min-width: 10%; } }
.u-size-fixed-10 {
  width: 7.125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-10\@large {
      width: 7.125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-10\@small {
      width: 7.125rem; } }
  .u-size-fixed-10-alt, .u-size-fixed-10-max {
    max-width: 7.125rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-10-alt\@large, .u-size-fixed-10-max\@large {
        max-width: 7.125rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-10-alt\@small, .u-size-fixed-10-max\@small {
        max-width: 7.125rem; } }
  .u-size-fixed-10-alt-2, .u-size-fixed-10-min {
    min-width: 7.125rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-10-alt-2\@large, .u-size-fixed-10-min\@large {
        min-width: 7.125rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-10-alt-2\@small, .u-size-fixed-10-min\@small {
        min-width: 7.125rem; } }
.u-size-fixed-sm-10 {
  width: 4.75rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-10\@large {
      width: 4.75rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-10\@small {
      width: 4.75rem; } }
  .u-size-fixed-sm-10-alt, .u-size-fixed-sm-10-max {
    max-width: 4.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-10-alt\@large, .u-size-fixed-sm-10-max\@large {
        max-width: 4.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-10-alt\@small, .u-size-fixed-sm-10-max\@small {
        max-width: 4.75rem; } }
  .u-size-fixed-sm-10-alt-2, .u-size-fixed-sm-10-min {
    min-width: 4.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-10-alt-2\@large, .u-size-fixed-sm-10-min\@large {
        min-width: 4.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-10-alt-2\@small, .u-size-fixed-sm-10-min\@small {
        min-width: 4.75rem; } }
.u-size-11 {
  width: 9.0909090909%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-11\@large {
      width: 9.0909090909%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-11\@small {
      width: 9.0909090909%; } }
  .u-size-11-alt, .u-size-11-max {
    max-width: 9.0909090909%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-11-alt\@large, .u-size-11-max\@large {
        max-width: 9.0909090909%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-11-alt\@small, .u-size-11-max\@small {
        max-width: 9.0909090909%; } }
  .u-size-11-alt-2, .u-size-11-min {
    min-width: 9.0909090909%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-11-alt-2\@large, .u-size-11-min\@large {
        min-width: 9.0909090909%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-11-alt-2\@small, .u-size-11-min\@small {
        min-width: 9.0909090909%; } }
.u-size-fixed-11 {
  width: 6.4772727273rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-11\@large {
      width: 6.4772727273rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-11\@small {
      width: 6.4772727273rem; } }
  .u-size-fixed-11-alt, .u-size-fixed-11-max {
    max-width: 6.4772727273rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-11-alt\@large, .u-size-fixed-11-max\@large {
        max-width: 6.4772727273rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-11-alt\@small, .u-size-fixed-11-max\@small {
        max-width: 6.4772727273rem; } }
  .u-size-fixed-11-alt-2, .u-size-fixed-11-min {
    min-width: 6.4772727273rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-11-alt-2\@large, .u-size-fixed-11-min\@large {
        min-width: 6.4772727273rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-11-alt-2\@small, .u-size-fixed-11-min\@small {
        min-width: 6.4772727273rem; } }
.u-size-fixed-sm-11 {
  width: 4.3181818182rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-11\@large {
      width: 4.3181818182rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-11\@small {
      width: 4.3181818182rem; } }
  .u-size-fixed-sm-11-alt, .u-size-fixed-sm-11-max {
    max-width: 4.3181818182rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-11-alt\@large, .u-size-fixed-sm-11-max\@large {
        max-width: 4.3181818182rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-11-alt\@small, .u-size-fixed-sm-11-max\@small {
        max-width: 4.3181818182rem; } }
  .u-size-fixed-sm-11-alt-2, .u-size-fixed-sm-11-min {
    min-width: 4.3181818182rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-11-alt-2\@large, .u-size-fixed-sm-11-min\@large {
        min-width: 4.3181818182rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-11-alt-2\@small, .u-size-fixed-sm-11-min\@small {
        min-width: 4.3181818182rem; } }
.u-size-12 {
  width: 8.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    .u-size-12\@large {
      width: 8.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-12\@small {
      width: 8.3333333333%; } }
  .u-size-12-alt, .u-size-12-max {
    max-width: 8.3333333333%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-12-alt\@large, .u-size-12-max\@large {
        max-width: 8.3333333333%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-12-alt\@small, .u-size-12-max\@small {
        max-width: 8.3333333333%; } }
  .u-size-12-alt-2, .u-size-12-min {
    min-width: 8.3333333333%; }
    @media screen and (min-width: 47.5rem) {
      .u-size-12-alt-2\@large, .u-size-12-min\@large {
        min-width: 8.3333333333%; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-12-alt-2\@small, .u-size-12-min\@small {
        min-width: 8.3333333333%; } }
.u-size-fixed-12 {
  width: 5.9375rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-12\@large {
      width: 5.9375rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-12\@small {
      width: 5.9375rem; } }
  .u-size-fixed-12-alt, .u-size-fixed-12-max {
    max-width: 5.9375rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-12-alt\@large, .u-size-fixed-12-max\@large {
        max-width: 5.9375rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-12-alt\@small, .u-size-fixed-12-max\@small {
        max-width: 5.9375rem; } }
  .u-size-fixed-12-alt-2, .u-size-fixed-12-min {
    min-width: 5.9375rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-12-alt-2\@large, .u-size-fixed-12-min\@large {
        min-width: 5.9375rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-12-alt-2\@small, .u-size-fixed-12-min\@small {
        min-width: 5.9375rem; } }
.u-size-fixed-sm-12 {
  width: 3.9583333333rem; }
  @media screen and (min-width: 47.5rem) {
    .u-size-fixed-sm-12\@large {
      width: 3.9583333333rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-size-fixed-sm-12\@small {
      width: 3.9583333333rem; } }
  .u-size-fixed-sm-12-alt, .u-size-fixed-sm-12-max {
    max-width: 3.9583333333rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-12-alt\@large, .u-size-fixed-sm-12-max\@large {
        max-width: 3.9583333333rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-12-alt\@small, .u-size-fixed-sm-12-max\@small {
        max-width: 3.9583333333rem; } }
  .u-size-fixed-sm-12-alt-2, .u-size-fixed-sm-12-min {
    min-width: 3.9583333333rem; }
    @media screen and (min-width: 47.5rem) {
      .u-size-fixed-sm-12-alt-2\@large, .u-size-fixed-sm-12-min\@large {
        min-width: 3.9583333333rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-size-fixed-sm-12-alt-2\@small, .u-size-fixed-sm-12-min\@small {
        min-width: 3.9583333333rem; } }
.u-size-sm {
  max-width: 1em;
  max-height: 1em; }
.u-size-cta {
  min-width: 2.5rem;
  min-height: 2.5rem; }

.u-width-0 {
  width: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-0\@large {
      width: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-0\@small {
      width: 2.5rem; } }
  .u-width-0-max {
    max-width: 2.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-0-max\@large {
        max-width: 2.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-0-max\@small {
        max-width: 2.5rem; } }
  .u-width-0-min {
    min-width: 2.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-0-min\@large {
        min-width: 2.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-0-min\@small {
        min-width: 2.5rem; } }
.u-width-1 {
  width: 3.125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-1\@large {
      width: 3.125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-1\@small {
      width: 3.125rem; } }
  .u-width-1-max, .u-width-1-alt {
    max-width: 3.125rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-1-max\@large, .u-width-1-alt\@large {
        max-width: 3.125rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-1-max\@small, .u-width-1-alt\@small {
        max-width: 3.125rem; } }
  .u-width-1-min, .u-width-1-alt-2 {
    min-width: 3.125rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-1-min\@large, .u-width-1-alt-2\@large {
        min-width: 3.125rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-1-min\@small, .u-width-1-alt-2\@small {
        min-width: 3.125rem; } }
.u-width-2 {
  width: 4.6875rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-2\@large {
      width: 4.6875rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-2\@small {
      width: 4.6875rem; } }
  .u-width-2-max, .u-width-2-alt {
    max-width: 4.6875rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-2-max\@large, .u-width-2-alt\@large {
        max-width: 4.6875rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-2-max\@small, .u-width-2-alt\@small {
        max-width: 4.6875rem; } }
  .u-width-2-min, .u-width-2-alt-2 {
    min-width: 4.6875rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-2-min\@large, .u-width-2-alt-2\@large {
        min-width: 4.6875rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-2-min\@small, .u-width-2-alt-2\@small {
        min-width: 4.6875rem; } }
.u-width-3 {
  width: 6.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-3\@large {
      width: 6.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-3\@small {
      width: 6.25rem; } }
  .u-width-3-max, .u-width-3-alt {
    max-width: 6.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-3-max\@large, .u-width-3-alt\@large {
        max-width: 6.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-3-max\@small, .u-width-3-alt\@small {
        max-width: 6.25rem; } }
  .u-width-3-min, .u-width-3-alt-2 {
    min-width: 6.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-3-min\@large, .u-width-3-alt-2\@large {
        min-width: 6.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-3-min\@small, .u-width-3-alt-2\@small {
        min-width: 6.25rem; } }
.u-width-4 {
  width: 12.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-4\@large {
      width: 12.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-4\@small {
      width: 12.5rem; } }
  .u-width-4-max, .u-width-4-alt {
    max-width: 12.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-4-max\@large, .u-width-4-alt\@large {
        max-width: 12.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-4-max\@small, .u-width-4-alt\@small {
        max-width: 12.5rem; } }
  .u-width-4-min, .u-width-4-alt-2 {
    min-width: 12.5rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-4-min\@large, .u-width-4-alt-2\@large {
        min-width: 12.5rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-4-min\@small, .u-width-4-alt-2\@small {
        min-width: 12.5rem; } }
.u-width-5 {
  width: 18.75rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-5\@large {
      width: 18.75rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-5\@small {
      width: 18.75rem; } }
  .u-width-5-max, .u-width-5-alt {
    max-width: 18.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-5-max\@large, .u-width-5-alt\@large {
        max-width: 18.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-5-max\@small, .u-width-5-alt\@small {
        max-width: 18.75rem; } }
  .u-width-5-min, .u-width-5-alt-2 {
    min-width: 18.75rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-5-min\@large, .u-width-5-alt-2\@large {
        min-width: 18.75rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-5-min\@small, .u-width-5-alt-2\@small {
        min-width: 18.75rem; } }
.u-width-6 {
  width: 26.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-width-6\@large {
      width: 26.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-width-6\@small {
      width: 26.25rem; } }
  .u-width-6-max, .u-width-6-alt {
    max-width: 26.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-6-max\@large, .u-width-6-alt\@large {
        max-width: 26.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-6-max\@small, .u-width-6-alt\@small {
        max-width: 26.25rem; } }
  .u-width-6-min, .u-width-6-alt-2 {
    min-width: 26.25rem; }
    @media screen and (min-width: 47.5rem) {
      .u-width-6-min\@large, .u-width-6-alt-2\@large {
        min-width: 26.25rem; } }
    @media screen and (max-width: 47.5rem) {
      .u-width-6-min\@small, .u-width-6-alt-2\@small {
        min-width: 26.25rem; } }

/*
---
name: Min Width > Percent
category: 6. Trumps > Widths
---

Sets the minimum width for an element as a percent.

Two selector variants:
- `u-min-width-X-of-Y`
- `u-min-width-X/Y`

Suffixcate variants:
- `u-min-width-X-of-Y@small`
- `u-min-width-X/Y@small`
- `u-min-width-X-of-Y@large`
- `u-min-width-X/Y@large`

Where "X" is a number between 1-12 and "Y" is a number 1-12. 12 is defined by `$max-num` from `makeWidths()` in `_06-trumps_widths.scss` and generated in `_01-tools_width-generator.scss`.


Examples:
```u-min-width-X-of-Y.html
<div class="u-min-width-1-of-10">
    10%
</div>

<div class="u-min-width-6-of-12">
    50%
</div>

<div class="u-min-width-3-of-4">
    75%
</div>

<div class="u-min-width-1-of-1">
    100%
</div>

```

```u-min-width-XY.html
<div class="u-min-width-1/10">
    10%
</div>

<div class="u-min-width-6/12">
    50%
</div>

<div class="u-min-width-3/4">
    75%
</div>

<div class="u-min-width-1/1">
    100%
</div>

```
*/
/*
---
name: Width > Percent
category: 6. Trumps > Widths
---

Sets the  width for an element as a percent.

Two selector variants:
- `u-max-width-X-of-Y`
- `u-max-width-X/Y`

Suffixcate variants:
- `u-max-width-X-of-Y@small`
- `u-max-width-X/Y@small`
- `u-max-width-X-of-Y@large`
- `u-max-width-X/Y@large`

Where "X" is a number between 1-12 and "Y" is a number 1-12. 12 is defined by `$max-num` from `makeWidths()` in `_06-trumps_widths.scss` and generated in `_01-tools_width-generator.scss`.


Examples:
```u-max-width-X-of-Y.html
<div class="u-width-1-of-10">
    10%
</div>

<div class="u-width-6-of-12">
    50%
</div>

<div class="u-width-3-of-4">
    75%
</div>

<div class="u-width-1-of-1">
    100%
</div>

```

```u-min-width-XY.html
<div class="u-width-1/10">
    10%
</div>

<div class="u-width-6/12">
    50%
</div>

<div class="u-width-3/4">
    75%
</div>

<div class="u-width-1/1">
    100%
</div>

```
*/
/*
---
name: Max Width > Percent
category: 6. Trumps > Widths
---

Sets the maximum width for an element as a percent.

Two selector variants:
- `u-max-width-X-of-Y`
- `u-max-width-X/Y`

Suffixcate variants:
- `u-max-width-X-of-Y@small`
- `u-max-width-X/Y@small`
- `u-max-width-X-of-Y@large`
- `u-max-width-X/Y@large`

Where "X" is a number between 1-12 and "Y" is a number 1-12. 12 is defined by `$max-num` from `makeWidths()` in `_06-trumps_widths.scss` and generated in `_01-tools_width-generator.scss`.


Examples:
```u-max-width-X-of-Y.html
<div class="u-max-width-1-of-10">
    10%
</div>

<div class="u-max-width-6-of-12">
    50%
</div>

<div class="u-max-width-3-of-4">
    75%
</div>

<div class="u-max-width-1-of-1">
    100%
</div>

```

```u-min-width-XY.html
<div class="u-max-width-1/10">
    10%
</div>

<div class="u-max-width-6/12">
    50%
</div>

<div class="u-max-width-3/4">
    75%
</div>

<div class="u-max-width-1/1">
    100%
</div>

```
*/
/*
---
name: Space Sections
category: 6. Trumps > Spacing Units
---

Space sections next to eachother using `padding`, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-sections`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-sections">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-sections@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-sections@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-sections-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-sections-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-sections-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-sections-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-sections-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-space-sections > * + * {
    margin-top: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-sections > * + * {
    margin-top: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-sections\@large > * + * {
    margin-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-sections\@large > * + * {
    margin-top: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-sections\@small > * + * {
    margin-top: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-sections\@small > * + * {
    margin-top: 0.625rem; } }

@media screen and (min-width: 25.556rem) {
  .u-space-sections-lg > * + * {
    padding-top: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-sections-lg > * + * {
    padding-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-sections-lg\@large > * + * {
    padding-top: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-sections-lg\@large > * + * {
    padding-top: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-sections-lg\@small > * + * {
    padding-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-sections-lg\@small > * + * {
    padding-top: 1.25rem; } }

.u-space-sections-lg-fixed > * + * {
  padding-top: 2.5rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-sections-lg-fixed\@large > * + * {
    padding-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-sections-lg-fixed\@small > * + * {
    padding-top: 2.5rem; } }
.u-space-sections-fixed > * + * {
  padding-top: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-sections-fixed\@large > * + * {
    padding-top: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-sections-fixed\@small > * + * {
    padding-top: 1.25rem; } }
.u-space-sections-sm > * + * {
  padding-top: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-sections-sm\@large > * + * {
    padding-top: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-sections-sm\@small > * + * {
    padding-top: 0.625rem; } }
.u-space-sections-tiny > * + * {
  padding-top: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-sections-tiny\@large > * + * {
    padding-top: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-sections-tiny\@small > * + * {
    padding-top: 0.3125rem; } }

/*
---
name: Space Sections (Alt)
category: 6. Trumps > Spacing Units
---

Space sections next to eachother using `margin`, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-sections`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)
```demo.html
<div class="u-gutt-sections">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-sections@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-sections@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-sections-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html

<div class="u-gutt-sections-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-sections-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-sections-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-sections-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-gutt-sections > * + * {
    margin-top: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-sections > * + * {
    margin-top: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-sections\@large > * + * {
    margin-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-sections\@large > * + * {
    margin-top: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-sections\@small > * + * {
    margin-top: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-sections\@small > * + * {
    margin-top: 0.625rem; } }

@media screen and (min-width: 25.556rem) {
  .u-gutt-sections-lg > * + * {
    margin-top: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-sections-lg > * + * {
    margin-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-sections-lg\@large > * + * {
    margin-top: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-sections-lg\@large > * + * {
    margin-top: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-sections-lg\@small > * + * {
    margin-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-sections-lg\@small > * + * {
    margin-top: 1.25rem; } }

.u-gutt-sections-lg-fixed > * + * {
  margin-top: 2.5rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-sections-lg-fixed\@large > * + * {
    margin-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-sections-lg-fixed\@small > * + * {
    margin-top: 2.5rem; } }
.u-gutt-sections-fixed > * + * {
  margin-top: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-sections-fixed\@large > * + * {
    margin-top: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-sections-fixed\@small > * + * {
    margin-top: 1.25rem; } }
.u-gutt-sections-sm > * + * {
  margin-top: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-sections-sm\@large > * + * {
    margin-top: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-sections-sm\@small > * + * {
    margin-top: 0.625rem; } }
.u-gutt-sections-tiny > * + * {
  margin-top: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-sections-tiny\@large > * + * {
    margin-top: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-sections-tiny\@small > * + * {
    margin-top: 0.3125rem; } }

/*
---
name: Space Children
category: 6. Trumps > Spacing Units
---

Space  children with `padding` between them, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-children`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-children">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-children@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-children@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-children-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-children-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-children-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-children-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-children-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-space-children > * + * {
    margin-left: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-children > * + * {
    margin-left: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-children\@large > * + * {
    margin-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-children\@large > * + * {
    margin-left: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-children\@small > * + * {
    margin-left: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-children\@small > * + * {
    margin-left: 0.625rem; } }

@media screen and (min-width: 25.556rem) {
  .u-space-children-lg > * + * {
    padding-left: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-children-lg > * + * {
    padding-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-children-lg\@large > * + * {
    padding-left: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-children-lg\@large > * + * {
    padding-left: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-children-lg\@small > * + * {
    padding-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-children-lg\@small > * + * {
    padding-left: 1.25rem; } }

.u-space-children-lg-fixed > * + * {
  padding-left: 2.5rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-children-lg-fixed\@large > * + * {
    padding-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-children-lg-fixed\@small > * + * {
    padding-left: 2.5rem; } }
.u-space-children-fixed > * + * {
  padding-left: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-children-fixed\@large > * + * {
    padding-left: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-children-fixed\@small > * + * {
    padding-left: 1.25rem; } }
.u-space-children-sm > * + * {
  padding-left: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-children-sm\@large > * + * {
    padding-left: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-children-sm\@small > * + * {
    padding-left: 0.625rem; } }
.u-space-children-tiny > * + * {
  padding-left: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-space-children-tiny\@large > * + * {
    padding-left: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-space-children-tiny\@small > * + * {
    padding-left: 0.3125rem; } }

/*
---
name: Space Children (Alt)
category: 6. Trumps > Spacing Units
---

Space  children with `margin` between them, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-children`: Default unit (`$default-space`) above `$bp-gutt` and .5 the default unit (`$default-space` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-gutt` and default unit (`$default-space`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-gutt-children">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-children@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-children@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-children-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-children-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-children-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-children-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-children-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-gutt-children > * + * {
    margin-left: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-children > * + * {
    margin-left: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-children\@large > * + * {
    margin-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-children\@large > * + * {
    margin-left: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-children\@small > * + * {
    margin-left: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-children\@small > * + * {
    margin-left: 0.625rem; } }

@media screen and (min-width: 25.556rem) {
  .u-gutt-children-lg > * + * {
    margin-left: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-children-lg > * + * {
    margin-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-children-lg\@large > * + * {
    margin-left: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-children-lg\@large > * + * {
    margin-left: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-children-lg\@small > * + * {
    margin-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-children-lg\@small > * + * {
    margin-left: 1.25rem; } }

.u-gutt-children-lg-fixed > * + * {
  margin-left: 2.5rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-children-lg-fixed\@large > * + * {
    margin-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-children-lg-fixed\@small > * + * {
    margin-left: 2.5rem; } }
.u-gutt-children-fixed > * + * {
  margin-left: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-children-fixed\@large > * + * {
    margin-left: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-children-fixed\@small > * + * {
    margin-left: 1.25rem; } }
.u-gutt-children-sm > * + * {
  margin-left: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-children-sm\@large > * + * {
    margin-left: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-children-sm\@small > * + * {
    margin-left: 0.625rem; } }
.u-gutt-children-tiny > * + * {
  margin-left: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-gutt-children-tiny\@large > * + * {
    margin-left: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-gutt-children-tiny\@small > * + * {
    margin-left: 0.3125rem; } }

/*
---
name: Padding
category: 6. Trumps > Spacing Units
---

`padding` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Padding > Padding Top
category: 6. Trumps > Spacing Units
---

`padding-top` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-1`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-1">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-1@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-1@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-1-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-1-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-1-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-1-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-1-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Padding > Padding Right
category: 6. Trumps > Spacing Units
---

`padding-right` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-2`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-2">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-2@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-2@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-2-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-2-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-2-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-2-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-2-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Padding > Padding Bottom
category: 6. Trumps > Spacing Units
---

`padding-bottom` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-3`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-3">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-3@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-3@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-3-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-3-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-3-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-3-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-3-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Padding > Padding Left
category: 6. Trumps > Spacing Units
---

`padding-left` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-4`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-4@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-4@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-4-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-4-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-4-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-4-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-4-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Padding > Top and Bottom
category: 6. Trumps > Spacing Units
---

`padding-top` and `padding-bottom` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-1-3`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-1-3">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-1-3@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-1-3@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-1-3-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-1-3-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-1-3-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-1-3-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-1-3-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Padding > Right and Left
category: 6. Trumps > Spacing Units
---

`padding-top` and `padding-bottom` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-space-2-4`: Default unit (`$default-space`) above `$bp-space` and .5 the default unit (`$default-space` * .5) below `$bp-space`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<div class="u-space-2-4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-space-2-4@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-space-2-4@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-space-2-4-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-space-2-4-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-space-2-4-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-space-2-4-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-space-2-4-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-space-1, .u-space, .u-space-1-3 {
    padding-top: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-1, .u-space, .u-space-1-3 {
    padding-top: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-1\@large, .u-space\@large, .u-space-1-3\@large {
    padding-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-1\@large, .u-space\@large, .u-space-1-3\@large {
    padding-top: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-1\@small, .u-space\@small, .u-space-1-3\@small {
    padding-top: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-1\@small, .u-space\@small, .u-space-1-3\@small {
    padding-top: 0.625rem; } }

.u-space-1-fixed, .u-space-1-3-fixed, .u-space-fixed {
  padding-top: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-1-fixed\@large, .u-space-1-3-fixed\@large, .u-space-fixed\@large {
      padding-top: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-1-fixed\@small, .u-space-1-3-fixed\@small, .u-space-fixed\@small {
      padding-top: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-1-lg, .u-space-1-3-lg, .u-space-lg {
    padding-top: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-1-lg, .u-space-1-3-lg, .u-space-lg {
    padding-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-1-lg\@large, .u-space-1-3-lg\@large, .u-space-lg\@large {
    padding-top: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-1-lg\@large, .u-space-1-3-lg\@large, .u-space-lg\@large {
    padding-top: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-1-lg\@small, .u-space-1-3-lg\@small, .u-space-lg\@small {
    padding-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-1-lg\@small, .u-space-1-3-lg\@small, .u-space-lg\@small {
    padding-top: 1.25rem; } }

.u-space-1-lg-fixed, .u-space-1-3-lg-fixed, .u-space-lg-fixed {
  padding-top: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-1-lg-fixed\@large, .u-space-1-3-lg-fixed\@large, .u-space-lg-fixed\@large {
      padding-top: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-1-lg-fixed\@small, .u-space-1-3-lg-fixed\@small, .u-space-lg-fixed\@small {
      padding-top: 2.5rem; } }
.u-space-1-sm, .u-space-1-3-sm, .u-space-sm {
  padding-top: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-1-sm\@large, .u-space-1-3-sm\@large, .u-space-sm\@large {
      padding-top: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-1-sm\@small, .u-space-1-3-sm\@small, .u-space-sm\@small {
      padding-top: 0.625rem; } }
.u-space-1-tiny, .u-space-1-3-tiny, .u-space-tiny {
  padding-top: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-1-tiny\@large, .u-space-1-3-tiny\@large, .u-space-tiny\@large {
      padding-top: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-1-tiny\@small, .u-space-1-3-tiny\@small, .u-space-tiny\@small {
      padding-top: 0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-2, .u-space, .u-space-2-4 {
    padding-right: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-2, .u-space, .u-space-2-4 {
    padding-right: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-2\@large, .u-space\@large, .u-space-2-4\@large {
    padding-right: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-2\@large, .u-space\@large, .u-space-2-4\@large {
    padding-right: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-2\@small, .u-space\@small, .u-space-2-4\@small {
    padding-right: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-2\@small, .u-space\@small, .u-space-2-4\@small {
    padding-right: 0.625rem; } }

.u-space-2-fixed, .u-space-2-4-fixed, .u-space-fixed {
  padding-right: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-2-fixed\@large, .u-space-2-4-fixed\@large, .u-space-fixed\@large {
      padding-right: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-2-fixed\@small, .u-space-2-4-fixed\@small, .u-space-fixed\@small {
      padding-right: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-2-lg, .u-space-2-4-lg, .u-space-lg {
    padding-right: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-2-lg, .u-space-2-4-lg, .u-space-lg {
    padding-right: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-2-lg\@large, .u-space-2-4-lg\@large, .u-space-lg\@large {
    padding-right: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-2-lg\@large, .u-space-2-4-lg\@large, .u-space-lg\@large {
    padding-right: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-2-lg\@small, .u-space-2-4-lg\@small, .u-space-lg\@small {
    padding-right: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-2-lg\@small, .u-space-2-4-lg\@small, .u-space-lg\@small {
    padding-right: 1.25rem; } }

.u-space-2-lg-fixed, .u-space-2-4-lg-fixed, .u-space-lg-fixed {
  padding-right: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-2-lg-fixed\@large, .u-space-2-4-lg-fixed\@large, .u-space-lg-fixed\@large {
      padding-right: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-2-lg-fixed\@small, .u-space-2-4-lg-fixed\@small, .u-space-lg-fixed\@small {
      padding-right: 2.5rem; } }
.u-space-2-sm, .u-space-2-4-sm, .u-space-sm {
  padding-right: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-2-sm\@large, .u-space-2-4-sm\@large, .u-space-sm\@large {
      padding-right: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-2-sm\@small, .u-space-2-4-sm\@small, .u-space-sm\@small {
      padding-right: 0.625rem; } }
.u-space-2-tiny, .u-space-2-4-tiny, .u-space-tiny {
  padding-right: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-2-tiny\@large, .u-space-2-4-tiny\@large, .u-space-tiny\@large {
      padding-right: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-2-tiny\@small, .u-space-2-4-tiny\@small, .u-space-tiny\@small {
      padding-right: 0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-3, .u-space, .u-space-1-3 {
    padding-bottom: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-3, .u-space, .u-space-1-3 {
    padding-bottom: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-3\@large, .u-space\@large, .u-space-1-3\@large {
    padding-bottom: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-3\@large, .u-space\@large, .u-space-1-3\@large {
    padding-bottom: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-3\@small, .u-space\@small, .u-space-1-3\@small {
    padding-bottom: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-3\@small, .u-space\@small, .u-space-1-3\@small {
    padding-bottom: 0.625rem; } }

.u-space-3-fixed, .u-space-1-3-fixed, .u-space-fixed {
  padding-bottom: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-3-fixed\@large, .u-space-1-3-fixed\@large, .u-space-fixed\@large {
      padding-bottom: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-3-fixed\@small, .u-space-1-3-fixed\@small, .u-space-fixed\@small {
      padding-bottom: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-3-lg, .u-space-1-3-lg, .u-space-lg {
    padding-bottom: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-3-lg, .u-space-1-3-lg, .u-space-lg {
    padding-bottom: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-3-lg\@large, .u-space-1-3-lg\@large, .u-space-lg\@large {
    padding-bottom: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-3-lg\@large, .u-space-1-3-lg\@large, .u-space-lg\@large {
    padding-bottom: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-3-lg\@small, .u-space-1-3-lg\@small, .u-space-lg\@small {
    padding-bottom: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-3-lg\@small, .u-space-1-3-lg\@small, .u-space-lg\@small {
    padding-bottom: 1.25rem; } }

.u-space-3-lg-fixed, .u-space-1-3-lg-fixed, .u-space-lg-fixed {
  padding-bottom: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-3-lg-fixed\@large, .u-space-1-3-lg-fixed\@large, .u-space-lg-fixed\@large {
      padding-bottom: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-3-lg-fixed\@small, .u-space-1-3-lg-fixed\@small, .u-space-lg-fixed\@small {
      padding-bottom: 2.5rem; } }
.u-space-3-sm, .u-space-1-3-sm, .u-space-sm {
  padding-bottom: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-3-sm\@large, .u-space-1-3-sm\@large, .u-space-sm\@large {
      padding-bottom: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-3-sm\@small, .u-space-1-3-sm\@small, .u-space-sm\@small {
      padding-bottom: 0.625rem; } }
.u-space-3-tiny, .u-space-1-3-tiny, .u-space-tiny {
  padding-bottom: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-3-tiny\@large, .u-space-1-3-tiny\@large, .u-space-tiny\@large {
      padding-bottom: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-3-tiny\@small, .u-space-1-3-tiny\@small, .u-space-tiny\@small {
      padding-bottom: 0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-4, .u-space, .u-space-2-4 {
    padding-left: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-4, .u-space, .u-space-2-4 {
    padding-left: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-4\@large, .u-space\@large, .u-space-2-4\@large {
    padding-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-4\@large, .u-space\@large, .u-space-2-4\@large {
    padding-left: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-4\@small, .u-space\@small, .u-space-2-4\@small {
    padding-left: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-4\@small, .u-space\@small, .u-space-2-4\@small {
    padding-left: 0.625rem; } }

.u-space-4-fixed, .u-space-2-4-fixed, .u-space-fixed {
  padding-left: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-4-fixed\@large, .u-space-2-4-fixed\@large, .u-space-fixed\@large {
      padding-left: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-4-fixed\@small, .u-space-2-4-fixed\@small, .u-space-fixed\@small {
      padding-left: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-space-4-lg, .u-space-2-4-lg, .u-space-lg {
    padding-left: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-space-4-lg, .u-space-2-4-lg, .u-space-lg {
    padding-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-4-lg\@large, .u-space-2-4-lg\@large, .u-space-lg\@large {
    padding-left: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-4-lg\@large, .u-space-2-4-lg\@large, .u-space-lg\@large {
    padding-left: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-space-4-lg\@small, .u-space-2-4-lg\@small, .u-space-lg\@small {
    padding-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-space-4-lg\@small, .u-space-2-4-lg\@small, .u-space-lg\@small {
    padding-left: 1.25rem; } }

.u-space-4-lg-fixed, .u-space-2-4-lg-fixed, .u-space-lg-fixed {
  padding-left: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-4-lg-fixed\@large, .u-space-2-4-lg-fixed\@large, .u-space-lg-fixed\@large {
      padding-left: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-4-lg-fixed\@small, .u-space-2-4-lg-fixed\@small, .u-space-lg-fixed\@small {
      padding-left: 2.5rem; } }
.u-space-4-sm, .u-space-2-4-sm, .u-space-sm {
  padding-left: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-4-sm\@large, .u-space-2-4-sm\@large, .u-space-sm\@large {
      padding-left: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-4-sm\@small, .u-space-2-4-sm\@small, .u-space-sm\@small {
      padding-left: 0.625rem; } }
.u-space-4-tiny, .u-space-2-4-tiny, .u-space-tiny {
  padding-left: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-space-4-tiny\@large, .u-space-2-4-tiny\@large, .u-space-tiny\@large {
      padding-left: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-4-tiny\@small, .u-space-2-4-tiny\@small, .u-space-tiny\@small {
      padding-left: 0.3125rem; } }

/*
---
name: Margin
category: 6. Trumps > Spacing Units
---

`margin` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Margin > Margin Top
category: 6. Trumps > Spacing Units
---

`margin-top` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-1`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt-1">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-1@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-1@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-1-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-1-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-1-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-1-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-1-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Margin > Margin Right
category: 6. Trumps > Spacing Units
---

`margin-right` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-2`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt-2">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-2@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-2@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-2-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-2-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-2-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-2-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-2-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Margin > Margin Bottom
category: 6. Trumps > Spacing Units
---

`margin-bottom` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-3`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt-3">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-3@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-3@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-3-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-3-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-3-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-3-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-3-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Margin > Margin Left
category: 6. Trumps > Spacing Units
---

`margin-left` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-4`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt-4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-4@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-4@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-4-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-4-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-4-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-4-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-4-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Margin > Top and Bottom
category: 6. Trumps > Spacing Units
---

`margin-top` and `margin-bottom` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-1-3`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt-1-3">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-1-3@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-1-3@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-1-3-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-1-3-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-1-3-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-1-3-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-1-3-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Margin > Right and Left
category: 6. Trumps > Spacing Units
---

`margin-top` and `margin-bottom` inside an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-gutt-2-4`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-gutt-2-4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-gutt-2-4@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-gutt-2-4@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-gutt-2-4-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-gutt-2-4-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-gutt-2-4-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-gutt-2-4-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-gutt-2-4-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-gutt-1, .u-gutt, .u-gutt-1-3 {
    margin-top: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-1, .u-gutt, .u-gutt-1-3 {
    margin-top: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-1\@large, .u-gutt\@large, .u-gutt-1-3\@large {
    margin-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-1\@large, .u-gutt\@large, .u-gutt-1-3\@large {
    margin-top: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-1\@small, .u-gutt\@small, .u-gutt-1-3\@small {
    margin-top: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-1\@small, .u-gutt\@small, .u-gutt-1-3\@small {
    margin-top: 0.625rem; } }

.u-gutt-1-fixed, .u-gutt-1-3-fixed, .u-gutt-fixed {
  margin-top: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-1-fixed\@large, .u-gutt-1-3-fixed\@large, .u-gutt-fixed\@large {
      margin-top: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-1-fixed\@small, .u-gutt-1-3-fixed\@small, .u-gutt-fixed\@small {
      margin-top: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-1-lg, .u-gutt-1-3-lg, .u-gutt-lg {
    margin-top: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-1-lg, .u-gutt-1-3-lg, .u-gutt-lg {
    margin-top: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-1-lg\@large, .u-gutt-1-3-lg\@large, .u-gutt-lg\@large {
    margin-top: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-1-lg\@large, .u-gutt-1-3-lg\@large, .u-gutt-lg\@large {
    margin-top: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-1-lg\@small, .u-gutt-1-3-lg\@small, .u-gutt-lg\@small {
    margin-top: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-1-lg\@small, .u-gutt-1-3-lg\@small, .u-gutt-lg\@small {
    margin-top: 1.25rem; } }

.u-gutt-1-lg-fixed, .u-gutt-1-3-lg-fixed, .u-gutt-lg-fixed {
  margin-top: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-1-lg-fixed\@large, .u-gutt-1-3-lg-fixed\@large, .u-gutt-lg-fixed\@large {
      margin-top: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-1-lg-fixed\@small, .u-gutt-1-3-lg-fixed\@small, .u-gutt-lg-fixed\@small {
      margin-top: 2.5rem; } }
.u-gutt-1-sm, .u-gutt-1-3-sm, .u-gutt-sm {
  margin-top: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-1-sm\@large, .u-gutt-1-3-sm\@large, .u-gutt-sm\@large {
      margin-top: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-1-sm\@small, .u-gutt-1-3-sm\@small, .u-gutt-sm\@small {
      margin-top: 0.625rem; } }
.u-gutt-1-tiny, .u-gutt-1-3-tiny, .u-gutt-tiny {
  margin-top: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-1-tiny\@large, .u-gutt-1-3-tiny\@large, .u-gutt-tiny\@large {
      margin-top: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-1-tiny\@small, .u-gutt-1-3-tiny\@small, .u-gutt-tiny\@small {
      margin-top: 0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-2, .u-gutt, .u-gutt-2-4 {
    margin-right: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-2, .u-gutt, .u-gutt-2-4 {
    margin-right: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-2\@large, .u-gutt\@large, .u-gutt-2-4\@large {
    margin-right: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-2\@large, .u-gutt\@large, .u-gutt-2-4\@large {
    margin-right: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-2\@small, .u-gutt\@small, .u-gutt-2-4\@small {
    margin-right: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-2\@small, .u-gutt\@small, .u-gutt-2-4\@small {
    margin-right: 0.625rem; } }

.u-gutt-2-fixed, .u-gutt-2-4-fixed, .u-gutt-fixed {
  margin-right: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-2-fixed\@large, .u-gutt-2-4-fixed\@large, .u-gutt-fixed\@large {
      margin-right: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-2-fixed\@small, .u-gutt-2-4-fixed\@small, .u-gutt-fixed\@small {
      margin-right: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-2-lg, .u-gutt-2-4-lg, .u-gutt-lg {
    margin-right: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-2-lg, .u-gutt-2-4-lg, .u-gutt-lg {
    margin-right: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-2-lg\@large, .u-gutt-2-4-lg\@large, .u-gutt-lg\@large {
    margin-right: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-2-lg\@large, .u-gutt-2-4-lg\@large, .u-gutt-lg\@large {
    margin-right: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-2-lg\@small, .u-gutt-2-4-lg\@small, .u-gutt-lg\@small {
    margin-right: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-2-lg\@small, .u-gutt-2-4-lg\@small, .u-gutt-lg\@small {
    margin-right: 1.25rem; } }

.u-gutt-2-lg-fixed, .u-gutt-2-4-lg-fixed, .u-gutt-lg-fixed {
  margin-right: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-2-lg-fixed\@large, .u-gutt-2-4-lg-fixed\@large, .u-gutt-lg-fixed\@large {
      margin-right: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-2-lg-fixed\@small, .u-gutt-2-4-lg-fixed\@small, .u-gutt-lg-fixed\@small {
      margin-right: 2.5rem; } }
.u-gutt-2-sm, .u-gutt-2-4-sm, .u-gutt-sm {
  margin-right: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-2-sm\@large, .u-gutt-2-4-sm\@large, .u-gutt-sm\@large {
      margin-right: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-2-sm\@small, .u-gutt-2-4-sm\@small, .u-gutt-sm\@small {
      margin-right: 0.625rem; } }
.u-gutt-2-tiny, .u-gutt-2-4-tiny, .u-gutt-tiny {
  margin-right: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-2-tiny\@large, .u-gutt-2-4-tiny\@large, .u-gutt-tiny\@large {
      margin-right: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-2-tiny\@small, .u-gutt-2-4-tiny\@small, .u-gutt-tiny\@small {
      margin-right: 0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-3, .u-gutt, .u-gutt-1-3 {
    margin-bottom: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-3, .u-gutt, .u-gutt-1-3 {
    margin-bottom: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-3\@large, .u-gutt\@large, .u-gutt-1-3\@large {
    margin-bottom: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-3\@large, .u-gutt\@large, .u-gutt-1-3\@large {
    margin-bottom: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-3\@small, .u-gutt\@small, .u-gutt-1-3\@small {
    margin-bottom: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-3\@small, .u-gutt\@small, .u-gutt-1-3\@small {
    margin-bottom: 0.625rem; } }

.u-gutt-3-fixed, .u-gutt-1-3-fixed, .u-gutt-fixed {
  margin-bottom: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-3-fixed\@large, .u-gutt-1-3-fixed\@large, .u-gutt-fixed\@large {
      margin-bottom: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-3-fixed\@small, .u-gutt-1-3-fixed\@small, .u-gutt-fixed\@small {
      margin-bottom: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-3-lg, .u-gutt-1-3-lg, .u-gutt-lg {
    margin-bottom: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-3-lg, .u-gutt-1-3-lg, .u-gutt-lg {
    margin-bottom: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-3-lg\@large, .u-gutt-1-3-lg\@large, .u-gutt-lg\@large {
    margin-bottom: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-3-lg\@large, .u-gutt-1-3-lg\@large, .u-gutt-lg\@large {
    margin-bottom: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-3-lg\@small, .u-gutt-1-3-lg\@small, .u-gutt-lg\@small {
    margin-bottom: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-3-lg\@small, .u-gutt-1-3-lg\@small, .u-gutt-lg\@small {
    margin-bottom: 1.25rem; } }

.u-gutt-3-lg-fixed, .u-gutt-1-3-lg-fixed, .u-gutt-lg-fixed {
  margin-bottom: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-3-lg-fixed\@large, .u-gutt-1-3-lg-fixed\@large, .u-gutt-lg-fixed\@large {
      margin-bottom: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-3-lg-fixed\@small, .u-gutt-1-3-lg-fixed\@small, .u-gutt-lg-fixed\@small {
      margin-bottom: 2.5rem; } }
.u-gutt-3-sm, .u-gutt-1-3-sm, .u-gutt-sm {
  margin-bottom: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-3-sm\@large, .u-gutt-1-3-sm\@large, .u-gutt-sm\@large {
      margin-bottom: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-3-sm\@small, .u-gutt-1-3-sm\@small, .u-gutt-sm\@small {
      margin-bottom: 0.625rem; } }
.u-gutt-3-tiny, .u-gutt-1-3-tiny, .u-gutt-tiny {
  margin-bottom: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-3-tiny\@large, .u-gutt-1-3-tiny\@large, .u-gutt-tiny\@large {
      margin-bottom: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-3-tiny\@small, .u-gutt-1-3-tiny\@small, .u-gutt-tiny\@small {
      margin-bottom: 0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-4, .u-gutt, .u-gutt-2-4 {
    margin-left: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-4, .u-gutt, .u-gutt-2-4 {
    margin-left: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-4\@large, .u-gutt\@large, .u-gutt-2-4\@large {
    margin-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-4\@large, .u-gutt\@large, .u-gutt-2-4\@large {
    margin-left: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-4\@small, .u-gutt\@small, .u-gutt-2-4\@small {
    margin-left: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-4\@small, .u-gutt\@small, .u-gutt-2-4\@small {
    margin-left: 0.625rem; } }

.u-gutt-4-fixed, .u-gutt-2-4-fixed, .u-gutt-fixed {
  margin-left: 1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-4-fixed\@large, .u-gutt-2-4-fixed\@large, .u-gutt-fixed\@large {
      margin-left: 1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-4-fixed\@small, .u-gutt-2-4-fixed\@small, .u-gutt-fixed\@small {
      margin-left: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-gutt-4-lg, .u-gutt-2-4-lg, .u-gutt-lg {
    margin-left: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-gutt-4-lg, .u-gutt-2-4-lg, .u-gutt-lg {
    margin-left: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-4-lg\@large, .u-gutt-2-4-lg\@large, .u-gutt-lg\@large {
    margin-left: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-4-lg\@large, .u-gutt-2-4-lg\@large, .u-gutt-lg\@large {
    margin-left: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-gutt-4-lg\@small, .u-gutt-2-4-lg\@small, .u-gutt-lg\@small {
    margin-left: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-gutt-4-lg\@small, .u-gutt-2-4-lg\@small, .u-gutt-lg\@small {
    margin-left: 1.25rem; } }

.u-gutt-4-lg-fixed, .u-gutt-2-4-lg-fixed, .u-gutt-lg-fixed {
  margin-left: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-4-lg-fixed\@large, .u-gutt-2-4-lg-fixed\@large, .u-gutt-lg-fixed\@large {
      margin-left: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-4-lg-fixed\@small, .u-gutt-2-4-lg-fixed\@small, .u-gutt-lg-fixed\@small {
      margin-left: 2.5rem; } }
.u-gutt-4-sm, .u-gutt-2-4-sm, .u-gutt-sm {
  margin-left: 0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-4-sm\@large, .u-gutt-2-4-sm\@large, .u-gutt-sm\@large {
      margin-left: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-4-sm\@small, .u-gutt-2-4-sm\@small, .u-gutt-sm\@small {
      margin-left: 0.625rem; } }
.u-gutt-4-tiny, .u-gutt-2-4-tiny, .u-gutt-tiny {
  margin-left: 0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-4-tiny\@large, .u-gutt-2-4-tiny\@large, .u-gutt-tiny\@large {
      margin-left: 0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-4-tiny\@small, .u-gutt-2-4-tiny\@small, .u-gutt-tiny\@small {
      margin-left: 0.3125rem; } }

/*
---
name: Offset
category: 6. Trumps > Spacing Units
---

`margin` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Offset > Offset Top
category: 6. Trumps > Spacing Units
---

`margin-top` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset-1`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset-1">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset-1@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset-1@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-1-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-1-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-1-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-1-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-1-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Offset > Offset Right
category: 6. Trumps > Spacing Units
---

`margin-right` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset-2`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset-2">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset-2@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset-2@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-2-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-2-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-2-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-2-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-2-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Offset > Offset Bottom
category: 6. Trumps > Spacing Units
---

`margin-bottom` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset-3`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset-3">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset-3@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset-3@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-3-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-3-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-3-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-3-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-3-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Offset > Offset Left
category: 6. Trumps > Spacing Units
---

`margin-left` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset-4`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset-4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset-4@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset-4@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-4-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-4-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-4-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-4-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-4-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Offset > Top and Bottom
category: 6. Trumps > Spacing Units
---

`margin-top` and `margin-bottom` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset-1-3`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset-1-3">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset-1-3@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset-1-3@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-1-3-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-1-3-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-1-3-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-1-3-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-1-3-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
/*
---
name: Offset > Right and Left
category: 6. Trumps > Spacing Units
---

`margin-top` and `margin-bottom` negative offset of an element, can be applied to all elements

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes) for `Default`, `Fixed`, `Large`, and `Large (fixed)`.

Versions:
* Default - `.u-offset-2-4`: Default unit (`$default-gutt`) above `$bp-gutt` and .5 the default unit (`$default-gutt` * .5) below `$bp-gutt`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-gutt`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-gutt` * 2) above `$bp-gutt` and default unit (`$default-gutt`) below `$bp-gutt`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-gutt` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-gutt` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-gutt` * .25)

```demo.html
<div class="u-offset-2-4">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```small.html
<div class="u-offset-2-4@small">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```large.html
<div class="u-offset-2-4@large">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```fixed.html
<div class="u-offset-2-4-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimes.html
<div class="u-offset-2-4-lg">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```twotimesfixed..html
<div class="u-offset-2-4-lg-fixed">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```half.html
<div class="u-offset-2-4-sm">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

```tiny.html
<div class="u-offset-2-4-tiny">
	<div>
		•••
	</div>
	<div>
		•••
	</div>
</div>
```

*/
@media screen and (min-width: 25.556rem) {
  .u-offset-1, .u-offset, .u-offset-1-3 {
    margin-top: -1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-1, .u-offset, .u-offset-1-3 {
    margin-top: -0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-1\@large, .u-offset\@large, .u-offset-1-3\@large {
    margin-top: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-1\@large, .u-offset\@large, .u-offset-1-3\@large {
    margin-top: -0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-1\@small, .u-offset\@small, .u-offset-1-3\@small {
    margin-top: -1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-1\@small, .u-offset\@small, .u-offset-1-3\@small {
    margin-top: -0.625rem; } }

.u-offset-1-fixed, .u-offset-1-3-fixed, .u-offset-fixed {
  margin-top: -1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-1-fixed\@large, .u-offset-1-3-fixed\@large, .u-offset-fixed\@large {
      margin-top: -1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-1-fixed\@small, .u-offset-1-3-fixed\@small, .u-offset-fixed\@small {
      margin-top: -1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-1-lg, .u-offset-1-3-lg, .u-offset-lg {
    margin-top: -2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-1-lg, .u-offset-1-3-lg, .u-offset-lg {
    margin-top: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-1-lg\@large, .u-offset-1-3-lg\@large, .u-offset-lg\@large {
    margin-top: -2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-1-lg\@large, .u-offset-1-3-lg\@large, .u-offset-lg\@large {
    margin-top: -1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-1-lg\@small, .u-offset-1-3-lg\@small, .u-offset-lg\@small {
    margin-top: -2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-1-lg\@small, .u-offset-1-3-lg\@small, .u-offset-lg\@small {
    margin-top: -1.25rem; } }

.u-offset-1-lg-fixed, .u-offset-1-3-lg-fixed, .u-offset-lg-fixed {
  margin-top: -2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-1-lg-fixed\@large, .u-offset-1-3-lg-fixed\@large, .u-offset-lg-fixed\@large {
      margin-top: -2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-1-lg-fixed\@small, .u-offset-1-3-lg-fixed\@small, .u-offset-lg-fixed\@small {
      margin-top: -2.5rem; } }
.u-offset-1-sm, .u-offset-1-3-sm, .u-offset-sm {
  margin-top: -0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-1-sm\@large, .u-offset-1-3-sm\@large, .u-offset-sm\@large {
      margin-top: -0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-1-sm\@small, .u-offset-1-3-sm\@small, .u-offset-sm\@small {
      margin-top: -0.625rem; } }
.u-offset-1-tiny, .u-offset-1-3-tiny, .u-offset-tiny {
  margin-top: -0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-1-tiny\@large, .u-offset-1-3-tiny\@large, .u-offset-tiny\@large {
      margin-top: -0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-1-tiny\@small, .u-offset-1-3-tiny\@small, .u-offset-tiny\@small {
      margin-top: -0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-2, .u-offset, .u-offset-2-4 {
    margin-right: -1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-2, .u-offset, .u-offset-2-4 {
    margin-right: -0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-2\@large, .u-offset\@large, .u-offset-2-4\@large {
    margin-right: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-2\@large, .u-offset\@large, .u-offset-2-4\@large {
    margin-right: -0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-2\@small, .u-offset\@small, .u-offset-2-4\@small {
    margin-right: -1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-2\@small, .u-offset\@small, .u-offset-2-4\@small {
    margin-right: -0.625rem; } }

.u-offset-2-fixed, .u-offset-2-4-fixed, .u-offset-fixed {
  margin-right: -1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-2-fixed\@large, .u-offset-2-4-fixed\@large, .u-offset-fixed\@large {
      margin-right: -1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-2-fixed\@small, .u-offset-2-4-fixed\@small, .u-offset-fixed\@small {
      margin-right: -1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-2-lg, .u-offset-2-4-lg, .u-offset-lg {
    margin-right: -2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-2-lg, .u-offset-2-4-lg, .u-offset-lg {
    margin-right: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-2-lg\@large, .u-offset-2-4-lg\@large, .u-offset-lg\@large {
    margin-right: -2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-2-lg\@large, .u-offset-2-4-lg\@large, .u-offset-lg\@large {
    margin-right: -1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-2-lg\@small, .u-offset-2-4-lg\@small, .u-offset-lg\@small {
    margin-right: -2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-2-lg\@small, .u-offset-2-4-lg\@small, .u-offset-lg\@small {
    margin-right: -1.25rem; } }

.u-offset-2-lg-fixed, .u-offset-2-4-lg-fixed, .u-offset-lg-fixed {
  margin-right: -2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-2-lg-fixed\@large, .u-offset-2-4-lg-fixed\@large, .u-offset-lg-fixed\@large {
      margin-right: -2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-2-lg-fixed\@small, .u-offset-2-4-lg-fixed\@small, .u-offset-lg-fixed\@small {
      margin-right: -2.5rem; } }
.u-offset-2-sm, .u-offset-2-4-sm, .u-offset-sm {
  margin-right: -0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-2-sm\@large, .u-offset-2-4-sm\@large, .u-offset-sm\@large {
      margin-right: -0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-2-sm\@small, .u-offset-2-4-sm\@small, .u-offset-sm\@small {
      margin-right: -0.625rem; } }
.u-offset-2-tiny, .u-offset-2-4-tiny, .u-offset-tiny {
  margin-right: -0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-2-tiny\@large, .u-offset-2-4-tiny\@large, .u-offset-tiny\@large {
      margin-right: -0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-2-tiny\@small, .u-offset-2-4-tiny\@small, .u-offset-tiny\@small {
      margin-right: -0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-3, .u-offset, .u-offset-1-3 {
    margin-bottom: -1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-3, .u-offset, .u-offset-1-3 {
    margin-bottom: -0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-3\@large, .u-offset\@large, .u-offset-1-3\@large {
    margin-bottom: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-3\@large, .u-offset\@large, .u-offset-1-3\@large {
    margin-bottom: -0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-3\@small, .u-offset\@small, .u-offset-1-3\@small {
    margin-bottom: -1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-3\@small, .u-offset\@small, .u-offset-1-3\@small {
    margin-bottom: -0.625rem; } }

.u-offset-3-fixed, .u-offset-1-3-fixed, .u-offset-fixed {
  margin-bottom: -1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-3-fixed\@large, .u-offset-1-3-fixed\@large, .u-offset-fixed\@large {
      margin-bottom: -1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-3-fixed\@small, .u-offset-1-3-fixed\@small, .u-offset-fixed\@small {
      margin-bottom: -1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-3-lg, .u-offset-1-3-lg, .u-offset-lg {
    margin-bottom: -2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-3-lg, .u-offset-1-3-lg, .u-offset-lg {
    margin-bottom: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-3-lg\@large, .u-offset-1-3-lg\@large, .u-offset-lg\@large {
    margin-bottom: -2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-3-lg\@large, .u-offset-1-3-lg\@large, .u-offset-lg\@large {
    margin-bottom: -1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-3-lg\@small, .u-offset-1-3-lg\@small, .u-offset-lg\@small {
    margin-bottom: -2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-3-lg\@small, .u-offset-1-3-lg\@small, .u-offset-lg\@small {
    margin-bottom: -1.25rem; } }

.u-offset-3-lg-fixed, .u-offset-1-3-lg-fixed, .u-offset-lg-fixed {
  margin-bottom: -2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-3-lg-fixed\@large, .u-offset-1-3-lg-fixed\@large, .u-offset-lg-fixed\@large {
      margin-bottom: -2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-3-lg-fixed\@small, .u-offset-1-3-lg-fixed\@small, .u-offset-lg-fixed\@small {
      margin-bottom: -2.5rem; } }
.u-offset-3-sm, .u-offset-1-3-sm, .u-offset-sm {
  margin-bottom: -0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-3-sm\@large, .u-offset-1-3-sm\@large, .u-offset-sm\@large {
      margin-bottom: -0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-3-sm\@small, .u-offset-1-3-sm\@small, .u-offset-sm\@small {
      margin-bottom: -0.625rem; } }
.u-offset-3-tiny, .u-offset-1-3-tiny, .u-offset-tiny {
  margin-bottom: -0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-3-tiny\@large, .u-offset-1-3-tiny\@large, .u-offset-tiny\@large {
      margin-bottom: -0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-3-tiny\@small, .u-offset-1-3-tiny\@small, .u-offset-tiny\@small {
      margin-bottom: -0.3125rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-4, .u-offset, .u-offset-2-4 {
    margin-left: -1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-4, .u-offset, .u-offset-2-4 {
    margin-left: -0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-4\@large, .u-offset\@large, .u-offset-2-4\@large {
    margin-left: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-4\@large, .u-offset\@large, .u-offset-2-4\@large {
    margin-left: -0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-4\@small, .u-offset\@small, .u-offset-2-4\@small {
    margin-left: -1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-4\@small, .u-offset\@small, .u-offset-2-4\@small {
    margin-left: -0.625rem; } }

.u-offset-4-fixed, .u-offset-2-4-fixed, .u-offset-fixed {
  margin-left: -1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-4-fixed\@large, .u-offset-2-4-fixed\@large, .u-offset-fixed\@large {
      margin-left: -1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-4-fixed\@small, .u-offset-2-4-fixed\@small, .u-offset-fixed\@small {
      margin-left: -1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-offset-4-lg, .u-offset-2-4-lg, .u-offset-lg {
    margin-left: -2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-offset-4-lg, .u-offset-2-4-lg, .u-offset-lg {
    margin-left: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-4-lg\@large, .u-offset-2-4-lg\@large, .u-offset-lg\@large {
    margin-left: -2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-4-lg\@large, .u-offset-2-4-lg\@large, .u-offset-lg\@large {
    margin-left: -1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-offset-4-lg\@small, .u-offset-2-4-lg\@small, .u-offset-lg\@small {
    margin-left: -2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-offset-4-lg\@small, .u-offset-2-4-lg\@small, .u-offset-lg\@small {
    margin-left: -1.25rem; } }

.u-offset-4-lg-fixed, .u-offset-2-4-lg-fixed, .u-offset-lg-fixed {
  margin-left: -2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-4-lg-fixed\@large, .u-offset-2-4-lg-fixed\@large, .u-offset-lg-fixed\@large {
      margin-left: -2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-4-lg-fixed\@small, .u-offset-2-4-lg-fixed\@small, .u-offset-lg-fixed\@small {
      margin-left: -2.5rem; } }
.u-offset-4-sm, .u-offset-2-4-sm, .u-offset-sm {
  margin-left: -0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-4-sm\@large, .u-offset-2-4-sm\@large, .u-offset-sm\@large {
      margin-left: -0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-4-sm\@small, .u-offset-2-4-sm\@small, .u-offset-sm\@small {
      margin-left: -0.625rem; } }
.u-offset-4-tiny, .u-offset-2-4-tiny, .u-offset-tiny {
  margin-left: -0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-offset-4-tiny\@large, .u-offset-2-4-tiny\@large, .u-offset-tiny\@large {
      margin-left: -0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-offset-4-tiny\@small, .u-offset-2-4-tiny\@small, .u-offset-tiny\@small {
      margin-left: -0.3125rem; } }

/*
---
name: Space Grid - Padding
category: 6. Trumps > Spacing Units
---

The good ole trick of adding space around elements, then offsetting the parent to create grid appearance. Apply this class to a parent element.

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes)

Versions:
* `.u-grid-between-space`: Default unit (`$default-space`) with children spaced with `padding`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<ul class="u-grid-between-space || u-unlist">
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
</li>
```
*/
/*
---
name: Space Grid - Padding Extended
category: 6. Trumps > Spacing Units
---

Add space around children elements and have gutters with the same spacing. Apply this class to a parent element.

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes)

Versions:
* `.u-grid-space`: Default unit (`$default-space`) with children spaced with `padding`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<ul class="u-grid-space || u-unlist">
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
</li>
```
*/
/*
---
name: Space Grid - Margin
category: 6. Trumps > Spacing Units
---

The good ole trick of adding space around elements, then offsetting the parent to create grid appearance. Apply this class to a parent element.

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes)

Versions:
* `.u-grid-between-space`: Default unit (`$default-space`) with children spaced with `padding`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<ul class="u-grid-between-gutt || u-unlist">
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
</li>
```
*/
/*
---
name: Space Grid - Margin Extended
category: 6. Trumps > Spacing Units
---

Add space around children elements and have gutters with the same spacing. Apply this class to a parent element.

*  Contains [Suffixcate](/#suffixcate) options (`@small` and `@large` suffixes)

Versions:
* `.u-grid-gutt`: Default unit (`$default-space`) with children spaced with `padding`
* Fixed - Suffix: `-fixed`: Maintains default unit (`$default-space`)
* Large - Suffix: `-lg`: 2x the default unit (`$default-space` * 2) above `$bp-space` and default unit (`$default-space`) below `$bp-space`
* Large (fixed) - Suffix: `-lg-fixed`:  Maintains 2x default unit (`$default-space` * 2)
* Small - Suffix: `-sm`: .5 the default unit (`$default-space` * .5)
* Tiny - Suffix: `-tiny`: .25 the default unit (`$default-space` * .25)

```demo.html
<ul class="u-grid-gutt || u-unlist">
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
	<li class="u-dark-bg">
		•••
	</li>
</li>
```
*/
@media screen and (min-width: 25.556rem) {
  .u-grid-between-space, .u-grid-between-gutt {
    margin-top: -1.25rem;
    margin-right: -1.25rem;
    margin-left: -1.25rem; } }
  @media screen and (min-width: 25.556rem) and (min-width: 47.5rem) {
    .u-grid-between-space\@large, .u-grid-between-gutt\@large {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }
  @media screen and (min-width: 25.556rem) and (max-width: 47.5rem) {
    .u-grid-between-space\@small, .u-grid-between-gutt\@small {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }

@media screen and (max-width: 25.556rem) {
  .u-grid-between-space, .u-grid-between-gutt {
    margin-top: -0.625rem;
    margin-right: -0.625rem;
    margin-left: -0.625rem; } }
  @media screen and (max-width: 25.556rem) and (min-width: 47.5rem) {
    .u-grid-between-space\@large, .u-grid-between-gutt\@large {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }
  @media screen and (max-width: 25.556rem) and (max-width: 47.5rem) {
    .u-grid-between-space\@small, .u-grid-between-gutt\@small {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }

.u-grid-between-space-tiny, .u-grid-between-gutt-tiny {
  margin-top: -0.3125rem;
  margin-right: -0.625rem;
  margin-left: -0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    .u-grid-between-space-tiny\@large, .u-grid-between-gutt-tiny\@large {
      margin-top: -0.3125rem;
      margin-right: -0.625rem;
      margin-left: -0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-grid-between-space-tiny\@small, .u-grid-between-gutt-tiny\@small {
      margin-top: -0.3125rem;
      margin-right: -0.625rem;
      margin-left: -0.3125rem; } }
.u-grid-between-space-sm, .u-grid-between-gutt-sm {
  margin-top: -0.625rem;
  margin-right: -0.625rem;
  margin-left: -0.625rem; }
  @media screen and (min-width: 47.5rem) {
    .u-grid-between-space-sm\@large, .u-grid-between-gutt-sm\@large {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-grid-between-space-sm\@small, .u-grid-between-gutt-sm\@small {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }
.u-grid-between-space-fixed, .u-grid-between-gutt-fixed {
  margin-top: -1.25rem;
  margin-right: -1.25rem;
  margin-left: -1.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-grid-between-space-fixed\@large, .u-grid-between-gutt-fixed\@large {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-grid-between-space-fixed\@small, .u-grid-between-gutt-fixed\@small {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-grid-between-space-2x, .u-grid-between-space-lg, .u-grid-between-gutt-2x, .u-grid-between-gutt-lg {
    margin-top: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-between-space-2x, .u-grid-between-space-lg, .u-grid-between-gutt-2x, .u-grid-between-gutt-lg {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-space-2x\@large, .u-grid-between-space-lg\@large, .u-grid-between-gutt-2x\@large, .u-grid-between-gutt-lg\@large {
    margin-top: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-space-2x\@large, .u-grid-between-space-lg\@large, .u-grid-between-gutt-2x\@large, .u-grid-between-gutt-lg\@large {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-space-2x\@small, .u-grid-between-space-lg\@small, .u-grid-between-gutt-2x\@small, .u-grid-between-gutt-lg\@small {
    margin-top: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-space-2x\@small, .u-grid-between-space-lg\@small, .u-grid-between-gutt-2x\@small, .u-grid-between-gutt-lg\@small {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem; } }

@media screen and (min-width: 25.556rem) {
  .u-grid-between-space > * {
    padding: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-between-space > * {
    padding: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-space\@large > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-space\@large > * {
    padding: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-space\@small > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-space\@small > * {
    padding: 0.625rem; } }

.u-grid-between-space-tiny > * {
  padding: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-between-space-tiny\@large > * {
    padding: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-between-space-tiny\@small > * {
    padding: 0.3125rem; } }
.u-grid-between-space-sm > * {
  padding: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-between-space-sm\@large > * {
    padding: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-between-space-sm\@small > * {
    padding: 0.625rem; } }
.u-grid-between-space-fixed > * {
  padding: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-between-space-fixed\@large > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-between-space-fixed\@small > * {
    padding: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-grid-between-space-2x > *, .u-grid-between-space-lg > * {
    padding: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-between-space-2x > *, .u-grid-between-space-lg > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-space-2x\@large > *, .u-grid-between-space-lg\@large > * {
    padding: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-space-2x\@large > *, .u-grid-between-space-lg\@large > * {
    padding: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-space-2x\@small > *, .u-grid-between-space-lg\@small > * {
    padding: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-space-2x\@small > *, .u-grid-between-space-lg\@small > * {
    padding: 1.25rem; } }

@media screen and (min-width: 25.556rem) {
  .u-grid-between-gutt > * {
    margin: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-between-gutt > * {
    margin: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-gutt\@large > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-gutt\@large > * {
    margin: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-gutt\@small > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-gutt\@small > * {
    margin: 0.625rem; } }

.u-grid-between-gutt-tiny > * {
  margin: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-between-gutt-tiny\@large > * {
    margin: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-between-gutt-tiny\@small > * {
    margin: 0.3125rem; } }
.u-grid-between-gutt-sm > * {
  margin: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-between-gutt-sm\@large > * {
    margin: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-between-gutt-sm\@small > * {
    margin: 0.625rem; } }
.u-grid-between-gutt-fixed > * {
  margin: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-between-gutt-fixed\@large > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-between-gutt-fixed\@small > * {
    margin: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-grid-between-gutt-2x > *, .u-grid-between-gutt-lg > * {
    margin: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-between-gutt-2x > *, .u-grid-between-gutt-lg > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-gutt-2x\@large > *, .u-grid-between-gutt-lg\@large > * {
    margin: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-gutt-2x\@large > *, .u-grid-between-gutt-lg\@large > * {
    margin: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-between-gutt-2x\@small > *, .u-grid-between-gutt-lg\@small > * {
    margin: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-between-gutt-2x\@small > *, .u-grid-between-gutt-lg\@small > * {
    margin: 1.25rem; } }

@media screen and (min-width: 25.556rem) {
  .u-grid-space > * {
    padding: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-space > * {
    padding: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-space\@large > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-space\@large > * {
    padding: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-space\@small > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-space\@small > * {
    padding: 0.625rem; } }

.u-grid-space-tiny > * {
  padding: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-space-tiny\@large > * {
    padding: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-space-tiny\@small > * {
    padding: 0.3125rem; } }
.u-grid-space-sm > * {
  padding: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-space-sm\@large > * {
    padding: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-space-sm\@small > * {
    padding: 0.625rem; } }
.u-grid-space-fixed > * {
  padding: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-space-fixed\@large > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-space-fixed\@small > * {
    padding: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-grid-space-2x > *, .u-grid-space-lg > * {
    padding: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-space-2x > *, .u-grid-space-lg > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-space-2x\@large > *, .u-grid-space-lg\@large > * {
    padding: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-space-2x\@large > *, .u-grid-space-lg\@large > * {
    padding: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-space-2x\@small > *, .u-grid-space-lg\@small > * {
    padding: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-space-2x\@small > *, .u-grid-space-lg\@small > * {
    padding: 1.25rem; } }

@media screen and (min-width: 25.556rem) {
  .u-grid-gutt > * {
    margin: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-gutt > * {
    margin: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-gutt\@large > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-gutt\@large > * {
    margin: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-gutt\@small > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-gutt\@small > * {
    margin: 0.625rem; } }

.u-grid-gutt-tiny > * {
  margin: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-gutt-tiny\@large > * {
    margin: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-gutt-tiny\@small > * {
    margin: 0.3125rem; } }
.u-grid-gutt-sm > * {
  margin: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-gutt-sm\@large > * {
    margin: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-gutt-sm\@small > * {
    margin: 0.625rem; } }
.u-grid-gutt-fixed > * {
  margin: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  .u-grid-gutt-fixed\@large > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  .u-grid-gutt-fixed\@small > * {
    margin: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  .u-grid-gutt-2x > *, .u-grid-gutt-lg > * {
    margin: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  .u-grid-gutt-2x > *, .u-grid-gutt-lg > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-gutt-2x\@large > *, .u-grid-gutt-lg\@large > * {
    margin: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-gutt-2x\@large > *, .u-grid-gutt-lg\@large > * {
    margin: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  .u-grid-gutt-2x\@small > *, .u-grid-gutt-lg\@small > * {
    margin: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  .u-grid-gutt-2x\@small > *, .u-grid-gutt-lg\@small > * {
    margin: 1.25rem; } }

/*
---
name: Webfonts
category: 6. Trumps > Glyphs
---

Webfonts are can be custom created using [Icomoon](http://icomoon.io/app/).

Reference to glyphs are found [here](/assets/webfont/demo.html)

Core glyphs are located in `~/assets/fonts/webfont`. Update by uploading the `selection.json` to [Icomoon app](http://icomoon.io/app/).

*/
@font-face {
  font-family: 'webfont';
  src: url("https://s3.amazonaws.com/ohlq.bybeapp.com/assets/fonts/webfont/fonts/webfont.eot");
  src: url("https://s3.amazonaws.com/ohlq.bybeapp.com/assets/fonts/webfont/fonts/webfont.eot") format("embedded-opentype"), url("https://s3.amazonaws.com/ohlq.bybeapp.com/assets/fonts/webfont/fonts/webfont.woff") format("woff"), url("https://s3.amazonaws.com/ohlq.bybeapp.com/assets/fonts/webfont/fonts/webfont.ttf") format("truetype"), url("https://s3.amazonaws.com/ohlq.bybeapp.com/assets/fonts/webfont/fonts/webfont.svg#webfont") format("svg");
  font-weight: normal;
  font-style: normal; }
.u-glyph, .u-glyph-before:before, .u-glyph-after:after {
  font-family: 'webfont';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap; }
  @media screen and (min-width: 47.5rem) {
    .u-glyph\@large, .u-glyph-before\@large:before, .u-glyph-after\@large:after {
      font-family: 'webfont';
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      white-space: nowrap; } }
  @media screen and (max-width: 47.5rem) {
    .u-glyph\@small, .u-glyph-before\@small:before, .u-glyph-after\@small:after {
      font-family: 'webfont';
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      white-space: nowrap; } }

.u-glyph-before[data-icon]:before, .u-glyph-after[data-icon]:after {
  content: attr(data-icon); }
  @media screen and (min-width: 47.5rem) {
    .u-glyph-before\@large[data-icon]:before, .u-glyph-after\@large[data-icon]:after {
      content: attr(data-icon); } }
  @media screen and (max-width: 47.5rem) {
    .u-glyph-before\@small[data-icon]:before, .u-glyph-after\@small[data-icon]:after {
      content: attr(data-icon); } }

.u-glyph--no-speak, .u-glyph-before--no-speak:before, .u-glyph-after--no-speak:after {
  speak: none; }
  @media screen and (min-width: 47.5rem) {
    .u-glyph-before\@large--no-speak:before, .u-glyph-after\@large--no-speak:after {
      speak: none; } }
  @media screen and (max-width: 47.5rem) {
    .u-glyph-before\@small--no-speak:before, .u-glyph-after\@small--no-speak:after {
      speak: none; } }

/*
---
name: Glyph
category: 6. Trumps > Glyphs
---

Utilizing [Webfont](/#webfonts). See additional documentation and examples [here](https://codepen.io/nicetransition/pen/zryoqr?editors=1000)

*  Contains [Suffixcate](/#suffixcate) option.

Versions
* Default: `.u-glyph` - Replaces character with glyph, add `.u-glyph--no-speak` to prevent readers speaking the character
* Default Small: `.u-glyph@small` - Replaces character with glyph for small screens
* Default Large: `.u-glyph@large` - Replaces character with glyph for large screens
* Before: `.u-glyph-before` - Replaces character with glyph, add `.u-glyph-before--no-speak` to prevent readers speaking the character. Add `data-icon` with a value equal to the character you want to replace with a glyph.
* Before Small: `.u-glyph-before@small` - Replaces character with glyph for small screens. Add `data-icon` with a value equal to the character you want to replace with a glyph.
* Before Large: `.u-glyph-before@large` - Replaces character with glyph for large screens. Add `data-icon` with a value equal to the character you want to replace with a glyph.
* After: `.u-glyph-after` - Replaces character with glyph, add `.u-glyph-after--no-speak` to prevent readers speaking the character. Add `data-icon` with a value equal to the character you want to replace with a glyph.
* After Small: `.u-glyph-after@small` - Replaces character with glyph for small screens. Add `data-icon` with a value equal to the character you want to replace with a glyph.
* After Large: `.u-glyph-after@large` - Replaces character with glyph for large screens. Add `data-icon` with a value equal to the character you want to replace with a glyph.


```demo.html
<div class="u-glyph">
	<div>
		X
	</div>
</div>
```

```small.html
<div class="u-glyph@small">
	<div>
		X
	</div>
</div>
```

```large.html
<div class="u-glyph@large">
	<div>
		X
	</div>
</div>
```

```before.html
<div class="u-glyph-before" data-icon="X">
	<div>
		X
	</div>
</div>
```

```before-small.html
<div class="u-glyph-before@small" data-icon="X">
	<div>
		X
	</div>
</div>
```

```before-large.html
<div class="u-glyph-before@large" data-icon="X">
	<div>
		X
	</div>
</div>
```

```after.html
<div class="u-glyph-after" data-icon="X">
	<div>
		X
	</div>
</div>
```

```after-small.html
<div class="u-glyph-after@small" data-icon="X">
	<div>
		X
	</div>
</div>
```

```after-large.html
<div class="u-glyph-after@large" data-icon="X">
	<div>
		X
	</div>
</div>
```

*/
/*
---
name: Display > Inline
category: 6. Trumps > Displays
---

Add `display: inline` to any element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-dis-i">
	•••
</div>
```
*/
/*
---
name: Display > Inline Block
category: 6. Trumps > Displays
---

Add `display: inline-block` to any element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-dis-ib">
	•••
</div>
```
*/
/*
---
name: Display > Block
category: 6. Trumps > Displays
---

Add `display: block` to any element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-dis-b">
	•••
</div>
```
*/
/*
---
name: Display > Table
category: 6. Trumps > Displays
---

Add `display: table` to any element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-dis-t">
	<div class="u-dis-tc">
		•••
	</div>
	<div class="u-dis-tc">
		•••
	</div>
</div>
```
*/
/*
---
name: Display > Table Cell
category: 6. Trumps > Displays
---

Add `display: inline` to any element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-dis-t">
	<div class="u-dis-tc">
		•••
	</div>
	<div class="u-dis-tc">
		•••
	</div>
</div>
```
*/
/*
---
name: Display > None
category: 6. Trumps > Displays
---

Add `display: none` and `speak: none` to any element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-dis-none">
	<div>
		•••
	</div>
</div>
```
*/
.u-dis-i {
  display: inline; }

.u-dis-ib {
  display: inline-block; }
  @media screen and (min-width: 47.5rem) {
    .u-dis-ib\@large {
      display: inline-block; } }
  @media screen and (max-width: 47.5rem) {
    .u-dis-ib\@small {
      display: inline-block; } }

.u-dis-b {
  display: block; }
  @media screen and (min-width: 47.5rem) {
    .u-dis-b\@large {
      display: block; } }
  @media screen and (max-width: 47.5rem) {
    .u-dis-b\@small {
      display: block; } }

.u-dis-t {
  display: table; }
  @media screen and (min-width: 47.5rem) {
    .u-dis-t\@large {
      display: table; } }
  @media screen and (max-width: 47.5rem) {
    .u-dis-t\@small {
      display: table; } }

.u-dis-tc {
  display: table-cell; }
  @media screen and (min-width: 47.5rem) {
    .u-dis-tc\@large {
      display: table-cell; } }
  @media screen and (max-width: 47.5rem) {
    .u-dis-tc\@small {
      display: table-cell; } }

.u-dis-none {
  speak: none;
  display: none; }
  @media screen and (min-width: 47.5rem) {
    .u-dis-none\@large {
      speak: none;
      display: none; } }
  @media screen and (max-width: 47.5rem) {
    .u-dis-none\@small {
      speak: none;
      display: none; } }

/*
---
name: Position > Relative
category: 6. Trumps > Positioning
---

Add `position: relative` to an element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-pos-r">
</div>
```
*/
/*
---
name: Position > Fixed
category: 6. Trumps > Positioning
---

Add `position: fixed` to an element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-pos-f">
</div>
```
*/
/*
---
name: Position > Absolute
category: 6. Trumps > Positioning
---

Add `position: absolute` to an element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-pos-a">
</div>
```
*/
/*
---
name: Position > Sticky
category: 6. Trumps > Positioning
---

Add `position: sticky` to an element

*  Contains [Suffixcate](/#suffixcate) option.

```demo.html
<div class="u-pos-sticky">
</div>
```
*/
/*
---
name: Position > Indexes
category: 6. Trumps > Positioning
---

Add `index` to an element, options available are `0` - `12`

Variants: 

* `u-index-0`
* `u-index-1`
* `u-index-2`
* `u-index-3`
* `u-index-4`
* `u-index-5`
* `u-index-6`
* `u-index-7`
* `u-index-8`
* `u-index-9`
* `u-index-10`
* `u-index-11`
* `u-index-12`

```demo.html
<div class="u-index-5">
</div>
```
*/
.u-pos-r {
  position: relative; }
  @media screen and (min-width: 47.5rem) {
    .u-pos-r\@large {
      position: relative; } }
  @media screen and (max-width: 47.5rem) {
    .u-pos-r\@small {
      position: relative; } }

.u-pos-f {
  position: fixed; }
  @media screen and (min-width: 47.5rem) {
    .u-pos-f\@large {
      position: fixed; } }
  @media screen and (max-width: 47.5rem) {
    .u-pos-f\@small {
      position: fixed; } }

.u-pos-a {
  position: absolute; }
  @media screen and (min-width: 47.5rem) {
    .u-pos-a\@large {
      position: absolute; } }
  @media screen and (max-width: 47.5rem) {
    .u-pos-a\@small {
      position: absolute; } }

.u-pos-sticky {
  position: absolute; }
  @media screen and (min-width: 47.5rem) {
    .u-pos-sticky\@large {
      position: absolute; } }
  @media screen and (max-width: 47.5rem) {
    .u-pos-sticky\@small {
      position: absolute; } }

.u-index-0 {
  z-index: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-index-0\@large {
      z-index: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-0\@small {
      z-index: 0; } }

.u-index-0-neg {
  z-index: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-index-0-neg\@large {
      z-index: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-0-neg\@small {
      z-index: 0; } }

.u-index-1 {
  z-index: 1; }
  @media screen and (min-width: 47.5rem) {
    .u-index-1\@large {
      z-index: 1; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-1\@small {
      z-index: 1; } }

.u-index-1-neg {
  z-index: -1; }
  @media screen and (min-width: 47.5rem) {
    .u-index-1-neg\@large {
      z-index: -1; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-1-neg\@small {
      z-index: -1; } }

.u-index-2 {
  z-index: 2; }
  @media screen and (min-width: 47.5rem) {
    .u-index-2\@large {
      z-index: 2; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-2\@small {
      z-index: 2; } }

.u-index-2-neg {
  z-index: -2; }
  @media screen and (min-width: 47.5rem) {
    .u-index-2-neg\@large {
      z-index: -2; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-2-neg\@small {
      z-index: -2; } }

.u-index-3 {
  z-index: 3; }
  @media screen and (min-width: 47.5rem) {
    .u-index-3\@large {
      z-index: 3; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-3\@small {
      z-index: 3; } }

.u-index-3-neg {
  z-index: -3; }
  @media screen and (min-width: 47.5rem) {
    .u-index-3-neg\@large {
      z-index: -3; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-3-neg\@small {
      z-index: -3; } }

.u-index-4 {
  z-index: 4; }
  @media screen and (min-width: 47.5rem) {
    .u-index-4\@large {
      z-index: 4; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-4\@small {
      z-index: 4; } }

.u-index-4-neg {
  z-index: -4; }
  @media screen and (min-width: 47.5rem) {
    .u-index-4-neg\@large {
      z-index: -4; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-4-neg\@small {
      z-index: -4; } }

.u-index-5 {
  z-index: 5; }
  @media screen and (min-width: 47.5rem) {
    .u-index-5\@large {
      z-index: 5; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-5\@small {
      z-index: 5; } }

.u-index-5-neg {
  z-index: -5; }
  @media screen and (min-width: 47.5rem) {
    .u-index-5-neg\@large {
      z-index: -5; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-5-neg\@small {
      z-index: -5; } }

.u-index-6 {
  z-index: 6; }
  @media screen and (min-width: 47.5rem) {
    .u-index-6\@large {
      z-index: 6; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-6\@small {
      z-index: 6; } }

.u-index-6-neg {
  z-index: -6; }
  @media screen and (min-width: 47.5rem) {
    .u-index-6-neg\@large {
      z-index: -6; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-6-neg\@small {
      z-index: -6; } }

.u-index-7 {
  z-index: 7; }
  @media screen and (min-width: 47.5rem) {
    .u-index-7\@large {
      z-index: 7; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-7\@small {
      z-index: 7; } }

.u-index-7-neg {
  z-index: -7; }
  @media screen and (min-width: 47.5rem) {
    .u-index-7-neg\@large {
      z-index: -7; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-7-neg\@small {
      z-index: -7; } }

.u-index-8 {
  z-index: 8; }
  @media screen and (min-width: 47.5rem) {
    .u-index-8\@large {
      z-index: 8; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-8\@small {
      z-index: 8; } }

.u-index-8-neg {
  z-index: -8; }
  @media screen and (min-width: 47.5rem) {
    .u-index-8-neg\@large {
      z-index: -8; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-8-neg\@small {
      z-index: -8; } }

.u-index-9 {
  z-index: 9; }
  @media screen and (min-width: 47.5rem) {
    .u-index-9\@large {
      z-index: 9; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-9\@small {
      z-index: 9; } }

.u-index-9-neg {
  z-index: -9; }
  @media screen and (min-width: 47.5rem) {
    .u-index-9-neg\@large {
      z-index: -9; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-9-neg\@small {
      z-index: -9; } }

.u-index-10 {
  z-index: 10; }
  @media screen and (min-width: 47.5rem) {
    .u-index-10\@large {
      z-index: 10; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-10\@small {
      z-index: 10; } }

.u-index-10-neg {
  z-index: -10; }
  @media screen and (min-width: 47.5rem) {
    .u-index-10-neg\@large {
      z-index: -10; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-10-neg\@small {
      z-index: -10; } }

.u-index-11 {
  z-index: 11; }
  @media screen and (min-width: 47.5rem) {
    .u-index-11\@large {
      z-index: 11; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-11\@small {
      z-index: 11; } }

.u-index-11-neg {
  z-index: -11; }
  @media screen and (min-width: 47.5rem) {
    .u-index-11-neg\@large {
      z-index: -11; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-11-neg\@small {
      z-index: -11; } }

.u-index-12 {
  z-index: 12; }
  @media screen and (min-width: 47.5rem) {
    .u-index-12\@large {
      z-index: 12; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-12\@small {
      z-index: 12; } }

.u-index-12-neg {
  z-index: -12; }
  @media screen and (min-width: 47.5rem) {
    .u-index-12-neg\@large {
      z-index: -12; } }
  @media screen and (max-width: 47.5rem) {
    .u-index-12-neg\@small {
      z-index: -12; } }

/*
---
name: Backgrounds
category: 6. Trumps
---

Background options for images

* `.u-bg--cover`: `background-size: cover;` with a `background-repeat: no-repeat;`
* `.u-bg--full`: `background-size: 100% auto;` with a `background-repeat: no-repeat;`
* `.u-bg--top`: `background-position: top center;`
* `.u-bg--center`: `background-position: center center`
* `.u-bg--bottom`: `background-position: bottom center;`

*/
.u-bg--cover, .u-bg--full, .u-bg--top, .u-bg--center {
  background-repeat: no-repeat; }
.u-bg--cover {
  background-size: cover; }
.u-bg--full {
  background-size: 100% auto; }
.u-bg--top {
  background-position: top center; }
.u-bg--center {
  background-position: center center; }
.u-bg--bottom {
  background-position: bottom center; }

/*
---
name: Object Fit
category: 6. Trumps > Extras
---

Add `object-fit` with:

* `.u-o-f`, `.u-of-cover`, `u-object-fit-cover`

*/
.u-o-f, .u-of-cover, .u-object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover; }

.u-of-fill, .u-object-fit-fill {
  -o-object-fit: fill;
     object-fit: fill; }

.u-of-contain, .u-object-fit-contain {
  -o-object-fit: contain;
     object-fit: contain; }

/*
---
name: Alignment
category: 6. Trumps > Typography
---

Text alignments with `text-align` helper classes

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.

`.u-a-r`: Right align
```uar.html
<p class="u-a-r">
	Lorem ipsum.
</p>
```

`.u-a-c`: Center align
```uar.html
<p class="u-a-c">
	Lorem ipsum.
</p>
```

`.u-a-l`: Left align
```ual.html
<p class="u-a-l:>
	Lorem ipsum.
</p>
```
`.u-a-j`: Justifu align
```uar.html
<p class="u-a-r">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
</p>
```

*/
.u-a-l {
  text-align: left; }
  @media screen and (min-width: 47.5rem) {
    .u-a-l\@large {
      text-align: left; } }
  @media screen and (max-width: 47.5rem) {
    .u-a-l\@small {
      text-align: left; } }

.u-a-c {
  text-align: center; }
  @media screen and (min-width: 47.5rem) {
    .u-a-c\@large {
      text-align: center; } }
  @media screen and (max-width: 47.5rem) {
    .u-a-c\@small {
      text-align: center; } }

.u-a-r {
  text-align: right; }
  @media screen and (min-width: 47.5rem) {
    .u-a-r\@large {
      text-align: right; } }
  @media screen and (max-width: 47.5rem) {
    .u-a-r\@small {
      text-align: right; } }

.u-a-j {
  text-align: justify; }
  @media screen and (min-width: 47.5rem) {
    .u-a-j\@large {
      text-align: justify; } }
  @media screen and (max-width: 47.5rem) {
    .u-a-j\@small {
      text-align: justify; } }

/*
---
name: Uppercase
category: 6. Trumps > Typography
---

Text alignments with `text-transform` helper classes

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.
* Variations can be used: `.u-emphasize` or `.u-upper`

`.u-emphasize`: Uppercase
```demo.html
<p class="u-emphasize">
	Lorem ipsum.
</p>
```


*/
.u-emphasize, .u-upper, .u-uppercase {
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    .u-emphasize\@large, .u-upper\@large, .u-uppercase\@large {
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) {
    .u-emphasize\@small, .u-upper\@small, .u-uppercase\@small {
      text-transform: uppercase; } }

.u-capitalize {
  text-transform: capitalize; }
  @media screen and (min-width: 47.5rem) {
    .u-capitalize\@large {
      text-transform: capitalize; } }
  @media screen and (max-width: 47.5rem) {
    .u-capitalize\@small {
      text-transform: capitalize; } }

/*
---
name: Italic
category: 6. Trumps > Typography
---

Text alignments with `font-style: italic` helper classes

Additional options:
*  Contains [Suffixcate](/#suffixcate) options.

`.u-italic`: Uppercase
```demo.html
<p class="u-italic">
	Lorem ipsum.
</p>
```
*/
.u-italic {
  font-style: italic; }

/*
---
name: Full Width
category: 6. Trumps > Extras
---

Adds `width: 100%` properties with `.u-f-r` class, apply to children with `.u-f-r-children`

Options:
* `.u-full`: Full width with `width: 100%`
* `.u-full-max`: Full width with `max-width: 100%`
* `.u-full-min`: Full width with `min-width: 100%`

*/
.u-full {
  width: 100%; }
  @media screen and (min-width: 47.5rem) {
    .u-full\@large {
      width: 100%; } }
  @media screen and (max-width: 47.5rem) {
    .u-full\@small {
      width: 100%; } }
  .u-full-max {
    max-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      .u-full-max\@large {
        max-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      .u-full-max\@small {
        max-width: 100%; } }
  .u-full-min {
    min-width: 100%; }
    @media screen and (min-width: 47.5rem) {
      .u-full-min\@large {
        min-width: 100%; } }
    @media screen and (max-width: 47.5rem) {
      .u-full-min\@small {
        min-width: 100%; } }

img.u-full, textarea.u-full, span.u-full, label.u-full, aside.u-full, main.u-full {
  display: block; }
  @media screen and (min-width: 47.5rem) {
    img.u-full\@large, textarea.u-full\@large, span.u-full\@large, label.u-full\@large, aside.u-full\@large, main.u-full\@large {
      display: block; } }
  @media screen and (max-width: 47.5rem) {
    img.u-full\@small, textarea.u-full\@small, span.u-full\@small, label.u-full\@small, aside.u-full\@small, main.u-full\@small {
      display: block; } }

/*
---
name: Round
category: 6. Trumps > Extras
---

Adds `border-radius: 50%` making element a circle with `.u-round`

Options:

*  Contains [Suffixcate](/#suffixcate) options
* `.u-full`: Full width with `width: 100%`
* `.u-full-max`: Full width with `max-width: 100%`
* `.u-full-min`: Full width with `min-width: 100%`

*/
.u-round {
  border-radius: 50%;
  overflow: hidden; }
  @media screen and (min-width: 47.5rem) {
    .u-round\@large {
      border-radius: 50%;
      overflow: hidden; } }
  @media screen and (max-width: 47.5rem) {
    .u-round\@small {
      border-radius: 50%;
      overflow: hidden; } }

/*
---
name: Center
category: 6. Trumps > Extras
---

Options for `margin-right` and `margin-left` CSS properties being set to `auto` with `.u-center`

*  Contains [Suffixcate](/#suffixcate) options

*/
/*
---
name: Text decoration
category: 6. Trumps > Extras
---

Options for `text-decoration` and `margin-left` CSS property

*  Contains [Suffixcate](/#suffixcate) options
* `.u-td-none`: `text-decoration: none;`
* `.u-td`: `text-decoration: underline;`

*/
.u-td-none {
  text-decoration: none; }

.u-td {
  text-decoration: underline; }

/*
---
name: Minimal Click Area
category: 6. Trumps > Extras
---

Add minimum "click area" for a call to action for accessibility reasons, apply `.u-min-click` (`min-width` and `min-height` of `40px`)

*/
.u-min-click {
  min-width: 40px;
  min-height: 40px; }

/*
---
name: Disable Select
category: 6. Trumps > Extras
---

Remove select ability with `.u-disable-select`

*/
.u-disable-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/*
---
name: Circle
category: 6. Trumps > Extras
---

Make element a circle add `.u-circle`

*/
.u-circle {
  border-radius: 100%;
  overflow: hidden; }
  @media screen and (min-width: 47.5rem) {
    .u-circle\@large {
      border-radius: 100%;
      overflow: hidden; } }
  @media screen and (max-width: 47.5rem) {
    .u-circle\@small {
      border-radius: 100%;
      overflow: hidden; } }

/*
---
name: Order
category: 6. Trumps > Extras
---

Requires parent container to have either `display: flex;` or `display: grid;`.

*  Contains [Suffixcate](/#suffixcate) options available for all options and utility versions;

Options:
* `.u-order-0`: `order: 0;`
* `.u-order-1`: `order: 1;`
* `.u-order-1-neg`: `order: -1;`
* `.u-order-2`: `order: 2;`
* `.u-order-2-neg`: `order: -2;`
* `.u-order-3`: `order: 3;`
* `.u-order-3-neg`: `order: -3;`
* `.u-order-4`: `order: 4;`
* `.u-order-4-neg`: `order: -4;`
* `.u-order-5`: `order: 5;`
* `.u-order-5-neg`: `order: -5;`
* `.u-order-6`: `order: 6;`
* `.u-order-6-neg`: `order: -6;`
* `.u-order-7`: `order: 7;`
* `.u-order-7-neg`: `order: -7;`
* `.u-order-8`: `order: 8;`
* `.u-order-8-neg`: `order: -8;`
* `.u-order-9`: `order: 9;`
* `.u-order-9-neg`: `order: -9`
* `.u-order-10`: `order: 10;`
* `.u-order-10-neg`: `order: -10;`
* `.u-order-11`: `order: 11;`
* `.u-order-11-neg`: `order: -11;`
* `.u-order-12`: `order: 12;`
* `.u-order-12-neg`: `order: -12;`


```demo.html
<div class="o-flex>
	<div class="u-order-12">
		1
	</div>
	<div class="u-order-2-neg@large">
		2
	</div>
	<div>
		3
	</div>
	<div class="u-order-2@small">
		4
	</div>
</div>
```

*/
.u-order-0 {
  order: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-order-0\@large {
      order: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-0\@small {
      order: 0; } }

.u-order-1 {
  order: 1; }
  @media screen and (min-width: 47.5rem) {
    .u-order-1\@large {
      order: 1; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-1\@small {
      order: 1; } }

.u-order-1-neg {
  order: -1; }
  @media screen and (min-width: 47.5rem) {
    .u-order-1-neg\@large {
      order: -1; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-1-neg\@small {
      order: -1; } }

.u-order-2 {
  order: 2; }
  @media screen and (min-width: 47.5rem) {
    .u-order-2\@large {
      order: 2; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-2\@small {
      order: 2; } }

.u-order-2-neg {
  order: -2; }
  @media screen and (min-width: 47.5rem) {
    .u-order-2-neg\@large {
      order: -2; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-2-neg\@small {
      order: -2; } }

.u-order-3 {
  order: 3; }
  @media screen and (min-width: 47.5rem) {
    .u-order-3\@large {
      order: 3; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-3\@small {
      order: 3; } }

.u-order-3-neg {
  order: -3; }
  @media screen and (min-width: 47.5rem) {
    .u-order-3-neg\@large {
      order: -3; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-3-neg\@small {
      order: -3; } }

.u-order-4 {
  order: 4; }
  @media screen and (min-width: 47.5rem) {
    .u-order-4\@large {
      order: 4; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-4\@small {
      order: 4; } }

.u-order-4-neg {
  order: -4; }
  @media screen and (min-width: 47.5rem) {
    .u-order-4-neg\@large {
      order: -4; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-4-neg\@small {
      order: -4; } }

.u-order-5 {
  order: 5; }
  @media screen and (min-width: 47.5rem) {
    .u-order-5\@large {
      order: 5; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-5\@small {
      order: 5; } }

.u-order-5-neg {
  order: -5; }
  @media screen and (min-width: 47.5rem) {
    .u-order-5-neg\@large {
      order: -5; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-5-neg\@small {
      order: -5; } }

.u-order-6 {
  order: 6; }
  @media screen and (min-width: 47.5rem) {
    .u-order-6\@large {
      order: 6; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-6\@small {
      order: 6; } }

.u-order-6-neg {
  order: -6; }
  @media screen and (min-width: 47.5rem) {
    .u-order-6-neg\@large {
      order: -6; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-6-neg\@small {
      order: -6; } }

.u-order-7 {
  order: 7; }
  @media screen and (min-width: 47.5rem) {
    .u-order-7\@large {
      order: 7; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-7\@small {
      order: 7; } }

.u-order-7-neg {
  order: -7; }
  @media screen and (min-width: 47.5rem) {
    .u-order-7-neg\@large {
      order: -7; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-7-neg\@small {
      order: -7; } }

.u-order-8 {
  order: 8; }
  @media screen and (min-width: 47.5rem) {
    .u-order-8\@large {
      order: 8; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-8\@small {
      order: 8; } }

.u-order-8-neg {
  order: -8; }
  @media screen and (min-width: 47.5rem) {
    .u-order-8-neg\@large {
      order: -8; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-8-neg\@small {
      order: -8; } }

.u-order-9 {
  order: 9; }
  @media screen and (min-width: 47.5rem) {
    .u-order-9\@large {
      order: 9; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-9\@small {
      order: 9; } }

.u-order-9-neg {
  order: -9; }
  @media screen and (min-width: 47.5rem) {
    .u-order-9-neg\@large {
      order: -9; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-9-neg\@small {
      order: -9; } }

.u-order-10 {
  order: 10; }
  @media screen and (min-width: 47.5rem) {
    .u-order-10\@large {
      order: 10; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-10\@small {
      order: 10; } }

.u-order-10-neg {
  order: -10; }
  @media screen and (min-width: 47.5rem) {
    .u-order-10-neg\@large {
      order: -10; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-10-neg\@small {
      order: -10; } }

.u-order-11 {
  order: 11; }
  @media screen and (min-width: 47.5rem) {
    .u-order-11\@large {
      order: 11; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-11\@small {
      order: 11; } }

.u-order-11-neg {
  order: -11; }
  @media screen and (min-width: 47.5rem) {
    .u-order-11-neg\@large {
      order: -11; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-11-neg\@small {
      order: -11; } }

.u-order-12 {
  order: 12; }
  @media screen and (min-width: 47.5rem) {
    .u-order-12\@large {
      order: 12; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-12\@small {
      order: 12; } }

.u-order-12-neg {
  order: -12; }
  @media screen and (min-width: 47.5rem) {
    .u-order-12-neg\@large {
      order: -12; } }
  @media screen and (max-width: 47.5rem) {
    .u-order-12-neg\@small {
      order: -12; } }

/*
---
name: Position Alignment
category: 6. Trumps > Extras
---

Options for `top`, `right`, `bottom`, `left` CSS properties being set to `0`

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.u-1` or `.u-top`: `top: 0;`
* `.u-2` or `.u-right`: `right: 0;`
* `.u-3` or `.u-bottom`: `bottom: 0;`
* `.u-4` or `.u-left`: `left: 0;`


```demo.html
<div class="u-pos-r u-space-lg" style="height: 50px;">
	<div class="u-pos-a u-2 u-4">
		•••
	</div>
</div>
```
*/
.u-1, .u-top {
  top: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-1\@large, .u-top\@large {
      top: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-1\@small, .u-top\@small {
      top: 0; } }

.u-2, .u-right {
  right: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-2\@large, .u-right\@large {
      right: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-2\@small, .u-right\@small {
      right: 0; } }

.u-3, .u-bottom {
  bottom: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-3\@large, .u-bottom\@large {
      bottom: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-3\@small, .u-bottom\@small {
      bottom: 0; } }

.u-4, .u-left {
  left: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-4\@large, .u-left\@large {
      left: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-4\@small, .u-left\@small {
      left: 0; } }

/*
---
name: Heights
category: 6. Trumps > Extras
---

Sets `min-height` for elements

*  Contains [Suffixcate](/#suffixcate) options available for all options and utility versions;

Options:
* `.u-min-height-40`: `min-height` of "40px"
* `.u-min-height-300`: `min-height` of "300px"
* `.u-min-height-600`: `min-height` of "600px"
* `.u-min-height-900`: `min-height` of "900px"
* `.u-min-height-quarter`: `min-height` of a quarter height of window
* `.u-min-height-half`: `min-height` of half the vertical height of window
* `.u-min-height-full`: `min-height` of the vertical height of window
* `.u-min-height-full-half`: `min-height`  of 1.5x vertical height of window
* `.u-min-height-full-full`: `min-height` of 2x vertical height of window


```demo.html
<ul class="u-unlist" id="heights">
  <li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-40 || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						40
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				40px tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-40</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-40@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-40@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-300 || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						300
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				300px tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-300</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-300@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-300@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-600 || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						600
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				600px tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-600</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-600@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-600@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-900 || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						900
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				900px tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-900</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-900@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-900@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-25vh || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						quarter
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				Quarter Vertical Height tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-25vh</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-25vh@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-25vh@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-half || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						50vh
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				Half Vertical Height tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-half</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-half@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-half@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-full || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						100vh
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				Vertical Height 100% tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-full-half || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						150v
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				Vertical Height x1.5 tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full-half</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full-half@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full-half@large</pre>
				</span>
			</li>
		</ul>
	</li><li>
		<span class="u-dis-b u-width-4-max">
			<span class="u-dis-b u-size-1 u-width-1-min">
				<span class="u-dis-b || u-size-1 || c-intrinsic u-min-height-full-full || u-dark-bg">
					<span class="c-intrinsic__element || o-flex o-flex--align-items-center o-flex--justify-content-center || u-fs-5">
						200vh
					</span>
				</span>
			</span>
			<b class="u-dis-b || u-emphasize || u-fs-6 || u-border u-border--dark-dark u-space-tiny">
				Vertical Height x2 tall
			</b>
		</span>
		<ul class="o-tabular u-unlist">
			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					All sizes:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full-full</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell ||  u-fs-6">
					Mobile Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full-full@small</pre>
				</span>
			</li>

			<li class="o-tabular__row || u-space-children-sm">
				<span class="o-tabular__cell || u-fs-6">
					Desktop Only:
				</span>
				<span class="o-tabular__cell ">
					<pre class="u-dis-b u-fs-6">.u-min-height-full-full@large</pre>
				</span>
			</li>
		</ul>
	</li>
</ul>
```

*/
.u-min-height-40 {
  min-height: 2.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-40\@large {
      min-height: 2.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-40\@small {
      min-height: 2.5rem; } }
.u-min-height-300 {
  min-height: 18.75rem; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-300\@large {
      min-height: 18.75rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-300\@small {
      min-height: 18.75rem; } }
.u-min-height-600 {
  min-height: 37.5rem; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-600\@large {
      min-height: 37.5rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-600\@small {
      min-height: 37.5rem; } }
.u-min-height-900 {
  min-height: 56.25rem; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-900\@large {
      min-height: 56.25rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-900\@small {
      min-height: 56.25rem; } }
.u-min-height-quarter {
  min-height: 25vh; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-quarter\@large {
      min-height: 25vh; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-quarter\@small {
      min-height: 25vh; } }
.u-min-height-half {
  min-height: 50vh; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-half\@large {
      min-height: 50vh; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-half\@small {
      min-height: 50vh; } }
.u-min-height-full {
  min-height: 100vh; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-full\@large {
      min-height: 100vh; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-full\@small {
      min-height: 100vh; } }
.u-min-height-full-half {
  min-height: 150vh; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-full-half\@large {
      min-height: 150vh; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-full-half\@small {
      min-height: 150vh; } }
.u-min-height-full-full {
  min-height: 200vh; }
  @media screen and (min-width: 47.5rem) {
    .u-min-height-full-full\@large {
      min-height: 200vh; } }
  @media screen and (max-width: 47.5rem) {
    .u-min-height-full-full\@small {
      min-height: 200vh; } }

/*
---
name: List > List
category: 6. Trumps > Extras
---

Remove extra padding of a `<ul>`, `<ol>` and `<dl>` to be left aligned with content


*  Contains [Suffixcate](/#suffixcate) options


```demo.html
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
</p>
<ul class="u-list">
	<li>
		•••
	</li>
	<li>
		•••
	</li>
	<li>
		•••
	</li>
	<li>
		•••
	</li>
</ul>
```
*/
.u-list {
  padding-left: 1rem; }
  @media screen and (min-width: 47.5rem) {
    .u-list\@large {
      padding-left: 1rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-list\@small {
      padding-left: 1rem; } }

/*
---
name: List > Unlist
category: 6. Trumps > Extras
---

Resets list to remove styling and spacing (margin and padding)


*  Contains [Suffixcate](/#suffixcate) options


```demo.html
<span>pneumonoultramicroscopicsilicovolcanoconiosis</span>
```
*/
.u-unlist {
  padding-left: 0;
  list-style: none; }
  @media screen and (min-width: 47.5rem) {
    .u-unlist\@large {
      padding-left: 0;
      list-style: none; } }
  @media screen and (max-width: 47.5rem) {
    .u-unlist\@small {
      padding-left: 0;
      list-style: none; } }

/*
---
name: Wordbreak
category: 6. Trumps > Extras
---

Adds `word-break: break-all;`


*  Contains [Suffixcate](/#suffixcate) options


*/
.u-w {
  word-break: break-all; }
  @media screen and (min-width: 47.5rem) {
    .u-w\@large {
      word-break: break-all; } }
  @media screen and (max-width: 47.5rem) {
    .u-w\@small {
      word-break: break-all; } }

/*
---
name: White-space / Word Wrap
category: 6. Trumps > Extras
---

Adds `white-space` properties, two options `nowrap` and `break-all`


*  Contains [Suffixcate](/#suffixcate) options
* `-children` Suffix: Add suffix to apply to all children

`.u-nw` No Wrap
```demo.html
<span class="u-nw">pneumonoultramicroscopicsilicovolcanoconiosis</span>
```

`.u-nw-children` No Wrap Children
```demo.html
<ul class="u-list u-nw-children">
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
</ul>
```

`.u-bw` Break Word
```demo.html
<span class="u-br">pneumonoultramicroscopicsilicovolcanoconiosis</span>
```

`.u-br-children` Break Word Children
```demo.html
<ul class="u-list u-br-children">
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
	<li>
		pneumonoultramicroscopicsilicovolcanoconiosis
	</li>
</ul>
```

*/
.u-nw {
  white-space: nowrap; }
  @media screen and (min-width: 47.5rem) {
    .u-nw\@large {
      white-space: nowrap; } }
  @media screen and (max-width: 47.5rem) {
    .u-nw\@small {
      white-space: nowrap; } }
  .u-nw-children * {
    white-space: nowrap; }
  @media screen and (min-width: 47.5rem) {
    .u-nw-children\@large * {
      white-space: nowrap; } }
  @media screen and (max-width: 47.5rem) {
    .u-nw-children\@small * {
      white-space: nowrap; } }

.u-bw {
  word-break: break-all; }
  @media screen and (min-width: 47.5rem) {
    .u-bw\@large {
      word-break: break-all; } }
  @media screen and (max-width: 47.5rem) {
    .u-bw\@small {
      word-break: break-all; } }
  .u-bw-children * {
    word-break: break-all; }
  @media screen and (min-width: 47.5rem) {
    .u-bw-children\@large * {
      word-break: break-all; } }
  @media screen and (max-width: 47.5rem) {
    .u-bw-children\@small * {
      word-break: break-all; } }

/*
---
name: Veritcal Alignment
category: 6. Trumps > Extras
---

Adds `vertical-align` properties, two multiple options: `top`, `middle`, `bottom`


*  Contains [Suffixcate](/#suffixcate) options
* `-before` Suffix: Add suffix to apply to all children, applies alignment on `:before`
* `-after` Suffix: Add suffix to apply to all children, applies alignment on `:after`
* `.u-va-t`: Vertical align top
* `.u-va-m`: Vertical align middle
* `.u-va-b`: Vertical align bottom
* `.u-va-t-before`: Vertical align top on `:before`
* `.u-va-t-after`: Vertical align top on `:after`
* `.u-va-m-before`: Vertical align tomiddlep on `:before`
* `.u-va-m-after`: Vertical align middle on `:after`
* `.u-va-b-before`: Vertical align bottom on `:before`
* `.u-va-b-after`: Vertical align bottom on `:after`

*/
.u-va-t {
  vertical-align: top; }
  @media screen and (min-width: 47.5rem) {
    .u-va-t\@large {
      vertical-align: top; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-t\@small {
      vertical-align: top; } }
  .u-va-t-before:before {
    vertical-align: top; }
  @media screen and (min-width: 47.5rem) {
    .u-va-t-before\@large:before {
      vertical-align: top; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-t-before\@small:before {
      vertical-align: top; } }
  .u-va-t-after:after {
    vertical-align: top; }
  @media screen and (min-width: 47.5rem) {
    .u-va-t-after\@large:after {
      vertical-align: top; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-t-after\@small:after {
      vertical-align: top; } }

.u-va-m {
  vertical-align: middle; }
  @media screen and (min-width: 47.5rem) {
    .u-va-m\@large {
      vertical-align: middle; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-m\@small {
      vertical-align: middle; } }
  .u-va-m-before:before {
    vertical-align: middle; }
  @media screen and (min-width: 47.5rem) {
    .u-va-m-before\@large:before {
      vertical-align: middle; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-m-before\@small:before {
      vertical-align: middle; } }
  .u-va-m-after:after {
    vertical-align: middle; }
  @media screen and (min-width: 47.5rem) {
    .u-va-m-after\@large:after {
      vertical-align: middle; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-m-after\@small:after {
      vertical-align: middle; } }

.u-va-b {
  vertical-align: bottom; }
  @media screen and (min-width: 47.5rem) {
    .u-va-b\@large {
      vertical-align: bottom; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-b\@small {
      vertical-align: bottom; } }
  .u-va-b-before:before {
    vertical-align: bottom; }
  @media screen and (min-width: 47.5rem) {
    .u-va-b-before\@large:before {
      vertical-align: bottom; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-b-before\@small:before {
      vertical-align: bottom; } }
  .u-va-b-after:after {
    vertical-align: bottom; }
  @media screen and (min-width: 47.5rem) {
    .u-va-b-after\@large:after {
      vertical-align: bottom; } }
  @media screen and (max-width: 47.5rem) {
    .u-va-b-after\@small:after {
      vertical-align: bottom; } }

.u-f-r-children:after, .u-f-l-children:after {
  clear: both; }

.u-f-r-children:after, .u-f-l-children:after {
  display: table;
  content: ""; }

.u-f-r, .u-f-r-children > * {
  float: right; }

/*
---
name: Float > Right
category: 6. Trumps > Extras
---

Adds `float: right` properties with `.u-f-r` class, apply to children with `.u-f-r-children` 

*/
.u-f-l, .u-f-l-children > div, .u-f-l-children > li, .u-f-l-children > span {
  float: left; }

/*
---
name: Float > Left
category: 6. Trumps > Extras
---

Adds `float: right` properties with `.u-full` class

*  Contains [Suffixcate](/#suffixcate) options


*/
/*
---
name: Borders > Thin
category: 6. Trumps > Extras
---

Options for `border`CSS property, inherits `color` value for border color

*  Contains [Suffixcate](/#suffixcate) options
* `.u-outline`: `border-top`, `border-right`, `border-bottom` and `border-left`,
* `.u-outline-1`: `border-top`
* `.u-outline-2`: `border-right`
* `.u-outline-3`: `border-bottom`
* `.u-outline-4`: `border-left`
* `.u-outline-1-3`: `border-top` and `border-bottom`
* `.u-outline-2-4`: `border-right` and `border-left`

*/
.u-outline-1, .u-outline, .u-outline-1-3 {
  border-top: 0.625rem solid; }
  @media screen and (min-width: 47.5rem) {
    .u-outline-1\@large, .u-outline\@large, .u-outline-1-3\@large {
      border-top: 0.625rem solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-outline-1\@small, .u-outline\@small, .u-outline-1-3\@small {
      border-top: 0.625rem solid; } }
.u-outline-2, .u-outline, .u-outline-2-4 {
  border-right: 0.625rem solid; }
  @media screen and (min-width: 47.5rem) {
    .u-outline-2\@large, .u-outline\@large, .u-outline-2-4\@large {
      border-right: 0.625rem solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-outline-2\@small, .u-outline\@small, .u-outline-2-4\@small {
      border-right: 0.625rem solid; } }
.u-outline-3, .u-outline, .u-outline-1-3 {
  border-bottom: 0.625rem solid; }
  @media screen and (min-width: 47.5rem) {
    .u-outline-3\@large, .u-outline\@large, .u-outline-1-3\@large {
      border-bottom: 0.625rem solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-outline-3\@small, .u-outline\@small, .u-outline-1-3\@small {
      border-bottom: 0.625rem solid; } }
.u-outline-4, .u-outline, .u-outline-2-4 {
  border-left: 0.625rem solid; }
  @media screen and (min-width: 47.5rem) {
    .u-outline-4\@large, .u-outline\@large, .u-outline-2-4\@large {
      border-left: 0.625rem solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-outline-4\@small, .u-outline\@small, .u-outline-2-4\@small {
      border-left: 0.625rem solid; } }

/*
---
name: Borders > Thick
category: 6. Trumps > Extras
---

Options for `border`CSS property, inherits `color` value for border color

*  Contains [Suffixcate](/#suffixcate) options
* `.u-border`: `border-top`, `border-right`, `border-bottom` and `border-left`
* `.u-border-lg`: Thicker border
* `.u-border-1`: `border-top`
* `.u-border-1-lg`: Thicker border
* `.u-border-2`: `border-right`
* `.u-border-2-lg`: Thicker border
* `.u-border-3`: `border-bottom`
* `.u-border-3-lg`: Thicker border
* `.u-border-4`: `border-left`
* `.u-border-4-lg`: Thicker border
* `.u-border-1-3`: `border-top` and `border-bottom`
* `.u-border-1-3-lg`: Thicker border
* `.u-border-2-4`: `border-right` and `border-left`
* `.u-border-2-4-lg`: Thicker border

* `.u-border-children`: add `border-top`, `border-right`, `border-bottom` and `border-left` to children

*/
.u-border-1, .u-border, .u-border-1-3 {
  border-top: 1px solid; }
  @media screen and (min-width: 47.5rem) {
    .u-border-1\@large, .u-border\@large, .u-border-1-3\@large {
      border-top: 1px solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-border-1\@small, .u-border\@small, .u-border-1-3\@small {
      border-top: 1px solid; } }
.u-border-2, .u-border, .u-border-2-4 {
  border-right: 1px solid; }
  @media screen and (min-width: 47.5rem) {
    .u-border-2\@large, .u-border\@large, .u-border-2-4\@large {
      border-right: 1px solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-border-2\@small, .u-border\@small, .u-border-2-4\@small {
      border-right: 1px solid; } }
.u-border-3, .u-border, .u-border-1-3 {
  border-bottom: 1px solid; }
  @media screen and (min-width: 47.5rem) {
    .u-border-3\@large, .u-border\@large, .u-border-1-3\@large {
      border-bottom: 1px solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-border-3\@small, .u-border\@small, .u-border-1-3\@small {
      border-bottom: 1px solid; } }
.u-border-4, .u-border, .u-border-2-4 {
  border-left: 1px solid; }
  @media screen and (min-width: 47.5rem) {
    .u-border-4\@large, .u-border\@large, .u-border-2-4\@large {
      border-left: 1px solid; } }
  @media screen and (max-width: 47.5rem) {
    .u-border-4\@small, .u-border\@small, .u-border-2-4\@small {
      border-left: 1px solid; } }

/*
---
name: Padding Reset
category: 6. Trumps > Extras
---

Options for `padding-top`, `padding-right`, `padding-bottom`, `padding-left` CSS properties being set to `0`

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.u-space-0-1` `padding-top: 0;`
* `.u-space-0-2`: `padding-right: 0;`
* `.u-space-0-3`: `padding-bottom: 0;`
* `.u-space-0-4`: `padding-left: 0;`
*/
/*
---
name: Margin Reset
category: 6. Trumps > Extras
---

Options for `margin-top`, `margin-right`, `margin-bottom`, `margin-left` CSS properties being set to `0`

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.u-gutt-0-1` `margin-top: 0;`
* `.u-gutt-0-2`: `margin-right: 0;`
* `.u-gutt-0-3`: `margin-bottom: 0;`
* `.u-gutt-0-4`: `margin-left: 0;`
*/
.u-space-0-1 {
  padding-top: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-space-0-1\@large {
      padding-top: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-0-1\@small {
      padding-top: 0; } }

.u-space-0-1 {
  padding-right: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-space-0-1\@large {
      padding-right: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-0-1\@small {
      padding-right: 0; } }

.u-space-0-1 {
  padding-bottom: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-space-0-1\@large {
      padding-bottom: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-0-1\@small {
      padding-bottom: 0; } }

.u-space-0-1 {
  padding-left: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-space-0-1\@large {
      padding-left: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-space-0-1\@small {
      padding-left: 0; } }

.u-gutt-0-1 {
  margin-top: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-0-1\@large {
      margin-top: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-0-1\@small {
      margin-top: 0; } }

.u-gutt-0-1 {
  margin-right: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-0-1\@large {
      margin-right: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-0-1\@small {
      margin-right: 0; } }

.u-gutt-0-1 {
  margin-bottom: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-0-1\@large {
      margin-bottom: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-0-1\@small {
      margin-bottom: 0; } }

.u-gutt-0-1 {
  margin-left: 0; }
  @media screen and (min-width: 47.5rem) {
    .u-gutt-0-1\@large {
      margin-left: 0; } }
  @media screen and (max-width: 47.5rem) {
    .u-gutt-0-1\@small {
      margin-left: 0; } }

/*
---
name: Margin Auto
category: 6. Trumps > Extras
---

Options for `margin-top`, `margin-right`, `margin-bottom`, `margin-left` CSS properties being set to `auto`

*  Contains [Suffixcate](/#suffixcate) options

Options:
* `.u-auto-1`, `.u-auto-top` `margin-top: auto;`
* `.u-auto-2`, `.u-auto-right`: `margin-right: auto;`
* `.u-auto-3`, `.u-auto-bottom`: `margin-bottom: auto;`
* `.u-auto-4`, `.u-auto-left`: `margin-left: auto;`
*/
.u-auto-1, .u-auto-top {
  margin-top: auto; }
  @media screen and (min-width: 47.5rem) {
    .u-auto-1\@large, .u-auto-top\@large {
      margin-top: auto; } }
  @media screen and (max-width: 47.5rem) {
    .u-auto-1\@small, .u-auto-top\@small {
      margin-top: auto; } }

.u-auto-2, .u-auto-right {
  margin-right: auto; }
  @media screen and (min-width: 47.5rem) {
    .u-auto-2\@large, .u-auto-right\@large {
      margin-right: auto; } }
  @media screen and (max-width: 47.5rem) {
    .u-auto-2\@small, .u-auto-right\@small {
      margin-right: auto; } }

.u-auto-3, .u-auto-bottom {
  margin-bottom: auto; }
  @media screen and (min-width: 47.5rem) {
    .u-auto-3\@large, .u-auto-bottom\@large {
      margin-bottom: auto; } }
  @media screen and (max-width: 47.5rem) {
    .u-auto-3\@small, .u-auto-bottom\@small {
      margin-bottom: auto; } }

.u-auto-4, .u-auto-left {
  margin-left: auto; }
  @media screen and (min-width: 47.5rem) {
    .u-auto-4\@large, .u-auto-left\@large {
      margin-left: auto; } }
  @media screen and (max-width: 47.5rem) {
    .u-auto-4\@small, .u-auto-left\@small {
      margin-left: auto; } }

.u-dis-none {
  display: none; }
.u-speak-none, .u-dis-none {
  speak: none; }
  @media screen and (min-width: 47.5rem) {
    .u-speak-none\@large {
      speak: none; } }
  @media screen and (max-width: 47.5rem) {
    .u-speak-none\@small {
      speak: none; } }

/*
---
name: Speak None
category: 6. Trumps > Extras
---

Adds `speak: none` properties with `.u-speak-none` class


*  Contains [Suffixcate](/#suffixcate) options


*/
.u-dis-none {
  speak: none;
  display: none; }
  @media screen and (min-width: 47.5rem) {
    .u-dis-none\@large {
      speak: none;
      display: none; } }
  @media screen and (max-width: 47.5rem) {
    .u-dis-none\@small {
      speak: none;
      display: none; } }

/*
---
name: Visually Hidden
category: 6. Trumps > Extras
---

Hides content but makes it legible by screen readers (for accessibility), add `.u-vis-0`

*  Contains [Suffixcate](/#suffixcate) options

*/
.u-vis-0 {
  position: absolute;
  top: -3125rem;
  left: -3125rem;
  font-size: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden; }
  @media screen and (min-width: 47.5rem) {
    .u-vis-0\@large {
      position: absolute;
      top: -3125rem;
      left: -3125rem;
      font-size: 0;
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden; } }
  @media screen and (max-width: 47.5rem) {
    .u-vis-0\@small {
      position: absolute;
      top: -3125rem;
      left: -3125rem;
      font-size: 0;
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden; } }

@charset "UTF-8";
/*! v1.0.0 || 2018-12-04 15:06 */
@font-face {
  font-family: 'JustLovely';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/custom/JustLovely.woff2) format("woff"); }
@font-face {
  font-family: 'JustLovely';
  font-style: bold;
  font-weight: 700;
  src: url(/assets/fonts/custom/JustLovely.woff2) format("woff"); }
@font-face {
  font-family: 'AlternateGothicPro-No3';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/custom/AlternateGothicPro-No3.woff2) format("woff"); }
@font-face {
  font-family: 'AlternateGothicPro-No3';
  font-style: bold;
  font-weight: 700;
  src: url(/assets/fonts/custom/AlternateGothicPro-No3.woff2) format("woff"); }
@font-face {
  font-family: 'JustLovely', sans-serif;
  font-style: normal;
  font-weight: 700;
  src: local("JustLovely"), local("JustLovely"), url(../fonts/custom/JustLovely.woff2) format("woff");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face {
  font-family: 'JustLovely', sans-serif;
  font-style: bold;
  font-weight: 700;
  src: local("JustLovely"), local("JustLovely"), url(../fonts/custom/JustLovely.woff2) format("woff");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face {
  font-family: 'AlternateGothicPro-No3', sans-serif;
  font-style: normal;
  font-weight: 700;
  src: local("AlternateGothicPro-No3"), local("AlternateGothicPro-No3"), url(../fonts/custom/AlternateGothicPro-No3.woff2) format("woff");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face {
  font-family: 'AlternateGothicPro-No3', sans-serif;
  font-style: bold;
  font-weight: 700;
  src: local("AlternateGothicPro-No3"), local("AlternateGothicPro-No3"), url(../fonts/custom/AlternateGothicPro-No3.woff2) format("woff");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/

::selection {
  background: rgba(31, 28, 25, 0.5); }

body {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.375; }

/*
---
name: Font Sizes
category: 6. Trumps > Typography
---

Alignment of header sizes 1-6

Additional options:
*  `.u-fs-1` - Largest font size
*  `.u-fs-2` - 2nd larges font size
*  `.u-fs-3` - Medium font size
*  `.u-fs-4` - Root font size
*  `.u-fs-5` - Step up from smallest font size
*  `.u-fs-6` - Smallest font size


```demo.html
<p class="u-fs-5">
	Lorem ipsum.
</p>
```
*/
.u-fs-1 {
  font-size: 4rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-1\@large {
      font-size: 4rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-1\@small {
      font-size: 4rem; } }
  .u-fs-1-alt {
    font-size: 4em; }
    @media screen and (min-width: 47.5rem) {
      .u-fs-1-alt\@large {
        font-size: 4em; } }
    @media screen and (max-width: 47.5rem) {
      .u-fs-1-alt\@small {
        font-size: 4em; } }
  .u-fs-1-before:before {
    font-size: 4rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-1-before\@large:before {
      font-size: 4rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-1-before\@small:before {
      font-size: 4rem; } }
  .u-fs-1-after:after {
    font-size: 4rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-1-after\@large:after {
      font-size: 4rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-1-after\@small:after {
      font-size: 4rem; } }
  @media screen and (min-width: 76.25rem) {
    .u-fs-1-scalable, .c-page-subheader-scalable {
      font-size: 4rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 50.0390625rem) {
  .u-fs-1-scalable, .c-page-subheader-scalable {
    font-size: 5.2459016393vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 50.0390625rem) {
  .u-fs-1-scalable, .c-page-subheader-scalable {
    font-size: 2.625rem; } }

@media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-1-scalable\@large, .c-page-subheader-scalable\@large {
    font-size: 4rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 50.0390625rem) {
  .u-fs-1-scalable\@large, .c-page-subheader-scalable\@large {
    font-size: 5.2459016393vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 50.0390625rem) {
  .u-fs-1-scalable\@large, .c-page-subheader-scalable\@large {
    font-size: 2.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-1-scalable\@small, .c-page-subheader-scalable\@small {
    font-size: 4rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 50.0390625rem) {
  .u-fs-1-scalable\@small, .c-page-subheader-scalable\@small {
    font-size: 5.2459016393vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 50.0390625rem) {
  .u-fs-1-scalable\@small, .c-page-subheader-scalable\@small {
    font-size: 2.625rem; } }

.u-fs-2 {
  font-size: 2rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-2\@large {
      font-size: 2rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-2\@small {
      font-size: 2rem; } }
  .u-fs-2-alt {
    font-size: 2em; }
    @media screen and (min-width: 47.5rem) {
      .u-fs-2-alt\@large {
        font-size: 2em; } }
    @media screen and (max-width: 47.5rem) {
      .u-fs-2-alt\@small {
        font-size: 2em; } }
  .u-fs-2-before:before {
    font-size: 2rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-2-before\@large:before {
      font-size: 2rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-2-before\@small:before {
      font-size: 2rem; } }
  .u-fs-2-after:after {
    font-size: 2rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-2-after\@large:after {
      font-size: 2rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-2-after\@small:after {
      font-size: 2rem; } }
  @media screen and (min-width: 76.25rem) {
    .u-fs-2-scalable, .c-section-header-scalable {
      font-size: 2rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  .u-fs-2-scalable, .c-section-header-scalable {
    font-size: 2.6229508197vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  .u-fs-2-scalable, .c-section-header-scalable {
    font-size: 1.444rem; } }

@media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-2-scalable\@large, .c-section-header-scalable\@large {
    font-size: 2rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  .u-fs-2-scalable\@large, .c-section-header-scalable\@large {
    font-size: 2.6229508197vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  .u-fs-2-scalable\@large, .c-section-header-scalable\@large {
    font-size: 1.444rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-2-scalable\@small, .c-section-header-scalable\@small {
    font-size: 2rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  .u-fs-2-scalable\@small, .c-section-header-scalable\@small {
    font-size: 2.6229508197vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  .u-fs-2-scalable\@small, .c-section-header-scalable\@small {
    font-size: 1.444rem; } }

.u-fs-3 {
  font-size: 1.556rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-3\@large {
      font-size: 1.556rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-3\@small {
      font-size: 1.556rem; } }
  .u-fs-3-alt {
    font-size: 1.556em; }
    @media screen and (min-width: 47.5rem) {
      .u-fs-3-alt\@large {
        font-size: 1.556em; } }
    @media screen and (max-width: 47.5rem) {
      .u-fs-3-alt\@small {
        font-size: 1.556em; } }
  .u-fs-3-before:before {
    font-size: 1.556rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-3-before\@large:before {
      font-size: 1.556rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-3-before\@small:before {
      font-size: 1.556rem; } }
  .u-fs-3-after:after {
    font-size: 1.556rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-3-after\@large:after {
      font-size: 1.556rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-3-after\@small:after {
      font-size: 1.556rem; } }
  @media screen and (min-width: 76.25rem) {
    .u-fs-3-scalable, .c-section-subheader-scalable, .c-article-header-scalable {
      font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  .u-fs-3-scalable, .c-section-subheader-scalable, .c-article-header-scalable {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  .u-fs-3-scalable, .c-section-subheader-scalable, .c-article-header-scalable {
    font-size: 1.222rem; } }

@media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-3-scalable\@large, .c-section-subheader-scalable\@large, .c-article-header-scalable\@large {
    font-size: 1.556rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  .u-fs-3-scalable\@large, .c-section-subheader-scalable\@large, .c-article-header-scalable\@large {
    font-size: 2.0406557377vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  .u-fs-3-scalable\@large, .c-section-subheader-scalable\@large, .c-article-header-scalable\@large {
    font-size: 1.222rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-3-scalable\@small, .c-section-subheader-scalable\@small, .c-article-header-scalable\@small {
    font-size: 1.556rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  .u-fs-3-scalable\@small, .c-section-subheader-scalable\@small, .c-article-header-scalable\@small {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  .u-fs-3-scalable\@small, .c-section-subheader-scalable\@small, .c-article-header-scalable\@small {
    font-size: 1.222rem; } }

.u-fs-4 {
  font-size: 1rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-4\@large {
      font-size: 1rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-4\@small {
      font-size: 1rem; } }
  .u-fs-4-alt {
    font-size: 1em; }
    @media screen and (min-width: 47.5rem) {
      .u-fs-4-alt\@large {
        font-size: 1em; } }
    @media screen and (max-width: 47.5rem) {
      .u-fs-4-alt\@small {
        font-size: 1em; } }
  .u-fs-4-before:before {
    font-size: 1rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-4-before\@large:before {
      font-size: 1rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-4-before\@small:before {
      font-size: 1rem; } }
  .u-fs-4-after:after {
    font-size: 1rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-4-after\@large:after {
      font-size: 1rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-4-after\@small:after {
      font-size: 1rem; } }
  @media screen and (min-width: 76.25rem) {
    .u-fs-4-scalable, .c-paragraph-header-scalable, .c-paragraph-subheader-scalable {
      font-size: 1rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 76.25rem) {
  .u-fs-4-scalable, .c-paragraph-header-scalable, .c-paragraph-subheader-scalable {
    font-size: 1.3114754098vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 76.25rem) {
  .u-fs-4-scalable, .c-paragraph-header-scalable, .c-paragraph-subheader-scalable {
    font-size: 1rem; } }

@media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-4-scalable\@large, .c-paragraph-header-scalable\@large, .c-paragraph-subheader-scalable\@large {
    font-size: 1rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 76.25rem) {
  .u-fs-4-scalable\@large, .c-paragraph-header-scalable\@large, .c-paragraph-subheader-scalable\@large {
    font-size: 1.3114754098vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 76.25rem) {
  .u-fs-4-scalable\@large, .c-paragraph-header-scalable\@large, .c-paragraph-subheader-scalable\@large {
    font-size: 1rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-4-scalable\@small, .c-paragraph-header-scalable\@small, .c-paragraph-subheader-scalable\@small {
    font-size: 1rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 76.25rem) {
  .u-fs-4-scalable\@small, .c-paragraph-header-scalable\@small, .c-paragraph-subheader-scalable\@small {
    font-size: 1.3114754098vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 76.25rem) {
  .u-fs-4-scalable\@small, .c-paragraph-header-scalable\@small, .c-paragraph-subheader-scalable\@small {
    font-size: 1rem; } }

.u-fs-5 {
  font-size: 0.938rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-5\@large {
      font-size: 0.938rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-5\@small {
      font-size: 0.938rem; } }
  .u-fs-5-alt {
    font-size: 0.938em; }
    @media screen and (min-width: 47.5rem) {
      .u-fs-5-alt\@large {
        font-size: 0.938em; } }
    @media screen and (max-width: 47.5rem) {
      .u-fs-5-alt\@small {
        font-size: 0.938em; } }
  .u-fs-5-before:before {
    font-size: 0.938rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-5-before\@large:before {
      font-size: 0.938rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-5-before\@small:before {
      font-size: 0.938rem; } }
  .u-fs-5-after:after {
    font-size: 0.938rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-5-after\@large:after {
      font-size: 0.938rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-5-after\@small:after {
      font-size: 0.938rem; } }
  @media screen and (min-width: 76.25rem) {
    .u-fs-5-scalable, .c-article-subheader-scalable {
      font-size: 0.938rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 71.1287313433rem) {
  .u-fs-5-scalable, .c-article-subheader-scalable {
    font-size: 1.2301639344vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 71.1287313433rem) {
  .u-fs-5-scalable, .c-article-subheader-scalable {
    font-size: 0.875rem; } }

@media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-5-scalable\@large, .c-article-subheader-scalable\@large {
    font-size: 0.938rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 71.1287313433rem) {
  .u-fs-5-scalable\@large, .c-article-subheader-scalable\@large {
    font-size: 1.2301639344vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 71.1287313433rem) {
  .u-fs-5-scalable\@large, .c-article-subheader-scalable\@large {
    font-size: 0.875rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-5-scalable\@small, .c-article-subheader-scalable\@small {
    font-size: 0.938rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 71.1287313433rem) {
  .u-fs-5-scalable\@small, .c-article-subheader-scalable\@small {
    font-size: 1.2301639344vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 71.1287313433rem) {
  .u-fs-5-scalable\@small, .c-article-subheader-scalable\@small {
    font-size: 0.875rem; } }

.u-fs-6 {
  font-size: 0.875rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-6\@large {
      font-size: 0.875rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-6\@small {
      font-size: 0.875rem; } }
  .u-fs-6-alt {
    font-size: 0.875em; }
    @media screen and (min-width: 47.5rem) {
      .u-fs-6-alt\@large {
        font-size: 0.875em; } }
    @media screen and (max-width: 47.5rem) {
      .u-fs-6-alt\@small {
        font-size: 0.875em; } }
  .u-fs-6-before:before {
    font-size: 0.875rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-6-before\@large:before {
      font-size: 0.875rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-6-before\@small:before {
      font-size: 0.875rem; } }
  .u-fs-6-after:after {
    font-size: 0.875rem; }
  @media screen and (min-width: 47.5rem) {
    .u-fs-6-after\@large:after {
      font-size: 0.875rem; } }
  @media screen and (max-width: 47.5rem) {
    .u-fs-6-after\@small:after {
      font-size: 0.875rem; } }
  @media screen and (min-width: 76.25rem) {
    .u-fs-6-scalable {
      font-size: 0.875rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 65.3571428571rem) {
  .u-fs-6-scalable {
    font-size: 1.1475409836vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 65.3571428571rem) {
  .u-fs-6-scalable {
    font-size: 0.75rem; } }

@media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-6-scalable\@large {
    font-size: 0.875rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 65.3571428571rem) {
  .u-fs-6-scalable\@large {
    font-size: 1.1475409836vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 65.3571428571rem) {
  .u-fs-6-scalable\@large {
    font-size: 0.75rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
  .u-fs-6-scalable\@small {
    font-size: 0.875rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 65.3571428571rem) {
  .u-fs-6-scalable\@small {
    font-size: 1.1475409836vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 65.3571428571rem) {
  .u-fs-6-scalable\@small {
    font-size: 0.75rem; } }

.c-page-header, .c-page-header-scalable, .c-page-subheader, .c-page-subheader-scalable, .c-section-header, .c-section-header-scalable, .c-section-subheader, .c-section-subheader-scalable, .c-article-header, .c-article-header-scalable, .c-article-subheader, .c-article-subheader-scalable, .c-paragraph-header, .c-paragraph-header-scalable, .c-paragraph-subheader, .c-paragraph-subheader-scalable {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  @media screen and (min-width: 47.5rem) {
    .c-page-header\@large, .c-page-header-scalable\@large, .c-page-subheader\@large, .c-page-subheader-scalable\@large, .c-section-header\@large, .c-section-header-scalable\@large, .c-section-subheader\@large, .c-section-subheader-scalable\@large, .c-article-header\@large, .c-article-header-scalable\@large, .c-article-subheader\@large, .c-article-subheader-scalable\@large, .c-paragraph-header\@large, .c-paragraph-header-scalable\@large, .c-paragraph-subheader\@large, .c-paragraph-subheader-scalable\@large {
      font-kerning: normal;
      -webkit-font-kerning: normal;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; } }
  @media screen and (max-width: 47.5rem) {
    .c-page-header\@small, .c-page-header-scalable\@small, .c-page-subheader\@small, .c-page-subheader-scalable\@small, .c-section-header\@small, .c-section-header-scalable\@small, .c-section-subheader\@small, .c-section-subheader-scalable\@small, .c-article-header\@small, .c-article-header-scalable\@small, .c-article-subheader\@small, .c-article-subheader-scalable\@small, .c-paragraph-header\@small, .c-paragraph-header-scalable\@small, .c-paragraph-subheader\@small, .c-paragraph-subheader-scalable\@small {
      font-kerning: normal;
      -webkit-font-kerning: normal;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; } }

.c-page-header, .c-page-header-scalable {
  font-family: "JustLovely", sans-serif;
  font-weight: 700;
  line-height: .62; }
  @media screen and (min-width: 47.5rem) {
    .c-page-header\@large, .c-page-header-scalable\@large {
      font-family: "JustLovely", sans-serif;
      font-weight: 700;
      line-height: .62; } }
  @media screen and (max-width: 47.5rem) {
    .c-page-header\@small, .c-page-header-scalable\@small {
      font-family: "JustLovely", sans-serif;
      font-weight: 700;
      line-height: .62; } }

.c-page-header {
  font-size: 20rem; }
  @media screen and (min-width: 47.5rem) {
    .c-page-header\@large {
      font-size: 20rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-page-header\@small {
      font-size: 20rem; } }

.c-page-subheader, .c-page-subheader-scalable {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: .85;
  letter-spacing: 0.125em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    .c-page-subheader\@large, .c-page-subheader-scalable\@large {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: .85;
      letter-spacing: 0.125em;
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) {
    .c-page-subheader\@small, .c-page-subheader-scalable\@small {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: .85;
      letter-spacing: 0.125em;
      text-transform: uppercase; } }

.c-page-subheader {
  font-size: 4rem; }
  @media screen and (min-width: 47.5rem) {
    .c-page-subheader\@large {
      font-size: 4rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-page-subheader\@small {
      font-size: 4rem; } }

.c-section-header, .c-section-header-scalable {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    .c-section-header\@large, .c-section-header-scalable\@large {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) {
    .c-section-header\@small, .c-section-header-scalable\@small {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }

.c-section-header {
  font-size: 2rem; }
  @media screen and (min-width: 47.5rem) {
    .c-section-header\@large {
      font-size: 2rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-section-header\@small {
      font-size: 2rem; } }

.c-section-subheader, .c-section-subheader-scalable {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    .c-section-subheader\@large, .c-section-subheader-scalable\@large {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) {
    .c-section-subheader\@small, .c-section-subheader-scalable\@small {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }

.c-section-subheader {
  font-size: 1.556rem; }
  @media screen and (min-width: 47.5rem) {
    .c-section-subheader\@large {
      font-size: 1.556rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-section-subheader\@small {
      font-size: 1.556rem; } }

.c-article-header, .c-article-header-scalable {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    .c-article-header\@large, .c-article-header-scalable\@large {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) {
    .c-article-header\@small, .c-article-header-scalable\@small {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }

.c-article-header {
  font-size: 1.556rem; }
  @media screen and (min-width: 47.5rem) {
    .c-article-header\@large {
      font-size: 1.556rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-article-header\@small {
      font-size: 1.556rem; } }

.c-article-subheader, .c-article-subheader-scalable {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    .c-article-subheader\@large, .c-article-subheader-scalable\@large {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) {
    .c-article-subheader\@small, .c-article-subheader-scalable\@small {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      text-transform: uppercase; } }

.c-article-subheader {
  font-size: 0.938rem; }
  @media screen and (min-width: 47.5rem) {
    .c-article-subheader\@large {
      font-size: 0.938rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-article-subheader\@small {
      font-size: 0.938rem; } }

.c-paragraph-header, .c-paragraph-header-scalable {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0; }
  @media screen and (min-width: 47.5rem) {
    .c-paragraph-header\@large, .c-paragraph-header-scalable\@large {
      font-family: 'Georgia', serif;
      font-weight: normal;
      line-height: 1.5;
      letter-spacing: 0; } }
  @media screen and (max-width: 47.5rem) {
    .c-paragraph-header\@small, .c-paragraph-header-scalable\@small {
      font-family: 'Georgia', serif;
      font-weight: normal;
      line-height: 1.5;
      letter-spacing: 0; } }

.c-paragraph-header {
  font-size: 1rem; }
  @media screen and (min-width: 47.5rem) {
    .c-paragraph-header\@large {
      font-size: 1rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-paragraph-header\@small {
      font-size: 1rem; } }

.c-paragraph-subheader, .c-paragraph-subheader-scalable {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.333;
  letter-spacing: 0; }
  @media screen and (min-width: 47.5rem) {
    .c-paragraph-subheader\@large, .c-paragraph-subheader-scalable\@large {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.333;
      letter-spacing: 0; } }
  @media screen and (max-width: 47.5rem) {
    .c-paragraph-subheader\@small, .c-paragraph-subheader-scalable\@small {
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.333;
      letter-spacing: 0; } }

.c-paragraph-subheader {
  font-size: 1rem; }
  @media screen and (min-width: 47.5rem) {
    .c-paragraph-subheader\@large {
      font-size: 1rem; } }
  @media screen and (max-width: 47.5rem) {
    .c-paragraph-subheader\@small {
      font-size: 1rem; } }

.c-title-block__header + .c-title-block__subheader {
  margin-top: 0.625rem; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Anchor HTS
category: 5. Component > Call to Actions
---
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Anchor > Primary HTS
category: 5. Component > Call to Actions
---
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Anchor > Secondary HTS
category: 5. Component > Call to Actions
---
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Anchor > Dark HTS
category: 5. Component > Call to Actions
---
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Anchor > Light HTS
category: 5. Component > Call to Actions
---
*/
.c-anchor--default {
  text-decoration: none; }
.c-anchor--primary {
  color: #D1292E; }
  .c-anchor--primary:hover, .c-anchor--primary:focus {
    color: #FF3111; }
  .c-anchor--primary:active {
    color: #B21B1F; }
.c-anchor--secondary {
  color: #3d3935; }
  .c-anchor--secondary:hover, .c-anchor--secondary:focus {
    color: #565F73; }
  .c-anchor--secondary:active {
    color: #1F1C19; }
.c-anchor--tertiary {
  color: #E42021; }
  .c-anchor--tertiary:hover, .c-anchor--tertiary:focus {
    color: #565F73; }
  .c-anchor--tertiary:active {
    color: #645E59; }
.c-anchor--light {
  color: #FFF; }
  .c-anchor--light:hover, .c-anchor--light:focus {
    color: #E4EEF4; }
  .c-anchor--light:active {
    color: #E4EEF4; }
.c-anchor--dark {
  color: #333; }
  .c-anchor--dark:hover, .c-anchor--dark:focus {
    color: #58585A; }
  .c-anchor--dark:active {
    color: #000; }
@media screen and (min-width: 47.5rem) {
  .c-anchor\@large--default {
    text-decoration: none; }
  .c-anchor\@large--primary {
    color: #D1292E; }
    .c-anchor\@large--primary:hover, .c-anchor\@large--primary:focus {
      color: #FF3111; }
    .c-anchor\@large--primary:active {
      color: #B21B1F; }
  .c-anchor\@large--secondary {
    color: #3d3935; }
    .c-anchor\@large--secondary:hover, .c-anchor\@large--secondary:focus {
      color: #565F73; }
    .c-anchor\@large--secondary:active {
      color: #1F1C19; }
  .c-anchor\@large--tertiary {
    color: #E42021; }
    .c-anchor\@large--tertiary:hover, .c-anchor\@large--tertiary:focus {
      color: #565F73; }
    .c-anchor\@large--tertiary:active {
      color: #645E59; }
  .c-anchor\@large--light {
    color: #FFF; }
    .c-anchor\@large--light:hover, .c-anchor\@large--light:focus {
      color: #E4EEF4; }
    .c-anchor\@large--light:active {
      color: #E4EEF4; }
  .c-anchor\@large--dark {
    color: #333; }
    .c-anchor\@large--dark:hover, .c-anchor\@large--dark:focus {
      color: #58585A; }
    .c-anchor\@large--dark:active {
      color: #000; } }
@media screen and (max-width: 47.5rem) {
  .c-anchor\@small--default {
    text-decoration: none; }
  .c-anchor\@small--primary {
    color: #D1292E; }
    .c-anchor\@small--primary:hover, .c-anchor\@small--primary:focus {
      color: #FF3111; }
    .c-anchor\@small--primary:active {
      color: #B21B1F; }
  .c-anchor\@small--secondary {
    color: #3d3935; }
    .c-anchor\@small--secondary:hover, .c-anchor\@small--secondary:focus {
      color: #565F73; }
    .c-anchor\@small--secondary:active {
      color: #1F1C19; }
  .c-anchor\@small--tertiary {
    color: #E42021; }
    .c-anchor\@small--tertiary:hover, .c-anchor\@small--tertiary:focus {
      color: #565F73; }
    .c-anchor\@small--tertiary:active {
      color: #645E59; }
  .c-anchor\@small--light {
    color: #FFF; }
    .c-anchor\@small--light:hover, .c-anchor\@small--light:focus {
      color: #E4EEF4; }
    .c-anchor\@small--light:active {
      color: #E4EEF4; }
  .c-anchor\@small--dark {
    color: #333; }
    .c-anchor\@small--dark:hover, .c-anchor\@small--dark:focus {
      color: #58585A; }
    .c-anchor\@small--dark:active {
      color: #000; } }

.c-button {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  border-radius: 0; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button Large HTS
category: 5. Component > Call to Actions
---

Styles for buttons at large screens Buttons can be used with `<a>`, `<button>`, and `<input>` elements. See [Suffixcate](/#suffixcate) for details.

Can be applied to:
- Default
- Base
- Primary
- Secondary
- Teritary
- Dark
- Light

```base-and-default.html
<button class="c-button@large c-button@large--default c-button@large--base">Button</button>
```

```primary.html
<button class="c-button@large c-button@large--default c-button@large--base c-button@large--primary">Button</button>
```

```secondary.html
<button class="c-button@large c-button@large--default c-button@large--base c-button@large--secondary">Button</button>
```

```tertiary.html
<button class="c-button@large c-button@large--default c-button@large--base c-button@large--tertiary">Button</button>
```

```dark.html
<button class="c-button@large c-button@large--default c-button@large--base c-button@large--dark">Button</button>
```

```light.html
<button class="c-button@large c-button@large--default c-button@large--base c-button@large--light">Button</button>
```

*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button Small HTS
category: 5. Component > Call to Actions
---

Styles for buttons at small screens Buttons can be used with `<a>`, `<button>`, and `<input>` elements. See [Suffixcate](/#suffixcate) for details.

Can be applied to:
- Default
- Base
- Primary
- Secondary
- Teritary
- Dark
- Light

```base-and-default.html
<button class="c-button@small c-button@small--default c-button@small--base">Button</button>
```

```primary.html
<button class="c-button@small c-button@small--default c-button@small--base c-button@small--primary">Button</button>
```

```secondary.html
<button class="c-button@small c-button@small--default c-button@small--base c-button@small--secondary">Button</button>
```

```tertiary.html
<button class="c-button@small c-button@small--default c-button@small--base c-button@small--tertiary">Button</button>
```

```dark.html
<button class="c-button@small c-button@small--default c-button@small--base c-button@small--dark">Button</button>
```

```light.html
<button class="c-button@small c-button@small--default c-button@small--base c-button@small--light">Button</button>
```

*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button > Primary HTS
category: 5. Component > Call to Actions
---

Types of primary buttons
- Core: Base styles
- Default: Spacing and alignment

```core.html
<button class="**-button c-button--primary **" data-component="global.button-primary">
    <span>
       Button
    </span>
</button>
```

```default.html
<button class="** c-button  c-button--base c-button--default c-button--primary **" data-component="global.button-primary">
    <span>
        Button
    </span>
</button>
```
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button > Secondary HTS
category: 5. Component > Call to Actions
---

Types of secondary buttons
- Core: Base styles
- Default: Spacing and alignment

```core.html
<button class="**-button c-button--secondary **" data-component="global.button-secondary">
    <span>
       Button
    </span>
</button>
```

```default.html
<button class="** c-button  c-button--base c-button--default c-button--secondary **" data-component="global.button-secondary">
    <span>
        Button
    </span>
</button>
```
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button > Tertiary HTS
category: 5. Component > Call to Actions
---

Types of tertiary buttons
- Core: Base styles
- Default: Spacing and alignment

```core.html
<button class="**-button c-button--tertiary **" data-component="global.button-tertiary">
    <span>
       Button
    </span>
</button>
```

```default.html
<button class="** c-button  c-button--base c-button--default c-button--tertiary **" data-component="global.button-tertiary">
    <span>
        Button
    </span>
</button>
```
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button > Tertiary Reverse HTS
category: 5. Component > Call to Actions
---

Types of tertiary buttons
- Core: Base styles
- Default: Spacing and alignment

```core.html
<button class="**-button c-button--tertiary-reverse **" data-component="global.button-tertiary-reverse">
    <span>
       Button
    </span>
</button>
```

```default.html
<button class="** c-button  c-button--base c-button--default c-button--tertiary-reverse **" data-component="global.button-tertiary-reverse">
    <span>
        Button
    </span>
</button>
```
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button > Dark HTS
category: 5. Component > Call to Actions
---

Types of dark buttons
- Core: Base styles
- Default: Spacing and alignment

```core.html
<button class="**-button c-button--dark **" data-component="global.button-dark">
    <span>
       Button
    </span>
</button>
```

```default.html
<button class="** c-button  c-button--base c-button--default c-button--dark **" data-component="global.button-dark">
    <span>
        Button
    </span>
</button>
```
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Button > Light HTS
category: 5. Component > Call to Actions
---

Types of light buttons
- Core: Base styles
- Default: Spacing and alignment

```core.html
<button class="**-button c-button--light **" data-component="global.button-light">
    <span>
       Button
    </span>
</button>
```

```default.html
<button class="** c-button  c-button--base c-button--default c-button--light **" data-component="global.button-light">
    <span>
        Button
    </span>
</button>
```
*/
.c-button {
  cursor: pointer; }
  .c-button--base {
    border: 0.0555555556rem solid;
    overflow: hidden;
    outline: none; }
    .c-button--base > span {
      line-height: 1; }
  .c-button--default {
    font-kerning: normal;
    -webkit-font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "AlternateGothicPro-No3", sans-serif;
    font-weight: 700;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    text-transform: uppercase; }
    @media screen and (min-width: 76.25rem) {
      .c-button--default {
        font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  .c-button--default {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  .c-button--default {
    font-size: 1.222rem; } }

    @media screen and (min-width: 25.556rem) {
      .c-button--default {
        padding-right: 1.25rem; } }
    @media screen and (max-width: 25.556rem) {
      .c-button--default {
        padding-right: 0.625rem; } }
    @media screen and (min-width: 25.556rem) {
      .c-button--default {
        padding-left: 1.25rem; } }
    @media screen and (max-width: 25.556rem) {
      .c-button--default {
        padding-left: 0.625rem; } }
    .c-button--default:active > span {
      -webkit-transform: translate(0.0277777778rem, 0.0833333333rem);
              transform: translate(0.0277777778rem, 0.0833333333rem); }
  .c-button--primary {
    background-color: #D1292E;
    color: #FFF; }
    .c-button--primary:hover, .c-button--primary:focus {
      background-color: #FF3111;
      color: #FFF; }
    .c-button--primary:active {
      background-color: #B21B1F;
      color: #FFF; }
    .c-button--primary[disabled], .c-button--primary[disabled]:hover, .c-button--primary[disabled]:focus, .c-button--primary[disabled]:active, .c-button--primary.-disabled {
      background-color: #bea2a3 !important;
      border-color: #bea2a3 !important; }
  .c-button--secondary {
    border-color: #3d3935;
    background-color: #3d3935;
    color: #FFF; }
    .c-button--secondary:hover, .c-button--secondary:focus {
      background-color: #645E59;
      color: #FFF;
      border-color: #3d3935; }
    .c-button--secondary:active {
      background-color: #565F73;
      color: #FFF; }
    .c-button--secondary[disabled], .c-button--secondary[disabled]:hover, .c-button--secondary[disabled]:focus, .c-button--secondary[disabled]:active, .c-button--secondary.-disabled {
      background-color: #6c6c6c !important;
      border-color: #6c6c6c !important; }
  .c-button--tertiary {
    background-color: rgba(255, 255, 255, 0.85);
    border-color: currentColor; }
    .c-button--tertiary:hover, .c-button--tertiary:focus {
      background-color: currentColor; }
      .c-button--tertiary:hover > span, .c-button--tertiary:focus > span {
        color: #FFF; }
    .c-button--tertiary:active {
      background-color: currentColor; }
      .c-button--tertiary:active > span {
        color: #FFF; }
    .c-button--tertiary[disabled], .c-button--tertiary[disabled]:hover, .c-button--tertiary[disabled]:focus, .c-button--tertiary[disabled]:active, .c-button--tertiary.-disabled {
      -webkit-filter: opacity(20%) grayscale(70%);
              filter: opacity(20%) grayscale(70%); }
    .c-button--tertiary.u-light-light:hover > span, .c-button--tertiary.u-light-light:focus > span, .c-button--tertiary.u-light-light:active > span {
      color: #A22223; }
  .c-button--tertiary-reverse {
    background-color: currentColor;
    border-color: #FFF; }
    .c-button--tertiary-reverse > span {
      color: #FFF; }
    .c-button--tertiary-reverse:hover, .c-button--tertiary-reverse:focus {
      background-color: white;
      border-color: currentColor; }
      .c-button--tertiary-reverse:hover > span, .c-button--tertiary-reverse:focus > span {
        color: currentColor; }
    .c-button--tertiary-reverse:active {
      background-color: white;
      border-color: currentColor; }
      .c-button--tertiary-reverse:active > span {
        color: currentColor; }
    .c-button--tertiary-reverse[disabled], .c-button--tertiary-reverse[disabled]:hover, .c-button--tertiary-reverse[disabled]:focus, .c-button--tertiary-reverse[disabled]:active, .c-button--tertiary-reverse.-disabled {
      -webkit-filter: opacity(20%) grayscale(70%);
              filter: opacity(20%) grayscale(70%); }
    .c-button--tertiary-reverse[class*="dark"] > span {
      color: #333; }
  .c-button--light {
    background-color: rgba(255, 255, 255, 0.9);
    color: #D1292E;
    border-color: #D1292E; }
    .c-button--light:hover, .c-button--light:focus {
      background-color: #FFF; }
    .c-button--light:active {
      background-color: #FFF; }
    .c-button--light[disabled], .c-button--light[disabled]:hover, .c-button--light[disabled]:focus, .c-button--light[disabled]:active, .c-button--light.-disabled {
      -webkit-filter: opacity(20%) grayscale(70%);
              filter: opacity(20%) grayscale(70%); }
  .c-button--dark {
    background-color: rgba(0, 0, 0, 0.85);
    color: #FFF;
    border-color: #000; }
    .c-button--dark:hover, .c-button--dark:focus {
      background-color: #000; }
    .c-button--dark:active {
      background-color: #000; }
    .c-button--dark[disabled], .c-button--dark[disabled]:hover, .c-button--dark[disabled]:focus, .c-button--dark[disabled]:active, .c-button--dark.-disabled {
      -webkit-filter: opacity(20%) grayscale(70%);
              filter: opacity(20%) grayscale(70%); }
  @media screen and (min-width: 47.5rem) {
    .c-button\@large--base {
      border: 0.0555555556rem solid;
      overflow: hidden;
      outline: none; }
      .c-button\@large--base > span {
        line-height: 1; }
    .c-button\@large--default {
      font-kerning: normal;
      -webkit-font-kerning: normal;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
      text-transform: uppercase; } }
  @media screen and (min-width: 47.5rem) and (min-width: 76.25rem) {
    .c-button\@large--default {
      font-size: 1.556rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  .c-button\@large--default {
    font-size: 2.0406557377vw; } }
@media screen and (min-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  .c-button\@large--default {
    font-size: 1.222rem; } }

  @media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
    .c-button\@large--default {
      padding-right: 1.25rem; } }
  @media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
    .c-button\@large--default {
      padding-right: 0.625rem; } }
  @media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
    .c-button\@large--default {
      padding-left: 1.25rem; } }
  @media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
    .c-button\@large--default {
      padding-left: 0.625rem; } }
  @media screen and (min-width: 47.5rem) {
      .c-button\@large--default:active > span {
        -webkit-transform: translate(0.0277777778rem, 0.0833333333rem);
                transform: translate(0.0277777778rem, 0.0833333333rem); }
    .c-button\@large--primary {
      background-color: #D1292E;
      color: #FFF; }
      .c-button\@large--primary:hover, .c-button\@large--primary:focus {
        background-color: #FF3111;
        color: #FFF; }
      .c-button\@large--primary:active {
        background-color: #B21B1F;
        color: #FFF; }
      .c-button\@large--primary[disabled], .c-button\@large--primary[disabled]:hover, .c-button\@large--primary[disabled]:focus, .c-button\@large--primary[disabled]:active, .c-button\@large--primary.-disabled {
        background-color: #bea2a3 !important;
        border-color: #bea2a3 !important; }
    .c-button\@large--secondary {
      border-color: #3d3935;
      background-color: #3d3935;
      color: #FFF; }
      .c-button\@large--secondary:hover, .c-button\@large--secondary:focus {
        background-color: #645E59;
        color: #FFF;
        border-color: #3d3935; }
      .c-button\@large--secondary:active {
        background-color: #565F73;
        color: #FFF; }
      .c-button\@large--secondary[disabled], .c-button\@large--secondary[disabled]:hover, .c-button\@large--secondary[disabled]:focus, .c-button\@large--secondary[disabled]:active, .c-button\@large--secondary.-disabled {
        background-color: #6c6c6c !important;
        border-color: #6c6c6c !important; }
    .c-button\@large--tertiary {
      background-color: rgba(255, 255, 255, 0.85);
      border-color: currentColor; }
      .c-button\@large--tertiary:hover, .c-button\@large--tertiary:focus {
        background-color: currentColor; }
        .c-button\@large--tertiary:hover > span, .c-button\@large--tertiary:focus > span {
          color: #FFF; }
      .c-button\@large--tertiary:active {
        background-color: currentColor; }
        .c-button\@large--tertiary:active > span {
          color: #FFF; }
      .c-button\@large--tertiary[disabled], .c-button\@large--tertiary[disabled]:hover, .c-button\@large--tertiary[disabled]:focus, .c-button\@large--tertiary[disabled]:active, .c-button\@large--tertiary.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); }
      .c-button\@large--tertiary.u-light-light:hover > span, .c-button\@large--tertiary.u-light-light:focus > span, .c-button\@large--tertiary.u-light-light:active > span {
        color: #A22223; }
    .c-button\@large--tertiary-reverse {
      background-color: currentColor;
      border-color: #FFF; }
      .c-button\@large--tertiary-reverse > span {
        color: #FFF; }
      .c-button\@large--tertiary-reverse:hover, .c-button\@large--tertiary-reverse:focus {
        background-color: white;
        border-color: currentColor; }
        .c-button\@large--tertiary-reverse:hover > span, .c-button\@large--tertiary-reverse:focus > span {
          color: currentColor; }
      .c-button\@large--tertiary-reverse:active {
        background-color: white;
        border-color: currentColor; }
        .c-button\@large--tertiary-reverse:active > span {
          color: currentColor; }
      .c-button\@large--tertiary-reverse[disabled], .c-button\@large--tertiary-reverse[disabled]:hover, .c-button\@large--tertiary-reverse[disabled]:focus, .c-button\@large--tertiary-reverse[disabled]:active, .c-button\@large--tertiary-reverse.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); }
      .c-button\@large--tertiary-reverse[class*="dark"] > span {
        color: #333; }
    .c-button\@large--light {
      background-color: rgba(255, 255, 255, 0.9);
      color: #D1292E;
      border-color: #D1292E; }
      .c-button\@large--light:hover, .c-button\@large--light:focus {
        background-color: #FFF; }
      .c-button\@large--light:active {
        background-color: #FFF; }
      .c-button\@large--light[disabled], .c-button\@large--light[disabled]:hover, .c-button\@large--light[disabled]:focus, .c-button\@large--light[disabled]:active, .c-button\@large--light.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); }
    .c-button\@large--dark {
      background-color: rgba(0, 0, 0, 0.85);
      color: #FFF;
      border-color: #000; }
      .c-button\@large--dark:hover, .c-button\@large--dark:focus {
        background-color: #000; }
      .c-button\@large--dark:active {
        background-color: #000; }
      .c-button\@large--dark[disabled], .c-button\@large--dark[disabled]:hover, .c-button\@large--dark[disabled]:focus, .c-button\@large--dark[disabled]:active, .c-button\@large--dark.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); } }
  @media screen and (max-width: 47.5rem) {
    .c-button\@small--base {
      border: 0.0555555556rem solid;
      overflow: hidden;
      outline: none; }
      .c-button\@small--base > span {
        line-height: 1; }
    .c-button\@small--default {
      font-kerning: normal;
      -webkit-font-kerning: normal;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: "AlternateGothicPro-No3", sans-serif;
      font-weight: 700;
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
      text-transform: uppercase; } }
  @media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
    .c-button\@small--default {
      font-size: 1.556rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  .c-button\@small--default {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  .c-button\@small--default {
    font-size: 1.222rem; } }

  @media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
    .c-button\@small--default {
      padding-right: 1.25rem; } }
  @media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
    .c-button\@small--default {
      padding-right: 0.625rem; } }
  @media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
    .c-button\@small--default {
      padding-left: 1.25rem; } }
  @media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
    .c-button\@small--default {
      padding-left: 0.625rem; } }
  @media screen and (max-width: 47.5rem) {
      .c-button\@small--default:active > span {
        -webkit-transform: translate(0.0277777778rem, 0.0833333333rem);
                transform: translate(0.0277777778rem, 0.0833333333rem); }
    .c-button\@small--primary {
      background-color: #D1292E;
      color: #FFF; }
      .c-button\@small--primary:hover, .c-button\@small--primary:focus {
        background-color: #FF3111;
        color: #FFF; }
      .c-button\@small--primary:active {
        background-color: #B21B1F;
        color: #FFF; }
      .c-button\@small--primary[disabled], .c-button\@small--primary[disabled]:hover, .c-button\@small--primary[disabled]:focus, .c-button\@small--primary[disabled]:active, .c-button\@small--primary.-disabled {
        background-color: #bea2a3 !important;
        border-color: #bea2a3 !important; }
    .c-button\@small--secondary {
      border-color: #3d3935;
      background-color: #3d3935;
      color: #FFF; }
      .c-button\@small--secondary:hover, .c-button\@small--secondary:focus {
        background-color: #645E59;
        color: #FFF;
        border-color: #3d3935; }
      .c-button\@small--secondary:active {
        background-color: #565F73;
        color: #FFF; }
      .c-button\@small--secondary[disabled], .c-button\@small--secondary[disabled]:hover, .c-button\@small--secondary[disabled]:focus, .c-button\@small--secondary[disabled]:active, .c-button\@small--secondary.-disabled {
        background-color: #6c6c6c !important;
        border-color: #6c6c6c !important; }
    .c-button\@small--tertiary {
      background-color: rgba(255, 255, 255, 0.85);
      border-color: currentColor; }
      .c-button\@small--tertiary:hover, .c-button\@small--tertiary:focus {
        background-color: currentColor; }
        .c-button\@small--tertiary:hover > span, .c-button\@small--tertiary:focus > span {
          color: #FFF; }
      .c-button\@small--tertiary:active {
        background-color: currentColor; }
        .c-button\@small--tertiary:active > span {
          color: #FFF; }
      .c-button\@small--tertiary[disabled], .c-button\@small--tertiary[disabled]:hover, .c-button\@small--tertiary[disabled]:focus, .c-button\@small--tertiary[disabled]:active, .c-button\@small--tertiary.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); }
      .c-button\@small--tertiary.u-light-light:hover > span, .c-button\@small--tertiary.u-light-light:focus > span, .c-button\@small--tertiary.u-light-light:active > span {
        color: #A22223; }
    .c-button\@small--tertiary-reverse {
      background-color: currentColor;
      border-color: #FFF; }
      .c-button\@small--tertiary-reverse > span {
        color: #FFF; }
      .c-button\@small--tertiary-reverse:hover, .c-button\@small--tertiary-reverse:focus {
        background-color: white;
        border-color: currentColor; }
        .c-button\@small--tertiary-reverse:hover > span, .c-button\@small--tertiary-reverse:focus > span {
          color: currentColor; }
      .c-button\@small--tertiary-reverse:active {
        background-color: white;
        border-color: currentColor; }
        .c-button\@small--tertiary-reverse:active > span {
          color: currentColor; }
      .c-button\@small--tertiary-reverse[disabled], .c-button\@small--tertiary-reverse[disabled]:hover, .c-button\@small--tertiary-reverse[disabled]:focus, .c-button\@small--tertiary-reverse[disabled]:active, .c-button\@small--tertiary-reverse.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); }
      .c-button\@small--tertiary-reverse[class*="dark"] > span {
        color: #333; }
    .c-button\@small--light {
      background-color: rgba(255, 255, 255, 0.9);
      color: #D1292E;
      border-color: #D1292E; }
      .c-button\@small--light:hover, .c-button\@small--light:focus {
        background-color: #FFF; }
      .c-button\@small--light:active {
        background-color: #FFF; }
      .c-button\@small--light[disabled], .c-button\@small--light[disabled]:hover, .c-button\@small--light[disabled]:focus, .c-button\@small--light[disabled]:active, .c-button\@small--light.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); }
    .c-button\@small--dark {
      background-color: rgba(0, 0, 0, 0.85);
      color: #FFF;
      border-color: #000; }
      .c-button\@small--dark:hover, .c-button\@small--dark:focus {
        background-color: #000; }
      .c-button\@small--dark:active {
        background-color: #000; }
      .c-button\@small--dark[disabled], .c-button\@small--dark[disabled]:hover, .c-button\@small--dark[disabled]:focus, .c-button\@small--dark[disabled]:active, .c-button\@small--dark.-disabled {
        -webkit-filter: opacity(20%) grayscale(70%);
                filter: opacity(20%) grayscale(70%); } }

.c-input, .c-textarea, .c-select, .c-select__input, .c-radio__input, .c-checkbox__input {
  outline: none;
  font-size: 1em;
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: none;
  text-indent: 0.625rem; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Branded Label HTS
category: 5. Component > Form
---

Types of labels:
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`

```base.html
	<label class="** c-label **">Label</label>
```

```t-form-1.html
	<input class="** c-label ** t-form-1">Label</label>
```

```t-form-2.html
	<input class="** c-label ** t-form-2">Label</label>

```
*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Input HTS
category: 5. Component > Form
---

Types of inputs:
- Base
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`
- Disabled states


```base.html
<input class=" ** c-input **   " id="" name="" type="text" />
```

```t-form-1.html
<input class=" ** c-input || t-form-1 **   " id="" name="" type="text" />

```

```t-form-2.html
<input class=" ** c-input || t-form-2 **   " id="" name="" type="text" />

```


```base-disabled.html
<input class=" ** c-input **   " id="" name="" type="text" disabled/>
```

```t-form-1-disabled.html
<input class=" ** c-input || t-form-1 **   " id="" name="" type="text" disabled />

```

```t-form-2-disabled.html
<input class=" ** c-input || t-form-2 **   " id="" name="" type="text" disabled />

```

*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Textarea HTS
category: 5. Component > Form
---

Types of textarea:
- Base
- Default: Defined height
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`
- Disabled states


```base.html
<textarea class=" ** c-textarea ** " id="" name=""></textarea>
```

```default.html
<textarea class=" ** c-textarea c-textarea--default ** " id="" name=""></textarea>
```

```t-form-1.html
<textarea class=" ** c-textarea || t-form-1 ** " id="" name=""></textarea>

```

```t-form-2.html
<textarea class=" ** c-textarea || t-form-2 ** " id="" name=""></textarea>

```

```base-disabled.html
<textarea class=" ** c-textarea ** " id="" name="" disabled></textarea>
```

```default-disabled.html
<textarea class=" ** c-textarea c-textarea--default ** " id="" name="" disabled></textarea>
```

```t-form-1-disabled.html
<textarea class=" ** c-textarea || t-form-1 ** " id="" name="" disabled></textarea>

```

```t-form-2-disabled.html
<textarea class=" ** c-textarea || t-form-2 ** " id="" name="" disabled></textarea>

```

*/
/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Select HTS
category: 5. Component > Form
---

Types of selects:
- Base
- Default: Defined height
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`
- Disabled states


```core.html
<select id="" name=""><option>Select<option><option>Option<option></select>
```

```base.html
<span class="**  c-select ** u-dis-ib">
	<select class="u-full || c-select__input"  id="" name="" >
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
	</select>
	<span class="c-select--highlight"></span>
	<label class="c-select__text || u-glyph-after u-char-after__item u-char-after__item--default" for="" data-icon="V">
		<span class="u-dis-none">Select</span>
	</label>
</span>
```

```disabled.html
<span class="**  c-select ** u-dis-ib">
	<select class="u-full || c-select__input"  id="" name="" disabled>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
	</select>
	<span class="c-select--highlight"></span>
	<label class="c-select__text || u-glyph-after u-char-after__item u-char-after__item--default" for="" data-icon="V">
		<span class="u-dis-none">Select</span>
	</label>
</span>
```


```t-form-1.html
<span class="**  c-select || t-form-1 ** u-dis-ib">
	<select class="u-full || c-select__input"  id="" name="" >
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
	</select>
	<span class="c-select--highlight"></span>
	<label class="c-select__text || u-glyph-after u-char-after__item u-char-after__item--default" for="" data-icon="V">
		<span class="u-dis-none">Select</span>
	</label>
</span>

```

```t-form-2.html
<span class="**  c-select || t-form-2 ** u-dis-ib">
	<select class="u-full || c-select__input"  id="" name="" >
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
	</select>
	<span class="c-select--highlight"></span>
	<label class="c-select__text || u-glyph-after u-char-after__item u-char-after__item--default" for="" data-icon="V">
		<span class="u-dis-none">Select</span>
	</label

```

```t-form-1-disabled.html
<span class="**  c-select || t-form-1 ** u-dis-ib">
	<select class="u-full || c-select__input"  id="" name="" disabled>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
	</select>
	<span class="c-select--highlight"></span>
	<label class="c-select__text || u-glyph-after u-char-after__item u-char-after__item--default" for="" data-icon="V">
		<span class="u-dis-none">Select</span>
	</label>
</span>

```

```t-form-2-disabled.html
<span class="**  c-select || t-form-2 ** u-dis-ib">
	<select class="u-full || c-select__input"  id="" name="" disabled>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
	</select>
	<span class="c-select--highlight"></span>
	<label class="c-select__text || u-glyph-after u-char-after__item u-char-after__item--default" for="" data-icon="V">
		<span class="u-dis-none">Select</span>
	</label

```
*/
.c-input, .c-textarea, .c-select {
  font-size: 1em;
  font-family: "AlternateGothicPro-No3", sans-serif;
  line-height: 1;
  border-style: solid;
  border-width: 0.0555555556rem;
  border-radius: 0rem; }

.c-input--alt.c-input, .c-input--alt.c-textarea, .c-input--alt.c-select, .c-textarea--alt.c-input, .c-textarea--alt.c-textarea, .c-textarea--alt.c-select, .c-select--alt.c-input, .c-select--alt.c-textarea, .c-select--alt.c-select {
  border-radius: 1.1111111111rem; }

.c-input {
  padding: 0.7222222222rem 0; }
  .c-input::-webkit-input-placeholder {
    font-size: 0.7777777778rem !important;
    line-height: 1.5 !important;
    padding-top: 0.1111111111rem;
    color: red; }
  .c-input:-moz-placeholder {
    font-size: 0.7777777778rem !important;
    line-height: 1.5 !important;
    padding-top: 0.1111111111rem;
    color: red; }
  .c-input::-moz-placeholder {
    font-size: 0.7777777778rem !important;
    line-height: 1.5 !important;
    padding-top: 0.1111111111rem;
    color: red; }
  .c-input:-ms-input-placeholder {
    font-size: 0.7777777778rem !important;
    line-height: 1.5 !important;
    padding-top: 0.1111111111rem;
    color: red; }

.c-select__text:after {
  content: "V"; }
.c-select__input {
  padding: 0.5rem 2.2222222222rem 0.5555555556rem 1.1111111111rem; }

.c-textarea {
  min-height: 1.7777777778rem;
  padding-top: 1.1111111111rem; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Radio > Toggle Field HTS
category: 5. Component > Form
---


Intended to be used with `input[type="radio"]` and `input[type="checkbox"]`. Is the base styling to use with either form field types.


```base.html
<span class=" ** t-form-1 || u-dis-ib || c-field-toggle c-radio **  " data-component="global.radio">
	<input class="c-field-toggle__input c-radio__input"  id="default" name="default" type="radio"  />
	<label for="default" class="u-dis-ib c-field-toggle__text c-radio__text">

	</label>
</span>
```

```base-checked.html
<span class=" ** t-form-1 || u-dis-ib || c-field-toggle c-radio **  " data-component="global.radio">
	<input checked class="c-field-toggle__input c-radio__input"  id="default" name="default" type="radio"  />
	<label for="default" class="u-dis-ib c-field-toggle__text c-radio__text">

	</label>
</span>
```

*/
.c-field-toggle__text:before, .c-field-toggle__label:before {
  border: 1px solid; }
.c-field-toggle__text {
  padding-left: 1.3888888889rem; }
  .c-field-toggle__text:before {
    width: 1.1111111111rem;
    height: 1.1111111111rem; }
.c-field-toggle__label:before {
  width: 1.1111111111em;
  height: 1.1111111111em; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Radio HTS
category: 5. Component > Form
---


Types of radio:
- Base
- Default: Defined height
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`
- Disabled states


```core.html
<input  id="radio-core-demo" name="radio-core-demo" type="radio"  />
<label for="radio-core-demo">
	Label
</label>
```

```base.html
<span class=" ** c-field-toggle c-radio **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-base" name="radio-core-base" type="radio"  />
	<label for="radio-core-base" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>
```

```disabled.html
<span class=" ** c-field-toggle c-radio **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-disabled" name="radio-core-disabled" type="radio" disabled />
	<label for="radio-core-disabled" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>
```


```t-form-1.html
<span class=" ** c-field-toggle c-radio || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-1" name="radio-core-theme-1" type="radio" />
	<label for="radio-core-theme-1" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```

```t-form-2.html
<span class=" ** c-field-toggle c-radio || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-2" name="radio-core-theme-2" type="radio" />
	<label for="radio-core-theme-2" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```


```t-form-1-checked.html
<span class=" ** c-field-toggle c-radio || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-1-checked" name="radio-core-theme-1-checked" type="radio" checked />
	<label for="radio-core-theme-1-checked" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```

```t-form-2-checked.html
<span class=" ** c-field-toggle c-radio || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-2-checked" name="radio-core-theme-2-checked" type="radio" checked />
	<label for="radio-core-theme-2-checked" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```

```t-form-1-disabled.html
<span class=" ** c-field-toggle c-radio || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-1" name="radio-core-theme-1" type="radio" disabled />
	<label for="radio-core-theme-1" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```

```t-form-2-disabled.html
<span class=" ** c-field-toggle c-radio || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-2" name="radio-core-theme-2" type="radio" disabled />
	<label for="radio-core-theme-2" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```


```t-form-1-checked-disabled.html
<span class=" ** c-field-toggle c-radio || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-1-checked" name="radio-core-theme-1-checked" type="radio" checked disabled />
	<label for="radio-core-theme-1-checked" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```

```t-form-2-checked-disabled.html
<span class=" ** c-field-toggle c-radio || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-radio__input"  id="radio-core-theme-2-checked" name="radio-core-theme-2-checked" type="radio" checked disabled />
	<label for="radio-core-theme-2-checked" class="u-dis-ib c-field-toggle__text c-radio__text">
		Radio
	</label>
</span>

```

*/
.c-radio__text:after {
  background-color: currentColor;
  margin-top: 0.2777777778rem;
  margin-left: 0.2777777778rem;
  width: 0.5555555556rem;
  height: 0.5555555556rem; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Checkbox HTS
category: 5. Component > Form
---


Types of checkbox:
- Base
- Default: Defined height
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`
- Disabled states


```core.html
<input  id="checkbox-core-demo" name="checkbox-core-demo" type="checkbox"  />
<label for="checkbox-core-demo">
	Label
</label>
```

```base.html
<span class=" ** c-field-toggle c-checkbox **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-base" name="checkbox-core-base" type="checkbox"  />
	<label for="checkbox-core-base" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>
```

```disabled.html
<span class=" ** c-field-toggle c-checkbox **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-disabled" name="checkbox-core-disabled" type="checkbox" disabled />
	<label for="checkbox-core-disabled" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>
```


```t-form-1.html
<span class=" ** c-field-toggle c-checkbox || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-1" name="checkbox-core-theme-1" type="checkbox" />
	<label for="checkbox-core-theme-1" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```

```t-form-2.html
<span class=" ** c-field-toggle c-checkbox || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-2" name="checkbox-core-theme-2" type="checkbox" />
	<label for="checkbox-core-theme-2" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```


```t-form-1-checked.html
<span class=" ** c-field-toggle c-checkbox || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-1-checked" name="checkbox-core-theme-1-checked" type="checkbox" checked />
	<label for="checkbox-core-theme-1-checked" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```

```t-form-2-checked.html
<span class=" ** c-field-toggle c-checkbox || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-2-checked" name="checkbox-core-theme-2-checked" type="checkbox" checked />
	<label for="checkbox-core-theme-2-checked" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```

```t-form-1-disabled.html
<span class=" ** c-field-toggle c-checkbox || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-1" name="checkbox-core-theme-1" type="checkbox" disabled />
	<label for="checkbox-core-theme-1" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```

```t-form-2-disabled.html
<span class=" ** c-field-toggle c-checkbox || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-2" name="checkbox-core-theme-2" type="checkbox" disabled />
	<label for="checkbox-core-theme-2" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```


```t-form-1-checked-disabled.html
<span class=" ** c-field-toggle c-checkbox || t-form-1 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-1-checked" name="checkbox-core-theme-1-checked" type="checkbox" checked disabled />
	<label for="checkbox-core-theme-1-checked" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```

```t-form-2-checked-disabled.html
<span class=" ** c-field-toggle c-checkbox || t-form-2 **  u-dis-ib">
	<input class="c-field-toggle__input c-checkbox__input"  id="checkbox-core-theme-2-checked" name="checkbox-core-theme-2-checked" type="checkbox" checked disabled />
	<label for="checkbox-core-theme-2-checked" class="u-dis-ib c-field-toggle__text c-checkbox__text">
		Checkbox
	</label>
</span>

```

*/
.c-checkbox__text:after {
  content: "X";
  width: 1.1111111111rem;
  height: 1.1111111111rem;
  display: flex;
  align-items: center;
  justify-content: center; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Input > Placeholder Styles HTS
category: 5. Component > Form
---

`@mixin placeholder-styles-large` contains styles for inputs `@placeholder` attribute

Types of placeholders:
- Default: No classes
- Base: `.c-input`
- Theme 1: `.t-form-1`
- Theme 2: `.t-form-2`

```default.html
	<input placeholder="Placeholder" type="text" />
```

```base.html
	<input class="** c-input **" placeholder="Placeholder" type="text" />
```

```t-form-1.html
	<input class="** c-input ** t-form-1" placeholder="Placeholder" type="text"  />
```

```t-form-2.html
	<input class="** c-input ** t-form-2" placeholder="Placeholder" type="text"  />

```

*/
.u-primary-dark, .u-color-primary-dark, .u-primary-dark-before:before, .u-color-primary-dark-before:before, .u-primary-dark-after:after, .u-color-primary-dark-after:after {
  color: #B21B1F; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark\@large, .u-color-primary-dark\@large, .u-primary-dark-before::before\@large, .u-color-primary-dark-before::before\@large, .u-primary-dark-after::after\@large, .u-color-primary-dark-after::after\@large {
      color: #B21B1F; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark\@small, .u-color-primary-dark\@small, .u-primary-dark-before::before\@small, .u-color-primary-dark-before::before\@small, .u-primary-dark-after::after\@small, .u-color-primary-dark-after::after\@small {
      color: #B21B1F; } }

.u-primary-dark-bg, .u-color-primary-dark-bg, .u-bg-primary-dark, .u-primary-dark-bg-before:before, .u-color-primary-dark-bg-before:before, .u-primary-dark-bg-after:after, .u-color-primary-dark-bg-after:after {
  background-color: #B21B1F; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark-bg\@large, .u-color-primary-dark-bg\@large, .u-bg-primary-dark\@large, .u-primary-dark-bg-before::before\@large, .u-color-primary-dark-bg-before::before\@large, .u-primary-dark-bg-after::after\@large, .u-color-primary-dark-bg-after::after\@large {
      background-color: #B21B1F; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark-bg\@small, .u-color-primary-dark-bg\@small, .u-bg-primary-dark\@small, .u-primary-dark-bg-before::before\@small, .u-color-primary-dark-bg-before::before\@small, .u-primary-dark-bg-after::after\@small, .u-color-primary-dark-bg-after::after\@small {
      background-color: #B21B1F; } }

.u-primary-dark-bg {
  background-color: #B21B1F; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark-bg\@large {
      background-color: #B21B1F; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark-bg\@small {
      background-color: #B21B1F; } }

.u-primary-dark-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark-bg\@small {
      color: #FFF; } }

.u-primary-dark-reverse, .u-color-primary-dark-reverse, .u-primary-dark-before-reverse:before, .u-color-primary-dark-before-reverse:before, .u-primary-dark-after-reverse:after, .u-color-primary-dark-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark-reverse\@large, .u-color-primary-dark-reverse\@large, .u-primary-dark-before-reverse::before\@large, .u-color-primary-dark-before-reverse::before\@large, .u-primary-dark-after-reverse::after\@large, .u-color-primary-dark-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark-reverse\@small, .u-color-primary-dark-reverse\@small, .u-primary-dark-before-reverse::before\@small, .u-color-primary-dark-before-reverse::before\@small, .u-primary-dark-after-reverse::after\@small, .u-color-primary-dark-after-reverse::after\@small {
      color: #FFF; } }

.u-primary-dark-bg-reverse, .u-color-primary-dark-bg-reverse, .u-bg-primary-dark-reverse, .u-primary-dark-bg-before-reverse:before, .u-color-primary-dark-bg-before-reverse:before, .u-primary-dark-bg-after-reverse:after, .u-color-primary-dark-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark-bg-reverse\@large, .u-color-primary-dark-bg-reverse\@large, .u-bg-primary-dark-reverse\@large, .u-primary-dark-bg-before-reverse::before\@large, .u-color-primary-dark-bg-before-reverse::before\@large, .u-primary-dark-bg-after-reverse::after\@large, .u-color-primary-dark-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark-bg-reverse\@small, .u-color-primary-dark-bg-reverse\@small, .u-bg-primary-dark-reverse\@small, .u-primary-dark-bg-before-reverse::before\@small, .u-color-primary-dark-bg-before-reverse::before\@small, .u-primary-dark-bg-after-reverse::after\@small, .u-color-primary-dark-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-primary-dark-bg-reverse {
  color: #B21B1F; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-dark-bg-reverse\@large {
      color: #B21B1F; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-dark-bg-reverse\@small {
      color: #B21B1F; } }

.u-primary, .u-color-primary, .u-primary-before:before, .u-color-primary-before:before, .u-primary-after:after, .u-color-primary-after:after {
  color: #D1292E; }
  @media screen and (min-width: 47.5rem) {
    .u-primary\@large, .u-color-primary\@large, .u-primary-before::before\@large, .u-color-primary-before::before\@large, .u-primary-after::after\@large, .u-color-primary-after::after\@large {
      color: #D1292E; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary\@small, .u-color-primary\@small, .u-primary-before::before\@small, .u-color-primary-before::before\@small, .u-primary-after::after\@small, .u-color-primary-after::after\@small {
      color: #D1292E; } }

.u-primary-bg, .u-color-primary-bg, .u-bg-primary, .u-primary-bg-before:before, .u-color-primary-bg-before:before, .u-primary-bg-after:after, .u-color-primary-bg-after:after {
  background-color: #D1292E; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-bg\@large, .u-color-primary-bg\@large, .u-bg-primary\@large, .u-primary-bg-before::before\@large, .u-color-primary-bg-before::before\@large, .u-primary-bg-after::after\@large, .u-color-primary-bg-after::after\@large {
      background-color: #D1292E; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-bg\@small, .u-color-primary-bg\@small, .u-bg-primary\@small, .u-primary-bg-before::before\@small, .u-color-primary-bg-before::before\@small, .u-primary-bg-after::after\@small, .u-color-primary-bg-after::after\@small {
      background-color: #D1292E; } }

.u-primary-bg {
  background-color: #D1292E; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-bg\@large {
      background-color: #D1292E; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-bg\@small {
      background-color: #D1292E; } }

.u-primary-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-bg\@small {
      color: #FFF; } }

.u-primary-reverse, .u-color-primary-reverse, .u-primary-before-reverse:before, .u-color-primary-before-reverse:before, .u-primary-after-reverse:after, .u-color-primary-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-reverse\@large, .u-color-primary-reverse\@large, .u-primary-before-reverse::before\@large, .u-color-primary-before-reverse::before\@large, .u-primary-after-reverse::after\@large, .u-color-primary-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-reverse\@small, .u-color-primary-reverse\@small, .u-primary-before-reverse::before\@small, .u-color-primary-before-reverse::before\@small, .u-primary-after-reverse::after\@small, .u-color-primary-after-reverse::after\@small {
      color: #FFF; } }

.u-primary-bg-reverse, .u-color-primary-bg-reverse, .u-bg-primary-reverse, .u-primary-bg-before-reverse:before, .u-color-primary-bg-before-reverse:before, .u-primary-bg-after-reverse:after, .u-color-primary-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-bg-reverse\@large, .u-color-primary-bg-reverse\@large, .u-bg-primary-reverse\@large, .u-primary-bg-before-reverse::before\@large, .u-color-primary-bg-before-reverse::before\@large, .u-primary-bg-after-reverse::after\@large, .u-color-primary-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-bg-reverse\@small, .u-color-primary-bg-reverse\@small, .u-bg-primary-reverse\@small, .u-primary-bg-before-reverse::before\@small, .u-color-primary-bg-before-reverse::before\@small, .u-primary-bg-after-reverse::after\@small, .u-color-primary-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-primary-bg-reverse {
  color: #D1292E; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-bg-reverse\@large {
      color: #D1292E; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-bg-reverse\@small {
      color: #D1292E; } }

.u-primary-light, .u-color-primary-light, .u-primary-light-before:before, .u-color-primary-light-before:before, .u-primary-light-after:after, .u-color-primary-light-after:after {
  color: #86A5B8; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light\@large, .u-color-primary-light\@large, .u-primary-light-before::before\@large, .u-color-primary-light-before::before\@large, .u-primary-light-after::after\@large, .u-color-primary-light-after::after\@large {
      color: #86A5B8; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light\@small, .u-color-primary-light\@small, .u-primary-light-before::before\@small, .u-color-primary-light-before::before\@small, .u-primary-light-after::after\@small, .u-color-primary-light-after::after\@small {
      color: #86A5B8; } }

.u-primary-light-bg, .u-color-primary-light-bg, .u-bg-primary-light, .u-primary-light-bg-before:before, .u-color-primary-light-bg-before:before, .u-primary-light-bg-after:after, .u-color-primary-light-bg-after:after {
  background-color: #86A5B8; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light-bg\@large, .u-color-primary-light-bg\@large, .u-bg-primary-light\@large, .u-primary-light-bg-before::before\@large, .u-color-primary-light-bg-before::before\@large, .u-primary-light-bg-after::after\@large, .u-color-primary-light-bg-after::after\@large {
      background-color: #86A5B8; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light-bg\@small, .u-color-primary-light-bg\@small, .u-bg-primary-light\@small, .u-primary-light-bg-before::before\@small, .u-color-primary-light-bg-before::before\@small, .u-primary-light-bg-after::after\@small, .u-color-primary-light-bg-after::after\@small {
      background-color: #86A5B8; } }

.u-primary-light-bg {
  background-color: #86A5B8; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light-bg\@large {
      background-color: #86A5B8; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light-bg\@small {
      background-color: #86A5B8; } }

.u-primary-light-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light-bg\@small {
      color: #000; } }

.u-primary-light-reverse, .u-color-primary-light-reverse, .u-primary-light-before-reverse:before, .u-color-primary-light-before-reverse:before, .u-primary-light-after-reverse:after, .u-color-primary-light-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light-reverse\@large, .u-color-primary-light-reverse\@large, .u-primary-light-before-reverse::before\@large, .u-color-primary-light-before-reverse::before\@large, .u-primary-light-after-reverse::after\@large, .u-color-primary-light-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light-reverse\@small, .u-color-primary-light-reverse\@small, .u-primary-light-before-reverse::before\@small, .u-color-primary-light-before-reverse::before\@small, .u-primary-light-after-reverse::after\@small, .u-color-primary-light-after-reverse::after\@small {
      color: #000; } }

.u-primary-light-bg-reverse, .u-color-primary-light-bg-reverse, .u-bg-primary-light-reverse, .u-primary-light-bg-before-reverse:before, .u-color-primary-light-bg-before-reverse:before, .u-primary-light-bg-after-reverse:after, .u-color-primary-light-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light-bg-reverse\@large, .u-color-primary-light-bg-reverse\@large, .u-bg-primary-light-reverse\@large, .u-primary-light-bg-before-reverse::before\@large, .u-color-primary-light-bg-before-reverse::before\@large, .u-primary-light-bg-after-reverse::after\@large, .u-color-primary-light-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light-bg-reverse\@small, .u-color-primary-light-bg-reverse\@small, .u-bg-primary-light-reverse\@small, .u-primary-light-bg-before-reverse::before\@small, .u-color-primary-light-bg-before-reverse::before\@small, .u-primary-light-bg-after-reverse::after\@small, .u-color-primary-light-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-primary-light-bg-reverse {
  color: #86A5B8; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-light-bg-reverse\@large {
      color: #86A5B8; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-light-bg-reverse\@small {
      color: #86A5B8; } }

.u-primary-accent, .u-color-primary-accent, .u-primary-accent-before:before, .u-color-primary-accent-before:before, .u-primary-accent-after:after, .u-color-primary-accent-after:after {
  color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent\@large, .u-color-primary-accent\@large, .u-primary-accent-before::before\@large, .u-color-primary-accent-before::before\@large, .u-primary-accent-after::after\@large, .u-color-primary-accent-after::after\@large {
      color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent\@small, .u-color-primary-accent\@small, .u-primary-accent-before::before\@small, .u-color-primary-accent-before::before\@small, .u-primary-accent-after::after\@small, .u-color-primary-accent-after::after\@small {
      color: #FF3111; } }

.u-primary-accent-bg, .u-color-primary-accent-bg, .u-bg-primary-accent, .u-primary-accent-bg-before:before, .u-color-primary-accent-bg-before:before, .u-primary-accent-bg-after:after, .u-color-primary-accent-bg-after:after {
  background-color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent-bg\@large, .u-color-primary-accent-bg\@large, .u-bg-primary-accent\@large, .u-primary-accent-bg-before::before\@large, .u-color-primary-accent-bg-before::before\@large, .u-primary-accent-bg-after::after\@large, .u-color-primary-accent-bg-after::after\@large {
      background-color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent-bg\@small, .u-color-primary-accent-bg\@small, .u-bg-primary-accent\@small, .u-primary-accent-bg-before::before\@small, .u-color-primary-accent-bg-before::before\@small, .u-primary-accent-bg-after::after\@small, .u-color-primary-accent-bg-after::after\@small {
      background-color: #FF3111; } }

.u-primary-accent-bg {
  background-color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent-bg\@large {
      background-color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent-bg\@small {
      background-color: #FF3111; } }

.u-primary-accent-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent-bg\@small {
      color: #FFF; } }

.u-primary-accent-reverse, .u-color-primary-accent-reverse, .u-primary-accent-before-reverse:before, .u-color-primary-accent-before-reverse:before, .u-primary-accent-after-reverse:after, .u-color-primary-accent-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent-reverse\@large, .u-color-primary-accent-reverse\@large, .u-primary-accent-before-reverse::before\@large, .u-color-primary-accent-before-reverse::before\@large, .u-primary-accent-after-reverse::after\@large, .u-color-primary-accent-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent-reverse\@small, .u-color-primary-accent-reverse\@small, .u-primary-accent-before-reverse::before\@small, .u-color-primary-accent-before-reverse::before\@small, .u-primary-accent-after-reverse::after\@small, .u-color-primary-accent-after-reverse::after\@small {
      color: #FFF; } }

.u-primary-accent-bg-reverse, .u-color-primary-accent-bg-reverse, .u-bg-primary-accent-reverse, .u-primary-accent-bg-before-reverse:before, .u-color-primary-accent-bg-before-reverse:before, .u-primary-accent-bg-after-reverse:after, .u-color-primary-accent-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent-bg-reverse\@large, .u-color-primary-accent-bg-reverse\@large, .u-bg-primary-accent-reverse\@large, .u-primary-accent-bg-before-reverse::before\@large, .u-color-primary-accent-bg-before-reverse::before\@large, .u-primary-accent-bg-after-reverse::after\@large, .u-color-primary-accent-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent-bg-reverse\@small, .u-color-primary-accent-bg-reverse\@small, .u-bg-primary-accent-reverse\@small, .u-primary-accent-bg-before-reverse::before\@small, .u-color-primary-accent-bg-before-reverse::before\@small, .u-primary-accent-bg-after-reverse::after\@small, .u-color-primary-accent-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-primary-accent-bg-reverse {
  color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-primary-accent-bg-reverse\@large {
      color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-primary-accent-bg-reverse\@small {
      color: #FF3111; } }

.u-secondary-dark, .u-color-secondary-dark, .u-secondary-dark-before:before, .u-color-secondary-dark-before:before, .u-secondary-dark-after:after, .u-color-secondary-dark-after:after {
  color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark\@large, .u-color-secondary-dark\@large, .u-secondary-dark-before::before\@large, .u-color-secondary-dark-before::before\@large, .u-secondary-dark-after::after\@large, .u-color-secondary-dark-after::after\@large {
      color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark\@small, .u-color-secondary-dark\@small, .u-secondary-dark-before::before\@small, .u-color-secondary-dark-before::before\@small, .u-secondary-dark-after::after\@small, .u-color-secondary-dark-after::after\@small {
      color: #1F1C19; } }

.u-secondary-dark-bg, .u-color-secondary-dark-bg, .u-bg-secondary-dark, .u-secondary-dark-bg-before:before, .u-color-secondary-dark-bg-before:before, .u-secondary-dark-bg-after:after, .u-color-secondary-dark-bg-after:after {
  background-color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark-bg\@large, .u-color-secondary-dark-bg\@large, .u-bg-secondary-dark\@large, .u-secondary-dark-bg-before::before\@large, .u-color-secondary-dark-bg-before::before\@large, .u-secondary-dark-bg-after::after\@large, .u-color-secondary-dark-bg-after::after\@large {
      background-color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark-bg\@small, .u-color-secondary-dark-bg\@small, .u-bg-secondary-dark\@small, .u-secondary-dark-bg-before::before\@small, .u-color-secondary-dark-bg-before::before\@small, .u-secondary-dark-bg-after::after\@small, .u-color-secondary-dark-bg-after::after\@small {
      background-color: #1F1C19; } }

.u-secondary-dark-bg {
  background-color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark-bg\@large {
      background-color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark-bg\@small {
      background-color: #1F1C19; } }

.u-secondary-dark-bg {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark-bg\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark-bg\@small {
      color: #E5E3DF; } }

.u-secondary-dark-reverse, .u-color-secondary-dark-reverse, .u-secondary-dark-before-reverse:before, .u-color-secondary-dark-before-reverse:before, .u-secondary-dark-after-reverse:after, .u-color-secondary-dark-after-reverse:after {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark-reverse\@large, .u-color-secondary-dark-reverse\@large, .u-secondary-dark-before-reverse::before\@large, .u-color-secondary-dark-before-reverse::before\@large, .u-secondary-dark-after-reverse::after\@large, .u-color-secondary-dark-after-reverse::after\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark-reverse\@small, .u-color-secondary-dark-reverse\@small, .u-secondary-dark-before-reverse::before\@small, .u-color-secondary-dark-before-reverse::before\@small, .u-secondary-dark-after-reverse::after\@small, .u-color-secondary-dark-after-reverse::after\@small {
      color: #E5E3DF; } }

.u-secondary-dark-bg-reverse, .u-color-secondary-dark-bg-reverse, .u-bg-secondary-dark-reverse, .u-secondary-dark-bg-before-reverse:before, .u-color-secondary-dark-bg-before-reverse:before, .u-secondary-dark-bg-after-reverse:after, .u-color-secondary-dark-bg-after-reverse:after {
  background-color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark-bg-reverse\@large, .u-color-secondary-dark-bg-reverse\@large, .u-bg-secondary-dark-reverse\@large, .u-secondary-dark-bg-before-reverse::before\@large, .u-color-secondary-dark-bg-before-reverse::before\@large, .u-secondary-dark-bg-after-reverse::after\@large, .u-color-secondary-dark-bg-after-reverse::after\@large {
      background-color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark-bg-reverse\@small, .u-color-secondary-dark-bg-reverse\@small, .u-bg-secondary-dark-reverse\@small, .u-secondary-dark-bg-before-reverse::before\@small, .u-color-secondary-dark-bg-before-reverse::before\@small, .u-secondary-dark-bg-after-reverse::after\@small, .u-color-secondary-dark-bg-after-reverse::after\@small {
      background-color: #E5E3DF; } }

.u-secondary-dark-bg-reverse {
  color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-dark-bg-reverse\@large {
      color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-dark-bg-reverse\@small {
      color: #1F1C19; } }

.u-secondary, .u-color-secondary, .u-secondary-before:before, .u-color-secondary-before:before, .u-secondary-after:after, .u-color-secondary-after:after {
  color: #3d3935; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary\@large, .u-color-secondary\@large, .u-secondary-before::before\@large, .u-color-secondary-before::before\@large, .u-secondary-after::after\@large, .u-color-secondary-after::after\@large {
      color: #3d3935; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary\@small, .u-color-secondary\@small, .u-secondary-before::before\@small, .u-color-secondary-before::before\@small, .u-secondary-after::after\@small, .u-color-secondary-after::after\@small {
      color: #3d3935; } }

.u-secondary-bg, .u-color-secondary-bg, .u-bg-secondary, .u-secondary-bg-before:before, .u-color-secondary-bg-before:before, .u-secondary-bg-after:after, .u-color-secondary-bg-after:after {
  background-color: #3d3935; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-bg\@large, .u-color-secondary-bg\@large, .u-bg-secondary\@large, .u-secondary-bg-before::before\@large, .u-color-secondary-bg-before::before\@large, .u-secondary-bg-after::after\@large, .u-color-secondary-bg-after::after\@large {
      background-color: #3d3935; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-bg\@small, .u-color-secondary-bg\@small, .u-bg-secondary\@small, .u-secondary-bg-before::before\@small, .u-color-secondary-bg-before::before\@small, .u-secondary-bg-after::after\@small, .u-color-secondary-bg-after::after\@small {
      background-color: #3d3935; } }

.u-secondary-bg {
  background-color: #3d3935; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-bg\@large {
      background-color: #3d3935; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-bg\@small {
      background-color: #3d3935; } }

.u-secondary-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-bg\@small {
      color: #FFF; } }

.u-secondary-reverse, .u-color-secondary-reverse, .u-secondary-before-reverse:before, .u-color-secondary-before-reverse:before, .u-secondary-after-reverse:after, .u-color-secondary-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-reverse\@large, .u-color-secondary-reverse\@large, .u-secondary-before-reverse::before\@large, .u-color-secondary-before-reverse::before\@large, .u-secondary-after-reverse::after\@large, .u-color-secondary-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-reverse\@small, .u-color-secondary-reverse\@small, .u-secondary-before-reverse::before\@small, .u-color-secondary-before-reverse::before\@small, .u-secondary-after-reverse::after\@small, .u-color-secondary-after-reverse::after\@small {
      color: #FFF; } }

.u-secondary-bg-reverse, .u-color-secondary-bg-reverse, .u-bg-secondary-reverse, .u-secondary-bg-before-reverse:before, .u-color-secondary-bg-before-reverse:before, .u-secondary-bg-after-reverse:after, .u-color-secondary-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-bg-reverse\@large, .u-color-secondary-bg-reverse\@large, .u-bg-secondary-reverse\@large, .u-secondary-bg-before-reverse::before\@large, .u-color-secondary-bg-before-reverse::before\@large, .u-secondary-bg-after-reverse::after\@large, .u-color-secondary-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-bg-reverse\@small, .u-color-secondary-bg-reverse\@small, .u-bg-secondary-reverse\@small, .u-secondary-bg-before-reverse::before\@small, .u-color-secondary-bg-before-reverse::before\@small, .u-secondary-bg-after-reverse::after\@small, .u-color-secondary-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-secondary-bg-reverse {
  color: #3d3935; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-bg-reverse\@large {
      color: #3d3935; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-bg-reverse\@small {
      color: #3d3935; } }

.u-secondary-light, .u-color-secondary-light, .u-secondary-light-before:before, .u-color-secondary-light-before:before, .u-secondary-light-after:after, .u-color-secondary-light-after:after {
  color: #645E59; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light\@large, .u-color-secondary-light\@large, .u-secondary-light-before::before\@large, .u-color-secondary-light-before::before\@large, .u-secondary-light-after::after\@large, .u-color-secondary-light-after::after\@large {
      color: #645E59; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light\@small, .u-color-secondary-light\@small, .u-secondary-light-before::before\@small, .u-color-secondary-light-before::before\@small, .u-secondary-light-after::after\@small, .u-color-secondary-light-after::after\@small {
      color: #645E59; } }

.u-secondary-light-bg, .u-color-secondary-light-bg, .u-bg-secondary-light, .u-secondary-light-bg-before:before, .u-color-secondary-light-bg-before:before, .u-secondary-light-bg-after:after, .u-color-secondary-light-bg-after:after {
  background-color: #645E59; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light-bg\@large, .u-color-secondary-light-bg\@large, .u-bg-secondary-light\@large, .u-secondary-light-bg-before::before\@large, .u-color-secondary-light-bg-before::before\@large, .u-secondary-light-bg-after::after\@large, .u-color-secondary-light-bg-after::after\@large {
      background-color: #645E59; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light-bg\@small, .u-color-secondary-light-bg\@small, .u-bg-secondary-light\@small, .u-secondary-light-bg-before::before\@small, .u-color-secondary-light-bg-before::before\@small, .u-secondary-light-bg-after::after\@small, .u-color-secondary-light-bg-after::after\@small {
      background-color: #645E59; } }

.u-secondary-light-bg {
  background-color: #645E59; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light-bg\@large {
      background-color: #645E59; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light-bg\@small {
      background-color: #645E59; } }

.u-secondary-light-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light-bg\@small {
      color: #FFF; } }

.u-secondary-light-reverse, .u-color-secondary-light-reverse, .u-secondary-light-before-reverse:before, .u-color-secondary-light-before-reverse:before, .u-secondary-light-after-reverse:after, .u-color-secondary-light-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light-reverse\@large, .u-color-secondary-light-reverse\@large, .u-secondary-light-before-reverse::before\@large, .u-color-secondary-light-before-reverse::before\@large, .u-secondary-light-after-reverse::after\@large, .u-color-secondary-light-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light-reverse\@small, .u-color-secondary-light-reverse\@small, .u-secondary-light-before-reverse::before\@small, .u-color-secondary-light-before-reverse::before\@small, .u-secondary-light-after-reverse::after\@small, .u-color-secondary-light-after-reverse::after\@small {
      color: #FFF; } }

.u-secondary-light-bg-reverse, .u-color-secondary-light-bg-reverse, .u-bg-secondary-light-reverse, .u-secondary-light-bg-before-reverse:before, .u-color-secondary-light-bg-before-reverse:before, .u-secondary-light-bg-after-reverse:after, .u-color-secondary-light-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light-bg-reverse\@large, .u-color-secondary-light-bg-reverse\@large, .u-bg-secondary-light-reverse\@large, .u-secondary-light-bg-before-reverse::before\@large, .u-color-secondary-light-bg-before-reverse::before\@large, .u-secondary-light-bg-after-reverse::after\@large, .u-color-secondary-light-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light-bg-reverse\@small, .u-color-secondary-light-bg-reverse\@small, .u-bg-secondary-light-reverse\@small, .u-secondary-light-bg-before-reverse::before\@small, .u-color-secondary-light-bg-before-reverse::before\@small, .u-secondary-light-bg-after-reverse::after\@small, .u-color-secondary-light-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-secondary-light-bg-reverse {
  color: #645E59; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-light-bg-reverse\@large {
      color: #645E59; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-light-bg-reverse\@small {
      color: #645E59; } }

.u-secondary-accent, .u-color-secondary-accent, .u-secondary-accent-before:before, .u-color-secondary-accent-before:before, .u-secondary-accent-after:after, .u-color-secondary-accent-after:after {
  color: #565F73; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent\@large, .u-color-secondary-accent\@large, .u-secondary-accent-before::before\@large, .u-color-secondary-accent-before::before\@large, .u-secondary-accent-after::after\@large, .u-color-secondary-accent-after::after\@large {
      color: #565F73; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent\@small, .u-color-secondary-accent\@small, .u-secondary-accent-before::before\@small, .u-color-secondary-accent-before::before\@small, .u-secondary-accent-after::after\@small, .u-color-secondary-accent-after::after\@small {
      color: #565F73; } }

.u-secondary-accent-bg, .u-color-secondary-accent-bg, .u-bg-secondary-accent, .u-secondary-accent-bg-before:before, .u-color-secondary-accent-bg-before:before, .u-secondary-accent-bg-after:after, .u-color-secondary-accent-bg-after:after {
  background-color: #565F73; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent-bg\@large, .u-color-secondary-accent-bg\@large, .u-bg-secondary-accent\@large, .u-secondary-accent-bg-before::before\@large, .u-color-secondary-accent-bg-before::before\@large, .u-secondary-accent-bg-after::after\@large, .u-color-secondary-accent-bg-after::after\@large {
      background-color: #565F73; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent-bg\@small, .u-color-secondary-accent-bg\@small, .u-bg-secondary-accent\@small, .u-secondary-accent-bg-before::before\@small, .u-color-secondary-accent-bg-before::before\@small, .u-secondary-accent-bg-after::after\@small, .u-color-secondary-accent-bg-after::after\@small {
      background-color: #565F73; } }

.u-secondary-accent-bg {
  background-color: #565F73; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent-bg\@large {
      background-color: #565F73; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent-bg\@small {
      background-color: #565F73; } }

.u-secondary-accent-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent-bg\@small {
      color: #FFF; } }

.u-secondary-accent-reverse, .u-color-secondary-accent-reverse, .u-secondary-accent-before-reverse:before, .u-color-secondary-accent-before-reverse:before, .u-secondary-accent-after-reverse:after, .u-color-secondary-accent-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent-reverse\@large, .u-color-secondary-accent-reverse\@large, .u-secondary-accent-before-reverse::before\@large, .u-color-secondary-accent-before-reverse::before\@large, .u-secondary-accent-after-reverse::after\@large, .u-color-secondary-accent-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent-reverse\@small, .u-color-secondary-accent-reverse\@small, .u-secondary-accent-before-reverse::before\@small, .u-color-secondary-accent-before-reverse::before\@small, .u-secondary-accent-after-reverse::after\@small, .u-color-secondary-accent-after-reverse::after\@small {
      color: #FFF; } }

.u-secondary-accent-bg-reverse, .u-color-secondary-accent-bg-reverse, .u-bg-secondary-accent-reverse, .u-secondary-accent-bg-before-reverse:before, .u-color-secondary-accent-bg-before-reverse:before, .u-secondary-accent-bg-after-reverse:after, .u-color-secondary-accent-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent-bg-reverse\@large, .u-color-secondary-accent-bg-reverse\@large, .u-bg-secondary-accent-reverse\@large, .u-secondary-accent-bg-before-reverse::before\@large, .u-color-secondary-accent-bg-before-reverse::before\@large, .u-secondary-accent-bg-after-reverse::after\@large, .u-color-secondary-accent-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent-bg-reverse\@small, .u-color-secondary-accent-bg-reverse\@small, .u-bg-secondary-accent-reverse\@small, .u-secondary-accent-bg-before-reverse::before\@small, .u-color-secondary-accent-bg-before-reverse::before\@small, .u-secondary-accent-bg-after-reverse::after\@small, .u-color-secondary-accent-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-secondary-accent-bg-reverse {
  color: #565F73; }
  @media screen and (min-width: 47.5rem) {
    .u-secondary-accent-bg-reverse\@large {
      color: #565F73; } }
  @media screen and (max-width: 47.5rem) {
    .u-secondary-accent-bg-reverse\@small {
      color: #565F73; } }

.u-accent-dark, .u-color-accent-dark, .u-accent-dark-before:before, .u-color-accent-dark-before:before, .u-accent-dark-after:after, .u-color-accent-dark-after:after {
  color: #A22223; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark\@large, .u-color-accent-dark\@large, .u-accent-dark-before::before\@large, .u-color-accent-dark-before::before\@large, .u-accent-dark-after::after\@large, .u-color-accent-dark-after::after\@large {
      color: #A22223; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark\@small, .u-color-accent-dark\@small, .u-accent-dark-before::before\@small, .u-color-accent-dark-before::before\@small, .u-accent-dark-after::after\@small, .u-color-accent-dark-after::after\@small {
      color: #A22223; } }

.u-accent-dark-bg, .u-color-accent-dark-bg, .u-bg-accent-dark, .u-accent-dark-bg-before:before, .u-color-accent-dark-bg-before:before, .u-accent-dark-bg-after:after, .u-color-accent-dark-bg-after:after {
  background-color: #A22223; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark-bg\@large, .u-color-accent-dark-bg\@large, .u-bg-accent-dark\@large, .u-accent-dark-bg-before::before\@large, .u-color-accent-dark-bg-before::before\@large, .u-accent-dark-bg-after::after\@large, .u-color-accent-dark-bg-after::after\@large {
      background-color: #A22223; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark-bg\@small, .u-color-accent-dark-bg\@small, .u-bg-accent-dark\@small, .u-accent-dark-bg-before::before\@small, .u-color-accent-dark-bg-before::before\@small, .u-accent-dark-bg-after::after\@small, .u-color-accent-dark-bg-after::after\@small {
      background-color: #A22223; } }

.u-accent-dark-bg {
  background-color: #A22223; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark-bg\@large {
      background-color: #A22223; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark-bg\@small {
      background-color: #A22223; } }

.u-accent-dark-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark-bg\@small {
      color: #FFF; } }

.u-accent-dark-reverse, .u-color-accent-dark-reverse, .u-accent-dark-before-reverse:before, .u-color-accent-dark-before-reverse:before, .u-accent-dark-after-reverse:after, .u-color-accent-dark-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark-reverse\@large, .u-color-accent-dark-reverse\@large, .u-accent-dark-before-reverse::before\@large, .u-color-accent-dark-before-reverse::before\@large, .u-accent-dark-after-reverse::after\@large, .u-color-accent-dark-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark-reverse\@small, .u-color-accent-dark-reverse\@small, .u-accent-dark-before-reverse::before\@small, .u-color-accent-dark-before-reverse::before\@small, .u-accent-dark-after-reverse::after\@small, .u-color-accent-dark-after-reverse::after\@small {
      color: #FFF; } }

.u-accent-dark-bg-reverse, .u-color-accent-dark-bg-reverse, .u-bg-accent-dark-reverse, .u-accent-dark-bg-before-reverse:before, .u-color-accent-dark-bg-before-reverse:before, .u-accent-dark-bg-after-reverse:after, .u-color-accent-dark-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark-bg-reverse\@large, .u-color-accent-dark-bg-reverse\@large, .u-bg-accent-dark-reverse\@large, .u-accent-dark-bg-before-reverse::before\@large, .u-color-accent-dark-bg-before-reverse::before\@large, .u-accent-dark-bg-after-reverse::after\@large, .u-color-accent-dark-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark-bg-reverse\@small, .u-color-accent-dark-bg-reverse\@small, .u-bg-accent-dark-reverse\@small, .u-accent-dark-bg-before-reverse::before\@small, .u-color-accent-dark-bg-before-reverse::before\@small, .u-accent-dark-bg-after-reverse::after\@small, .u-color-accent-dark-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-accent-dark-bg-reverse {
  color: #A22223; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-dark-bg-reverse\@large {
      color: #A22223; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-dark-bg-reverse\@small {
      color: #A22223; } }

.u-accent, .u-color-accent, .u-accent-before:before, .u-color-accent-before:before, .u-accent-after:after, .u-color-accent-after:after {
  color: #9ECEC9; }
  @media screen and (min-width: 47.5rem) {
    .u-accent\@large, .u-color-accent\@large, .u-accent-before::before\@large, .u-color-accent-before::before\@large, .u-accent-after::after\@large, .u-color-accent-after::after\@large {
      color: #9ECEC9; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent\@small, .u-color-accent\@small, .u-accent-before::before\@small, .u-color-accent-before::before\@small, .u-accent-after::after\@small, .u-color-accent-after::after\@small {
      color: #9ECEC9; } }

.u-accent-bg, .u-color-accent-bg, .u-bg-accent, .u-accent-bg-before:before, .u-color-accent-bg-before:before, .u-accent-bg-after:after, .u-color-accent-bg-after:after {
  background-color: #9ECEC9; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-bg\@large, .u-color-accent-bg\@large, .u-bg-accent\@large, .u-accent-bg-before::before\@large, .u-color-accent-bg-before::before\@large, .u-accent-bg-after::after\@large, .u-color-accent-bg-after::after\@large {
      background-color: #9ECEC9; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-bg\@small, .u-color-accent-bg\@small, .u-bg-accent\@small, .u-accent-bg-before::before\@small, .u-color-accent-bg-before::before\@small, .u-accent-bg-after::after\@small, .u-color-accent-bg-after::after\@small {
      background-color: #9ECEC9; } }

.u-accent-bg {
  background-color: #9ECEC9; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-bg\@large {
      background-color: #9ECEC9; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-bg\@small {
      background-color: #9ECEC9; } }

.u-accent-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-bg\@small {
      color: #FFF; } }

.u-accent-reverse, .u-color-accent-reverse, .u-accent-before-reverse:before, .u-color-accent-before-reverse:before, .u-accent-after-reverse:after, .u-color-accent-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-reverse\@large, .u-color-accent-reverse\@large, .u-accent-before-reverse::before\@large, .u-color-accent-before-reverse::before\@large, .u-accent-after-reverse::after\@large, .u-color-accent-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-reverse\@small, .u-color-accent-reverse\@small, .u-accent-before-reverse::before\@small, .u-color-accent-before-reverse::before\@small, .u-accent-after-reverse::after\@small, .u-color-accent-after-reverse::after\@small {
      color: #FFF; } }

.u-accent-bg-reverse, .u-color-accent-bg-reverse, .u-bg-accent-reverse, .u-accent-bg-before-reverse:before, .u-color-accent-bg-before-reverse:before, .u-accent-bg-after-reverse:after, .u-color-accent-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-bg-reverse\@large, .u-color-accent-bg-reverse\@large, .u-bg-accent-reverse\@large, .u-accent-bg-before-reverse::before\@large, .u-color-accent-bg-before-reverse::before\@large, .u-accent-bg-after-reverse::after\@large, .u-color-accent-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-bg-reverse\@small, .u-color-accent-bg-reverse\@small, .u-bg-accent-reverse\@small, .u-accent-bg-before-reverse::before\@small, .u-color-accent-bg-before-reverse::before\@small, .u-accent-bg-after-reverse::after\@small, .u-color-accent-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-accent-bg-reverse {
  color: #9ECEC9; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-bg-reverse\@large {
      color: #9ECEC9; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-bg-reverse\@small {
      color: #9ECEC9; } }

.u-accent-light, .u-color-accent-light, .u-accent-light-before:before, .u-color-accent-light-before:before, .u-accent-light-after:after, .u-color-accent-light-after:after {
  color: #E42021; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light\@large, .u-color-accent-light\@large, .u-accent-light-before::before\@large, .u-color-accent-light-before::before\@large, .u-accent-light-after::after\@large, .u-color-accent-light-after::after\@large {
      color: #E42021; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light\@small, .u-color-accent-light\@small, .u-accent-light-before::before\@small, .u-color-accent-light-before::before\@small, .u-accent-light-after::after\@small, .u-color-accent-light-after::after\@small {
      color: #E42021; } }

.u-accent-light-bg, .u-color-accent-light-bg, .u-bg-accent-light, .u-accent-light-bg-before:before, .u-color-accent-light-bg-before:before, .u-accent-light-bg-after:after, .u-color-accent-light-bg-after:after {
  background-color: #E42021; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light-bg\@large, .u-color-accent-light-bg\@large, .u-bg-accent-light\@large, .u-accent-light-bg-before::before\@large, .u-color-accent-light-bg-before::before\@large, .u-accent-light-bg-after::after\@large, .u-color-accent-light-bg-after::after\@large {
      background-color: #E42021; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light-bg\@small, .u-color-accent-light-bg\@small, .u-bg-accent-light\@small, .u-accent-light-bg-before::before\@small, .u-color-accent-light-bg-before::before\@small, .u-accent-light-bg-after::after\@small, .u-color-accent-light-bg-after::after\@small {
      background-color: #E42021; } }

.u-accent-light-bg {
  background-color: #E42021; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light-bg\@large {
      background-color: #E42021; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light-bg\@small {
      background-color: #E42021; } }

.u-accent-light-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light-bg\@small {
      color: #FFF; } }

.u-accent-light-reverse, .u-color-accent-light-reverse, .u-accent-light-before-reverse:before, .u-color-accent-light-before-reverse:before, .u-accent-light-after-reverse:after, .u-color-accent-light-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light-reverse\@large, .u-color-accent-light-reverse\@large, .u-accent-light-before-reverse::before\@large, .u-color-accent-light-before-reverse::before\@large, .u-accent-light-after-reverse::after\@large, .u-color-accent-light-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light-reverse\@small, .u-color-accent-light-reverse\@small, .u-accent-light-before-reverse::before\@small, .u-color-accent-light-before-reverse::before\@small, .u-accent-light-after-reverse::after\@small, .u-color-accent-light-after-reverse::after\@small {
      color: #FFF; } }

.u-accent-light-bg-reverse, .u-color-accent-light-bg-reverse, .u-bg-accent-light-reverse, .u-accent-light-bg-before-reverse:before, .u-color-accent-light-bg-before-reverse:before, .u-accent-light-bg-after-reverse:after, .u-color-accent-light-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light-bg-reverse\@large, .u-color-accent-light-bg-reverse\@large, .u-bg-accent-light-reverse\@large, .u-accent-light-bg-before-reverse::before\@large, .u-color-accent-light-bg-before-reverse::before\@large, .u-accent-light-bg-after-reverse::after\@large, .u-color-accent-light-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light-bg-reverse\@small, .u-color-accent-light-bg-reverse\@small, .u-bg-accent-light-reverse\@small, .u-accent-light-bg-before-reverse::before\@small, .u-color-accent-light-bg-before-reverse::before\@small, .u-accent-light-bg-after-reverse::after\@small, .u-color-accent-light-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-accent-light-bg-reverse {
  color: #E42021; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-light-bg-reverse\@large {
      color: #E42021; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-light-bg-reverse\@small {
      color: #E42021; } }

.u-accent-accent, .u-color-accent-accent, .u-accent-accent-before:before, .u-color-accent-accent-before:before, .u-accent-accent-after:after, .u-color-accent-accent-after:after {
  color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent\@large, .u-color-accent-accent\@large, .u-accent-accent-before::before\@large, .u-color-accent-accent-before::before\@large, .u-accent-accent-after::after\@large, .u-color-accent-accent-after::after\@large {
      color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent\@small, .u-color-accent-accent\@small, .u-accent-accent-before::before\@small, .u-color-accent-accent-before::before\@small, .u-accent-accent-after::after\@small, .u-color-accent-accent-after::after\@small {
      color: #FF3111; } }

.u-accent-accent-bg, .u-color-accent-accent-bg, .u-bg-accent-accent, .u-accent-accent-bg-before:before, .u-color-accent-accent-bg-before:before, .u-accent-accent-bg-after:after, .u-color-accent-accent-bg-after:after {
  background-color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent-bg\@large, .u-color-accent-accent-bg\@large, .u-bg-accent-accent\@large, .u-accent-accent-bg-before::before\@large, .u-color-accent-accent-bg-before::before\@large, .u-accent-accent-bg-after::after\@large, .u-color-accent-accent-bg-after::after\@large {
      background-color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent-bg\@small, .u-color-accent-accent-bg\@small, .u-bg-accent-accent\@small, .u-accent-accent-bg-before::before\@small, .u-color-accent-accent-bg-before::before\@small, .u-accent-accent-bg-after::after\@small, .u-color-accent-accent-bg-after::after\@small {
      background-color: #FF3111; } }

.u-accent-accent-bg {
  background-color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent-bg\@large {
      background-color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent-bg\@small {
      background-color: #FF3111; } }

.u-accent-accent-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent-bg\@small {
      color: #FFF; } }

.u-accent-accent-reverse, .u-color-accent-accent-reverse, .u-accent-accent-before-reverse:before, .u-color-accent-accent-before-reverse:before, .u-accent-accent-after-reverse:after, .u-color-accent-accent-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent-reverse\@large, .u-color-accent-accent-reverse\@large, .u-accent-accent-before-reverse::before\@large, .u-color-accent-accent-before-reverse::before\@large, .u-accent-accent-after-reverse::after\@large, .u-color-accent-accent-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent-reverse\@small, .u-color-accent-accent-reverse\@small, .u-accent-accent-before-reverse::before\@small, .u-color-accent-accent-before-reverse::before\@small, .u-accent-accent-after-reverse::after\@small, .u-color-accent-accent-after-reverse::after\@small {
      color: #FFF; } }

.u-accent-accent-bg-reverse, .u-color-accent-accent-bg-reverse, .u-bg-accent-accent-reverse, .u-accent-accent-bg-before-reverse:before, .u-color-accent-accent-bg-before-reverse:before, .u-accent-accent-bg-after-reverse:after, .u-color-accent-accent-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent-bg-reverse\@large, .u-color-accent-accent-bg-reverse\@large, .u-bg-accent-accent-reverse\@large, .u-accent-accent-bg-before-reverse::before\@large, .u-color-accent-accent-bg-before-reverse::before\@large, .u-accent-accent-bg-after-reverse::after\@large, .u-color-accent-accent-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent-bg-reverse\@small, .u-color-accent-accent-bg-reverse\@small, .u-bg-accent-accent-reverse\@small, .u-accent-accent-bg-before-reverse::before\@small, .u-color-accent-accent-bg-before-reverse::before\@small, .u-accent-accent-bg-after-reverse::after\@small, .u-color-accent-accent-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-accent-accent-bg-reverse {
  color: #FF3111; }
  @media screen and (min-width: 47.5rem) {
    .u-accent-accent-bg-reverse\@large {
      color: #FF3111; } }
  @media screen and (max-width: 47.5rem) {
    .u-accent-accent-bg-reverse\@small {
      color: #FF3111; } }

.u-dark-dark, .u-color-dark-dark, .u-dark-dark-before:before, .u-color-dark-dark-before:before, .u-dark-dark-after:after, .u-color-dark-dark-after:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark\@large, .u-color-dark-dark\@large, .u-dark-dark-before::before\@large, .u-color-dark-dark-before::before\@large, .u-dark-dark-after::after\@large, .u-color-dark-dark-after::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark\@small, .u-color-dark-dark\@small, .u-dark-dark-before::before\@small, .u-color-dark-dark-before::before\@small, .u-dark-dark-after::after\@small, .u-color-dark-dark-after::after\@small {
      color: #000; } }

.u-dark-dark-bg, .u-color-dark-dark-bg, .u-bg-dark-dark, .u-dark-dark-bg-before:before, .u-color-dark-dark-bg-before:before, .u-dark-dark-bg-after:after, .u-color-dark-dark-bg-after:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark-bg\@large, .u-color-dark-dark-bg\@large, .u-bg-dark-dark\@large, .u-dark-dark-bg-before::before\@large, .u-color-dark-dark-bg-before::before\@large, .u-dark-dark-bg-after::after\@large, .u-color-dark-dark-bg-after::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark-bg\@small, .u-color-dark-dark-bg\@small, .u-bg-dark-dark\@small, .u-dark-dark-bg-before::before\@small, .u-color-dark-dark-bg-before::before\@small, .u-dark-dark-bg-after::after\@small, .u-color-dark-dark-bg-after::after\@small {
      background-color: #000; } }

.u-dark-dark-bg {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark-bg\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark-bg\@small {
      background-color: #000; } }

.u-dark-dark-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark-bg\@small {
      color: #FFF; } }

.u-dark-dark-reverse, .u-color-dark-dark-reverse, .u-dark-dark-before-reverse:before, .u-color-dark-dark-before-reverse:before, .u-dark-dark-after-reverse:after, .u-color-dark-dark-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark-reverse\@large, .u-color-dark-dark-reverse\@large, .u-dark-dark-before-reverse::before\@large, .u-color-dark-dark-before-reverse::before\@large, .u-dark-dark-after-reverse::after\@large, .u-color-dark-dark-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark-reverse\@small, .u-color-dark-dark-reverse\@small, .u-dark-dark-before-reverse::before\@small, .u-color-dark-dark-before-reverse::before\@small, .u-dark-dark-after-reverse::after\@small, .u-color-dark-dark-after-reverse::after\@small {
      color: #FFF; } }

.u-dark-dark-bg-reverse, .u-color-dark-dark-bg-reverse, .u-bg-dark-dark-reverse, .u-dark-dark-bg-before-reverse:before, .u-color-dark-dark-bg-before-reverse:before, .u-dark-dark-bg-after-reverse:after, .u-color-dark-dark-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark-bg-reverse\@large, .u-color-dark-dark-bg-reverse\@large, .u-bg-dark-dark-reverse\@large, .u-dark-dark-bg-before-reverse::before\@large, .u-color-dark-dark-bg-before-reverse::before\@large, .u-dark-dark-bg-after-reverse::after\@large, .u-color-dark-dark-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark-bg-reverse\@small, .u-color-dark-dark-bg-reverse\@small, .u-bg-dark-dark-reverse\@small, .u-dark-dark-bg-before-reverse::before\@small, .u-color-dark-dark-bg-before-reverse::before\@small, .u-dark-dark-bg-after-reverse::after\@small, .u-color-dark-dark-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-dark-dark-bg-reverse {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-dark-bg-reverse\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-dark-bg-reverse\@small {
      color: #000; } }

.u-dark, .u-color-dark, .u-dark-before:before, .u-color-dark-before:before, .u-dark-after:after, .u-color-dark-after:after {
  color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-dark\@large, .u-color-dark\@large, .u-dark-before::before\@large, .u-color-dark-before::before\@large, .u-dark-after::after\@large, .u-color-dark-after::after\@large {
      color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark\@small, .u-color-dark\@small, .u-dark-before::before\@small, .u-color-dark-before::before\@small, .u-dark-after::after\@small, .u-color-dark-after::after\@small {
      color: #333; } }

.u-dark-bg, .u-color-dark-bg, .u-bg-dark, .u-dark-bg-before:before, .u-color-dark-bg-before:before, .u-dark-bg-after:after, .u-color-dark-bg-after:after {
  background-color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-bg\@large, .u-color-dark-bg\@large, .u-bg-dark\@large, .u-dark-bg-before::before\@large, .u-color-dark-bg-before::before\@large, .u-dark-bg-after::after\@large, .u-color-dark-bg-after::after\@large {
      background-color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-bg\@small, .u-color-dark-bg\@small, .u-bg-dark\@small, .u-dark-bg-before::before\@small, .u-color-dark-bg-before::before\@small, .u-dark-bg-after::after\@small, .u-color-dark-bg-after::after\@small {
      background-color: #333; } }

.u-dark-bg {
  background-color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-bg\@large {
      background-color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-bg\@small {
      background-color: #333; } }

.u-dark-bg {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-bg\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-bg\@small {
      color: #E5E3DF; } }

.u-dark-reverse, .u-color-dark-reverse, .u-dark-before-reverse:before, .u-color-dark-before-reverse:before, .u-dark-after-reverse:after, .u-color-dark-after-reverse:after {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-reverse\@large, .u-color-dark-reverse\@large, .u-dark-before-reverse::before\@large, .u-color-dark-before-reverse::before\@large, .u-dark-after-reverse::after\@large, .u-color-dark-after-reverse::after\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-reverse\@small, .u-color-dark-reverse\@small, .u-dark-before-reverse::before\@small, .u-color-dark-before-reverse::before\@small, .u-dark-after-reverse::after\@small, .u-color-dark-after-reverse::after\@small {
      color: #E5E3DF; } }

.u-dark-bg-reverse, .u-color-dark-bg-reverse, .u-bg-dark-reverse, .u-dark-bg-before-reverse:before, .u-color-dark-bg-before-reverse:before, .u-dark-bg-after-reverse:after, .u-color-dark-bg-after-reverse:after {
  background-color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-bg-reverse\@large, .u-color-dark-bg-reverse\@large, .u-bg-dark-reverse\@large, .u-dark-bg-before-reverse::before\@large, .u-color-dark-bg-before-reverse::before\@large, .u-dark-bg-after-reverse::after\@large, .u-color-dark-bg-after-reverse::after\@large {
      background-color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-bg-reverse\@small, .u-color-dark-bg-reverse\@small, .u-bg-dark-reverse\@small, .u-dark-bg-before-reverse::before\@small, .u-color-dark-bg-before-reverse::before\@small, .u-dark-bg-after-reverse::after\@small, .u-color-dark-bg-after-reverse::after\@small {
      background-color: #E5E3DF; } }

.u-dark-bg-reverse {
  color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-bg-reverse\@large {
      color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-bg-reverse\@small {
      color: #333; } }

.u-dark-light, .u-color-dark-light, .u-dark-light-before:before, .u-color-dark-light-before:before, .u-dark-light-after:after, .u-color-dark-light-after:after {
  color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light\@large, .u-color-dark-light\@large, .u-dark-light-before::before\@large, .u-color-dark-light-before::before\@large, .u-dark-light-after::after\@large, .u-color-dark-light-after::after\@large {
      color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light\@small, .u-color-dark-light\@small, .u-dark-light-before::before\@small, .u-color-dark-light-before::before\@small, .u-dark-light-after::after\@small, .u-color-dark-light-after::after\@small {
      color: #111; } }

.u-dark-light-bg, .u-color-dark-light-bg, .u-bg-dark-light, .u-dark-light-bg-before:before, .u-color-dark-light-bg-before:before, .u-dark-light-bg-after:after, .u-color-dark-light-bg-after:after {
  background-color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light-bg\@large, .u-color-dark-light-bg\@large, .u-bg-dark-light\@large, .u-dark-light-bg-before::before\@large, .u-color-dark-light-bg-before::before\@large, .u-dark-light-bg-after::after\@large, .u-color-dark-light-bg-after::after\@large {
      background-color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light-bg\@small, .u-color-dark-light-bg\@small, .u-bg-dark-light\@small, .u-dark-light-bg-before::before\@small, .u-color-dark-light-bg-before::before\@small, .u-dark-light-bg-after::after\@small, .u-color-dark-light-bg-after::after\@small {
      background-color: #111; } }

.u-dark-light-bg {
  background-color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light-bg\@large {
      background-color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light-bg\@small {
      background-color: #111; } }

.u-dark-light-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light-bg\@small {
      color: #000; } }

.u-dark-light-reverse, .u-color-dark-light-reverse, .u-dark-light-before-reverse:before, .u-color-dark-light-before-reverse:before, .u-dark-light-after-reverse:after, .u-color-dark-light-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light-reverse\@large, .u-color-dark-light-reverse\@large, .u-dark-light-before-reverse::before\@large, .u-color-dark-light-before-reverse::before\@large, .u-dark-light-after-reverse::after\@large, .u-color-dark-light-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light-reverse\@small, .u-color-dark-light-reverse\@small, .u-dark-light-before-reverse::before\@small, .u-color-dark-light-before-reverse::before\@small, .u-dark-light-after-reverse::after\@small, .u-color-dark-light-after-reverse::after\@small {
      color: #000; } }

.u-dark-light-bg-reverse, .u-color-dark-light-bg-reverse, .u-bg-dark-light-reverse, .u-dark-light-bg-before-reverse:before, .u-color-dark-light-bg-before-reverse:before, .u-dark-light-bg-after-reverse:after, .u-color-dark-light-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light-bg-reverse\@large, .u-color-dark-light-bg-reverse\@large, .u-bg-dark-light-reverse\@large, .u-dark-light-bg-before-reverse::before\@large, .u-color-dark-light-bg-before-reverse::before\@large, .u-dark-light-bg-after-reverse::after\@large, .u-color-dark-light-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light-bg-reverse\@small, .u-color-dark-light-bg-reverse\@small, .u-bg-dark-light-reverse\@small, .u-dark-light-bg-before-reverse::before\@small, .u-color-dark-light-bg-before-reverse::before\@small, .u-dark-light-bg-after-reverse::after\@small, .u-color-dark-light-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-dark-light-bg-reverse {
  color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-light-bg-reverse\@large {
      color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-light-bg-reverse\@small {
      color: #111; } }

.u-dark-accent, .u-color-dark-accent, .u-dark-accent-before:before, .u-color-dark-accent-before:before, .u-dark-accent-after:after, .u-color-dark-accent-after:after {
  color: #58585A; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent\@large, .u-color-dark-accent\@large, .u-dark-accent-before::before\@large, .u-color-dark-accent-before::before\@large, .u-dark-accent-after::after\@large, .u-color-dark-accent-after::after\@large {
      color: #58585A; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent\@small, .u-color-dark-accent\@small, .u-dark-accent-before::before\@small, .u-color-dark-accent-before::before\@small, .u-dark-accent-after::after\@small, .u-color-dark-accent-after::after\@small {
      color: #58585A; } }

.u-dark-accent-bg, .u-color-dark-accent-bg, .u-bg-dark-accent, .u-dark-accent-bg-before:before, .u-color-dark-accent-bg-before:before, .u-dark-accent-bg-after:after, .u-color-dark-accent-bg-after:after {
  background-color: #58585A; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent-bg\@large, .u-color-dark-accent-bg\@large, .u-bg-dark-accent\@large, .u-dark-accent-bg-before::before\@large, .u-color-dark-accent-bg-before::before\@large, .u-dark-accent-bg-after::after\@large, .u-color-dark-accent-bg-after::after\@large {
      background-color: #58585A; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent-bg\@small, .u-color-dark-accent-bg\@small, .u-bg-dark-accent\@small, .u-dark-accent-bg-before::before\@small, .u-color-dark-accent-bg-before::before\@small, .u-dark-accent-bg-after::after\@small, .u-color-dark-accent-bg-after::after\@small {
      background-color: #58585A; } }

.u-dark-accent-bg {
  background-color: #58585A; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent-bg\@large {
      background-color: #58585A; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent-bg\@small {
      background-color: #58585A; } }

.u-dark-accent-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent-bg\@small {
      color: #FFF; } }

.u-dark-accent-reverse, .u-color-dark-accent-reverse, .u-dark-accent-before-reverse:before, .u-color-dark-accent-before-reverse:before, .u-dark-accent-after-reverse:after, .u-color-dark-accent-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent-reverse\@large, .u-color-dark-accent-reverse\@large, .u-dark-accent-before-reverse::before\@large, .u-color-dark-accent-before-reverse::before\@large, .u-dark-accent-after-reverse::after\@large, .u-color-dark-accent-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent-reverse\@small, .u-color-dark-accent-reverse\@small, .u-dark-accent-before-reverse::before\@small, .u-color-dark-accent-before-reverse::before\@small, .u-dark-accent-after-reverse::after\@small, .u-color-dark-accent-after-reverse::after\@small {
      color: #FFF; } }

.u-dark-accent-bg-reverse, .u-color-dark-accent-bg-reverse, .u-bg-dark-accent-reverse, .u-dark-accent-bg-before-reverse:before, .u-color-dark-accent-bg-before-reverse:before, .u-dark-accent-bg-after-reverse:after, .u-color-dark-accent-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent-bg-reverse\@large, .u-color-dark-accent-bg-reverse\@large, .u-bg-dark-accent-reverse\@large, .u-dark-accent-bg-before-reverse::before\@large, .u-color-dark-accent-bg-before-reverse::before\@large, .u-dark-accent-bg-after-reverse::after\@large, .u-color-dark-accent-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent-bg-reverse\@small, .u-color-dark-accent-bg-reverse\@small, .u-bg-dark-accent-reverse\@small, .u-dark-accent-bg-before-reverse::before\@small, .u-color-dark-accent-bg-before-reverse::before\@small, .u-dark-accent-bg-after-reverse::after\@small, .u-color-dark-accent-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-dark-accent-bg-reverse {
  color: #58585A; }
  @media screen and (min-width: 47.5rem) {
    .u-dark-accent-bg-reverse\@large {
      color: #58585A; } }
  @media screen and (max-width: 47.5rem) {
    .u-dark-accent-bg-reverse\@small {
      color: #58585A; } }

.u-light-dark, .u-color-light-dark, .u-light-dark-before:before, .u-color-light-dark-before:before, .u-light-dark-after:after, .u-color-light-dark-after:after {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark\@large, .u-color-light-dark\@large, .u-light-dark-before::before\@large, .u-color-light-dark-before::before\@large, .u-light-dark-after::after\@large, .u-color-light-dark-after::after\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark\@small, .u-color-light-dark\@small, .u-light-dark-before::before\@small, .u-color-light-dark-before::before\@small, .u-light-dark-after::after\@small, .u-color-light-dark-after::after\@small {
      color: #E5E3DF; } }

.u-light-dark-bg, .u-color-light-dark-bg, .u-bg-light-dark, .u-light-dark-bg-before:before, .u-color-light-dark-bg-before:before, .u-light-dark-bg-after:after, .u-color-light-dark-bg-after:after {
  background-color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark-bg\@large, .u-color-light-dark-bg\@large, .u-bg-light-dark\@large, .u-light-dark-bg-before::before\@large, .u-color-light-dark-bg-before::before\@large, .u-light-dark-bg-after::after\@large, .u-color-light-dark-bg-after::after\@large {
      background-color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark-bg\@small, .u-color-light-dark-bg\@small, .u-bg-light-dark\@small, .u-light-dark-bg-before::before\@small, .u-color-light-dark-bg-before::before\@small, .u-light-dark-bg-after::after\@small, .u-color-light-dark-bg-after::after\@small {
      background-color: #E5E3DF; } }

.u-light-dark-bg {
  background-color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark-bg\@large {
      background-color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark-bg\@small {
      background-color: #E5E3DF; } }

.u-light-dark-bg {
  color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark-bg\@large {
      color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark-bg\@small {
      color: #111; } }

.u-light-dark-reverse, .u-color-light-dark-reverse, .u-light-dark-before-reverse:before, .u-color-light-dark-before-reverse:before, .u-light-dark-after-reverse:after, .u-color-light-dark-after-reverse:after {
  color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark-reverse\@large, .u-color-light-dark-reverse\@large, .u-light-dark-before-reverse::before\@large, .u-color-light-dark-before-reverse::before\@large, .u-light-dark-after-reverse::after\@large, .u-color-light-dark-after-reverse::after\@large {
      color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark-reverse\@small, .u-color-light-dark-reverse\@small, .u-light-dark-before-reverse::before\@small, .u-color-light-dark-before-reverse::before\@small, .u-light-dark-after-reverse::after\@small, .u-color-light-dark-after-reverse::after\@small {
      color: #111; } }

.u-light-dark-bg-reverse, .u-color-light-dark-bg-reverse, .u-bg-light-dark-reverse, .u-light-dark-bg-before-reverse:before, .u-color-light-dark-bg-before-reverse:before, .u-light-dark-bg-after-reverse:after, .u-color-light-dark-bg-after-reverse:after {
  background-color: #111; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark-bg-reverse\@large, .u-color-light-dark-bg-reverse\@large, .u-bg-light-dark-reverse\@large, .u-light-dark-bg-before-reverse::before\@large, .u-color-light-dark-bg-before-reverse::before\@large, .u-light-dark-bg-after-reverse::after\@large, .u-color-light-dark-bg-after-reverse::after\@large {
      background-color: #111; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark-bg-reverse\@small, .u-color-light-dark-bg-reverse\@small, .u-bg-light-dark-reverse\@small, .u-light-dark-bg-before-reverse::before\@small, .u-color-light-dark-bg-before-reverse::before\@small, .u-light-dark-bg-after-reverse::after\@small, .u-color-light-dark-bg-after-reverse::after\@small {
      background-color: #111; } }

.u-light-dark-bg-reverse {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-dark-bg-reverse\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-dark-bg-reverse\@small {
      color: #E5E3DF; } }

.u-light, .u-color-light, .u-light-before:before, .u-color-light-before:before, .u-light-after:after, .u-color-light-after:after {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light\@large, .u-color-light\@large, .u-light-before::before\@large, .u-color-light-before::before\@large, .u-light-after::after\@large, .u-color-light-after::after\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light\@small, .u-color-light\@small, .u-light-before::before\@small, .u-color-light-before::before\@small, .u-light-after::after\@small, .u-color-light-after::after\@small {
      color: #E5E3DF; } }

.u-light-bg, .u-color-light-bg, .u-bg-light, .u-light-bg-before:before, .u-color-light-bg-before:before, .u-light-bg-after:after, .u-color-light-bg-after:after {
  background-color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-bg\@large, .u-color-light-bg\@large, .u-bg-light\@large, .u-light-bg-before::before\@large, .u-color-light-bg-before::before\@large, .u-light-bg-after::after\@large, .u-color-light-bg-after::after\@large {
      background-color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-bg\@small, .u-color-light-bg\@small, .u-bg-light\@small, .u-light-bg-before::before\@small, .u-color-light-bg-before::before\@small, .u-light-bg-after::after\@small, .u-color-light-bg-after::after\@small {
      background-color: #E5E3DF; } }

.u-light-bg {
  background-color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-bg\@large {
      background-color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-bg\@small {
      background-color: #E5E3DF; } }

.u-light-bg {
  color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-light-bg\@large {
      color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-bg\@small {
      color: #333; } }

.u-light-reverse, .u-color-light-reverse, .u-light-before-reverse:before, .u-color-light-before-reverse:before, .u-light-after-reverse:after, .u-color-light-after-reverse:after {
  color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-light-reverse\@large, .u-color-light-reverse\@large, .u-light-before-reverse::before\@large, .u-color-light-before-reverse::before\@large, .u-light-after-reverse::after\@large, .u-color-light-after-reverse::after\@large {
      color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-reverse\@small, .u-color-light-reverse\@small, .u-light-before-reverse::before\@small, .u-color-light-before-reverse::before\@small, .u-light-after-reverse::after\@small, .u-color-light-after-reverse::after\@small {
      color: #333; } }

.u-light-bg-reverse, .u-color-light-bg-reverse, .u-bg-light-reverse, .u-light-bg-before-reverse:before, .u-color-light-bg-before-reverse:before, .u-light-bg-after-reverse:after, .u-color-light-bg-after-reverse:after {
  background-color: #333; }
  @media screen and (min-width: 47.5rem) {
    .u-light-bg-reverse\@large, .u-color-light-bg-reverse\@large, .u-bg-light-reverse\@large, .u-light-bg-before-reverse::before\@large, .u-color-light-bg-before-reverse::before\@large, .u-light-bg-after-reverse::after\@large, .u-color-light-bg-after-reverse::after\@large {
      background-color: #333; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-bg-reverse\@small, .u-color-light-bg-reverse\@small, .u-bg-light-reverse\@small, .u-light-bg-before-reverse::before\@small, .u-color-light-bg-before-reverse::before\@small, .u-light-bg-after-reverse::after\@small, .u-color-light-bg-after-reverse::after\@small {
      background-color: #333; } }

.u-light-bg-reverse {
  color: #E5E3DF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-bg-reverse\@large {
      color: #E5E3DF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-bg-reverse\@small {
      color: #E5E3DF; } }

.u-light-light, .u-color-light-light, .u-light-light-before:before, .u-color-light-light-before:before, .u-light-light-after:after, .u-color-light-light-after:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light\@large, .u-color-light-light\@large, .u-light-light-before::before\@large, .u-color-light-light-before::before\@large, .u-light-light-after::after\@large, .u-color-light-light-after::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light\@small, .u-color-light-light\@small, .u-light-light-before::before\@small, .u-color-light-light-before::before\@small, .u-light-light-after::after\@small, .u-color-light-light-after::after\@small {
      color: #FFF; } }

.u-light-light-bg, .u-color-light-light-bg, .u-bg-light-light, .u-light-light-bg-before:before, .u-color-light-light-bg-before:before, .u-light-light-bg-after:after, .u-color-light-light-bg-after:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light-bg\@large, .u-color-light-light-bg\@large, .u-bg-light-light\@large, .u-light-light-bg-before::before\@large, .u-color-light-light-bg-before::before\@large, .u-light-light-bg-after::after\@large, .u-color-light-light-bg-after::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light-bg\@small, .u-color-light-light-bg\@small, .u-bg-light-light\@small, .u-light-light-bg-before::before\@small, .u-color-light-light-bg-before::before\@small, .u-light-light-bg-after::after\@small, .u-color-light-light-bg-after::after\@small {
      background-color: #FFF; } }

.u-light-light-bg {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light-bg\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light-bg\@small {
      background-color: #FFF; } }

.u-light-light-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light-bg\@small {
      color: #000; } }

.u-light-light-reverse, .u-color-light-light-reverse, .u-light-light-before-reverse:before, .u-color-light-light-before-reverse:before, .u-light-light-after-reverse:after, .u-color-light-light-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light-reverse\@large, .u-color-light-light-reverse\@large, .u-light-light-before-reverse::before\@large, .u-color-light-light-before-reverse::before\@large, .u-light-light-after-reverse::after\@large, .u-color-light-light-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light-reverse\@small, .u-color-light-light-reverse\@small, .u-light-light-before-reverse::before\@small, .u-color-light-light-before-reverse::before\@small, .u-light-light-after-reverse::after\@small, .u-color-light-light-after-reverse::after\@small {
      color: #000; } }

.u-light-light-bg-reverse, .u-color-light-light-bg-reverse, .u-bg-light-light-reverse, .u-light-light-bg-before-reverse:before, .u-color-light-light-bg-before-reverse:before, .u-light-light-bg-after-reverse:after, .u-color-light-light-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light-bg-reverse\@large, .u-color-light-light-bg-reverse\@large, .u-bg-light-light-reverse\@large, .u-light-light-bg-before-reverse::before\@large, .u-color-light-light-bg-before-reverse::before\@large, .u-light-light-bg-after-reverse::after\@large, .u-color-light-light-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light-bg-reverse\@small, .u-color-light-light-bg-reverse\@small, .u-bg-light-light-reverse\@small, .u-light-light-bg-before-reverse::before\@small, .u-color-light-light-bg-before-reverse::before\@small, .u-light-light-bg-after-reverse::after\@small, .u-color-light-light-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-light-light-bg-reverse {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-light-bg-reverse\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-light-bg-reverse\@small {
      color: #FFF; } }

.u-light-accent, .u-color-light-accent, .u-light-accent-before:before, .u-color-light-accent-before:before, .u-light-accent-after:after, .u-color-light-accent-after:after {
  color: #E4EEF4; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent\@large, .u-color-light-accent\@large, .u-light-accent-before::before\@large, .u-color-light-accent-before::before\@large, .u-light-accent-after::after\@large, .u-color-light-accent-after::after\@large {
      color: #E4EEF4; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent\@small, .u-color-light-accent\@small, .u-light-accent-before::before\@small, .u-color-light-accent-before::before\@small, .u-light-accent-after::after\@small, .u-color-light-accent-after::after\@small {
      color: #E4EEF4; } }

.u-light-accent-bg, .u-color-light-accent-bg, .u-bg-light-accent, .u-light-accent-bg-before:before, .u-color-light-accent-bg-before:before, .u-light-accent-bg-after:after, .u-color-light-accent-bg-after:after {
  background-color: #E4EEF4; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent-bg\@large, .u-color-light-accent-bg\@large, .u-bg-light-accent\@large, .u-light-accent-bg-before::before\@large, .u-color-light-accent-bg-before::before\@large, .u-light-accent-bg-after::after\@large, .u-color-light-accent-bg-after::after\@large {
      background-color: #E4EEF4; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent-bg\@small, .u-color-light-accent-bg\@small, .u-bg-light-accent\@small, .u-light-accent-bg-before::before\@small, .u-color-light-accent-bg-before::before\@small, .u-light-accent-bg-after::after\@small, .u-color-light-accent-bg-after::after\@small {
      background-color: #E4EEF4; } }

.u-light-accent-bg {
  background-color: #E4EEF4; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent-bg\@large {
      background-color: #E4EEF4; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent-bg\@small {
      background-color: #E4EEF4; } }

.u-light-accent-bg {
  color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent-bg\@large {
      color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent-bg\@small {
      color: #1F1C19; } }

.u-light-accent-reverse, .u-color-light-accent-reverse, .u-light-accent-before-reverse:before, .u-color-light-accent-before-reverse:before, .u-light-accent-after-reverse:after, .u-color-light-accent-after-reverse:after {
  color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent-reverse\@large, .u-color-light-accent-reverse\@large, .u-light-accent-before-reverse::before\@large, .u-color-light-accent-before-reverse::before\@large, .u-light-accent-after-reverse::after\@large, .u-color-light-accent-after-reverse::after\@large {
      color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent-reverse\@small, .u-color-light-accent-reverse\@small, .u-light-accent-before-reverse::before\@small, .u-color-light-accent-before-reverse::before\@small, .u-light-accent-after-reverse::after\@small, .u-color-light-accent-after-reverse::after\@small {
      color: #1F1C19; } }

.u-light-accent-bg-reverse, .u-color-light-accent-bg-reverse, .u-bg-light-accent-reverse, .u-light-accent-bg-before-reverse:before, .u-color-light-accent-bg-before-reverse:before, .u-light-accent-bg-after-reverse:after, .u-color-light-accent-bg-after-reverse:after {
  background-color: #1F1C19; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent-bg-reverse\@large, .u-color-light-accent-bg-reverse\@large, .u-bg-light-accent-reverse\@large, .u-light-accent-bg-before-reverse::before\@large, .u-color-light-accent-bg-before-reverse::before\@large, .u-light-accent-bg-after-reverse::after\@large, .u-color-light-accent-bg-after-reverse::after\@large {
      background-color: #1F1C19; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent-bg-reverse\@small, .u-color-light-accent-bg-reverse\@small, .u-bg-light-accent-reverse\@small, .u-light-accent-bg-before-reverse::before\@small, .u-color-light-accent-bg-before-reverse::before\@small, .u-light-accent-bg-after-reverse::after\@small, .u-color-light-accent-bg-after-reverse::after\@small {
      background-color: #1F1C19; } }

.u-light-accent-bg-reverse {
  color: #E4EEF4; }
  @media screen and (min-width: 47.5rem) {
    .u-light-accent-bg-reverse\@large {
      color: #E4EEF4; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-accent-bg-reverse\@small {
      color: #E4EEF4; } }

.u-light-gradient-dark, .u-color-light-gradient-dark, .u-light-gradient-dark-before:before, .u-color-light-gradient-dark-before:before, .u-light-gradient-dark-after:after, .u-color-light-gradient-dark-after:after {
  color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark\@large, .u-color-light-gradient-dark\@large, .u-light-gradient-dark-before::before\@large, .u-color-light-gradient-dark-before::before\@large, .u-light-gradient-dark-after::after\@large, .u-color-light-gradient-dark-after::after\@large {
      color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark\@small, .u-color-light-gradient-dark\@small, .u-light-gradient-dark-before::before\@small, .u-color-light-gradient-dark-before::before\@small, .u-light-gradient-dark-after::after\@small, .u-color-light-gradient-dark-after::after\@small {
      color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }

.u-light-gradient-dark-bg, .u-color-light-gradient-dark-bg, .u-bg-light-gradient-dark, .u-light-gradient-dark-bg-before:before, .u-color-light-gradient-dark-bg-before:before, .u-light-gradient-dark-bg-after:after, .u-color-light-gradient-dark-bg-after:after {
  background-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark-bg\@large, .u-color-light-gradient-dark-bg\@large, .u-bg-light-gradient-dark\@large, .u-light-gradient-dark-bg-before::before\@large, .u-color-light-gradient-dark-bg-before::before\@large, .u-light-gradient-dark-bg-after::after\@large, .u-color-light-gradient-dark-bg-after::after\@large {
      background-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark-bg\@small, .u-color-light-gradient-dark-bg\@small, .u-bg-light-gradient-dark\@small, .u-light-gradient-dark-bg-before::before\@small, .u-color-light-gradient-dark-bg-before::before\@small, .u-light-gradient-dark-bg-after::after\@small, .u-color-light-gradient-dark-bg-after::after\@small {
      background-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }

.u-light-gradient-dark-bg {
  background-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark-bg\@large {
      background-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark-bg\@small {
      background-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }

.u-light-gradient-dark-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark-bg\@small {
      color: #FFF; } }

.u-light-gradient-dark-reverse, .u-color-light-gradient-dark-reverse, .u-light-gradient-dark-before-reverse:before, .u-color-light-gradient-dark-before-reverse:before, .u-light-gradient-dark-after-reverse:after, .u-color-light-gradient-dark-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark-reverse\@large, .u-color-light-gradient-dark-reverse\@large, .u-light-gradient-dark-before-reverse::before\@large, .u-color-light-gradient-dark-before-reverse::before\@large, .u-light-gradient-dark-after-reverse::after\@large, .u-color-light-gradient-dark-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark-reverse\@small, .u-color-light-gradient-dark-reverse\@small, .u-light-gradient-dark-before-reverse::before\@small, .u-color-light-gradient-dark-before-reverse::before\@small, .u-light-gradient-dark-after-reverse::after\@small, .u-color-light-gradient-dark-after-reverse::after\@small {
      color: #FFF; } }

.u-light-gradient-dark-bg-reverse, .u-color-light-gradient-dark-bg-reverse, .u-bg-light-gradient-dark-reverse, .u-light-gradient-dark-bg-before-reverse:before, .u-color-light-gradient-dark-bg-before-reverse:before, .u-light-gradient-dark-bg-after-reverse:after, .u-color-light-gradient-dark-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark-bg-reverse\@large, .u-color-light-gradient-dark-bg-reverse\@large, .u-bg-light-gradient-dark-reverse\@large, .u-light-gradient-dark-bg-before-reverse::before\@large, .u-color-light-gradient-dark-bg-before-reverse::before\@large, .u-light-gradient-dark-bg-after-reverse::after\@large, .u-color-light-gradient-dark-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark-bg-reverse\@small, .u-color-light-gradient-dark-bg-reverse\@small, .u-bg-light-gradient-dark-reverse\@small, .u-light-gradient-dark-bg-before-reverse::before\@small, .u-color-light-gradient-dark-bg-before-reverse::before\@small, .u-light-gradient-dark-bg-after-reverse::after\@small, .u-color-light-gradient-dark-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-light-gradient-dark-bg-reverse {
  color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); }
  @media screen and (min-width: 47.5rem) {
    .u-light-gradient-dark-bg-reverse\@large {
      color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }
  @media screen and (max-width: 47.5rem) {
    .u-light-gradient-dark-bg-reverse\@small {
      color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }

.u-alpha-90, .u-color-alpha-90, .u-alpha-90-before:before, .u-color-alpha-90-before:before, .u-alpha-90-after:after, .u-color-alpha-90-after:after {
  color: rgba(255, 255, 255, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90\@large, .u-color-alpha-90\@large, .u-alpha-90-before::before\@large, .u-color-alpha-90-before::before\@large, .u-alpha-90-after::after\@large, .u-color-alpha-90-after::after\@large {
      color: rgba(255, 255, 255, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90\@small, .u-color-alpha-90\@small, .u-alpha-90-before::before\@small, .u-color-alpha-90-before::before\@small, .u-alpha-90-after::after\@small, .u-color-alpha-90-after::after\@small {
      color: rgba(255, 255, 255, 0.9); } }

.u-alpha-90-bg, .u-color-alpha-90-bg, .u-bg-alpha-90, .u-alpha-90-bg-before:before, .u-color-alpha-90-bg-before:before, .u-alpha-90-bg-after:after, .u-color-alpha-90-bg-after:after {
  background-color: rgba(255, 255, 255, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90-bg\@large, .u-color-alpha-90-bg\@large, .u-bg-alpha-90\@large, .u-alpha-90-bg-before::before\@large, .u-color-alpha-90-bg-before::before\@large, .u-alpha-90-bg-after::after\@large, .u-color-alpha-90-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90-bg\@small, .u-color-alpha-90-bg\@small, .u-bg-alpha-90\@small, .u-alpha-90-bg-before::before\@small, .u-color-alpha-90-bg-before::before\@small, .u-alpha-90-bg-after::after\@small, .u-color-alpha-90-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.9); } }

.u-alpha-90-bg {
  background-color: rgba(255, 255, 255, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90-bg\@large {
      background-color: rgba(255, 255, 255, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90-bg\@small {
      background-color: rgba(255, 255, 255, 0.9); } }

.u-alpha-90-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90-bg\@small {
      color: #000; } }

.u-alpha-90-reverse, .u-color-alpha-90-reverse, .u-alpha-90-before-reverse:before, .u-color-alpha-90-before-reverse:before, .u-alpha-90-after-reverse:after, .u-color-alpha-90-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90-reverse\@large, .u-color-alpha-90-reverse\@large, .u-alpha-90-before-reverse::before\@large, .u-color-alpha-90-before-reverse::before\@large, .u-alpha-90-after-reverse::after\@large, .u-color-alpha-90-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90-reverse\@small, .u-color-alpha-90-reverse\@small, .u-alpha-90-before-reverse::before\@small, .u-color-alpha-90-before-reverse::before\@small, .u-alpha-90-after-reverse::after\@small, .u-color-alpha-90-after-reverse::after\@small {
      color: #000; } }

.u-alpha-90-bg-reverse, .u-color-alpha-90-bg-reverse, .u-bg-alpha-90-reverse, .u-alpha-90-bg-before-reverse:before, .u-color-alpha-90-bg-before-reverse:before, .u-alpha-90-bg-after-reverse:after, .u-color-alpha-90-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90-bg-reverse\@large, .u-color-alpha-90-bg-reverse\@large, .u-bg-alpha-90-reverse\@large, .u-alpha-90-bg-before-reverse::before\@large, .u-color-alpha-90-bg-before-reverse::before\@large, .u-alpha-90-bg-after-reverse::after\@large, .u-color-alpha-90-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90-bg-reverse\@small, .u-color-alpha-90-bg-reverse\@small, .u-bg-alpha-90-reverse\@small, .u-alpha-90-bg-before-reverse::before\@small, .u-color-alpha-90-bg-before-reverse::before\@small, .u-alpha-90-bg-after-reverse::after\@small, .u-color-alpha-90-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-90-bg-reverse {
  color: rgba(255, 255, 255, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-90-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-90-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.9); } }

.u-alpha-80, .u-color-alpha-80, .u-alpha-80-before:before, .u-color-alpha-80-before:before, .u-alpha-80-after:after, .u-color-alpha-80-after:after {
  color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80\@large, .u-color-alpha-80\@large, .u-alpha-80-before::before\@large, .u-color-alpha-80-before::before\@large, .u-alpha-80-after::after\@large, .u-color-alpha-80-after::after\@large {
      color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80\@small, .u-color-alpha-80\@small, .u-alpha-80-before::before\@small, .u-color-alpha-80-before::before\@small, .u-alpha-80-after::after\@small, .u-color-alpha-80-after::after\@small {
      color: rgba(255, 255, 255, 0.7); } }

.u-alpha-80-bg, .u-color-alpha-80-bg, .u-bg-alpha-80, .u-alpha-80-bg-before:before, .u-color-alpha-80-bg-before:before, .u-alpha-80-bg-after:after, .u-color-alpha-80-bg-after:after {
  background-color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80-bg\@large, .u-color-alpha-80-bg\@large, .u-bg-alpha-80\@large, .u-alpha-80-bg-before::before\@large, .u-color-alpha-80-bg-before::before\@large, .u-alpha-80-bg-after::after\@large, .u-color-alpha-80-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80-bg\@small, .u-color-alpha-80-bg\@small, .u-bg-alpha-80\@small, .u-alpha-80-bg-before::before\@small, .u-color-alpha-80-bg-before::before\@small, .u-alpha-80-bg-after::after\@small, .u-color-alpha-80-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.7); } }

.u-alpha-80-bg {
  background-color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80-bg\@large {
      background-color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80-bg\@small {
      background-color: rgba(255, 255, 255, 0.7); } }

.u-alpha-80-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80-bg\@small {
      color: #000; } }

.u-alpha-80-reverse, .u-color-alpha-80-reverse, .u-alpha-80-before-reverse:before, .u-color-alpha-80-before-reverse:before, .u-alpha-80-after-reverse:after, .u-color-alpha-80-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80-reverse\@large, .u-color-alpha-80-reverse\@large, .u-alpha-80-before-reverse::before\@large, .u-color-alpha-80-before-reverse::before\@large, .u-alpha-80-after-reverse::after\@large, .u-color-alpha-80-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80-reverse\@small, .u-color-alpha-80-reverse\@small, .u-alpha-80-before-reverse::before\@small, .u-color-alpha-80-before-reverse::before\@small, .u-alpha-80-after-reverse::after\@small, .u-color-alpha-80-after-reverse::after\@small {
      color: #000; } }

.u-alpha-80-bg-reverse, .u-color-alpha-80-bg-reverse, .u-bg-alpha-80-reverse, .u-alpha-80-bg-before-reverse:before, .u-color-alpha-80-bg-before-reverse:before, .u-alpha-80-bg-after-reverse:after, .u-color-alpha-80-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80-bg-reverse\@large, .u-color-alpha-80-bg-reverse\@large, .u-bg-alpha-80-reverse\@large, .u-alpha-80-bg-before-reverse::before\@large, .u-color-alpha-80-bg-before-reverse::before\@large, .u-alpha-80-bg-after-reverse::after\@large, .u-color-alpha-80-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80-bg-reverse\@small, .u-color-alpha-80-bg-reverse\@small, .u-bg-alpha-80-reverse\@small, .u-alpha-80-bg-before-reverse::before\@small, .u-color-alpha-80-bg-before-reverse::before\@small, .u-alpha-80-bg-after-reverse::after\@small, .u-color-alpha-80-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-80-bg-reverse {
  color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-80-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-80-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.7); } }

.u-alpha-75, .u-color-alpha-75, .u-alpha-75-before:before, .u-color-alpha-75-before:before, .u-alpha-75-after:after, .u-color-alpha-75-after:after {
  color: rgba(255, 255, 255, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75\@large, .u-color-alpha-75\@large, .u-alpha-75-before::before\@large, .u-color-alpha-75-before::before\@large, .u-alpha-75-after::after\@large, .u-color-alpha-75-after::after\@large {
      color: rgba(255, 255, 255, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75\@small, .u-color-alpha-75\@small, .u-alpha-75-before::before\@small, .u-color-alpha-75-before::before\@small, .u-alpha-75-after::after\@small, .u-color-alpha-75-after::after\@small {
      color: rgba(255, 255, 255, 0.75); } }

.u-alpha-75-bg, .u-color-alpha-75-bg, .u-bg-alpha-75, .u-alpha-75-bg-before:before, .u-color-alpha-75-bg-before:before, .u-alpha-75-bg-after:after, .u-color-alpha-75-bg-after:after {
  background-color: rgba(255, 255, 255, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75-bg\@large, .u-color-alpha-75-bg\@large, .u-bg-alpha-75\@large, .u-alpha-75-bg-before::before\@large, .u-color-alpha-75-bg-before::before\@large, .u-alpha-75-bg-after::after\@large, .u-color-alpha-75-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75-bg\@small, .u-color-alpha-75-bg\@small, .u-bg-alpha-75\@small, .u-alpha-75-bg-before::before\@small, .u-color-alpha-75-bg-before::before\@small, .u-alpha-75-bg-after::after\@small, .u-color-alpha-75-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.75); } }

.u-alpha-75-bg {
  background-color: rgba(255, 255, 255, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75-bg\@large {
      background-color: rgba(255, 255, 255, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75-bg\@small {
      background-color: rgba(255, 255, 255, 0.75); } }

.u-alpha-75-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75-bg\@small {
      color: #000; } }

.u-alpha-75-reverse, .u-color-alpha-75-reverse, .u-alpha-75-before-reverse:before, .u-color-alpha-75-before-reverse:before, .u-alpha-75-after-reverse:after, .u-color-alpha-75-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75-reverse\@large, .u-color-alpha-75-reverse\@large, .u-alpha-75-before-reverse::before\@large, .u-color-alpha-75-before-reverse::before\@large, .u-alpha-75-after-reverse::after\@large, .u-color-alpha-75-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75-reverse\@small, .u-color-alpha-75-reverse\@small, .u-alpha-75-before-reverse::before\@small, .u-color-alpha-75-before-reverse::before\@small, .u-alpha-75-after-reverse::after\@small, .u-color-alpha-75-after-reverse::after\@small {
      color: #000; } }

.u-alpha-75-bg-reverse, .u-color-alpha-75-bg-reverse, .u-bg-alpha-75-reverse, .u-alpha-75-bg-before-reverse:before, .u-color-alpha-75-bg-before-reverse:before, .u-alpha-75-bg-after-reverse:after, .u-color-alpha-75-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75-bg-reverse\@large, .u-color-alpha-75-bg-reverse\@large, .u-bg-alpha-75-reverse\@large, .u-alpha-75-bg-before-reverse::before\@large, .u-color-alpha-75-bg-before-reverse::before\@large, .u-alpha-75-bg-after-reverse::after\@large, .u-color-alpha-75-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75-bg-reverse\@small, .u-color-alpha-75-bg-reverse\@small, .u-bg-alpha-75-reverse\@small, .u-alpha-75-bg-before-reverse::before\@small, .u-color-alpha-75-bg-before-reverse::before\@small, .u-alpha-75-bg-after-reverse::after\@small, .u-color-alpha-75-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-75-bg-reverse {
  color: rgba(255, 255, 255, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-75-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-75-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.75); } }

.u-alpha-70, .u-color-alpha-70, .u-alpha-70-before:before, .u-color-alpha-70-before:before, .u-alpha-70-after:after, .u-color-alpha-70-after:after {
  color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70\@large, .u-color-alpha-70\@large, .u-alpha-70-before::before\@large, .u-color-alpha-70-before::before\@large, .u-alpha-70-after::after\@large, .u-color-alpha-70-after::after\@large {
      color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70\@small, .u-color-alpha-70\@small, .u-alpha-70-before::before\@small, .u-color-alpha-70-before::before\@small, .u-alpha-70-after::after\@small, .u-color-alpha-70-after::after\@small {
      color: rgba(255, 255, 255, 0.7); } }

.u-alpha-70-bg, .u-color-alpha-70-bg, .u-bg-alpha-70, .u-alpha-70-bg-before:before, .u-color-alpha-70-bg-before:before, .u-alpha-70-bg-after:after, .u-color-alpha-70-bg-after:after {
  background-color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70-bg\@large, .u-color-alpha-70-bg\@large, .u-bg-alpha-70\@large, .u-alpha-70-bg-before::before\@large, .u-color-alpha-70-bg-before::before\@large, .u-alpha-70-bg-after::after\@large, .u-color-alpha-70-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70-bg\@small, .u-color-alpha-70-bg\@small, .u-bg-alpha-70\@small, .u-alpha-70-bg-before::before\@small, .u-color-alpha-70-bg-before::before\@small, .u-alpha-70-bg-after::after\@small, .u-color-alpha-70-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.7); } }

.u-alpha-70-bg {
  background-color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70-bg\@large {
      background-color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70-bg\@small {
      background-color: rgba(255, 255, 255, 0.7); } }

.u-alpha-70-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70-bg\@small {
      color: #000; } }

.u-alpha-70-reverse, .u-color-alpha-70-reverse, .u-alpha-70-before-reverse:before, .u-color-alpha-70-before-reverse:before, .u-alpha-70-after-reverse:after, .u-color-alpha-70-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70-reverse\@large, .u-color-alpha-70-reverse\@large, .u-alpha-70-before-reverse::before\@large, .u-color-alpha-70-before-reverse::before\@large, .u-alpha-70-after-reverse::after\@large, .u-color-alpha-70-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70-reverse\@small, .u-color-alpha-70-reverse\@small, .u-alpha-70-before-reverse::before\@small, .u-color-alpha-70-before-reverse::before\@small, .u-alpha-70-after-reverse::after\@small, .u-color-alpha-70-after-reverse::after\@small {
      color: #000; } }

.u-alpha-70-bg-reverse, .u-color-alpha-70-bg-reverse, .u-bg-alpha-70-reverse, .u-alpha-70-bg-before-reverse:before, .u-color-alpha-70-bg-before-reverse:before, .u-alpha-70-bg-after-reverse:after, .u-color-alpha-70-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70-bg-reverse\@large, .u-color-alpha-70-bg-reverse\@large, .u-bg-alpha-70-reverse\@large, .u-alpha-70-bg-before-reverse::before\@large, .u-color-alpha-70-bg-before-reverse::before\@large, .u-alpha-70-bg-after-reverse::after\@large, .u-color-alpha-70-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70-bg-reverse\@small, .u-color-alpha-70-bg-reverse\@small, .u-bg-alpha-70-reverse\@small, .u-alpha-70-bg-before-reverse::before\@small, .u-color-alpha-70-bg-before-reverse::before\@small, .u-alpha-70-bg-after-reverse::after\@small, .u-color-alpha-70-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-70-bg-reverse {
  color: rgba(255, 255, 255, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-70-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-70-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.7); } }

.u-alpha-50, .u-color-alpha-50, .u-alpha-50-before:before, .u-color-alpha-50-before:before, .u-alpha-50-after:after, .u-color-alpha-50-after:after {
  color: rgba(255, 255, 255, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50\@large, .u-color-alpha-50\@large, .u-alpha-50-before::before\@large, .u-color-alpha-50-before::before\@large, .u-alpha-50-after::after\@large, .u-color-alpha-50-after::after\@large {
      color: rgba(255, 255, 255, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50\@small, .u-color-alpha-50\@small, .u-alpha-50-before::before\@small, .u-color-alpha-50-before::before\@small, .u-alpha-50-after::after\@small, .u-color-alpha-50-after::after\@small {
      color: rgba(255, 255, 255, 0.5); } }

.u-alpha-50-bg, .u-color-alpha-50-bg, .u-bg-alpha-50, .u-alpha-50-bg-before:before, .u-color-alpha-50-bg-before:before, .u-alpha-50-bg-after:after, .u-color-alpha-50-bg-after:after {
  background-color: rgba(255, 255, 255, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50-bg\@large, .u-color-alpha-50-bg\@large, .u-bg-alpha-50\@large, .u-alpha-50-bg-before::before\@large, .u-color-alpha-50-bg-before::before\@large, .u-alpha-50-bg-after::after\@large, .u-color-alpha-50-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50-bg\@small, .u-color-alpha-50-bg\@small, .u-bg-alpha-50\@small, .u-alpha-50-bg-before::before\@small, .u-color-alpha-50-bg-before::before\@small, .u-alpha-50-bg-after::after\@small, .u-color-alpha-50-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.5); } }

.u-alpha-50-bg {
  background-color: rgba(255, 255, 255, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50-bg\@large {
      background-color: rgba(255, 255, 255, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50-bg\@small {
      background-color: rgba(255, 255, 255, 0.5); } }

.u-alpha-50-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50-bg\@small {
      color: #000; } }

.u-alpha-50-reverse, .u-color-alpha-50-reverse, .u-alpha-50-before-reverse:before, .u-color-alpha-50-before-reverse:before, .u-alpha-50-after-reverse:after, .u-color-alpha-50-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50-reverse\@large, .u-color-alpha-50-reverse\@large, .u-alpha-50-before-reverse::before\@large, .u-color-alpha-50-before-reverse::before\@large, .u-alpha-50-after-reverse::after\@large, .u-color-alpha-50-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50-reverse\@small, .u-color-alpha-50-reverse\@small, .u-alpha-50-before-reverse::before\@small, .u-color-alpha-50-before-reverse::before\@small, .u-alpha-50-after-reverse::after\@small, .u-color-alpha-50-after-reverse::after\@small {
      color: #000; } }

.u-alpha-50-bg-reverse, .u-color-alpha-50-bg-reverse, .u-bg-alpha-50-reverse, .u-alpha-50-bg-before-reverse:before, .u-color-alpha-50-bg-before-reverse:before, .u-alpha-50-bg-after-reverse:after, .u-color-alpha-50-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50-bg-reverse\@large, .u-color-alpha-50-bg-reverse\@large, .u-bg-alpha-50-reverse\@large, .u-alpha-50-bg-before-reverse::before\@large, .u-color-alpha-50-bg-before-reverse::before\@large, .u-alpha-50-bg-after-reverse::after\@large, .u-color-alpha-50-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50-bg-reverse\@small, .u-color-alpha-50-bg-reverse\@small, .u-bg-alpha-50-reverse\@small, .u-alpha-50-bg-before-reverse::before\@small, .u-color-alpha-50-bg-before-reverse::before\@small, .u-alpha-50-bg-after-reverse::after\@small, .u-color-alpha-50-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-50-bg-reverse {
  color: rgba(255, 255, 255, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-50-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-50-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.5); } }

.u-alpha-40, .u-color-alpha-40, .u-alpha-40-before:before, .u-color-alpha-40-before:before, .u-alpha-40-after:after, .u-color-alpha-40-after:after {
  color: rgba(255, 255, 255, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40\@large, .u-color-alpha-40\@large, .u-alpha-40-before::before\@large, .u-color-alpha-40-before::before\@large, .u-alpha-40-after::after\@large, .u-color-alpha-40-after::after\@large {
      color: rgba(255, 255, 255, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40\@small, .u-color-alpha-40\@small, .u-alpha-40-before::before\@small, .u-color-alpha-40-before::before\@small, .u-alpha-40-after::after\@small, .u-color-alpha-40-after::after\@small {
      color: rgba(255, 255, 255, 0.4); } }

.u-alpha-40-bg, .u-color-alpha-40-bg, .u-bg-alpha-40, .u-alpha-40-bg-before:before, .u-color-alpha-40-bg-before:before, .u-alpha-40-bg-after:after, .u-color-alpha-40-bg-after:after {
  background-color: rgba(255, 255, 255, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40-bg\@large, .u-color-alpha-40-bg\@large, .u-bg-alpha-40\@large, .u-alpha-40-bg-before::before\@large, .u-color-alpha-40-bg-before::before\@large, .u-alpha-40-bg-after::after\@large, .u-color-alpha-40-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40-bg\@small, .u-color-alpha-40-bg\@small, .u-bg-alpha-40\@small, .u-alpha-40-bg-before::before\@small, .u-color-alpha-40-bg-before::before\@small, .u-alpha-40-bg-after::after\@small, .u-color-alpha-40-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.4); } }

.u-alpha-40-bg {
  background-color: rgba(255, 255, 255, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40-bg\@large {
      background-color: rgba(255, 255, 255, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40-bg\@small {
      background-color: rgba(255, 255, 255, 0.4); } }

.u-alpha-40-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40-bg\@small {
      color: #000; } }

.u-alpha-40-reverse, .u-color-alpha-40-reverse, .u-alpha-40-before-reverse:before, .u-color-alpha-40-before-reverse:before, .u-alpha-40-after-reverse:after, .u-color-alpha-40-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40-reverse\@large, .u-color-alpha-40-reverse\@large, .u-alpha-40-before-reverse::before\@large, .u-color-alpha-40-before-reverse::before\@large, .u-alpha-40-after-reverse::after\@large, .u-color-alpha-40-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40-reverse\@small, .u-color-alpha-40-reverse\@small, .u-alpha-40-before-reverse::before\@small, .u-color-alpha-40-before-reverse::before\@small, .u-alpha-40-after-reverse::after\@small, .u-color-alpha-40-after-reverse::after\@small {
      color: #000; } }

.u-alpha-40-bg-reverse, .u-color-alpha-40-bg-reverse, .u-bg-alpha-40-reverse, .u-alpha-40-bg-before-reverse:before, .u-color-alpha-40-bg-before-reverse:before, .u-alpha-40-bg-after-reverse:after, .u-color-alpha-40-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40-bg-reverse\@large, .u-color-alpha-40-bg-reverse\@large, .u-bg-alpha-40-reverse\@large, .u-alpha-40-bg-before-reverse::before\@large, .u-color-alpha-40-bg-before-reverse::before\@large, .u-alpha-40-bg-after-reverse::after\@large, .u-color-alpha-40-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40-bg-reverse\@small, .u-color-alpha-40-bg-reverse\@small, .u-bg-alpha-40-reverse\@small, .u-alpha-40-bg-before-reverse::before\@small, .u-color-alpha-40-bg-before-reverse::before\@small, .u-alpha-40-bg-after-reverse::after\@small, .u-color-alpha-40-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-40-bg-reverse {
  color: rgba(255, 255, 255, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-40-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-40-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.4); } }

.u-alpha-30, .u-color-alpha-30, .u-alpha-30-before:before, .u-color-alpha-30-before:before, .u-alpha-30-after:after, .u-color-alpha-30-after:after {
  color: rgba(255, 255, 255, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30\@large, .u-color-alpha-30\@large, .u-alpha-30-before::before\@large, .u-color-alpha-30-before::before\@large, .u-alpha-30-after::after\@large, .u-color-alpha-30-after::after\@large {
      color: rgba(255, 255, 255, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30\@small, .u-color-alpha-30\@small, .u-alpha-30-before::before\@small, .u-color-alpha-30-before::before\@small, .u-alpha-30-after::after\@small, .u-color-alpha-30-after::after\@small {
      color: rgba(255, 255, 255, 0.3); } }

.u-alpha-30-bg, .u-color-alpha-30-bg, .u-bg-alpha-30, .u-alpha-30-bg-before:before, .u-color-alpha-30-bg-before:before, .u-alpha-30-bg-after:after, .u-color-alpha-30-bg-after:after {
  background-color: rgba(255, 255, 255, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30-bg\@large, .u-color-alpha-30-bg\@large, .u-bg-alpha-30\@large, .u-alpha-30-bg-before::before\@large, .u-color-alpha-30-bg-before::before\@large, .u-alpha-30-bg-after::after\@large, .u-color-alpha-30-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30-bg\@small, .u-color-alpha-30-bg\@small, .u-bg-alpha-30\@small, .u-alpha-30-bg-before::before\@small, .u-color-alpha-30-bg-before::before\@small, .u-alpha-30-bg-after::after\@small, .u-color-alpha-30-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.3); } }

.u-alpha-30-bg {
  background-color: rgba(255, 255, 255, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30-bg\@large {
      background-color: rgba(255, 255, 255, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30-bg\@small {
      background-color: rgba(255, 255, 255, 0.3); } }

.u-alpha-30-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30-bg\@small {
      color: #000; } }

.u-alpha-30-reverse, .u-color-alpha-30-reverse, .u-alpha-30-before-reverse:before, .u-color-alpha-30-before-reverse:before, .u-alpha-30-after-reverse:after, .u-color-alpha-30-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30-reverse\@large, .u-color-alpha-30-reverse\@large, .u-alpha-30-before-reverse::before\@large, .u-color-alpha-30-before-reverse::before\@large, .u-alpha-30-after-reverse::after\@large, .u-color-alpha-30-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30-reverse\@small, .u-color-alpha-30-reverse\@small, .u-alpha-30-before-reverse::before\@small, .u-color-alpha-30-before-reverse::before\@small, .u-alpha-30-after-reverse::after\@small, .u-color-alpha-30-after-reverse::after\@small {
      color: #000; } }

.u-alpha-30-bg-reverse, .u-color-alpha-30-bg-reverse, .u-bg-alpha-30-reverse, .u-alpha-30-bg-before-reverse:before, .u-color-alpha-30-bg-before-reverse:before, .u-alpha-30-bg-after-reverse:after, .u-color-alpha-30-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30-bg-reverse\@large, .u-color-alpha-30-bg-reverse\@large, .u-bg-alpha-30-reverse\@large, .u-alpha-30-bg-before-reverse::before\@large, .u-color-alpha-30-bg-before-reverse::before\@large, .u-alpha-30-bg-after-reverse::after\@large, .u-color-alpha-30-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30-bg-reverse\@small, .u-color-alpha-30-bg-reverse\@small, .u-bg-alpha-30-reverse\@small, .u-alpha-30-bg-before-reverse::before\@small, .u-color-alpha-30-bg-before-reverse::before\@small, .u-alpha-30-bg-after-reverse::after\@small, .u-color-alpha-30-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-30-bg-reverse {
  color: rgba(255, 255, 255, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-30-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-30-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.3); } }

.u-alpha-20, .u-color-alpha-20, .u-alpha-20-before:before, .u-color-alpha-20-before:before, .u-alpha-20-after:after, .u-color-alpha-20-after:after {
  color: rgba(255, 255, 255, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20\@large, .u-color-alpha-20\@large, .u-alpha-20-before::before\@large, .u-color-alpha-20-before::before\@large, .u-alpha-20-after::after\@large, .u-color-alpha-20-after::after\@large {
      color: rgba(255, 255, 255, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20\@small, .u-color-alpha-20\@small, .u-alpha-20-before::before\@small, .u-color-alpha-20-before::before\@small, .u-alpha-20-after::after\@small, .u-color-alpha-20-after::after\@small {
      color: rgba(255, 255, 255, 0.2); } }

.u-alpha-20-bg, .u-color-alpha-20-bg, .u-bg-alpha-20, .u-alpha-20-bg-before:before, .u-color-alpha-20-bg-before:before, .u-alpha-20-bg-after:after, .u-color-alpha-20-bg-after:after {
  background-color: rgba(255, 255, 255, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20-bg\@large, .u-color-alpha-20-bg\@large, .u-bg-alpha-20\@large, .u-alpha-20-bg-before::before\@large, .u-color-alpha-20-bg-before::before\@large, .u-alpha-20-bg-after::after\@large, .u-color-alpha-20-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20-bg\@small, .u-color-alpha-20-bg\@small, .u-bg-alpha-20\@small, .u-alpha-20-bg-before::before\@small, .u-color-alpha-20-bg-before::before\@small, .u-alpha-20-bg-after::after\@small, .u-color-alpha-20-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.2); } }

.u-alpha-20-bg {
  background-color: rgba(255, 255, 255, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20-bg\@large {
      background-color: rgba(255, 255, 255, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20-bg\@small {
      background-color: rgba(255, 255, 255, 0.2); } }

.u-alpha-20-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20-bg\@small {
      color: #000; } }

.u-alpha-20-reverse, .u-color-alpha-20-reverse, .u-alpha-20-before-reverse:before, .u-color-alpha-20-before-reverse:before, .u-alpha-20-after-reverse:after, .u-color-alpha-20-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20-reverse\@large, .u-color-alpha-20-reverse\@large, .u-alpha-20-before-reverse::before\@large, .u-color-alpha-20-before-reverse::before\@large, .u-alpha-20-after-reverse::after\@large, .u-color-alpha-20-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20-reverse\@small, .u-color-alpha-20-reverse\@small, .u-alpha-20-before-reverse::before\@small, .u-color-alpha-20-before-reverse::before\@small, .u-alpha-20-after-reverse::after\@small, .u-color-alpha-20-after-reverse::after\@small {
      color: #000; } }

.u-alpha-20-bg-reverse, .u-color-alpha-20-bg-reverse, .u-bg-alpha-20-reverse, .u-alpha-20-bg-before-reverse:before, .u-color-alpha-20-bg-before-reverse:before, .u-alpha-20-bg-after-reverse:after, .u-color-alpha-20-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20-bg-reverse\@large, .u-color-alpha-20-bg-reverse\@large, .u-bg-alpha-20-reverse\@large, .u-alpha-20-bg-before-reverse::before\@large, .u-color-alpha-20-bg-before-reverse::before\@large, .u-alpha-20-bg-after-reverse::after\@large, .u-color-alpha-20-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20-bg-reverse\@small, .u-color-alpha-20-bg-reverse\@small, .u-bg-alpha-20-reverse\@small, .u-alpha-20-bg-before-reverse::before\@small, .u-color-alpha-20-bg-before-reverse::before\@small, .u-alpha-20-bg-after-reverse::after\@small, .u-color-alpha-20-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-20-bg-reverse {
  color: rgba(255, 255, 255, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-20-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-20-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.2); } }

.u-alpha-10, .u-color-alpha-10, .u-alpha-10-before:before, .u-color-alpha-10-before:before, .u-alpha-10-after:after, .u-color-alpha-10-after:after {
  color: rgba(255, 255, 255, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10\@large, .u-color-alpha-10\@large, .u-alpha-10-before::before\@large, .u-color-alpha-10-before::before\@large, .u-alpha-10-after::after\@large, .u-color-alpha-10-after::after\@large {
      color: rgba(255, 255, 255, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10\@small, .u-color-alpha-10\@small, .u-alpha-10-before::before\@small, .u-color-alpha-10-before::before\@small, .u-alpha-10-after::after\@small, .u-color-alpha-10-after::after\@small {
      color: rgba(255, 255, 255, 0.1); } }

.u-alpha-10-bg, .u-color-alpha-10-bg, .u-bg-alpha-10, .u-alpha-10-bg-before:before, .u-color-alpha-10-bg-before:before, .u-alpha-10-bg-after:after, .u-color-alpha-10-bg-after:after {
  background-color: rgba(255, 255, 255, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10-bg\@large, .u-color-alpha-10-bg\@large, .u-bg-alpha-10\@large, .u-alpha-10-bg-before::before\@large, .u-color-alpha-10-bg-before::before\@large, .u-alpha-10-bg-after::after\@large, .u-color-alpha-10-bg-after::after\@large {
      background-color: rgba(255, 255, 255, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10-bg\@small, .u-color-alpha-10-bg\@small, .u-bg-alpha-10\@small, .u-alpha-10-bg-before::before\@small, .u-color-alpha-10-bg-before::before\@small, .u-alpha-10-bg-after::after\@small, .u-color-alpha-10-bg-after::after\@small {
      background-color: rgba(255, 255, 255, 0.1); } }

.u-alpha-10-bg {
  background-color: rgba(255, 255, 255, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10-bg\@large {
      background-color: rgba(255, 255, 255, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10-bg\@small {
      background-color: rgba(255, 255, 255, 0.1); } }

.u-alpha-10-bg {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10-bg\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10-bg\@small {
      color: #000; } }

.u-alpha-10-reverse, .u-color-alpha-10-reverse, .u-alpha-10-before-reverse:before, .u-color-alpha-10-before-reverse:before, .u-alpha-10-after-reverse:after, .u-color-alpha-10-after-reverse:after {
  color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10-reverse\@large, .u-color-alpha-10-reverse\@large, .u-alpha-10-before-reverse::before\@large, .u-color-alpha-10-before-reverse::before\@large, .u-alpha-10-after-reverse::after\@large, .u-color-alpha-10-after-reverse::after\@large {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10-reverse\@small, .u-color-alpha-10-reverse\@small, .u-alpha-10-before-reverse::before\@small, .u-color-alpha-10-before-reverse::before\@small, .u-alpha-10-after-reverse::after\@small, .u-color-alpha-10-after-reverse::after\@small {
      color: #000; } }

.u-alpha-10-bg-reverse, .u-color-alpha-10-bg-reverse, .u-bg-alpha-10-reverse, .u-alpha-10-bg-before-reverse:before, .u-color-alpha-10-bg-before-reverse:before, .u-alpha-10-bg-after-reverse:after, .u-color-alpha-10-bg-after-reverse:after {
  background-color: #000; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10-bg-reverse\@large, .u-color-alpha-10-bg-reverse\@large, .u-bg-alpha-10-reverse\@large, .u-alpha-10-bg-before-reverse::before\@large, .u-color-alpha-10-bg-before-reverse::before\@large, .u-alpha-10-bg-after-reverse::after\@large, .u-color-alpha-10-bg-after-reverse::after\@large {
      background-color: #000; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10-bg-reverse\@small, .u-color-alpha-10-bg-reverse\@small, .u-bg-alpha-10-reverse\@small, .u-alpha-10-bg-before-reverse::before\@small, .u-color-alpha-10-bg-before-reverse::before\@small, .u-alpha-10-bg-after-reverse::after\@small, .u-color-alpha-10-bg-after-reverse::after\@small {
      background-color: #000; } }

.u-alpha-10-bg-reverse {
  color: rgba(255, 255, 255, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-10-bg-reverse\@large {
      color: rgba(255, 255, 255, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-10-bg-reverse\@small {
      color: rgba(255, 255, 255, 0.1); } }

.u-alpha-dark-90, .u-color-alpha-dark-90, .u-alpha-dark-90-before:before, .u-color-alpha-dark-90-before:before, .u-alpha-dark-90-after:after, .u-color-alpha-dark-90-after:after {
  color: rgba(0, 0, 0, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90\@large, .u-color-alpha-dark-90\@large, .u-alpha-dark-90-before::before\@large, .u-color-alpha-dark-90-before::before\@large, .u-alpha-dark-90-after::after\@large, .u-color-alpha-dark-90-after::after\@large {
      color: rgba(0, 0, 0, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90\@small, .u-color-alpha-dark-90\@small, .u-alpha-dark-90-before::before\@small, .u-color-alpha-dark-90-before::before\@small, .u-alpha-dark-90-after::after\@small, .u-color-alpha-dark-90-after::after\@small {
      color: rgba(0, 0, 0, 0.9); } }

.u-alpha-dark-90-bg, .u-color-alpha-dark-90-bg, .u-bg-alpha-dark-90, .u-alpha-dark-90-bg-before:before, .u-color-alpha-dark-90-bg-before:before, .u-alpha-dark-90-bg-after:after, .u-color-alpha-dark-90-bg-after:after {
  background-color: rgba(0, 0, 0, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90-bg\@large, .u-color-alpha-dark-90-bg\@large, .u-bg-alpha-dark-90\@large, .u-alpha-dark-90-bg-before::before\@large, .u-color-alpha-dark-90-bg-before::before\@large, .u-alpha-dark-90-bg-after::after\@large, .u-color-alpha-dark-90-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90-bg\@small, .u-color-alpha-dark-90-bg\@small, .u-bg-alpha-dark-90\@small, .u-alpha-dark-90-bg-before::before\@small, .u-color-alpha-dark-90-bg-before::before\@small, .u-alpha-dark-90-bg-after::after\@small, .u-color-alpha-dark-90-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.9); } }

.u-alpha-dark-90-bg {
  background-color: rgba(0, 0, 0, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90-bg\@large {
      background-color: rgba(0, 0, 0, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90-bg\@small {
      background-color: rgba(0, 0, 0, 0.9); } }

.u-alpha-dark-90-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90-bg\@small {
      color: #FFF; } }

.u-alpha-dark-90-reverse, .u-color-alpha-dark-90-reverse, .u-alpha-dark-90-before-reverse:before, .u-color-alpha-dark-90-before-reverse:before, .u-alpha-dark-90-after-reverse:after, .u-color-alpha-dark-90-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90-reverse\@large, .u-color-alpha-dark-90-reverse\@large, .u-alpha-dark-90-before-reverse::before\@large, .u-color-alpha-dark-90-before-reverse::before\@large, .u-alpha-dark-90-after-reverse::after\@large, .u-color-alpha-dark-90-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90-reverse\@small, .u-color-alpha-dark-90-reverse\@small, .u-alpha-dark-90-before-reverse::before\@small, .u-color-alpha-dark-90-before-reverse::before\@small, .u-alpha-dark-90-after-reverse::after\@small, .u-color-alpha-dark-90-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-90-bg-reverse, .u-color-alpha-dark-90-bg-reverse, .u-bg-alpha-dark-90-reverse, .u-alpha-dark-90-bg-before-reverse:before, .u-color-alpha-dark-90-bg-before-reverse:before, .u-alpha-dark-90-bg-after-reverse:after, .u-color-alpha-dark-90-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90-bg-reverse\@large, .u-color-alpha-dark-90-bg-reverse\@large, .u-bg-alpha-dark-90-reverse\@large, .u-alpha-dark-90-bg-before-reverse::before\@large, .u-color-alpha-dark-90-bg-before-reverse::before\@large, .u-alpha-dark-90-bg-after-reverse::after\@large, .u-color-alpha-dark-90-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90-bg-reverse\@small, .u-color-alpha-dark-90-bg-reverse\@small, .u-bg-alpha-dark-90-reverse\@small, .u-alpha-dark-90-bg-before-reverse::before\@small, .u-color-alpha-dark-90-bg-before-reverse::before\@small, .u-alpha-dark-90-bg-after-reverse::after\@small, .u-color-alpha-dark-90-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-90-bg-reverse {
  color: rgba(0, 0, 0, 0.9); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-90-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.9); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-90-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.9); } }

.u-alpha-dark-80, .u-color-alpha-dark-80, .u-alpha-dark-80-before:before, .u-color-alpha-dark-80-before:before, .u-alpha-dark-80-after:after, .u-color-alpha-dark-80-after:after {
  color: rgba(0, 0, 0, 0.8); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80\@large, .u-color-alpha-dark-80\@large, .u-alpha-dark-80-before::before\@large, .u-color-alpha-dark-80-before::before\@large, .u-alpha-dark-80-after::after\@large, .u-color-alpha-dark-80-after::after\@large {
      color: rgba(0, 0, 0, 0.8); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80\@small, .u-color-alpha-dark-80\@small, .u-alpha-dark-80-before::before\@small, .u-color-alpha-dark-80-before::before\@small, .u-alpha-dark-80-after::after\@small, .u-color-alpha-dark-80-after::after\@small {
      color: rgba(0, 0, 0, 0.8); } }

.u-alpha-dark-80-bg, .u-color-alpha-dark-80-bg, .u-bg-alpha-dark-80, .u-alpha-dark-80-bg-before:before, .u-color-alpha-dark-80-bg-before:before, .u-alpha-dark-80-bg-after:after, .u-color-alpha-dark-80-bg-after:after {
  background-color: rgba(0, 0, 0, 0.8); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80-bg\@large, .u-color-alpha-dark-80-bg\@large, .u-bg-alpha-dark-80\@large, .u-alpha-dark-80-bg-before::before\@large, .u-color-alpha-dark-80-bg-before::before\@large, .u-alpha-dark-80-bg-after::after\@large, .u-color-alpha-dark-80-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.8); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80-bg\@small, .u-color-alpha-dark-80-bg\@small, .u-bg-alpha-dark-80\@small, .u-alpha-dark-80-bg-before::before\@small, .u-color-alpha-dark-80-bg-before::before\@small, .u-alpha-dark-80-bg-after::after\@small, .u-color-alpha-dark-80-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.8); } }

.u-alpha-dark-80-bg {
  background-color: rgba(0, 0, 0, 0.8); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80-bg\@large {
      background-color: rgba(0, 0, 0, 0.8); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80-bg\@small {
      background-color: rgba(0, 0, 0, 0.8); } }

.u-alpha-dark-80-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80-bg\@small {
      color: #FFF; } }

.u-alpha-dark-80-reverse, .u-color-alpha-dark-80-reverse, .u-alpha-dark-80-before-reverse:before, .u-color-alpha-dark-80-before-reverse:before, .u-alpha-dark-80-after-reverse:after, .u-color-alpha-dark-80-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80-reverse\@large, .u-color-alpha-dark-80-reverse\@large, .u-alpha-dark-80-before-reverse::before\@large, .u-color-alpha-dark-80-before-reverse::before\@large, .u-alpha-dark-80-after-reverse::after\@large, .u-color-alpha-dark-80-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80-reverse\@small, .u-color-alpha-dark-80-reverse\@small, .u-alpha-dark-80-before-reverse::before\@small, .u-color-alpha-dark-80-before-reverse::before\@small, .u-alpha-dark-80-after-reverse::after\@small, .u-color-alpha-dark-80-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-80-bg-reverse, .u-color-alpha-dark-80-bg-reverse, .u-bg-alpha-dark-80-reverse, .u-alpha-dark-80-bg-before-reverse:before, .u-color-alpha-dark-80-bg-before-reverse:before, .u-alpha-dark-80-bg-after-reverse:after, .u-color-alpha-dark-80-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80-bg-reverse\@large, .u-color-alpha-dark-80-bg-reverse\@large, .u-bg-alpha-dark-80-reverse\@large, .u-alpha-dark-80-bg-before-reverse::before\@large, .u-color-alpha-dark-80-bg-before-reverse::before\@large, .u-alpha-dark-80-bg-after-reverse::after\@large, .u-color-alpha-dark-80-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80-bg-reverse\@small, .u-color-alpha-dark-80-bg-reverse\@small, .u-bg-alpha-dark-80-reverse\@small, .u-alpha-dark-80-bg-before-reverse::before\@small, .u-color-alpha-dark-80-bg-before-reverse::before\@small, .u-alpha-dark-80-bg-after-reverse::after\@small, .u-color-alpha-dark-80-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-80-bg-reverse {
  color: rgba(0, 0, 0, 0.8); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-80-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.8); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-80-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.8); } }

.u-alpha-dark-75, .u-color-alpha-dark-75, .u-alpha-dark-75-before:before, .u-color-alpha-dark-75-before:before, .u-alpha-dark-75-after:after, .u-color-alpha-dark-75-after:after {
  color: rgba(0, 0, 0, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75\@large, .u-color-alpha-dark-75\@large, .u-alpha-dark-75-before::before\@large, .u-color-alpha-dark-75-before::before\@large, .u-alpha-dark-75-after::after\@large, .u-color-alpha-dark-75-after::after\@large {
      color: rgba(0, 0, 0, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75\@small, .u-color-alpha-dark-75\@small, .u-alpha-dark-75-before::before\@small, .u-color-alpha-dark-75-before::before\@small, .u-alpha-dark-75-after::after\@small, .u-color-alpha-dark-75-after::after\@small {
      color: rgba(0, 0, 0, 0.75); } }

.u-alpha-dark-75-bg, .u-color-alpha-dark-75-bg, .u-bg-alpha-dark-75, .u-alpha-dark-75-bg-before:before, .u-color-alpha-dark-75-bg-before:before, .u-alpha-dark-75-bg-after:after, .u-color-alpha-dark-75-bg-after:after {
  background-color: rgba(0, 0, 0, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75-bg\@large, .u-color-alpha-dark-75-bg\@large, .u-bg-alpha-dark-75\@large, .u-alpha-dark-75-bg-before::before\@large, .u-color-alpha-dark-75-bg-before::before\@large, .u-alpha-dark-75-bg-after::after\@large, .u-color-alpha-dark-75-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75-bg\@small, .u-color-alpha-dark-75-bg\@small, .u-bg-alpha-dark-75\@small, .u-alpha-dark-75-bg-before::before\@small, .u-color-alpha-dark-75-bg-before::before\@small, .u-alpha-dark-75-bg-after::after\@small, .u-color-alpha-dark-75-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.75); } }

.u-alpha-dark-75-bg {
  background-color: rgba(0, 0, 0, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75-bg\@large {
      background-color: rgba(0, 0, 0, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75-bg\@small {
      background-color: rgba(0, 0, 0, 0.75); } }

.u-alpha-dark-75-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75-bg\@small {
      color: #FFF; } }

.u-alpha-dark-75-reverse, .u-color-alpha-dark-75-reverse, .u-alpha-dark-75-before-reverse:before, .u-color-alpha-dark-75-before-reverse:before, .u-alpha-dark-75-after-reverse:after, .u-color-alpha-dark-75-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75-reverse\@large, .u-color-alpha-dark-75-reverse\@large, .u-alpha-dark-75-before-reverse::before\@large, .u-color-alpha-dark-75-before-reverse::before\@large, .u-alpha-dark-75-after-reverse::after\@large, .u-color-alpha-dark-75-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75-reverse\@small, .u-color-alpha-dark-75-reverse\@small, .u-alpha-dark-75-before-reverse::before\@small, .u-color-alpha-dark-75-before-reverse::before\@small, .u-alpha-dark-75-after-reverse::after\@small, .u-color-alpha-dark-75-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-75-bg-reverse, .u-color-alpha-dark-75-bg-reverse, .u-bg-alpha-dark-75-reverse, .u-alpha-dark-75-bg-before-reverse:before, .u-color-alpha-dark-75-bg-before-reverse:before, .u-alpha-dark-75-bg-after-reverse:after, .u-color-alpha-dark-75-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75-bg-reverse\@large, .u-color-alpha-dark-75-bg-reverse\@large, .u-bg-alpha-dark-75-reverse\@large, .u-alpha-dark-75-bg-before-reverse::before\@large, .u-color-alpha-dark-75-bg-before-reverse::before\@large, .u-alpha-dark-75-bg-after-reverse::after\@large, .u-color-alpha-dark-75-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75-bg-reverse\@small, .u-color-alpha-dark-75-bg-reverse\@small, .u-bg-alpha-dark-75-reverse\@small, .u-alpha-dark-75-bg-before-reverse::before\@small, .u-color-alpha-dark-75-bg-before-reverse::before\@small, .u-alpha-dark-75-bg-after-reverse::after\@small, .u-color-alpha-dark-75-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-75-bg-reverse {
  color: rgba(0, 0, 0, 0.75); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-75-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.75); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-75-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.75); } }

.u-alpha-dark-70, .u-color-alpha-dark-70, .u-alpha-dark-70-before:before, .u-color-alpha-dark-70-before:before, .u-alpha-dark-70-after:after, .u-color-alpha-dark-70-after:after {
  color: rgba(0, 0, 0, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70\@large, .u-color-alpha-dark-70\@large, .u-alpha-dark-70-before::before\@large, .u-color-alpha-dark-70-before::before\@large, .u-alpha-dark-70-after::after\@large, .u-color-alpha-dark-70-after::after\@large {
      color: rgba(0, 0, 0, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70\@small, .u-color-alpha-dark-70\@small, .u-alpha-dark-70-before::before\@small, .u-color-alpha-dark-70-before::before\@small, .u-alpha-dark-70-after::after\@small, .u-color-alpha-dark-70-after::after\@small {
      color: rgba(0, 0, 0, 0.7); } }

.u-alpha-dark-70-bg, .u-color-alpha-dark-70-bg, .u-bg-alpha-dark-70, .u-alpha-dark-70-bg-before:before, .u-color-alpha-dark-70-bg-before:before, .u-alpha-dark-70-bg-after:after, .u-color-alpha-dark-70-bg-after:after {
  background-color: rgba(0, 0, 0, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70-bg\@large, .u-color-alpha-dark-70-bg\@large, .u-bg-alpha-dark-70\@large, .u-alpha-dark-70-bg-before::before\@large, .u-color-alpha-dark-70-bg-before::before\@large, .u-alpha-dark-70-bg-after::after\@large, .u-color-alpha-dark-70-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70-bg\@small, .u-color-alpha-dark-70-bg\@small, .u-bg-alpha-dark-70\@small, .u-alpha-dark-70-bg-before::before\@small, .u-color-alpha-dark-70-bg-before::before\@small, .u-alpha-dark-70-bg-after::after\@small, .u-color-alpha-dark-70-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.7); } }

.u-alpha-dark-70-bg {
  background-color: rgba(0, 0, 0, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70-bg\@large {
      background-color: rgba(0, 0, 0, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70-bg\@small {
      background-color: rgba(0, 0, 0, 0.7); } }

.u-alpha-dark-70-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70-bg\@small {
      color: #FFF; } }

.u-alpha-dark-70-reverse, .u-color-alpha-dark-70-reverse, .u-alpha-dark-70-before-reverse:before, .u-color-alpha-dark-70-before-reverse:before, .u-alpha-dark-70-after-reverse:after, .u-color-alpha-dark-70-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70-reverse\@large, .u-color-alpha-dark-70-reverse\@large, .u-alpha-dark-70-before-reverse::before\@large, .u-color-alpha-dark-70-before-reverse::before\@large, .u-alpha-dark-70-after-reverse::after\@large, .u-color-alpha-dark-70-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70-reverse\@small, .u-color-alpha-dark-70-reverse\@small, .u-alpha-dark-70-before-reverse::before\@small, .u-color-alpha-dark-70-before-reverse::before\@small, .u-alpha-dark-70-after-reverse::after\@small, .u-color-alpha-dark-70-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-70-bg-reverse, .u-color-alpha-dark-70-bg-reverse, .u-bg-alpha-dark-70-reverse, .u-alpha-dark-70-bg-before-reverse:before, .u-color-alpha-dark-70-bg-before-reverse:before, .u-alpha-dark-70-bg-after-reverse:after, .u-color-alpha-dark-70-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70-bg-reverse\@large, .u-color-alpha-dark-70-bg-reverse\@large, .u-bg-alpha-dark-70-reverse\@large, .u-alpha-dark-70-bg-before-reverse::before\@large, .u-color-alpha-dark-70-bg-before-reverse::before\@large, .u-alpha-dark-70-bg-after-reverse::after\@large, .u-color-alpha-dark-70-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70-bg-reverse\@small, .u-color-alpha-dark-70-bg-reverse\@small, .u-bg-alpha-dark-70-reverse\@small, .u-alpha-dark-70-bg-before-reverse::before\@small, .u-color-alpha-dark-70-bg-before-reverse::before\@small, .u-alpha-dark-70-bg-after-reverse::after\@small, .u-color-alpha-dark-70-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-70-bg-reverse {
  color: rgba(0, 0, 0, 0.7); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-70-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.7); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-70-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.7); } }

.u-alpha-dark-50, .u-color-alpha-dark-50, .u-alpha-dark-50-before:before, .u-color-alpha-dark-50-before:before, .u-alpha-dark-50-after:after, .u-color-alpha-dark-50-after:after {
  color: rgba(0, 0, 0, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50\@large, .u-color-alpha-dark-50\@large, .u-alpha-dark-50-before::before\@large, .u-color-alpha-dark-50-before::before\@large, .u-alpha-dark-50-after::after\@large, .u-color-alpha-dark-50-after::after\@large {
      color: rgba(0, 0, 0, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50\@small, .u-color-alpha-dark-50\@small, .u-alpha-dark-50-before::before\@small, .u-color-alpha-dark-50-before::before\@small, .u-alpha-dark-50-after::after\@small, .u-color-alpha-dark-50-after::after\@small {
      color: rgba(0, 0, 0, 0.5); } }

.u-alpha-dark-50-bg, .u-color-alpha-dark-50-bg, .u-bg-alpha-dark-50, .u-alpha-dark-50-bg-before:before, .u-color-alpha-dark-50-bg-before:before, .u-alpha-dark-50-bg-after:after, .u-color-alpha-dark-50-bg-after:after {
  background-color: rgba(0, 0, 0, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50-bg\@large, .u-color-alpha-dark-50-bg\@large, .u-bg-alpha-dark-50\@large, .u-alpha-dark-50-bg-before::before\@large, .u-color-alpha-dark-50-bg-before::before\@large, .u-alpha-dark-50-bg-after::after\@large, .u-color-alpha-dark-50-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50-bg\@small, .u-color-alpha-dark-50-bg\@small, .u-bg-alpha-dark-50\@small, .u-alpha-dark-50-bg-before::before\@small, .u-color-alpha-dark-50-bg-before::before\@small, .u-alpha-dark-50-bg-after::after\@small, .u-color-alpha-dark-50-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.5); } }

.u-alpha-dark-50-bg {
  background-color: rgba(0, 0, 0, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50-bg\@large {
      background-color: rgba(0, 0, 0, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50-bg\@small {
      background-color: rgba(0, 0, 0, 0.5); } }

.u-alpha-dark-50-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50-bg\@small {
      color: #FFF; } }

.u-alpha-dark-50-reverse, .u-color-alpha-dark-50-reverse, .u-alpha-dark-50-before-reverse:before, .u-color-alpha-dark-50-before-reverse:before, .u-alpha-dark-50-after-reverse:after, .u-color-alpha-dark-50-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50-reverse\@large, .u-color-alpha-dark-50-reverse\@large, .u-alpha-dark-50-before-reverse::before\@large, .u-color-alpha-dark-50-before-reverse::before\@large, .u-alpha-dark-50-after-reverse::after\@large, .u-color-alpha-dark-50-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50-reverse\@small, .u-color-alpha-dark-50-reverse\@small, .u-alpha-dark-50-before-reverse::before\@small, .u-color-alpha-dark-50-before-reverse::before\@small, .u-alpha-dark-50-after-reverse::after\@small, .u-color-alpha-dark-50-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-50-bg-reverse, .u-color-alpha-dark-50-bg-reverse, .u-bg-alpha-dark-50-reverse, .u-alpha-dark-50-bg-before-reverse:before, .u-color-alpha-dark-50-bg-before-reverse:before, .u-alpha-dark-50-bg-after-reverse:after, .u-color-alpha-dark-50-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50-bg-reverse\@large, .u-color-alpha-dark-50-bg-reverse\@large, .u-bg-alpha-dark-50-reverse\@large, .u-alpha-dark-50-bg-before-reverse::before\@large, .u-color-alpha-dark-50-bg-before-reverse::before\@large, .u-alpha-dark-50-bg-after-reverse::after\@large, .u-color-alpha-dark-50-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50-bg-reverse\@small, .u-color-alpha-dark-50-bg-reverse\@small, .u-bg-alpha-dark-50-reverse\@small, .u-alpha-dark-50-bg-before-reverse::before\@small, .u-color-alpha-dark-50-bg-before-reverse::before\@small, .u-alpha-dark-50-bg-after-reverse::after\@small, .u-color-alpha-dark-50-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-50-bg-reverse {
  color: rgba(0, 0, 0, 0.5); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-50-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.5); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-50-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.5); } }

.u-alpha-dark-40, .u-color-alpha-dark-40, .u-alpha-dark-40-before:before, .u-color-alpha-dark-40-before:before, .u-alpha-dark-40-after:after, .u-color-alpha-dark-40-after:after {
  color: rgba(0, 0, 0, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40\@large, .u-color-alpha-dark-40\@large, .u-alpha-dark-40-before::before\@large, .u-color-alpha-dark-40-before::before\@large, .u-alpha-dark-40-after::after\@large, .u-color-alpha-dark-40-after::after\@large {
      color: rgba(0, 0, 0, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40\@small, .u-color-alpha-dark-40\@small, .u-alpha-dark-40-before::before\@small, .u-color-alpha-dark-40-before::before\@small, .u-alpha-dark-40-after::after\@small, .u-color-alpha-dark-40-after::after\@small {
      color: rgba(0, 0, 0, 0.4); } }

.u-alpha-dark-40-bg, .u-color-alpha-dark-40-bg, .u-bg-alpha-dark-40, .u-alpha-dark-40-bg-before:before, .u-color-alpha-dark-40-bg-before:before, .u-alpha-dark-40-bg-after:after, .u-color-alpha-dark-40-bg-after:after {
  background-color: rgba(0, 0, 0, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40-bg\@large, .u-color-alpha-dark-40-bg\@large, .u-bg-alpha-dark-40\@large, .u-alpha-dark-40-bg-before::before\@large, .u-color-alpha-dark-40-bg-before::before\@large, .u-alpha-dark-40-bg-after::after\@large, .u-color-alpha-dark-40-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40-bg\@small, .u-color-alpha-dark-40-bg\@small, .u-bg-alpha-dark-40\@small, .u-alpha-dark-40-bg-before::before\@small, .u-color-alpha-dark-40-bg-before::before\@small, .u-alpha-dark-40-bg-after::after\@small, .u-color-alpha-dark-40-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.4); } }

.u-alpha-dark-40-bg {
  background-color: rgba(0, 0, 0, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40-bg\@large {
      background-color: rgba(0, 0, 0, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40-bg\@small {
      background-color: rgba(0, 0, 0, 0.4); } }

.u-alpha-dark-40-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40-bg\@small {
      color: #FFF; } }

.u-alpha-dark-40-reverse, .u-color-alpha-dark-40-reverse, .u-alpha-dark-40-before-reverse:before, .u-color-alpha-dark-40-before-reverse:before, .u-alpha-dark-40-after-reverse:after, .u-color-alpha-dark-40-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40-reverse\@large, .u-color-alpha-dark-40-reverse\@large, .u-alpha-dark-40-before-reverse::before\@large, .u-color-alpha-dark-40-before-reverse::before\@large, .u-alpha-dark-40-after-reverse::after\@large, .u-color-alpha-dark-40-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40-reverse\@small, .u-color-alpha-dark-40-reverse\@small, .u-alpha-dark-40-before-reverse::before\@small, .u-color-alpha-dark-40-before-reverse::before\@small, .u-alpha-dark-40-after-reverse::after\@small, .u-color-alpha-dark-40-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-40-bg-reverse, .u-color-alpha-dark-40-bg-reverse, .u-bg-alpha-dark-40-reverse, .u-alpha-dark-40-bg-before-reverse:before, .u-color-alpha-dark-40-bg-before-reverse:before, .u-alpha-dark-40-bg-after-reverse:after, .u-color-alpha-dark-40-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40-bg-reverse\@large, .u-color-alpha-dark-40-bg-reverse\@large, .u-bg-alpha-dark-40-reverse\@large, .u-alpha-dark-40-bg-before-reverse::before\@large, .u-color-alpha-dark-40-bg-before-reverse::before\@large, .u-alpha-dark-40-bg-after-reverse::after\@large, .u-color-alpha-dark-40-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40-bg-reverse\@small, .u-color-alpha-dark-40-bg-reverse\@small, .u-bg-alpha-dark-40-reverse\@small, .u-alpha-dark-40-bg-before-reverse::before\@small, .u-color-alpha-dark-40-bg-before-reverse::before\@small, .u-alpha-dark-40-bg-after-reverse::after\@small, .u-color-alpha-dark-40-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-40-bg-reverse {
  color: rgba(0, 0, 0, 0.4); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-40-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.4); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-40-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.4); } }

.u-alpha-dark-30, .u-color-alpha-dark-30, .u-alpha-dark-30-before:before, .u-color-alpha-dark-30-before:before, .u-alpha-dark-30-after:after, .u-color-alpha-dark-30-after:after {
  color: rgba(0, 0, 0, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30\@large, .u-color-alpha-dark-30\@large, .u-alpha-dark-30-before::before\@large, .u-color-alpha-dark-30-before::before\@large, .u-alpha-dark-30-after::after\@large, .u-color-alpha-dark-30-after::after\@large {
      color: rgba(0, 0, 0, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30\@small, .u-color-alpha-dark-30\@small, .u-alpha-dark-30-before::before\@small, .u-color-alpha-dark-30-before::before\@small, .u-alpha-dark-30-after::after\@small, .u-color-alpha-dark-30-after::after\@small {
      color: rgba(0, 0, 0, 0.3); } }

.u-alpha-dark-30-bg, .u-color-alpha-dark-30-bg, .u-bg-alpha-dark-30, .u-alpha-dark-30-bg-before:before, .u-color-alpha-dark-30-bg-before:before, .u-alpha-dark-30-bg-after:after, .u-color-alpha-dark-30-bg-after:after {
  background-color: rgba(0, 0, 0, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30-bg\@large, .u-color-alpha-dark-30-bg\@large, .u-bg-alpha-dark-30\@large, .u-alpha-dark-30-bg-before::before\@large, .u-color-alpha-dark-30-bg-before::before\@large, .u-alpha-dark-30-bg-after::after\@large, .u-color-alpha-dark-30-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30-bg\@small, .u-color-alpha-dark-30-bg\@small, .u-bg-alpha-dark-30\@small, .u-alpha-dark-30-bg-before::before\@small, .u-color-alpha-dark-30-bg-before::before\@small, .u-alpha-dark-30-bg-after::after\@small, .u-color-alpha-dark-30-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.3); } }

.u-alpha-dark-30-bg {
  background-color: rgba(0, 0, 0, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30-bg\@large {
      background-color: rgba(0, 0, 0, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30-bg\@small {
      background-color: rgba(0, 0, 0, 0.3); } }

.u-alpha-dark-30-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30-bg\@small {
      color: #FFF; } }

.u-alpha-dark-30-reverse, .u-color-alpha-dark-30-reverse, .u-alpha-dark-30-before-reverse:before, .u-color-alpha-dark-30-before-reverse:before, .u-alpha-dark-30-after-reverse:after, .u-color-alpha-dark-30-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30-reverse\@large, .u-color-alpha-dark-30-reverse\@large, .u-alpha-dark-30-before-reverse::before\@large, .u-color-alpha-dark-30-before-reverse::before\@large, .u-alpha-dark-30-after-reverse::after\@large, .u-color-alpha-dark-30-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30-reverse\@small, .u-color-alpha-dark-30-reverse\@small, .u-alpha-dark-30-before-reverse::before\@small, .u-color-alpha-dark-30-before-reverse::before\@small, .u-alpha-dark-30-after-reverse::after\@small, .u-color-alpha-dark-30-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-30-bg-reverse, .u-color-alpha-dark-30-bg-reverse, .u-bg-alpha-dark-30-reverse, .u-alpha-dark-30-bg-before-reverse:before, .u-color-alpha-dark-30-bg-before-reverse:before, .u-alpha-dark-30-bg-after-reverse:after, .u-color-alpha-dark-30-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30-bg-reverse\@large, .u-color-alpha-dark-30-bg-reverse\@large, .u-bg-alpha-dark-30-reverse\@large, .u-alpha-dark-30-bg-before-reverse::before\@large, .u-color-alpha-dark-30-bg-before-reverse::before\@large, .u-alpha-dark-30-bg-after-reverse::after\@large, .u-color-alpha-dark-30-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30-bg-reverse\@small, .u-color-alpha-dark-30-bg-reverse\@small, .u-bg-alpha-dark-30-reverse\@small, .u-alpha-dark-30-bg-before-reverse::before\@small, .u-color-alpha-dark-30-bg-before-reverse::before\@small, .u-alpha-dark-30-bg-after-reverse::after\@small, .u-color-alpha-dark-30-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-30-bg-reverse {
  color: rgba(0, 0, 0, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-30-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-30-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.3); } }

.u-alpha-dark-20, .u-color-alpha-dark-20, .u-alpha-dark-20-before:before, .u-color-alpha-dark-20-before:before, .u-alpha-dark-20-after:after, .u-color-alpha-dark-20-after:after {
  color: rgba(0, 0, 0, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20\@large, .u-color-alpha-dark-20\@large, .u-alpha-dark-20-before::before\@large, .u-color-alpha-dark-20-before::before\@large, .u-alpha-dark-20-after::after\@large, .u-color-alpha-dark-20-after::after\@large {
      color: rgba(0, 0, 0, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20\@small, .u-color-alpha-dark-20\@small, .u-alpha-dark-20-before::before\@small, .u-color-alpha-dark-20-before::before\@small, .u-alpha-dark-20-after::after\@small, .u-color-alpha-dark-20-after::after\@small {
      color: rgba(0, 0, 0, 0.2); } }

.u-alpha-dark-20-bg, .u-color-alpha-dark-20-bg, .u-bg-alpha-dark-20, .u-alpha-dark-20-bg-before:before, .u-color-alpha-dark-20-bg-before:before, .u-alpha-dark-20-bg-after:after, .u-color-alpha-dark-20-bg-after:after {
  background-color: rgba(0, 0, 0, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20-bg\@large, .u-color-alpha-dark-20-bg\@large, .u-bg-alpha-dark-20\@large, .u-alpha-dark-20-bg-before::before\@large, .u-color-alpha-dark-20-bg-before::before\@large, .u-alpha-dark-20-bg-after::after\@large, .u-color-alpha-dark-20-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20-bg\@small, .u-color-alpha-dark-20-bg\@small, .u-bg-alpha-dark-20\@small, .u-alpha-dark-20-bg-before::before\@small, .u-color-alpha-dark-20-bg-before::before\@small, .u-alpha-dark-20-bg-after::after\@small, .u-color-alpha-dark-20-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.2); } }

.u-alpha-dark-20-bg {
  background-color: rgba(0, 0, 0, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20-bg\@large {
      background-color: rgba(0, 0, 0, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20-bg\@small {
      background-color: rgba(0, 0, 0, 0.2); } }

.u-alpha-dark-20-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20-bg\@small {
      color: #FFF; } }

.u-alpha-dark-20-reverse, .u-color-alpha-dark-20-reverse, .u-alpha-dark-20-before-reverse:before, .u-color-alpha-dark-20-before-reverse:before, .u-alpha-dark-20-after-reverse:after, .u-color-alpha-dark-20-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20-reverse\@large, .u-color-alpha-dark-20-reverse\@large, .u-alpha-dark-20-before-reverse::before\@large, .u-color-alpha-dark-20-before-reverse::before\@large, .u-alpha-dark-20-after-reverse::after\@large, .u-color-alpha-dark-20-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20-reverse\@small, .u-color-alpha-dark-20-reverse\@small, .u-alpha-dark-20-before-reverse::before\@small, .u-color-alpha-dark-20-before-reverse::before\@small, .u-alpha-dark-20-after-reverse::after\@small, .u-color-alpha-dark-20-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-20-bg-reverse, .u-color-alpha-dark-20-bg-reverse, .u-bg-alpha-dark-20-reverse, .u-alpha-dark-20-bg-before-reverse:before, .u-color-alpha-dark-20-bg-before-reverse:before, .u-alpha-dark-20-bg-after-reverse:after, .u-color-alpha-dark-20-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20-bg-reverse\@large, .u-color-alpha-dark-20-bg-reverse\@large, .u-bg-alpha-dark-20-reverse\@large, .u-alpha-dark-20-bg-before-reverse::before\@large, .u-color-alpha-dark-20-bg-before-reverse::before\@large, .u-alpha-dark-20-bg-after-reverse::after\@large, .u-color-alpha-dark-20-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20-bg-reverse\@small, .u-color-alpha-dark-20-bg-reverse\@small, .u-bg-alpha-dark-20-reverse\@small, .u-alpha-dark-20-bg-before-reverse::before\@small, .u-color-alpha-dark-20-bg-before-reverse::before\@small, .u-alpha-dark-20-bg-after-reverse::after\@small, .u-color-alpha-dark-20-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-20-bg-reverse {
  color: rgba(0, 0, 0, 0.2); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-20-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.2); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-20-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.2); } }

.u-alpha-dark-10, .u-color-alpha-dark-10, .u-alpha-dark-10-before:before, .u-color-alpha-dark-10-before:before, .u-alpha-dark-10-after:after, .u-color-alpha-dark-10-after:after {
  color: rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10\@large, .u-color-alpha-dark-10\@large, .u-alpha-dark-10-before::before\@large, .u-color-alpha-dark-10-before::before\@large, .u-alpha-dark-10-after::after\@large, .u-color-alpha-dark-10-after::after\@large {
      color: rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10\@small, .u-color-alpha-dark-10\@small, .u-alpha-dark-10-before::before\@small, .u-color-alpha-dark-10-before::before\@small, .u-alpha-dark-10-after::after\@small, .u-color-alpha-dark-10-after::after\@small {
      color: rgba(0, 0, 0, 0.1); } }

.u-alpha-dark-10-bg, .u-color-alpha-dark-10-bg, .u-bg-alpha-dark-10, .u-alpha-dark-10-bg-before:before, .u-color-alpha-dark-10-bg-before:before, .u-alpha-dark-10-bg-after:after, .u-color-alpha-dark-10-bg-after:after {
  background-color: rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10-bg\@large, .u-color-alpha-dark-10-bg\@large, .u-bg-alpha-dark-10\@large, .u-alpha-dark-10-bg-before::before\@large, .u-color-alpha-dark-10-bg-before::before\@large, .u-alpha-dark-10-bg-after::after\@large, .u-color-alpha-dark-10-bg-after::after\@large {
      background-color: rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10-bg\@small, .u-color-alpha-dark-10-bg\@small, .u-bg-alpha-dark-10\@small, .u-alpha-dark-10-bg-before::before\@small, .u-color-alpha-dark-10-bg-before::before\@small, .u-alpha-dark-10-bg-after::after\@small, .u-color-alpha-dark-10-bg-after::after\@small {
      background-color: rgba(0, 0, 0, 0.1); } }

.u-alpha-dark-10-bg {
  background-color: rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10-bg\@large {
      background-color: rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10-bg\@small {
      background-color: rgba(0, 0, 0, 0.1); } }

.u-alpha-dark-10-bg {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10-bg\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10-bg\@small {
      color: #FFF; } }

.u-alpha-dark-10-reverse, .u-color-alpha-dark-10-reverse, .u-alpha-dark-10-before-reverse:before, .u-color-alpha-dark-10-before-reverse:before, .u-alpha-dark-10-after-reverse:after, .u-color-alpha-dark-10-after-reverse:after {
  color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10-reverse\@large, .u-color-alpha-dark-10-reverse\@large, .u-alpha-dark-10-before-reverse::before\@large, .u-color-alpha-dark-10-before-reverse::before\@large, .u-alpha-dark-10-after-reverse::after\@large, .u-color-alpha-dark-10-after-reverse::after\@large {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10-reverse\@small, .u-color-alpha-dark-10-reverse\@small, .u-alpha-dark-10-before-reverse::before\@small, .u-color-alpha-dark-10-before-reverse::before\@small, .u-alpha-dark-10-after-reverse::after\@small, .u-color-alpha-dark-10-after-reverse::after\@small {
      color: #FFF; } }

.u-alpha-dark-10-bg-reverse, .u-color-alpha-dark-10-bg-reverse, .u-bg-alpha-dark-10-reverse, .u-alpha-dark-10-bg-before-reverse:before, .u-color-alpha-dark-10-bg-before-reverse:before, .u-alpha-dark-10-bg-after-reverse:after, .u-color-alpha-dark-10-bg-after-reverse:after {
  background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10-bg-reverse\@large, .u-color-alpha-dark-10-bg-reverse\@large, .u-bg-alpha-dark-10-reverse\@large, .u-alpha-dark-10-bg-before-reverse::before\@large, .u-color-alpha-dark-10-bg-before-reverse::before\@large, .u-alpha-dark-10-bg-after-reverse::after\@large, .u-color-alpha-dark-10-bg-after-reverse::after\@large {
      background-color: #FFF; } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10-bg-reverse\@small, .u-color-alpha-dark-10-bg-reverse\@small, .u-bg-alpha-dark-10-reverse\@small, .u-alpha-dark-10-bg-before-reverse::before\@small, .u-color-alpha-dark-10-bg-before-reverse::before\@small, .u-alpha-dark-10-bg-after-reverse::after\@small, .u-color-alpha-dark-10-bg-after-reverse::after\@small {
      background-color: #FFF; } }

.u-alpha-dark-10-bg-reverse {
  color: rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 47.5rem) {
    .u-alpha-dark-10-bg-reverse\@large {
      color: rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 47.5rem) {
    .u-alpha-dark-10-bg-reverse\@small {
      color: rgba(0, 0, 0, 0.1); } }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Colors HTS
category: 6. Trumps > Color
---

Generates colors from `@mixin makeColorHelpers()` in `~/00-global/global-core/01-tools.scss`, follows [Naming Convention for Colors](https://codepen.io/nicetransition/pen/QjwbRg?editors=1100).


Update colors in `~/01-brand/colors.json`

All colors

```default.html
<div class="u-a-c">
<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-dark-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark dark
	</li>

	<li class="** u-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark
	</li>

	<li class="** u-dark-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark light
	</li>

	<li class="** u-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-dark-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark accent
		<span class="u-full">reverse</span>
	</li>
</ul>

<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-primary-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary dark
	</li>

	<li class="** u-primary-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary
	</li>

	<li class="** u-primary-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary light
	</li>

	<li class="** u-primary-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-primary-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary accent
		<span class="u-full">reverse</span>
	</li>
</ul>

<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-secondary-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary dark
	</li>

	<li class="** u-secondary-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary
	</li>

	<li class="** u-secondary-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary light
	</li>

	<li class="** u-secondary-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-secondary-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary accent
		<span class="u-full">reverse</span>
	</li>
</ul>



<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-accent-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent dark
	</li>

	<li class="** u-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent
	</li>

	<li class="** u-accent-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent light
	</li>

	<li class="** u-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-accent-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent accent
		<span class="u-full">reverse</span>
	</li>
</ul>

<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-light-dark-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light dark
	</li>

	<li class="** u-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light
	</li>

	<li class="** u-light-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light light
	</li>

	<li class="** u-light-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-light-accent-bg ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light accent
		<span class="u-full">reverse</span>
	</li>
</ul>
</div>

```


Reverse colors

```default.html
<div class="u-a-c">
<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-dark-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark dark
	</li>

	<li class="** u-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark
	</li>

	<li class="** u-dark-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark light
	</li>

	<li class="** u-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-dark-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		dark accent
		<span class="u-full">reverse</span>
	</li>
</ul>

<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-primary-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary dark
	</li>

	<li class="** u-primary-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary
	</li>

	<li class="** u-primary-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary light
	</li>

	<li class="** u-primary-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-primary-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		primary accent
		<span class="u-full">reverse</span>
	</li>
</ul>

<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-secondary-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary dark
	</li>

	<li class="** u-secondary-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary
	</li>

	<li class="** u-secondary-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary light
	</li>

	<li class="** u-secondary-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-secondary-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		secondary accent
		<span class="u-full">reverse</span>
	</li>
</ul>



<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-accent-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent dark
	</li>

	<li class="** u-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent
	</li>

	<li class="** u-accent-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent light
	</li>

	<li class="** u-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-accent-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		accent accent
		<span class="u-full">reverse</span>
	</li>
</ul>

<ul class="o-flex o-flex--wrap o-flex--1">
	<li class="** u-light-dark-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light dark
	</li>

	<li class="** u-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light
	</li>

	<li class="** u-light-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light light
	</li>

	<li class="** u-light-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light accent
		<span class="u-full">reverse</span>
	</li>

	<li class="** u-light-accent-bg-reverse ** u-min-width-1-of-12 || u-space-1-3-lg-fixed || o-flex o-flex--wrap o-flex--justify-content-center o-flex--align-items-center || u-fs-6">
		light accent
		<span class="u-full">reverse</span>
	</li>
</ul>
</div>

```
*/
.t-form-1.c-label {
  color: #565F73; }
.t-form-1.c-select .c-select__text:after {
  color: #D1292E; }
.t-form-1.c-select .c-select__text:active, .t-form-1.c-select .c-select__text:hover {
  color: #FF3111; }
.t-form-1.c-select .c-select__text:active {
  color: #B21B1F; }
.t-form-1.c-input, .t-form-1.c-textarea, .t-form-1.c-select {
  background-color: #FFF;
  border-color: #E5E3DF;
  color: #58585A; }
  .t-form-1.c-input:focus, .t-form-1.c-textarea:focus, .t-form-1.c-select:focus {
    border-bottom-color: #565F73;
    color: #000; }
  .t-form-1.c-input:-webkit-autofill, .t-form-1.c-textarea:-webkit-autofill, .t-form-1.c-select:-webkit-autofill {
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0 3.3333333333rem #FFF inset !important; }
.t-form-1 .u-char-before__item:after, .t-form-1 .u-char-after__item:after {
  color: #FF3111; }
.t-form-1.c-input::-webkit-input-placeholder, .t-form-1.c-textarea::-webkit-input-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-1.c-input:-moz-placeholder, .t-form-1.c-textarea:-moz-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-1.c-input::-moz-placeholder, .t-form-1.c-textarea::-moz-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-1.c-input:-ms-input-placeholder, .t-form-1.c-textarea:-ms-input-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-1 .c-field-toggle__input:checked + .c-field-toggle__text, .t-form-1 .c-field-toggle__input:checked + .c-field-toggle__label {
  color: #000; }
.t-form-1 .c-field-toggle__input:focus + .c-field-toggle__text, .t-form-1 .c-field-toggle__input:active + .c-field-toggle__text, .t-form-1 .c-field-toggle__input:active + .c-field-toggle__label {
  color: #3d3935; }
  .t-form-1 .c-field-toggle__input:focus + .c-field-toggle__text:before, .t-form-1 .c-field-toggle__input:active + .c-field-toggle__text:before, .t-form-1 .c-field-toggle__input:active + .c-field-toggle__label:before {
    border-color: #645E59; }
.t-form-1 .c-field-toggle__input[disabled]:checked + .c-field-toggle__text, .t-form-1 .c-field-toggle__input [disabled]:checked + .c-field-toggle__label {
  color: #E5E3DF; }
.t-form-1 .c-field-toggle__text, .t-form-1 .c-field-toggle__label {
  color: #333; }
  .t-form-1 .c-field-toggle__text:after, .t-form-1 .c-field-toggle__label:after {
    color: #3d3935; }
  .t-form-1 .c-field-toggle__text:before, .t-form-1 .c-field-toggle__label:before {
    background-color: #FFF;
    border-color: #E5E3DF; }
  .t-form-1 .c-field-toggle__text:hover, .t-form-1 .c-field-toggle__text:focus, .t-form-1 .c-field-toggle__label:hover, .t-form-1 .c-field-toggle__label:focus {
    color: #000; }
.t-form-1.c-input[disabled], .t-form-1 > .c-checkbox__input[disabled] + label:before, .t-form-1 > .c-radio__input[disabled] + label:before, .t-form-1.c-textarea[disabled], .t-form-1.c-select[disabled], .t-form-1.c-select > select[disabled][disabled], .t-form-1.c-radio > input[disabled] + label:before {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  cursor: not-allowed;
  opacity: .5; }
.t-form-1 > .c-checkbox__input[disabled] + label:after, .t-form-1 > .c-radio__input[disabled] + label:after {
  color: #b7b2a7; }
.t-form-1.u-light-light {
  color: #FFF; }
.t-form-1.c-input--output {
  color: #E5E3DF;
  border-bottom-color: rgba(0, 0, 0, 0.3); }

.t-form-2.c-label {
  color: #333; }
.t-form-2.c-input, .t-form-2.c-textarea, .t-form-2.c-select, .t-form-2.c-select > select {
  color: #E5E3DF; }
  .t-form-2.c-input:focus, .t-form-2.c-textarea:focus, .t-form-2.c-select:focus, .t-form-2.c-select > select:focus {
    color: #FFF; }
.t-form-2.c-input, .t-form-2.c-textarea, .t-form-2.c-select {
  background-color: #000;
  border-color: #FFF; }
.t-form-2.c-select option {
  color: #E5E3DF;
  background-color: #333; }
.t-form-2 .u-char-before__item:after, .t-form-2 .u-char-after__item:after {
  color: #E5E3DF; }
.t-form-2.c-input {
  text-indent: 0.625rem; }
.t-form-2.c-textarea {
  padding: 0.625rem; }
.t-form-2.c-input::-webkit-input-placeholder, .t-form-2.c-textarea::-webkit-input-placeholder {
  color: #E5E3DF; }
.t-form-2.c-input:-moz-placeholder, .t-form-2.c-textarea:-moz-placeholder {
  color: #E5E3DF; }
.t-form-2.c-input::-moz-placeholder, .t-form-2.c-textarea::-moz-placeholder {
  color: #E5E3DF; }
.t-form-2.c-input:-ms-input-placeholder, .t-form-2.c-textarea:-ms-input-placeholder {
  color: #E5E3DF; }
.t-form-2 .c-field-toggle__input:focus + .c-field-toggle__text, .t-form-2 .c-field-toggle__input:focus + .c-field-toggle__label {
  color: #3d3935; }
.t-form-2 .c-field-toggle__input:checked + .c-field-toggle__text, .t-form-2 .c-field-toggle__input:checked + .c-field-toggle__label {
  color: #000; }
.t-form-2 .c-field-toggle__input[disabled]:checked + .c-field-toggle__text, .t-form-2 .c-field-toggle__input[disabled]:checked + .c-field-toggle__label {
  color: #E5E3DF; }
.t-form-2 .c-field-toggle__text, .t-form-2 .c-field-toggle__label {
  color: currentColor; }
  .t-form-2 .c-field-toggle__text:after, .t-form-2 .c-field-toggle__label:after {
    color: #D1292E; }
  .t-form-2 .c-field-toggle__text:before, .t-form-2 .c-field-toggle__label:before {
    background-color: #333;
    border-color: transparent; }
  .t-form-2 .c-field-toggle__text:hover, .t-form-2 .c-field-toggle__text:focus, .t-form-2 .c-field-toggle__label:hover, .t-form-2 .c-field-toggle__label:focus {
    color: #000; }
.t-form-2.c-input[disabled], .t-form-2.c-textarea[disabled], .t-form-2.c-select[disabled], .t-form-2.c-select > select[disabled][disabled], .t-form-2.c-radio > input[disabled] + label:before {
  cursor: default;
  background-color: #333;
  opacity: .7;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
.t-form-2.c-input--output {
  color: #E5E3DF; }

.t-form-light.c-label {
  color: #3d3935; }
.t-form-light.c-select .c-select__text:after {
  color: #FFF; }
.t-form-light.c-select .c-select__text:active, .t-form-light.c-select .c-select__text:hover {
  color: #E5E3DF; }
.t-form-light.c-select .c-select__text:active {
  color: #FFF; }
.t-form-light.c-input, .t-form-light.c-textarea, .t-form-light.c-select {
  background-color: #FFF;
  border-color: #FFF;
  color: #111; }
  .t-form-light.c-input:focus, .t-form-light.c-textarea:focus, .t-form-light.c-select:focus {
    border-color: #FF3111;
    color: #B21B1F; }
.t-form-light .u-char-before__item:after, .t-form-light .u-char-after__item:after {
  color: #FFF; }
.t-form-light.c-input::-webkit-input-placeholder, .t-form-light.c-textarea::-webkit-input-placeholder {
  color: #D1292E;
  line-height: 1;
  vertical-align: middle; }
.t-form-light.c-input:-moz-placeholder, .t-form-light.c-textarea:-moz-placeholder {
  color: #D1292E;
  line-height: 1;
  vertical-align: middle; }
.t-form-light.c-input::-moz-placeholder, .t-form-light.c-textarea::-moz-placeholder {
  color: #D1292E;
  line-height: 1;
  vertical-align: middle; }
.t-form-light.c-input:-ms-input-placeholder, .t-form-light.c-textarea:-ms-input-placeholder {
  color: #D1292E;
  line-height: 1;
  vertical-align: middle; }
.t-form-light .c-field-toggle__input:checked + .c-field-toggle__text, .t-form-light .c-field-toggle__input:checked + .c-field-toggle__label {
  color: #000; }
.t-form-light .c-field-toggle__input:focus + .c-field-toggle__text, .t-form-light .c-field-toggle__input:active + .c-field-toggle__text, .t-form-light .c-field-toggle__input:active + .c-field-toggle__label {
  color: #3d3935; }
  .t-form-light .c-field-toggle__input:focus + .c-field-toggle__text:before, .t-form-light .c-field-toggle__input:active + .c-field-toggle__text:before, .t-form-light .c-field-toggle__input:active + .c-field-toggle__label:before {
    border-color: #645E59; }
.t-form-light .c-field-toggle__input[disabled]:checked + .c-field-toggle__text, .t-form-light .c-field-toggle__input [disabled]:checked + .c-field-toggle__label {
  color: #E5E3DF; }
.t-form-light .c-field-toggle__text, .t-form-light .c-field-toggle__label {
  color: #333; }
  .t-form-light .c-field-toggle__text:after, .t-form-light .c-field-toggle__label:after {
    color: #3d3935; }
  .t-form-light .c-field-toggle__text:before, .t-form-light .c-field-toggle__label:before {
    background-color: #FFF;
    border-color: #E5E3DF; }
  .t-form-light .c-field-toggle__text:hover, .t-form-light .c-field-toggle__text:focus, .t-form-light .c-field-toggle__label:hover, .t-form-light .c-field-toggle__label:focus {
    color: #000; }
.t-form-light.c-input[disabled], .t-form-light > .c-checkbox__input[disabled] + label:before, .t-form-light > .c-radio__input[disabled] + label:before, .t-form-light.c-textarea[disabled], .t-form-light.c-select[disabled], .t-form-light.c-select > select[disabled][disabled], .t-form-light.c-radio > input[disabled] + label:before {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  cursor: not-allowed;
  background-color: #cecac3;
  opacity: .7; }
.t-form-light > .c-checkbox__input[disabled] + label:after, .t-form-light > .c-radio__input[disabled] + label:after {
  color: #b7b2a7;
  text-shadow: 0 0.0555555556rem 0 rgba(255, 255, 255, 0.1), 0 -0.0555555556rem 0 rgba(0, 0, 0, 0.1); }
.t-form-light.u-light-light {
  color: #FFF; }
.t-form-light.c-input--output {
  color: #333; }

.t-form-dark.c-label {
  color: #3d3935; }
.t-form-dark.c-select .c-select__text:after {
  color: #D1292E; }
.t-form-dark.c-select .c-select__text:active, .t-form-dark.c-select .c-select__text:hover {
  color: #FF3111; }
.t-form-dark.c-select .c-select__text:active {
  color: #B21B1F; }
.t-form-dark.c-input, .t-form-dark.c-textarea, .t-form-dark.c-select {
  background-color: #E5E3DF;
  border-color: #E5E3DF;
  color: #111; }
  .t-form-dark.c-input:focus, .t-form-dark.c-textarea:focus, .t-form-dark.c-select:focus {
    border-color: #FF3111;
    color: #B21B1F; }
.t-form-dark .u-char-before__item:after, .t-form-dark .u-char-after__item:after {
  color: #FF3111; }
.t-form-dark.c-input::-webkit-input-placeholder, .t-form-dark.c-textarea::-webkit-input-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-dark.c-input:-moz-placeholder, .t-form-dark.c-textarea:-moz-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-dark.c-input::-moz-placeholder, .t-form-dark.c-textarea::-moz-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-dark.c-input:-ms-input-placeholder, .t-form-dark.c-textarea:-ms-input-placeholder {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #E5E3DF;
  line-height: 1;
  vertical-align: middle; }
.t-form-dark .c-field-toggle__input:checked + .c-field-toggle__text, .t-form-dark .c-field-toggle__input:checked + .c-field-toggle__label {
  color: #000; }
.t-form-dark .c-field-toggle__input:focus + .c-field-toggle__text, .t-form-dark .c-field-toggle__input:active + .c-field-toggle__text, .t-form-dark .c-field-toggle__input:active + .c-field-toggle__label {
  color: #3d3935; }
  .t-form-dark .c-field-toggle__input:focus + .c-field-toggle__text:before, .t-form-dark .c-field-toggle__input:active + .c-field-toggle__text:before, .t-form-dark .c-field-toggle__input:active + .c-field-toggle__label:before {
    border-color: #645E59; }
.t-form-dark .c-field-toggle__input[disabled]:checked + .c-field-toggle__text, .t-form-dark .c-field-toggle__input [disabled]:checked + .c-field-toggle__label {
  color: #E5E3DF; }
.t-form-dark .c-field-toggle__text, .t-form-dark .c-field-toggle__label {
  color: #333; }
  .t-form-dark .c-field-toggle__text:after, .t-form-dark .c-field-toggle__label:after {
    color: #3d3935; }
  .t-form-dark .c-field-toggle__text:before, .t-form-dark .c-field-toggle__label:before {
    background-color: #FFF;
    border-color: #E5E3DF; }
  .t-form-dark .c-field-toggle__text:hover, .t-form-dark .c-field-toggle__text:focus, .t-form-dark .c-field-toggle__label:hover, .t-form-dark .c-field-toggle__label:focus {
    color: #000; }
.t-form-dark.c-input[disabled], .t-form-dark > .c-checkbox__input[disabled] + label:before, .t-form-dark > .c-radio__input[disabled] + label:before, .t-form-dark.c-textarea[disabled], .t-form-dark.c-select[disabled], .t-form-dark.c-select > select[disabled][disabled], .t-form-dark.c-radio > input[disabled] + label:before {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  cursor: not-allowed;
  background-color: #cecac3;
  opacity: .7; }
.t-form-dark > .c-checkbox__input[disabled] + label:after, .t-form-dark > .c-radio__input[disabled] + label:after {
  color: #b7b2a7;
  text-shadow: 0 0.0555555556rem 0 rgba(255, 255, 255, 0.1), 0 -0.0555555556rem 0 rgba(0, 0, 0, 0.1); }
.t-form-dark.u-light-light {
  color: #FFF; }
.t-form-dark.c-input--output {
  color: #E5E3DF; }

.t-form-light.c-label {
  color: #FFF; }

.t-1 [class*="header"]:not(._reset), .t-light [class*="header"]:not(._reset) {
  color: #D1292E; }
  .t-1 [class*="header"]:not(._reset) + [class*="header"]:not(._reset), .t-light [class*="header"]:not(._reset) + [class*="header"]:not(._reset) {
    color: #3d3935; }
.t-1 a:not([class*="c-anchor--"]), .t-light a:not([class*="c-anchor--"]) {
  color: #D1292E; }
  .t-1 a:not([class*="c-anchor--"]):hover, .t-1 a:not([class*="c-anchor--"]):active, .t-1 a:not([class*="c-anchor--"]):focus, .t-light a:not([class*="c-anchor--"]):hover, .t-light a:not([class*="c-anchor--"]):active, .t-light a:not([class*="c-anchor--"]):focus {
    color: #1F1C19; }

.t-1 {
  color: #D1292E; }

.t-light {
  background-color: #FFF;
  color: #000; }
  .t-light p {
    color: #000; }

.t-2 {
  background-color: #645E59;
  color: #1F1C19; }
  .t-2 [class*="header"]:not(._reset) {
    color: #D1292E; }
    .t-2 [class*="header"]:not(._reset) + [class*="header"]:not(._reset) {
      color: #3d3935; }
  .t-2 a:not([class*="c-anchor--"]) {
    color: #D1292E; }
    .t-2 a:not([class*="c-anchor--"]):hover, .t-2 a:not([class*="c-anchor--"]):active, .t-2 a:not([class*="c-anchor--"]):focus {
      color: #000; }

.t-3, .t-dark {
  background-color: #B21B1F;
  color: #FFF; }

.t-4 [class*="-header"]:not(._reset) {
  color: #111; }
.t-4 [class*="-header"]:not(._reset) + [class*="header"]:not(._reset) {
  color: #A22223; }
.t-4 [class*="__main"]:not(._reset) {
  color: #111; }
.t-4 .button--tertiary:not([class*="u-"]) {
  color: #D1292E; }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Box-Shadow HTS
category: 6. Trumps > Extras
---

Adds `box-shadow`

*  Contains [Suffixcate](/#suffixcate) options

```demo.html
<div class="u-gutt-lg u-shadow">
	<div class="o-media__asset">
		<img src="http://placehold.it/50x50?text=Image" alt="Image">
	</div>
	<div class="o-media__main">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit debitis quasi nulla praesentium, veniam eius. Laborum beatae quod nihil laboriosam.
		</p>
	</div>
</div>
```

*/
.u-txt-shad, .u-text-shadow {
  text-shadow: 0.0555555556rem 0.0555555556rem 0.2777777778rem rgba(0, 0, 0, 0.15); }
  @media screen and (min-width: 47.5rem) {
    .u-txt-shad\@large, .u-text-shadow\@large {
      text-shadow: 0.0555555556rem 0.0555555556rem 0.2777777778rem rgba(0, 0, 0, 0.15); } }
  @media screen and (max-width: 47.5rem) {
    .u-txt-shad\@small, .u-text-shadow\@small {
      text-shadow: 0.0555555556rem 0.0555555556rem 0.2777777778rem rgba(0, 0, 0, 0.15); } }

.u-shadow, .u-shad, .u-box-shadow {
  border: 0.0555555556rem solid rgba(21, 59, 73, 0.45);
  box-shadow: 0rem 0rem 0.1111111111rem rgba(21, 59, 73, 0.3); }
  @media screen and (min-width: 47.5rem) {
    .u-shadow\@large, .u-shad\@large, .u-box-shadow\@large {
      border: 0.0555555556rem solid rgba(21, 59, 73, 0.45);
      box-shadow: 0rem 0rem 0.1111111111rem rgba(21, 59, 73, 0.3); } }
  @media screen and (max-width: 47.5rem) {
    .u-shadow\@small, .u-shad\@small, .u-box-shadow\@small {
      border: 0.0555555556rem solid rgba(21, 59, 73, 0.45);
      box-shadow: 0rem 0rem 0.1111111111rem rgba(21, 59, 73, 0.3); } }

.u-shadow-light {
  box-shadow: 0.1666666667rem 0.5555555556rem 0.8333333333rem rgba(0, 0, 0, 0.025); }
  @media screen and (min-width: 47.5rem) {
    .u-shadow-light\@large {
      box-shadow: 0.1666666667rem 0.5555555556rem 0.8333333333rem rgba(0, 0, 0, 0.025); } }
  @media screen and (max-width: 47.5rem) {
    .u-shadow-light\@small {
      box-shadow: 0.1666666667rem 0.5555555556rem 0.8333333333rem rgba(0, 0, 0, 0.025); } }

/*
---
head: <link rel="stylesheet" href="hometown-studios.css" />
name: Border Color HTS
category: 6. Trumps > Extras
---

Options for `border-color` CSS property, uses color from brand colors.

* `u-border--primary`: Primary color
* `u-border--primary-dark`: Primary color
* `u-border--primary-light`: Primary color
* `u-border--primary-accent`: Primary color
* `u-border--secondary`: Primary color
* `u-border--secondary-dark`: Primary color
* `u-border--secondary-light`: Primary color
* `u-border--secondary-accent`: Primary color
* `u-border--accent`: Primary color
* `u-border--accent-dark`: Primary color
* `u-border--accent-light`: Primary color
* `u-border--accent-accent`: Primary color
* `u-border--dark`: Dark color
* `u-border--dark-dark`: Dark color
* `u-border--dark-light`: Dark color
* `u-border--dark-accent`: Dark color
* `u-border--light`: Light color
* `u-border--light-dark`: Light color
* `u-border--light-light`: Light color
* `u-border--light-accent`: Light color

*/
.u-border--primary-dark {
  border-color: #B21B1F; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--primary-dark {
    border-color: #B21B1F; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--primary-dark {
    border-color: #B21B1F; } }
.u-border--primary {
  border-color: #D1292E; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--primary {
    border-color: #D1292E; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--primary {
    border-color: #D1292E; } }
.u-border--primary-light {
  border-color: #86A5B8; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--primary-light {
    border-color: #86A5B8; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--primary-light {
    border-color: #86A5B8; } }
.u-border--primary-accent {
  border-color: #FF3111; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--primary-accent {
    border-color: #FF3111; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--primary-accent {
    border-color: #FF3111; } }
.u-border--secondary-dark {
  border-color: #1F1C19; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--secondary-dark {
    border-color: #1F1C19; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--secondary-dark {
    border-color: #1F1C19; } }
.u-border--secondary {
  border-color: #3d3935; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--secondary {
    border-color: #3d3935; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--secondary {
    border-color: #3d3935; } }
.u-border--secondary-light {
  border-color: #645E59; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--secondary-light {
    border-color: #645E59; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--secondary-light {
    border-color: #645E59; } }
.u-border--secondary-accent {
  border-color: #565F73; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--secondary-accent {
    border-color: #565F73; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--secondary-accent {
    border-color: #565F73; } }
.u-border--accent-dark {
  border-color: #A22223; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--accent-dark {
    border-color: #A22223; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--accent-dark {
    border-color: #A22223; } }
.u-border--accent {
  border-color: #9ECEC9; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--accent {
    border-color: #9ECEC9; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--accent {
    border-color: #9ECEC9; } }
.u-border--accent-light {
  border-color: #E42021; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--accent-light {
    border-color: #E42021; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--accent-light {
    border-color: #E42021; } }
.u-border--accent-accent {
  border-color: #FF3111; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--accent-accent {
    border-color: #FF3111; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--accent-accent {
    border-color: #FF3111; } }
.u-border--dark-dark {
  border-color: #000; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--dark-dark {
    border-color: #000; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--dark-dark {
    border-color: #000; } }
.u-border--dark {
  border-color: #333; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--dark {
    border-color: #333; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--dark {
    border-color: #333; } }
.u-border--dark-light {
  border-color: #111; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--dark-light {
    border-color: #111; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--dark-light {
    border-color: #111; } }
.u-border--dark-accent {
  border-color: #58585A; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--dark-accent {
    border-color: #58585A; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--dark-accent {
    border-color: #58585A; } }
.u-border--light-dark {
  border-color: #E5E3DF; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--light-dark {
    border-color: #E5E3DF; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--light-dark {
    border-color: #E5E3DF; } }
.u-border--light {
  border-color: #E5E3DF; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--light {
    border-color: #E5E3DF; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--light {
    border-color: #E5E3DF; } }
.u-border--light-light {
  border-color: #FFF; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--light-light {
    border-color: #FFF; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--light-light {
    border-color: #FFF; } }
.u-border--light-accent {
  border-color: #E4EEF4; }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--light-accent {
    border-color: #E4EEF4; } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--light-accent {
    border-color: #E4EEF4; } }
.u-border--light-gradient-dark {
  border-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--light-gradient-dark {
    border-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--light-gradient-dark {
    border-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%); } }
.u-border--alpha-90 {
  border-color: rgba(255, 255, 255, 0.9); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-90 {
    border-color: rgba(255, 255, 255, 0.9); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-90 {
    border-color: rgba(255, 255, 255, 0.9); } }
.u-border--alpha-80 {
  border-color: rgba(255, 255, 255, 0.7); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-80 {
    border-color: rgba(255, 255, 255, 0.7); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-80 {
    border-color: rgba(255, 255, 255, 0.7); } }
.u-border--alpha-75 {
  border-color: rgba(255, 255, 255, 0.75); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-75 {
    border-color: rgba(255, 255, 255, 0.75); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-75 {
    border-color: rgba(255, 255, 255, 0.75); } }
.u-border--alpha-70 {
  border-color: rgba(255, 255, 255, 0.7); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-70 {
    border-color: rgba(255, 255, 255, 0.7); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-70 {
    border-color: rgba(255, 255, 255, 0.7); } }
.u-border--alpha-50 {
  border-color: rgba(255, 255, 255, 0.5); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-50 {
    border-color: rgba(255, 255, 255, 0.5); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-50 {
    border-color: rgba(255, 255, 255, 0.5); } }
.u-border--alpha-40 {
  border-color: rgba(255, 255, 255, 0.4); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-40 {
    border-color: rgba(255, 255, 255, 0.4); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-40 {
    border-color: rgba(255, 255, 255, 0.4); } }
.u-border--alpha-30 {
  border-color: rgba(255, 255, 255, 0.3); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-30 {
    border-color: rgba(255, 255, 255, 0.3); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-30 {
    border-color: rgba(255, 255, 255, 0.3); } }
.u-border--alpha-20 {
  border-color: rgba(255, 255, 255, 0.2); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-20 {
    border-color: rgba(255, 255, 255, 0.2); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-20 {
    border-color: rgba(255, 255, 255, 0.2); } }
.u-border--alpha-10 {
  border-color: rgba(255, 255, 255, 0.1); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-10 {
    border-color: rgba(255, 255, 255, 0.1); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-10 {
    border-color: rgba(255, 255, 255, 0.1); } }
.u-border--alpha-dark-90 {
  border-color: rgba(0, 0, 0, 0.9); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-90 {
    border-color: rgba(0, 0, 0, 0.9); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-90 {
    border-color: rgba(0, 0, 0, 0.9); } }
.u-border--alpha-dark-80 {
  border-color: rgba(0, 0, 0, 0.8); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-80 {
    border-color: rgba(0, 0, 0, 0.8); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-80 {
    border-color: rgba(0, 0, 0, 0.8); } }
.u-border--alpha-dark-75 {
  border-color: rgba(0, 0, 0, 0.75); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-75 {
    border-color: rgba(0, 0, 0, 0.75); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-75 {
    border-color: rgba(0, 0, 0, 0.75); } }
.u-border--alpha-dark-70 {
  border-color: rgba(0, 0, 0, 0.7); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-70 {
    border-color: rgba(0, 0, 0, 0.7); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-70 {
    border-color: rgba(0, 0, 0, 0.7); } }
.u-border--alpha-dark-50 {
  border-color: rgba(0, 0, 0, 0.5); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-50 {
    border-color: rgba(0, 0, 0, 0.5); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-50 {
    border-color: rgba(0, 0, 0, 0.5); } }
.u-border--alpha-dark-40 {
  border-color: rgba(0, 0, 0, 0.4); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-40 {
    border-color: rgba(0, 0, 0, 0.4); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-40 {
    border-color: rgba(0, 0, 0, 0.4); } }
.u-border--alpha-dark-30 {
  border-color: rgba(0, 0, 0, 0.3); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-30 {
    border-color: rgba(0, 0, 0, 0.3); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-30 {
    border-color: rgba(0, 0, 0, 0.3); } }
.u-border--alpha-dark-20 {
  border-color: rgba(0, 0, 0, 0.2); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-20 {
    border-color: rgba(0, 0, 0, 0.2); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-20 {
    border-color: rgba(0, 0, 0, 0.2); } }
.u-border--alpha-dark-10 {
  border-color: rgba(0, 0, 0, 0.1); }
@media screen and (min-width: 47.5rem) {
  .u-border\@large--alpha-dark-10 {
    border-color: rgba(0, 0, 0, 0.1); } }
@media screen and (max-width: 47.5rem) {
  .u-border\@small--alpha-dark-10 {
    border-color: rgba(0, 0, 0, 0.1); } }

/*! v0.0.0 || 2018-02-14 XX:XX */
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
#root .c-block-offer__asset {
  padding: 2.5rem; }
#root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
  border: 0.0555555556rem solid;
  overflow: hidden;
  outline: none; }
  #root .c-button--form-btn > span, #root .c-button--unverified > span, #root [class*="c-button--age-gate"] > span, #root .c-button--refresh > span, #root .c-button--redeem > span, #root .c-button--detail-toggle > span, #root .c-button--upload > span {
    line-height: 1; }
#root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
  min-width: 10.1785714286rem; }
#root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-transform: uppercase; }
  @media screen and (min-width: 76.25rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
    font-size: 1.222rem; } }

  @media screen and (min-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-right: 1.25rem; } }
  @media screen and (max-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-right: 0.625rem; } }
  @media screen and (min-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-left: 1.25rem; } }
  @media screen and (max-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-left: 0.625rem; } }
  #root .c-button--form-btn:active > span, #root .c-button--unverified:active > span, #root [class*="c-button--age-gate"]:active > span, #root .c-button--refresh:active > span, #root .c-button--redeem:active > span, #root .c-button--detail-toggle:active > span, #root .c-button--upload:active > span {
    -webkit-transform: translate(0.0277777778rem, 0.0833333333rem);
            transform: translate(0.0277777778rem, 0.0833333333rem); }
#root .c-button--form-btn, #root .c-button--unverified, #root .c-button--redeem {
  background-color: #D1292E;
  color: #FFF;
  border-color: #B21B1F; }
  #root .c-button--form-btn:hover, #root .c-button--unverified:hover, #root .c-button--redeem:hover, #root .c-button--form-btn:focus, #root .c-button--unverified:focus, #root .c-button--redeem:focus {
    background-color: #FF3111;
    color: #FFF; }
  #root .c-button--form-btn:active, #root .c-button--unverified:active, #root .c-button--redeem:active {
    background-color: #B21B1F;
    color: #FFF; }
  #root [disabled].c-button--form-btn, #root [disabled].c-button--unverified, #root [disabled].c-button--redeem, #root [disabled].c-button--form-btn:hover, #root [disabled].c-button--unverified:hover, #root [disabled].c-button--redeem:hover, #root [disabled].c-button--form-btn:focus, #root [disabled].c-button--unverified:focus, #root [disabled].c-button--redeem:focus, #root [disabled].c-button--form-btn:active, #root [disabled].c-button--unverified:active, #root [disabled].c-button--redeem:active, #root .-disabled.c-button--form-btn, #root .-disabled.c-button--unverified, #root .-disabled.c-button--redeem {
    background-color: #bea2a3 !important;
    border-color: #bea2a3 !important; }
#root .c-button--refresh {
  border-color: #3d3935;
  background-color: #3d3935;
  color: #FFF; }
  #root .c-button--refresh:hover, #root .c-button--refresh:focus {
    background-color: #645E59;
    color: #FFF;
    border-color: #3d3935; }
  #root .c-button--refresh:active {
    background-color: #565F73;
    color: #FFF; }
  #root [disabled].c-button--refresh, #root [disabled].c-button--refresh:hover, #root [disabled].c-button--refresh:focus, #root [disabled].c-button--refresh:active, #root .-disabled.c-button--refresh {
    background-color: #6c6c6c !important;
    border-color: #6c6c6c !important; }
#root .c-button--detail-toggle, #root .c-button--upload {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: currentColor; }
  #root .c-button--detail-toggle:hover, #root .c-button--upload:hover, #root .c-button--detail-toggle:focus, #root .c-button--upload:focus {
    background-color: currentColor; }
    #root .c-button--detail-toggle:hover > span, #root .c-button--upload:hover > span, #root .c-button--detail-toggle:focus > span, #root .c-button--upload:focus > span {
      color: #FFF; }
  #root .c-button--detail-toggle:active, #root .c-button--upload:active {
    background-color: currentColor; }
    #root .c-button--detail-toggle:active > span, #root .c-button--upload:active > span {
      color: #FFF; }
  #root [disabled].c-button--detail-toggle, #root [disabled].c-button--upload, #root [disabled].c-button--detail-toggle:hover, #root [disabled].c-button--upload:hover, #root [disabled].c-button--detail-toggle:focus, #root [disabled].c-button--upload:focus, #root [disabled].c-button--detail-toggle:active, #root [disabled].c-button--upload:active, #root .-disabled.c-button--detail-toggle, #root .-disabled.c-button--upload {
    -webkit-filter: opacity(20%) grayscale(70%);
            filter: opacity(20%) grayscale(70%); }
#root .c-button--age-gate-yes, #root .c-button--age-gate-no {
  background-color: currentColor;
  border-color: #FFF; }
  #root .c-button--age-gate-yes > span, #root .c-button--age-gate-no > span {
    color: #FFF; }
  #root .c-button--age-gate-yes:hover, #root .c-button--age-gate-no:hover, #root .c-button--age-gate-yes:focus, #root .c-button--age-gate-no:focus {
    background-color: white;
    border-color: currentColor; }
    #root .c-button--age-gate-yes:hover > span, #root .c-button--age-gate-no:hover > span, #root .c-button--age-gate-yes:focus > span, #root .c-button--age-gate-no:focus > span {
      color: currentColor; }
  #root .c-button--age-gate-yes:active, #root .c-button--age-gate-no:active {
    background-color: white;
    border-color: currentColor; }
    #root .c-button--age-gate-yes:active > span, #root .c-button--age-gate-no:active > span {
      color: currentColor; }
  #root [disabled].c-button--age-gate-yes, #root [disabled].c-button--age-gate-no, #root [disabled].c-button--age-gate-yes:hover, #root [disabled].c-button--age-gate-no:hover, #root [disabled].c-button--age-gate-yes:focus, #root [disabled].c-button--age-gate-no:focus, #root [disabled].c-button--age-gate-yes:active, #root [disabled].c-button--age-gate-no:active, #root .-disabled.c-button--age-gate-yes, #root .-disabled.c-button--age-gate-no {
    -webkit-filter: opacity(20%) grayscale(70%);
            filter: opacity(20%) grayscale(70%); }
#root .c-anchor--nav-cta, #root .c-anchor--offers-in, #root .c-anchor--nav-footer, #root .c-anchor--nav-header, #root .c-anchor--forgot, #root .c-anchor--create, #root .c-anchor--password-toggle, #root .c-anchor--verify-number {
  text-decoration: none; }
#root .c-anchor--nav-cta, #root .c-anchor--offers-in, #root .c-anchor--nav-header, #root .c-anchor--forgot, #root .c-anchor--create, #root .c-anchor--password-toggle {
  color: #D1292E; }
  #root .c-anchor--nav-cta:hover, #root .c-anchor--offers-in:hover, #root .c-anchor--nav-header:hover, #root .c-anchor--forgot:hover, #root .c-anchor--create:hover, #root .c-anchor--password-toggle:hover, #root .c-anchor--nav-cta:focus, #root .c-anchor--offers-in:focus, #root .c-anchor--nav-header:focus, #root .c-anchor--forgot:focus, #root .c-anchor--create:focus, #root .c-anchor--password-toggle:focus {
    color: #FF3111; }
  #root .c-anchor--nav-cta:active, #root .c-anchor--offers-in:active, #root .c-anchor--nav-header:active, #root .c-anchor--forgot:active, #root .c-anchor--create:active, #root .c-anchor--password-toggle:active {
    color: #B21B1F; }
#root .c-anchor--nav-footer {
  color: #FFF; }
  #root .c-anchor--nav-footer:hover, #root .c-anchor--nav-footer:focus {
    color: #E4EEF4; }
  #root .c-anchor--nav-footer:active {
    color: #E4EEF4; }
#root .c-anchor--verify-number {
  color: #333; }
  #root .c-anchor--verify-number:hover, #root .c-anchor--verify-number:focus {
    color: #58585A; }
  #root .c-anchor--verify-number:active {
    color: #000; }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta--located-in {
    color: #333; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta--located-in {
    color: #FFF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt, #root .c-nav-cta__txt--alt {
    color: #333; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt, #root .c-nav-cta__txt--alt {
    color: #FFF; } }
#root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
  font-size: 0.938rem;
  font-family: Georgia, sans-serif;
  font-weight: normal; }
  @media screen and (min-width: 47.5rem) {
    #root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
      color: #333; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
      color: #FFF; } }
#root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
  font-size: 1rem;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      color: #D1292E; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
    #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      font-size: 2rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
    font-size: 2.6229508197vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
    font-size: 1.444rem; } }

@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta--located-in, #root .c-nav-cta:active .c-nav-cta--located-in {
    color: #000; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta--located-in, #root .c-nav-cta:active .c-nav-cta--located-in {
    color: #E5E3DF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #000; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #E5E3DF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__details, #root .c-nav-cta:active .c-nav-cta__details {
    color: #000; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__details, #root .c-nav-cta:active .c-nav-cta__details {
    color: #E5E3DF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #FF3111; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #E5E3DF; } }
#root button.c-anchor--nav-header {
  background-color: transparent;
  outline: none;
  border: 0; }
  @media screen and (max-width: 47.5rem) {
    #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      display: block;
      text-align: left;
      width: 100%; } }
  #root button.c-anchor--nav-header .c-nav-cta__details {
    font-weight: 700; }
#root [class*="c-button--age-gate"] {
  color: #D1292E; }
#root [class*="c-button--age-gate"].c-button--age-gate-yes, #root [class*="c-button--age-gate"].c-button--age-gate-no {
  min-width: 7.9166666667rem; }
#root .c-button--detail-toggle {
  color: #565F73; }
#root .c-anchor--forgot, #root .c-anchor--create {
  text-transform: uppercase; }
#root .c-button--upload {
  color: #D1292E; }
@media screen and (max-width: 47.5rem) {
  #root .c-primary-nav__cta.c-header-nav__cta {
    color: #3d3935; }
    #root .c-primary-nav__cta.c-header-nav__cta:hover, #root .c-primary-nav__cta.c-header-nav__cta:focus {
      color: #565F73; }
    #root .c-primary-nav__cta.c-header-nav__cta:active {
      color: #1F1C19; } }
#root #viewing-offers-in, #root .c-footer .o-flex__align-self-end {
  display: none; }
#root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome, #root html:not([data-page='offers']) .c-typography--screen-header, #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner, #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title, #root .c-header-page-status {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  @media screen and (min-width: 76.25rem) {
    #root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
      font-size: 20rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 38.125rem) {
  #root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
    font-size: 26.2295081967vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 38.125rem) {
  #root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
    font-size: 10rem; } }

  @media screen and (min-width: 76.25rem) {
    #root html:not([data-page='offers']) .c-typography--screen-header {
      font-size: 4rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 50.0390625rem) {
  #root html:not([data-page='offers']) .c-typography--screen-header {
    font-size: 5.2459016393vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 50.0390625rem) {
  #root html:not([data-page='offers']) .c-typography--screen-header {
    font-size: 2.625rem; } }

  @media screen and (min-width: 76.25rem) {
    #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
      font-size: 2rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
    font-size: 2.6229508197vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
    font-size: 1.444rem; } }

  @media screen and (min-width: 76.25rem) {
    #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
      font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
    font-size: 1.222rem; } }

#root .c-subtext--product-details {
  font-size: 1rem; }
  @media screen and (min-width: 76.25rem) {
    #root .c-subtext--submission-offer-details {
      font-size: 1rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 76.25rem) {
  #root .c-subtext--submission-offer-details {
    font-size: 1.3114754098vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 76.25rem) {
  #root .c-subtext--submission-offer-details {
    font-size: 1rem; } }

#root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome, #root html:not([data-page='offers']) .c-typography--screen-header, #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner, #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title, #root .c-header-page-status {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
#root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
  font-family: "JustLovely", sans-serif;
  font-weight: 700;
  line-height: .62; }
#root html:not([data-page='offers']) .c-typography--screen-header {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: .85;
  letter-spacing: 0.125em;
  text-transform: uppercase; }
#root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-typography--form-legend, #root .c-typography--submisson-product-name {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-header-page-status {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-header-page-status {
  font-size: 0.938rem; }
#root html:not([data-page='offers']) .c-typography--screen-header {
  padding-top: 7.0277777778rem; }
#root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span {
  color: #111; }
#root [data-page='offers'] .c-typography--screen-header {
  padding-top: 7.0277777778rem; }
#root [data-page='offers'] .c-subtext .c-subtext--conditions h4 span {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #111; }
#root .c-tout-inline {
  display: block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  font-size: 0.875rem; }
#root .c-footer__nav {
  font-size: 0.875rem; }
@media screen and (min-width: 47.5rem) {
  #root .c-footer-nav__group {
    font-size: 0.938rem; } }
#root .c-typography--form-legend {
  color: #1F1C19; }
#root .c-typography--welcome {
  color: #E5E3DF; }
  @media screen and (min-width: 76.25rem) {
    #root .c-typography--welcome {
      font-size: 20rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 38.125rem) {
  #root .c-typography--welcome {
    font-size: 26.2295081967vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 38.125rem) {
  #root .c-typography--welcome {
    font-size: 10rem; } }

#root .c-typography--where {
  color: #3d3935; }
#root .c-typography--location-services {
  color: #3d3935; }
#root .c-subtext--highlighted {
  color: #3d3935; }
#root .c-typography--product-name {
  color: #D1292E; }
#root .c-typography--product-name-inner {
  color: #B21B1F; }
#root .c-subtext--product-details {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  color: #645E59;
  text-transform: uppercase; }
#root .c-subtext--saving-header, #root .c-subtext--remaining-header, #root .c-subtext--remaining-subheader {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase; }
#root .c-subtext--saving-header {
  color: #B21B1F; }
  #root .c-subtext--saving-header > span {
    font-size: 0.875em; }
#root .c-subtext--saving-subheader {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 1.556rem;
  margin-top: -0.25rem;
  color: #B21B1F; }
#root .c-subtext--remaining-header > span, #root .c-subtext--remaining-subheader > span {
  font-size: 0.875em; }
#root .c-subtext--remaining-header {
  color: #FF3111; }
#root .c-subtext--remaining-subheader {
  color: #333;
  margin-top: -0.3125rem; }
#root .c-subtext--conditions h4 {
  font-weight: 700; }
  #root .c-subtext--conditions h4 > span {
    font-size: 0.938rem;
    font-family: "AlternateGothicPro-No3", sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #58585A; }
#root .c-subtext--conditions p {
  font-size: 0.875rem; }
#root .c-subtext--offerid {
  font-size: 0.875rem;
  color: #333; }
#root .c-product-details__content-inner .c-subtext--offerid {
  color: #645E59;
  font-family: Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: bold; }
#root .c-subtext--toggle-cta {
  font-size: 0.938rem;
  font-weight: 700;
  text-transform: capitalize; }
#root .c-typography--redeem-amnt {
  color: #E42021; }
#root .c-subtext--redeem-product-name {
  color: #3d3935;
  font-weight: 700;
  font-size: 1rem; }
#root .c-typography--redeem-form-actions {
  color: #000; }
#root .c-typography--submission {
  color: #3d3935; }
#root .c-typography--submisson-product-name {
  color: #D1292E; }
#root .c-typography--verify {
  color: #3d3935; }
#root .c-typography--create-account {
  color: #D1292E; }
#root .c-typography--edit-account {
  color: #3d3935; }
#root .c-typography--password {
  color: #3d3935; }
#root #root-core {
  background-color: #B21B1F; }
#root .c-page__main {
  background-color: #FFF;
  color: #000; }
#root .c-page__footer {
  background-color: #D1292E;
  color: #FFF; }
#root .u-border-sections > * + * {
  border-top-color: #645E59; }
#root .c-header {
  background-color: #FFF;
  border-bottom: 1px solid #D1292E; }
  #root .c-header:before {
    background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    #root .c-header {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-header__brand {
      background-color: #FFF;
      color: #000;
      border-top: 0.1111111111rem solid #D1292E;
      border-bottom: 0.0555555556rem solid #E5E3DF;
      position: fixed;
      top: 0; } }
@media screen and (max-width: 47.5rem) {
  #root .c-header-nav {
    background-color: #D1292E;
    color: #FFF; } }
@media screen and (max-width: 47.5rem) {
  #root .c-header-nav__group + #root .c-header-nav__group {
    border-top: 0.0555555556rem solid #B21B1F; } }
#root .u-bg-welcome-screen {
  background-color: #D1292E;
  color: #FFF; }
  #root .u-bg-welcome-screen .u-border-sections > * {
    border-color: #86A5B8; }
  #root .u-bg-welcome-screen .u-border-1 {
    border-top-color: rgba(255, 255, 255, 0.3); }
#root .c-block-offer .u-border {
  border-color: #E5E3DF; }
#root .c-page-status {
  background-color: #565F73; }
  #root .c-page-status .c-header-page-status, #root .c-page-status .c-icon-btn span {
    color: #FFF; }
@media screen and (max-width: 47.5rem) {
  #root .c-page-content__main .c-page-status {
    position: fixed;
    top: 3.3333333333rem;
    width: 100%; }
    #root .c-page-content__main .c-page-status:before {
      content: "";
      display: block;
      background-color: #86A5B8;
      width: 100%;
      height: 20vh;
      position: absolute;
      top: 0;
      -webkit-transform: translateY(calc(-100% + 2px));
              transform: translateY(calc(-100% + 2px)); }
    #root .c-page-content__main .c-page-status + * {
      margin-top: 2.2222222222rem; } }
@media screen and (min-width: 47.5rem) {
  #root .c-offer-list__item {
    margin-bottom: 2.2222222222rem; } }
@media screen and (max-width: 47.5rem) {
  #root .c-offer-list__item + .c-offer-list__item {
    margin-top: 1.6666666667rem; } }
#root [data-page="editprofile"] #currentPassword.c-input[type="password"][required]:valid:not(:placeholder-shown) {
  border-bottom-color: #E5E3DF; }
#root .c-form-item {
  position: relative; }
#root .c-form-item__label[data-value] {
  position: relative; }
  #root .c-form-item__label[data-value]:before {
    content: attr(data-value);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.3888888889rem;
    text-align: center;
    overflow: hidden;
    position: absolute;
    right: 2.2222222222rem;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    z-index: 0;
    text-indent: 2.2222222222rem;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    text-transform: none; }
  #root .c-form-item__label[data-value] + .c-form-item__field, #root .c-form-item__label[data-value] + .c-form-item__field select {
    color: transparent;
    background-color: transparent; }
  #root .c-form-item__label[data-value] + * select {
    position: relative;
    z-index: 2;
    height: 40px; }
#root .c-intro-section {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-bottom: 1px solid #E5E3DF; }
  #root .c-intro-section .c-paragraph-header {
    padding-right: 1.25rem;
    padding-left: 1.25rem; }
#root [data-page="offers"] .c-intro-section {
  background-image: url("/images/bg-offers.png"); }

#browseProducts .container {
  width: auto;
  max-width: 100vw; }

@charset "UTF-8";
/*! v1.0.2 || 2018-12-18 12:36 */
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: To String 
category: 1. Tools > Functions
---

Casting to a string has to be the easiest type of all thanks to the brand new inspect function from Sass 3.3 which does exactly that: casting to string.

It works with anything, even lists and maps. However it does some color conversions (hsl being converted to rgb and things like that) so if it’s important for you that the result of to-string is precisely the same as the input, you might want to opt for a proof quoting function instead. Same if you are running Sass 3.2 which doesn’t support inspect.

Another way to cast to string without quoting is adding an unquoted empty string to the value like this `$value + unquote("")` however it has two pitfalls:

* it doesn’t work with `null`: throws `Invalid null operation: "null plus """`.
* it doesn’t make maps displayble as CSS values: still throws `"(a: 1, b: 2) isn't a valid CSS value."`


Source/Credit: [https://hugogiraudel.com/2014/01/27/casting-types-in-sass/](https://hugogiraudel.com/2014/01/27/casting-types-in-sass/) - More casting available here too!


Usage:

```
	to-string(value);
```

*/
/*
---
name: String Replace
category: 1. Tools > Functions
---

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

Source/Credit: [https://css-tricks.com/snippets/sass/str-replace-function/](https://css-tricks.com/snippets/sass/str-replace-function/)

Replace `$search` with `$replace` in `$string`

* @author Hugo Giraudel
* @param {String} $string - Initial string
* @param {String} $search - Substring to replace
* @param {String} $replace ('') - New value
* @return {String} - Updated string


Usage:

```
.selector-name {
	$string: 'The answer to life the universe and everything is 42.';
	content: str-replace($string, 'e', 'xoxo');
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
/*
---
name: String to Number
category: 1. Tools > Functions
---

Casts a string into a number.

Source/Credit: [http://sassmeister.com/gist/9fa19d254864f33d4a80](http://sassmeister.com/gist/9fa19d254864f33d4a80)

* @param {String | Number} $value - Value to be parsed
* @return {Number}


Usage:

```
@function foo(param: $some-string-that-may-not-be-a-number) {
	@return to-number(unquote("param"));
}
```

*/
#root address {
  font-style: normal;
  font-size: 1em;
  padding: 0; }
#root .o-flex-2-1-50 {
  flex-basis: 50%;
  flex: 2 1 50%; }
  @media screen and (min-width: 47.5rem) {
    #root .o-flex-2-1-50\@large {
      flex-basis: 50%;
      flex: 2 1 50%; } }
  @media screen and (max-width: 47.5rem) {
    #root .o-flex-2-1-50\@small {
      flex-basis: 50%;
      flex: 2 1 50%; } }
#root .o-flex-basis-1-of-3, #root .o-flex-basis-33 {
  flex-basis: 33.3333333333%; }
  @media screen and (min-width: 47.5rem) {
    #root .o-flex-basis-1-of-3\@large, #root .o-flex-basis-33\@large {
      flex-basis: 33.3333333333%; } }
  @media screen and (max-width: 47.5rem) {
    #root .o-flex-basis-1-of-3\@small, #root .o-flex-basis-33\@small {
      flex-basis: 33.3333333333%; } }
#root .o-flex-basis-50 {
  flex-basis: 50%; }
  @media screen and (min-width: 47.5rem) {
    #root .o-flex-basis-50\@large {
      flex-basis: 50%; } }
  @media screen and (max-width: 47.5rem) {
    #root .o-flex-basis-50\@small {
      flex-basis: 50%; } }
#root .o-flex-basis-100 {
  flex-basis: 100%; }
  @media screen and (min-width: 47.5rem) {
    #root .o-flex-basis-100\@large {
      flex-basis: 100%; } }
  @media screen and (max-width: 47.5rem) {
    #root .o-flex-basis-100\@small {
      flex-basis: 100%; } }
#root .o-flex-50 {
  flex-basis: 50%; }
  @media screen and (min-width: 47.5rem) {
    #root .o-flex-50\@large {
      flex-basis: 50%; } }
  @media screen and (max-width: 47.5rem) {
    #root .o-flex-50\@small {
      flex-basis: 50%; } }
#root .c-form-item__validation {
  max-height: 0;
  transition: 0.28s;
  overflow: hidden;
  will-change: max-height;
  display: inline-block; }
#root .c-validation-msg {
  font-size: 0.875rem;
  color: #990000;
  line-height: 1.5; }
#root .c-input[type="text"][required]:invalid:not(:placeholder-shown), #root .c-input[type="email"][required]:invalid:not(:placeholder-shown), #root .c-input[type="password"][required]:invalid:not(:placeholder-shown) {
  border-bottom-color: #FF3111; }
#root .c-input[type="text"][required]:invalid:focus ~ .c-form-item__validation, #root .c-input[type="text"][required]:invalid:not(:placeholder-shown) ~ .c-form-item__validation, #root .c-input[type="email"][required]:invalid:focus ~ .c-form-item__validation, #root .c-input[type="email"][required]:invalid:not(:placeholder-shown) ~ .c-form-item__validation, #root .c-input[type="password"][required]:invalid:focus ~ .c-form-item__validation, #root .c-input[type="password"][required]:invalid:not(:placeholder-shown) ~ .c-form-item__validation {
  max-height: 200px; }
#root .c-input[type="text"][required]:placeholder-shown, #root .c-input[type="email"][required]:placeholder-shown, #root .c-input[type="password"][required]:placeholder-shown {
  border-bottom-color: #E5E3DF; }
#root .c-input[type="text"][required]:focus, #root .c-input[type="text"][required]:focus:placeholder-shown, #root .c-input[type="email"][required]:focus, #root .c-input[type="email"][required]:focus:placeholder-shown, #root .c-input[type="password"][required]:focus, #root .c-input[type="password"][required]:focus:placeholder-shown {
  border-bottom-color: #1F1C19; }
#root .c-input[type="text"][required]:valid:not(:placeholder-shown), #root .c-input[type="email"][required]:valid:not(:placeholder-shown), #root .c-input[type="password"][required]:valid:not(:placeholder-shown) {
  border-bottom-color: #7ED321; }
#root html, #root .js-offer-details-expanded.offer-details-expanded {
  width: 100vw; }
#root .c-tout-inline--success {
  border-color: transparent;
  color: #333; }
  #root .c-tout-inline--success > span:before {
    color: #417505; }
#root .c-tout-inline--error {
  border-color: transparent;
  color: #FF3111; }
  #root .c-tout-inline--error > span:before {
    color: #990000; }
#root .c-tout-inline__msg {
  color: #417505;
  text-decoration: underline; }
#root .c-tout--success {
  border-color: #7ED321;
  color: #333; }
  #root .c-tout--success > span:before {
    color: #417505; }
#root .c-tout[class*="--error"] {
  background-color: #FF3111;
  color: #FFF; }
#root .c-tout[class*="--success"] {
  background-color: #7ED321;
  color: #FFF; }
#root .c-tout:not([class*="--success"]):not([class*="--error"]) {
  background-color: #9ECEC9;
  color: #FFF; }
@font-face {
  #root {
    font-family: 'BLOKK';
    src: url("https://s3.amazonaws.com/ohlq.bybeapp.com/assets/fonts/BLOKKNeue-Regular.woff2") format("woff");
    font-weight: normal;
    font-style: normal; } }
@-webkit-keyframes fadeoutloadingoffer {
  from {
    opacity: .3; }
  to {
    opacity: .75; } }
@keyframes fadeoutloadingoffer {
  from {
    opacity: .3; }
  to {
    opacity: .75; } }
#root .c-block-offer--loading, #root .c-block-offer--loading *, #root .c-block-offer--loading :before, #root .c-block-offer--loading :after, #root .c-block-offer--redeemed {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  speak: none;
  cursor: default; }
#root .c-block-offer--loading, #root .c-block-offer--loading *, #root .c-block-offer--loading :before, #root .c-block-offer--loading :after {
  font-family: "BLOKK" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #DDD !important;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }
  #root .c-block-offer--loading img {
    display: none; }
#root .c-block-offer__asset {
  padding: 2.5rem; }
#root .c-block-offer__redeem-cta {
  position: relative;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
#root .c-block-offer--loading {
  opacity: .3;
  animation: fadeoutloadingoffer 1000s ease-in-out 0ms infinite alternate-reverse;
  will-change: opacity; }
  #root .c-block-offer--loading *, #root .c-block-offer--loading * *, #root .c-block-offer--loading *:before, #root .c-block-offer--loading *:after {
    -webkit-animation: none;
            animation: none; }
  #root .c-block-offer--loading .c-block-offer__asset {
    background-color: #EEE; }
  #root .c-block-offer--loading .c-button {
    background-color: #CCC;
    border-color: transparent; }
  #root .c-block-offer--loading .c-block-offer__product-name, #root .c-block-offer--loading .c-block-offer__product-details {
    font-size: 0; }
  #root .c-block-offer--loading .c-block-offer__product-name {
    content: "Promo name"; }
    @media screen and (min-width: 76.25rem) {
      #root .c-block-offer--loading .c-block-offer__product-name {
        font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  #root .c-block-offer--loading .c-block-offer__product-name {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  #root .c-block-offer--loading .c-block-offer__product-name {
    font-size: 1.222rem; } }

  #root .c-block-offer--loading .c-block-offer__product-details {
    font-size: 0.5555555556rem;
    content: "Details on the offer"; }
  #root .c-block-offer--loading .c-product-details__cta {
    background-color: #F9F9F9;
    border-color: transparent; }
    #root .c-block-offer--loading .c-product-details__cta > span:after {
      display: none; }
  #root .c-block-offer--loading .c-button--default:active > span {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
#root .c-block-offer--redeemed .c-block-offer__header {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%); }
#root .c-block-offer--redeemed .c-block-offer__asset {
  position: relative;
  overflow: hidden; }
  #root .c-block-offer--redeemed .c-block-offer__asset:before {
    content: "Redeemed";
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    position: absolute;
    top: 1.1111111111rem;
    left: -1.9444444444rem;
    z-index: 1;
    -webkit-transform-origin: 0, 0;
            transform-origin: 0, 0;
    background-color: #B21B1F;
    color: #FFF;
    font-family: "AlternateGothicPro-No3", sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: 0.938rem;
    text-align: center;
    padding: 0.2222222222rem 2.2222222222rem; }
#root .c-block-offer--redeemed img {
  -webkit-filter: grayscale(90%) opacity(50%);
          filter: grayscale(90%) opacity(50%); }
#root .c-block-offer--redeemed .c-block-offer__redeem-cta, #root .c-block-offer--redeemed .c-remaining-amount, #root .c-block-offer--redeemed .c-product-details__content-inner .c-content-block__footer .c-button {
  visibility: hidden;
  speak: none; }
#root .c-block-offer--redeemed .c-product-details__cta > span {
  font-size: 0;
  speak: none; }
  #root .c-block-offer--redeemed .c-product-details__cta > span:before {
    content: "You claimed this offer";
    font-size: 0.938rem;
    speak: normal; }
#root .c-disbursement-status-group__item + #root .c-disbursement-status-group__item {
  margin-top: -1px; }
#root .c-status-item__details[aria-hidden='true'], #root .c-status-item__details[data-a11y-toggle]:not([aria-controls]) {
  display: none; }
#root .c-status-item__cta {
  position: relative; }
  #root .c-status-item__cta:before {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8333333333rem; }
    @media screen and (min-width: 25.556rem) {
      #root .c-status-item__cta:before {
        margin: 1.25rem; } }
    @media screen and (max-width: 25.556rem) {
      #root .c-status-item__cta:before {
        margin: 0.625rem; } }
  #root .c-status-item__cta[aria-expanded="true"]:before {
    content: "-"; }
#root .c-status-item__title {
  padding-right: 1.6666666667rem; }
#root .c-status-item__offers-details {
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid; }
#root .c-status-item__asset {
  padding-bottom: 177.6363636364%;
  overflow: hidden; }
#root .c-status-item__image:first-child {
  right: 1.25rem;
  left: 1.25rem;
  width: calc(100% - 2.5rem); }
#root .c-status-item__image + #root .c-status-item__image {
  -webkit-filter: blur(0.25rem) grayscale(40%);
          filter: blur(0.25rem) grayscale(40%);
  opacity: .6; }
#root .c-status-item--pending {
  background-color: rgba(228, 32, 33, 0.2);
  color: #333;
  border-color: #FF3111; }
#root .c-status-item--approved {
  background-color: rgba(126, 211, 33, 0.1);
  color: #333;
  border-color: #7ED321; }
#root .c-status-item--declined {
  background-color: rgba(134, 165, 184, 0.2);
  color: #333;
  border-color: #D1292E; }
#root .c-product-details__cta > span {
  display: block;
  position: relative;
  padding-left: 1.1111111111rem;
  padding-right: 1.1111111111rem;
  letter-spacing: 0.02em; }
#root .c-product-details__cta[aria-expanded="true"] > span:after {
  content: "-"; }
#root .c-product-details__content {
  font-family: 'Georgia', serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0; }
  @media screen and (max-width: 47.5rem) {
    #root .c-product-details__content {
      background-color: rgba(229, 227, 223, 0.3);
      color: #333; } }
#root .c-product-details__content:not([aria-hidden="false"]) {
  display: none;
  speak: none; }
@media screen and (min-width: 47.5rem) {
  #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"], #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; } }
@media screen and (min-width: 47.5rem) {
  #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] {
    z-index: 201;
    height: 3.3333333333rem; }
    #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] > span:after {
      content: "x";
      display: flex;
      width: 1.6666666667rem;
      height: 1.6666666667rem;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      background-color: #D1292E;
      color: #FFF; }
    #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"]:hover > span:after, #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"]:focus > span:after {
      background-color: #A22223; } }
@media screen and (min-width: 47.5rem) {
  #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content {
    bottom: 0;
    z-index: 200;
    background-color: rgba(255, 255, 255, 0.98) !important; }
    #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content > div {
      height: 100vh;
      position: relative; }
    #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content .c-product-details__content-inner {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100vw;
      overflow: auto;
      -webkit-overflow-scrolling: touch; }
      #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content .c-product-details__content-inner .c-content-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100%;
        margin-top: 3.3333333333rem;
        margin-right: auto;
        margin-left: auto;
        max-width: 35.625rem; }
        #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content .c-product-details__content-inner .c-content-block > * {
          width: 100%; }
    #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content .c-article-header-scalable {
      color: #3d3935; }
    #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content .c-paragraph-header {
      color: #333; }
      #root .js-offer-details-expanded.offer-details-expanded .c-product-details__cta[data-toggled="true"] + .c-product-details__content .c-paragraph-header + p {
        color: #645E59;
        font-size: 0.688rem;
        font-family: Arial, sans-serif;
        font-weight: 300; } }
@media screen and (min-width: 19.8888888889rem) {
  #root .c-radio-select-holder__radio-select + #root .c-radio-select-holder__radio-select {
    margin-left: -1px; } }
@media screen and (max-width: 19.8888888889rem) {
  #root .c-radio-select-holder {
    flex-wrap: wrap; }
    #root .c-radio-select-holder__radio-select + #root .c-radio-select-holder__radio-select {
      margin-top: -1px; } }
#root .c-radio-select__input, #root .c-file-upload__input {
  visibility: hidden;
  margin: 0;
  opacity: 0;
  width: 0; }
#root .c-radio-select {
  display: flex;
  align-items: center; }
  #root .c-radio-select__label {
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1292E;
    padding: 0.3125rem 0.625rem;
    min-width: 2.2222222222rem;
    min-height: 2.2222222222rem;
    position: relative;
    z-index: 0;
    color: #D1292E; }
    #root .c-radio-select__label:hover {
      color: #B21B1F; }
  #root .c-radio-select__input:checked + label {
    background-color: #D1292E;
    z-index: 1; }
  #root .c-radio-select__input:focus + label, #root .c-radio-select__input:checked + label {
    color: #FFF; }
#root .c-file-upload__input {
  position: absolute; }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
    position: absolute;
    top: -3125rem;
    left: -3125rem;
    font-size: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: none; } }
@media screen and (min-width: 47.5rem) {
  #root .c-offer-list {
    display: flex;
    width: 100%;
    justify-content: center; } }
@media screen and (min-width: 47.5rem) and (min-width: 53.75rem) {
  #root .c-offer-list__item {
    flex-basis: 33.3333333333%; } }
@media screen and (min-width: 47.5rem) and (max-width: 53.75rem) {
  #root .c-offer-list__item {
    flex-basis: 50%; } }

#root .c-menu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  background-color: transparent;
  color: #D1292E;
  outline: none;
  font-size: 1.6666666667rem;
  max-height: 3.0555555556rem;
  overflow: hidden; }
  #root .c-menu-btn:hover, #root .c-menu-btn:focus {
    color: #B21B1F; }
  #root .c-menu-btn:active:before {
    -webkit-transform: translate(1px, 0.1111111111rem);
            transform: translate(1px, 0.1111111111rem);
    position: relative;
    display: block; }
#root .c-page__inner {
  width: 100vw; }
#root .c-page__tout {
  position: fixed;
  right: 0;
  left: 0;
  text-align: center; }
  @media screen and (min-width: 47.5rem) {
    #root .c-page__tout {
      top: 0;
      z-index: 4; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-page__tout {
      top: 3.3333333333rem;
      z-index: 1; } }
  #root .c-page__tout .c-tout__header {
    padding-top: 0.625rem; }
  #root .c-page__tout .c-tout__msg {
    padding-bottom: 0.625rem; }
  #root .c-page__tout .c-icon-btn {
    position: absolute;
    top: -1.2222222222rem;
    right: -1.2222222222rem;
    cursor: pointer; }
  #root .c-page__tout[aria-hidden='true'], #root .c-page__tout[data-a11y-toggle]:not([aria-controls]) {
    display: none; }
#root .c-page__header {
  position: relative;
  z-index: 2; }
#root .c-page__footer {
  position: relative;
  z-index: 0;
  margin-top: auto; }
#root .c-page-content__main {
  padding-bottom: 2.5rem; }
#root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
  border: 0.0555555556rem solid;
  overflow: hidden;
  outline: none; }
  #root .c-button--form-btn > span, #root .c-button--unverified > span, #root [class*="c-button--age-gate"] > span, #root .c-button--refresh > span, #root .c-button--redeem > span, #root .c-button--detail-toggle > span, #root .c-button--upload > span {
    line-height: 1; }
#root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
  min-width: 10.1785714286rem; }
#root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-transform: uppercase; }
  @media screen and (min-width: 76.25rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
    font-size: 1.222rem; } }

  @media screen and (min-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-right: 1.25rem; } }
  @media screen and (max-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-right: 0.625rem; } }
  @media screen and (min-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-left: 1.25rem; } }
  @media screen and (max-width: 25.556rem) {
    #root .c-button--form-btn, #root .c-button--unverified, #root [class*="c-button--age-gate"], #root .c-button--refresh, #root .c-button--redeem, #root .c-button--detail-toggle, #root .c-button--upload {
      padding-left: 0.625rem; } }
  #root .c-button--form-btn:active > span, #root .c-button--unverified:active > span, #root [class*="c-button--age-gate"]:active > span, #root .c-button--refresh:active > span, #root .c-button--redeem:active > span, #root .c-button--detail-toggle:active > span, #root .c-button--upload:active > span {
    -webkit-transform: translate(0.0277777778rem, 0.0833333333rem);
            transform: translate(0.0277777778rem, 0.0833333333rem); }
#root .c-button--form-btn, #root .c-button--unverified, #root .c-button--redeem {
  background-color: #D1292E;
  color: #FFF;
  border-color: #B21B1F; }
  #root .c-button--form-btn:hover, #root .c-button--unverified:hover, #root .c-button--redeem:hover, #root .c-button--form-btn:focus, #root .c-button--unverified:focus, #root .c-button--redeem:focus {
    background-color: #FF3111;
    color: #FFF; }
  #root .c-button--form-btn:active, #root .c-button--unverified:active, #root .c-button--redeem:active {
    background-color: #B21B1F;
    color: #FFF; }
  #root [disabled].c-button--form-btn, #root [disabled].c-button--unverified, #root [disabled].c-button--redeem, #root [disabled].c-button--form-btn:hover, #root [disabled].c-button--unverified:hover, #root [disabled].c-button--redeem:hover, #root [disabled].c-button--form-btn:focus, #root [disabled].c-button--unverified:focus, #root [disabled].c-button--redeem:focus, #root [disabled].c-button--form-btn:active, #root [disabled].c-button--unverified:active, #root [disabled].c-button--redeem:active, #root .-disabled.c-button--form-btn, #root .-disabled.c-button--unverified, #root .-disabled.c-button--redeem {
    background-color: #bea2a3 !important;
    border-color: #bea2a3 !important; }
#root .c-button--refresh {
  border-color: #3d3935;
  background-color: #3d3935;
  color: #FFF; }
  #root .c-button--refresh:hover, #root .c-button--refresh:focus {
    background-color: #645E59;
    color: #FFF;
    border-color: #3d3935; }
  #root .c-button--refresh:active {
    background-color: #565F73;
    color: #FFF; }
  #root [disabled].c-button--refresh, #root [disabled].c-button--refresh:hover, #root [disabled].c-button--refresh:focus, #root [disabled].c-button--refresh:active, #root .-disabled.c-button--refresh {
    background-color: #6c6c6c !important;
    border-color: #6c6c6c !important; }
#root .c-button--detail-toggle, #root .c-button--upload {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: currentColor; }
  #root .c-button--detail-toggle:hover, #root .c-button--upload:hover, #root .c-button--detail-toggle:focus, #root .c-button--upload:focus {
    background-color: currentColor; }
    #root .c-button--detail-toggle:hover > span, #root .c-button--upload:hover > span, #root .c-button--detail-toggle:focus > span, #root .c-button--upload:focus > span {
      color: #FFF; }
  #root .c-button--detail-toggle:active, #root .c-button--upload:active {
    background-color: currentColor; }
    #root .c-button--detail-toggle:active > span, #root .c-button--upload:active > span {
      color: #FFF; }
  #root [disabled].c-button--detail-toggle, #root [disabled].c-button--upload, #root [disabled].c-button--detail-toggle:hover, #root [disabled].c-button--upload:hover, #root [disabled].c-button--detail-toggle:focus, #root [disabled].c-button--upload:focus, #root [disabled].c-button--detail-toggle:active, #root [disabled].c-button--upload:active, #root .-disabled.c-button--detail-toggle, #root .-disabled.c-button--upload {
    -webkit-filter: opacity(20%) grayscale(70%);
            filter: opacity(20%) grayscale(70%); }
#root .c-button--age-gate-yes, #root .c-button--age-gate-no {
  background-color: currentColor;
  border-color: #FFF; }
  #root .c-button--age-gate-yes > span, #root .c-button--age-gate-no > span {
    color: #FFF; }
  #root .c-button--age-gate-yes:hover, #root .c-button--age-gate-no:hover, #root .c-button--age-gate-yes:focus, #root .c-button--age-gate-no:focus {
    background-color: white;
    border-color: currentColor; }
    #root .c-button--age-gate-yes:hover > span, #root .c-button--age-gate-no:hover > span, #root .c-button--age-gate-yes:focus > span, #root .c-button--age-gate-no:focus > span {
      color: currentColor; }
  #root .c-button--age-gate-yes:active, #root .c-button--age-gate-no:active {
    background-color: white;
    border-color: currentColor; }
    #root .c-button--age-gate-yes:active > span, #root .c-button--age-gate-no:active > span {
      color: currentColor; }
  #root [disabled].c-button--age-gate-yes, #root [disabled].c-button--age-gate-no, #root [disabled].c-button--age-gate-yes:hover, #root [disabled].c-button--age-gate-no:hover, #root [disabled].c-button--age-gate-yes:focus, #root [disabled].c-button--age-gate-no:focus, #root [disabled].c-button--age-gate-yes:active, #root [disabled].c-button--age-gate-no:active, #root .-disabled.c-button--age-gate-yes, #root .-disabled.c-button--age-gate-no {
    -webkit-filter: opacity(20%) grayscale(70%);
            filter: opacity(20%) grayscale(70%); }
#root .c-anchor--nav-cta, #root .c-anchor--offers-in, #root .c-anchor--nav-footer, #root .c-anchor--nav-header, #root .c-anchor--forgot, #root .c-anchor--create, #root .c-anchor--password-toggle, #root .c-anchor--verify-number {
  text-decoration: none; }
#root .c-anchor--nav-cta, #root .c-anchor--offers-in, #root .c-anchor--nav-header, #root .c-anchor--forgot, #root .c-anchor--create, #root .c-anchor--password-toggle {
  color: #D1292E; }
  #root .c-anchor--nav-cta:hover, #root .c-anchor--offers-in:hover, #root .c-anchor--nav-header:hover, #root .c-anchor--forgot:hover, #root .c-anchor--create:hover, #root .c-anchor--password-toggle:hover, #root .c-anchor--nav-cta:focus, #root .c-anchor--offers-in:focus, #root .c-anchor--nav-header:focus, #root .c-anchor--forgot:focus, #root .c-anchor--create:focus, #root .c-anchor--password-toggle:focus {
    color: #FF3111; }
  #root .c-anchor--nav-cta:active, #root .c-anchor--offers-in:active, #root .c-anchor--nav-header:active, #root .c-anchor--forgot:active, #root .c-anchor--create:active, #root .c-anchor--password-toggle:active {
    color: #B21B1F; }
#root .c-anchor--nav-footer {
  color: #FFF; }
  #root .c-anchor--nav-footer:hover, #root .c-anchor--nav-footer:focus {
    color: #E4EEF4; }
  #root .c-anchor--nav-footer:active {
    color: #E4EEF4; }
#root .c-anchor--verify-number {
  color: #333; }
  #root .c-anchor--verify-number:hover, #root .c-anchor--verify-number:focus {
    color: #58585A; }
  #root .c-anchor--verify-number:active {
    color: #000; }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta--located-in {
    color: #333; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta--located-in {
    color: #FFF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt, #root .c-nav-cta__txt--alt {
    color: #333; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt, #root .c-nav-cta__txt--alt {
    color: #FFF; } }
#root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
  font-size: 0.938rem;
  font-family: Georgia, sans-serif;
  font-weight: normal; }
  @media screen and (min-width: 47.5rem) {
    #root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
      color: #333; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-nav-cta__details, #root button.c-anchor--nav-header .c-nav-cta__details {
      color: #FFF; } }
#root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
  font-size: 1rem;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.5rem) {
    #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      color: #D1292E; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      color: #FFF; } }
  @media screen and (max-width: 47.5rem) and (min-width: 76.25rem) {
    #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      font-size: 2rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
    font-size: 2.6229508197vw; } }
@media screen and (max-width: 47.5rem) and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  #root .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
    font-size: 1.444rem; } }

@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta--located-in, #root .c-nav-cta:active .c-nav-cta--located-in {
    color: #000; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta--located-in, #root .c-nav-cta:active .c-nav-cta--located-in {
    color: #E5E3DF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #000; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #E5E3DF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__details, #root .c-nav-cta:active .c-nav-cta__details {
    color: #000; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__details, #root .c-nav-cta:active .c-nav-cta__details {
    color: #E5E3DF; } }
@media screen and (min-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #FF3111; } }
@media screen and (max-width: 47.5rem) {
  #root .c-nav-cta:hover .c-nav-cta__txt, #root .c-nav-cta:hover button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:hover .c-nav-cta__txt--alt, #root .c-nav-cta:active .c-nav-cta__txt, #root .c-nav-cta:active button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta:active .c-nav-cta__txt--alt {
    color: #E5E3DF; } }
#root button.c-anchor--nav-header {
  background-color: transparent;
  outline: none;
  border: 0; }
  @media screen and (max-width: 47.5rem) {
    #root button.c-anchor--nav-header .c-nav-cta__txt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt, #root button.c-anchor--nav-header .c-nav-cta__txt--alt {
      display: block;
      text-align: left;
      width: 100%; } }
  #root button.c-anchor--nav-header .c-nav-cta__details {
    font-weight: 700; }
#root [class*="c-button--age-gate"] {
  color: #D1292E; }
#root [class*="c-button--age-gate"].c-button--age-gate-yes, #root [class*="c-button--age-gate"].c-button--age-gate-no {
  min-width: 7.9166666667rem; }
#root .c-button--detail-toggle {
  color: #565F73; }
#root .c-anchor--forgot, #root .c-anchor--create {
  text-transform: uppercase; }
#root .c-button--upload {
  color: #D1292E; }
@media screen and (max-width: 47.5rem) {
  #root .c-primary-nav__cta.c-header-nav__cta {
    color: #3d3935; }
    #root .c-primary-nav__cta.c-header-nav__cta:hover, #root .c-primary-nav__cta.c-header-nav__cta:focus {
      color: #565F73; }
    #root .c-primary-nav__cta.c-header-nav__cta:active {
      color: #1F1C19; } }
#root #viewing-offers-in, #root .c-footer .o-flex__align-self-end {
  display: none; }
#root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome, #root html:not([data-page='offers']) .c-typography--screen-header, #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner, #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title, #root .c-header-page-status {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  @media screen and (min-width: 76.25rem) {
    #root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
      font-size: 20rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 38.125rem) {
  #root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
    font-size: 26.2295081967vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 38.125rem) {
  #root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
    font-size: 10rem; } }

  @media screen and (min-width: 76.25rem) {
    #root html:not([data-page='offers']) .c-typography--screen-header {
      font-size: 4rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 50.0390625rem) {
  #root html:not([data-page='offers']) .c-typography--screen-header {
    font-size: 5.2459016393vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 50.0390625rem) {
  #root html:not([data-page='offers']) .c-typography--screen-header {
    font-size: 2.625rem; } }

  @media screen and (min-width: 76.25rem) {
    #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
      font-size: 2rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 55.0525rem) {
  #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
    font-size: 2.6229508197vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 55.0525rem) {
  #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
    font-size: 1.444rem; } }

  @media screen and (min-width: 76.25rem) {
    #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
      font-size: 1.556rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 59.8827120823rem) {
  #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
    font-size: 2.0406557377vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 59.8827120823rem) {
  #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
    font-size: 1.222rem; } }

#root .c-subtext--product-details {
  font-size: 1rem; }
  @media screen and (min-width: 76.25rem) {
    #root .c-subtext--submission-offer-details {
      font-size: 1rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 76.25rem) {
  #root .c-subtext--submission-offer-details {
    font-size: 1.3114754098vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 76.25rem) {
  #root .c-subtext--submission-offer-details {
    font-size: 1rem; } }

#root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome, #root html:not([data-page='offers']) .c-typography--screen-header, #root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner, #root .c-typography--form-legend, #root .c-typography--submisson-product-name, #root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title, #root .c-header-page-status {
  font-kerning: normal;
  -webkit-font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
#root [data-page='offers'] .c-typography--screen-header, #root .c-typography--welcome {
  font-family: "JustLovely", sans-serif;
  font-weight: 700;
  line-height: .62; }
#root html:not([data-page='offers']) .c-typography--screen-header {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: .85;
  letter-spacing: 0.125em;
  text-transform: uppercase; }
#root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span, #root .c-typography--product-name, #root .c-typography--product-name-inner {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-typography--form-legend, #root .c-typography--submisson-product-name {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-label, #root .c-typography--age-msg, #root .c-typography--redeem-amnt, #root .c-typography--redeem-form-actions, #root .c-typography--submission-amount, #root .c-typography--submission-title {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-header-page-status {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase; }
#root .c-header-page-status {
  font-size: 0.938rem; }
#root html:not([data-page='offers']) .c-typography--screen-header {
  padding-top: 4.5833333333rem; }
#root html:not([data-page='offers']) .c-subtext .c-subtext--conditions h4 span {
  color: #111; }
#root [data-page='offers'] .c-typography--screen-header {
  padding-top: 4.5833333333rem; }
#root [data-page='offers'] .c-subtext .c-subtext--conditions h4 span {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #111; }
#root .c-tout-inline {
  display: block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  font-size: 0.875rem; }
#root .c-footer__nav {
  font-size: 0.875rem; }
@media screen and (min-width: 47.5rem) {
  #root .c-footer-nav__group {
    font-size: 0.938rem; } }
#root .c-typography--form-legend {
  color: #1F1C19; }
#root .c-typography--welcome {
  color: #E5E3DF; }
  @media screen and (min-width: 76.25rem) {
    #root .c-typography--welcome {
      font-size: 20rem; } }
@media screen and (max-width: 76.25rem) and (min-width: 38.125rem) {
  #root .c-typography--welcome {
    font-size: 26.2295081967vw; } }
@media screen and (max-width: 76.25rem) and (max-width: 38.125rem) {
  #root .c-typography--welcome {
    font-size: 10rem; } }

#root .c-typography--where {
  color: #3d3935; }
#root .c-typography--location-services {
  color: #3d3935; }
#root .c-subtext--highlighted {
  color: #3d3935; }
#root .c-typography--product-name {
  color: #D1292E; }
#root .c-typography--product-name-inner {
  color: #B21B1F; }
#root .c-subtext--product-details {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  color: #645E59;
  text-transform: uppercase; }
#root .c-subtext--saving-header, #root .c-subtext--remaining-header, #root .c-subtext--remaining-subheader {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase; }
#root .c-subtext--saving-header {
  color: #B21B1F; }
  #root .c-subtext--saving-header > span {
    font-size: 0.875em; }
#root .c-subtext--saving-subheader {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 1.556rem;
  margin-top: -0.25rem;
  color: #B21B1F; }
#root .c-subtext--remaining-header > span, #root .c-subtext--remaining-subheader > span {
  font-size: 0.875em; }
#root .c-subtext--remaining-header {
  color: #FF3111; }
#root .c-subtext--remaining-subheader {
  color: #333;
  margin-top: -0.3125rem; }
#root .c-subtext--conditions h4 {
  font-weight: 700; }
  #root .c-subtext--conditions h4 > span {
    font-size: 0.938rem;
    font-family: "AlternateGothicPro-No3", sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #58585A; }
#root .c-subtext--conditions p {
  font-size: 0.875rem; }
#root .c-subtext--offerid {
  font-size: 0.875rem;
  color: #333; }
#root .c-product-details__content-inner .c-subtext--offerid {
  color: #645E59;
  font-family: Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: bold; }
#root .c-subtext--toggle-cta {
  font-size: 0.938rem;
  font-weight: 700;
  text-transform: capitalize; }
#root .c-typography--redeem-amnt {
  color: #E42021; }
#root .c-subtext--redeem-product-name {
  color: #3d3935;
  font-weight: 700;
  font-size: 1rem; }
#root .c-typography--redeem-form-actions {
  color: #000; }
#root .c-typography--submission {
  color: #3d3935; }
#root .c-typography--submisson-product-name {
  color: #D1292E; }
#root .c-typography--verify {
  color: #3d3935; }
#root .c-typography--create-account {
  color: #D1292E; }
#root .c-typography--edit-account {
  color: #3d3935; }
#root .c-typography--password {
  color: #3d3935; }
#root .u-border-sections > * + * {
  border-top: 1px solid; }
#root .u-border-sections--primary-dark > * + * {
  border-top-color: #B21B1F !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--primary-dark\@large > * + * {
    border-top-color: #B21B1F !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--primary-dark\@small > * + * {
    border-top-color: #B21B1F !important; } }
#root .u-border-sections--primary > * + * {
  border-top-color: #D1292E !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--primary\@large > * + * {
    border-top-color: #D1292E !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--primary\@small > * + * {
    border-top-color: #D1292E !important; } }
#root .u-border-sections--primary-light > * + * {
  border-top-color: #86A5B8 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--primary-light\@large > * + * {
    border-top-color: #86A5B8 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--primary-light\@small > * + * {
    border-top-color: #86A5B8 !important; } }
#root .u-border-sections--primary-accent > * + * {
  border-top-color: #FF3111 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--primary-accent\@large > * + * {
    border-top-color: #FF3111 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--primary-accent\@small > * + * {
    border-top-color: #FF3111 !important; } }
#root .u-border-sections--secondary-dark > * + * {
  border-top-color: #1F1C19 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--secondary-dark\@large > * + * {
    border-top-color: #1F1C19 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--secondary-dark\@small > * + * {
    border-top-color: #1F1C19 !important; } }
#root .u-border-sections--secondary > * + * {
  border-top-color: #3d3935 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--secondary\@large > * + * {
    border-top-color: #3d3935 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--secondary\@small > * + * {
    border-top-color: #3d3935 !important; } }
#root .u-border-sections--secondary-light > * + * {
  border-top-color: #645E59 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--secondary-light\@large > * + * {
    border-top-color: #645E59 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--secondary-light\@small > * + * {
    border-top-color: #645E59 !important; } }
#root .u-border-sections--secondary-accent > * + * {
  border-top-color: #565F73 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--secondary-accent\@large > * + * {
    border-top-color: #565F73 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--secondary-accent\@small > * + * {
    border-top-color: #565F73 !important; } }
#root .u-border-sections--accent-dark > * + * {
  border-top-color: #A22223 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--accent-dark\@large > * + * {
    border-top-color: #A22223 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--accent-dark\@small > * + * {
    border-top-color: #A22223 !important; } }
#root .u-border-sections--accent > * + * {
  border-top-color: #9ECEC9 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--accent\@large > * + * {
    border-top-color: #9ECEC9 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--accent\@small > * + * {
    border-top-color: #9ECEC9 !important; } }
#root .u-border-sections--accent-light > * + * {
  border-top-color: #E42021 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--accent-light\@large > * + * {
    border-top-color: #E42021 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--accent-light\@small > * + * {
    border-top-color: #E42021 !important; } }
#root .u-border-sections--accent-accent > * + * {
  border-top-color: #FF3111 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--accent-accent\@large > * + * {
    border-top-color: #FF3111 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--accent-accent\@small > * + * {
    border-top-color: #FF3111 !important; } }
#root .u-border-sections--dark-dark > * + * {
  border-top-color: #000 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--dark-dark\@large > * + * {
    border-top-color: #000 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--dark-dark\@small > * + * {
    border-top-color: #000 !important; } }
#root .u-border-sections--dark > * + * {
  border-top-color: #333 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--dark\@large > * + * {
    border-top-color: #333 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--dark\@small > * + * {
    border-top-color: #333 !important; } }
#root .u-border-sections--dark-light > * + * {
  border-top-color: #111 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--dark-light\@large > * + * {
    border-top-color: #111 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--dark-light\@small > * + * {
    border-top-color: #111 !important; } }
#root .u-border-sections--dark-accent > * + * {
  border-top-color: #58585A !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--dark-accent\@large > * + * {
    border-top-color: #58585A !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--dark-accent\@small > * + * {
    border-top-color: #58585A !important; } }
#root .u-border-sections--light-dark > * + * {
  border-top-color: #E5E3DF !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--light-dark\@large > * + * {
    border-top-color: #E5E3DF !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--light-dark\@small > * + * {
    border-top-color: #E5E3DF !important; } }
#root .u-border-sections--light > * + * {
  border-top-color: #E5E3DF !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--light\@large > * + * {
    border-top-color: #E5E3DF !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--light\@small > * + * {
    border-top-color: #E5E3DF !important; } }
#root .u-border-sections--light-light > * + * {
  border-top-color: #FFF !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--light-light\@large > * + * {
    border-top-color: #FFF !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--light-light\@small > * + * {
    border-top-color: #FFF !important; } }
#root .u-border-sections--light-accent > * + * {
  border-top-color: #E4EEF4 !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--light-accent\@large > * + * {
    border-top-color: #E4EEF4 !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--light-accent\@small > * + * {
    border-top-color: #E4EEF4 !important; } }
#root .u-border-sections--light-gradient-dark > * + * {
  border-top-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--light-gradient-dark\@large > * + * {
    border-top-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--light-gradient-dark\@small > * + * {
    border-top-color: linear-gradient(to right, #6d839f 0%, rgba(109, 131, 159, 0.92) 40%, rgba(109, 131, 159, 0.1) 80%, rgba(109, 131, 159, 0) 100%) !important; } }
#root .u-border-sections--alpha-90 > * + * {
  border-top-color: rgba(255, 255, 255, 0.9) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-90\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.9) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-90\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.9) !important; } }
#root .u-border-sections--alpha-80 > * + * {
  border-top-color: rgba(255, 255, 255, 0.7) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-80\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.7) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-80\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.7) !important; } }
#root .u-border-sections--alpha-75 > * + * {
  border-top-color: rgba(255, 255, 255, 0.75) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-75\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.75) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-75\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.75) !important; } }
#root .u-border-sections--alpha-70 > * + * {
  border-top-color: rgba(255, 255, 255, 0.7) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-70\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.7) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-70\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.7) !important; } }
#root .u-border-sections--alpha-50 > * + * {
  border-top-color: rgba(255, 255, 255, 0.5) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-50\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.5) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-50\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.5) !important; } }
#root .u-border-sections--alpha-40 > * + * {
  border-top-color: rgba(255, 255, 255, 0.4) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-40\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.4) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-40\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.4) !important; } }
#root .u-border-sections--alpha-30 > * + * {
  border-top-color: rgba(255, 255, 255, 0.3) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-30\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.3) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-30\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.3) !important; } }
#root .u-border-sections--alpha-20 > * + * {
  border-top-color: rgba(255, 255, 255, 0.2) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-20\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.2) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-20\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.2) !important; } }
#root .u-border-sections--alpha-10 > * + * {
  border-top-color: rgba(255, 255, 255, 0.1) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-10\@large > * + * {
    border-top-color: rgba(255, 255, 255, 0.1) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-10\@small > * + * {
    border-top-color: rgba(255, 255, 255, 0.1) !important; } }
#root .u-border-sections--alpha-dark-90 > * + * {
  border-top-color: rgba(0, 0, 0, 0.9) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-90\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.9) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-90\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.9) !important; } }
#root .u-border-sections--alpha-dark-80 > * + * {
  border-top-color: rgba(0, 0, 0, 0.8) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-80\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.8) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-80\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.8) !important; } }
#root .u-border-sections--alpha-dark-75 > * + * {
  border-top-color: rgba(0, 0, 0, 0.75) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-75\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.75) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-75\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.75) !important; } }
#root .u-border-sections--alpha-dark-70 > * + * {
  border-top-color: rgba(0, 0, 0, 0.7) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-70\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.7) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-70\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.7) !important; } }
#root .u-border-sections--alpha-dark-50 > * + * {
  border-top-color: rgba(0, 0, 0, 0.5) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-50\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.5) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-50\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.5) !important; } }
#root .u-border-sections--alpha-dark-40 > * + * {
  border-top-color: rgba(0, 0, 0, 0.4) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-40\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.4) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-40\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.4) !important; } }
#root .u-border-sections--alpha-dark-30 > * + * {
  border-top-color: rgba(0, 0, 0, 0.3) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-30\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.3) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-30\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.3) !important; } }
#root .u-border-sections--alpha-dark-20 > * + * {
  border-top-color: rgba(0, 0, 0, 0.2) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-20\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.2) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-20\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.2) !important; } }
#root .u-border-sections--alpha-dark-10 > * + * {
  border-top-color: rgba(0, 0, 0, 0.1) !important; }
@media screen and (min-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-10\@large > * + * {
    border-top-color: rgba(0, 0, 0, 0.1) !important; } }
@media screen and (max-width: 47.5rem) {
  #root .u-border-sections--alpha-dark-10\@small > * + * {
    border-top-color: rgba(0, 0, 0, 0.1) !important; } }
#root .u-blade-bg {
  position: relative;
  overflow: hidden; }
  #root .u-blade-bg:before, #root .u-blade-bg:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%; }
  #root .u-blade-bg:after {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 3.3333333333rem rgba(255, 255, 255, 0.05) inset;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1; }
  #root .u-blade-bg:before {
    background: rgba(255, 255, 255, 0.11);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow: 0 0 1.1111111111rem rgba(0, 0, 0, 0.05);
    height: 150%;
    top: -70%;
    right: -25%;
    left: -25%;
    z-index: 0;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  #root .u-blade-bg--reverse:before {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    background: rgba(255, 255, 255, 0.22); }
  #root .u-blade-bg--reverse:after {
    background: rgba(255, 255, 255, 0.11); }
  #root .u-blade-bg > * {
    position: relative;
    z-index: 2; }
#root .u-shadow-bg {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 60%, rgba(0, 0, 0, 0.1) 100%);
  background-size: 100% 25%;
  background-repeat: no-repeat;
  background-position: bottom center; }
@media screen and (min-width: 25.556rem) {
  #root .u-grid-between-space, #root .u-grid-between-gutt {
    margin-top: -1.25rem;
    margin-right: -1.25rem;
    margin-left: -1.25rem; } }
  @media screen and (min-width: 25.556rem) and (min-width: 47.5rem) {
    #root .u-grid-between-space\@large, #root .u-grid-between-gutt\@large {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }
  @media screen and (min-width: 25.556rem) and (max-width: 47.5rem) {
    #root .u-grid-between-space\@small, #root .u-grid-between-gutt\@small {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }

@media screen and (max-width: 25.556rem) {
  #root .u-grid-between-space, #root .u-grid-between-gutt {
    margin-top: -0.625rem;
    margin-right: -0.625rem;
    margin-left: -0.625rem; } }
  @media screen and (max-width: 25.556rem) and (min-width: 47.5rem) {
    #root .u-grid-between-space\@large, #root .u-grid-between-gutt\@large {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }
  @media screen and (max-width: 25.556rem) and (max-width: 47.5rem) {
    #root .u-grid-between-space\@small, #root .u-grid-between-gutt\@small {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }

#root .u-grid-between-space-tiny, #root .u-grid-between-gutt-tiny {
  margin-top: -0.3125rem;
  margin-right: -0.625rem;
  margin-left: -0.3125rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-grid-between-space-tiny\@large, #root .u-grid-between-gutt-tiny\@large {
      margin-top: -0.3125rem;
      margin-right: -0.625rem;
      margin-left: -0.3125rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-grid-between-space-tiny\@small, #root .u-grid-between-gutt-tiny\@small {
      margin-top: -0.3125rem;
      margin-right: -0.625rem;
      margin-left: -0.3125rem; } }
#root .u-grid-between-space-sm, #root .u-grid-between-gutt-sm {
  margin-top: -0.625rem;
  margin-right: -0.625rem;
  margin-left: -0.625rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-grid-between-space-sm\@large, #root .u-grid-between-gutt-sm\@large {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-grid-between-space-sm\@small, #root .u-grid-between-gutt-sm\@small {
      margin-top: -0.625rem;
      margin-right: -0.625rem;
      margin-left: -0.625rem; } }
#root .u-grid-between-space-fixed, #root .u-grid-between-gutt-fixed {
  margin-top: -1.25rem;
  margin-right: -1.25rem;
  margin-left: -1.25rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-grid-between-space-fixed\@large, #root .u-grid-between-gutt-fixed\@large {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-grid-between-space-fixed\@small, #root .u-grid-between-gutt-fixed\@small {
      margin-top: -1.25rem;
      margin-right: -1.25rem;
      margin-left: -1.25rem; } }
@media screen and (min-width: 25.556rem) {
  #root .u-grid-between-space-2x, #root .u-grid-between-space-lg, #root .u-grid-between-gutt-2x, #root .u-grid-between-gutt-lg {
    margin-top: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-between-space-2x, #root .u-grid-between-space-lg, #root .u-grid-between-gutt-2x, #root .u-grid-between-gutt-lg {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-space-2x\@large, #root .u-grid-between-space-lg\@large, #root .u-grid-between-gutt-2x\@large, #root .u-grid-between-gutt-lg\@large {
    margin-top: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-space-2x\@large, #root .u-grid-between-space-lg\@large, #root .u-grid-between-gutt-2x\@large, #root .u-grid-between-gutt-lg\@large {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-space-2x\@small, #root .u-grid-between-space-lg\@small, #root .u-grid-between-gutt-2x\@small, #root .u-grid-between-gutt-lg\@small {
    margin-top: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-space-2x\@small, #root .u-grid-between-space-lg\@small, #root .u-grid-between-gutt-2x\@small, #root .u-grid-between-gutt-lg\@small {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem; } }

@media screen and (min-width: 25.556rem) {
  #root .u-grid-between-space > * {
    padding: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-between-space > * {
    padding: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-space\@large > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-space\@large > * {
    padding: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-space\@small > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-space\@small > * {
    padding: 0.625rem; } }

#root .u-grid-between-space-tiny > * {
  padding: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-between-space-tiny\@large > * {
    padding: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-between-space-tiny\@small > * {
    padding: 0.3125rem; } }
#root .u-grid-between-space-sm > * {
  padding: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-between-space-sm\@large > * {
    padding: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-between-space-sm\@small > * {
    padding: 0.625rem; } }
#root .u-grid-between-space-fixed > * {
  padding: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-between-space-fixed\@large > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-between-space-fixed\@small > * {
    padding: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  #root .u-grid-between-space-2x > *, #root .u-grid-between-space-lg > * {
    padding: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-between-space-2x > *, #root .u-grid-between-space-lg > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-space-2x\@large > *, #root .u-grid-between-space-lg\@large > * {
    padding: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-space-2x\@large > *, #root .u-grid-between-space-lg\@large > * {
    padding: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-space-2x\@small > *, #root .u-grid-between-space-lg\@small > * {
    padding: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-space-2x\@small > *, #root .u-grid-between-space-lg\@small > * {
    padding: 1.25rem; } }

@media screen and (min-width: 25.556rem) {
  #root .u-grid-between-gutt > * {
    margin: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-between-gutt > * {
    margin: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-gutt\@large > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-gutt\@large > * {
    margin: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-gutt\@small > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-gutt\@small > * {
    margin: 0.625rem; } }

#root .u-grid-between-gutt-tiny > * {
  margin: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-between-gutt-tiny\@large > * {
    margin: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-between-gutt-tiny\@small > * {
    margin: 0.3125rem; } }
#root .u-grid-between-gutt-sm > * {
  margin: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-between-gutt-sm\@large > * {
    margin: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-between-gutt-sm\@small > * {
    margin: 0.625rem; } }
#root .u-grid-between-gutt-fixed > * {
  margin: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-between-gutt-fixed\@large > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-between-gutt-fixed\@small > * {
    margin: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  #root .u-grid-between-gutt-2x > *, #root .u-grid-between-gutt-lg > * {
    margin: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-between-gutt-2x > *, #root .u-grid-between-gutt-lg > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-gutt-2x\@large > *, #root .u-grid-between-gutt-lg\@large > * {
    margin: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-gutt-2x\@large > *, #root .u-grid-between-gutt-lg\@large > * {
    margin: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-between-gutt-2x\@small > *, #root .u-grid-between-gutt-lg\@small > * {
    margin: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-between-gutt-2x\@small > *, #root .u-grid-between-gutt-lg\@small > * {
    margin: 1.25rem; } }

@media screen and (min-width: 25.556rem) {
  #root .u-grid-space > * {
    padding: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-space > * {
    padding: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-space\@large > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-space\@large > * {
    padding: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-space\@small > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-space\@small > * {
    padding: 0.625rem; } }

#root .u-grid-space-tiny > * {
  padding: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-space-tiny\@large > * {
    padding: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-space-tiny\@small > * {
    padding: 0.3125rem; } }
#root .u-grid-space-sm > * {
  padding: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-space-sm\@large > * {
    padding: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-space-sm\@small > * {
    padding: 0.625rem; } }
#root .u-grid-space-fixed > * {
  padding: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-space-fixed\@large > * {
    padding: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-space-fixed\@small > * {
    padding: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  #root .u-grid-space-2x > *, #root .u-grid-space-lg > * {
    padding: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-space-2x > *, #root .u-grid-space-lg > * {
    padding: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-space-2x\@large > *, #root .u-grid-space-lg\@large > * {
    padding: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-space-2x\@large > *, #root .u-grid-space-lg\@large > * {
    padding: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-space-2x\@small > *, #root .u-grid-space-lg\@small > * {
    padding: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-space-2x\@small > *, #root .u-grid-space-lg\@small > * {
    padding: 1.25rem; } }

@media screen and (min-width: 25.556rem) {
  #root .u-grid-gutt > * {
    margin: 1.25rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-gutt > * {
    margin: 0.625rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-gutt\@large > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-gutt\@large > * {
    margin: 0.625rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-gutt\@small > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-gutt\@small > * {
    margin: 0.625rem; } }

#root .u-grid-gutt-tiny > * {
  margin: 0.3125rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-gutt-tiny\@large > * {
    margin: 0.3125rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-gutt-tiny\@small > * {
    margin: 0.3125rem; } }
#root .u-grid-gutt-sm > * {
  margin: 0.625rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-gutt-sm\@large > * {
    margin: 0.625rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-gutt-sm\@small > * {
    margin: 0.625rem; } }
#root .u-grid-gutt-fixed > * {
  margin: 1.25rem; }
@media screen and (min-width: 47.5rem) {
  #root .u-grid-gutt-fixed\@large > * {
    margin: 1.25rem; } }
@media screen and (max-width: 47.5rem) {
  #root .u-grid-gutt-fixed\@small > * {
    margin: 1.25rem; } }
@media screen and (min-width: 25.556rem) {
  #root .u-grid-gutt-2x > *, #root .u-grid-gutt-lg > * {
    margin: 2.5rem; } }
@media screen and (max-width: 25.556rem) {
  #root .u-grid-gutt-2x > *, #root .u-grid-gutt-lg > * {
    margin: 1.25rem; } }
@media screen and (min-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-gutt-2x\@large > *, #root .u-grid-gutt-lg\@large > * {
    margin: 2.5rem; } }
@media screen and (min-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-gutt-2x\@large > *, #root .u-grid-gutt-lg\@large > * {
    margin: 1.25rem; } }

@media screen and (max-width: 47.5rem) and (min-width: 25.556rem) {
  #root .u-grid-gutt-2x\@small > *, #root .u-grid-gutt-lg\@small > * {
    margin: 2.5rem; } }
@media screen and (max-width: 47.5rem) and (max-width: 25.556rem) {
  #root .u-grid-gutt-2x\@small > *, #root .u-grid-gutt-lg\@small > * {
    margin: 1.25rem; } }

#root .u-min-height-40 {
  min-height: 2.2222222222rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-40\@large {
      min-height: 2.2222222222rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-40\@small {
      min-height: 2.2222222222rem; } }
#root .u-min-height-300 {
  min-height: 16.6666666667rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-300\@large {
      min-height: 16.6666666667rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-300\@small {
      min-height: 16.6666666667rem; } }
#root .u-min-height-600 {
  min-height: 33.3333333333rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-600\@large {
      min-height: 33.3333333333rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-600\@small {
      min-height: 33.3333333333rem; } }
#root .u-min-height-900 {
  min-height: 50rem; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-900\@large {
      min-height: 50rem; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-900\@small {
      min-height: 50rem; } }
#root .u-min-height-quarter {
  min-height: 25vh; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-quarter\@large {
      min-height: 25vh; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-quarter\@small {
      min-height: 25vh; } }
#root .u-min-height-half {
  min-height: 50vh; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-half\@large {
      min-height: 50vh; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-half\@small {
      min-height: 50vh; } }
#root .u-min-height-full {
  min-height: 100vh; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-full\@large {
      min-height: 100vh; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-full\@small {
      min-height: 100vh; } }
#root .u-min-height-full-half {
  min-height: 150vh; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-full-half\@large {
      min-height: 150vh; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-full-half\@small {
      min-height: 150vh; } }
#root .u-min-height-full-full {
  min-height: 200vh; }
  @media screen and (min-width: 47.5rem) {
    #root .u-min-height-full-full\@large {
      min-height: 200vh; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-min-height-full-full\@small {
      min-height: 200vh; } }
#root .u-a-c.select > option {
  text-align: center; }
#root .u-circle {
  border-radius: 100%;
  overflow: hidden; }
  @media screen and (min-width: 47.5rem) {
    #root .u-circle\@large {
      border-radius: 100%;
      overflow: hidden; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-circle\@small {
      border-radius: 100%;
      overflow: hidden; } }
#root .u-bold, #root .u-b-bold, #root .u-bold-primary, #root .u-bold-primary-bold {
  font-weight: 700; }
#root .u-bold-primary-normal, #root .u-b-normal {
  font-weight: 700; }
#root .u-bold-primary-light, #root .u-b-light {
  font-weight: 700; }
#root .u-bold-secondary, #root .u-bold-secondary-bold {
  font-weight: 700; }
#root .u-bold-secondary-normal {
  font-weight: 700; }
#root .u-bold-secondary-light {
  font-weight: 700; }
#root .u-lh-1 {
  line-height: 1.5; }
#root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]) > :before, #root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]) > :after, #root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]) > * > :before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 100002;
  content: "";
  background-color: #FFF;
  margin-top: 0.5555555556rem;
  margin-left: -0.5555555556rem;
  width: 1.1111111111rem;
  height: 1.1111111111rem;
  border-radius: 50%;
  opacity: 0.7; }
@-webkit-keyframes spin {
  0% {
    -webkit-transform: translateX(-2.7777777778rem);
            transform: translateX(-2.7777777778rem); }
  33.3% {
    -webkit-transform: translateX(2.7777777778rem);
            transform: translateX(2.7777777778rem); }
  66.7% {
    -webkit-transform: translateX(0) translateY(-3.6111111111rem);
            transform: translateX(0) translateY(-3.6111111111rem); }
  100% {
    -webkit-transform: translateX(-2.7777777778rem) translateY(0);
            transform: translateX(-2.7777777778rem) translateY(0); } }
@keyframes spin {
  0% {
    -webkit-transform: translateX(-2.7777777778rem);
            transform: translateX(-2.7777777778rem); }
  33.3% {
    -webkit-transform: translateX(2.7777777778rem);
            transform: translateX(2.7777777778rem); }
  66.7% {
    -webkit-transform: translateX(0) translateY(-3.6111111111rem);
            transform: translateX(0) translateY(-3.6111111111rem); }
  100% {
    -webkit-transform: translateX(-2.7777777778rem) translateY(0);
            transform: translateX(-2.7777777778rem) translateY(0); } }
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@-webkit-keyframes fadeout-alt {
  from {
    opacity: .7; }
  to {
    opacity: 1; } }
@keyframes fadeout-alt {
  from {
    opacity: .7; }
  to {
    opacity: 1; } }
#root html:not(.js-menu-expanded) .u-loading[data-loadingtext]:before {
  content: attr(data-loadingtext); }
#root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]):before {
  font-family: "AlternateGothicPro-No3", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  content: "Loading";
  color: #565F73;
  font-size: 0.5rem; }
#root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]) > *:before {
  -webkit-animation: spin 1.8s ease-in-out 1.2s infinite;
          animation: spin 1.8s ease-in-out 1.2s infinite;
  background-color: #D1292E;
  -webkit-transform: translateX(-2.7777777778rem);
          transform: translateX(-2.7777777778rem); }
#root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]) > *:after {
  -webkit-animation: spin 1.8s ease-in-out .6s infinite;
          animation: spin 1.8s ease-in-out .6s infinite;
  background-color: #FF3111;
  -webkit-transform: translateX(-2.7777777778rem);
          transform: translateX(-2.7777777778rem); }
#root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]) > * > *:before {
  -webkit-animation: spin 1.8s ease-in-out 0s infinite;
          animation: spin 1.8s ease-in-out 0s infinite;
  background-color: #B21B1F;
  -webkit-transform: translateX(-2.7777777778rem);
          transform: translateX(-2.7777777778rem); }
#root html:not(.js-menu-expanded) .u-loading:not([data-loadingtext]):after {
  opacity: 1; }
#root .u-loading[data-loadingtext]:before {
  content: attr(data-loadingtext); }
#root .u-loading:not([data-loadingtext]):after {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: linear;
  transition-delay: 0;
  will-change: opacity;
  content: "";
  display: block;
  background-size: contain;
  max-width: 4.6666666667rem;
  height: 0;
  width: 100%;
  padding-bottom: 253.807106599%;
  position: absolute;
  z-index: 100001;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, calc(-50% - 5rem));
          transform: translate(-50%, calc(-50% - 5rem)); }
  @media screen and (min-width: 47.5rem) {
    #root .u-loading:not([data-loadingtext]):after {
      opacity: 0; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-loading:not([data-loadingtext]):after {
      opacity: 1; } }
#root .u-loading:before {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  color: #D1292E;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 2; }
#root .u-loading .c-page__main, #root .u-loading .c-page__main > * {
  -webkit-filter: blur(0.1666666667rem);
          filter: blur(0.1666666667rem); }
@media screen and (max-width: 47.5rem) {
  #root .js-menu-expanded .u-loading:not([data-loadingtext]):after {
    opacity: 0;
    transition-delay: 0;
    transition-duration: 10ms; } }
@media screen and (min-width: 47.5rem) {
  #root .u-size-grid-2-2 {
    width: calc(50% - 3.8888888889rem); } }
#root .o-flex.c-button--default {
  display: flex; }
#root .c-tout.js-transform:not(._show), #root .c-tout.js-show:not(._show), #root .c-tout.js-toggle-tout[aria-hidden="true"] {
  transition-duration: 300ms;
  transition-timing-fuction: ease-in;
  -webkit-transform: translateY(calc(-100% - 6.0555555556rem));
          transform: translateY(calc(-100% - 6.0555555556rem)); }
#root .c-tout.js-transform._show, #root .c-tout.js-show._show, #root .c-tout.js-toggle-tout[aria-hidden="false"] {
  transition-duration: 550ms;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-timing-fuction: cubic-bezier(0.1, 0.95, 0.67, 0.93); }
#root .c-tout.js-transform, #root .c-tout.js-show, #root .c-tout.js-toggle-tout {
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  will-change: transform; }
#root .c-tout.js-height {
  transition-duration: 2s;
  transition-timing-function: ease-in;
  overflow: hidden;
  will-change: transform;
  -webkit-transform: translateY(0);
          transform: translateY(0); }
  #root .c-tout.js-height[class*="animate"] {
    max-height: 0 !important; }
#root .c-tout.js-toggle-tout {
  display: block !important; }
#root .js-height.c-status-item__details:not([aria-hidden='true']) {
  transition-duration: 550ms;
  transition-timing-fuction: ease-in; }
#root .js-height.c-status-item__details[aria-hidden='true'] {
  transition-duration: 350ms;
  transition-timing-fuction: ease-out; }
#root .js-height.c-status-item__details {
  transition-property: max-height;
  will-change: max-height; }
#root .js-height.c-status-item__details {
  overflow: hidden;
  display: block; }
  #root .js-height.c-status-item__details[aria-hidden='true'] {
    max-height: 0 !important; }
@media screen and (max-width: 47.5rem) {
  #root .js-height.c-product-details__content {
    transition-property: max-height;
    will-change: max-height;
    overflow: hidden;
    display: block; }
    #root .js-height.c-product-details__content:not([aria-hidden='true']) {
      transition-duration: 550ms;
      transition-timing-fuction: ease-in; }
    #root .js-height.c-product-details__content[aria-hidden='true'] {
      transition-duration: 350ms;
      transition-timing-fuction: ease-out;
      max-height: 0 !important; }
  #root .js-height.c-product-details__content__content:not([aria-hidden="false"]) {
    display: block; } }
@media screen and (min-width: 47.5rem) {
  #root .js-height[style*="max-height"].c-product-details__content__content:not([aria-hidden="false"]), #root .js-height[style*="max-height"].c-product-details__content__content:not([aria-hidden="true"]) {
    max-height: auto !important; } }
#root #root-core {
  background-color: #B21B1F; }
#root .c-page__main {
  background-color: #FFF;
  color: #000; }
#root .c-page__footer {
  background-color: #D1292E;
  color: #FFF; }
#root .u-border-sections > * + * {
  border-top-color: #645E59; }
#root .c-header {
  background-color: #FFF;
  border-bottom: 1px solid #D1292E; }
  #root .c-header:before {
    background-color: #FFF; }
  @media screen and (min-width: 47.5rem) {
    #root .c-header {
      color: #000; } }
  @media screen and (max-width: 47.5rem) {
    #root .c-header__brand {
      background-color: #FFF;
      color: #000;
      border-top: 0.1111111111rem solid #D1292E;
      border-bottom: 0.0555555556rem solid #E5E3DF;
      position: fixed;
      top: 0; } }
@media screen and (max-width: 47.5rem) {
  #root .c-header-nav {
    background-color: #D1292E;
    color: #FFF; } }
@media screen and (max-width: 47.5rem) {
  #root .c-header-nav__group + #root .c-header-nav__group {
    border-top: 0.0555555556rem solid #B21B1F; } }
#root .u-bg-welcome-screen {
  background-color: #D1292E;
  color: #FFF; }
  #root .u-bg-welcome-screen .u-border-sections > * {
    border-color: #86A5B8; }
  #root .u-bg-welcome-screen .u-border-1 {
    border-top-color: rgba(255, 255, 255, 0.3); }
#root .c-block-offer .u-border {
  border-color: #E5E3DF; }
#root .c-page-status {
  background-color: #565F73; }
  #root .c-page-status .c-header-page-status, #root .c-page-status .c-icon-btn span {
    color: #FFF; }
@media screen and (max-width: 47.5rem) {
  #root .c-page-content__main .c-page-status {
    position: fixed;
    top: 3.3333333333rem;
    width: 100%; }
    #root .c-page-content__main .c-page-status:before {
      content: "";
      display: block;
      background-color: #86A5B8;
      width: 100%;
      height: 20vh;
      position: absolute;
      top: 0;
      -webkit-transform: translateY(calc(-100% + 2px));
              transform: translateY(calc(-100% + 2px)); }
    #root .c-page-content__main .c-page-status + * {
      margin-top: 2.2222222222rem; } }
@media screen and (min-width: 47.5rem) {
  #root .c-offer-list__item {
    margin-bottom: 2.2222222222rem; } }
@media screen and (max-width: 47.5rem) {
  #root .c-offer-list__item + .c-offer-list__item {
    margin-top: 1.6666666667rem; } }
#root [data-page="editprofile"] #currentPassword.c-input[type="password"][required]:valid:not(:placeholder-shown) {
  border-bottom-color: #E5E3DF; }
#root .u-center {
  margin-right: auto;
  margin-left: auto; }
  @media screen and (min-width: 47.5rem) {
    #root .u-center\@large {
      margin-right: auto;
      margin-left: auto; } }
  @media screen and (max-width: 47.5rem) {
    #root .u-center\@small {
      margin-right: auto;
      margin-left: auto; } }
#root .c-icon-btn {
  font-size: 1em; }
  #root .c-icon-btn--transparent {
    background: transparent;
    border-color: transparent; }
  #root .c-icon-btn > span, #root .c-icon-btn:hover > span, #root .c-icon-btn:focus > span, #root .c-icon-btn:active > span {
    color: inherit; }
  #root .c-icon-btn:before {
    font-size: 1.25em; }
#root .c-password {
  position: relative; }
  #root .c-password__input {
    padding-right: 1.6666666667rem; }
  #root .c-password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 0;
    padding-left: 0;
    z-index: 10; }
    #root .c-password__toggle[data-toggled="true"]:before {
      content: "e"; }
#root .c-radio-select__label {
  overflow: hidden; }
#root .c-radio-select svg, #root .c-radio-select svg * {
  fill: currentColor; }
#root .c-radio-select .u-glyph-before[data-icon] {
  min-height: 3.0555555556rem;
  position: relative;
  height: 100%; }
  #root .c-radio-select .u-glyph-before[data-icon]:before {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
#root .c-radio-select--paypal .u-glyph-before[data-icon]:before {
  font-size: 4.4444444444rem;
  line-height: 2.9444444444rem; }
#root .c-radio-select--mastercard .u-glyph-before[data-icon]:before {
  font-size: 6.9444444444rem;
  line-height: 2.9444444444rem; }